How can I display remote users cursor and selection in Quill

Question

I've been working with Quill for a short time and have been focused on getting collaborative editing working. So far it's going well and I have a fully working collaborative editor!

I want to show the selection and cursor position of other users, but I can't think how to properly approach this problem with Quill.

I essentially want to add markup to the rendered document, without adding any content to the actual document model. Is this possible? Where should I start?

Answer 1

In Quill 0.20, there was an example with multiple cursors working. The approach was a sibling absolutely positioned <div> that contained the cursors and synchronized with selection-change information from the editor. To not delay the 1.0 release this demo and feature was not updated with the new API but support is planned. You can try a similar approach in the meantime and of course the code is still available. You can also track the feature on Github Issues.

Answer 2

You need to use "quill-cursors" package and then listen to selection-change event:

 editor.on("selection-change", function (range, oldRange, source) {
    console.log("Local cursor change: ", range); 
 });

Then broadcast this data to other remote users, and then render the remote cursor:

const cursors = editor.getModule("cursors");
cursors.createCursor(id, user.name, userColor);
cursors.moveCursor(id, cursorRange); // <== cursor data from previous step
cursors.toggleFlag(id, true);