import Prism from "prismjs"
import * as React from "react"
import { Codicon } from "./Codicon"
let mermaidInitialized = false
function MermaidBlock({ children }) {
const ref = React.useRef(null)
const [svg, setSvg] = React.useState("")
const [error, setError] = React.useState(false)
React.useEffect(() => {
const code = typeof children === "string" ? children : ref.current?.textContent || ""
if (!code.trim()) return
const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`
import("mermaid").then((mod) => {
const mermaid = mod.default
if (!mermaidInitialized) {
mermaid.initialize({
startOnLoad: false,
theme: "base",
themeVariables: {
primaryColor: "#33332d",
primaryTextColor: "#e9e9e9",
primaryBorderColor: "#555",
lineColor: "#a3a3a2",
secondaryColor: "#2a2a24",
tertiaryColor: "#1a1a18",
background: "#1a1a18",
mainBkg: "#33332d",
nodeBorder: "#555",
clusterBkg: "#2a2a24",
clusterBorder: "#444",
titleColor: "#e9e9e9",
edgeLabelBackground: "#1a1a18",
},
securityLevel: "strict",
fontFamily: "inherit",
})
mermaidInitialized = true
}
mermaid
.render(id, code.trim())
.then(({ svg }) => setSvg(svg))
.catch((err) => {
console.error(err)
setError(true)
})
})
}, [children])
if (error) {
return {children}
}
if (svg) {
return (
)
}
return (
{children}
)
}
export function CodeBlock({ children, "data-language": language }) {
const ref = React.useRef(null)
const timeoutRef = React.useRef(null)
const [copied, setCopied] = React.useState(false)
React.useEffect(() => {
if (language === "mermaid") return
if (ref.current) Prism.highlightElement(ref.current, false)
}, [children, language])
React.useEffect(() => {
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current)
}
}
}, [])
if (language === "mermaid") {
return {children}
}
const handleCopy = async () => {
const code = ref.current?.textContent || ""
try {
await navigator.clipboard.writeText(code)
setCopied(true)
if (timeoutRef.current) {
clearTimeout(timeoutRef.current)
}
timeoutRef.current = setTimeout(() => setCopied(false), 2000)
} catch (err) {
console.error("Failed to copy code:", err)
}
}
return (
)
}