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