@vaadin/rich-text-editor 24.2.3 → 24.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "24.2.3",
+  "version": "24.2.5",
   "publishConfig": {
     "access": "public"
   },
@@ -40,18 +40,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "~24.2.3",
-    "@vaadin/component-base": "~24.2.3",
-    "@vaadin/confirm-dialog": "~24.2.3",
-    "@vaadin/text-field": "~24.2.3",
-    "@vaadin/tooltip": "~24.2.3",
-    "@vaadin/vaadin-lumo-styles": "~24.2.3",
-    "@vaadin/vaadin-material-styles": "~24.2.3",
-    "@vaadin/vaadin-themable-mixin": "~24.2.3"
+    "@vaadin/button": "~24.2.5",
+    "@vaadin/component-base": "~24.2.5",
+    "@vaadin/confirm-dialog": "~24.2.5",
+    "@vaadin/text-field": "~24.2.5",
+    "@vaadin/tooltip": "~24.2.5",
+    "@vaadin/vaadin-lumo-styles": "~24.2.5",
+    "@vaadin/vaadin-material-styles": "~24.2.5",
+    "@vaadin/vaadin-themable-mixin": "~24.2.5"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/a11y-base": "~24.2.3",
+    "@vaadin/a11y-base": "~24.2.5",
     "@vaadin/testing-helpers": "^0.5.0",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
@@ -63,5 +63,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "72e557e765e72559e9c6a525e257d185ad186dc5"
+  "gitHead": "f1c916061f1b117fa9c597d3067e7b96563f99a7"
 }

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

@@ -667,6 +667,9 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
     });
 
     this._editor.on('selection-change', this.__announceFormatting.bind(this));
+
+    // Flush pending htmlValue only once the editor is fully initialized
+    this.__flushPendingHtmlValue();
   }
 
   /** @protected */
@@ -1013,6 +1016,14 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
    * @param {string} htmlValue
    */
   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 = '';
+      return;
+    }
+
     const whitespaceCharacters = {
       '\t': '__VAADIN_RICH_TEXT_EDITOR_TAB',
       '  ': '__VAADIN_RICH_TEXT_EDITOR_DOUBLE_SPACE',
@@ -1036,6 +1047,13 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
     this._editor.setContents(deltaFromHtml, SOURCE.API);
   }
 
+  /** @private */
+  __flushPendingHtmlValue() {
+    if (this.__pendingHtmlValue) {
+      this.dangerouslySetHtmlValue(this.__pendingHtmlValue);
+    }
+  }
+
   /** @private */
   __announceFormatting() {
     const timeout = 200;
@@ -1148,6 +1166,11 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
 
   /** @private */
   _valueChanged(value, editor) {
+    if (value && this.__pendingHtmlValue) {
+      // A non-empty value is set explicitly. Clear pending htmlValue to prevent it from overriding the value.
+      this.__pendingHtmlValue = undefined;
+    }
+
     if (editor === undefined) {
       return;
     }

package/theme/material/vaadin-rich-text-editor-styles.js

@@ -91,6 +91,11 @@ const richTextEditor = css`
   strong {
     font-weight: 600;
   }
+
+  code,
+  pre {
+    background-color: var(--material-secondary-background-color);
+  }
 `;
 
 registerStyles('vaadin-rich-text-editor', [typography, richTextEditor], {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/rich-text-editor",
-  "version": "24.2.3",
+  "version": "24.2.5",
   "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.2.3",
+  "version": "24.2.5",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {