can you help with my school project?

v6
1

Hello guys
im first year cs student, i need your help in my school project
im trying to build real time collaborative code editor , i ended up with codemirror as i think is good choice , the basics setup and the api for code execution is working , the problem that i face is when i want to implement real time collaborative editing with codemirror collab and socket.io i got this error Uncaught (in promise) RangeError: Applying change set to a document with the wrong length.

client side

  socket.emit("joinCodebase", codebaseId)

  view = new EditorView({
    doc: codebase.code,
    extensions: [
    basicSetup,
    python(),
    collab({version: 0}),
    EditorView.theme({
        '&': { fontSize: '22px', height: '100%' },
        '.cm-content': { padding: '12px' }
      }, {dark: true}),

      //check for doc changes and save the codebase
      EditorView.updateListener.of((update) => {
        if (update.docChanged) {
          saveCode(update.state.doc.toString())
          //pass codemirror current state (update.state) to sendableUpdates
          //sendableUpdates going to look for unaplied local changes in the state
          //and return them as object
          const sendable = sendableUpdates(view.state);
          const serialized = sendable.map(u => ({
            clientID: u.clientID,
            version: u.version,               // see Section 2
            changes: u.changes.toJSON(),      // ← serialize
            effects: u.effects                // if any
          }));
          
          socket.emit("localChanges", { Changes: serialized, codebaseId });
      }})
    ],
    parent: document.getElementById("editor")
  })


socket.on("remoteChanges" , data => {  
  const deserialized = data.Changes.map(u => ({
    clientID: u.clientID,
    version: u.version,
    changes: ChangeSet.fromJSON(u.changes),  // ← deserialize
    effects: u.effects
  }));


  view.dispatch(receiveUpdates(view.state, deserialized))
})

server side

io.on('connection', (socket) => {
    console.log('Socket connected:', socket.id);
  

    socket.on('joinCodebase', async (codebaseId) => {
      socket.join(codebaseId);

      const currentOnlineMembers = await io.in(codebaseId).fetchSockets()        
      io.to(codebaseId).emit("currentOnlineMembers",currentOnlineMembers.length)
    });

    socket.on("localChanges" , data => {
        socket.to(data.codebaseId).emit("remoteChanges", data);
    })
});

i really appreciate if you can provide me with resources or point to that root cuz problem
thank you.