Problem with Implementing Collab - Invalid content for node paragraph

1

I am trying to implement Collab following the Collab guide. It is working but I am facing a weird bug, when I enter a new line in the editor the client code works but the server code throws an error: “Invalid content for node paragraph”.

This is the client code:

dispatchTransaction(transaction) {
  console.log('steps', JSON.stringify(transaction.steps));        
  console.log('before', JSON.stringify(this.proseMirrorView.state.doc.toJSON()));
  var newState = this.proseMirrorView.state.apply(transaction);
  this.proseMirrorView.updateState(newState);
  console.log('after', JSON.stringify(this.proseMirrorView.state.doc.toJSON()));
  this.sendSteps$.next();
}

this is the server code:

clientSocket.on('new-client-steps', data => {
    console.log('steps', JSON.stringify(data.steps));
    const steps = data.steps.map(step => Step.fromJSON(canvasSchema, step));
    this.receiveSteps(data.version, steps, data.clientID);
});

receiveSteps(version: number, steps: any[], clientID: string){
    if (version != this.steps.length) return;
    steps.forEach(step => {
        console.log('before', JSON.stringify(this._proseMirrorDoc.toJSON()));
        const applied = step.apply(this._proseMirrorDoc);
        if(applied.failed){
            console.error(applied.failed);
        }else{
            console.log('after', JSON.stringify(applied.doc.toJSON()));
            this._proseMirrorDoc = applied.doc; 
            this.steps.push(step)
            this.stepClientIDs.push(clientID)
        }
    })
    this.notifyClientsNewSteps();
}

With this code if I open the editor and hit “Enter” this is the logs I get on the client:

steps [{"stepType":"replace","from":1,"to":1,"slice":{"content":[{"type":"paragraph"},{"type":"paragraph"}],"openLeft":1,"openRight":1}}]
before {"type":"doc","content":[{"type":"paragraph"}]}
after {"type":"doc","content":[{"type":"paragraph"},{"type":"paragraph"}]}

and on the server:

steps [{"stepType":"replace","from":1,"to":1,"slice":{"content":[{"type":"paragraph"},{"type":"paragraph"}],"openLeft":1,"openRight":1}}]
before {"type":"doc","content":[{"type":"paragraph"}]}
Invalid content for node paragraph

If I am typing without hiting “Enter” everything works, as soon as I hit “Enter” it breaks.

I am using the ‘prosemirror-schema-basic’ in the client and the server.

Any ideas ?

2

Now I also found out that it breaks with any kind of input if I have multiple users, if I type a letter in one tab the code in the other tab breaks with a ReplaceError: “Inconsistent open depths”.

3

I fixed it but I don’t really understand what happened.

The server had only these dependencies:

“prosemirror-model”: “^0.21.0”, “prosemirror-schema-basic”: “^0.21.0”, “prosemirror-transform”: “^0.21.1”,

I changed it to have exactly the same ones the client does:

“prosemirror-collab”: “^0.21.0”, “prosemirror-example-setup”: “^0.20.0”, “prosemirror-history”: “^0.20.0”, “prosemirror-inputrules”: “^0.20.0”, “prosemirror-menu”: “^0.20.0”, “prosemirror-model”: “^0.20.0”, “prosemirror-schema-basic”: “^0.20.0”, “prosemirror-state”: “^0.20.0”, “prosemirror-transform”: “^0.20.0”, “prosemirror-view”: “^0.20.4”,

and then it worked.

4

Don’t mix version 0.20 and 0.21, just upgrade everything to 0.21