chore: Added support of \n after just enter (#133)

* chore: Added support of \n after just enter

* chore: Updated changelog

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [1.3.17](https://github.com/contentstack/contentstack-utils-javascript/tree/v1.3.17) (2025-02-11)
  - Enh: updateAssetURLForGQL update for multilpe entries
+ - Fix: Added support of  br tag (\n) after just enter
 
 ## [1.3.16](https://github.com/contentstack/contentstack-utils-javascript/tree/v1.3.16) (2025-01-27)
  - Enh: Added support for colgroup and col tags inside table tag

__test__/json-to-html.test.ts

@@ -17,6 +17,7 @@ import {
     linkInPJsonUrl,
     orderListJson,
     paragraphEntry,
+    paragraphEntryWithNewline,
     paragraphJsonArrayEntry,
     plainTextJson,
     styleinPJson,
@@ -47,6 +48,7 @@ import {
     linkInPURLHtml,
     orderListHtml,
     paragraphHtml,
+    paragraphHtmlWithNewLine,
     plainTextHtml, 
     styleinPHtml, 
     tableHtml, 
@@ -87,6 +89,13 @@ describe('Node parser paragraph content', () => {
         done()
     })
 
+    it('Should render Json To html with newline after single enter',  done => {
+        const entry = {...paragraphEntryWithNewline}
+        jsonToHTML({entry, paths: ['rich_text_editor']})
+        expect(entry.rich_text_editor).toEqual(paragraphHtmlWithNewLine)
+        done()
+    })
+
     it('Should render Json To html for Array of Entries',  done => {
         const entry = {...paragraphEntry}
 

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

@@ -1,5 +1,6 @@
 const plainTextHtml = "<strong>Aliquam sit amet libero dapibus, eleifend ligula at, varius justo</strong><strong><em>Lorem ipsum</em></strong><strong><em><u>dolor sit amet</u></em></strong><strong><em><u><strike><br />consectetur adipiscing elit.</strike></u></em></strong><strong><em><u><span data-type='inlineCode'>Sed condimentum iaculis magna in vehicula. </span></u></em></strong><strong><em><u><sup>  Vestibulum vitae convallis </sup></u></em></strong><strong><em><u><sub> lacus. </sub></u></em></strong>"
 const paragraphHtml = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum iaculis magna in vehicula. Vestibulum vitae convallis lacus. Praesent a diam iaculis turpis rhoncus faucibus. Aliquam sed pulvinar sem.</p>"
+const paragraphHtmlWithNewLine = "<p>Ritesh test</p><p>Shift enter<br />single enter</p>"
 const h1Html = "<h1><strong><em><u><sub>Lorem ipsum dolor sit amet.</sub></u></em></strong></h1>" 
 const h2Html = "<h2><strong><em><u><sub>Vestibulum a ligula eget massa sagittis aliquam sit amet quis tortor. </sub></u></em></strong></h2>"
 const h3Html = "<h3><strong><em><u><sub>Mauris venenatis dui id massa sollicitudin, non bibendum nunc dictum.</sub></u></em></strong></h3>"
@@ -51,5 +52,6 @@ export {
     referenceObjHtml,
     referenceObjHtmlBlock,
     imagetags,
+    paragraphHtmlWithNewLine,
 
 }

__test__/mock/json-element-mock.ts

@@ -659,6 +659,35 @@ const paragraphJson = {
     type: "doc"
 }
 
+const paragraphJsonWithNewline = {
+  "type": "doc",
+  "attrs": {},
+  "uid": "abcdefgh123456",
+  "children": [
+      {
+          "type": "p",
+          "uid": "abcdefgh123456",
+          "attrs": {},
+          "children": [
+              {
+                  "text": "Ritesh test"
+              }
+          ]
+      },
+      {
+          "uid": "abcdefgh123456",
+          "type": "p",
+          "children": [
+              {
+                  "text": "Shift enter\nsingle enter"
+              }
+          ],
+          "attrs": {}
+      }
+  ],
+  "_version": 26
+}
+
 const blockquoteJson = {
   uid: "06084d7fd",
   _version: 13,
@@ -1128,6 +1157,15 @@ const paragraphEntry = {
     uid: 'asset_uid_10',
 }
 
+const paragraphEntryWithNewline = {
+  title: 'entry and assets',
+  url: '/entry-and-assets',
+  rich_text_editor: {...paragraphJsonWithNewline},
+  locale: 'en-us',
+  _in_progress: false,
+  uid: 'asset_uid_10',
+}
+
 const paragraphJsonArrayEntry = {
     title: 'entry and assets',
     url: '/entry-and-assets',
@@ -2393,5 +2431,6 @@ export {
   unorderListJson2,
   orderListJson2,
   testJsonRte,
-  testJsonAsset
+  testJsonAsset,
+  paragraphEntryWithNewline
 }

src/helper/sanitize.ts

@@ -3,6 +3,10 @@ type AllowedTags = 'p' | 'a' | 'strong' | 'em' | 'ul' | 'ol' | 'li' | 'h1' | 'h2
 type AllowedAttributes = 'href' | 'title' | 'target' | 'alt' | 'src' | 'class' | 'id' | 'style' | 'colspan' | 'rowspan' | 'content-type-uid' | 'data-sys-asset-uid' | 'sys-style-type' | 'data-type' | 'data-width' | 'data-rows' | 'data-cols';
 
 export function sanitizeHTML(input: string, allowedTags: AllowedTags[] = ['p', 'a', 'strong', 'em', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'sub', 'u', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'span', 'fragment', 'sup', 'strike', 'br', 'img', 'colgroup', 'col', 'div'], allowedAttributes: AllowedAttributes[] = ['href', 'title', 'target', 'alt', 'src', 'class', 'id', 'style', 'colspan', 'rowspan', 'content-type-uid', 'data-sys-asset-uid', 'sys-style-type', 'data-type', 'data-width', 'data-rows', 'data-cols']): string {
+
+    // Replace newline characters with <br /> before processing the HTML tags
+    input = input.replace(/\n/g, '<br />');
+
     // Regular expression to find and remove all HTML tags except the allowed ones
     const sanitized = input.replace(/<\/?([a-z][a-z0-9]*)\b[^<>]*>/gi, (match, tag) => {
         return allowedTags.includes(tag.toLowerCase()) ? match : '';