diff --git a/packages/atomic/src/components/common/generated-answer/generated-content/markdown-utils.test.ts b/packages/atomic/src/components/common/generated-answer/generated-content/markdown-utils.test.ts index 6a02911344d..6fff8906bb0 100644 --- a/packages/atomic/src/components/common/generated-answer/generated-content/markdown-utils.test.ts +++ b/packages/atomic/src/components/common/generated-answer/generated-content/markdown-utils.test.ts @@ -302,6 +302,26 @@ describe('markdownUtils', () => { ); }); }); + + it('should transform formatted heading', () => { + const text = '# **bold** *emphasized* with `code` title'; + + const html = transformMarkdownToHtml(text); + + expect(removeLineBreaks(html)).toBe( + '
bold emphasized with code title
' + ); + }); + + it('should transform heading with nested formatting', () => { + const text = '# ***bold** emphasized with `code`* title'; + + const html = transformMarkdownToHtml(text); + + expect(removeLineBreaks(html)).toBe( + '
bold emphasized with code title
' + ); + }); }); describe('with unclosed inline elements in text', () => { diff --git a/packages/atomic/src/components/common/generated-answer/generated-content/markdown-utils.ts b/packages/atomic/src/components/common/generated-answer/generated-content/markdown-utils.ts index 8659f42840a..7dc0cf3ab4e 100644 --- a/packages/atomic/src/components/common/generated-answer/generated-content/markdown-utils.ts +++ b/packages/atomic/src/components/common/generated-answer/generated-content/markdown-utils.ts @@ -1,5 +1,12 @@ import {marked} from 'marked'; +const toInlinePlainText = (textWithHtml: string): string => { + const withoutHtmlTags = textWithHtml.replace(/<[^>]*>/g, ' '); + const withCollapsedWhitespaces = withoutHtmlTags.replace(/\s{2,}/g, ' '); + + return withCollapsedWhitespaces.trim(); +}; + const unclosedElement = /(\*{1,3}|`)($|\w[\w\s]*$)/; const completeUnclosedElement = (text: string) => { @@ -48,7 +55,9 @@ const customRenderer = { }, heading(text: string, level: number) { - return `
${text}
`; + const plainText = toInlinePlainText(text); + + return `
${text}
`; }, html(text: string) { diff --git a/packages/quantic/force-app/main/default/lwc/quanticUtils/__tests__/markdownUtils.test.js b/packages/quantic/force-app/main/default/lwc/quanticUtils/__tests__/markdownUtils.test.js index 3a161743252..e2cbe00e963 100644 --- a/packages/quantic/force-app/main/default/lwc/quanticUtils/__tests__/markdownUtils.test.js +++ b/packages/quantic/force-app/main/default/lwc/quanticUtils/__tests__/markdownUtils.test.js @@ -28,6 +28,14 @@ describe('c/markdownUtils', () => { ); }); + it('should transform markdown heading with formatting to HTML
', () => { + const text = '# **bold** and *emphasized* title'; + const result = transformMarkdownToHtml(text, marked); + expect(removeLineBreaks(result)).toEqual( + '
bold and emphasized title
' + ); + }); + it('should transform markdown list item to HTML
  • ', () => { const text = '- Hello, world!'; const result = transformMarkdownToHtml(text, marked); diff --git a/packages/quantic/force-app/main/default/lwc/quanticUtils/markdownUtils.js b/packages/quantic/force-app/main/default/lwc/quanticUtils/markdownUtils.js index 88e87d83f03..11858dcab75 100644 --- a/packages/quantic/force-app/main/default/lwc/quanticUtils/markdownUtils.js +++ b/packages/quantic/force-app/main/default/lwc/quanticUtils/markdownUtils.js @@ -3,6 +3,18 @@ import MARKED_JS from '@salesforce/resourceUrl/marked'; // @ts-ignore import {loadScript} from 'lightning/platformResourceLoader'; +/** + * Transforms a single line of text that may contain HTML to plain text. + * @param {string} textWithHtml A single line of text that may contain HTML + * @returns {string} The value as plain text + */ +const toInlinePlainText = (textWithHtml) => { + const withoutHtmlTags = textWithHtml.replace(/<[^>]*>/g, ' '); + const withCollapsedWhitespaces = withoutHtmlTags.replace(/\s{2,}/g, ' '); + + return withCollapsedWhitespaces.trim(); +}; + // Any number of `*` between 1 and 3, or a single backtick, followed by a word character or whitespace character const unclosedElement = /(\*{1,3}|`)($|\w[\w\s]*$)/; @@ -49,7 +61,9 @@ const customRenderer = { * @param {string} level */ heading(text, level) { - return `
    ${text}
    `; + const plainText = toInlinePlainText(text); + + return `
    ${text}
    `; }, /**