'floating toolbar' overlaps with native default 'context menu' in Mobile
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
- Ensure that your own toolbar is located below the editable area (it seems that 'notion' does this)
- Disable native toolbar
ref:
- https://stackoverflow.com/questions/22693315/contenteditable-on-ios-control-prevent-selection-toolbar
- https://stackoverflow.com/questions/16039219/disable-selection-context-menu-in-ios-safari?rq=3
- https://stackoverflow.com/questions/12304012/preventing-default-context-menu-on-longpress-longclick-in-mobile-safari-ipad
- 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
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.
How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other