Function MermaidButton

webview-ui/src/components/common/MermaidButton.tsx:23–246

({ containerRef, code, isLoading, svgToPng, children }: MermaidButtonProps)

}

export function MermaidButton({ containerRef, code, isLoading, svgToPng, children }: MermaidButtonProps) {
	const [showModal, setShowModal] = useState(false)
	const [zoomLevel, setZoomLevel] = useState(1)
	const [copyFeedback, setCopyFeedback] = useState(false)
	const [isHovering, setIsHovering] = useState(false)
	const [modalViewMode, setModalViewMode] = useState<"diagram" | "code">("diagram")
	const [isDragging, setIsDragging] = useState(false)
	const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 })
	const { copyWithFeedback } = useCopyToClipboard()
	const { t } = useAppTranslation()

	/**
	 * Opens a modal with the diagram for zooming
	 */
	const handleZoom = async (e: React.MouseEvent) => {
		e.stopPropagation()
		setShowModal(true)
		setZoomLevel(1)
		setModalViewMode("diagram")
	}

	/**
	 * Copies the diagram text to clipboard
	 */
	const handleCopy = async (e: React.MouseEvent) => {
		e.stopPropagation()

		try {
			await copyWithFeedback(code, e)

			// Show feedback
			setCopyFeedback(true)
			setTimeout(() => setCopyFeedback(false), 2000)
		} catch (err) {
			console.error("Error copying text:", err instanceof Error ? err.message : String(err))
		}
	}

	/**
	 * Saves the diagram as an image file
	 */
	const handleSave = async (e: React.MouseEvent) => {
		e.stopPropagation()

		// Get the SVG element from the container
		const svgEl = containerRef.current?.querySelector("svg")
		if (!svgEl) {
			console.error("SVG element not found")
			return
		}

		try {
			// Convert SVG to PNG
			const pngDataUrl = await svgToPng(svgEl)

			// Send message to VSCode to save the image
			vscode.postMessage({
				type: "saveImage",