Real-time collaboration with Y-js

[junoriosity]

Is it possible to do some real-time collaboration via Yjs?

I know it is possible with Prosemirror and Tiptap (https://github.com/yjs/yjs) and also with Blocknote (https://www.blocknotejs.org/docs/real-time-collaboration), but is it possible as well with novel?

It would be terrific if that is the case. 🙂

[junoriosity]

Would be great to hear if that is possible. 🙂

[junoriosity]

@steven-tey Do you know whether this is possible? 🙂

[fullstackjedi]

It's very possible, implemented this and save to my db. Just check the collaboration section in the tip tap docs.

[junoriosity]

@fullstackjedi Many thanks for your reply. Do you have some code example for me at hand here?

[Gyurmatag]

@fullstackjedi I am also interested in this!

[fran6k]

i made it by read tiptap's collaboration content

here are some frontend code
and then you need to setup a hocuspocus server, look here
https://tiptap.dev/guide/collaborative-editing

import {Collaboration} from "@tiptap/extension-collaboration";
import {CollaborationCursor} from "@tiptap/extension-collaboration-cursor";
import { HocuspocusProvider } from '@hocuspocus/provider'
import {Editor} from "novel";
....

    const provider = new HocuspocusProvider({
        url: 'ws://127.0.0.1:1234',
        name: 'example-document',
        // document: ydoc,
    })

....
<Editor
       // must set null
        defaultValue={""}
       // must disable
        disableLocalStorage={true}
        extensions={
            [
                StarterKit.configure({
                    // The Collaboration extension comes with its own history handling
                    history: false,
                }),
                Collaboration.configure({
                    document: provider.document,
                }),

                CollaborationCursor.configure({
                    provider: provider,
                    user: {
                        name: Math.floor(Math.random()*10).toString(),
                        color: '#f783ac',
                    },
                })
            ]
        }