ProseMirror / prosemirror

The ProseMirror WYSIWYM editor
http://prosemirror.net/
MIT License
7.61k stars 336 forks source link

`coordsAtPos` is not returning the good value on first line #1356

Closed adrijere closed 1 year ago

adrijere commented 1 year ago

Hi 👋

I'm using prosemirror with floating-ui to display my toolbar above the selected text. I've an issue with my Samsung 27-inch screen. It's working well on my Mac 14-inch screen.

The selected text is bordered with red color and my toolbar is bordered with green color. If the text is not on the first line, it's working well. If the text is on the first line, the coordsAtPos doesn't return the good number for the from: and to: keys (here, the from and to should be 247 but are 261).

Video to illustrate the issue.

Thank you!

marijnh commented 1 year ago

I don't understand what you mean by from and to returned from coordsAtPos. Can you set up a demo script that, without any additional external code, calls coordsAtPos in a way that produces unexpected results?

adrijere commented 1 year ago

I've an object named selection which is defined with usePositioner('selection'). usePositioner is coming from @remirror/react. My object selection has bad x and y variables. So I've checked the code and saw the hook usePositioner is calling createSelectionPositioner. Inside this method, there is the getActive which returns an array of objects : return [{ from: view.coordsAtPos(anchor), to: view.coordsAtPos(head) }]. (you can find the code here)

The coordsAtPos is defined here : https://github.com/ProseMirror/prosemirror-view/blob/9708c1cdce54abd019c8aeb20d3bc572684a8841/src/domcoords.ts#L256-L313

Currently my view is a EditorView with a dom element which is my div.ProseMirror.remirror-editor.remirror-a11y-dark. I'll try to reproduce it on a codesandbox and share the link when it'll be done.

Thank you for your reactivity :)

adrijere commented 1 year ago

I've done this codesandbox. I can't reproduce the bug. After digging in our codebase, we're using a home made column component. The component had a padding: 8px;. If I remove this, it's working well. I don't understand right now why a positive padding creates this issue but at least, I found where it's coming from.

Thanks again for your reactivity and sorry to bother you for nothing 😬 I'm closing the issue.