0

I am creating a document sharing app similar to Google Docs but with ngx-quill for the quill editor and socket.io as socket library. When two users are viewing a document, there is an infinite loop that occurs with the quill editor. I know this must come from the quill editor because When I comment out the code that changes the contents of the quill editor, changes can be seen as they should in the console. Here is the relevant snippets of the code I am using:

            //Receive document modifications from other users
             receiveLiveDocumentChanges():void{
               this.socket.on('add-document-changes', (documentChanges)=> {
                documentChanges = JSON.parse(documentChanges);
                console.log(documentChanges);
                //console.log(this.quillEditor);
                this.quillEditor.updateContents(documentChanges,'api');
                this.currentDocument.content = {ops:documentChanges};
            });
          }
        
         
        
             /* Load text editor with contents to be created */
              onCreate(editor:any){
                this.quillEditor = editor;
                this.loadedDocumentData$.subscribe(delta => {
                  if(!delta) return;
                  editor.setContents(delta,'silent');
                });
              }
    
        handleChange(event:any):void{
           if(!event.content ) return;
        console.log(event);
        this.currentDocument.content = event.content;
this.socket.emit('modifydocument',this.currentDocument._id,JSON.stringify(event.content.ops));
      }

Component from HTML

//Code for the quill-editor component implementation
<quill-editor
      [readOnly]="readonly$ |async"
      (onEditorCreated)="onCreate($event)"
      (onEditorChanged)="handleChange($event)" 
      class="editor"      
      ></quill-editor>

Code for the server

socket.on('send-message', async (room,message)=> {
        const id = new mongoose.Types.ObjectId();
        message['_id'] = id;
        console.log(room, message);
        const document = await Document.findById(room).select("+chat");
        document.chat.push(message);
        await document.save();
        io.in(room).emit('receive-message',message);
    });

    //string should be coming in to the document
    socket.on('modify-document',(roomId,documentContent)=> {
        console.log(documentContent);
        socket.to(roomId).emit('add-document-changes',documentContent);
    });

Any guidance on this will be very much appreciated

  • Is it sending a modify, that updates the document, that sends a modify, that updates the document, that sends a modify, that updates the document.... – Matt Oct 01 '22 at 08:28
  • I am aware of that issue but I am not sure how to prevent that from happening. By this I mean that the user receiving the updated contents should not send back the update to the other user who originally sent the update through keystroke. – William Pattison Oct 01 '22 at 14:27
  • 1
    `handleChange` would need to check the source of the event and skip emitting if it was from `api` – Matt Oct 02 '22 at 04:37

0 Answers0