Add Mermaid diagram support to markdown rendering - #249
Conversation
Implements GitHub issue #232 by rendering ```mermaid fenced code blocks as live diagrams in the TipTap markdown editor. - Add mermaid dependency with lazy dynamic import - Custom codeBlock NodeView toggles between diagram preview and source editing - Show rendered SVG when blurred; show editable source when focused inside block - Preserve roundtrip through existing code block AST mapping - Add styles and tests for parsing, roundtrip, and preview container behavior Co-authored-by: Samuel Stroschein <samuelstroschein@users.noreply.github.com>
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
flashtype-website | 6c8862d | Commit Preview URL Branch Preview URL |
Jun 29 2026, 11:42 PM |
ProseMirror was destroying mermaid node views when SVG was injected into the preview container because those DOM mutations were outside contentDOM. Add ignoreMutation so preview/error UI updates are ignored. Also debounce preview renders, guard async completion after destroy, and mock mermaid in unit tests since jsdom cannot run the real renderer. Co-authored-by: Samuel Stroschein <samuelstroschein@users.noreply.github.com>
Remove dev-only demo files and revert fuzz harness path loading. Fix Bugbot issues: - Re-queue preview renders that arrive while a render is in flight - Re-render when preview is empty despite unchanged source (error recovery) - Sync Mermaid theme on dark mode toggle and invalidate cached previews Co-authored-by: Samuel Stroschein <samuelstroschein@users.noreply.github.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: eaff3aecba
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| error.hidden = true; | ||
| error.textContent = ""; | ||
| lastRenderedSource = source; | ||
| lastRenderedTheme = getMermaidRenderTheme(); |
There was a problem hiding this comment.
If the app theme changes while renderMermaidDiagram is still awaiting, the queued post-flight render can be skipped: the SVG was produced with the old Mermaid configuration, but this line records lastRenderedTheme as the current theme after the toggle. When the scheduled retry runs, previewIsCurrent() sees matching source/theme plus an SVG and returns early, leaving the diagram in the wrong light/dark colors until another edit or theme change forces a render.
Useful? React with 👍 / 👎.
Hide preview and error UI while editing via CSS. Toggle aria-hidden on preview and expose source text through a screen-reader-only description in preview mode. Record the theme captured at render start so mid-flight theme toggles still trigger a follow-up render with the correct colors. Co-authored-by: Samuel Stroschein <samuelstroschein@users.noreply.github.com>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 6c8862d. Configure here.
| const pos = getPos(); | ||
| if (pos == null) return false; | ||
| const { from, to } = view.state.selection; | ||
| return from >= pos && to <= pos + node.nodeSize; |
There was a problem hiding this comment.
Mermaid edit mode boundary
Medium Severity
isNodeSelected treats any selection with to <= pos + node.nodeSize as inside the mermaid block, so a caret at the document position immediately after the block (pos + nodeSize) is counted as editing. That can flip data-editing to true and show the mermaid source while the selection is actually in the next block.
Reviewed by Cursor Bugbot for commit 6c8862d. Configure here.
2 participants
Summary
Mermaid diagram rendering for fenced
```mermaidcode blocks.Latest fixes (review feedback)
data-editing="true")aria-hidden; source text exposed via sr-only description in preview modeTest plan