feat: add SVG/PNG download overlay for diagram preview#1568
Merged
Conversation
- Inject a hover download bar into Mermaid and PlantUML diagram containers - SVG download uses Blob + createObjectURL; PNG uses canvas with a data-URL source to avoid the tainted-canvas SecurityError in Chromium - MutationObserver detects async SVG injection and adds bars automatically - pause()/resume() API hides bars during copy/export to keep output clean - getHtmlContent() clones #output and strips .diagram-download-bar nodes - downloadAsCardImage hides bars via temporary CSS during html-to-image
|
🚀 Cloudflare Workers Preview has been successfully deployed! Preview URL: https://md-pr-1568.doocs.workers.dev Built with commit 144657a |
|
🚀 Surge Preview has been successfully deployed! Preview URL: https://doocs-md-preview-pr-1568.surge.sh Built with commit 144657a |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds an interactive download overlay to rendered Mermaid and PlantUML diagrams in the preview panel, enabling users to download diagrams as SVG or PNG while ensuring exports/copy flows exclude the overlay UI.
Changes:
- Added
diagramDownload.tsutilities to download SVG/PNG and to inject a hover-based download bar via aMutationObserver. - Wired overlay lifecycle into
PreviewPanel.vue(mount/unmount + pause/resume during WeChat copy). - Ensured exports don’t include the overlay by stripping
.diagram-download-barfrom HTML exports and hiding it during card-image capture.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| apps/web/src/utils/index.ts | Clones #output and removes .diagram-download-bar nodes before exporting HTML. |
| apps/web/src/utils/diagramDownload.ts | Implements SVG/PNG download helpers and an observer-driven overlay injector with pause/resume controls. |
| apps/web/src/stores/export.ts | Adds a temporary CSS rule to hide .diagram-download-bar during html-to-image capture. |
| apps/web/src/components/editor/PreviewPanel.vue | Mounts/unmounts the overlay and pauses it during copy; adds unscoped overlay styling. |
Comment on lines
+172
to
+181
| pointer-events: none; | ||
| transform: translateY(-6px); | ||
| transition: opacity 0.18s ease, transform 0.18s ease; | ||
| } | ||
|
|
||
| .mermaid-diagram:hover .diagram-download-bar, | ||
| .plantuml-diagram:hover .diagram-download-bar { | ||
| opacity: 1; | ||
| pointer-events: auto; | ||
| transform: translateY(0); |
Comment on lines
+179
to
+183
| for (const node of addedNodes) { | ||
| if (node.nodeType !== Node.ELEMENT_NODE) | ||
| continue | ||
| const el = node as HTMLElement | ||
| if (el.matches(DIAGRAM_SELECTORS)) |
- Add visibility:hidden to .diagram-download-bar so opacity:0 buttons are not focusable; toggle visibility with zero-delay transition when the bar becomes visible - Reveal bar on :focus-within so keyboard users can reach the buttons - Replace per-mutation candidate scanning with a single requestAnimationFrame- batched scan() call to avoid redundant subtree queries on rapid re-renders - Cancel pending rAF in pause() and cleanup() to prevent stale callbacks
|
🗑️ Cloudflare Workers preview deployment has been cleaned up. |
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add hover download bars to Mermaid and PlantUML diagram containers in the preview panel, allowing users to download diagrams as
.svgor.png.Changes
New file:
apps/web/src/utils/diagramDownload.tsdownloadDiagramSvg()— serializes the SVG to a Blob and triggers a downloaddownloadDiagramPng()— renders SVG to a<canvas>via a percent-encodeddata:URL (avoids the tainted-canvasSecurityErrorfrom using ablob:URL in Chromium), then downloads the PNGsetupDiagramDownloadOverlay()— installs aMutationObserveron#outputto detect when Mermaid/PlantUML inject SVGs asynchronously and injects a styled download bar into each diagram containerpause()/resume()API — removes bars from the DOM and suspends the observer during copy/export operations so bars never appear in the exported contentModified:
apps/web/src/components/editor/PreviewPanel.vueonMounted/onUnmountedisCopingprop to callpause()before andresume()after the WeChat copy pipelineModified:
apps/web/src/utils/index.tsgetHtmlContent()now clones#outputand strips.diagram-download-barnodes before returning innerHTML, so HTML/PDF exports are unaffectedModified:
apps/web/src/stores/export.tsdownloadAsCardImage()injects a temporary CSS rule todisplay: noneall.diagram-download-barelements duringhtml-to-imagecapture