Synchronization Issues on First and Last Lines in Persisted Collaborative Editors

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

@dmonad