@san-siva/blogkit 1.1.35 → 1.1.37

package/src/dynamicComponents/MermaidDynamic.tsx

@@ -1,9 +1,13 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 import mermaid from 'mermaid';
 
+import MermaidControls from '../components/MermaidControls';
+import MermaidViewport from '../components/MermaidViewport';
+import { usePanZoom } from '../hooks/usePanZoom';
 import CalloutStatic from '../staticComponents/CalloutStatic';
 import styles from '../styles/Mermaid.module.scss';
 
@@ -31,10 +35,6 @@ mermaid.initialize({
 	},
 });
 
-const MIN_SCALE = 0.5;
-const MAX_SCALE = 4;
-const ZOOM_STEP = 0.15;
-
 const Mermaid = ({
 	code = '',
 	id = '',
@@ -43,109 +43,69 @@ const Mermaid = ({
 }: MermaidProperties) => {
 	const [enabled, setEnabled] = useState(false);
 	const [error, setError] = useState<string | null>(null);
-	const [transform, setTransform] = useState({ scale: 1, x: 0, y: 0 });
-	const [isDragging, setIsDragging] = useState(false);
+	const [isExpanded, setIsExpanded] = useState(false);
 
 	const mermaidReference = useRef<HTMLDivElement>(null);
-	const viewportRef = useRef<HTMLDivElement>(null);
+	const modalMermaidReference = useRef<HTMLDivElement>(null);
 	const renderCount = useRef(0);
-	const transformRef = useRef({ scale: 1, x: 0, y: 0 });
-	const isDraggingRef = useRef(false);
-	const dragStart = useRef({
-		mouseX: 0,
-		mouseY: 0,
-		transformX: 0,
-		transformY: 0,
-	});
 
-	const applyTransform = useCallback(
-		(
-			updater: (
-				prev: typeof transformRef.current
-			) => typeof transformRef.current
-		) => {
-			const next = updater(transformRef.current);
-			transformRef.current = next;
-			setTransform(next);
+	const inline = usePanZoom();
+	const modal = usePanZoom();
+
+	const renderInto = useCallback(
+		async (target: HTMLDivElement | null, prefix: string) => {
+			if (!target || !code) return false;
+			const renderId = `${prefix}-${id}-${++renderCount.current}`;
+			try {
+				const { svg, bindFunctions } = await mermaid.render(renderId, code);
+				if (!svg) return false;
+				target.innerHTML = svg;
+				bindFunctions?.(target);
+				return true;
+			} catch (err) {
+				const message =
+					err instanceof Error ? err.message : 'Failed to render diagram';
+				setError(message);
+				return false;
+			}
 		},
-		[]
+		[code, id]
 	);
 
-	const initializeMermaid = useCallback(async () => {
-		if (!mermaidReference.current || !code) return;
-		const renderId = `mermaid-diagram-${id}-${++renderCount.current}`;
-		document.getElementById(renderId)?.remove();
-		try {
-			const { svg, bindFunctions } = await mermaid.render(renderId, code);
-			if (!mermaidReference.current || !svg) return;
-			mermaidReference.current.innerHTML = svg;
-			bindFunctions?.(mermaidReference.current);
-			setEnabled(true);
-		} catch (err) {
-			const message =
-				err instanceof Error ? err.message : 'Failed to render diagram';
-			setError(message);
-		}
-	}, [code, id]);
-
 	useEffect(() => {
 		if (!code) return;
 		setError(null);
-		applyTransform(() => ({ scale: 1, x: 0, y: 0 }));
-		const timer = setTimeout(initializeMermaid, 100);
+		inline.reset();
+		const timer = setTimeout(() => {
+			renderInto(mermaidReference.current, 'mermaid-diagram').then(ok => {
+				if (ok) setEnabled(true);
+			});
+		}, 100);
 		return () => clearTimeout(timer);
-	}, [code, initializeMermaid, applyTransform]);
-
+	}, [code, renderInto, inline.reset]);
 
+	useEffect(() => {
+		if (!isExpanded) return;
+		modal.reset();
+		const timer = setTimeout(() => {
+			renderInto(modalMermaidReference.current, 'mermaid-modal');
+		}, 0);
+		return () => clearTimeout(timer);
+	}, [isExpanded, renderInto, modal.reset]);
 
-	const handleMouseDown = useCallback((e: React.MouseEvent) => {
-		e.preventDefault();
-		isDraggingRef.current = true;
-		setIsDragging(true);
-		dragStart.current = {
-			mouseX: e.clientX,
-			mouseY: e.clientY,
-			transformX: transformRef.current.x,
-			transformY: transformRef.current.y,
+	useEffect(() => {
+		if (!isExpanded) return;
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') setIsExpanded(false);
 		};
-	}, []);
-
-	const handleMouseMove = useCallback(
-		(e: React.MouseEvent) => {
-			if (!isDraggingRef.current) return;
-			applyTransform(prev => ({
-				...prev,
-				x:
-					dragStart.current.transformX + (e.clientX - dragStart.current.mouseX),
-				y:
-					dragStart.current.transformY + (e.clientY - dragStart.current.mouseY),
-			}));
-		},
-		[applyTransform]
-	);
-
-	const handleMouseUp = useCallback(() => {
-		isDraggingRef.current = false;
-		setIsDragging(false);
-	}, []);
-
-	const zoomIn = useCallback(() => {
-		applyTransform(prev => ({
-			...prev,
-			scale: Math.min(prev.scale * (1 + ZOOM_STEP), MAX_SCALE),
-		}));
-	}, [applyTransform]);
-
-	const zoomOut = useCallback(() => {
-		applyTransform(prev => ({
-			...prev,
-			scale: Math.max(prev.scale * (1 - ZOOM_STEP), MIN_SCALE),
-		}));
-	}, [applyTransform]);
-
-	const resetView = useCallback(() => {
-		applyTransform(() => ({ scale: 1, x: 0, y: 0 }));
-	}, [applyTransform]);
+		const previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = 'hidden';
+		window.addEventListener('keydown', onKey);
+		return () => {
+			document.body.style.overflow = previousOverflow;
+			window.removeEventListener('keydown', onKey);
+		};
+	}, [isExpanded]);
 
 	return (
 		<div
@@ -164,45 +124,55 @@ const Mermaid = ({
 					<p>Rendering diagram...</p>
 				</CalloutStatic>
 			) : (
-				<div className={styles['mermaid__controls']}>
-					<button className={styles['mermaid__controls__btn']} onClick={zoomIn}>
-						+
-					</button>
-					<button
-						className={styles['mermaid__controls__btn']}
-						onClick={zoomOut}
-					>
-						−
-					</button>
-					<button
-						className={styles['mermaid__controls__btn']}
-						onClick={resetView}
-					>
-						Reset
-					</button>
-				</div>
+				<MermaidControls
+					className={styles['mermaid__controls']}
+					isExpanded={false}
+					onZoomIn={inline.zoomIn}
+					onZoomOut={inline.zoomOut}
+					onReset={inline.reset}
+					onToggleExpand={() => setIsExpanded(true)}
+				/>
 			)}
-			<div
-				ref={viewportRef}
-				className={`${styles['mermaid__viewport']} ${
-					isDragging ? styles['mermaid__viewport--dragging'] : ''
-				}`}
-				style={enabled ? undefined : { display: 'none' }}
-				onMouseDown={handleMouseDown}
-				onMouseMove={handleMouseMove}
-				onMouseUp={handleMouseUp}
-				onMouseLeave={handleMouseUp}
-			>
-				<div
-					style={{
-						transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`,
-						transformOrigin: '0 0',
-						transition: isDragging ? 'none' : 'transform 0.1s ease',
-					}}
-				>
-					<div ref={mermaidReference} id={id} />
-				</div>
-			</div>
+			<MermaidViewport
+				className={styles['mermaid__viewport']}
+				draggingClassName={styles['mermaid__viewport--dragging']}
+				pan={inline}
+				contentRef={mermaidReference}
+				contentId={id}
+				hidden={!enabled}
+			/>
+
+			{isExpanded &&
+				typeof document !== 'undefined' &&
+				createPortal(
+					<div
+						className={styles['mermaid__modal']}
+						onClick={() => setIsExpanded(false)}
+						role="dialog"
+						aria-modal="true"
+					>
+						<div
+							className={styles['mermaid__modal__content']}
+							onClick={e => e.stopPropagation()}
+						>
+							<MermaidControls
+								className={styles['mermaid__modal__controls']}
+								isExpanded={true}
+								onZoomIn={modal.zoomIn}
+								onZoomOut={modal.zoomOut}
+								onReset={modal.reset}
+								onToggleExpand={() => setIsExpanded(false)}
+							/>
+							<MermaidViewport
+								className={styles['mermaid__modal__viewport']}
+								draggingClassName={styles['mermaid__modal__viewport--dragging']}
+								pan={modal}
+								contentRef={modalMermaidReference}
+							/>
+						</div>
+					</div>,
+					document.body
+				)}
 		</div>
 	);
 };

package/src/hooks/usePanZoom.ts

@@ -0,0 +1,126 @@
+import { useCallback, useRef, useState } from 'react';
+
+export interface Transform {
+	scale: number;
+	x: number;
+	y: number;
+}
+
+export interface UsePanZoomOptions {
+	initialTransform?: Transform;
+	minScale?: number;
+	maxScale?: number;
+	zoomStep?: number;
+}
+
+const DEFAULT_INITIAL_TRANSFORM: Transform = { scale: 1, x: 0, y: 0 };
+const DEFAULT_MIN_SCALE = 0.5;
+const DEFAULT_MAX_SCALE = 4;
+const DEFAULT_ZOOM_STEP = 0.15;
+
+export const usePanZoom = ({
+	initialTransform = DEFAULT_INITIAL_TRANSFORM,
+	minScale = DEFAULT_MIN_SCALE,
+	maxScale = DEFAULT_MAX_SCALE,
+	zoomStep = DEFAULT_ZOOM_STEP,
+}: UsePanZoomOptions = {}) => {
+	const [transform, setTransform] = useState<Transform>(initialTransform);
+	const [isDragging, setIsDragging] = useState(false);
+	const transformRef = useRef<Transform>(initialTransform);
+	const isDraggingRef = useRef(false);
+	const dragStart = useRef({
+		mouseX: 0,
+		mouseY: 0,
+		transformX: 0,
+		transformY: 0,
+	});
+
+	const apply = useCallback((updater: (prev: Transform) => Transform) => {
+		const next = updater(transformRef.current);
+		transformRef.current = next;
+		setTransform(next);
+	}, []);
+
+	const onMouseDown = useCallback((e: React.MouseEvent) => {
+		e.preventDefault();
+		isDraggingRef.current = true;
+		setIsDragging(true);
+		dragStart.current = {
+			mouseX: e.clientX,
+			mouseY: e.clientY,
+			transformX: transformRef.current.x,
+			transformY: transformRef.current.y,
+		};
+	}, []);
+
+	const onMouseMove = useCallback(
+		(e: React.MouseEvent) => {
+			if (!isDraggingRef.current) return;
+			apply(prev => ({
+				...prev,
+				x:
+					dragStart.current.transformX + (e.clientX - dragStart.current.mouseX),
+				y:
+					dragStart.current.transformY + (e.clientY - dragStart.current.mouseY),
+			}));
+		},
+		[apply]
+	);
+
+	const onMouseUp = useCallback(() => {
+		isDraggingRef.current = false;
+		setIsDragging(false);
+	}, []);
+
+	const zoomIn = useCallback(() => {
+		apply(prev => ({
+			...prev,
+			scale: Math.min(prev.scale * (1 + zoomStep), maxScale),
+		}));
+	}, [apply, zoomStep, maxScale]);
+
+	const zoomOut = useCallback(() => {
+		apply(prev => ({
+			...prev,
+			scale: Math.max(prev.scale * (1 - zoomStep), minScale),
+		}));
+	}, [apply, zoomStep, minScale]);
+
+	const zoomAtPoint = useCallback(
+		(deltaY: number, pointX: number, pointY: number) => {
+			apply(prev => {
+				const factor = deltaY < 0 ? 1 + zoomStep : 1 - zoomStep;
+				const newScale = Math.max(
+					minScale,
+					Math.min(maxScale, prev.scale * factor)
+				);
+				if (newScale === prev.scale) return prev;
+				const ratio = newScale / prev.scale;
+				return {
+					scale: newScale,
+					x: pointX - (pointX - prev.x) * ratio,
+					y: pointY - (pointY - prev.y) * ratio,
+				};
+			});
+		},
+		[apply, zoomStep, minScale, maxScale]
+	);
+
+	const reset = useCallback(() => {
+		apply(() => initialTransform);
+	}, [apply, initialTransform]);
+
+	return {
+		transform,
+		isDragging,
+		onMouseDown,
+		onMouseMove,
+		onMouseUp,
+		zoomIn,
+		zoomOut,
+		zoomAtPoint,
+		reset,
+	};
+};
+
+export type PanZoom = ReturnType<typeof usePanZoom>;

package/src/styles/CodeBlock.module.scss

@@ -85,6 +85,41 @@ $code-block-background-color: #282a36;
 			color: stylekit.$color--code;
 		}
 
+		&__actions {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: stylekit.rem(4);
+		}
+
+		&__expand {
+			position: relative;
+			height: stylekit.rem(32);
+			width: stylekit.rem(32);
+			cursor: pointer;
+			transition: all 0.2s ease-in-out;
+
+			&::before {
+				content: '';
+				position: absolute;
+				inset: 0;
+				background-image: url('../assets/expand.svg');
+				background-size: stylekit.rem(14) stylekit.rem(14);
+				background-position: center;
+				background-repeat: no-repeat;
+				filter: invert(1);
+			}
+
+			&:hover {
+				background-color: stylekit.$color--grey-dark;
+				border-radius: 100%;
+			}
+
+			&--collapse::before {
+				background-image: url('../assets/collapse.svg');
+			}
+		}
+
 		&__copy {
 			height: stylekit.rem(32);
 			width: stylekit.rem(32);
@@ -106,6 +141,69 @@ $code-block-background-color: #282a36;
 			}
 		}
 	}
+
+	&__modal {
+		position: fixed;
+		inset: 0;
+		z-index: 9999;
+		background-color: rgba(0, 0, 0, 0.7);
+		display: flex;
+		align-items: stretch;
+		justify-content: stretch;
+
+		&__content {
+			background-color: $code-block-background-color;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			position: relative;
+		}
+
+		&__wrapper {
+			flex: 1;
+			font-family: stylekit.$font-family--code;
+			overflow: auto;
+
+			scrollbar-width: thin;
+			scrollbar-color: stylekit.$color--grey-dark $code-block-background-color;
+
+			&::-webkit-scrollbar {
+				height: 8px;
+				width: 8px;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: $code-block-background-color;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background-color: stylekit.$color--grey-dark;
+				border-radius: 4px;
+			}
+
+			padding: stylekit.rem(18);
+			tab-size: 2;
+
+			> pre {
+				margin: 0;
+				padding: 0 !important;
+				width: max-content;
+				min-width: 100%;
+
+				> code,
+				> code > * {
+					font-family: stylekit.$font-family--code;
+					font-size: stylekit.$font-size--small;
+					font-weight: unset;
+					font-style: unset;
+					line-height: stylekit.$line-height--normal;
+					color: unset;
+					text-align: left !important;
+				}
+			}
+		}
+	}
 }
 
 .margin-top--1 {

package/src/styles/CodeBlock.module.scss.d.ts

@@ -5,8 +5,14 @@ declare const styles: {
   readonly 'code-block__wrapper': string;
   readonly 'code-block__header': string;
   readonly 'code-block__header__title': string;
+  readonly 'code-block__header__actions': string;
+  readonly 'code-block__header__expand': string;
+  readonly 'code-block__header__expand--collapse': string;
   readonly 'code-block__header__copy': string;
   readonly 'code-block__header__copy--active': string;
+  readonly 'code-block__modal': string;
+  readonly 'code-block__modal__content': string;
+  readonly 'code-block__modal__wrapper': string;
 	readonly 'code-block--static': string;
   readonly 'margin-top--1': string;
   readonly 'margin-bottom--2': string;

package/src/styles/Mermaid.module.scss

@@ -16,19 +16,45 @@
 		opacity: 0;
 
 		&__btn {
+			align-items: center;
 			background: none;
+			background-position: center;
+			background-repeat: no-repeat;
+			background-size: styles.rem(14) styles.rem(14);
 			border: 1px solid styles.$color--grey-medium;
+			border-radius: styles.rem(2);
 			color: styles.$color--dark;
 			cursor: pointer;
-			font-size: styles.$font-size--very-small;
-			font-weight: styles.$font-weight--500;
+			display: inline-flex;
+			height: styles.rem(28);
+			justify-content: center;
 			line-height: 1;
-			padding: styles.rem(4) styles.rem(8);
-			border-radius: styles.rem(2);
+			padding: 0;
+			width: styles.rem(28);
 
 			&:hover {
 				background-color: rgba(0, 0, 0, 0.05);
 			}
+
+			&--zoom-in {
+				background-image: url('../assets/zoom-in.svg');
+			}
+
+			&--zoom-out {
+				background-image: url('../assets/zoom-out.svg');
+			}
+
+			&--reset {
+				background-image: url('../assets/reset.svg');
+			}
+
+			&--expand {
+				background-image: url('../assets/expand.svg');
+			}
+
+			&--collapse {
+				background-image: url('../assets/collapse.svg');
+			}
 		}
 	}
 
@@ -43,6 +69,48 @@
 		}
 	}
 
+	&__modal {
+		position: fixed;
+		inset: 0;
+		z-index: 9999;
+		background-color: rgba(0, 0, 0, 0.7);
+		display: flex;
+		align-items: stretch;
+		justify-content: stretch;
+
+		&__content {
+			background-color: styles.$color--base;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			position: relative;
+		}
+
+		&__controls {
+			display: flex;
+			flex-direction: row;
+			gap: styles.rem(8);
+			justify-content: flex-end;
+			padding: styles.rem(12) styles.rem(16);
+			border-bottom: 1px solid styles.$color--grey-light;
+			flex-shrink: 0;
+		}
+
+		&__viewport {
+			flex: 1;
+			overflow: hidden;
+			cursor: grab;
+			user-select: none;
+			-webkit-user-select: none;
+			padding: styles.rem(16);
+
+			&--dragging {
+				cursor: grabbing;
+			}
+		}
+	}
+
 	&:hover {
 		.mermaid__controls {
 			opacity: 1;

package/src/styles/Mermaid.module.scss.d.ts

@@ -2,8 +2,18 @@ declare const styles: {
   readonly mermaid: string;
   readonly 'mermaid__controls': string;
   readonly 'mermaid__controls__btn': string;
+  readonly 'mermaid__controls__btn--zoom-in': string;
+  readonly 'mermaid__controls__btn--zoom-out': string;
+  readonly 'mermaid__controls__btn--reset': string;
+  readonly 'mermaid__controls__btn--expand': string;
+  readonly 'mermaid__controls__btn--collapse': string;
   readonly 'mermaid__viewport': string;
   readonly 'mermaid__viewport--dragging': string;
+  readonly 'mermaid__modal': string;
+  readonly 'mermaid__modal__content': string;
+  readonly 'mermaid__modal__controls': string;
+  readonly 'mermaid__modal__viewport': string;
+  readonly 'mermaid__modal__viewport--dragging': string;
   readonly 'margin-top--1': string;
   readonly 'margin-bottom--2': string;
 };