-
-
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
How to set previewOptions in MDEditor.Markdown? #550
Comments
@jimkk159 https://codesandbox.io/embed/priceless-monad-9ztv5p?fontsize=14&hidenavigation=1&theme=dark import React, { useState, useRef, useEffect, useCallback } from "react";
import ReactDOM from "react-dom";
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 handle = useCallback(async () => {
if (demo.current) {
try {
const { svg } = await mermaid.render(demoid.current, code);
demo.current.innerHTML = svg;
} catch (error) {
demo.current.innerHTML = error;
}
}
}, [demo, code]);
useEffect(() => handle(), [handle]);
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>
<div data-color-mode="light">
<MDEditor.Markdown
components={{
code: Code
}}
source={value}
/>
</div>
<div data-color-mode="dart">
<MDEditor.Markdown
components={{
code: Code
}}
source={value}
/>
</div>
</React.Fragment>
);
} |
Thanks, |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello,
I am using the
KaTeX
&mermaid
Plugins in<MDEditor/>
just like example, everything goes fine.However, when I use the MDEditor.Markdown to see the result of the editted code.
It becomes to the orgin
code
stylelike
Does I miss something?
Is the Markdown rewirte components property in <MDEditor.Markdown /> not same as the <MDEditor />?
My version is "@uiw/react-md-editor": "^3.23.0",
The text was updated successfully, but these errors were encountered: