Skip to content

feat: open inline images in a lightbox on double-click#355

Closed
yusoufu wants to merge 2 commits intorefactoringhq:mainfrom
yusoufu:main
Closed

feat: open inline images in a lightbox on double-click#355
yusoufu wants to merge 2 commits intorefactoringhq:mainfrom
yusoufu:main

Conversation

@yusoufu
Copy link
Copy Markdown

@yusoufu yusoufu commented Apr 27, 2026

Problem

Inline images inserted into a note can only be viewed at the size BlockNote renders them at — there is no way to see a full-size preview without opening the file outside Tolaria.

Solution

Double-clicking any <img> inside the editor opens it in a centered shadcn Dialog at up to 90vw / 90vh. Esc, backdrop click, or the overlay close it. Single-click is left alone so BlockNote selection / cursor placement keep working as before.

A shared dblclick listener on the editor container picks up image targets via getDoubleClickedImageSrc, which also filters tracking pixels (<16 px naturalWidth/Height) so empty inline GIFs don't open a blank viewer.

Changes

  • src/utils/imageLightboxTarget.ts — pure helper extracting an image src from an event target, with a tracking-pixel guard. Five unit tests.
  • src/hooks/useImageLightbox.ts — wires dblclick on a container ref to open/close state.
  • src/components/ImageLightbox.tsx — shadcn Dialog with a transparent backdrop showing the full-size image.
  • src/components/SingleEditorView.tsx — three-line wire-up (hook + render).

Test plan

  • pnpm lint — 0 errors
  • pnpm exec tsc --noEmit
  • pnpm test — 3217/3217 pass (5 new)
  • pnpm playwright:smoke — all green (ran in pre-push)
  • Native Tauri QA (manual) — drop an image into a note, double-click, confirm lightbox; press Esc, click backdrop

🤖 Generated with Claude Code

yusoufu and others added 2 commits April 25, 2026 23:03
Double-clicking any image inside the editor opens it in a centered
shadcn Dialog at up to 90vw / 90vh. Esc, backdrop click, or the
overlay close it. Single-click is left alone so BlockNote selection
keeps working.

The shared dblclick listener on the editor container picks up image
targets via getDoubleClickedImageSrc, which also filters tracking
pixels (<16 px naturalWidth/Height) so empty inline GIFs don't open
a blank viewer.
@LucaRonin
Copy link
Copy Markdown
Collaborator

Merged after some tweaks — closing this now. Thanks again for the contribution!

@LucaRonin LucaRonin closed this Apr 30, 2026
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