From 2e8970f386eec1271785cf07445501d0cb0350ee Mon Sep 17 00:00:00 2001 From: sunil-lakshman <104969541+sunil-lakshman@users.noreply.github.com> Date: Sat, 8 Feb 2025 11:34:10 +0530 Subject: [PATCH] chore: Added support of \n after just enter (#133) * chore: Added support of \n after just enter * chore: Updated changelog --- CHANGELOG.md | 1 + __test__/json-to-html.test.ts | 9 +++++ __test__/mock/json-element-mock-result.ts | 2 ++ __test__/mock/json-element-mock.ts | 41 ++++++++++++++++++++++- src/helper/sanitize.ts | 4 +++ 5 files changed, 56 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f5458fb..4bd1d00 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/__test__/json-to-html.test.ts b/__test__/json-to-html.test.ts index f72fd4d..720feac 100644 --- a/__test__/json-to-html.test.ts +++ b/__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} diff --git a/__test__/mock/json-element-mock-result.ts b/__test__/mock/json-element-mock-result.ts index a4fab81..7b1b349 100644 --- a/__test__/mock/json-element-mock-result.ts +++ b/__test__/mock/json-element-mock-result.ts @@ -1,5 +1,6 @@ const plainTextHtml = "Aliquam sit amet libero dapibus, eleifend ligula at, varius justoLorem ipsumdolor sit amet
consectetur adipiscing elit.Sed condimentum iaculis magna in vehicula. Vestibulum vitae convallis lacus. " const paragraphHtml = "

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.

" +const paragraphHtmlWithNewLine = "

Ritesh test

Shift enter
single enter

" const h1Html = "

Lorem ipsum dolor sit amet.

" const h2Html = "

Vestibulum a ligula eget massa sagittis aliquam sit amet quis tortor.

" const h3Html = "

Mauris venenatis dui id massa sollicitudin, non bibendum nunc dictum.

" @@ -51,5 +52,6 @@ export { referenceObjHtml, referenceObjHtmlBlock, imagetags, + paragraphHtmlWithNewLine, } \ No newline at end of file diff --git a/__test__/mock/json-element-mock.ts b/__test__/mock/json-element-mock.ts index c5fe596..1863c3f 100644 --- a/__test__/mock/json-element-mock.ts +++ b/__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 } \ No newline at end of file diff --git a/src/helper/sanitize.ts b/src/helper/sanitize.ts index b2d66ca..48539aa 100644 --- a/src/helper/sanitize.ts +++ b/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
before processing the HTML tags + input = input.replace(/\n/g, '
'); + // 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 : '';