@vaadin/rich-text-editor 25.0.0-alpha15 → 25.0.0-alpha17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "25.0.0-alpha15",
+  "version": "25.0.0-alpha17",
   "publishConfig": {
     "access": "public"
   },
@@ -35,27 +35,27 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "25.0.0-alpha15",
-    "@vaadin/component-base": "25.0.0-alpha15",
-    "@vaadin/confirm-dialog": "25.0.0-alpha15",
-    "@vaadin/overlay": "25.0.0-alpha15",
-    "@vaadin/text-field": "25.0.0-alpha15",
-    "@vaadin/tooltip": "25.0.0-alpha15",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha15",
+    "@vaadin/button": "25.0.0-alpha17",
+    "@vaadin/component-base": "25.0.0-alpha17",
+    "@vaadin/confirm-dialog": "25.0.0-alpha17",
+    "@vaadin/overlay": "25.0.0-alpha17",
+    "@vaadin/text-field": "25.0.0-alpha17",
+    "@vaadin/tooltip": "25.0.0-alpha17",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha17",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha15",
-    "@vaadin/chai-plugins": "25.0.0-alpha15",
-    "@vaadin/test-runner-commands": "25.0.0-alpha15",
+    "@vaadin/a11y-base": "25.0.0-alpha17",
+    "@vaadin/chai-plugins": "25.0.0-alpha17",
+    "@vaadin/test-runner-commands": "25.0.0-alpha17",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha15",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha17",
+    "sinon": "^21.0.0"
   },
   "cvdlName": "vaadin-rich-text-editor",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "1ad98437e7600769bf66f870929feefbeef16edf"
+  "gitHead": "8264c71309907be99368b09414f0f8d7f591e0b9"
 }

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

@@ -368,12 +368,6 @@ export const content = css`
     padding: 0.125rem 0.25rem;
   }
 
-  pre {
-    white-space: pre-wrap;
-    margin-block: var(--vaadin-padding-s);
-    padding: var(--vaadin-padding-container);
-  }
-
   img {
     max-width: 100%;
   }
@@ -417,7 +411,7 @@ const toolbar = css`
   }
 
   [part~='toolbar-button']::before {
-    background: currentcolor;
+    background: currentColor;
     content: '';
     display: block;
     height: var(--vaadin-icon-size, 1lh);

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

@@ -9,6 +9,7 @@
  * license.
  */
 import '../vendor/vaadin-quill.js';
+import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
@@ -412,9 +413,9 @@ export const RichTextEditorMixin = (superClass) =>
       // Set up tooltip to show when hovering or focusing toolbar buttons
       this._tooltip = document.createElement('vaadin-tooltip');
       this._tooltip.slot = 'tooltip';
-      // Create dummy aria target, as toolbar buttons already have aria-label, and also cannot be linked with the
-      // tooltip being in the light DOM
-      this._tooltip.ariaTarget = document.createElement('div');
+      // Set ariaTarget to null, as toolbar buttons already have aria-label,
+      // and also cannot be linked with the tooltip being in the light DOM
+      this._tooltip.ariaTarget = null;
       this.append(this._tooltip);
 
       const buttons = this.shadowRoot.querySelectorAll('[part~="toolbar-button"]');
@@ -425,13 +426,16 @@ export const RichTextEditorMixin = (superClass) =>
     }
 
     /** @private */
-    __showTooltip(event) {
-      const target = event.target;
+    __showTooltip({ type, target }) {
+      // Only show tooltip when focused with keyboard
+      if (type === 'focusin' && !isKeyboardActive()) {
+        return;
+      }
       this._tooltip.target = target;
       this._tooltip.text = target.ariaLabel;
       this._tooltip._stateController.open({
-        focus: event.type === 'focusin',
-        hover: event.type === 'mouseenter',
+        focus: type === 'focusin',
+        hover: type === 'mouseenter',
       });
     }
 
@@ -662,6 +666,7 @@ export const RichTextEditorMixin = (superClass) =>
 
     /** @private */
     __onColorClick() {
+      this._tooltip.opened = false;
       this._colorEditing = true;
     }
 
@@ -678,6 +683,7 @@ export const RichTextEditorMixin = (superClass) =>
 
     /** @private */
     __onBackgroundClick() {
+      this._tooltip.opened = false;
       this._backgroundEditing = true;
     }
 

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

@@ -174,11 +174,11 @@ class RichTextEditorPopupOverlay extends PositionMixin(
   }
 
   /**
-   * Override method from OverlayFocusMixin to use owner as modal root
+   * Override method from OverlayFocusMixin to use owner as focus trap root
    * @protected
    * @override
    */
-  get _modalRoot() {
+  get _focusTrapRoot() {
     return this.owner;
   }
 }

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

@@ -117,6 +117,12 @@ class RichTextEditor extends RichTextEditorMixin(
     return richTextEditorStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`

package/web-types.json

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