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

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

"use client";
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";
import { Image } from "antd";
//#region src/Mermaid/SyntaxMermaid/MermaidSvg.tsx
const MermaidSvg = memo(({ className, ref, style, svg }) => {
	const containerRef = useRef(null);
	const [previewUrl, setPreviewUrl] = useState();
	const [open, setOpen] = useState(false);
	useEffect(() => {
		return () => {
			if (previewUrl) URL.revokeObjectURL(previewUrl);
		};
	}, [previewUrl]);
	const handleOpen = useCallback(() => {
		const element = containerRef.current?.querySelector("svg");
		if (!element) return;
		const standalone = prepareMermaidSvgString(toStandaloneSvgString(element));
		setPreviewUrl((previous) => {
			if (previous) URL.revokeObjectURL(previous);
			return URL.createObjectURL(new Blob([standalone], { type: "image/svg+xml" }));
		});
		setOpen(true);
	}, []);
	return /* @__PURE__ */ jsxs("div", {
		className,
		ref,
		style,
		children: [/* @__PURE__ */ jsx("div", {
			dangerouslySetInnerHTML: { __html: svg },
			ref: containerRef,
			style: { cursor: "zoom-in" },
			onClick: handleOpen
		}), previewUrl && /* @__PURE__ */ jsx(Image, {
			preview: {
				onVisibleChange: setOpen,
				src: previewUrl,
				visible: open
			},
			src: previewUrl,
			style: { display: "none" },
			wrapperStyle: { display: "none" }
		})]
	});
});
MermaidSvg.displayName = "MermaidSvg";
//#endregion
export { MermaidSvg as default };

//# sourceMappingURL=MermaidSvg.mjs.map