fix: Placeholder overflow issues #2291
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@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-email-exporter
@blocknote/xl-multi-column
@blocknote/xl-odt-exporter
@blocknote/xl-pdf-exporter
commit: |
nperez0111
left a comment
nperez0111
left a comment
There was a problem hiding this comment.
Looks about right to me
|
In my experience, changes to these CSS rules can have unintended consequences and should be tested well across browsers (and probably we need to increase our e2e coverage here). E.g., when I try this PR and this scenario on Chrome: 
I can't navigate to the empty list element with arrow up / down anymore |
|
I changed the approach - the hacky workaround of hiding the trailing break element has been removed and the placeholder is now rendered in the parent |
nperez0111
left a comment
nperez0111
left a comment
There was a problem hiding this comment.
Seems to look good from my testing, would prefer to have @YousefED look at this though
| .bn-inline-content { | ||
| width: 100%; | ||
| } |
There was a problem hiding this comment.
Double checked this, the previous issue #1523 seems to still be corrected with this in-place
| .bn-block-content:has(.ProseMirror-trailingBreak:only-child):after { | ||
| font-style: italic; | ||
| /* Removes text cursor offset. */ | ||
| margin-inline: -2px; |
There was a problem hiding this comment.
This is to be able to show the text cursor underneath the placeholder.
There may be a way around this, by adding data attributes to make the width of the flex layout different based on whether the placeholder is showing or not.
But, doesn't seem to cause issues, may revisit if it does something weird
Summary
This PR fixes some issues with overflowing placeholders when there is not enough space to display them on one line.
Rationale
This was causing issues on mobile especially, since viewports can get pretty small.
Changes
.bn-block-content:afterelements instead of.bn-inline-content:before.position: absoluteand other styles from placeholders..bn-inline-contentelements no longer span container width.Impact
I was wary of making
.bn-inline-contentelements no longer span container width due to #1523 and #1553, as we've had some cursor selection issues related to that before. However, I've done some fairly extensive manual testing across browsers against the preview from #731 (PR that broke the selection referenced in #1553), and everything looks good.Testing
N/A
Screenshots/Video
Before:
Screen.Recording.2025-12-15.at.15.42.52.mov
After:
Screen.Recording.2025-12-15.at.15.41.25.mov
Checklist
Additional Notes