Collaborative Editing

[heilerich]

Hello,

I would like to contribute towards implementing collaborative editing into outline (see outline/outline#811) and the first step seemed to be making the editor itself compatible with a remote editing framework.

I started a quick experiment integrating the excellent yjs/y-prosemirror into rich-mardown-editor here, like it was suggested by @jezell in the issue linked above.
The integration seems quite straightforward and in my opinion it looks like a good choice. I already have a working example of rich-markdown-editor with collaboration and display of remote cursors in my repository (use yarn start-collab). The changes are fully backwards compatible with current version with the exception of handling programmatic changes to the editor content (see cons below).

Since I am not familiar with the outline codebase (yet), I would love to hear your opinion on how to tackle this feature and if you would be interested in me going forward with this.

Some pros and cons for using yjs/y-prosemirror I gathered so far.

Pros

• I have used yjs in a small private project before and I was quite satisfied with it, the benchmarks the author provides also look quite promising
• The existing Prosemirror integration possibly saves us a lot of work as opposed to building everything ourselves
• Things we would get (almost) for free
  • remote cursors
  • multi transport sync, i.e. via server and p2p (over WebRTC) at the same time, possibly taking load off the server
  • local persistence and deferred syncing (offline editing!)
  • snapshots and history

Cons
Only one so far: it doesn't seem feasible to programmatically change the underlying markdown document as this would require serializing and de-serializing, loosing the state of the internal sync tree. To programmatically change the document one would have to directly invoke a transformation on the Prosemirror document state. This also means that it would probably require, or at least be much easier, to persist the internal yjs representation of the document in the database, rather than the Prosemirror XML or the serialized markdown. Maybe there is some kind of workaround for this (such as just keeping editing sessions as long as 1+ people are editing), but that seems like a lot of work and I don't really see a benefit.

I would love to hear your opinion!

Greetings

[heilerich]

A little proof of concept

Click to show

[tommoor]

Hi, I've actually been working on this already quite actively and am also in touch with the maintainer of yjs – there is a somewhat working branch over on the Outline repo:
https://github.com/outline/outline/tree/yjs

There's also been a lot of work in prepping things like the way releases and notifications are sent to accomodate multiplayer editing:
https://github.com/outline/outline/issues?q=is%3Aissue+label%3A%22collaborative+editing%22+is%3Aclosed

As far as I can tell no changes are needed to this repo at all, the yjs plugins can be injected through the extensions prop, which is nice.

[heilerich]

Apologies! I totally missed that branch 🤭 Looks amazing, can’t wait to see this land in production.

And I swear I looked at the list of active branches ... 😅 Must have been too late at night.

[jamesopti]

Any updates on this recently? Looking to use this package with collaborative editing support.

[tommoor]

Hi @jamesopti – we won't be building realtime into this repo, but you can use any prosemirror plugins you like to manage realtime state through the plugins prop. See the inbuilt plugins for an example of how to integrate with Prosemirror –

https://github.com/outline/rich-markdown-editor/blob/develop/src/plugins/Placeholder.ts

The example I linked above (82d ago) is a good starting point, yjs is a solid library.