repi/codeboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: clean up mermaid diagram rendering — separate dangerouslySetInnerHTML from children

Browse Source
This commit is contained in:
Vectry
2026-02-09 18:55:15 +00:00
parent dd03d86642
commit a49f05e8df
1 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/web/src/components/mermaid-diagram.tsx
View File

@@ -9,7 +9,6 @@ interface MermaidDiagramProps {
}
export function MermaidDiagram({ chart }: MermaidDiagramProps) {
const containerRef = useRef<HTMLDivElement>(null);
const [error, setError] = useState<string | null>(null);
const [isReady, setIsReady] = useState(false);
const [svgHtml, setSvgHtml] = useState<string>("");
@@ -184,22 +183,29 @@ export function MermaidDiagram({ chart }: MermaidDiagramProps) {
onMouseLeave={handleMouseUp}
style={fullHeight ? { height: "100%" } : { minHeight: "100px" }}
>
<div
className="mermaid-diagram flex items-center justify-center"
style={{
transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
transformOrigin: "center center",
transition: isPanning ? "none" : "transform 0.15s ease-out",
minHeight: fullHeight ? "100%" : "100px",
}}
dangerouslySetInnerHTML={svgHtml ? { __html: svgHtml } : undefined}
>
{!svgHtml && !isReady && (
<div className="flex items-center justify-center py-8">
<div className="w-6 h-6 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" />
</div>
)}
</div>
{svgHtml ? (
<div
className="mermaid-diagram flex items-center justify-center"
style={{
transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
transformOrigin: "center center",
transition: isPanning ? "none" : "transform 0.15s ease-out",
minHeight: fullHeight ? "100%" : "100px",
}}
dangerouslySetInnerHTML={{ __html: svgHtml }}
/>
) : (
<div
className="mermaid-diagram flex items-center justify-center"
style={{ minHeight: fullHeight ? "100%" : "100px" }}
>
{!isReady && (
<div className="flex items-center justify-center py-8">
<div className="w-6 h-6 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" />
</div>
)}
</div>
)}
</div>
);