Save the yjs snapshot to database

Now I am using this code to get the snapshot string and save the yjs snapshot to database:

ydoc.on('update', (update, origin) => {
    try {
        let snapshot: Y.Snapshot = Y.snapshot(ydoc);
        let snap: Uint8Array = Y.encodeSnapshot(snapshot);
        const decoder = new TextDecoder('utf-8');
        const snapString = decoder.decode(snap);
    } catch (e) {
        console.log(e);
    }
});

the snapString is:

"d����\u000f\u0001\u0000\u0001���\u000f\u0001\u0000\u0001����\u000f\u0001\u0000\u0001�ׇ�\u000e\u0001\u0000\u0004��ƻ\u000e\u0001\u0000\u0001�߂�\u000e\u0001\u0000\u0001����\u000e\u0001\u0000\u0004����\r\u0001\u0000\u0013��е\r\u0001\u0000\u0004��ܓ\r\u0001\u00000��\r\u0001\u0000F�ۈ�\f\u0001\u0000\u0010ǎ��\f\u0001\u0000\u0004����\f\u0001\u0000\u0001����\f\u0001\u0000\n��Õ\f\u0001\u0000\u0004蚧�\u000b\u0001\u0000&�щ�\u000b\u0001\u0000<����\u000b\u0001\u0000\u0001����\u000b\u0001\u0000,����\u000b\u0001\u0000\u0004����\n\u0001\u0000D����\n\u0001\u0000.����\n\u0001\u00002ਥ�\n\u0001\u0000\u0004�پ\n\u0001\u0000\u0004��ʧ\n\u0011\u0000\u0001�\u0001\u0002�\u0001\u0002�\u0001\u0002�\u0001\u0005�\u0001\u0001�\u0001\u0001�\u0001\u0001�\u0004j�\u0005\u0001�\u0005\u0001�\u0005\u0001�\u0005\u0001�\u0005\u0001�\u0005\u0001�\u0005\u0001�\u0005\u0004����\n\u0001\u0000\u0001�ο�\n\u0001\u0000\u0001�ُ\n\u0001\u0000\u000e����\n\u0001\u0000\u0001����\t\u0001\u0000\u0001֙��\t\u0001\u0000\u0004����\t\u0001\u00006����\t\u0001\u0000\u0001�ݻ�\t\u0001\u0000\u0001���\t\u0001\u0000\u0001����\b\u0001\u0000\u0004�ۤ�\b\u0001\u0000\t����\b\u0001\u0000\u0001�ф�\b\u0001\u0000\u0001���\b\u0001\u0000C����\b\u0001\u0000\u0001����\b\u0007\u0000\u0004S\u0004Z\u0001l\fz\u0001|\u0002�\u0001\u0001����\b\u0001\u0000\u0001�ϰ�\b\u0001\u0000\u001d�ܳ�\b\u0001\u0000\u0001����\u0007\u0001\u0000\u001e��\u0007\u0001\u0000;��ߡ\u0007\u0001\u0000\u0001��\u0007\u0001\u0000\u0004����\u0007\u0001\u0000$�ք�\u0006\u0001\u0000>����\u0006\u0001\u0000G����\u0006\u0001\u0000\u0001����\u0006\u0001\u0000\u0001����\u0006\u0001\u0000\u0001����\u0006\u0001\u0000\u0004�Ȩ�\u0006\u0001\u0000\u0004��ئ\u0006\u0001\u0000\u0004����\u0006\u0001\u0000\u0001�թ�\u0005\u0001\u00008����\u0005\u0001\u0000E�͝�\u0005\u0001\u0000\u0001ʄ��\u0005\u0001\u0000\"ܸ��\u0005\u0001\u0000\u0018����\u0004\u0001\u0000\u0001�ެ�\u0004\u0001\u0000\u0004����\u0004\u0001\u0000\u0004���\u0004\u0001\u00008к��\u0004\u0001\u0000@����\u0004\u0001\u0000\u0001�ɳ�\u0004\u0001\u0000\u0001����\u0003\u0001\u0000\u0007��ĺ\u0003\u0001\u0000\u0001����\u0003\u0001\u0000\u0001���\u0003\u0001\u0000\u0001�⑂\u0003\u0001\u0000\u0004Щځ\u0003\u0001\u0000\u0004����\u0002\u0001\u0000\u0001����\u0002\u0001\u0000\u0001���\u0002\u0001\u0000\u0016����\u0002\u0001\u0000\r���\u0002\u0001\u0000(�˫�\u0002\u0001\u0000\u000b¸��\u0002\u0001\u0000\u001a���\u0002\u0001\u0000\u0004����\u0001\u0001\u0000*����\u0001\u0001\u0000\u0001����\u0001\u0001\u0000\u001a����\u0001\u0001\u0000K޽��\u0001\u0001\u0000 ����\u0001\u0001\u0000@̵��\u0001\u0001\u0000\u0007�獌\u0001\u0001\u0000\u0001⡧b\u0001\u0000I���\u0001\u00004���J\u0001\u0000\b���5\u0001\u0000\u0004���\u0001\u0001\u0000\u0001p����\u000f\u0001���\u000f\u0001����\u000f\u0001����\u000e\u0004�ׇ�\u000e\u0004��ƻ\u000e\u0001ĩ�\u000e\u0001�߂�\u000e\u0001����\u000e\f����\r\u0013��е\r&��ܓ\r0��\rF�ۈ�\f\u0010ǎ��\f\u0004����\f\u0001����\f\u001e��Õ\f(����\u000b\u0001蚧�\u000b&�щ�\u000b<����\u000b\u0001����\u000b,����\u000b"����\nD����\n.����\n2ਥ�\n\n�پ\n\u000f��ʧ\n�\u0005����\n\u0001�ο�\n\u0001�ُ\n\u000e����\n\u0001����\t\f����\t\u0001֙��\t\u0004ű��\t\u0001����\t6����\t\u0001�ݻ�\t\u0001�š�\t\u0001���\t\u001f����\b\u0004�ۤ�\b\t����\b\u0001�ф�\b\u0001���\bC����\b\u0001����\b�\u0001����\b\u001b�ϰ�\b\u001d�ټ�\b\u0001�ܳ�\b\u0017����\u0007\u001e��\u0007;����\u0007\u0001��ߡ\u0007\u0001��\u0007!����\u0007$�ք�\u0006>����\u0006G����\u0006\u0001����\u0006\u0001����\u0006\u0001����\u0006\u0001����\u0006\u0004�Ȩ�\u0006\u0012��ئ\u0006\u001a����\u0006\u0001�թ�\u00058����\u0005E�͝�\u0005\u0001�߻�\u0005\u0004ʄ��\u0005"ܸ��\u0005\u0018����\u0004\u0001�ެ�\u0004\u001c����\u0004\u0010���\u00048к��\u0004@����\u0004\u0019�ɳ�\u0004\u0001����\u0003\u0007��ĺ\u0003\u0001����\u0003\u0001���\u0003\u0001�⑂\u0003Щځ\u0003\u001e����\u0002\u0001����\u0002\u0001���\u0002\u0016����\u0002\u0001����\u0002\r���\u0002(�˫�\u0002\u000b¸��\u0002\u001a���\u0002\t����\u0001����\u0001\u0001����\u0001\u001a����\u0001K޽��\u0001 ����\u0001@�ۨ�\u0001\u0001̵��\u0001\u0007�獌\u0001\u0001⡧bI���4���J\b���5$���\u0001\u0006"

