@lobehub/ui/es/Mermaid/SyntaxMermaid/MermaidSvg.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import { openPreview } from "../../Image/viewer/registry.mjs";
import PreviewOutlet from "../../Image/viewer/PreviewOutlet.mjs";
import { toStandaloneSvgString } from "./prepareInlineSvg.mjs";
import { prepareMermaidSvgString } from "./prepareMermaidSvg.mjs";
import { memo, useCallback, useEffect, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/Mermaid/SyntaxMermaid/MermaidSvg.tsx
const anchorStyle = {
	height: "100%",
	insetBlockStart: 0,
	insetInlineStart: 0,
	pointerEvents: "none",
	position: "absolute",
	visibility: "hidden",
	width: "100%"
};
const MermaidSvg = memo(({ className, ref, style, svg }) => {
	const containerRef = useRef(null);
	const anchorRef = useRef(null);
	const [previewUrl, setPreviewUrl] = useState();
	useEffect(() => {
		return () => {
			if (previewUrl) URL.revokeObjectURL(previewUrl);
		};
	}, [previewUrl]);
	const handleOpen = useCallback(() => {
		const element = containerRef.current?.querySelector("svg");
		const anchor = anchorRef.current;
		if (!element || !anchor) return;
		const standalone = prepareMermaidSvgString(toStandaloneSvgString(element));
		const url = URL.createObjectURL(new Blob([standalone], { type: "image/svg+xml" }));
		setPreviewUrl((previous) => {
			if (previous) URL.revokeObjectURL(previous);
			return url;
		});
		openPreview({
			element: anchor,
			options: {
				autoZoomThreshold: 2,
				defaultZoom: "auto",
				maxScale: 8
			},
			src: url
		});
	}, []);
	return /* @__PURE__ */ jsxs("div", {
		className,
		ref,
		style: {
			position: "relative",
			...style
		},
		children: [
			/* @__PURE__ */ jsx("div", {
				dangerouslySetInnerHTML: { __html: svg },
				ref: containerRef,
				style: { cursor: "zoom-in" },
				onClick: handleOpen
			}),
			/* @__PURE__ */ jsx("img", {
				"aria-hidden": true,
				alt: "",
				ref: anchorRef,
				src: previewUrl,
				style: anchorStyle
			}),
			/* @__PURE__ */ jsx(PreviewOutlet, { elementRef: anchorRef })
		]
	});
});
MermaidSvg.displayName = "MermaidSvg";
//#endregion
export { MermaidSvg as default };

//# sourceMappingURL=MermaidSvg.mjs.map