Client side implementation of operational transform for a collaborative coding editor

Question

I am building a collaborative coding editor using operational transform algorithm. I am writing the server in golang and the client in typescript. I am using ace editor as the code editor. I am referring to this article(https://medium.com/coinmonks/operational-transformations-as-an-algorithm-for-automatic-conflict-resolution-3bf8920ea447) for details on how to do this as mentioned in the Google Docs implementation section.

My doubt is this: When the client receives a remote operation.The client is supposed to do the following(I think kindly correct me if I am wrong) :

1. Undo all the user operations in the pending changes queue that is all the changes not yet send to the server.
2. Apply the remote operation.
3. Transform the pending changes that were undo-ed against the remote operation(preserving the remote operation) and apply them again.

So if the user types something when the above process is going on when the client receives a remote operation it would lead to inconsistencies.It could be handled by placing a lock on the editor but it severely hampers user experience and I don't think that is how it is done.

How do I solve this problem? How is this done generally in the client side?

I searched the internet on this and could not find any article regarding client side implementation of this. I searched ShareDB(previously ShareJS) on how it is done but found the Codebase overwhelming. So how is it done in OT client implementations like in ShareDB etc.

Thanks in advance for any help.