Skip to content

feat(preview): click to open images in the diagram viewer#99

Closed
beihai23 wants to merge 1 commit into
mattenarle10:mainfrom
amazing-project:feat/preview-image-viewer
Closed

feat(preview): click to open images in the diagram viewer#99
beihai23 wants to merge 1 commit into
mattenarle10:mainfrom
amazing-project:feat/preview-image-viewer

Conversation

@beihai23

Copy link
Copy Markdown
Contributor

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 — add decorateImages(root, onOpen), mirroring decorateMermaidBlocks / decoratePlantUmlBlocks. Marks each preview <img>, binds single-click → openDiagramViewer, sets draggable=false. Excludes images inside .mdv-plantuml and pre.mdv-mermaid (they already have their own open affordance). SVG images (*.svg, data:image/svg+xml) work via native <img> SVG support; naturalWidth falls back to the rendered box for SVGs that report 0.
  • preview.tsx — call decorateImages in the existing decorate effect.
  • prose.csscursor: zoom-in on decorated images.

Not changed (intentional)

  • The DiagramViewerOverlay component itself — zoom / pan / close interactions are untouched.
  • Mermaid / PlantUML wiring.
  • i18n (no new keys; the shared viewer is reused).
  • Rust.

Verification

  • bun run build (tsc + vite) ✅
  • bun test — 24 pass, 0 fail ✅
  • Manual: bun run tauri dev, paste ![](https://...png) or ![](./x.svg) into the editor, single-click the preview image.

🤖 Generated with Claude Code

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]>
@mattenarle10

Copy link
Copy Markdown
Owner

thanks so much man!!! 🙏

@mattenarle10 mattenarle10 left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@mattenarle10

Copy link
Copy Markdown
Owner

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.

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.

2 participants