BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

fix: Placeholder overflow issues

Open matthewlipski opened this issue 2 months ago • 4 comments

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

  • Moved placeholders to .bn-block-content:after elements instead of .bn-inline-content:before.
  • Removed position: absolute and other styles from placeholders.
  • Made .bn-inline-content elements no longer span container width.
  • Adjusted placeholder styles.

Impact

I was wary of making .bn-inline-content elements 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:

https://github.com/user-attachments/assets/821cd351-5150-4333-bb03-20614e22f90c

After:

https://github.com/user-attachments/assets/7fc49f00-ebe0-4a55-95c8-8277617e343e

Checklist

  • [X] Code follows the project's coding standards.
  • [X] Unit tests covering the new feature have been added.
  • [X] All existing tests pass.
  • [X] The documentation has been updated to reflect the new feature

Additional Notes

matthewlipski avatar Dec 15 '25 14:12 matthewlipski