Calculating Top-Level Node Position When Mouse is Left of the Node

1

Hello,

I need to calculate the position of a top-level node in the document when the mouse cursor is positioned not directly over the node, but within a 50px range to the left of it.

This functionality is intended for a custom sidebar interaction, where hovering over the left margin of the editor (within 50px to the left of any top-level node) should allow identifying and interacting with the corresponding node.

Current Implementation:

I am currently using the handleMouseOver event to detect mouse movements and calculate positions. The ProseMirror method view.posAtDOM has been considered for this purpose, but it seems not to fit the requirements, as it requires a specific DOM node and character offset, which is not directly applicable in this scenario.

Challenge:

The primary challenge is determining the correct top-level node based on a mouse position that is not directly over the node itself but within a specified horizontal offset (50px to the left). Standard methods like view.posAtDOM and view.posAtCoords seem to be designed for positions directly over the document content, and not for an offset like this.

Question:

Is there an established method or a recommended approach within ProseMirror to achieve this functionality? Specifically, how can one accurately calculate the position of a top-level document node based on a mouse position that is horizontally offset from the node itself?

Any guidance, suggestions, or examples on how to approach this problem would be greatly appreciated.

2

It seems like, if you take the y position your mouse and an x position a little beyond the left side of the editor, posAtCoords should work fine for your purpose.

4

Thank you for reply! Marijn. I have tried the posAtCoords solution, but since it is based on coordinates, there can be some inaccuracies or slight positional drifts. On the other hand, posAtDOM is very precise and accurate. Then, I tried another solution, which perfectly utilizes posAtDOM. It involves using the ::before or ::after pseudo-class on the element I need to position. This makes the element ‘extend’ 50px to the left. When the cursor moves over the pseudo-class, the handleMouseOver can also correctly capture the target element that includes the pseudo-element.