@affanhamid/markdown-renderer 2.3.0 → 2.3.2

package/dist/index.cjs

@@ -1069,39 +1069,45 @@ var MarkdownRenderer = ({
     };
   }, [html, handleRun]);
   (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;
-        mermaid.initialize({
-          startOnLoad: false,
-          securityLevel: "antiscript",
-          theme: "neutral",
-          fontFamily: "ui-sans-serif, system-ui, sans-serif",
-          fontSize: 13,
-          htmlLabels: false,
-          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());
-            block.innerHTML = `<div style="display:flex;justify-content:center;overflow:auto;padding:1rem">${svg}</div>`;
-          } catch {
+    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({
+            startOnLoad: false,
+            securityLevel: "antiscript",
+            theme: "neutral",
+            fontFamily: "ui-sans-serif, system-ui, sans-serif",
+            fontSize: 13,
+            htmlLabels: false,
+            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 {
+            }
           }
+        } catch {
         }
-      } catch {
-      }
-    })();
+      })();
+    });
     return () => {
       alive = false;
+      cancelAnimationFrame(rafId);
     };
   }, [html]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, className, dangerouslySetInnerHTML: { __html: html } });

package/dist/index.js

@@ -1030,39 +1030,45 @@ var MarkdownRenderer = ({
     };
   }, [html, handleRun]);
   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;
-        mermaid.initialize({
-          startOnLoad: false,
-          securityLevel: "antiscript",
-          theme: "neutral",
-          fontFamily: "ui-sans-serif, system-ui, sans-serif",
-          fontSize: 13,
-          htmlLabels: false,
-          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());
-            block.innerHTML = `<div style="display:flex;justify-content:center;overflow:auto;padding:1rem">${svg}</div>`;
-          } catch {
+    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({
+            startOnLoad: false,
+            securityLevel: "antiscript",
+            theme: "neutral",
+            fontFamily: "ui-sans-serif, system-ui, sans-serif",
+            fontSize: 13,
+            htmlLabels: false,
+            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 {
+            }
           }
+        } catch {
         }
-      } catch {
-      }
-    })();
+      })();
+    });
     return () => {
       alive = false;
+      cancelAnimationFrame(rafId);
     };
   }, [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.0",
+  "version": "2.3.2",
   "description": "Custom markdown renderer with KaTeX support",
   "type": "module",
   "main": "dist/index.cjs",