@affanhamid/markdown-renderer 2.3.2 → 2.3.4

package/dist/index.cjs

@@ -920,6 +920,7 @@ function renderMarkdownToHtml(markdown, options) {
   }
   return `<div class="prose max-w-none">${parts.join("")}</div>`;
 }
+var mermaidInstance = null;
 var MarkdownRenderer = ({
   markdown,
   className,
@@ -1069,17 +1070,18 @@ var MarkdownRenderer = ({
     };
   }, [html, handleRun]);
   (0, import_react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
     let alive = true;
-    const rafId = requestAnimationFrame(() => {
-      const container = containerRef.current;
-      if (!container || !alive) return;
-      const mermaidBlocks = container.querySelectorAll(".md-mermaid");
-      if (mermaidBlocks.length === 0) return;
-      void (async () => {
-        try {
-          const mermaid = (await import("mermaid")).default;
-          if (!alive) return;
-          mermaid.initialize({
+    let timerId;
+    const renderMermaid = async () => {
+      const blocks = container.querySelectorAll(".md-mermaid");
+      if (blocks.length === 0 || !alive) return;
+      try {
+        if (!mermaidInstance) {
+          const mod = await import("mermaid");
+          mermaidInstance = mod.default;
+          mermaidInstance.initialize({
             startOnLoad: false,
             securityLevel: "antiscript",
             theme: "neutral",
@@ -1089,25 +1091,28 @@ var MarkdownRenderer = ({
             flowchart: { useMaxWidth: true, htmlLabels: false },
             sequence: { useMaxWidth: true }
           });
-          for (const block of Array.from(mermaidBlocks)) {
-            if (!alive) break;
-            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());
-              if (alive) {
-                block.innerHTML = `<div style="display:flex;justify-content:center;overflow:auto;padding:1rem">${svg}</div>`;
-              }
-            } catch {
+        }
+        if (!alive) return;
+        for (const block of Array.from(blocks)) {
+          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 mermaidInstance.render(id, code.trim());
+            if (alive) {
+              block.innerHTML = `<div style="display:flex;justify-content:center;overflow:auto;padding:1rem">${svg}</div>`;
             }
+          } catch {
           }
-        } catch {
         }
-      })();
-    });
+      } catch {
+      }
+    };
+    timerId = setTimeout(renderMermaid, 0);
     return () => {
       alive = false;
-      cancelAnimationFrame(rafId);
+      clearTimeout(timerId);
     };
   }, [html]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, className, dangerouslySetInnerHTML: { __html: html } });

package/dist/index.js

@@ -881,6 +881,7 @@ function renderMarkdownToHtml(markdown, options) {
   }
   return `<div class="prose max-w-none">${parts.join("")}</div>`;
 }
+var mermaidInstance = null;
 var MarkdownRenderer = ({
   markdown,
   className,
@@ -1030,17 +1031,18 @@ var MarkdownRenderer = ({
     };
   }, [html, handleRun]);
   useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
     let alive = true;
-    const rafId = requestAnimationFrame(() => {
-      const container = containerRef.current;
-      if (!container || !alive) return;
-      const mermaidBlocks = container.querySelectorAll(".md-mermaid");
-      if (mermaidBlocks.length === 0) return;
-      void (async () => {
-        try {
-          const mermaid = (await import("mermaid")).default;
-          if (!alive) return;
-          mermaid.initialize({
+    let timerId;
+    const renderMermaid = async () => {
+      const blocks = container.querySelectorAll(".md-mermaid");
+      if (blocks.length === 0 || !alive) return;
+      try {
+        if (!mermaidInstance) {
+          const mod = await import("mermaid");
+          mermaidInstance = mod.default;
+          mermaidInstance.initialize({
             startOnLoad: false,
             securityLevel: "antiscript",
             theme: "neutral",
@@ -1050,25 +1052,28 @@ var MarkdownRenderer = ({
             flowchart: { useMaxWidth: true, htmlLabels: false },
             sequence: { useMaxWidth: true }
           });
-          for (const block of Array.from(mermaidBlocks)) {
-            if (!alive) break;
-            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());
-              if (alive) {
-                block.innerHTML = `<div style="display:flex;justify-content:center;overflow:auto;padding:1rem">${svg}</div>`;
-              }
-            } catch {
+        }
+        if (!alive) return;
+        for (const block of Array.from(blocks)) {
+          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 mermaidInstance.render(id, code.trim());
+            if (alive) {
+              block.innerHTML = `<div style="display:flex;justify-content:center;overflow:auto;padding:1rem">${svg}</div>`;
             }
+          } catch {
           }
-        } catch {
         }
-      })();
-    });
+      } catch {
+      }
+    };
+    timerId = setTimeout(renderMermaid, 0);
     return () => {
       alive = false;
-      cancelAnimationFrame(rafId);
+      clearTimeout(timerId);
     };
   }, [html]);
   return /* @__PURE__ */ jsx("div", { ref: containerRef, className, dangerouslySetInnerHTML: { __html: html } });

package/package.json

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