QuillJS 和 YJS 集成因插入嵌入图像而中断

如何解决QuillJS 和 YJS 集成因插入嵌入图像而中断

图像的 quillJS insertEmbed 破坏了 YJS 同步并显示出奇怪的行为。嵌入后，在编辑器底部创建一个新行，当用户在底部键入时，它将最后 2 个字符复制到下一行。有时，如果您一直在底部回车，它还会创建多个空的新行。

<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

环境信息

• 浏览器：Chrome
• Node.js：12.8.2
• 角度：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"