@uiw/react-md-editor 3.25.6 → 4.0.0

package/README.md

@@ -718,16 +718,26 @@ 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 code = props.node && props.node.children ? getCodeString(props.node.children) : children[0] || '';
+  const isMermaid =
+    className && /^language-mermaid/.test(className.toLocaleLowerCase());
+  const code = children
+    ? getCodeString(props.node.children)
+    : children[0] || "";
+
   useEffect(() => {
-    if (container && isMermaid) {
-      try {
-        const str = mermaid.render(demoid.current, code);
-        container.innerHTML = str;
-      } catch (error) {
-        container.innerHTML = error;
-      }
+    if (container && isMermaid && demoid.current && code) {
+      mermaid
+        .render(demoid.current, code)
+        .then(({ svg, bindFunctions }) => {
+          console.log("svg:", svg);
+          container.innerHTML = svg;
+          if (bindFunctions) {
+            bindFunctions(container);
+          }
+        })
+        .catch((error) => {
+          console.log("error:", error);
+        });
     }
   }, [container, isMermaid, code, demoid]);
 
@@ -741,11 +751,11 @@ const Code = ({ inline, children = [], className, ...props }) => {
     return (
       <Fragment>
         <code id={demoid.current} style={{ display: "none" }} />
-        <code ref={refElement} data-name="mermaid" />
+        <code className={className} ref={refElement} data-name="mermaid" />
       </Fragment>
     );
   }
-  return <code>{children}</code>;
+  return <code className={className}>{children}</code>;
 };
 
 export default function App() {

package/dist/mdeditor.css

@@ -1183,7 +1183,7 @@ body[data-color-mode*='light'] {
 .w-md-editor-toolbar {
   border-bottom: 1px solid var(--md-editor-box-shadow-color);
   background-color: var(--md-editor-background-color);
-  padding: 5px 5px;
+  padding: 3px;
   display: flex;
   justify-content: space-between;
   align-items: center;