fix: delay parsing htmlValue when RTE is attached but not rendered (#7890) (#7930)

Co-authored-by: Diego Cardoso <diego@vaadin.com>

Author: vaadin-bot

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

@@ -793,10 +793,26 @@ export const RichTextEditorMixin = (superClass) =>
      */
     dangerouslySetHtmlValue(htmlValue) {
       if (!this._editor) {
-        // The editor isn't ready yet, store the value for later
-        this.__pendingHtmlValue = htmlValue;
-        // Clear a possible value to prevent it from clearing the pending htmlValue once the editor property is set
-        this.value = '';
+        this.__savePendingHtmlValue(htmlValue);
+
+        return;
+      }
+
+      // In Firefox, the styles are not properly computed when the element is placed
+      // in a Lit component, as the element is first attached to the DOM and then
+      // the shadowRoot is initialized. This causes the `hmlValue` to not be correctly
+      // parsed into the delta format used by Quill. To work around this, we check
+      // if the display property is set and if not, we wait for the element to intersect
+      // with the viewport before trying to set the value again.
+      if (!getComputedStyle(this).display) {
+        this.__savePendingHtmlValue(htmlValue);
+        const observer = new IntersectionObserver(() => {
+          if (getComputedStyle(this).display) {
+            this.__flushPendingHtmlValue();
+            observer.disconnect();
+          }
+        });
+        observer.observe(this);
         return;
       }
 
@@ -823,6 +839,14 @@ export const RichTextEditorMixin = (superClass) =>
       this._editor.setContents(deltaFromHtml, SOURCE.API);
     }
 
+    /** @private */
+    __savePendingHtmlValue(htmlValue) {
+      // The editor isn't ready yet, store the value for later
+      this.__pendingHtmlValue = htmlValue;
+      // Clear a possible value to prevent it from clearing the pending htmlValue once the editor property is set
+      this.value = '';
+    }
+
     /** @private */
     __flushPendingHtmlValue() {
       if (this.__pendingHtmlValue) {

packages/rich-text-editor/test/attach-lit.test.js

@@ -0,0 +1,3 @@
+import '../theme/lumo/vaadin-rich-text-editor-styles.js';
+import '../src/vaadin-lit-rich-text-editor.js';
+import './attach.common.js';

packages/rich-text-editor/test/attach-polymer.test.js

@@ -0,0 +1,3 @@
+import '../theme/lumo/vaadin-rich-text-editor-styles.js';
+import '../src/vaadin-rich-text-editor.js';
+import './attach.common.js';

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

@@ -0,0 +1,90 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync, nextRender, nextUpdate } from '@vaadin/testing-helpers';
+import sinon from 'sinon';
+
+describe('attach/detach', () => {
+  let rte, editor;
+
+  const flushValueDebouncer = () => rte.__debounceSetValue && rte.__debounceSetValue.flush();
+
+  async function attach(shadow = false) {
+    const parent = fixtureSync('<div></div>');
+    if (shadow) {
+      parent.attachShadow({ mode: 'open' });
+    }
+    parent.appendChild(rte);
+    await nextRender();
+    flushValueDebouncer();
+  }
+
+  beforeEach(async () => {
+    rte = fixtureSync('<vaadin-rich-text-editor></vaaddin-rich-text-editor>');
+    await nextRender();
+    flushValueDebouncer();
+    editor = rte._editor;
+  });
+
+  describe('detach and re-attach', () => {
+    it('should disconnect the emitter when detached', () => {
+      const spy = sinon.spy(editor.emitter, 'disconnect');
+
+      rte.parentNode.removeChild(rte);
+
+      expect(spy).to.be.calledOnce;
+    });
+
+    it('should re-connect the emitter when detached and re-attached', async () => {
+      const parent = rte.parentNode;
+      parent.removeChild(rte);
+
+      const spy = sinon.spy(editor.emitter, 'connect');
+
+      parent.appendChild(rte);
+      await nextUpdate(rte);
+
+      expect(spy).to.be.calledOnce;
+    });
+
+    it('should parse htmlValue correctly when element is attached but not rendered', async () => {
+      await attach(true);
+      rte.dangerouslySetHtmlValue('<p>Foo</p><ul><li>Bar</li><li>Baz</li></ul>');
+      rte.parentNode.shadowRoot.innerHTML = '<slot></slot>';
+      await nextRender();
+      flushValueDebouncer();
+      expect(rte.htmlValue).to.equal('<p>Foo</p><ul><li>Bar</li><li>Baz</li></ul>');
+    });
+  });
+
+  describe('unattached rich text editor', () => {
+    beforeEach(() => {
+      rte = document.createElement('vaadin-rich-text-editor');
+    });
+
+    it('should not throw when setting html value', () => {
+      expect(() => rte.dangerouslySetHtmlValue('<h1>Foo</h1>')).to.not.throw(Error);
+    });
+
+    it('should have the html value once attached', async () => {
+      rte.dangerouslySetHtmlValue('<h1>Foo</h1>');
+      await attach();
+
+      expect(rte.htmlValue).to.equal('<h1>Foo</h1>');
+    });
+
+    it('should override the htmlValue', async () => {
+      rte.dangerouslySetHtmlValue('<h1>Foo</h1>');
+      rte.value = JSON.stringify([{ insert: 'Vaadin' }]);
+      await attach();
+
+      expect(rte.htmlValue).to.equal('<p>Vaadin</p>');
+    });
+
+    it('should override the value', async () => {
+      rte.value = JSON.stringify([{ insert: 'Vaadin' }]);
+      rte.dangerouslySetHtmlValue('<h1>Foo</h1>');
+      await attach();
+
+      expect(rte.htmlValue).to.equal('<h1>Foo</h1>');
+    });
+  });
+});

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

@@ -573,70 +573,4 @@ describe('rich text editor', () => {
       );
     });
   });
