react-prosemirror icon indicating copy to clipboard operation
react-prosemirror copied to clipboard

NodeView is detached from DOM during `scrollIntoView` transaction

Open konstantinmuenster opened this issue 6 months ago • 1 comments

Issue

We use a node view that contains a list of items. These items can be indented and outdented via ProseMirror's helper commands sinkListItem and liftListItem. We noticed that these transactions don't work well with react-prosemirror's rendering cycle.

When ProseMirror executes the scrollIntoView transaction at the very end of the command, the node view is still detached from the DOM.

https://github.com/nytimes/react-prosemirror/assets/46243719/fbff800b-c456-4220-96cd-04b0862ba331

Due to that, the scroll calculation doesn't lead to the expected result. For example, if you lift/sink an item at a position further down in the document, it always scrolls the page back to the very top. This is how it behaves with and without node views:

https://github.com/nytimes/react-prosemirror/assets/46243719/63096870-0e80-405b-a468-71232cbb6345

How To Reproduce

I added a setup that reproduces the issue here: https://stackblitz.com/edit/stackblitz-starters-wu7os2

konstantinmuenster avatar Dec 18 '23 16:12 konstantinmuenster