@affanhamid/markdown-renderer 2.3.1 → 2.3.3

package/dist/index.cjs

@@ -1068,15 +1068,16 @@ var MarkdownRenderer = ({
       );
     };
   }, [html, handleRun]);
+  const mermaidReady = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     const mermaidBlocks = container.querySelectorAll(".md-mermaid");
     if (mermaidBlocks.length === 0) return;
     let alive = true;
-    void (async () => {
-      try {
-        const mermaid = (await import("mermaid")).default;
+    if (!mermaidReady.current) {
+      mermaidReady.current = import("mermaid").then((mod) => {
+        const mermaid = mod.default;
         mermaid.initialize({
           startOnLoad: false,
           securityLevel: "antiscript",
@@ -1087,13 +1088,23 @@ var MarkdownRenderer = ({
           flowchart: { useMaxWidth: true, htmlLabels: false },
           sequence: { useMaxWidth: true }
         });
+        return mermaid;
+      });
+    }
+    void (async () => {
+      try {
+        const mermaid = await mermaidReady.current;
+        if (!alive) return;
         for (const block of Array.from(mermaidBlocks)) {
           if (!alive) break;
+          if (block.querySelector("svg")) continue;
           const code = block.getAttribute("data-mermaid-code") || "";
           const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
           try {
             const { svg } = await mermaid.render(id, code.trim());
-            block.innerHTML = `<div style="display:flex;justify-content:center;overflow:auto;padding:1rem">${svg}</div>`;
+            if (alive) {
+              block.innerHTML = `<div style="display:flex;justify-content:center;overflow:auto;padding:1rem">${svg}</div>`;
+            }
           } catch {
           }
         }

package/dist/index.js

@@ -1029,15 +1029,16 @@ var MarkdownRenderer = ({
       );
     };
   }, [html, handleRun]);
+  const mermaidReady = useRef(null);
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     const mermaidBlocks = container.querySelectorAll(".md-mermaid");
     if (mermaidBlocks.length === 0) return;
     let alive = true;
-    void (async () => {
-      try {
-        const mermaid = (await import("mermaid")).default;
+    if (!mermaidReady.current) {
+      mermaidReady.current = import("mermaid").then((mod) => {
+        const mermaid = mod.default;
         mermaid.initialize({
           startOnLoad: false,
           securityLevel: "antiscript",
@@ -1048,13 +1049,23 @@ var MarkdownRenderer = ({
           flowchart: { useMaxWidth: true, htmlLabels: false },
           sequence: { useMaxWidth: true }
         });
+        return mermaid;
+      });
+    }
+    void (async () => {
+      try {
+        const mermaid = await mermaidReady.current;
+        if (!alive) return;
         for (const block of Array.from(mermaidBlocks)) {
           if (!alive) break;
+          if (block.querySelector("svg")) continue;
           const code = block.getAttribute("data-mermaid-code") || "";
           const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
           try {
             const { svg } = await mermaid.render(id, code.trim());
-            block.innerHTML = `<div style="display:flex;justify-content:center;overflow:auto;padding:1rem">${svg}</div>`;
+            if (alive) {
+              block.innerHTML = `<div style="display:flex;justify-content:center;overflow:auto;padding:1rem">${svg}</div>`;
+            }
           } catch {
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affanhamid/markdown-renderer",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "description": "Custom markdown renderer with KaTeX support",
   "type": "module",
   "main": "dist/index.cjs",