Closed hmarcelodn-ae closed 2 years ago
The problem can be solved using the rehype-rewrite plugin.
@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"));
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.
@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 = `<em>`;
}
if (node.type === "html" && node.value === "</em>") {
node.value = `</em>`;
}
}
}
]
]
}}
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": ""
}
Thanks @jaywcjlove that worked.
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.