mirror of
https://github.com/multica-ai/multica.git
synced 2026-07-12 04:08:53 +02:00
00415de463
* feat(editor): render mermaid diagrams inside issue descriptions Issue descriptions are rendered through the Tiptap-based ContentEditor (not ReadonlyContent), so the mermaid handler that PR #1888 added to ReadonlyContent never reached them. Comments worked because comment-card toggles between ContentEditor (edit mode) and ReadonlyContent (display mode); issue descriptions stay in ContentEditor permanently. This patch teaches the Tiptap CodeBlock NodeView to render a Mermaid preview when the language is `mermaid`, giving issue descriptions a split view: live diagram on top, editable source below. Theme variables (light/dark), the sandboxed iframe, the lightbox and error fallback all come from the existing implementation — only the location moved. Changes: - Extract MermaidDiagram + helpers (theme detection, sandbox iframe, lightbox, useThemeVersion) from `readonly-content.tsx` into a new `editor/mermaid-diagram.tsx`. ReadonlyContent (~200 lines lighter) imports the same component, so comment-card / inbox rendering is unchanged byte-for-byte. - Update `code-block-view.tsx` (the Tiptap CodeBlock NodeView) to render `<MermaidDiagram>` above the editable source whenever the block's language is `mermaid` and the source is non-empty. Tested: - pnpm --filter @multica/views typecheck — clean - pnpm --filter @multica/views test — 327 tests pass (43 files) - Manually verified a mermaid block in an issue description renders as an SVG flowchart while staying editable underneath. Closes #2079 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * perf(editor): debounce mermaid preview re-renders during edits Addresses review feedback on #2297. Previously every keystroke in a Mermaid code block triggered `mermaid.initialize() + render()` on the CodeBlockView preview. Because `mermaid.initialize()` mutates a process-global config, those bursts could race a concurrent ReadonlyContent render (e.g. a comment card) and clobber its theme variables. 200ms is short enough that the preview still feels live during typing but long enough to make concurrent inits unlikely in practice. The ReadonlyContent path is unchanged: chart there is the saved markdown and never changes after mount, so the race only existed on the new edit-time path this PR introduced. A small `useDebouncedValue` hook local to the file gates `chart` so that it only flows into MermaidDiagram after 200ms of stable input. When the language is non-Mermaid the hook short-circuits to "", so non-Mermaid blocks pay no extra cost. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>