feat: open inline images in a lightbox on double-click#355
Closed
yusoufu wants to merge 2 commits intorefactoringhq:mainfrom
Closed
feat: open inline images in a lightbox on double-click#355yusoufu wants to merge 2 commits intorefactoringhq:mainfrom
yusoufu wants to merge 2 commits intorefactoringhq:mainfrom
Conversation
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.
Collaborator
|
Merged after some tweaks — closing this now. Thanks again for the contribution! |
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.
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
dblclicklistener on the editor container picks up image targets viagetDoubleClickedImageSrc, 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— wiresdblclickon 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 errorspnpm exec tsc --noEmitpnpm test— 3217/3217 pass (5 new)pnpm playwright:smoke— all green (ran in pre-push)🤖 Generated with Claude Code