@vaadin/rich-text-editor 24.5.0-beta1 → 24.5.0-rc2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "24.5.0-beta1",
+  "version": "24.5.0-rc2",
   "publishConfig": {
     "access": "public"
   },
@@ -41,20 +41,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.5.0-beta1",
-    "@vaadin/component-base": "24.5.0-beta1",
-    "@vaadin/confirm-dialog": "24.5.0-beta1",
-    "@vaadin/overlay": "24.5.0-beta1",
-    "@vaadin/text-field": "24.5.0-beta1",
-    "@vaadin/tooltip": "24.5.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "24.5.0-beta1",
-    "@vaadin/vaadin-material-styles": "24.5.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-beta1",
+    "@vaadin/button": "24.5.0-rc2",
+    "@vaadin/component-base": "24.5.0-rc2",
+    "@vaadin/confirm-dialog": "24.5.0-rc2",
+    "@vaadin/overlay": "24.5.0-rc2",
+    "@vaadin/text-field": "24.5.0-rc2",
+    "@vaadin/tooltip": "24.5.0-rc2",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-rc2",
+    "@vaadin/vaadin-material-styles": "24.5.0-rc2",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-rc2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "24.5.0-beta1",
-    "@vaadin/chai-plugins": "24.5.0-beta1",
+    "@vaadin/a11y-base": "24.5.0-rc2",
+    "@vaadin/chai-plugins": "24.5.0-rc2",
     "@vaadin/testing-helpers": "^1.0.0",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
@@ -66,5 +66,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "da4b57724d7089e3766d59d01068159322adb2b8"
+  "gitHead": "be5bf40aec33761c6defdb5b3093c7b6dd5d97fd"
 }

package/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) {