fix(NcRichText) escape XML-like content before markdown parsing

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud-libraries · Sep 8, 2023 · 38606f2 · 38606f2
1 parent 22d0c6f
commit 38606f2
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 5 deletions.
diff --git a/cypress/component/richtext.cy.ts b/cypress/component/richtext.cy.ts
@@ -6,6 +6,19 @@ import NcRichText from '../../src/components/NcRichText/NcRichText.vue'
 
 describe('NcRichText', () => {
 	describe('renders with markdown', () => {
+		describe('normal text', () => {
+			it('XML-like text (escaped and unescaped)', () => {
+				mount(NcRichText, {
+					propsData: {
+						text: '<span>text&lt;/span&gt;',
+						useMarkdown: true,
+					},
+				})
+
+				cy.get('p').should('have.text', '<span>text</span>')
+			})
+		})
+
 		describe('headings', () => {
 			it('heading (with hash (#) syntax divided with space from text)', () => {
 				const testCases = [
@@ -274,6 +287,17 @@ describe('NcRichText', () => {
 
 				cy.get('code').should('have.text', 'inline code')
 			})
+
+			it('inline code (with ignored bold, italic, XML-like syntax))', () => {
+				mount(NcRichText, {
+					propsData: {
+						text: '`inline code **bold text** _italic text_ <span>text&lt;/span&gt;`',
+						useMarkdown: true,
+					},
+				})
+
+				cy.get('code').should('have.text', 'inline code **bold text** _italic text_ <span>text</span>')
+			})
 		})
 
 		describe('multiline code', () => {
@@ -333,20 +357,20 @@ describe('NcRichText', () => {
 				cy.get('code').should('have.text', 'line 1\nline 2\nline 3\n')
 			})
 
-			it('multiline code (with ignored bold, italic, inline code syntax)', () => {
+			it('multiline code (with ignored bold, italic, inline code, XML-like syntax)', () => {
 				mount(NcRichText, {
 					propsData: {
-						text: '```\n**bold text**\n_italic text_\n`inline code`\n```',
+						text: '```\n**bold text**\n_italic text_\n`inline code`\n<span>text&lt;/span&gt;\n```',
 						useMarkdown: true,
 					},
 				})
 
-				cy.get('pre').should('have.text', '**bold text**\n_italic text_\n`inline code`\n')
+				cy.get('pre').should('have.text', '**bold text**\n_italic text_\n`inline code`\n<span>text</span>\n')
 			})
 		})
 
 		describe('blockquote', () => {
-			it('blockquote (with greater then (gt >) syntax)', () => {
+			it('blockquote (with greater then (>) syntax - normal)', () => {
 				mount(NcRichText, {
 					propsData: {
 						text: '> blockquote',
@@ -357,6 +381,17 @@ describe('NcRichText', () => {
 				cy.get('blockquote').should('have.text', '\nblockquote\n')
 			})
 
+			it('blockquote (with greater then (&gt;) syntax - escaped)', () => {
+				mount(NcRichText, {
+					propsData: {
+						text: '&gt; blockquote',
+						useMarkdown: true,
+					},
+				})
+
+				cy.get('blockquote').should('have.text', '\nblockquote\n')
+			})
+
 			it('blockquote (with bold, italic text, inline code)', () => {
 				mount(NcRichText, {
 					propsData: {

diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue
@@ -192,6 +192,12 @@ export default {
 				})
 				.use(rehype2react, {
 					createElement: (tag, attrs, children) => {
+						// unescape special symbol "<" for simple text nodes
+						children = children?.map(child => typeof child === 'string'
+							? child.replace(/&lt;/gmi, '<')
+							: child,
+						)
+
 						if (!tag.startsWith('#')) {
 							return h(tag, attrs, children)
 						}
@@ -217,7 +223,12 @@ export default {
 					},
 					prefix: false,
 				})
-				.processSync(this.text)
+				.processSync(this.text
+					// escape special symbol "<" to not treat text as HTML
+					.replace(/</gmi, '&lt;')
+					// unescape special symbol ">" to parse blockquotes
+					.replace(/&gt;/gmi, '>')
+				)
 				.result
 
 			return h('div', { class: 'rich-text--wrapper rich-text--wrapper-markdown' }, [