QuillJS and YJS integration breaks with insertEmbed image

QuillJS insertEmbed of image breaks the YJS sync and displays a weird behavior. After embedding, a new line is created at the bottom of the editor, and when the user types on the bottom it duplicates the last 2 characters to the next line. Sometimes it also creates multiple empty new lines if you keep doing carriage returns on the bottom.

<quill-editor #editor [modules]="quillConfig" [theme]="theme" (keyup)="onKeyUp()" *ngIf="connected" (onEditorCreated)="onEditorCreated($event)" [preserveWhitespace]="true" [formats]="quillFormats"></quill-editor>

quillConfig: { [index: string]: Object } = {
        imageDropAndPaste: {
          handler: this.imageHandlerDragAndDrop.bind(this)
        },
        toolbar: [
          ['bold', 'italic', 'underline', 'image'],
        ],
        clipboard: {
          allowed: {
            tags: ['a', 'b', 'strong', 'u', 's', 'i', 'p', 'br', 'ul', 'ol', 'li', 'span'],
            attributes: ['href', 'rel', 'target', 'class']
          },
          keepSelection: true,
          matchVisual: false
        }
    }; 

 imageHandlerToolbar(): void {
        ------ upload and generate URL ----
        this.insertToEditor(url);
 }

 insertToEditor(url: string): void {
      const addImageRange: QuillNamespace.RangeStatic = this.editor.getSelection();
      const newRange: number = addImageRange !== null ? addImageRange.index : 0;
      this.editor.insertEmbed(newRange, 'image', url, 'api');
      this.editor.insertText(newRange + 1, ' ', 'api');
      this.onKeyUp();
      this.uploadingImage = false;
  }

 onEditorCreated(editor: QuillEditor): void {
        this.editor.getModule('toolbar').addHandler('image', () => {
          this.imageHandlerToolbar();
        }); 
        this.socket = io(environment.liveEditHubUrl, { transports: ['websocket'] });
    
        // pass the dependency of yjs
        Y.extend(yArray, yMemory, yWebsocketsClient, yMap, yRichText);
        // initialize y instance.
        // Returns promise with Y instance;
        Y({
          db: {
            name: 'memory'
          },
          connector: {
            name: 'websockets-client',
            room: this.subNote.id.toString(),
            socket: this.socket,
            url: environment.liveEditHubUrl
          },
          share: {
            richtext: 'Richtext'
          }
        }).then((y: Y) => {
          this.yService = y;
          y.share.richtext.bindQuill(this.editor);
          this.editor.setSelection(this.editor.getLength() - 1, this.editor.getLength());
          this.connected = true;
        }).catch(() => {
          this.connected = false;
        });
 }

empty lines

after embedding images

Environment Information

• Browser: Chrome
• Node.js: 12.8.2
• Angular: 7
• "y-array": "10.1.4"
• "y-map": "10.1.3"
• "y-memory": "8.0.9"
• "y-richtext": "9.0.8"
• "y-websockets-client": "8.0.16"
• "yjs": "12.3.3"