react-prosemirror
react-prosemirror copied to clipboard
NodeView is detached from DOM during `scrollIntoView` transaction
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