@san-siva/blogkit 1.1.26 → 1.1.28

package/dist/types/dynamicComponents/MermaidDynamic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/MermaidDynamic.tsx"],"names":[],"mappings":"AAQA,UAAU,iBAAiB;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAmBD,QAAA,MAAM,OAAO,GAAI,2CAKd,iBAAiB,4CAsCnB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"MermaidDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/MermaidDynamic.tsx"],"names":[],"mappings":"AASA,UAAU,iBAAiB;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAmBD,QAAA,MAAM,OAAO,GAAI,2CAKd,iBAAiB,4CAsDnB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit",
-	"version": "1.1.26",
+	"version": "1.1.28",
 	"description": "A reusable blog component library for React/Next.js applications with code highlighting, diagrams, and rich content features",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
@@ -61,6 +61,7 @@
 		"@types/react": "^18.3.12",
 		"@types/react-dom": "^18.3.1",
 		"@types/react-syntax-highlighter": "^15.5.13",
+		"mermaid": "^10.0.0",
 		"postcss": "^8.4.49",
 		"postcss-url": "^10.1.3",
 		"rollup": "^4.27.4",

package/src/dynamicComponents/MermaidDynamic.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 import mermaid from 'mermaid';
 
+import CalloutStatic from '../staticComponents/CalloutStatic';
 import styles from '../styles/Mermaid.module.scss';
 
 interface MermaidProperties {
@@ -37,29 +38,31 @@ const Mermaid = ({
 	hasMarginDown = false,
 }: MermaidProperties) => {
 	const [enabled, setEnabled] = useState(false);
+	const [error, setError] = useState<string | null>(null);
 	const mermaidReference = useRef<HTMLDivElement>(null);
+	const renderCount = useRef(0);
 
 	const initializeMermaid = 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) return;
-			mermaidReference.current.innerHTML = svg || '';
+			const { svg, bindFunctions } = await mermaid.render(renderId, code);
+			if (!mermaidReference.current || !svg) return;
+			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]);
 
 	useEffect(() => {
-		if (!code || !mermaidReference.current) return;
-		const timer = setTimeout(async () => {
-			await initializeMermaid();
-		}, 100);
+		if (!code) return;
+		setError(null);
+		const timer = setTimeout(initializeMermaid, 100);
 		return () => clearTimeout(timer);
 	}, [code, initializeMermaid]);
 
@@ -69,8 +72,22 @@ const Mermaid = ({
 				${hasMarginUp ? styles['margin-top--1'] : ''}
 				${hasMarginDown ? styles['margin-bottom--2'] : ''}`}
 		>
-			{enabled ? null : <p>Diagram Loading...</p>}
-			<div ref={mermaidReference} id={id}></div>
+			{error ? (
+				<CalloutStatic type="error">
+					<p>
+						<b>Diagram error:</b> {error}
+					</p>
+				</CalloutStatic>
+			) : !enabled ? (
+				<CalloutStatic type="info">
+					<p>Rendering diagram...</p>
+				</CalloutStatic>
+			) : null}
+			<div
+				ref={mermaidReference}
+				id={id}
+				style={enabled ? undefined : { display: 'none' }}
+			/>
 		</div>
 	);
 };

package/src/styles/CheckList.module.scss

@@ -1,45 +1,45 @@
 @use '@san-siva/stylekit/styles/index.module.scss' as stylekit;
 
 .check-list {
-  display: flex;
-  flex-direction: column;
-  gap: stylekit.space(1);
+	display: flex;
+	flex-direction: column;
+	gap: stylekit.space(1);
 
-  &__item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
+	&__item {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
 
-    &__input {
-      height: stylekit.rem(12);
-      width: stylekit.rem(12);
-      border: 1px solid stylekit.$color--grey-medium;
-      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
-      margin-right: stylekit.space(1);
-      flex-shrink: 0;
+		&__input {
+			height: stylekit.rem(12);
+			width: stylekit.rem(12);
+			border: 1px solid stylekit.$color--grey-medium;
+			box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
+			margin-right: stylekit.space(1);
+			flex-shrink: 0;
 
-      &--checked {
-        height: stylekit.rem(14);
-        width: stylekit.rem(14);
-        background-color: stylekit.$color--base;
-        border: 0px solid stylekit.$color--primary;
-        background-image: url('../assets/tick.svg');
-        background-size: cover;
-      }
-    }
+			&--checked {
+				height: stylekit.rem(14);
+				width: stylekit.rem(14);
+				background-color: stylekit.$color--base;
+				border: 0px solid stylekit.$color--primary;
+				background-image: url('../assets/tick.svg');
+				background-size: cover;
+			}
+		}
 
-    > p {
-      font-size: stylekit.$font-size--small;
-      margin: 0;
-    }
-  }
+		> p {
+			font-size: stylekit.$font-size--small;
+			margin: 0;
+		}
+	}
 }
 
 .margin-top--1 {
-  margin-top: stylekit.space(1);
+	margin-top: stylekit.space(1);
 }
 
 .margin-bottom--2 {
-  margin-bottom: stylekit.space(2);
+	margin-bottom: stylekit.space(2);
 }