Content duplication in Slate-Yjs offline syncing

[Maryam-Yumna]

We were working on a collaborative editing project with Plate and YJs. We used the slate-yjs library, and we did the editor initialization as follows:

const sharedType = doc.getArray(“content”);
const editor = useMemo(() => {
const editor: any = withCursor(
withYjs(
withReact(withHistory(createPlateEditor({ plugins: plugins }))),
sharedType
),
provider.awareness
);
return editor;
}, [sharedType, provider, dbProvider]);

Everything is working well so far, but we are having an issue with the offline syncing, where the content gets duplicated when there is a concurrent change.

example:

1. content before offline sync

Global warming is the long-term warming of the planet’s overall temperature. Though this warming trend has been going on for a long time, its pace has significantly increased in the last hundred years due to the burning of fossil fuels.

2. when two users make concurrent changes to content

(If one user goes offline and changes the word “Though” to “Even though” and another user changes the word “Though” to “Although”, the whole content that is after that word is duplicated when the document gets synced.)
Global warming is the long-term warming of the planet’s overall temperature. Even though this warming trend has been going on for a long time, its pace has significantly increased in the last hundred years due to the burning of fossil fuels. Although this warming trend has been going on for a long time, its pace has significantly increased in the last hundred years due to the burning of fossil fuels.

Is there any particular reason for this issue and Is there a way to fix the issue?

[beeant0512]

i am using hocuspocus as backend server, and here is my solution to fix the issue

• save document to mongo, it is important to translate buffer to base64 string

        const insertRst = await collection.insertOne(
            {
                rid: documentName,
                data: data.toString('base64'),
                create_at: Date.now(),
            },
            {}
        );

• load document from mongo

const fromBase64 = (str: string): Uint8Array =>
    new Uint8Array(Array.from(atob(str)).map((char) => char.charCodeAt(0)));

    async onLoadDocument(data) {
        if (data.document.isEmpty('content')) {
            const result = await selectYjsDocument(data.documentName);
            if (result) {
                Y.applyUpdate(
                    data.document,
                    fromBase64(result),
                    'snapshot-patch'
                );
            }
        }
        return data.document;
    }