Add Collaboration Example and Documentation

[thesunny]

Do you want to request a feature or report a bug?

Improvement to documentation and add an example about collaboration.

What's the current behavior?

Currently, there is no documentation and no examples related to collaboration.

Creating a full implementation of collaboration is beyond the scope of this project but a minimal example of collaboration is desirable to help people get started.

What's the expected behavior?

A minimal example and associated documentation related to collaboration would be based on the following in my opinion:

• Plain paragraphs with no styling
• A minimal Node server
• Plain WebSocket

Which can later grow to add:

• bold/italic
• headings

There are some collaboration related libraries that may make starting easier but my gut feel is that users will run into limits that can't be overcome without modifying the libraries. For this reason, I recommend not using libraries that handle the OT for us. On the other hand, if you believe an OT library can handle most of the use cases automatically, that would be a good reason to ignore what I just said.

If having some collaboration examples/documentation would be helpful, please thumbs up as an indication of interest to the community.

[lukevp]

I've seen collaboration examples in various other editors (for example, https://codepen.io/dnus/pen/OojaeN).

IMO, a collaboration example should incorporate:

1. 2 Editors
2. OT between the 2 editors
3. Some representation of cursor and range between the 2

None of these require an external server, and would make static hosting of the examples easier. It would also make the process of applying the OT more straightforward and explicit in the example code since there would be no external library integration.

The collaboration implementation on the server-side is an implementation detail and has no relevance with the usage of Slate itself.

Collaboration should basically just be managing ephemeral user state (user a has selection at this position, user b has selection at this position) and applying OT on the documents. This can all be managed with an in memory data structure within the same browser.

What do you think? This seems like an easier solution to build and more representative to me. The "how are the actions shipped between users" part is out of scope of Slate.

[thesunny]

@lukevp I really like that! The simpler it is to understand the example, the better.

To clarify, we have two editors sitting side by side communicating with each other?

I wonder if it would impact the complexity of the example if there was a way to switch off the "connection" between the editors. Maybe with a toggle switch (which could even be just a checkbox to select whether they are connected). This way, it makes it easy to see what happens when multiple OT commands are queued and have to be applied in bulk through the OT transformations.

[lukevp]

Yes, that's what I was thinking as far as the 2 editors next to each other, and having an offline mode would be great.

I looked into this some more after commenting and this example seems robust and has a hosted version with online/offline and multi-users: https://github.com/cudr/slate-collaborative

It looks like OT is not supported in Slate natively (I misunderstood that it was based on the API being transform/operation based) and needs an external implementation, which makes sense based on the desire to keep the core lean and unopinionated with regard to OT/CRDT.

This example uses https://github.com/automerge/automerge for the CRDT.

Do you think there's value in having a more minimal example than this? Or perhaps there could just be some more plugin exposition within the docs that links to this and other useful plugins?

[acnebs]

AFAIK, OT really only works with a Central Source of Truth (server) – can't really make it work in a P2P fashion. That is when you use CRDT.

[thesunny]

@acnebs My understanding of what Luke is proposing is to put the Central Source of Truth server in the browser to keep it simple. In other words, there is a server. It is in the browser.

The nice thing is that it removes the socket connection and communication code. The example would focus on what is unique to collaborative.

[lukevp]

You got it thesunny. This seemed like a clearer way to both interact with the example code in a debugger and allow users to test it out locally without also having to set up a separate hosted server.