Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 8, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 9 additions & 0 deletions __test__/json-to-html.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
linkInPJsonUrl,
orderListJson,
paragraphEntry,
paragraphEntryWithNewline,
paragraphJsonArrayEntry,
plainTextJson,
styleinPJson,
Expand Down Expand Up @@ -47,6 +48,7 @@ import {
linkInPURLHtml,
orderListHtml,
paragraphHtml,
paragraphHtmlWithNewLine,
plainTextHtml,
styleinPHtml,
tableHtml,
Expand Down Expand Up @@ -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}

Expand Down
2 changes: 2 additions & 0 deletions __test__/mock/json-element-mock-result.ts
Original file line number Diff line number Diff line change
@@ -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>"
Expand Down Expand Up @@ -51,5 +52,6 @@ export {
referenceObjHtml,
referenceObjHtmlBlock,
imagetags,
paragraphHtmlWithNewLine,

}
41 changes: 40 additions & 1 deletion __test__/mock/json-element-mock.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -2393,5 +2431,6 @@ export {
unorderListJson2,
orderListJson2,
testJsonRte,
testJsonAsset
testJsonAsset,
paragraphEntryWithNewline
}
4 changes: 4 additions & 0 deletions src/helper/sanitize.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 : '';
Expand Down
Loading