feat: add optional remarkIgnoreMarkdown plugin to avoid markdown transform to HTML

Author: MartinCupela

src/components/Message/renderText/__tests__/renderText.test.js

@@ -7,6 +7,7 @@ import {
   imageToLink,
   keepLineBreaksPlugin,
   plusPlusToEmphasis,
+  remarkIgnoreMarkdown,
 } from '../remarkPlugins';
 import { defaultAllowedTagNames, renderText } from '../renderText';
 import '@testing-library/jest-dom';
@@ -306,19 +307,19 @@ describe(`renderText`, () => {
   });
 });
 
-describe('keepLineBreaksPlugin', () => {
-  const lineBreaks = '\n\n\n';
-  const paragraphText = `a${lineBreaks}b${lineBreaks}c`;
-  const unorderedListText = `* item 1${lineBreaks}* item 2${lineBreaks}* item 3`;
-  const orderedListText = `1. item 1${lineBreaks}2. item 2${lineBreaks}3. item 3`;
-  const headingText = `## Heading${lineBreaks}a`;
-  const codeBlockText = 'a\n\n\n```b```\n\n\nc';
-  const horizontalRuleText = `a${lineBreaks}---${lineBreaks}b`;
-  const blockquoteText = `a${lineBreaks}>b${lineBreaks}c`;
-  const withStrikeThroughText = `a${lineBreaks}${strikeThroughText}${lineBreaks}b`;
-  const tableText = `a${lineBreaks}| a | b  |  c |  d  |\n| - | :- | -: | :-: |\n| a | b  |  c |  d  |${lineBreaks}c`;
-  const multilineWithStrongText = 'This is **the first** line\n\nThis is the second line';
+const lineBreaks = '\n\n\n';
+const paragraphText = `a${lineBreaks}b${lineBreaks}c`;
+const unorderedListText = `* item 1${lineBreaks}* item 2${lineBreaks}* item 3`;
+const orderedListText = `1. item 1${lineBreaks}2. item 2${lineBreaks}3. item 3`;
+const headingText = `## Heading${lineBreaks}a`;
+const codeBlockText = 'a\n\n\n```b```\n\n\nc';
+const horizontalRuleText = `a${lineBreaks}---${lineBreaks}b`;
+const blockquoteText = `a${lineBreaks}>b${lineBreaks}c`;
+const withStrikeThroughText = `a${lineBreaks}${strikeThroughText}${lineBreaks}b`;
+const tableText = `a${lineBreaks}| a | b  |  c |  d  |\n| - | :- | -: | :-: |\n| a | b  |  c |  d  |${lineBreaks}c`;
+const multilineWithStrongText = 'This is **the first** line\n\nThis is the second line';
 
+describe('keepLineBreaksPlugin', () => {
   const doRenderText = (text, present) => {
     const Markdown = renderText(
       text,
@@ -500,3 +501,37 @@ describe('imageToLink', () => {
     ).not.toBeInTheDocument();
   });
 });
+
+describe('remarkIgnoreMarkdown', () => {
+  const text = [
+    headingText,
+    paragraphText,
+    unorderedListText,
+    orderedListText,
+    codeBlockText,
+    horizontalRuleText,
+    blockquoteText,
+    withStrikeThroughText,
+    tableText,
+    multilineWithStrongText,
+  ].join('\n');
+
+  const renderWithPlugin = (plugins = []) => {
+    const Markdown = renderText(
+      text,
+      {},
+      { getRemarkPlugins: () => [...plugins, remarkIgnoreMarkdown] },
+    );
+    return render(Markdown).container;
+  };
+
+  it('skips the markdown transformation and keeps the original escaped text and lines', () => {
+    expect(renderWithPlugin().innerHTML).toBe(`<p>${text.replace(/>/g, '&gt;')}</p>`);
+  });
+
+  it('keeps line without keepLineBreaksPlugin', () => {
+    expect(renderWithPlugin([keepLineBreaksPlugin]).innerHTML).toBe(
+      renderWithPlugin().innerHTML,
+    );
+  });
+});

src/components/Message/renderText/remarkPlugins/index.ts

@@ -2,3 +2,4 @@ export * from './htmlToTextPlugin';
 export * from './imageToLink';
 export * from './keepLineBreaksPlugin';
 export * from './plusPlusToEmphasis';
+export * from './remarkIgnoreMarkdown';

src/components/Message/renderText/remarkPlugins/remarkIgnoreMarkdown.ts

@@ -0,0 +1,16 @@
+import type { Plugin } from 'unified';
+import type { Paragraph, Root, Text } from 'mdast';
+
+/**
+ * Replace the parsed Markdown tree with a single paragraph containing the
+ * original source as a plain text node. No Markdown formatting is interpreted.
+ * React will escape it.
+ */
+export const remarkIgnoreMarkdown: Plugin<[], Root> = () => (tree, file) => {
+  const source = String(file.value ?? '');
+
+  const text: Text = { type: 'text', value: source };
+  const paragraph: Paragraph = { children: [text], type: 'paragraph' };
+
+  tree.children = [paragraph];
+};