Example of collaborative editing support

[jamesopti]

Are there any examples of the best way to setup collaborative editing with rich-markdown-editor? The documentation appears to suggest that once the component is mounted that it's state updates shouldnt be tied to an external source.

Any suggestions appreciated!

EDIT: It appears there is already a discussion going on wrt this: #317 - It would still be great to have an example of collaborative editing though.

[chumbalayaa]

I implemented this using YJS as my CRDT solution. I went with their socket provider pattern, since maybe one day we'll want to save data in some DB

Then the code ended up looking something like this (an Extension you pipe into the editor)

class yWebsocketExt extends Extension {
  provider?: WebsocketProvider;
  yXmlFragment?: Y.XmlFragment;

  constructor(provider: WebsocketProvider | undefined, yXmlFragment: Y.XmlFragment | undefined) {
    super();

    this.provider = provider;
    this.yXmlFragment = yXmlFragment;
  }

  get plugins() {
    if (this.yXmlFragment && this.provider) {
      this.provider.awareness.setLocalStateField('user', {
        name: "Random Monkey",
        color: "white",
      });
      return [
        ySyncPlugin(this.yXmlFragment),
        yCursorPlugin(this.provider.awareness),
      ]
    }
    return []
  }
};