BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

Inconsistent behaviour of side menu when cursor outside editor

Open hncheung9 opened this issue 2 years ago • 3 comments

An inconsistent behaviour of side menu showing up outside editor. It will show up when the cursor is outside editor, both left and right. However, it does not show when cursor is out of y-axis but inside x-axis(top and down area bound by editor width). Can it only show up when cursor is insider editor?

Example

https://github.com/TypeCellOS/BlockNote/assets/62551881/e925f318-ba2b-42d8-977e-40d7c4fabdbb

My use-case is a floating, draggable note and I understand that this is not default BlockNote design(Notion-alike). It will still be much appreciated to have some tunes and make it more universal and clean. Maybe PR#99 block-side-menu-detection-fix will be able to address this issue.

<BlockNoteView className="grow overflow-auto px-1 max-w-full max-h-full" editor={editor} theme={'light'} > <FormattingToolbarPositioner editor={editor} /> <HyperlinkToolbarPositioner editor={editor} /> <SlashMenuPositioner editor={editor} /> <SideMenuPositioner editor={editor} /> <ImageToolbarPositioner editor={editor} /> </BlockNoteView>

Thank you very much for all the awesome work and support!

hncheung9 avatar Nov 21 '23 04:11 hncheung9

This is actually a surprisingly complex issue as the side menu is not necessarily inside the bounding box for the editor, especially when you consider that the React component can be replaced with smth completely different. I think you definitely still want the side menu to show up when hovering over it, even if it's technically outside the editor, so we can't just make it show only when the mouse cursor is within the editor.

It probably makes most sense to allow consumers to define an element/DOMRect in which the side menu should be shown, but we don't have a clear idea for how that API should look yet. Thanks for bringing this up though, it's something we'll look into fixing!

matthewlipski avatar Dec 05 '23 13:12 matthewlipski

I've tested the preview available at https://github.com/TypeCellOS/BlockNote/pull/99, and I can confirm that it resolves the problem. @matthewlipski, could you please provide the rationale behind closing this PR? I'm really hoping you can merge this.

ivorpad avatar Dec 14 '23 12:12 ivorpad

Having this issue as well. Also happens when clicking outside of the editor.

Confusing and distracting UX behavior.

text-editor-hover-click-bug

awkwardnovice avatar Apr 09 '24 17:04 awkwardnovice