-
-
Notifications
You must be signed in to change notification settings - Fork 148
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Mermaid plugin with "createElementNS" error on create-react-app #528
Comments
@jimkk159 mermaid import React, { useState, useRef, useEffect, useCallback } from "react";
import MDEditor from "@uiw/react-md-editor";
import mermaid from "mermaid";
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 code = getCode(children);
const demo = useRef(null);
const handleMermaid = useCallback(async () => {
try {
const { svg } = await mermaid.render(demoid.current, code);
demo.current.innerHTML = svg;
} catch (error) {
demo.current.innerHTML = error;
}
}, [code, demoid]);
useEffect(() => {
if (demo.current) {
handleMermaid();
}
}, [handleMermaid]);
if (
typeof code === "string" &&
typeof className === "string" &&
/^language-mermaid/.test(className.toLocaleLowerCase())
) {
return (
<code ref={demo}>
<code id={demoid.current} style={{ display: "none" }} />
</code>
);
}
return <code className={String(className)}>{children}</code>;
};
const getCode = (arr = []) =>
arr
.map((dt) => {
if (typeof dt === "string") {
return dt;
}
if (dt.props && dt.props.children) {
return getCode(dt.props.children);
}
return false;
})
.filter(Boolean)
.join("");
export default function App() {
const [value, setValue] = useState(mdMermaid);
return (
<React.Fragment>
<div data-color-mode="dart">
<MDEditor
onChange={(newValue = "") => setValue(newValue)}
textareaProps={{
placeholder: "Please enter Markdown text"
}}
height={500}
value={value}
previewOptions={{
components: {
code: Code
}
}}
/>
</div>
<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>
</React.Fragment>
);
} |
// v8
- const str = mermaid.render(demoid.current, code, () => null, demo.current);
// v10
+ const { svg } = await mermaid.render('graphDiv', graphDefinition); |
Thanks a lot |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello,
I would like to use mermaid as a plugin in my editor.
I copy all the sample code from mermaid codesandbox example in my new create-react-app.
(Just copy all the code in index.js and replace all the new react app App.js code )
However, I always get the
The mermaid svg code always return the Promise
It seems like the mermaid can not find the id of the <code/> or something
My package version
"@uiw/react-md-editor": "^3.23.0",
"mermaid": "^10.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Does I miss any steps for using mermaid?
(I am not sure this is a mermaid, editor or the version conflict problem .)
The text was updated successfully, but these errors were encountered: