Skip to content

FormattingToolbar is clipped when editor height is small #2558

@yannishin

Description

@yannishin

What’s broken?

When the editor container is set to a small height, the FormattingToolbar (shown when text is selected) gets trapped within the editor's bounding area and is cut off — part of the toolbar is not visible to the user.

What did you expect to happen?

The FormattingToolbar should render as a floating overlay that escapes the editor's bounding box and remains fully visible, regardless of the editor's height.

Image Image

Steps to reproduce

  1. Set the editor container to a small height (e.g. ~100px)
  2. Click inside the editor and type some text
  3. Select the text to trigger the FormattingToolbar
  4. Observe that the toolbar is clipped and partially hidden within the editor boundary

Optional: Reproducible on the official minimal demo without any code changes:
https://www.blocknotejs.org/examples/basic/minimal
→ Open browser DevTools → select the editor element → reduce its height → select text

BlockNote version

0.47.1

Environment

No response

Additional context

This appears to be the same root cause as the slash menu clipping issue

Contribution

  • I'd be interested in contributing a fix for this issue

Sponsor

  • I'm a sponsor and would appreciate if you could look into this sooner than later 💖

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs-triageIssue has not yet been reviewed or classified by maintainers.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions