Skip to content

fix: prevent image block bubble menu from disappearing on hover#44

Merged
j4rviscmd merged 1 commit intomainfrom
fix/image-caption-fix
Mar 25, 2026
Merged

fix: prevent image block bubble menu from disappearing on hover#44
j4rviscmd merged 1 commit intomainfrom
fix/image-caption-fix

Conversation

@j4rviscmd
Copy link
Copy Markdown
Owner

Summary

Fixes #40 — The image block's formatting toolbar (bubble menu) disappears before the cursor can reach it because the hoverable area is limited to the image element itself when no caption is present.

Changes

1. Auto-set caption on new image uploads (imageUpload.ts)

  • Changed uploadImage to return an object { props: { url, name, caption } } instead of a plain URL string
  • BlockNote uses the returned object directly in editor.updateBlock(), setting the caption to the filename
  • The rendered caption element expands the hoverable area, keeping the toolbar accessible

2. CSS hover area expansion for captionless images (index.css)

  • Added a ::after pseudo-element (20px height) on [data-content-type="image"] > .bn-file-block-content-wrapper
  • Only applies when no caption is present (:not(:has(.bn-file-caption))) and a preview is shown (:has(.bn-visual-media-wrapper))
  • Provides an invisible hover zone beneath the image so the toolbar remains reachable

3. Cleanup

  • Removed abandoned custom ImageBlock approach (imageBlock.tsx, related imports in Editor.tsx and index.ts)
  • The custom block approach was abandoned because mixing defaultBlockSpecs (vanilla JS) with createReactBlockSpec (React) breaks resize handles

Testing

  • New image upload: caption auto-set to filename, toolbar accessible
  • Existing captionless images: toolbar reachable via CSS hover zone
  • Resize handles work correctly
  • cargo build passes
  • npm run build passes

Return an object from uploadImage with caption set to the filename so
BlockNote renders the caption area, keeping the formatting toolbar
reachable. For existing captionless images, add a CSS ::after pseudo-
element that extends the hover zone beneath the image block.

Closes #40
@j4rviscmd j4rviscmd added the bug Something isn't working label Mar 25, 2026
@j4rviscmd j4rviscmd merged commit ad241ec into main Mar 25, 2026
@j4rviscmd j4rviscmd deleted the fix/image-caption-fix branch March 25, 2026 07:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: 画像ブロックのバブルメニューがクリックできない

1 participant