Collab: performance issue when updating editor view with a large amount of steps

1

We are buidling a collaborative editor using Prosemirror and the collab module.

We are facing an issue, when the app receives a large amount of steps from the authority, it takes a long time to update the editor view, causing performance issues on our page.

Total steps: 3917 It takes around 2 to 3s until the view is updated

Screenshot 2023-09-15 at 14.23.27
Screenshot 2023-09-15 at 14.23.271758×534 109 KB

Would this be expected with this amount of steps? Should we consider batching the steps here?

this.view?.dispatch(
        receiveTransaction(
          this.view.state,
          steps.map(step => Step.fromJSON(schema, step)),
          clientIDs
        )
      )

Thanks in advance

1 Like
2

That’s a lot of steps! What’s the behavior/scenario that results in 4000 steps being received by a client at once?

3

The scenario that resulted in 4000 steps was one of the users applying bold to a long document. But we see this issue even with hundreds of steps

4

When I test this I get a time of around 30 milliseconds for calling receiveTransaction to create the transaction with 4000 steps, and another 5 milliseconds to dispatch it. What kind of steps are you using, and what code, precisely, is running in the operation you timed?