Short delay between two nodeviews rendering during a transaction to update decoration

I’m trying to use a nodeview to rewrite the ordered list item to make more customized control over the list. We have implemented a drag & drop node handle (we use Prosemirror’s view.dragging), after dragging an ordered list item, the related list items should update their item number (1., 2., 3., 4.) as well. The list number is obtained by utilizing the index() function used (in nodeview).

Since we wish to make sure every list number change correctly, we set node decoration on every ordered list item, so that when the decoration change, the nodeview will get updated as well. After a drop event happens, we dispatched a transaction to update the decoration. However, since the update of decoration is executed after the drop event, there is an observable delay on Ordered Item 4 (the list number becomes 4 from 3, with a short delay after drop event).

Is there any possible way to make the dropped item (Ordered Item 4) and other related nodeviews (Ordered Item 1, 2, 3) to be rendered simultaneously, though there is a transaction between them?

Thank you so much!

Feb-26-2022 17-52-51

Transactions are applied synchronously (including any appended transactions). If whichever way you’re using to trigger an additional transaction is asynchronous, then sure, you might see a delay like this, but I don’t see how the library could help with that.

1 Like

Thanks a lot for your help. It turn out that we found css counter can solve our problem so far. Again thanks for your instant reply!