Having trouble connecting/saving data from Yjs Quill document to Mongodb - Angular

28 views Asked by At

I'm having trouble saving data from my Quill document to my mongodb instance. I can cache the data to my browser with y-indexeddb but it won't save to my mongodb instance using the provided y-mongodb-provider. Anyone got any tips? I'm following the template from the Yjs website but no luck. Thanks!

Server.js code

const WebSocketServer = require("ws");
const Y = require("yjs");
const { MongodbPersistence } = require("y-mongodb-provider");
const yUtils = require("y-websocket/bin/utils");
const express = require("express");

const server = http.createServer((request, response) => {
  response.writeHead(200, { "Content-Type": "text/plain" });
  response.end("okay");
});

// y-websocket
// const wss = new WebSocketServer({ server }); // gives error related to invalid URL
const WebSocket = require("ws");
const wss = new WebSocket.Server({ server });
wss.on("connection", yUtils.setupWSConnection);

/*
 * y-mongodb-provider
 *  with all possible options (see API section below)
 */
const mdb = new MongodbPersistence(
  "mongodb://localhost:27017/",
  {
    collectionName: "notes",
    multipleCollections: true,
  }
);

/*
 Persistence must have the following signature:
{ bindState: function(string,WSSharedDoc):void, writeState:function(string,WSSharedDoc):Promise }
*/
yUtils.setPersistence({
  bindState: async (docName, ydoc) => {
    const persistedYdoc = await mdb.getYDoc(docName);
    const newUpdates = Y.encodeStateAsUpdate(ydoc);
    mdb.storeUpdate(docName, newUpdates);
    Y.applyUpdate(ydoc, Y.encodeStateAsUpdate(persistedYdoc));
    ydoc.on("update", async (update) => {
      mdb.storeUpdate(docName, update);
    });
  },
  writeState: () => {
    // This is called when all connections to the document are closed.
    // In the future, this method might also be called in intervals or after a certain number of updates.
    return new Promise((resolve) => {
      // When the returned Promise resolves, the document will be destroyed.
      // So make sure that the document really has been written to the database.
      resolve(true);
    });
  },
});

index.ts file

    Quill.register("modules/cursors", QuillCursors);
    const quill = new Quill(document.querySelector("#notes"), {
      modules: {
        cursors: true,
        toolbar: [
          // adding some basic Quill content features
          [{ header: [1, 2, false] }],
          ["bold", "italic", "underline"],
          ["image", "code-block"],
        ],
        history: {
          // Local undo shouldn't undo changes
          // from remote users
          userOnly: true,
        },
      },
      placeholder: "Start collaborating here...",
      theme: "snow", // 'bubble' is also great
    });
    // A Yjs document holds the shared data
    const ydoc = new Y.Doc();

    // Sync clients with the y-webrtc provider.
    const provider = new WebrtcProvider("notes-room", ydoc);

    // Sync clients with the y-websocket provider
    const websocketProvider = new WebsocketProvider(
      "wss://localhost:80",
      "notes-room",
      ydoc
    );

    // Define a shared text type on the document
    const ytext = ydoc.getText("quill");

    // "Bind" the quill editor to a Yjs text type.
    const binding = new QuillBinding(ytext, quill, provider.awareness);

    // Remove the selection when the iframe is blurred
    window.addEventListener("blur", () => {
      quill.blur();
    });
0

There are 0 answers