Skip to content

fix: prevent unnecessary diagram re-rendering when editor changes are outside block#199

Merged
ThisIs-Developer merged 2 commits into
mainfrom
fix/prevent-unnecessary-diagram-rendering
Jun 30, 2026
Merged

fix: prevent unnecessary diagram re-rendering when editor changes are outside block#199
ThisIs-Developer merged 2 commits into
mainfrom
fix/prevent-unnecessary-diagram-rendering

Conversation

@ThisIs-Developer

Copy link
Copy Markdown
Owner

Problem

Several diagram renderers (Markmap, PlantUML, Graphviz, D2, Vega-Lite, WaveDrom, ABC Notation) were re-rendering whenever any change was made anywhere in the Markdown editor, even if the change was outside the diagram’s fenced code block. This caused visual flickering, state loss (e.g., zoom/pan on Markmap), and unnecessary remote API calls.

This occurred because the DOM patching layer (canReusePreviewNode) checked if the outerHTML matched. However, diagram shells generate a new random ID every time (e.g., via Math.random()), making the outerHTML check consistently fail.

Solution

We updated canReusePreviewNode in script.js to look for diagram elements (containing a data-original-code attribute) and reuse them if the source code and diagram engine class name are identical. This preserves the fully-rendered DOM nodes of the diagrams and prevents them from re-rendering on unrelated edits.

@vercel

vercel Bot commented Jun 30, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
markdown-viwer Ready Ready Preview, Comment Jun 30, 2026 9:11am

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jun 30, 2026

Copy link
Copy Markdown

Deploying markdown-viewer with  Cloudflare Pages  Cloudflare Pages

Latest commit: f7ecb6f
Status: ✅  Deploy successful!
Preview URL: https://769f7aeb.markdown-viewer.pages.dev
Branch Preview URL: https://fix-prevent-unnecessary-diag.markdown-viewer.pages.dev

View logs

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jun 30, 2026

Copy link
Copy Markdown

Deploying markdownviewer with  Cloudflare Pages  Cloudflare Pages

Latest commit: f7ecb6f
Status: ✅  Deploy successful!
Preview URL: https://07ccfe1b.markdownviewer.pages.dev
Branch Preview URL: https://fix-prevent-unnecessary-diag.markdownviewer.pages.dev

View logs

@ThisIs-Developer ThisIs-Developer force-pushed the fix/prevent-unnecessary-diagram-rendering branch from 9bc89ea to f7ecb6f Compare June 30, 2026 09:13
@ThisIs-Developer ThisIs-Developer merged commit 144b4b0 into main Jun 30, 2026
7 checks passed
@ThisIs-Developer ThisIs-Developer deleted the fix/prevent-unnecessary-diagram-rendering branch June 30, 2026 09:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant