-
-
Notifications
You must be signed in to change notification settings - Fork 558
fix: Selection clicking between blocks #1716
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
@blocknote/ariakit
@blocknote/code-block
@blocknote/core
@blocknote/mantine
@blocknote/react
@blocknote/server-util
@blocknote/shadcn
@blocknote/xl-ai
@blocknote/xl-docx-exporter
@blocknote/xl-multi-column
@blocknote/xl-odt-exporter
@blocknote/xl-pdf-exporter
commit: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 this looks about right to me. Good work on this, I know it can be annoying
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for exploring this
- on https://blocknote-git-click-between-blocks-fix-typecell.vercel.app/basic/default-blocks the list bullets / checkboxes currently have a weird offset
- a downside of this solution is that now there's no way to visually distinguish between 2 blocks vs 1 block with a hard-break (shift+enter). I don't think there's a good way to solve this (ideas @nperez0111?).
Given the last point, maybe we should hold off on this for now
Oof good catch @YousefED, yea given that the line-height is the majority of this fix, it looks like we might be at a stalemate here. |
Problem
Currently,
.bn-block-content
elements have 3px of padding above and below them. When clicking this padding below a block, the selection is moved to the end of that block. Likewise, clicking the padding above moves the selection to the start. Because the padding we use only results in 6px of extra space between blocks though, this behaviour makes it seem like the cursor is randomly jumping to the start/end of a block.Solution
This PR fixes this UX issue by changing changing the way in which the extra vertical space is added to blocks with content. Instead of using CSS
padding
, theline-height
is increased. This makes it so the selection instead moves to the position closest to the cursor.Before:
Screen.Recording.2025-05-23.at.21.20.42.mov
After:
Screen.Recording.2025-05-23.at.21.24.42.mov
Caveats
The only side-effect of this is that when the selection is expanded, the blue background is slightly taller (the Playwright snapshot updates show this change).
There are also some slight differences between browsers for how the selection is set:
Screen.Recording.2025-05-23.at.21.30.04.mov
Screen.Recording.2025-05-23.at.21.33.06.mov
Alternatives tried
Using
padding-bottom
instead ofpadding-block
: Caused misalignment with the nested block left borders and background color props. Tried to hack around this by addingpadding-top
to.bn-block-content:first-child
& reducingpadding-bottom
on.bn-block-content:last-child
. However, this caused the side menu to be misaligned, as it expects block content of a given type to always have the same height.Using margin instead of padding: Didn't change the behaviour.
Custom selection handling logic: Was overly complex and somewhat hacky.