@uiw/react-md-editor 3.25.6 → 4.0.1

package/README.md

@@ -6,6 +6,9 @@
 </p>
 
 <p align="center">
+  <a href="https://jaywcjlove.github.io/#/sponsor" target="__blank">
+    <img alt="Buy me a coffee" src="https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee">
+  </a>
   <a href="https://www.npmjs.com/package/@uiw/react-md-editor" target="__blank">
     <img alt="Downloads" src="https://img.shields.io/npm/dm/@uiw/react-md-editor.svg?style=flat">
   </a>
@@ -594,18 +597,14 @@ export default function App() {
       onChange={(val) => setValue(val)}
       previewOptions={{
         components: {
-          code: ({ inline, children = [], className, ...props }) => {
-            const txt = children[0] || '';
-            if (inline) {
-              if (typeof txt === 'string' && /^\$\$(.*)\$\$/.test(txt)) {
-                const html = katex.renderToString(txt.replace(/^\$\$(.*)\$\$/, '$1'), {
-                  throwOnError: false,
-                });
-                return <code dangerouslySetInnerHTML={{ __html: html }} />;
-              }
-              return <code>{txt}</code>;
+          code: ({ children = [], className, ...props }) => {
+            if (typeof children === 'string' && /^\$\$(.*)\$\$/.test(children)) {
+              const html = katex.renderToString(children.replace(/^\$\$(.*)\$\$/, '$1'), {
+                throwOnError: false,
+              });
+              return <code dangerouslySetInnerHTML={{ __html: html }} style={{ background: 'transparent' }} />;
             }
-            const code = props.node && props.node.children ? getCodeString(props.node.children) : txt;
+            const code = props.node && props.node.children ? getCodeString(props.node.children) : children;
             if (
               typeof code === 'string' &&
               typeof className === 'string' &&
@@ -718,16 +717,25 @@ 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 }) => {
+          container.innerHTML = svg;
+          if (bindFunctions) {
+            bindFunctions(container);
+          }
+        })
+        .catch((error) => {
+          console.log("error:", error);
+        });
     }
   }, [container, isMermaid, code, demoid]);
 
@@ -741,11 +749,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() {
@@ -935,8 +943,8 @@ As always, thanks to our amazing contributors!
 <a href="https://github.com/MercierCorentin" title="Corentin Mercier">
   <img src="https://avatars.githubusercontent.com/u/46066895?v=4" width="42;" alt="Corentin Mercier"/>
 </a>
-<a href="https://github.com/dmitriyyan" title="Dmitriy Yanushkevich">
-  <img src="https://avatars.githubusercontent.com/u/89025862?v=4" width="42;" alt="Dmitriy Yanushkevich"/>
+<a href="https://github.com/dmitriyyan" title="Dmitrii Ianushkevich">
+  <img src="https://avatars.githubusercontent.com/u/89025862?v=4" width="42;" alt="Dmitrii Ianushkevich"/>
 </a>
 <a href="https://github.com/jnishiyama" title="James Finucane">
   <img src="https://avatars.githubusercontent.com/u/2048195?v=4" width="42;" alt="James Finucane"/>

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;