feat(preview): click to open images in the diagram viewer#99
Conversation
Reuse the existing DiagramViewerOverlay (already shared by Mermaid and PlantUML) for inline preview images, via a new decorateImages step that mirrors decorateMermaidBlocks / decoratePlantUmlBlocks. - single-click any preview image to open the fullscreen viewer - cursor: zoom-in + draggable=false suppress native image drag - excludes images inside .mdv-plantuml and pre.mdv-mermaid (own affordance) - svg images (*.svg, data:image/svg+xml) work via native <img> support; naturalWidth falls back to the rendered box when svg reports 0 - no change to the overlay component, Mermaid/PlantUML wiring, i18n, or Rust Co-Authored-By: Claude <[email protected]>
|
thanks so much man!!! 🙏 |
mattenarle10
left a comment
There was a problem hiding this comment.
One blocker before merge: clicking an image wrapped in a Markdown link bubbles into the preview link handler, so the viewer and the URL can both open. Please call e.stopPropagation() beside e.preventDefault() in decorateImages. Please also add a regression covering prevented navigation, stopped propagation, viewer payload and size fallback, and cleanup. I validated this patch locally with 25 passing tests, the production build, cargo check, and an isolated Tauri test fixture. GitHub reports maintainer edits enabled, but the contributor organization rejects the maintainer push with 403.
|
Thanks for the contribution. GitHub would not allow the maintainer update on the organization fork, so I preserved your original commit and authorship in #101, added the linked-image navigation fix and regression coverage, and merged that replacement after CI passed. Ordinary images now open the viewer; images wrapped in Markdown links keep their intended navigation. |
What
Preview-area images (
<img>) now open in the existing fullscreen diagram viewer — the same overlay already used by Mermaid and PlantUML diagrams. Single-click any image to zoom.Why
The diagram viewer already supported Mermaid and PlantUML, and its CSS (
.mdv-diagram-viewer__image) was already prepared for image content, but inline markdown images had no zoom affordance. This completes that path with the smallest possible change: no new component, no new interaction model — the overlay's zoom/pan/close behavior is reused as-is.Changes
diagram-viewer.tsx— adddecorateImages(root, onOpen), mirroringdecorateMermaidBlocks/decoratePlantUmlBlocks. Marks each preview<img>, binds single-click →openDiagramViewer, setsdraggable=false. Excludes images inside.mdv-plantumlandpre.mdv-mermaid(they already have their own open affordance). SVG images (*.svg,data:image/svg+xml) work via native<img>SVG support;naturalWidthfalls back to the rendered box for SVGs that report0.preview.tsx— calldecorateImagesin the existing decorate effect.prose.css—cursor: zoom-inon decorated images.Not changed (intentional)
DiagramViewerOverlaycomponent itself — zoom / pan / close interactions are untouched.Verification
bun run build(tsc + vite) ✅bun test— 24 pass, 0 fail ✅bun run tauri dev, pasteorinto the editor, single-click the preview image.🤖 Generated with Claude Code