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