Skip to content

fix(editor): prevent padding click handler from closing toolbar on button clicks#119

Merged
j4rviscmd merged 1 commit intomainfrom
fix/color-picker-toolbar-dismiss
Mar 29, 2026
Merged

fix(editor): prevent padding click handler from closing toolbar on button clicks#119
j4rviscmd merged 1 commit intomainfrom
fix/color-picker-toolbar-dismiss

Conversation

@j4rviscmd
Copy link
Copy Markdown
Owner

Summary

  • Fix the handleWrapperClick guard in Editor.tsx that was dismissing the formatting toolbar when clicking toolbar buttons (e.g. the color picker)
  • The guard previously only checked for .bn-editor, but the formatting toolbar and its overlays are rendered as siblings of .bn-editor inside .bn-container — so clicks on toolbar buttons were not caught by the guard
  • Changed the guard from target.closest('.bn-editor') to target.closest('.bn-container') so that all BlockNote UI elements (editor, toolbars, menus, color picker dropdowns, etc.) are excluded from the padding-area click handler

Root cause

The editor wrapper has a pb-[60vh] padding zone. Clicking this area calls editor.setTextCursorPosition(lastBlock, 'end') to focus the editor. The guard only excluded clicks inside .bn-editor (the contenteditable), but the formatting toolbar, color picker, and other BlockNote UI are rendered outside .bn-editor (as siblings inside .bn-container). When clicking the color button:

  1. pointerup → dropdown opens via MenuTriggerWithPointerUp hack
  2. click → bubbles to wrapper → handleWrapperClick runs (passes the .bn-editor guard)
  3. editor.setTextCursorPosition(lastBlock, 'end') → selection clears
  4. shouldShow() returns false → toolbar unmounts → dropdown disappears

Test plan

  • cargo build succeeds
  • Select text → formatting toolbar appears → click color button → color palette opens and stays open
  • Click padding area below editor → cursor moves to end of last block (original behavior preserved)
  • Click inside editor content → no interference with normal editing

🤖 Generated with Claude Code

…tton clicks

The handleWrapperClick guard only checked for `.bn-editor`, but
BlockNote UI elements (formatting toolbar, color picker, menus, etc.)
are rendered as siblings of `.bn-editor` inside `.bn-container`.
Clicks on these elements would pass the guard, causing the cursor to
move to the last block and the selection to clear, which closed the
toolbar before the color picker could open.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@j4rviscmd j4rviscmd added the bug Something isn't working label Mar 29, 2026
@j4rviscmd j4rviscmd merged commit b54b39f into main Mar 29, 2026
2 checks passed
@j4rviscmd j4rviscmd deleted the fix/color-picker-toolbar-dismiss branch March 29, 2026 07:10
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.

1 participant