Інтеграція Yjs Quill з Mongodb у Angular: Проблеми та Рішення

8 Березня 2024 в 15:21 28

У вас виникли проблеми зі збереженням даних з документа Quill у Mongodb у вашому Angular додатку? Ця стаття розгляне рішення для цього завдання за допомогою Yjs та інтеграції з Mongodb.

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);
});
},
});

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();
});