what should I do to get the plain text string?

Snapshots are binary data. You should save it as binary in your database. Most databases have a binary or blob type to accommodate this.

If you have no choice but to save it as a string, you can convert it to base64. You should be able to find examples online of converting Uint8Array to base64.

1 Like

Finally I use this code to get the string of snapshot:

 ydoc.on('update', (update, origin) => {
        try {
            let snapshot: Y.Snapshot = Y.snapshot(ydoc);
            let snap: Uint8Array = Y.encodeSnapshot(snapshot);
            let snapBase64 = btoa(String.fromCharCode(...new Uint8Array(snap)));
            let params: TexFileVersion = {
                file_id: editorAttr.docId,
                name: editorAttr.name,
                project_id: editorAttr.projectId,
                content: ytext.toString(),
                action: 1,
                snapshot: snapBase64
            };
            throttledFn(params);
        } catch (e) {
            console.log(e);
        }
    });

Hello, do I have to disable garbage collection to use snapshots? I’m trying to find a way to implement document diffing based on Tiptap. In the example at yjs-demos/prosemirror-versions at d8e33e619d6f2da0fae0c6a361286e6901635a9b · yjs/yjs-demos · GitHub, garbage collection is disabled, but I don’t want to do that as it reduces performance. Do you have any good solutions?