fix(NcRichText) - don't strip <tag>-like content when parsing markdown

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: {
@@ -401,7 +436,7 @@ describe('NcRichText', () => {
 					},
 				})
 
-				cy.get('blockquote').should('have.text', '\nline 1\n\nline 3\n')
+				cy.get('blockquote').should('have.text', '\nline 1\nline 3\n')
 			})
 
 			it('blockquote (with nested blockquote)', () => {

package.json

@@ -72,9 +72,9 @@
     "linkify-string": "^4.0.0",
     "md5": "^2.3.0",
     "node-polyfill-webpack-plugin": "^2.0.1",
+    "rehype-external-links": "^3.0.0",
     "rehype-react": "^7.1.2",
     "remark-breaks": "^3.0.2",
-    "remark-external-links": "^9.0.1",
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
     "splitpanes": "^2.4.1",

src/components/NcAvatar/NcAvatar.vue

@@ -697,6 +697,7 @@ export default {
 	&--unknown {
 		position: relative;
 		background-color: var(--color-main-background);
+		white-space: normal;
 	}
 
 	&:not(&--unknown) {

src/components/NcRichText/NcRichText.vue

@@ -76,7 +76,7 @@
 import breaks from 'remark-breaks'
 import remark2rehype from 'remark-rehype'
 import rehype2react from 'rehype-react'
-import remarkExternalLinks from 'remark-external-links'
+import rehypeExternalLinks from 'rehype-external-links'
 
 export default {
 	name: 'NcRichText',
@@ -176,10 +176,6 @@
 					autolink: this.autolink,
 					useMarkdown: this.useMarkdown,
 				})
-				.use(remarkExternalLinks, {
-					target: '_blank',
-					rel: ['noopener noreferrer'],
-				})
 				.use(breaks)
 				.use(remark2rehype, {
 					handlers: {
@@ -190,8 +186,18 @@
 				})
 				// .use(rehypeAddClasses, this.markdownCssClasses)
 				.use(remarkPlaceholder)
+				.use(rehypeExternalLinks, {
+					target: '_blank',
+					rel: ['noopener noreferrer'],
+				})
 				.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,18 +223,15 @@
 					},
 					prefix: false,
 				})
-				.processSync(this.useMarkdown
-				// In order to correctly show newlines in Markdown,
-				// each newline contains a non-breaking space
-					? this.text.slice()
-						.replace(/\n>\n/g, '\n>\u00A0\n')
-						.replace(/\n{2,}/g, (match) => {
-							return '\n' + '\n\u00A0\n'.repeat(match.length - 1)
-						})
-					: 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' }, [
+			return h('div', { class: 'rich-text--wrapper rich-text--wrapper-markdown' }, [
 				renderedMarkdown,
 				this.referenceLimit > 0
 					? h('div', { class: 'rich-text--reference-widget' }, [
@@ -239,11 +242,9 @@
 		},
 	},
 	render(h) {
-		if (!this.useMarkdown) {
-			return this.renderPlaintext(h)
-		}
-
-		return this.renderMarkdown(h)
+		return this.useMarkdown
+			? this.renderMarkdown(h)
+			: this.renderPlaintext(h)
 	},
 }
 </script>