Closed Nquq closed 11 months ago
@Nquq Did not reproduce your error.
Use mermaid@v9
import React, {
useState,
useRef,
Fragment,
useEffect,
useCallback
} from "react";
import MDEditor from "@uiw/react-md-editor";
import mermaid from "mermaid";
import { createRoot } from "react-dom/client";
import { getCodeString } from "rehype-rewrite";
const mdMermaid = `The following are some examples of the diagrams, charts and graphs that can be made using Mermaid and the Markdown-inspired text specific to it.
\`\`\`mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
\`\`\`
\`\`\`mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
\`\`\`
`;
const randomid = () => parseInt(String(Math.random() * 1e15), 10).toString(36);
const Code = ({ inline, children = [], className, ...props }) => {
const demoid = useRef(`dome${randomid()}`);
const [container, setContainer] = useState(null);
const isMermaid =
className && /^language-mermaid/.test(className.toLocaleLowerCase());
const txt = children[0] || "";
const code =
props.node && props.node.children
? getCodeString(props.node.children)
: txt;
useEffect(() => {
if (container && isMermaid) {
try {
const str = mermaid.render(demoid.current, code);
container.innerHTML = str;
} catch (error) {
container.innerHTML = error;
}
}
}, [container, isMermaid, code, demoid]);
const refElement = useCallback((node) => {
if (node !== null) {
setContainer(node);
}
}, []);
if (isMermaid) {
return (
<Fragment>
<code id={demoid.current} style={{ display: "none" }} />
<code ref={refElement} data-name="mermaid" />
</Fragment>
);
}
return <code>{children}</code>;
};
export default function App() {
const [value, setValue] = useState(mdMermaid);
return (
<div data-color-mode="light">
<MDEditor
onChange={(newValue = "") => setValue(newValue)}
textareaProps={{
placeholder: "Please enter Markdown text"
}}
height={500}
value={value}
previewOptions={{
components: {
code: Code
}
}}
/>
</div>
);
}
const container = document.getElementById("container");
const root = createRoot(container);
root.render(<App />);
@jaywcjlove thank a lot!
Hello!
I have a problem with the mermaid plugin. When I start erasing the word 'mermaid' in the editor, I get an error like in the screenshot.
here is my code component
and MDEditor component