y-js/y-richtext

Peer Cursors

Joeao opened this issue · 4 comments

Joeao commented

Rather than place user data into YJS, I've placed YJS data (YJS User ID) into my user data object as user data is used just as much outside of YJS as inside. In order to keep track of which user is carrying out an action and where specifically, I've needed to make a few changes to both yjs/y-richtext and yjs/y-array.

y-richtext commit
Added the real position of the addition/deletion to the event, as this is what Quill's multi-cursor cares about.

y-array commit
Reimplemented valueID on insert, which has been deleted since the latest release, and added it into deletion.

I've not straight up made a pull request for the following reasons:

  1. You gave a reason why valueID isn't included in deletion, I just can't remember why.
  2. I'm not convinced that the y-array commit is inline with your future plans, seeing as you'd removed valueID from insert.
  3. The upcoming update will almost definitely change the results after these changes, hopefully for the better (See pasting of text in the gif below)

The code outside of YJS used to enable this is as follows:

newMap.observe(function(events) {
    for(var i in events) {
        var quill = newMap.instances[0].editor;
        if(quill && events[i].valueId) {
            var user = Objects.getPeerDetailsByYID(JSON.parse(events[i].valueId)[0]);

            // Ensures cursor update isn't coming from this user
            if(user.id != Properties.userID) {
                quill.modules['multi-cursor'].setCursor(user.id, Math.max(events[i].pos + events[i].length, 0), user.firstName + ' ' + user.lastName, '#' + user.color.substring(2));
            }
        }
    }
})

Here's a gif of results after making these changes.

cursors

Let me know if this is going down the right road, or if you can suggest a better way of doing this.

Joeao commented

Just some updated info on this: multi-cursor support has been removed from Quill in 1.0 and will be reimplement in a future update as explained here: quilljs/quill#635

Joeao commented

Peer cursors can be re-implemented into Quill using this project: https://github.com/pedrosanta/quill-sharedb-cursors
I've not tested it yet as my project is not in a fit state right now, but if someone else wants to check it out, possibly using the implementation I listed in the first post on the issue, it could be the current best solution.

Good news! Hey, they mention you :)

This type is now part of Yjs. The Quill binding is now in a separate repository https://github.com/y-js/y-quill that also supports shared cursors :)