Tiptap Editor Hocuspocus Collaboration Editing - Content disappears when page is reloaded

647 Views Asked by At

if we refresh the page (Not always), when only one user instance is editing the document, the database extension does not set the already edited content. As far as I know, the database extension should fix the initial content which is being edited, even if the page is refreshed. Please correct, if I am wrong. The server.js code is as follows (with MySQL. I already have tried with FireBase, SQLite with both in memory and disk write and RethinkDB):

import * as dotenv from "dotenv";
dotenv.config();

import { Server } from "@hocuspocus/server";
import { Database } from "@hocuspocus/extension-database";
import mysql from "mysql2";
/* 

Should we convert it to Uint8Array or the DB extension doesit by default?

*/

//import { toUint8Array, fromUint8Array } from "js-base64";
import { Throttle } from "@hocuspocus/extension-throttle";

const pool = mysql.createPool({
    connectionLimit: 100,
    host: process.env.DB_HOST,
    user: process.env.DB_USERNAME,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_DATABASE,
    port: process.env.DB_PORT,
    debug: false,
});

const server = Server.configure({
    port: process.env.HOCUSPOCUS_PORT,
    extensions: [
        new Throttle({
            throttle: 200,
            banTime: 1,
        }),

        new Database({
            fetch: async ({ documentName }) => {
                return new Promise((resolve, reject) => {
                    console.log("Trying to fetch");
                    pool?.query(
                        "SELECT data FROM ydocuments WHERE name = ? ORDER BY id DESC",
                        [documentName],
                        (error, row) => {
                            if (error) {
                                reject(error);
                            }
                            console.log("data: " + JSON.stringify(row));
                            if (row && row.data) {
                                resolve(row.data);
                            } else {
                                resolve(null);
                            }
                        },
                    );
                });
            },

            store: async ({ documentName, state }) => {
                pool?.query(
                    "INSERT INTO ydocuments (name, data) VALUES (?, ?) ON DUPLICATE KEY UPDATE data = ?",
                    [documentName, state, state],
                    (error, result) => {
                        if (error) {
                            throw error;
                        }
                        console.log(`inserted/updated ${result.affectedRows}`);
                    },
                );
            },
        }),
    ],
});

server.listen();

Also, should we convert it to Uint8Array or the DB extension doesit by default as commented in the code?

1

There are 1 best solutions below

0
Karthik On

This issue has been resolved with the following github link suggestions

https://github.com/ueberdosis/hocuspocus/issues/540