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) { export function MermaidDiagram({ chart }: MermaidDiagramProps) {
const containerRef = useRef<HTMLDivElement>(null);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [isReady, setIsReady] = useState(false); const [isReady, setIsReady] = useState(false);
const [svgHtml, setSvgHtml] = useState<string>(""); const [svgHtml, setSvgHtml] = useState<string>("");
@@ -184,22 +183,29 @@ export function MermaidDiagram({ chart }: MermaidDiagramProps) {
onMouseLeave={handleMouseUp} onMouseLeave={handleMouseUp}
style={fullHeight ? { height: "100%" } : { minHeight: "100px" }} style={fullHeight ? { height: "100%" } : { minHeight: "100px" }}
> >
<div {svgHtml ? (
className="mermaid-diagram flex items-center justify-center" <div
style={{ className="mermaid-diagram flex items-center justify-center"
transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`, style={{
transformOrigin: "center center", transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
transition: isPanning ? "none" : "transform 0.15s ease-out", transformOrigin: "center center",
minHeight: fullHeight ? "100%" : "100px", transition: isPanning ? "none" : "transform 0.15s ease-out",
}} minHeight: fullHeight ? "100%" : "100px",
dangerouslySetInnerHTML={svgHtml ? { __html: svgHtml } : undefined} }}
> dangerouslySetInnerHTML={{ __html: svgHtml }}
{!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> className="mermaid-diagram flex items-center justify-center"
)} style={{ minHeight: fullHeight ? "100%" : "100px" }}
</div> >
{!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> </div>
); );