Merge pull request #29 from contentstack/fix/CS-39436-jsonToHTML-style-attr

Fixes issue  CS-39436 jsonToHtml style attr

Author: nadeem-cs

.github/workflows/sast-scan.yml

@@ -1 +1 @@
-* @contentstack/security-admin @contentstack/sdk-admin
+* @contentstack/security-admin

.github/workflows/secrets-scan.yml

@@ -1,7 +1,7 @@
 The MIT License (MIT)
 
 
-Copyright (c) 2016-2022 Contentstack
+Copyright (c) 2016-2023 Contentstack
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

CODEOWNERS

@@ -27,48 +27,48 @@ Let’s learn how you can use Utils SDK to render RTE embedded items and Superch
 ### Create Render Option
 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 renderOptions = {
+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 

LICENSE

@@ -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()
+    })
+})

README.md

@@ -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__/json-to-html.test.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,