diff --git a/CHANGELOG.md b/CHANGELOG.md index a2ba45d..3edc932 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,6 @@ # Changelog +## [1.3.16](https://github.com/contentstack/contentstack-utils-javascript/tree/v1.3.16) (2024-12-11) + - Fix: Updated rendorOption code block in reaadme file ## [1.3.15](https://github.com/contentstack/contentstack-utils-javascript/tree/v1.3.15) (2024-11-18) - Fix: Added Table merge cell functionality diff --git a/README.md b/README.md index 112559a..26d3197 100644 --- a/README.md +++ b/README.md @@ -23,48 +23,61 @@ Let’s learn how you can use Utils SDK to render RTE embedded items and Superch To render embedded items on the front-end, use the renderOptions function, and define the UI elements you want to show in the front-end of your website, as shown in the example below: ```js const renderOption = { - // to render Supercharged RTE NodeType content like paragraph, link, table, order list, un-order list and more. - p: (node, next) => { - return `

${next(node.children)}

` // you will need to call next function with node children contents - }, - h1: (node, next) => { - return `

${next(node.children)}

` // you will need to call next function with node children contents - }, - // to render Supercharged RTE MarkType content like bold, italic, underline, strikethrough, inlineCode, subscript, and superscript - bold: (text) => { - return `${next(node.children)}` - }, - // to render block-type embedded items - block: { - 'product': (item, metadata) => { - return `
-

${item.title}

- ${item.product_image.title}/ -

${item.price}

-
` - }, - // to render the default - '$default': (item, metadata) => { - return `
-

${item.title}

-

${item.description}

-
` - } - }, - // to display inline embedded items - inline: { - '$default': (item, metadata) => { - return `${item.title} - ${item.description}` - } - }, - // to display embedded items inserted via link - link: (item, metadata) => { - return `${metadata.text}` - }, - // to display assets - display: (item, metadata) => { - return `${metadata.alt}` - } + // To render paragraph nodes + p: (node, next) => `

${next(node.children)}

`, + // To render heading level 1 nodes + h1: (node, next) => `

${next(node.children)}

`, + // To render bold text + bold: (text) => `${text}`, + // To render block-type embedded items + block: { + product: (item) => + `
+

${item.title}

+ ${item.product_image.title} +

${item.price}

+
`, + $default: (item) => + `
+

${item.title}

+

${item.description}

+
`, + }, + // To render inline embedded items + inline: { + $default: (item) => + `${item.title} - ${item.description}`, + }, + // To render link (a) nodes + a: (node) => { + const { attrs, children } = node; + const childText = children.map((child) => child.text || '').join(''); + return `${childText}`; + }, + // To render embedded assets + display: (item, metadata) => { + const { attributes } = metadata; + return `${attributes.alt || 'Asset'}`; + }, + // To render embedded entry & asset references + reference: (node) => { + const { attrs, children } = node; + const childText = children.map((child) => child.text || '').join(''); + if (attrs.type === 'entry') { + return `${childText}`; + } else if (attrs.type === 'asset') { + if (attrs['display-type'] === 'link') { + return `${attrs['asset-name'] || 'View Asset'}`; + } + + if (attrs['display-type'] === 'display') { + return `${attrs['asset-alt'] || attrs['asset-name']}`; + } + } + return childText; // Fallback for unknown references + }, + // Default handler for unknown nodes + default: (node, next) => `
${next(node.children)}
`, } ``` diff --git a/package-lock.json b/package-lock.json index aaef3a7..1f48aba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@contentstack/utils", - "version": "1.3.15", + "version": "1.3.16", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@contentstack/utils", - "version": "1.3.15", + "version": "1.3.16", "license": "MIT", "devDependencies": { "@babel/preset-env": "^7.26.0", diff --git a/package.json b/package.json index 294c75a..c159b0c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@contentstack/utils", - "version": "1.3.15", + "version": "1.3.16", "description": "Contentstack utilities for Javascript", "main": "dist/index.es.js", "types": "dist/types/index.d.ts",