Files
kandev/apps/web/components/shared/mermaid-error-toast.tsx
T
José Almeida a2d98f5d3e fix(web): replace mermaid bomb-icon error flood with toast notifications (#594)
* 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
2026-04-15 21:47:42 +01:00

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]);
}