Merge pull request #6499 from nextcloud-libraries/fix/noid/rich-escape

fix: extract un-escaping of text/code nodes with XML-like content

cypress/component/richtext.cy.ts

@@ -10,20 +10,55 @@ import { mount } from 'cypress/vue2'
 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.only('XML-like text (escaped and unescaped)', () => {
+		const TEST = '<span>text</span> &lt;span&gt;text&lt;/span&gt;'
+		it('renders normal text as passed', () => {
+			mount(NcRichText, {
+				propsData: {
+					text: TEST,
+				},
+			})
+			cy.get('div.rich-text--wrapper').should('have.text', TEST)
+		})
+		it('renders with Markdown, escaping XML', () => {
+			mount(NcRichText, {
+				propsData: {
+					text: TEST,
+					useMarkdown: true,
+				},
+			})
+			cy.get('p').should('have.text', '<span>text</span> <span>text</span>')
+		})
+		it('renders with Markdown, escaping XML in code', () => {
+			mount(NcRichText, {
+				propsData: {
+					text: '```\n' + TEST + '\n```',
+					useMarkdown: true,
+				},
+			})
+			cy.get('code').should('have.text', '<span>text</span> <span>text</span>' + '\n')
+		})
+		it('renders with Flavored Markdown, escaping XML', () => {
+			mount(NcRichText, {
+				propsData: {
+					text: TEST,
+					useExtendedMarkdown: true,
+				},
+			})
+			cy.get('p').should('have.text', '<span>text</span> <span>text</span>')
 		})
+		it('renders with Flavored Markdown, escaping XML in code', () => {
+			mount(NcRichText, {
+				propsData: {
+					text: '```\n' + TEST + '\n```',
+					useExtendedMarkdown: true,
+				},
+			})
+			cy.get('code').should('have.text', '<span>text</span> <span>text</span>' + '\n')
+		})
+	})
 
+	describe('renders with markdown', () => {
 		describe('headings', () => {
 			it('heading (with hash (#) syntax divided with space from text)', () => {
 				const testCases = [

src/components/NcRichText/NcRichText.vue

@@ -308,6 +308,7 @@ import NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitc
 import NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'
 import { getRoute, remarkAutolink } from './autolink.js'
 import { remarkPlaceholder, prepareTextNode } from './placeholder.js'
+import { remarkUnescape } from './remarkUnescape.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 
 import { unified } from 'unified'
@@ -459,6 +460,7 @@ export default {
 					useMarkdown: this.useMarkdown,
 					useExtendedMarkdown: this.useExtendedMarkdown,
 				})
+				.use(remarkUnescape)
 				.use(this.useExtendedMarkdown ? remarkGfm.value : undefined)
 				.use(breaks)
 				.use(remark2rehype, {
@@ -476,12 +478,6 @@ 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('#')) {
 							if (this.useExtendedMarkdown && remarkGfm.value) {
 								if (tag === 'code' && !rehypeHighlight.value
@@ -559,9 +555,7 @@ export default {
 				})
 				.processSync(this.text
 					// escape special symbol "<" to not treat text as HTML
-					.replace(/</gmi, '&lt;')
-					// unescape special symbol ">" to parse blockquotes
-					.replace(/&gt;/gmi, '>'),
+					.replace(/<[^>]+>/g, (match) => match.replace(/</g, '&lt;')),
 				)
 				.result
 

src/components/NcRichText/remarkUnescape.js

@@ -0,0 +1,19 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { visit, SKIP } from 'unist-util-visit'
+
+export const remarkUnescape = function() {
+	return function(tree) {
+		visit(tree, (node) => node.type === 'text' || node.type === 'code',
+			(node, index, parent) => {
+				parent.children.splice(index, 1, {
+					...node,
+					value: node.value.replace(/&lt;/gmi, '<').replace(/&gt;/gmi, '>'),
+				})
+				return [SKIP, index + 1]
+			})
+	}
+}