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
There is a problem with the preview trigger scrolling #348
Comments
Me too, but verison 2.1.11 doesn't have this BUG |
Scrolling issues caused by |
jaywcjlove
added a commit
that referenced
this issue
Feb 24, 2022
@wjjhhh @kevynull I updated the example. https://codesandbox.io/embed/recursing-water-08i59s?fontsize=14&hidenavigation=1&theme=dark import React, { useState, useRef, useEffect } 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 }: any) => {
const demoid = useRef(`dome${randomid()}`);
const code = getCode(children);
const demo = useRef(null);
useEffect(() => {
if (demo.current) {
try {
const str = mermaid.render(
demoid.current,
code,
() => null,
demo.current
);
// @ts-ignore
demo.current.innerHTML = str;
} catch (error) {
// @ts-ignore
demo.current.innerHTML = error;
}
}
}, [code, demo]);
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 (
<MDEditor
onChange={(newValue = "") => setValue(newValue)}
textareaProps={{
placeholder: "Please enter Markdown text"
}}
height={500}
value={value}
previewOptions={{
components: {
code: Code
}
}}
/>
);
}
ReactDOM.render(<App />, document.getElementById("container")); |
jaywcjlove
added a commit
that referenced
this issue
Feb 24, 2022
jaywcjlove
added a commit
that referenced
this issue
Mar 8, 2022
jaywcjlove
added a commit
that referenced
this issue
Mar 8, 2022
jaywcjlove
added a commit
that referenced
this issue
Mar 8, 2022
This was referenced May 11, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://codesandbox.io/embed/markdown-editor-mermaid-for-react-uvtsx?fontsize=14&hidenavigation=1&theme=dark
The text was updated successfully, but these errors were encountered: