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

[jaywcjlove]

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

[jaywcjlove]

@RARgames Upgrade v4.0.0

[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.

[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.