Issue with comments using rehype-sanitize on top of react-md-editor

[RARgames]

I'm just using rehype-sanitize (with default schema, no other rehype/remark plugins for this tests). Pure rehype-sanitize works correctly, but when it's applied on top of react-md-editor it has an issue with comments.

I cannot track down what is causing the issue, but here is the example:

input:

<!-- test --> 123

<!-- test --> 456 <!-- test -->

output github/pure rehype-sanitize (Sandbox: https://stackblitz.com/edit/github-ozn1qm?file=src%2Fmain.ts ): 123 456 output using rehype-sanitize on top of react-md-editor: empty

From debugging using visit somehow <!-- test --> 456 <!-- test --> is treated as one object of type raw instead of 3 separate objects: <!-- test -->, 456, <!-- test -->.

My example (just the important parts):

const rehypePlugins = [
  [
    rehypeSanitize,
  ],
];

<MDEditor
  previewOptions={{
    rehypePlugins,
  }}
/>

You can also test it in your demo:

[jaywcjlove]

https://github.com/uiwjs/react-markdown-preview/blob/74fa8e98070a6ceaeef8055975aefaa3a43e3d4e/core/src/index.tsx#L13-L20

@RARgames Some plugins are built in by default, which may be caused by them.

You can use pluginsFilter to clear out the default plugins, or put rehype-sanitize at the front of the array and give it a try.

[RARgames]

@jaywcjlove I just finished testing it. Plugins seem not to change affect this. (using filters I removed all plugins and the issue still exists)

Extended test (customized version of react-markdown-preview without extra plugins and updated dependencies): I removed rehype, remark plugins from react-markdown-preview. Also I updated react-markdown. Final dependencies:

  "dependencies": {
    "@babel/runtime": "^7.17.2",
    "@uiw/copy-to-clipboard": "~1.0.12",
    "react-markdown": "~9.0.1",
    "unist-util-visit": "^4.1.0"
  }

Unfortunately, this doesn't fix the issue:

• without rehype-sanitize - text between comments shows
• with rehype-sanitize - text between comments doesn't show

Do you have any other ideas of what might be causing it?

[jaywcjlove]

https://codesandbox.io/embed/sharp-mountain-m7yx7t?fontsize=14&hidenavigation=1&theme=dark

@RARgames You may need to look for answers in the issues of rehype-sanitize and react-markdown. The above example tells me that the problem does not occur on our side.

[jaywcjlove]

@RARgames If you solve it, you can tell us and I will update it in the document, thank you🙏

[RARgames]

This is the example that works: https://codesandbox.io/s/vigilant-williams-glfmzy?fontsize=14&hidenavigation=1&theme=dark

import Markdown from "react-markdown";
import rehypeSanitize from "rehype-sanitize";
import rehypeRaw from "rehype-raw";

const source = `
## MarkdownPreview

**Hello world!!!** <IFRAME SRC=\"javascript:javascript:alert(window.origin);\"></IFRAME>

<!-- test --> 123

<!-- test --> 456 <!-- test -->
`;

const rehypePlugins = [rehypeRaw, rehypeSanitize];

export default function App() {
  return (
    <div className="App">
      <Markdown rehypePlugins={rehypePlugins}>{source}</Markdown>
    </div>
  );
}

[RARgames]

Outdated - left here just for history

~~However using rehypeRaw in this place breaks code blocks - there is an error. The error can be fixed by additionally using:~~

const remarkPlugins = [remarkParse, [remarkRehype, { allowDangerousHtml: true }]];

There is no error, but code blocks does not show correctly. To fix this we need the order of rehype/remark plugins (not sure).

[RARgames]

Here is the final fix:

• Using rehype-raw in front of rehypePlugins list (https://github.com/uiwjs/react-markdown-preview/blob/master/core/src/index.tsx)
• Using rehype-sanitize as usual

I can prepare a PR, but this requires a bit more knowledge (I did this while testing and it seems to work fine).

• I tested it on the newest versions of remark/rehype plugins, markdown. Is it ok to update dependencies?
• I'm not sure what this does (https://github.com/uiwjs/react-markdown-preview/blob/master/core/src/plugins/reservedMeta.ts) Is it safe to change node.data and node.data.meta to node.properties and node.properties.meta?
• if (skipHtml) rehypePlugins.push(raw) (https://github.com/uiwjs/react-markdown-preview/blob/master/core/src/preview.tsx). This might have some conflicts with rehype-raw as now it is used always. Please check this.
• Custom sanitize schema should be prepared and shown in docs that passes all default things e.g. code blocks (this will probably require changing svg)

[RARgames]

Created a PR. The points from the previous comment are valid. I'll prepare and post custom schema later.

[RARgames]

highlight line and Show Line Numbers does not work because of the rehypeRaw. Probably, it's again the order of rehype, remark plugins. I'm trying to fix this right now, but without success.

• without rehype-raw: rehype-sanitize does not work correctly
• after adding rehype-raw: rehype-prism-plus does not highlight/show lines

[jaywcjlove]

@RARgames This may require rehype-prism-plus to upgrade dependency packages

[RARgames]

@jaywcjlove I already checked it - updating dependencies does not help.

However, I've managed to create a fix in the test env. I'll try to implement it in react-markdown-preview and submit another PR. I'll let you know here when it's ready (Also please bump react-markdown-preview in react-md-editor after the PR).

[jaywcjlove]

@RARgames 👌

[RARgames]

@jaywcjlove PR created.

[jaywcjlove]

@RARgames Upgrade v4.0.0