iOS Safari: On text selection two overlapping menus

[wielinde]

Describe the bug
This bug effectively makes it very hard for users to reach all the features of the BlockNote toolbar when on mobile. And users rely on that toolbar even more as they would on a desktop computer. On the desktop they can still use keyboard short for in- and out-denting of lists. But also marking a text as bold/italic after you have written a text becomes almost impossible.

To Reproduce

• on iOS Safari
• open any standard BlockNote editor
• write text
• select a word that is rather at the top of the editor/screen/viewport
• two menu open below (as there is not enough space on top) and overlap. This makes it impossible to reach the BlockNote toolbar under that circumstances

Misc

• Node version:
• Package manager:
• Browser:
• I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[NarekManukyan]

We are experiencing the same issue on Android.

I maintain a Flutter WebView wrapper for BlockNote, which is already used in production, so this behavior impacts a significant number of mobile users.

On mobile devices, the toolbar is even more critical than on desktop due to the lack of keyboard shortcuts. When the selection is near the top of the viewport, the native selection menu and the BlockNote toolbar overlap, making it impossible to access formatting actions such as bold/italic or list indentation.

Is this issue currently being addressed, or is there a recommended workaround on the BlockNote side?

Flutter wrapper for reference:
https://pub.dev/packages/flutter_blocknote_editor

[nperez0111]

@NarekManukyan very cool to see that you've embedded BlockNote in Flutter. Mobile support is definitely on our roadmap for this year, just aren't sure where it slots in yet. So more updates soon on this