fix(mermaid): prevent diagrams from breaking on theme change#151
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Fixes a Mermaid rendering bug where toggling the theme caused diagrams to error out because the theme-change handler re-parsed the already-rendered SVG instead of the original Mermaid source. The fix preserves the source code in a data-original-code attribute on each .mermaid node and restores it before re-running mermaid.init. The desktop-app resources are synchronized via the Neutralino prepare script (carrying both this fix and previously merged unrelated UI changes).
Changes:
- Add
data-original-code(URL-encoded) to.mermaidnodes when highlighting fencedmermaidblocks; whitelist this attribute in the threeDOMPurify.sanitizeconfigs. - In the theme toggle handler, restore each Mermaid node's source from
data-original-code, dropdata-processed, remove stale.mermaid-toolbar, and re-init Mermaid. - Sync the desktop-app
resources/(index.html, styles.css, js/script.js) with current root assets.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| script.js | Persist Mermaid source in data-original-code; restore and re-render on theme toggle; permit attribute in DOMPurify configs. |
| desktop-app/resources/js/script.js | Mirror of root script.js including the Mermaid fix plus previously merged unrelated changes (custom undo/redo, mobile direction toggle removal, etc.). |
| desktop-app/resources/index.html | Sync of root index.html: removes mobile-direction-toggle, retitles the clear-formatting modal and toolbar action. |
| desktop-app/resources/styles.css | Sync of root styles.css: adds disabled state for .markdown-tool-btn. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Deploying markdown-viewer with
|
| Latest commit: |
533e03b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a9caa321.markdown-viewer.pages.dev |
| Branch Preview URL: | https://fix-mermaid-theme-change.markdown-viewer.pages.dev |
Deploying markdownviewer with
|
| Latest commit: |
533e03b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://65c37cb1.markdownviewer.pages.dev |
| Branch Preview URL: | https://fix-mermaid-theme-change.markdownviewer.pages.dev |
… with raw source preservation
This PR resolves a critical bug where Mermaid diagrams fail to render and display syntax parser errors (e.g., "Syntax error in text" or "Maximum text size in diagram exceeded") after switching the application theme.
Root Cause
During initial rendering, Mermaid parses the raw text inside
.mermaidcontainers and replaces the text content with the rendered SVG element. On a theme switch, the application re-triggers Mermaid rendering on the existing.mermaidDOM nodes. Because the raw text has been replaced with SVG elements, Mermaid is forced to parse the massive SVG code as if it were diagram source code, leading to syntax/parser errors.Solution
data-original-codeattribute on each.mermaidelement during initial markdown parsing.DOMPurify.sanitizeconfigurations inscript.jsto allow thedata-original-codeattribute, ensuring it is not stripped.themeToggleclick handler, read the raw Mermaid code fromdata-original-codefor each.mermaidnode, decoded it, and restored it as the node's innerHTML content.data-processedattribute from each node..mermaid-toolbarelements to enable fresh recreation of the toolbars with the new SVG elements.mermaid.initto draw the diagrams with correct theme colors.