a2d98f5d3e
* fix(web): replace mermaid bomb-icon error flood with toast notifications mermaid.render() called without a container leaves orphaned error elements (with bomb icons) in document.body on parse failures. Clean up these orphans after every render and show an error toast instead. * fix(web): address PR review — prevent toast flooding, include error detail, add hook tests - Add latestRenderId guard in TipTap MermaidNodeView to skip stale renders, preventing toast spam on every keystroke - Include mermaid error message in toast description via CustomEvent detail - Add useMermaidErrorToast hook tests (event listener + cleanup) * style(web): format mermaid-error-toast test with prettier * fix(web): include error message in MermaidBlock toast description
19 lines
623 B
TypeScript
19 lines
623 B
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { useToast } from "@/components/toast-provider";
|
|
import { MERMAID_ERROR_EVENT } from "./mermaid-utils";
|
|
|
|
export function useMermaidErrorToast(): void {
|
|
const { toast } = useToast();
|
|
|
|
useEffect(() => {
|
|
const handler = (e: Event) => {
|
|
const msg = (e as CustomEvent<{ message: string }>).detail?.message;
|
|
toast({ title: "Failed to render diagram", description: msg, variant: "error" });
|
|
};
|
|
document.addEventListener(MERMAID_ERROR_EVENT, handler);
|
|
return () => document.removeEventListener(MERMAID_ERROR_EVENT, handler);
|
|
}, [toast]);
|
|
}
|