Additional Spans

[hmarcelodn-ae]

Hello,

I am using this plugin in order to display an email address that needs to be highlighted as follows:

[highlight]mypreferredemail@gmail.com[/highlight], then I'd like to have my custom renderer to create a span with a custom class to highlight this. However the email address is automatically broken into different nodes so anything before the email and anything after it will break into separated spans. I cannot see a way to control how these nodes are being created so I can support my custom highlighter.

Any idea on why this is happening and how I could control this behaviour?

I discovered that removing the @ symbol fixes the multiple spans to be created.

[jaywcjlove]

The problem can be solved using the rehype-rewrite plugin.

Example: https://codesandbox.io/embed/uiwjs-react-md-editor-issues-366-idnbsm?fontsize=14&hidenavigation=1&theme=dark

@hmarcelodn-ae

import React from "react";
import ReactDOM from "react-dom";
import MDEditor from "@uiw/react-md-editor";
import rehypeRewrite from "rehype-rewrite";
// No import is required in the WebPack.
// import "@uiw/react-md-editor/dist/markdown-editor.css";

const mkdStr = `<em>html</em>`;

function App() {
  const [value, setValue] = React.useState(mkdStr);
  return (
    <div className="container">
      <h3>Auto</h3>
      <MDEditor
        height={200}
        value={value}
        previewOptions={{
          rehypePlugins: [
            [
              rehypeRewrite,
              {
                rewrite: (node, index, parent) => {
                  if (node.type === "element" && node.tagName === "em") {
                    const child = node.children[0].value;
                    node.type = "text";
                    node.value = `<em>${child}</em>`;
                  }
                }
              }
            ]
          ]
        }}
        onChange={setValue}
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

[hmarcelodn-ae]

Thanks @jaywcjlove , do you know if there's a way to achive the same using v2.1.8? Since we have a bunch of things built on top of that version. I know it would be great to upgrade, but so far I'd need to achive it on v2. Thanks a lot.

[jaywcjlove]

@hmarcelodn-ae v2.1.8 Example: https://codesandbox.io/embed/uiwjs-react-md-editor-issues-366-v2-1-8-qeo30k?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import ReactDOM from "react-dom";
import MDEditor from "@uiw/react-md-editor";
import rehypeRewrite from "rehype-rewrite";
// No import is required in the WebPack.
// import "@uiw/react-md-editor/dist/markdown-editor.css";

const mkdStr = `<em>html2</em>

**markdown hello**

<div>sss</div>`;

function App() {
  const [value, setValue] = React.useState(mkdStr);
  return (
    <div className="container">
      <h3>Auto</h3>
      <MDEditor
        height={200}
        value={value}
        previewOptions={{
          plugins: [
            [
              rehypeRewrite,
              {
                rewrite: (node, index, parent) => {
                  if (node.type === "html" && node.value === "<em>") {
                    node.value = `&lt;em&gt;`;
                  }
                  if (node.type === "html" && node.value === "</em>") {
                    node.value = `&lt;/em&gt;`;
                  }
                }
              }
            ]
          ]
        }}
        onChange={setValue}
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

{
  "dependencies": {
    "@uiw/react-md-editor": "2.1.8",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "rehype-rewrite": "3.0.6"
  },
  "description": ""
}

[hmarcelodn-ae]

Thanks @jaywcjlove that worked.