@uiw/react-md-editor 3.9.8 → 3.10.1

package/README.md

@@ -310,14 +310,14 @@ export default function App() {
 
 Using [mermaid](https://github.com/mermaid-js/mermaid) to generation of diagram and flowchart from text in a similar manner as markdown
 
-[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/markdown-editor-mermaid-for-react-uvtsx?fontsize=14&hidenavigation=1&theme=dark)
+[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/recursing-water-08i59s?fontsize=14&hidenavigation=1&theme=dark)
 
 ```bash
 npm install mermaid
 ```
 
 ```jsx
-import React from "react";
+import React, { useState, useRef, useEffect } from "react";
 import ReactDOM from "react-dom";
 import MDEditor from "@uiw/react-md-editor";
 import mermaid from "mermaid";
@@ -345,37 +345,61 @@ Bob-->>John: Jolly good!
 \`\`\`
 `;
 
-const getCode = (arr = []) => arr.map(dt => {
-  if (typeof dt === 'string') {
+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);
   }
-}).filter(Boolean).join('');
+  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={mdMermaid || ""}
+      value={value}
       previewOptions={{
         components: {
-          code: ({ inline, children = [], className, ...props }) => {
-            const code = getCode(children);
-            if (
-              typeof code === 'string' &&
-              typeof className === 'string' &&
-              /^language-mermaid/.test(className.toLocaleLowerCase())
-            ) {
-              const Elm = document.createElement("div");
-              Elm.id = "demo";
-              const svg = mermaid.render("demo", code);
-              return <code dangerouslySetInnerHTML={{ __html: svg }} />
-            }
-            return <code className={String(className)}>{children}</code>;
-          },
-        },
+          code: Code
+        }
       }}
     />
   );
@@ -439,6 +463,7 @@ export default HomePage;
 - `visiableDragbar?: boolean=true`: Show drag and drop tool. Set the height of the editor.
 - `highlightEnable?: boolean=true`: Disable editing area code highlighting. The value is `false`, which increases the editing speed.
 - `fullscreen?: boolean=false`: Show markdown preview.
+- `overflow?: boolean=true`: Disable `fullscreen` setting body styles
 - `preview?: 'live' | 'edit' | 'preview'`: Default value `live`, Show markdown preview.
 - `maxHeight?: number=1200`: Maximum drag height. The `visiableDragbar=true` value is valid.
 - `minHeights?: number=100`: Minimum drag height. The `visiableDragbar=true` value is valid.

package/dist/mdeditor.css

@@ -187,8 +187,6 @@
 .wmde-markdown ul {
   margin-bottom: 16px;
   margin-top: 0;
-  list-style: disc outside none;
-  list-style: initial;
 }
 .wmde-markdown li {
   display: list-item;