Merge pull request #31 from contentstack/next

feat: jsonToHTML style attr resolution

Author: nadeem-cs

.github/workflows/sast-scan.yml

@@ -30,45 +30,45 @@ To render embedded items on the front-end, use the renderOptions function, and d
 const renderOption = {
 	// to render Supercharged RTE NodeType content like paragraph, link, table, order list, un-order list and more.
 	p: (node, next) => {
-		`<p class='class-id'>${next(node.children)}</p>` // you will need to call next function with node children contents
-	}
+		return `<p class='class-id'>${next(node.children)}</p>` // you will need to call next function with node children contents
+	},
 	h1: (node, next) => {
-		`<h1 class='class-id'>${next(node.children)}</h1>` // you will need to call next function with node children contents
-	}
+		return `<h1 class='class-id'>${next(node.children)}</h1>` // 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) => {
-		`<b>${next(node.children)}</b>`
-	}
+		return `<b>${next(node.children)}</b>`
+	},
 	// to render block-type embedded items  
 	block: {  
 		'product': (item, metadata) => {  
-			`<div>  
-			<h2 >${item.title}</h2>  
-			<img src=${item.product_image.url} alt=${item.product_image.title}/>  
-			<p>${item.price}</p>  
-			</div>`  
+			return `<div>  
+					<h2 >${item.title}</h2>  
+					<img src=${item.product_image.url} alt=${item.product_image.title}/>  
+					<p>${item.price}</p>  
+					</div>`  
 		},
 		// to render the default  
 		'$default': (item, metadata) => {  
-			`<div>  
-			<h2>${item.title}</h2>  
-			<p>${item.description}</p>  
-			</div>`
+			return `<div>  
+					<h2>${item.title}</h2>  
+					<p>${item.description}</p>  
+					</div>`
 		}  
 	},
 	// to display inline embedded items  
 	inline: {  
 		'$default': (item, metadata) => {  
-			`<span><b>${item.title}</b> - ${item.description}</span>`
+			return `<span><b>${item.title}</b> - ${item.description}</span>`
 		}  
 	},
 	// to display embedded items inserted via link  
 	link: (item, metadata) => {  
-		`<a href="${metadata.attributes.href}">${metadata.text}</a>`
+		return `<a href="${metadata.attributes.href}">${metadata.text}</a>`
 	},
 	// to display assets  
 	display: (item, metadata) => {  
-		`<img src=${metadata.attributes.src} alt=${metadata.alt} />`
+		return `<img src=${metadata.attributes.src} alt=${metadata.alt} />`
 	}  
 }
 ```
@@ -104,7 +104,7 @@ Contentstack.Utils.render({ entry, path: ["rte_fieldUid", "group.rteFieldUID"],
 ```
 
 #### Render Supercharged RTE contents
-To get a single entry, you need to provide the stack API key, environment name, delivery token, content type and entry UID. Then, use `Contentstack.Utils.jsonToHtml` function as shown below:
+To get a single entry, you need to provide the stack API key, environment name, delivery token, content type and entry UID. Then, use `Contentstack.Utils.jsonToHTML` function as shown below:
 ```js
 import * as Contentstack from  'contentstack'  
 const stack = Contentstack.Stack({  
@@ -117,7 +117,7 @@ stack.ContentType('<CONTENT_TYPE_UID>')
 	 .toJSON()  
 	 .fetch()  
 	 .then(entry => {  
-			Contentstack.Utils.jsonToHtml({ 
+			Contentstack.Utils.jsonToHTML({ 
 				entry, 
 				path: ["rte_fieldUid", "group.rteFieldUID"], 
 				renderOption 
@@ -155,7 +155,7 @@ stack.ContentType('<CONTENT_TYPE_UID>')
 ```
 
 #### Render Supercharged RTE contents
-To get a multiple entries, you need to provide the stack API key, environment name, delivery token, content type and entry UID. Then, use `Contentstack.Utils.jsonToHtml` function as shown below:
+To get a multiple entries, you need to provide the stack API key, environment name, delivery token, content type and entry UID. Then, use `Contentstack.Utils.jsonToHTML` function as shown below:
 ```js
 import * as Contentstack from  'contentstack'  
 const stack = Contentstack.Stack({  
@@ -170,7 +170,7 @@ stack.ContentType('<CONTENT_TYPE_UID>')
 	 .find()  
 	 .then(result => {  
 		result.forEach(entry => {  
-			Contentstack.Utils.jsonToHtml({ 
+			Contentstack.Utils.jsonToHTML({ 
 				entry, 
 				path: ["rte_fieldUid", "group.rteFieldUID"], 
 				renderOption 

.github/workflows/secrets-scan.yml

@@ -19,18 +19,35 @@ const imgNode: Node = {
 
 }
 
+const imgNodeWithURL: Node = {
+    type: NodeType.IMAGE,
+    attrs: {url: "https://image.url/Donald.jog.png"},
+    children:[]
+
+}
+
 const linkNode: Node = {
     type: NodeType.LINK,
     attrs: {href: "https://image.url/Donald.jog.png"},
     children:[]
 
 }
 
+const linkNodeWithURL: Node = {
+    type: NodeType.LINK,
+    attrs: {url: "https://image.url/Donald.jog.png"},
+    children:[]
+
+}
+
 const embedNode: Node = {
     type: NodeType.EMBED,
-    "attrs": {
-      src: "https://www.youtube.com/"
-    },
+    attrs: { src: "https://www.youtube.com/" },
+    children: []
+}
+const embedNodeWithURL: Node = {
+    type: NodeType.EMBED,
+    attrs: { url: "https://www.youtube.com/" },
     children: []
 }
 
@@ -54,6 +71,15 @@ describe('Default node render options', () => {
         expect(renderString).toEqual('<iframe src="https://www.youtube.com/">text</iframe>')
         done()
     })
+    it('Should return link string with url as attr', done => {
+        let renderString = (defaultNodeOption[NodeType.LINK] as RenderNode)(linkNodeWithURL, next)
+        expect(renderString).toEqual(`<a href="${linkNodeWithURL.attrs.url}">text</a>`)
+        renderString = (defaultNodeOption[NodeType.IMAGE] as RenderNode)(imgNodeWithURL, next)
+        expect(renderString).toEqual(`<img src="${imgNodeWithURL.attrs.url}" />text`)
+        renderString = (defaultNodeOption[NodeType.EMBED] as RenderNode)(embedNodeWithURL, next)
+        expect(renderString).toEqual(`<iframe src="${embedNodeWithURL.attrs.url}">text</iframe>`)
+        done()
+    })
     it('Should return Heading string', done => {
         let renderString = (defaultNodeOption[NodeType.HEADING_1] as RenderNode)(node, next)
         expect(renderString).toEqual('<h1>text</h1>')

README.md

@@ -1,6 +1,6 @@
 import StyleType from '../src/embedded-types/style-type';
 import { defaultOptions } from '../src/options/default-options';
-import { entryContentBlank, entryContentURL, entryContentTitle, entryContentTitleURL } from './mock/entry-mock';
+import { entryContentBlank, entryContentURL, entryContentTitle, entryContentTitleURL, entryContentURLWithoutSystemUid, entryContentURLWithSystemNoUid } from './mock/entry-mock';
 import { RenderItem } from '../src/options/index';
 import { assetContentBlank, 
     assetContentUrl,
@@ -51,6 +51,11 @@ describe('Default Option test', () => {
         done()
     })
 
+    it('Default options Entry with only uid, url, system-uid test', done => {
+        expect(entryBlockFunction(entryContentURLWithoutSystemUid, embedAttributes)).toEqual(`<div><p>${entryContentURLWithoutSystemUid.uid}</p><p>Content type: <span></span></p></div>`)
+        done()
+    })
+
     it('Default options Asset with only uid test', done => {
         expect(assetDisplaableFunction(assetContentBlank, embedAttributes)).toEqual(`<img src="undefined" alt="${assetContentBlank.uid}" />`)
         expect(assetDownloadFunction(assetContentBlank, embedAttributes)).toEqual(`<a href="undefined\">${assetContentBlank.uid}</a>`)

__test__/default-node-options.test.ts

@@ -1,25 +1,26 @@
 import { jsonToHTML } from '../src/json-to-html'
 import { embeddedAssetWithRenderOption } from './mock/render-options'
 import { 
-    plainTextJson,
-    paragraphEntry, 
-    embeddedAssetJsonEntry, 
-    paragraphJsonArrayEntry, 
+    blockquoteJson,
+    codeJson,
+    embeddedAssetJsonEntry,
     h1Json,
     h2Json,
     h3Json,
     h4Json,
     h5Json,
     h6Json,
-    orderListJson,
-    unorderListJson,
     imgJson,
     imgJsonURL,
-    tableJson,
-    blockquoteJson,
-    codeJson,
     linkInPJson,
-    linkInPJsonUrl} from './mock/json-element-mock'
+    linkInPJsonUrl,
+    orderListJson,
+    paragraphEntry,
+    paragraphJsonArrayEntry,
+    plainTextJson,
+    styleinPJson,
+    tableJson,
+    unorderListJson} from './mock/json-element-mock'
 import {
     blockquoteHtml,
     codeHtml,
@@ -35,6 +36,7 @@ import {
     orderListHtml,
     paragraphHtml,
     plainTextHtml, 
+    styleinPHtml, 
     tableHtml, 
     unorderListHtml} from './mock/json-element-mock-result'
 describe('Node parser paragraph content', () => {
@@ -493,3 +495,22 @@ describe('Node parse link in paragraph content', () => {
         done()
     })
 })
+
+
+describe('Node parse style attribute', () => {
+    it('Should return style attribute in paragraph html content', done => {
+        const entry = {
+            uid: 'entry_uid_19',
+            supercharged_rte: {
+                ...styleinPJson
+            },
+            _embedded_items: {}
+        }
+        const paths = ['supercharged_rte']
+
+        jsonToHTML({ entry, paths})
+
+        expect(entry.supercharged_rte).toEqual(styleinPHtml)
+        done()
+    })
+})

__test__/default-options.test.ts

@@ -23,6 +23,17 @@ export const entryContentTitleURL = {
     _content_type_uid: "content_type_uid"
 }
 
+export const entryContentURLWithoutSystemUid = {
+  uid: "uid",
+  url: "url"
+}
+
+export const entryContentURLWithSystemNoUid = {
+  uid: "uid",
+  url: "url",
+  system: { url: "system_uid"}
+}
+
 export const assetDownloadJson = { 
   type: 'asset',
   'data-sys-asset-uid': 'asset_uid_1',

__test__/json-to-html.test.ts

@@ -6,14 +6,15 @@ const h3Html = "<h3><strong><em><u><sub>Mauris venenatis dui id massa sollicitud
 const h4Html = "<h4><strong><em><u><sub>MaNullam feugiat turpis quis elit interdum, vitae laoreet quam viverra</sub></u></em></strong></h4>"
 const h5Html = "<h5>Mauris venenatis dui id massa sollicitudin, non bibendum nunc dictum.</h5>"
 const h6Html = "<h6>Nunc porta diam vitae purus semper, ut consequat lorem vehicula.</h6>"
-const orderListHtml = "<ol><li>Morbi in quam molestie, fermentum diam vitae, bibendum ipsum.</li><li>Pellentesque mattis lacus in quam aliquam congue</li><li>Integer feugiat leo dignissim, lobortis enim vitae, mollis lectus.</li><li>Sed in ante lacinia, molestie metus eu, fringilla sapien.</li></ol>"
+const orderListHtml = "<ol><li style=\"text-align:justify;\">Morbi in quam molestie, fermentum diam vitae, bibendum ipsum.</li><li style=\"text-align:justify;\">Pellentesque mattis lacus in quam aliquam congue</li><li style=\"text-align:justify;\">Integer feugiat leo dignissim, lobortis enim vitae, mollis lectus.</li><li style=\"text-align:justify;\">Sed in ante lacinia, molestie metus eu, fringilla sapien.</li></ol>"
 const unorderListHtml = "<ul><li>Sed quis metus sed mi hendrerit mollis vel et odio.</li><li>Integer vitae sem dignissim, elementum libero vel, fringilla massa.</li><li>Integer imperdiet arcu sit amet tortor faucibus aliquet.</li><li>Aenean scelerisque velit vitae dui vehicula, at congue massa sagittis.</li></ul>"
 const imgHtml = "<img src=\"https://image.url/Donald.jog.png\" />"
 const tableHtml = "<table><thead><tr><th><p>Header 1</p></th><th><p>Header 2</p></th></tr></thead><tbody><tr><td><p>Body row 1 data 1</p></td><td><p>Body row 1 data 2</p></td></tr><tr><td><p>Body row 2 data 1</p></td><td><p>Body row 2 data 2</p></td></tr></tbody></table>"
 const blockquoteHtml = "<blockquote>Praesent eu ex sed nibh venenatis pretium.</blockquote>"
 const codeHtml = "<code>Code template.</code>"
 const linkInPHtml = "<strong><em><u><sub></sub></u></em></strong><a href=\"LINK.com\">LINK</a>"
-const linkInPURLHtml = "<strong><em><u><sub></sub></u></em></strong><a href=\"LINK.com\" target=\"_self\">LINK</a>"
+const linkInPURLHtml = "<strong><em><u><sub></sub></u></em></strong><a href=\"LINK.com\" target=\"_blank\">LINK</a>"
+const styleinPHtml = "<p style=\"text-align:right;\">This is <span>second</span> <u>JSON</u> entry</p><p style=\"text-align:left;\"><a href=\"example.com\" target=\"_blank\">Example</a></p>"
 
 export {
     h1Html,
@@ -32,4 +33,5 @@ export {
     linkInPURLHtml,
     blockquoteHtml,
     unorderListHtml,
+    styleinPHtml,
 }

__test__/mock/entry-mock.ts

@@ -664,7 +664,7 @@ const linkInPJsonUrl = {
           "type": "a",
           "attrs": {
               "url": "LINK.com",
-              "target": "_self"
+              "target": "_blank"
           },
           "children": [
               {
@@ -681,6 +681,53 @@ const linkInPJsonUrl = {
   type: "doc"
 }
 
+const styleinPJson = {
+  type: 'doc',
+  attrs: {},
+  uid: '7611f269eb4e4f4e9a0c8274decd1e0a',
+  children: [
+    {
+      type: 'p',
+      attrs: {
+        style: { 'text-align': 'right' },
+        'redactor-attributes': {},
+        dir: 'ltr'
+      },
+      uid: '24b09a8e7efa42a2a909cfbc4da403b1',
+      children: [
+        { text: 'This is ' },
+        { text: 'second', inlineCode: true },
+        { text: ' ' },
+        { text: 'JSON', underline: true },
+        { text: ' entry' }
+      ]
+    },
+    {
+      type: 'p',
+      attrs: {
+        style: { 'text-align': 'left' },
+        'redactor-attributes': {},
+        dir: 'ltr'
+      },
+      uid: '7eb3984120fe4f3ea18fdeff84326ff4',
+      children: [
+        { text: '' },
+        {
+          uid: '76aa06b02ec64a44bd6a0f4ccde11b6a',
+          type: 'a',
+          attrs: {
+            url: 'example.com',
+            target: '_blank'
+          },
+          children: [ { text: 'Example' } ]
+        },
+        { text: '' }
+      ]
+    }
+  ],
+  _version: 6
+}
+
 const assetReferenceJson = {
     uid: "node_uid_12",
     _version: 1,
@@ -1030,6 +1077,7 @@ export {
   tableJson,
   linkInPJson,
   linkInPJsonUrl,
+  styleinPJson,
   plainTextJson,
   paragraphJson, 
   orderListJson,