-
-  describe('detach and re-attach', () => {
-    it('should disconnect the emitter when detached', () => {
-      const spy = sinon.spy(editor.emitter, 'disconnect');
-
-      rte.parentNode.removeChild(rte);
-
-      expect(spy).to.be.calledOnce;
-    });
-
-    it('should re-connect the emitter when detached and re-attached', async () => {
-      const parent = rte.parentNode;
-      parent.removeChild(rte);
-
-      const spy = sinon.spy(editor.emitter, 'connect');
-
-      parent.appendChild(rte);
-      await nextUpdate(rte);
-
-      expect(spy).to.be.calledOnce;
-    });
-  });
-});
-
-describe('unattached rich text editor', () => {
-  let rte;
-
-  beforeEach(() => {
-    rte = document.createElement('vaadin-rich-text-editor');
-  });
-
-  const flushValueDebouncer = () => rte.__debounceSetValue && rte.__debounceSetValue.flush();
-
-  async function attach() {
-    const parent = fixtureSync('<div></div>');
-    parent.appendChild(rte);
-    await nextRender();
-    flushValueDebouncer();
-  }
-
-  it('should not throw when setting html value', () => {
-    expect(() => rte.dangerouslySetHtmlValue('<h1>Foo</h1>')).to.not.throw(Error);
-  });
-
-  it('should have the html value once attached', async () => {
-    rte.dangerouslySetHtmlValue('<h1>Foo</h1>');
-    await attach();
-
-    expect(rte.htmlValue).to.equal('<h1>Foo</h1>');
-  });
-
-  it('should override the htmlValue', async () => {
-    rte.dangerouslySetHtmlValue('<h1>Foo</h1>');
-    rte.value = JSON.stringify([{ insert: 'Vaadin' }]);
-    await attach();
-
-    expect(rte.htmlValue).to.equal('<p>Vaadin</p>');
-  });
-
-  it('should override the value', async () => {
-    rte.value = JSON.stringify([{ insert: 'Vaadin' }]);
-    rte.dangerouslySetHtmlValue('<h1>Foo</h1>');
-    await attach();
-
-    expect(rte.htmlValue).to.equal('<h1>Foo</h1>');
-  });
 });