Shared cursor support

[chasefarmer2808]

Hello BitPhinix,

What is your plan for shared cursor support in this library? I noticed your PR has been up for this for a few days now. What else are you waiting for before deploying it? Finally, how difficult was this to do? I'm wondering if it's something I should start working on myself as I would like to use Slate for a collaborative project.

Also, thank you for this library. I think Slate and Yjs can make a really powerful collaborative editor together. Cheers!

[chasefarmer2808]

Hey BitPhinix, after checking out the branch and trying the code myself, it seems that this feature is incomplete. Sorry for assuming it was without looking at it. I will spend some time today studying your code and try and complete this feature. I'm somewhat familiar with Yjs, but any advice or guidance would be greatly appreciated. Cheers.

[chasefarmer2808]

Whoops, looks like I spoke too soon again. I tried it but forget to invoke the useCursor hook. That probably does important things. Will try it out now.

[chasefarmer2808]

I was able to use your shared cursor code by rendering a caret leaf when the isCaret flag is true. I copied the caret style from the Slate Automerge repo. I also had to add 1 to the anchor offset. Not sure if it's a slate thing, but the cursor was being placed behind the last typed character, instead of in front of it.
Moving on to updating the cursor position when the the cursor is moved by clicking or with arrow keys. Now, I only see it updating when the user starts typing.

[chasefarmer2808]

So turns out the adding one to the anchor offset was not necessary. After adding the decorator function to the dependency list of the renderLeaf callback, everything started working. Including the cursor updating when it was moved by mouse click or arrow keys.

[chasefarmer2808]

Current issue I'm having is only one cursor is showing up, no matter how many clients are in a room. Will work on this next week.

[chasefarmer2808]

FYI I am new to this kind of JS development. My current workflow is make changes to this repo on a local branch, build, and then copy and replace the library on your slate-yjs-example repo (also local). This seems tedious though. I tried to make an example react project within this repo, and just point the slate yjs dependency at these source files, but react didn't like the import above its src directory. Any advice on this would be greatly appreciated.

[BitPhinix]

Hi @chasefarmer,

sorry for the late reply, I'm really busy ATM. I've updated to example project to include cursors here: https://github.com/BitPhinix/slate-yjs-example/tree/feat/cursors, but I'm not sure how stable they are at the moment. I'll come back to this once I have more time again

[chasefarmer2808]

Thanks for updating! Will run the yarn link and try it out locally.

[chasefarmer2808]

Was able to get it running via npm link. Testing with just a hand-full of users in a single room. Things look great so far! Excited to see highlighting and multiple user names showing up too. Nice work! Will study your commit and do more testing. What else do you plan for this feature?

[BitPhinix]

@chasefarmer2808 The cursor support is now merged (and an edge-case which caused an out of sync editor state as well)

[chasefarmer2808]

Looks great! Thank you for keeping up with this in your free time.