fix: 🐛 jsontohtml style attr fix

Author: nadeem-cs

__test__/json-to-html.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__/mock/json-element-mock-result.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/json-element-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,