When using QuillEditor cursor randomly jumps to the beginning of editor

I have such Angular component

<div class="document-container">
<div class="editor-container">
<quill-editor
[(ngModel)]="editorContent"
>
</quill-editor>
</div>
</div>


@Component({
selector: 'app-document',
imports: [QuillModule, FormsModule, ReactiveFormsModule],
templateUrl: './document.component.html',
styleUrl: './document.component.css'
})
export class DocumentComponent implements OnInit, OnDestroy, AfterViewInit{
documentId: string = '';
editorContent: string = '';
hasUnsavedChanges = false;
titleControl = new FormControl('Nowy dokument');
@ViewChild(QuillEditorComponent) editor!: QuillEditorComponent;
private contentChangeSub: Subscription | undefined;
private titleChangeSub: Subscription | undefined;
private saveInProgress = false;
private editorChangeSub : Subscription | undefined;
constructor(
private route: ActivatedRoute,
private documentService: DocumentService,
private websocketService: WebsocketService) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.documentId = params['id'];
this.websocketService.connectToDocument(this.documentId);
if(this.documentId) this.loadDocument();
this.websocketService.onContentUpdate.subscribe(update => {
const selection = this.editor.quillEditor.getSelection();
if (this.editorContent !== update.content || this.titleControl.value !== update.title) {
this.editorContent = update.content;
this.titleControl.setValue(update.title, { emitEvent: false });
if (this.editor && this.editor.quillEditor) {
this.editor.quillEditor.clipboard.dangerouslyPasteHTML(0, update.content);
if(selection){
this.editor.quillEditor.setSelection(selection.index,selection.length);
}
console.log(this.editor.quillEditor.getSelection()?.index)
}
}
});
});
this.titleChangeSub = this.titleControl.valueChanges
.pipe(debounceTime(2000))
.subscribe(()=>{
if(this.documentId && !this.saveInProgress) this.saveDocument();
})
}
ngAfterViewInit(){
this.editorChangeSub = this.editor.onContentChanged
.subscribe((change: any) =>{
if(change.source === 'user'){
this.editorContent = this.editor.quillEditor.root.innerHTML;
console.log(this.editorContent);
this.hasUnsavedChanges = true;
this.websocketService.sendContentUpdate(
this.editorContent,
this.titleControl.value || 'Untitled'
);
if(this.documentId && !this.saveInProgress){
this.saveDocument();
}
}
})
}
ngOnDestroy() {
if (this.contentChangeSub) this.contentChangeSub.unsubscribe();
if (this.titleChangeSub) this.titleChangeSub.unsubscribe();
if (this.editorChangeSub) this.editorChangeSub.unsubscribe();
}
@HostListener('window:beforeunload',['$event'])
async beforeUnloadHandler(event: BeforeUnloadEvent){
if(this.documentId && !this.saveInProgress){
event.returnValue = false;
try{
this.saveInProgress = true;
await this.documentService.updateDocument(
this.documentId,
this.editorContent,
this.titleControl.value || 'untitled'
).toPromise()
} finally {
this.saveInProgress = false;
}
}
}
loadDocument() {
this.documentService.getDocument(this.documentId).subscribe(
document => {
this.editorContent = document.content;
this.titleControl.setValue(document.title, { emitEvent: false });
if (this.editor && this.editor.quillEditor) {
this.editor.quillEditor.clipboard.dangerouslyPasteHTML(0, document.content);
}
},
err => {
console.error(err);
}
);
}
saveDocument(){
this.saveInProgress = true;
this.documentService.updateDocument(
this.documentId,
this.editorContent,
this.titleControl.value || 'untitled'
).subscribe(
() => {
this.saveInProgress = false;
},
err => {
console.error(err);
this.saveInProgress = false;
}
);
}
}


I have weird problem with this code, as i write text inside quill editor for some reason randomly the cursor moves to the beginning of the editor (index 1), this especially happens when i press spacebar, it doesnt place it but moves to the index 1, and then from that point as i keep writing the cursor wont move by itself, I have to manually move it but after one character written it goes back to beginning of editor.

Continue reading...