fix: update Quill, disconnect and connect emitter (#7558) (CP: 24.4)

packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js

@@ -243,14 +243,7 @@ export const RichTextEditorMixin = (superClass) =>
     disconnectedCallback() {
       super.disconnectedCallback();
 
-      // Ensure that htmlValue property set before attach
-      // gets applied in case of detach and re-attach.
-      if (this.__debounceSetValue && this.__debounceSetValue.isActive()) {
-        this.__debounceSetValue.flush();
-      }
-
-      this._editor.emitter.removeAllListeners();
-      this._editor.emitter.listeners = {};
+      this._editor.emitter.disconnect();
     }
 
     /** @private */
@@ -285,6 +278,18 @@ export const RichTextEditorMixin = (superClass) =>
         await this.updateComplete;
       }
 
+      this._editor.emitter.connect();
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this._toolbarConfig = this._prepareToolbar();
+      this._toolbar = this._toolbarConfig.container;
+
+      this._addToolbarListeners();
+
       const editor = this.shadowRoot.querySelector('[part="content"]');
 
       this._editor = new Quill(editor, {
@@ -356,16 +361,6 @@ export const RichTextEditorMixin = (superClass) =>
 
       // Flush pending htmlValue only once the editor is fully initialized
       this.__flushPendingHtmlValue();
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this._toolbarConfig = this._prepareToolbar();
-      this._toolbar = this._toolbarConfig.container;
-
-      this._addToolbarListeners();
 
       requestAnimationFrame(() => {
         this.$.linkDialog.$.dialog.$.overlay.addEventListener('vaadin-overlay-open', () => {

packages/rich-text-editor/test/basic.common.js

@@ -1048,41 +1048,24 @@ describe('rich text editor', () => {
   });
 
   describe('detach and re-attach', () => {
-    it('should not have active listeners once detached', () => {
-      expect(editor.emitter).to.not.equal(null);
-      expect(editor.emitter._events).to.not.be.empty;
-      expect(editor.emitter._eventsCount).to.greaterThan(0);
-      expect(editor.emitter.listeners).to.not.be.empty;
+    it('should disconnect the emitter when detached', () => {
+      const spy = sinon.spy(editor.emitter, 'disconnect');
 
       rte.parentNode.removeChild(rte);
 
-      expect(editor.emitter._events).to.be.empty;
-      expect(editor.emitter._eventsCount).to.be.equal(0);
-      expect(editor.emitter.listeners).to.be.empty;
+      expect(spy).to.be.calledOnce;
     });
 
-    it('should have the listeners when removed and added back again', async () => {
+    it('should re-connect the emitter when detached and re-attached', async () => {
       const parent = rte.parentNode;
-
       parent.removeChild(rte);
-      parent.appendChild(rte);
-      await nextUpdate(rte);
-
-      // previous `editor` reference is now stale as a new editor is created in the connectedCallback
-      expect(rte._editor.emitter).to.not.equal(null);
-      expect(rte._editor.emitter._events).to.not.be.empty;
-      expect(rte._editor.emitter._eventsCount).to.greaterThan(0);
-      expect(rte._editor.emitter.listeners).to.not.be.empty;
-    });
 
-    it('should keep htmlValue when detached and immediately re-attached', () => {
-      rte.dangerouslySetHtmlValue('<h1>Foo</h1>');
+      const spy = sinon.spy(editor.emitter, 'connect');
 
-      const parent = rte.parentNode;
-      parent.removeChild(rte);
       parent.appendChild(rte);
+      await nextUpdate(rte);
 
-      expect(rte.htmlValue).to.equal('<h1>Foo</h1>');
+      expect(spy).to.be.calledOnce;
     });
   });
 });