Merge pull request #188 from contentstack/development

Enhance break and newline handling, update dependencies

Author: nadeem-cs

.talismanrc

@@ -3,7 +3,7 @@ fileignoreconfig:
   ignore_detectors:
     - filecontent
 - filename: package-lock.json
-  checksum: 88174adc8b9dcedecf549defe09988aa4ca95940801e923d829123ba2f3ef6f4
+  checksum: f5a5aba11ae3778465d1c001151fefa136629e136a7037fbb70fc7c738cb9d36
 - filename: src/entry-editable.ts
   checksum: 3ba7af9ed1c1adef2e2bd5610099716562bebb8ba750d4b41ddda99fc9eaf115
 - filename: .husky/pre-commit

__test__/json-to-html.test.ts

@@ -34,7 +34,11 @@ import {
     testJsonRte,
     testJsonAsset,
     embeddedAssetAsLinkJsonEntry,
-    escapeJsonHtml } from './mock/json-element-mock'
+    escapeJsonHtml,
+    breakTestEntry,
+    newlineBreakTestEntry,
+    multipleNewlinesBreakTestEntry,
+    plainNewlineTestEntry } from './mock/json-element-mock'
 import {
     blockquoteHtml,
     codeHtml,
@@ -50,19 +54,23 @@ import {
     orderListHtml,
     paragraphHtml,
     paragraphHtmlWithNewLine,
-    plainTextHtml, 
-    styleinPHtml, 
-    tableHtml, 
+    plainTextHtml,
+    styleinPHtml,
+    tableHtml,
     unorderListHtml,
     plainTextHtmlWithClass,
     plainTextHtmlWithId,
     htmlTextIdInAttrs,
     classAndIdAttrsHtml,
-    styleObjHtml, 
+    styleObjHtml,
     referenceObjHtml,
     referenceObjHtmlBlock,
     imagetags,
-    escapeHtml } from './mock/json-element-mock-result'
+    escapeHtml,
+    breakTestHtml,
+    newlineBreakTestHtml,
+    multipleNewlinesBreakTestHtml,
+    plainNewlineTestHtml } from './mock/json-element-mock-result'
 describe('Node parser paragraph content', () => {
     it('Should accept proper values', done => {
         const entry = { uid: 'uid'}
@@ -682,4 +690,59 @@ describe('Node parse json_rte Content', () => {
         expect(entry.json_rte).toEqual(imagetags)
         done()
     })
+})
+
+describe('Break and Newline handling tests', () => {
+    it('Should handle break flag in text nodes correctly', done => {
+        const entry = {...breakTestEntry}
+        const paths = ['rich_text_editor']
+        
+        jsonToHTML({ entry, paths })
+        
+        expect(entry.rich_text_editor).toEqual(breakTestHtml)
+        done()
+    })
+
+    it('Should handle newline with break flag without duplication', done => {
+        const entry = {...newlineBreakTestEntry}
+        const paths = ['rich_text_editor']
+        
+        jsonToHTML({ entry, paths })
+        
+        expect(entry.rich_text_editor).toEqual(newlineBreakTestHtml)
+        done()
+    })
+
+    it('Should handle multiple newlines with break flag correctly', done => {
+        const entry = {...multipleNewlinesBreakTestEntry}
+        const paths = ['rich_text_editor']
+        
+        jsonToHTML({ entry, paths })
+        
+        expect(entry.rich_text_editor).toEqual(multipleNewlinesBreakTestHtml)
+        done()
+    })
+
+    it('Should handle plain newlines without break flag', done => {
+        const entry = {...plainNewlineTestEntry}
+        const paths = ['rich_text_editor']
+        
+        jsonToHTML({ entry, paths })
+        
+        expect(entry.rich_text_editor).toEqual(plainNewlineTestHtml)
+        done()
+    })
+
+    it('Should handle break flag in arrays', done => {
+        const entry = {
+            ...breakTestEntry,
+            rich_text_editor: [breakTestEntry.rich_text_editor]
+        }
+        const paths = ['rich_text_editor']
+        
+        jsonToHTML({ entry, paths })
+        
+        expect(entry.rich_text_editor).toEqual([breakTestHtml])
+        done()
+    })
 })

__test__/mock/json-element-mock-result.ts

@@ -25,6 +25,10 @@ const referenceObjHtml = "<p><a class=\"embedded-entry redactor-component block-
 const referenceObjHtmlBlock = "<p><a class=\"embedded-entry redactor-component block-entry\" href=\"/Test\" target=\"_self\">Embed entry as a link</a></p><p><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_blank\">Embed entry as a link open in new tab</a></p><ul><li><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_self\">Entry as a link</a></li><li><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_blank\">Open entry as a link in new tab</a></li><li><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_self\"><strong><u>Entry as a link bold</u></strong></a></li><li><a class=\"embedded-entry redactor-component block-entry\" href=\"khjgf\" target=\"_blank\"><strong><u>Open bold entry as a link in new tab </u></strong></a></li><li><a href=\"https://\" target=\"_self\"><strong><u>Link URL</u></strong></a></li><li><a href=\"https://\" target=\"_blank\"><strong><u>Open link in new tab</u></strong></a></li></ul>"
 const imagetags = "<figure style=\"text-align:right;max-width:137px;float:right;width:137px;max-height:257px;height:257px;\"><a href=\"https://batman.com\" target=\"_blank\"><img asset_uid=\"asset-UID\" class=\"embedded-asset\" src=\"https://images.contentstack.io/v3/assets/api-key/asset-UID/random-uid/batman.png\" alt=\"batman\" target=\"_blank\" style=\"text-align:right;max-width:137px;float:right;width:137px;max-height:257px;height:257px;\" /></a><figcaption>The Batman</figcaption></figure>"
 const escapeHtml = "<p>&lt;p&gt;Welcome to Contentstack! &lt;script&gt;console.log(/&quot;Hello from Contentstack!/&quot;);&lt;/script&gt; Explore our platform to create, manage, and publish content seamlessly.&lt;/p&gt;</p>"
+const breakTestHtml = "<p>Normal text with <br />break tag after break.</p>"
+const newlineBreakTestHtml = "<p>Text before newline break<br />Text after newline break</p>"
+const multipleNewlinesBreakTestHtml = "<p>Text before<br /><br /><br />Text after</p>"
+const plainNewlineTestHtml = "<p>Line 1<br />Line 2<br />Line 3</p>"
 
 export {
     h1Html,
@@ -53,5 +57,9 @@ export {
     referenceObjHtmlBlock,
     imagetags,
     paragraphHtmlWithNewLine,
-    escapeHtml
+    escapeHtml,
+    breakTestHtml,
+    newlineBreakTestHtml,
+    multipleNewlinesBreakTestHtml,
+    plainNewlineTestHtml
 }

__test__/mock/json-element-mock.ts

@@ -2421,6 +2421,139 @@ const escapeJsonHtml = {
   uid: 'asset_uid_10',
 }
 
+const breakTestJson = {
+  uid: "break_test_uid",
+  _version: 1,
+  attrs: {},
+  children: [
+    {
+      type: "p",
+      attrs: {},
+      uid: "break_paragraph_uid",
+      children: [
+        {
+          text: "Normal text with ",
+        },
+        {
+          text: "break tag",
+          break: true
+        },
+        {
+          text: " after break."
+        }
+      ]
+    }
+  ],
+  type: "doc"
+}
+
+const newlineBreakTestJson = {
+  uid: "newline_break_test_uid", 
+  _version: 1,
+  attrs: {},
+  children: [
+    {
+      type: "p",
+      attrs: {},
+      uid: "newline_break_paragraph_uid",
+      children: [
+        {
+          text: "Text before newline break",
+        },
+        {
+          text: "\n",
+          break: true
+        },
+        {
+          text: "Text after newline break"
+        }
+      ]
+    }
+  ],
+  type: "doc"
+}
+
+const multipleNewlinesBreakTestJson = {
+  uid: "multiple_newlines_break_test_uid",
+  _version: 1, 
+  attrs: {},
+  children: [
+    {
+      type: "p",
+      attrs: {},
+      uid: "multiple_newlines_paragraph_uid",
+      children: [
+        {
+          text: "Text before",
+        },
+        {
+          text: "\n\n\n",
+          break: true
+        },
+        {
+          text: "Text after"
+        }
+      ]
+    }
+  ],
+  type: "doc"
+}
+
+const plainNewlineTestJson = {
+  uid: "plain_newline_test_uid",
+  _version: 1,
+  attrs: {},
+  children: [
+    {
+      type: "p", 
+      attrs: {},
+      uid: "plain_newline_paragraph_uid",
+      children: [
+        {
+          text: "Line 1\nLine 2\nLine 3"
+        }
+      ]
+    }
+  ],
+  type: "doc"
+}
+
+const breakTestEntry = {
+  title: 'Break Test Entry',
+  url: '/break-test-entry',
+  rich_text_editor: {...breakTestJson},
+  locale: 'en-us',
+  _in_progress: false,
+  uid: 'break_test_entry_uid',
+}
+
+const newlineBreakTestEntry = {
+  title: 'Newline Break Test Entry',
+  url: '/newline-break-test-entry', 
+  rich_text_editor: {...newlineBreakTestJson},
+  locale: 'en-us',
+  _in_progress: false,
+  uid: 'newline_break_test_entry_uid',
+}
+
+const multipleNewlinesBreakTestEntry = {
+  title: 'Multiple Newlines Break Test Entry',
+  url: '/multiple-newlines-break-test-entry',
+  rich_text_editor: {...multipleNewlinesBreakTestJson},
+  locale: 'en-us', 
+  _in_progress: false,
+  uid: 'multiple_newlines_break_test_entry_uid',
+}
+
+const plainNewlineTestEntry = {
+  title: 'Plain Newline Test Entry',
+  url: '/plain-newline-test-entry',
+  rich_text_editor: {...plainNewlineTestJson},
+  locale: 'en-us',
+  _in_progress: false,
+  uid: 'plain_newline_test_entry_uid',
+}
+
 export { 
   h1Json,
   h2Json,
@@ -2460,5 +2593,13 @@ export {
   testJsonRte,
   testJsonAsset,
   paragraphEntryWithNewline,
-  escapeJsonHtml
+  escapeJsonHtml,
+  breakTestJson,
+  newlineBreakTestJson,
+  multipleNewlinesBreakTestJson,
+  plainNewlineTestJson,
+  breakTestEntry,
+  newlineBreakTestEntry,
+  multipleNewlinesBreakTestEntry,
+  plainNewlineTestEntry
 }

__test__/text-node-to-html.test.ts

@@ -122,4 +122,94 @@ describe('Text Node To HTML', () => {
         expect(resultHtml).toEqual(`<strong><em><u><strike><span data-type='inlineCode'><sub><sup>${textNode.text}</sup></sub></span></strike></u></em></strong>`)
         done()
     })
+
+    it('Should return Break string text', done => {
+        const node = {
+            ...textNode,
+            break: true
+        }
+
+        const resultHtml = textNodeToHTML(node, {
+            ...defaultNodeOption
+        })
+
+        expect(resultHtml).toEqual(`<br />${textNode.text}`)
+        done()
+    })
+
+    it('Should handle newline character without break flag', done => {
+        const node = {
+            ...textNode,
+            text: "line1\nline2"
+        }
+
+        const resultHtml = textNodeToHTML(node, {
+            ...defaultNodeOption
+        })
+
+        expect(resultHtml).toEqual('line1<br />line2')
+        done()
+    })
+
+    it('Should handle single newline with break flag without duplication', done => {
+        const node = {
+            ...textNode,
+            text: "\n",
+            break: true
+        }
+
+        const resultHtml = textNodeToHTML(node, {
+            ...defaultNodeOption
+        })
+
+        expect(resultHtml).toEqual('<br />')
+        done()
+    })
+
+    it('Should handle multiple newlines with break flag without duplication', done => {
+        const node = {
+            ...textNode,
+            text: "\n\n\n",
+            break: true
+        }
+
+        const resultHtml = textNodeToHTML(node, {
+            ...defaultNodeOption
+        })
+
+        expect(resultHtml).toEqual('<br /><br /><br />')
+        done()
+    })
+
+    it('Should handle text with newline and break flag properly', done => {
+        const node = {
+            ...textNode,
+            text: "text with\nnewline",
+            break: true
+        }
+
+        const resultHtml = textNodeToHTML(node, {
+            ...defaultNodeOption
+        })
+
+        expect(resultHtml).toEqual('<br />text with<br />newline')
+        done()
+    })
+
+    it('Should handle break with other marks', done => {
+        const node = {
+            ...textNode,
+            text: "break text",
+            break: true,
+            bold: true,
+            italic: true
+        }
+
+        const resultHtml = textNodeToHTML(node, {
+            ...defaultNodeOption
+        })
+
+        expect(resultHtml).toEqual(`<strong><em><br />${node.text}</em></strong>`)
+        done()
+    })
 })