From ff5939c71c62f93adc3c44a657838c8473cb48f7 Mon Sep 17 00:00:00 2001 From: Shenouda Farouk Date: Wed, 16 Feb 2022 18:54:05 +0200 Subject: [PATCH] adding renderRichtext option to render html --- package-lock.json | 45 +++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/Contentfully.ts | 13 +++++++++++-- src/QueryOptions.ts | 1 + 4 files changed, 58 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index b357be7..6ef1f51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "2.5.1", "license": "MIT", "dependencies": { + "@contentful/rich-text-html-renderer": "^15.11.1", "@nascentdigital/scribe": "^0.11.2", "contentful": "^9.1.3", "contentful-management": "^7.44.2", @@ -616,6 +617,26 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "node_modules/@contentful/rich-text-html-renderer": { + "version": "15.11.1", + "resolved": "https://registry.npmjs.org/@contentful/rich-text-html-renderer/-/rich-text-html-renderer-15.11.1.tgz", + "integrity": "sha512-DkvApk+spkxECmosGoA8Rmznv59Kmu633Ngm4QnIAt3yTF/Q6nox6/+v4Gv9YAwjYpw/01rXGFIUaP2p7m1fJA==", + "dependencies": { + "@contentful/rich-text-types": "^15.11.1", + "escape-html": "^1.0.3" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@contentful/rich-text-types": { + "version": "15.11.1", + "resolved": "https://registry.npmjs.org/@contentful/rich-text-types/-/rich-text-types-15.11.1.tgz", + "integrity": "sha512-seO8Nl9cp894v7an6R8isX+HqYwVUesviGULTh/rIj2DCv2tXUU1GCqzSkt84XN6c6nbFYow9+Wzezkxx/IdIA==", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -2156,6 +2177,11 @@ "node": ">=6" } }, + "node_modules/escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" + }, "node_modules/escape-string-regexp": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz", @@ -6416,6 +6442,20 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "@contentful/rich-text-html-renderer": { + "version": "15.11.1", + "resolved": "https://registry.npmjs.org/@contentful/rich-text-html-renderer/-/rich-text-html-renderer-15.11.1.tgz", + "integrity": "sha512-DkvApk+spkxECmosGoA8Rmznv59Kmu633Ngm4QnIAt3yTF/Q6nox6/+v4Gv9YAwjYpw/01rXGFIUaP2p7m1fJA==", + "requires": { + "@contentful/rich-text-types": "^15.11.1", + "escape-html": "^1.0.3" + } + }, + "@contentful/rich-text-types": { + "version": "15.11.1", + "resolved": "https://registry.npmjs.org/@contentful/rich-text-types/-/rich-text-types-15.11.1.tgz", + "integrity": "sha512-seO8Nl9cp894v7an6R8isX+HqYwVUesviGULTh/rIj2DCv2tXUU1GCqzSkt84XN6c6nbFYow9+Wzezkxx/IdIA==" + }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -7719,6 +7759,11 @@ "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", "dev": true }, + "escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" + }, "escape-string-regexp": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz", diff --git a/package.json b/package.json index 7bd1ff7..7148aaf 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "dev": "tsc -w" }, "dependencies": { + "@contentful/rich-text-html-renderer": "^15.11.1", "@nascentdigital/scribe": "^0.11.2", "contentful": "^9.1.3", "contentful-management": "^7.44.2", diff --git a/src/Contentfully.ts b/src/Contentfully.ts index 0f9c49a..dad1387 100644 --- a/src/Contentfully.ts +++ b/src/Contentfully.ts @@ -17,7 +17,7 @@ import {IContentfulClient} from './contentful' import {ContentModel, RichText} from './entities' import {MediaTransform, QueryOptions} from './QueryOptions' import {QueryResult} from './QueryResult' - +import { documentToHtmlString } from '@contentful/rich-text-html-renderer'; // constants export const DEFAULT_OPTIONS: Readonly = { @@ -61,6 +61,7 @@ export class Contentfully { public readonly contentfulClient: IContentfulClient public readonly options: Readonly> + public renderRichtext: boolean public constructor(client: IContentfulClient, options: Readonly> = DEFAULT_OPTIONS) { @@ -68,6 +69,7 @@ export class Contentfully { // initialize instance variables this.contentfulClient = client this.options = options + this.renderRichtext = false } public async getEntry( @@ -104,6 +106,9 @@ export class Contentfully { // parse includes const links = await this._createLinks(entries, multiLocale, options.mediaTransform) + if(options.renderRichtext) { + this.renderRichtext = options.renderRichtext + } // parse core entries let items = this._parseEntries(entries.items, links, multiLocale) @@ -388,7 +393,7 @@ export class Contentfully { return this._dereferenceLink(value, links, locale) } - private _parseRichTextValue(value: EntryFields.RichText, links: any, locale?: string): RichText[] | undefined { + private _parseRichTextValue(value: any, links: any, locale?: string): RichText[] | undefined | string{ // resolve content list const {content} = value @@ -398,6 +403,10 @@ export class Contentfully { return undefined } + if(this.renderRichtext) { + return documentToHtmlString(value) + } + return this._parseRichTextContent(content, links, locale) } diff --git a/src/QueryOptions.ts b/src/QueryOptions.ts index b613db6..e86eb19 100644 --- a/src/QueryOptions.ts +++ b/src/QueryOptions.ts @@ -7,4 +7,5 @@ export type MediaTransform = (media: Media) => Promise export interface QueryOptions { mediaTransform?: MediaTransform flatten?: boolean + renderRichtext?: boolean }