How to implement real time collaboration in atlaskit editor?

Question

I am trying to use the Editor Component of Atlaskit to create a real time WYSIWYG editor however there is no proper documentation to get things done I am confused at the collabEdit part, React gives an error: cannot resolve CollabProvider, what exactly is this CollabProvider and how does it work ?

<Editor appearence="comment" collabEdit={{
                useNativePlugin: true,
                provider: Promise.resolve(
                  new CollabProvider(
                    {
                      url: 'http://localhost:3000',
                      securityProvider: () => ({
                        headers: {
                          Authorization: asapToken,
                          'user-ari': userId,
                        },
                        omitCredentials: true,
                      }),
                      docId: 24,
                      userId: 12,
                    },
                    pubSubClient,
                  ),
                ),
                inviteToEditHandler: this.inviteToEditHandler,
                userId: 12,
                isInviteToEditButtonSelected: true
              }} />

Answer 1

In my experience you need to use Atlaskit editor + Prosemirror tweak + y-websocket: https://demos.yjs.dev/atlaskit/atlaskit.html. I'm still trying to figure out the whole thing by myself. I still don't understand how <img> elements should be enabled. See the source of demo at https://github.com/yjs/yjs-demos/tree/master/atlaskit.

Note that you need to modify the atlaskit.js in the demo to point to your own server

const provider = new WebsocketProvider('wss://demos.yjs.dev', 'atlaskit', ydoc)

The first argument is the y-websocket server and the another parameter is the channel name for the collaboration.

The method for persisting the y-websocket server data is still a bit unknown. See https://github.com/yjs/y-websocket/issues/14 for details about that. If you plan on running the y-websocket server on one machine and you're happy with simple file backed database, using y-leveldb might be enough.