fix: Selection handling when clicking editor padding #1629
Merged
Conversation
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
|
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-docx-exporter
@blocknote/xl-multi-column
@blocknote/xl-odt-exporter
@blocknote/xl-pdf-exporter
commit: |
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.
In #731, we broke some things with block styling & selection handling on click, which we didn't fix 100% correctly. One issue that still remains from these changes is the selection moving to the start of the block instead of the end, when clicking the padded area on the right of the area (see #1588 for more detail). The issue is specific to Chrome only.
The reason for this bug is due to the
:beforepseudo-element on each.bn-block-contentelement. Previously, the.bn-block-contentelement wasdisplay: block, and so it's:beforepseudo-element took ondisplay: inline. However, we then changed.bn-block-contentto bedisplay: flex, forcing the:beforepseudo-element to take ondisplay: block. Because it was being displayed as a block, and therefore had the same height as the block, this confused Chrome's selection handling behaviour on click.This PR reverts the
.bn-block-contentelement to bedisplay: block, which fixes the issue. I've made sure that all vanilla blocks still look identical, and that at least the custom blocks from our examples are all good too. Additionally, I've fixed some minor issues that we didn't notice before due to thedisplay: flex.