Side Menu showing when the cursor is outside the editor

[christojeffrey]

Describe the bug
the side menu is showing up when the mouse cursor is not inside the editor. it's happening when the mouse is correct vertically, but wrong horizontally. I think it's because the side handle the vertical part of the cursor.

To Reproduce
check the documentation, find a page with an editor inside. hover your mouse to the left of the editor, up to the sidebar for example.

Misc

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

[christojeffrey]

looks like the code that handle this is somewhere around here

BlockNote/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts

Lines 344 to 361 in 6d9b844

	// Gets block at mouse cursor's vertical position.
	const coords = {
	left: editorBoundingBox.left + editorBoundingBox.width / 2, // take middle of editor
	top: this.mousePos.y,
	};
	const elements = this.pmView.root.elementsFromPoint(
	coords.left,
	coords.top
	);
	let block = undefined;
	for (const element of elements) {
	if (this.pmView.dom.contains(element)) {
	block = getDraggableBlockFromElement(element, this.pmView);
	break;
	}
	}

[YousefED]

It's intentional for our internal use-cases, but I agree an option for this would be nice.

What are you building with BlockNote btw? (always curious)

[andreyleskov]

have the same issue, we put blocknote inside a note card in a whiteboard

[christojeffrey]

It's intentional for our internal use-cases, but I agree an option for this would be nice.

What are you building with BlockNote btw? (always curious)

thanks for responding! I want to create a resume builder; currently exploring tools to use. as a base I am currently considering tiptap and its derivatives (like BlockNote) or slate as a base.

[christojeffrey]

looks like the code that handle this is somewhere around here

BlockNote/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts

Lines 344 to 361 in 6d9b844

	// Gets block at mouse cursor's vertical position.
	const coords = {
	left: editorBoundingBox.left + editorBoundingBox.width / 2, // take middle of editor
	top: this.mousePos.y,
	};
	const elements = this.pmView.root.elementsFromPoint(
	coords.left,
	coords.top
	);
	let block = undefined;
	for (const element of elements) {
	if (this.pmView.dom.contains(element)) {
	block = getDraggableBlockFromElement(element, this.pmView);
	break;
	}
	}

I think I can try to do it by limiting the drag handle to only be shown when the cursor is inside the parent div

[yantakus]

I have the same problem. I have a sidebar to the left of the editor. When user hovers over menu items in the sidebar this drag handle appears and it's annoying. Is there any way to fix this?

[meko-dev]

+1 for making this behavior optional.
Also, thanks for your hard work on this editor. It’s the only one I’ve been able to use without running into any issues.

[nperez0111]

As stated before, this is intentionally designed to be this way. I'd be happy to take a PR which resolves this, it essentially revolves around this if statement:

BlockNote/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts

Line 211 in 7a55c34

closestEditor.distance > DISTANCE_TO_CONSIDER_EDITOR_BOUNDS

We'd likely need to expose an option to configure this behavior, I'd recommend that it should be named sideMenuHoverDistance & setting it to 0 would disable this, the default can be the current value of 250