'floating toolbar' overlaps with native default 'context menu' in Mobile

[electroluxcode]

Description

'floating toolbar' overlaps with native default 'context menu' in Mobile ， like this pic

I can't find a way to listen to the position or other properties of the native toolbar
Maybe we can consider it

1. Ensure that your own toolbar is located below the editable area (it seems that 'notion' does this)
2. Disable native toolbar

ref:

1. https://stackoverflow.com/questions/22693315/contenteditable-on-ios-control-prevent-selection-toolbar
2. https://stackoverflow.com/questions/16039219/disable-selection-context-menu-in-ios-safari?rq=3
3. https://stackoverflow.com/questions/12304012/preventing-default-context-menu-on-longpress-longclick-in-mobile-safari-ipad
4. https://stackoverflow.com/questions/71916923/open-safari-context-menu-below-text-selection

Reproduction URL

No response

Reproduction steps

1. go to `https://platejs.org/` in mobile
2. selection some area

[dosubot]

This overlap happens because mobile browsers show a native context menu on text selection, and web apps can't control its position or visibility. Plate's floating toolbar is rendered as an overlay after the editable area, so it can easily stack on top of or under the native menu, especially on iOS/Safari. There's no built-in way in Plate to detect, reposition, or disable the native context menu on mobile—browser APIs just don't allow it docs.

If this is a problem for your users, the best workaround is to use a fixed toolbar (rendered above the editor) instead of a floating one on mobile. You can do this by switching to the FixedToolbarKit, which always stays at the top and avoids overlap with the native menu docs.

Customizing the floating toolbar itself won't solve the overlap, since the native menu is out of your control. Disabling the native menu entirely is not officially supported and can break accessibility and expected behavior for users.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.