@vaadin/rich-text-editor 24.4.10 → 24.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "24.4.10",
+  "version": "24.4.11",
   "publishConfig": {
     "access": "public"
   },
@@ -41,19 +41,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "~24.4.10",
-    "@vaadin/component-base": "~24.4.10",
-    "@vaadin/confirm-dialog": "~24.4.10",
-    "@vaadin/text-field": "~24.4.10",
-    "@vaadin/tooltip": "~24.4.10",
-    "@vaadin/vaadin-lumo-styles": "~24.4.10",
-    "@vaadin/vaadin-material-styles": "~24.4.10",
-    "@vaadin/vaadin-themable-mixin": "~24.4.10",
+    "@vaadin/button": "~24.4.11",
+    "@vaadin/component-base": "~24.4.11",
+    "@vaadin/confirm-dialog": "~24.4.11",
+    "@vaadin/text-field": "~24.4.11",
+    "@vaadin/tooltip": "~24.4.11",
+    "@vaadin/vaadin-lumo-styles": "~24.4.11",
+    "@vaadin/vaadin-material-styles": "~24.4.11",
+    "@vaadin/vaadin-themable-mixin": "~24.4.11",
     "lit": "^3.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/a11y-base": "~24.4.10",
+    "@vaadin/a11y-base": "~24.4.11",
     "@vaadin/testing-helpers": "^0.6.0",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
@@ -65,5 +65,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "7958b9490f227e72c5457ed3e6c752c6ab2691a4"
+  "gitHead": "1312f60a4bb0b3158428171271fb5c0d88a1b61e"
 }

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

@@ -703,10 +703,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;
       }
 
@@ -733,6 +749,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) {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/rich-text-editor",
-  "version": "24.4.10",
+  "version": "24.4.11",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/rich-text-editor",
-  "version": "24.4.10",
+  "version": "24.4.11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {