@affanhamid/markdown-renderer 2.3.3 → 2.3.5

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,
@@ -1068,40 +1069,36 @@ 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;
-    if (!mermaidReady.current) {
-      mermaidReady.current = import("mermaid").then((mod) => {
-        const mermaid = mod.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 }
-        });
-        return mermaid;
-      });
-    }
-    void (async () => {
+    const renderBlocks = async () => {
+      const blocks = container.querySelectorAll(".md-mermaid");
+      if (blocks.length === 0 || !alive) return;
       try {
-        const mermaid = await mermaidReady.current;
+        if (!mermaidInstance) {
+          const mod = await import("mermaid");
+          mermaidInstance = mod.default;
+          mermaidInstance.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 }
+          });
+        }
         if (!alive) return;
-        for (const block of Array.from(mermaidBlocks)) {
+        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 mermaid.render(id, code.trim());
+            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>`;
             }
@@ -1110,11 +1107,21 @@ var MarkdownRenderer = ({
         }
       } catch {
       }
-    })();
+    };
+    void renderBlocks();
+    const observer = new MutationObserver(() => {
+      if (!alive) return;
+      const blocks = container.querySelectorAll(".md-mermaid:not(:has(svg))");
+      if (blocks.length > 0) {
+        void renderBlocks();
+      }
+    });
+    observer.observe(container, { childList: true, subtree: true });
     return () => {
       alive = false;
+      observer.disconnect();
     };
-  }, [html]);
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, className, dangerouslySetInnerHTML: { __html: html } });
 };
 var markdown_renderer_default = MarkdownRenderer;

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,
@@ -1029,40 +1030,36 @@ 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;
-    if (!mermaidReady.current) {
-      mermaidReady.current = import("mermaid").then((mod) => {
-        const mermaid = mod.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 }
-        });
-        return mermaid;
-      });
-    }
-    void (async () => {
+    const renderBlocks = async () => {
+      const blocks = container.querySelectorAll(".md-mermaid");
+      if (blocks.length === 0 || !alive) return;
       try {
-        const mermaid = await mermaidReady.current;
+        if (!mermaidInstance) {
+          const mod = await import("mermaid");
+          mermaidInstance = mod.default;
+          mermaidInstance.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 }
+          });
+        }
         if (!alive) return;
-        for (const block of Array.from(mermaidBlocks)) {
+        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 mermaid.render(id, code.trim());
+            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>`;
             }
@@ -1071,11 +1068,21 @@ var MarkdownRenderer = ({
         }
       } catch {
       }
-    })();
+    };
+    void renderBlocks();
+    const observer = new MutationObserver(() => {
+      if (!alive) return;
+      const blocks = container.querySelectorAll(".md-mermaid:not(:has(svg))");
+      if (blocks.length > 0) {
+        void renderBlocks();
+      }
+    });
+    observer.observe(container, { childList: true, subtree: true });
     return () => {
       alive = false;
+      observer.disconnect();
     };
-  }, [html]);
+  }, []);
   return /* @__PURE__ */ jsx("div", { ref: containerRef, className, dangerouslySetInnerHTML: { __html: html } });
 };
 var markdown_renderer_default = MarkdownRenderer;

package/package.json

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