@san-siva/blogkit 1.1.25 → 1.1.28

package/dist/cjs/dynamicComponents/MermaidDynamic.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var mermaid = require('mermaid');
+var CalloutStatic = require('../staticComponents/CalloutStatic.js');
 var Mermaid_module = require('../styles/Mermaid.module.scss.js');
 
 mermaid.initialize({
@@ -26,33 +27,37 @@ mermaid.initialize({
 });
 const Mermaid = ({ code = '', id = '', hasMarginUp = false, hasMarginDown = false, }) => {
     const [enabled, setEnabled] = react.useState(false);
+    const [error, setError] = react.useState(null);
     const mermaidReference = react.useRef(null);
+    const renderCount = react.useRef(0);
     const initializeMermaid = react.useCallback(async () => {
+        if (!mermaidReference.current || !code)
+            return;
+        const renderId = `mermaid-diagram-${id}-${++renderCount.current}`;
+        document.getElementById(renderId)?.remove();
         try {
-            if (!mermaidReference.current || !code)
-                return;
-            const { svg, bindFunctions } = await mermaid.render(`mermaid-diagram-${id}`, code);
-            if (!svg)
+            const { svg, bindFunctions } = await mermaid.render(renderId, code);
+            if (!mermaidReference.current || !svg)
                 return;
-            mermaidReference.current.innerHTML = svg || '';
+            mermaidReference.current.innerHTML = svg;
             bindFunctions?.(mermaidReference.current);
             setEnabled(true);
         }
-        catch (error) {
-            console.error('Failed to render Mermaid diagram:', error);
+        catch (err) {
+            const message = err instanceof Error ? err.message : 'Failed to render diagram';
+            setError(message);
         }
     }, [code, id]);
     react.useEffect(() => {
-        if (!code || !mermaidReference.current)
+        if (!code)
             return;
-        const timer = setTimeout(async () => {
-            await initializeMermaid();
-        }, 100);
+        setError(null);
+        const timer = setTimeout(initializeMermaid, 100);
         return () => clearTimeout(timer);
     }, [code, initializeMermaid]);
     return (jsxRuntime.jsxs("div", { className: `${Mermaid_module.default.mermaid}
 				${hasMarginUp ? Mermaid_module.default['margin-top--1'] : ''}
-				${hasMarginDown ? Mermaid_module.default['margin-bottom--2'] : ''}`, children: [enabled ? null : jsxRuntime.jsx("p", { children: "Diagram Loading..." }), jsxRuntime.jsx("div", { ref: mermaidReference, id: id })] }));
+				${hasMarginDown ? Mermaid_module.default['margin-bottom--2'] : ''}`, children: [error ? (jsxRuntime.jsx(CalloutStatic.default, { type: "error", children: jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("b", { children: "Diagram error:" }), " ", error] }) })) : !enabled ? (jsxRuntime.jsx(CalloutStatic.default, { type: "info", children: jsxRuntime.jsx("p", { children: "Rendering diagram..." }) })) : null, jsxRuntime.jsx("div", { ref: mermaidReference, id: id, style: enabled ? undefined : { display: 'none' } })] }));
 };
 
 exports.default = Mermaid;

package/dist/cjs/dynamicComponents/MermaidDynamic.js.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidDynamic.js","sources":["../../../src/dynamicComponents/MermaidDynamic.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport mermaid from 'mermaid';\n\nimport styles from '../styles/Mermaid.module.scss';\n\ninterface MermaidProperties {\n\tcode: string;\n\tid: string;\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nmermaid.initialize({\n\tstartOnLoad: false,\n\ttheme: 'default',\n\ttimeline: {\n\t\tuseMaxWidth: true,\n\t\tdiagramMarginX: 0,\n\t},\n\tflowchart: {\n\t\tuseMaxWidth: true,\n\t\tdiagramPadding: 0,\n\t},\n\tsequence: {\n\t\tuseMaxWidth: true,\n\t\tdiagramMarginX: 0,\n\t},\n});\n\nconst Mermaid = ({\n\tcode = '',\n\tid = '',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: MermaidProperties) => {\n\tconst [enabled, setEnabled] = useState(false);\n\tconst mermaidReference = useRef<HTMLDivElement>(null);\n\n\tconst initializeMermaid = useCallback(async () => {\n\t\ttry {\n\t\t\tif (!mermaidReference.current || !code) return;\n\t\t\tconst { svg, bindFunctions } = await mermaid.render(\n\t\t\t\t`mermaid-diagram-${id}`,\n\t\t\t\tcode\n\t\t\t);\n\t\t\tif (!svg) return;\n\t\t\tmermaidReference.current.innerHTML = svg || '';\n\t\t\tbindFunctions?.(mermaidReference.current);\n\t\t\tsetEnabled(true);\n\t\t} catch (error) {\n\t\t\tconsole.error('Failed to render Mermaid diagram:', error);\n\t\t}\n\t}, [code, id]);\n\n\tuseEffect(() => {\n\t\tif (!code || !mermaidReference.current) return;\n\t\tconst timer = setTimeout(async () => {\n\t\t\tawait initializeMermaid();\n\t\t}, 100);\n\t\treturn () => clearTimeout(timer);\n\t}, [code, initializeMermaid]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mermaid}\n\t\t\t\t${hasMarginUp ? styles['margin-top--1'] : ''}\n\t\t\t\t${hasMarginDown ? styles['margin-bottom--2'] : ''}`}\n\t\t>\n\t\t\t{enabled ? null : <p>Diagram Loading...</p>}\n\t\t\t<div ref={mermaidReference} id={id}></div>\n\t\t</div>\n\t);\n};\n\nexport default Mermaid;\n"],"names":["useState","useRef","useCallback","useEffect","_jsxs","styles","_jsx"],"mappings":";;;;;;;;;AAeA,OAAO,CAAC,UAAU,CAAC;AAClB,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,QAAQ,EAAE;AACT,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,cAAc,EAAE,CAAC;AACjB,KAAA;AACD,IAAA,SAAS,EAAE;AACV,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,cAAc,EAAE,CAAC;AACjB,KAAA;AACD,IAAA,QAAQ,EAAE;AACT,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,cAAc,EAAE,CAAC;AACjB,KAAA;AACD,CAAA,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,EAChB,IAAI,GAAG,EAAE,EACT,EAAE,GAAG,EAAE,EACP,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACF,KAAI;IACvB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AAC7C,IAAA,MAAM,gBAAgB,GAAGC,YAAM,CAAiB,IAAI,CAAC;AAErD,IAAA,MAAM,iBAAiB,GAAGC,iBAAW,CAAC,YAAW;AAChD,QAAA,IAAI;AACH,YAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,IAAI,CAAC,IAAI;gBAAE;AACxC,YAAA,MAAM,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,MAAM,OAAO,CAAC,MAAM,CAClD,CAAA,gBAAA,EAAmB,EAAE,EAAE,EACvB,IAAI,CACJ;AACD,YAAA,IAAI,CAAC,GAAG;gBAAE;YACV,gBAAgB,CAAC,OAAO,CAAC,SAAS,GAAG,GAAG,IAAI,EAAE;AAC9C,YAAA,aAAa,GAAG,gBAAgB,CAAC,OAAO,CAAC;YACzC,UAAU,CAAC,IAAI,CAAC;QACjB;QAAE,OAAO,KAAK,EAAE;AACf,YAAA,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,KAAK,CAAC;QAC1D;AACD,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAEdC,eAAS,CAAC,MAAK;AACd,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO;YAAE;AACxC,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,YAAW;YACnC,MAAM,iBAAiB,EAAE;QAC1B,CAAC,EAAE,GAAG,CAAC;AACP,QAAA,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC;AACjC,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;AAE7B,IAAA,QACCC,eAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGC,sBAAM,CAAC,OAAO;MACzB,WAAW,GAAGA,sBAAM,CAAC,eAAe,CAAC,GAAG,EAAE;AAC1C,IAAA,EAAA,aAAa,GAAGA,sBAAM,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAA,CAAE,EAAA,QAAA,EAAA,CAEnD,OAAO,GAAG,IAAI,GAAGC,cAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,CAAyB,EAC3CA,wBAAK,GAAG,EAAE,gBAAgB,EAAE,EAAE,EAAE,EAAE,EAAA,CAAQ,CAAA,EAAA,CACrC;AAER;;;;"}
+{"version":3,"file":"MermaidDynamic.js","sources":["../../../src/dynamicComponents/MermaidDynamic.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport mermaid from 'mermaid';\n\nimport CalloutStatic from '../staticComponents/CalloutStatic';\nimport styles from '../styles/Mermaid.module.scss';\n\ninterface MermaidProperties {\n\tcode: string;\n\tid: string;\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nmermaid.initialize({\n\tstartOnLoad: false,\n\ttheme: 'default',\n\ttimeline: {\n\t\tuseMaxWidth: true,\n\t\tdiagramMarginX: 0,\n\t},\n\tflowchart: {\n\t\tuseMaxWidth: true,\n\t\tdiagramPadding: 0,\n\t},\n\tsequence: {\n\t\tuseMaxWidth: true,\n\t\tdiagramMarginX: 0,\n\t},\n});\n\nconst Mermaid = ({\n\tcode = '',\n\tid = '',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: MermaidProperties) => {\n\tconst [enabled, setEnabled] = useState(false);\n\tconst [error, setError] = useState<string | null>(null);\n\tconst mermaidReference = useRef<HTMLDivElement>(null);\n\tconst renderCount = useRef(0);\n\n\tconst initializeMermaid = useCallback(async () => {\n\t\tif (!mermaidReference.current || !code) return;\n\t\tconst renderId = `mermaid-diagram-${id}-${++renderCount.current}`;\n\t\tdocument.getElementById(renderId)?.remove();\n\t\ttry {\n\t\t\tconst { svg, bindFunctions } = await mermaid.render(renderId, code);\n\t\t\tif (!mermaidReference.current || !svg) return;\n\t\t\tmermaidReference.current.innerHTML = svg;\n\t\t\tbindFunctions?.(mermaidReference.current);\n\t\t\tsetEnabled(true);\n\t\t} catch (err) {\n\t\t\tconst message =\n\t\t\t\terr instanceof Error ? err.message : 'Failed to render diagram';\n\t\t\tsetError(message);\n\t\t}\n\t}, [code, id]);\n\n\tuseEffect(() => {\n\t\tif (!code) return;\n\t\tsetError(null);\n\t\tconst timer = setTimeout(initializeMermaid, 100);\n\t\treturn () => clearTimeout(timer);\n\t}, [code, initializeMermaid]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mermaid}\n\t\t\t\t${hasMarginUp ? styles['margin-top--1'] : ''}\n\t\t\t\t${hasMarginDown ? styles['margin-bottom--2'] : ''}`}\n\t\t>\n\t\t\t{error ? (\n\t\t\t\t<CalloutStatic type=\"error\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<b>Diagram error:</b> {error}\n\t\t\t\t\t</p>\n\t\t\t\t</CalloutStatic>\n\t\t\t) : !enabled ? (\n\t\t\t\t<CalloutStatic type=\"info\">\n\t\t\t\t\t<p>Rendering diagram...</p>\n\t\t\t\t</CalloutStatic>\n\t\t\t) : null}\n\t\t\t<div\n\t\t\t\tref={mermaidReference}\n\t\t\t\tid={id}\n\t\t\t\tstyle={enabled ? undefined : { display: 'none' }}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default Mermaid;\n"],"names":["useState","useRef","useCallback","useEffect","_jsxs","styles","_jsx","CalloutStatic"],"mappings":"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"}