How to Track user cursor with name in real time editor?

Question

I am following this tutorial https://scotch.io/tutorials/building-a-real-time-markdown-viewer , to create a real time editor. And I want to add and build a Google Doc like feature to track the User cursor text which has unique color like thisDifferent colored cursor

And to show only newly added text to the pad highlighted, so that the viewer is able to identify the newly added changes to the pad.

Answer 1

You'd need something to sync the cursor position among all colaborators. It can be done using WebSockets. That, for starters. Still, I think you can have more info here: Real time collaborative editing - how does it work?