fix: re-initialize Quill on detach and re-attach and keep htmlValue (#…

…6506)

Co-authored-by: sujoykd <106066145+sujoykd@users.noreply.github.com>

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

@@ -533,6 +533,20 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
     }
   }
 
+  /** @protected */
+  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 = {};
+  }
+
   /** @private */
   __setDirection(dir) {
     // Needed for proper `ql-align` class to be set and activate the toolbar align button
@@ -554,18 +568,14 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
   }
 
   /** @protected */
-  ready() {
-    super.ready();
+  connectedCallback() {
+    super.connectedCallback();
 
     const editor = this.shadowRoot.querySelector('[part="content"]');
-    const toolbarConfig = this._prepareToolbar();
-    this._toolbar = toolbarConfig.container;
-
-    this._addToolbarListeners();
 
     this._editor = new Quill(editor, {
       modules: {
-        toolbar: toolbarConfig,
+        toolbar: this._toolbarConfig,
       },
     });
 
@@ -577,10 +587,6 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
       this.__patchFirefoxFocus();
     }
 
-    this.$.linkDialog.$.dialog.$.overlay.addEventListener('vaadin-overlay-open', () => {
-      this.$.linkUrl.focus();
-    });
-
     const editorContent = editor.querySelector('.ql-editor');
 
     editorContent.setAttribute('role', 'textbox');
@@ -632,6 +638,20 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
     this._editor.on('selection-change', this.__announceFormatting.bind(this));
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._toolbarConfig = this._prepareToolbar();
+    this._toolbar = this._toolbarConfig.container;
+
+    this._addToolbarListeners();
+
+    this.$.linkDialog.$.dialog.$.overlay.addEventListener('vaadin-overlay-open', () => {
+      this.$.linkUrl.focus();
+    });
+  }
+
   /** @private */
   _prepareToolbar() {
     const clean = Quill.imports['modules/toolbar'].DEFAULTS.handlers.clean;

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

@@ -928,4 +928,42 @@ 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;
+
+      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;
+    });
+
+    it('should have the listeners when removed and added back again', () => {
+      const parent = rte.parentNode;
+
+      parent.removeChild(rte);
+      parent.appendChild(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 parent = rte.parentNode;
+      parent.removeChild(rte);
+      parent.appendChild(rte);
+
+      expect(rte.htmlValue).to.equal('<h1>Foo</h1>');
+    });
+  });
 });