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

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

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;
  });
  });
 });