@vaadin/rich-text-editor 24.3.0-alpha5 → 24.3.0-alpha7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "24.3.0-alpha5",
+  "version": "24.3.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -43,18 +43,18 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.3.0-alpha5",
-    "@vaadin/component-base": "24.3.0-alpha5",
-    "@vaadin/confirm-dialog": "24.3.0-alpha5",
-    "@vaadin/text-field": "24.3.0-alpha5",
-    "@vaadin/tooltip": "24.3.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha5",
-    "@vaadin/vaadin-material-styles": "24.3.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha5"
+    "@vaadin/button": "24.3.0-alpha7",
+    "@vaadin/component-base": "24.3.0-alpha7",
+    "@vaadin/confirm-dialog": "24.3.0-alpha7",
+    "@vaadin/text-field": "24.3.0-alpha7",
+    "@vaadin/tooltip": "24.3.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha7",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha7"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/a11y-base": "24.3.0-alpha5",
+    "@vaadin/a11y-base": "24.3.0-alpha7",
     "@vaadin/testing-helpers": "^0.6.0",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
@@ -66,5 +66,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "b1fb1be6cc5dc69a82952571fbbda4ffd8e7527c"
+  "gitHead": "cf40acccb9e061debdf4d38b4149d6f2c50f8e10"
 }

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

@@ -520,11 +520,9 @@ export const RichTextEditorMixin = (superClass) =>
 
         toolbar.controls.forEach((pair) => {
           const input = pair[1];
-          if (input.classList.contains('ql-active')) {
-            input.setAttribute('on', '');
-          } else {
-            input.removeAttribute('on');
-          }
+          const isActive = input.classList.contains('ql-active');
+          input.toggleAttribute('on', isActive);
+          input.part.toggle('toolbar-button-pressed', isActive);
         });
       };
     }
@@ -693,7 +691,26 @@ export const RichTextEditorMixin = (superClass) =>
      * @param {string} htmlValue
      */
     dangerouslySetHtmlValue(htmlValue) {
+      const whitespaceCharacters = {
+        '\t': '__VAADIN_RICH_TEXT_EDITOR_TAB',
+        '  ': '__VAADIN_RICH_TEXT_EDITOR_DOUBLE_SPACE',
+      };
+      // Replace whitespace characters with placeholders before the Delta conversion to prevent Quill from trimming them
+      Object.entries(whitespaceCharacters).forEach(([character, replacement]) => {
+        htmlValue = htmlValue.replaceAll(/>[^<]*</gu, (match) => match.replaceAll(character, replacement)); // NOSONAR
+      });
+
       const deltaFromHtml = this._editor.clipboard.convert(htmlValue);
+
+      // Restore whitespace characters after the conversion
+      Object.entries(whitespaceCharacters).forEach(([character, replacement]) => {
+        deltaFromHtml.ops.forEach((op) => {
+          if (typeof op.insert === 'string') {
+            op.insert = op.insert.replaceAll(replacement, character);
+          }
+        });
+      });
+
       this._editor.setContents(deltaFromHtml, SOURCE.API);
     }
 

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

@@ -9,6 +9,8 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 const richTextEditor = css`
   :host {
     min-height: calc(var(--lumo-size-m) * 8);
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
   }
 
   [part='toolbar'] {
@@ -32,7 +34,7 @@ const richTextEditor = css`
 
   [part~='toolbar-button']:focus {
     outline: none;
-    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+    box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
 
   [part~='toolbar-button']:hover {
@@ -48,7 +50,7 @@ const richTextEditor = css`
   }
 
   [part~='toolbar-button'][on] {
-    background-color: var(--lumo-primary-color);
+    background-color: var(--vaadin-selection-color, var(--lumo-primary-color));
     color: var(--lumo-primary-contrast-color);
   }
 

package/web-types.json

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