When clients retrieve persisted documents from the server, synchronization problems occur during collaborative editing. Specifically, changes made to the first and last lines—or when editing beyond these boundaries—fail to sync properly between clients. This issue has been observed in both Quill and ProseMirror editors, indicating a potential problem in how the persisted document’s state is merged or maintained, particularly around document boundaries and inline content.
export default function App(){
const quillref = useRef()
useEffect(()=>{
if(!quillref.current)return;
const ydoc = new Y.Doc()
const editor = quillref.current.getEditor()
const provider = new WebsocketProvider(" ws://localhost:3001/" , "room1", ydoc)
provider.once('sync', () => {
const ytext = ydoc.getText("quill");
new QuillBinding(ytext, editor, provider.awareness);
console.log("Sync complete, text:", ytext.toString());
});
provider.awareness.setLocalState({
user: {
name: Math.random() * 100,
color: "blue"
}
});
return () => {
console.log("Cleaning up YJS connection")
provider.disconnect()
ydoc.destroy()
}
},[])
return <div>
<Reactquill ref={quillref} ></Reactquill>
</div>
}
server code if needed
const leveldb = new LeveldbPersistence('./storage-location');
setPersistence({
bindState: async (docName, ydoc) => {
const persistedYdoc = await leveldb.getYDoc(docName);
Y.applyUpdate(ydoc, Y.encodeStateAsUpdate(persistedYdoc));
ydoc.on('update', async (update) => {
await leveldb.storeUpdate(docName, update);
});
},
writeState: async (docName, ydoc) => {
return Promise.resolve();
},
});
const server = http.createServer(app);
const wss = new WebSocketServer({ noServer: true });
server.on("upgrade", (req, socket, head) => {
console.log("Running server upgrade callback");
if (req.headers["upgrade"] !== "websocket") {
socket.destroy();
return;
}
wss.handleUpgrade(req, socket, head, (ws) => {
const parsedUrl = url.parse(req.url || "", true);
const roomName = parsedUrl.pathname?.replace("/", "");
console.log("Room connected:", roomName);
setupWSConnection(ws, req);
ws.on("close", async () => {
console.log("Client disconnected from room:", roomName);
});
});
});
server.listen(3001, "0.0.0.0", () => {
console.log("Server is listening on port 3002");
});