@vaadin/rich-text-editor 24.4.0-rc2 → 24.5.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "24.4.0-rc2",
+  "version": "24.5.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -41,19 +41,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.4.0-rc2",
-    "@vaadin/component-base": "24.4.0-rc2",
-    "@vaadin/confirm-dialog": "24.4.0-rc2",
-    "@vaadin/text-field": "24.4.0-rc2",
-    "@vaadin/tooltip": "24.4.0-rc2",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-rc2",
-    "@vaadin/vaadin-material-styles": "24.4.0-rc2",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-rc2",
+    "@vaadin/button": "24.5.0-alpha2",
+    "@vaadin/component-base": "24.5.0-alpha2",
+    "@vaadin/confirm-dialog": "24.5.0-alpha2",
+    "@vaadin/text-field": "24.5.0-alpha2",
+    "@vaadin/tooltip": "24.5.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha2",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/a11y-base": "24.4.0-rc2",
+    "@vaadin/a11y-base": "24.5.0-alpha2",
     "@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": "ea3d99e8cf67a337e959d5cab849f80464c7c7e5"
+  "gitHead": "403f153bf4351f220cb6172485a0575ddf0d0fba"
 }

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

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { RichTextEditorPopupMixin } from './vaadin-rich-text-editor-popup-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-rich-text-editor>`. Not intended to be used separately.
+ * @private
+ */
+class RichTextEditorPopup extends RichTextEditorPopupMixin(PolylitMixin(LitElement)) {
+  static get is() {
+    return 'vaadin-rich-text-editor-popup';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: none;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <vaadin-rich-text-editor-popup-overlay
+        .renderer="${this.renderer}"
+        .opened="${this.opened}"
+        .positionTarget="${this.target}"
+        no-vertical-overlap
+        horizontal-align="start"
+        vertical-align="top"
+        focus-trap
+        @opened-changed="${this._onOpenedChanged}"
+        @vaadin-overlay-escape-press="${this._onOverlayEscapePress}"
+      ></vaadin-rich-text-editor-popup-overlay>
+    `;
+  }
+
+  /** @private */
+  _onOpenedChanged(event) {
+    this.opened = event.detail.value;
+  }
+}
+
+defineCustomElement(RichTextEditorPopup);
+
+export { RichTextEditorPopup };
+
+/**
+ * An element used internally by `<vaadin-rich-text-editor>`. Not intended to be used separately.
+ * @private
+ */
+class RichTextEditorPopupOverlay extends PositionMixin(
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
+) {
+  static get is() {
+    return 'vaadin-rich-text-editor-popup-overlay';
+  }
+
+  static get styles() {
+    return overlayStyles;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="backdrop" part="backdrop" hidden></div>
+      <div part="overlay" id="overlay">
+        <div part="content" id="content"><slot></slot></div>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(RichTextEditorPopupOverlay);

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

@@ -12,6 +12,7 @@ import '@vaadin/button/src/vaadin-lit-button.js';
 import '@vaadin/confirm-dialog/src/vaadin-lit-confirm-dialog.js';
 import '@vaadin/text-field/src/vaadin-lit-text-field.js';
 import '@vaadin/tooltip/src/vaadin-lit-tooltip.js';
+import './vaadin-lit-rich-text-editor-popup.js';
 import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -84,6 +85,25 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
             <vaadin-tooltip for="btn-strike" .text="${this.i18n.strike}"></vaadin-tooltip>
           </span>
 
+          <span part="toolbar-group toolbar-group-style">
+            <!-- Color -->
+            <button
+              id="btn-color"
+              type="button"
+              part="toolbar-button toolbar-button-color"
+              @click="${this.__onColorClick}"
+            ></button>
+            <vaadin-tooltip for="btn-color" .text="${this.i18n.color}"></vaadin-tooltip>
+            <!-- Background -->
+            <button
+              id="btn-background"
+              type="button"
+              part="toolbar-button toolbar-button-background"
+              @click="${this.__onBackgroundClick}"
+            ></button>
+            <vaadin-tooltip for="btn-background" .text="${this.i18n.background}"></vaadin-tooltip>
+          </span>
+
           <span part="toolbar-group toolbar-group-heading">
             <!-- Header buttons -->
             <button
@@ -265,9 +285,35 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
           ${this.i18n.cancel}
         </vaadin-button>
       </vaadin-confirm-dialog>
+
+      <vaadin-rich-text-editor-popup
+        id="colorPopup"
+        .colors="${this.colorOptions}"
+        .opened="${this._colorEditing}"
+        @color-selected="${this.__onColorSelected}"
+        @opened-changed="${this.__onColorEditingChanged}"
+      ></vaadin-rich-text-editor-popup>
+
+      <vaadin-rich-text-editor-popup
+        id="backgroundPopup"
+        .colors="${this.colorOptions}"
+        .opened="${this._backgroundEditing}"
+        @color-selected="${this.__onBackgroundSelected}"
+        @opened-changed="${this.__onBackgroundEditingChanged}"
+      ></vaadin-rich-text-editor-popup>
     `;
   }
 
+  /** @private */
+  __onBackgroundEditingChanged(event) {
+    this._backgroundEditing = event.detail.value;
+  }
+
+  /** @private */
+  __onColorEditingChanged(event) {
+    this._colorEditing = event.detail.value;
+  }
+
   /** @private */
   _onLinkEditingChanged(event) {
     this._linkEditing = event.detail.value;

package/src/vaadin-rich-text-editor-mixin.d.ts

@@ -17,6 +17,8 @@ export interface RichTextEditorI18n {
   italic: string;
   underline: string;
   strike: string;
+  color: string;
+  background: string;
   h1: string;
   h2: string;
   h3: string;
@@ -96,6 +98,16 @@ export declare class RichTextEditorMixinClass {
    */
   i18n: RichTextEditorI18n;
 
+  /**
+   * The list of colors used by the background and text color
+   * selection controls. Should contain an array of HEX strings.
+   *
+   * When user selects `#000000` (black) as a text color,
+   * or `#ffffff` (white) as a background color, it resets
+   * the corresponding format for the selected text.
+   */
+  colorOptions: string[];
+
   /**
    * Sets content represented by HTML snippet into the editor.
    * The snippet is interpreted by [Quill's Clipboard matchers](https://quilljs.com/docs/modules/clipboard/#matchers),

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

@@ -146,6 +146,8 @@ export const RichTextEditorMixin = (superClass) =>
               italic: 'italic',
               underline: 'underline',
               strike: 'strike',
+              color: 'color',
+              background: 'background',
               h1: 'h1',
               h2: 'h2',
               h3: 'h3',
@@ -169,6 +171,28 @@ export const RichTextEditorMixin = (superClass) =>
           },
         },
 
+        /**
+         * The list of colors used by the background and text color
+         * selection controls. Should contain an array of HEX strings.
+         *
+         * When user selects `#000000` (black) as a text color,
+         * or `#ffffff` (white) as a background color, it resets
+         * the corresponding format for the selected text.
+         */
+        colorOptions: {
+          type: Array,
+          value: () => {
+            /* prettier-ignore */
+            return [
+              '#000000', '#e60000', '#ff9900', '#ffff00', '#008a00', '#0066cc', '#9933ff',
+              '#ffffff', '#facccc', '#ffebcc', '#ffffcc', '#cce8cc', '#cce0f5', '#ebd6ff',
+              '#bbbbbb', '#f06666', '#ffc266', '#ffff66', '#66b966', '#66a3e0', '#c285ff',
+              '#888888', '#a10000', '#b26b00', '#b2b200', '#006100', '#0047b2', '#6b24b2',
+              '#444444', '#5c0000', '#663d00', '#666600', '#003700', '#002966', '#3d1466'
+            ];
+          },
+        },
+
         /** @private */
         _editor: {
           type: Object,
@@ -210,6 +234,30 @@ export const RichTextEditorMixin = (superClass) =>
           type: String,
           value: '',
         },
+
+        /** @private */
+        _colorEditing: {
+          type: Boolean,
+          value: false,
+        },
+
+        /** @private */
+        _colorValue: {
+          type: String,
+          value: '',
+        },
+
+        /** @private */
+        _backgroundEditing: {
+          type: Boolean,
+          value: false,
+        },
+
+        /** @private */
+        _backgroundValue: {
+          type: String,
+          value: '',
+        },
       };
     }
 
@@ -315,6 +363,15 @@ export const RichTextEditorMixin = (superClass) =>
         });
       });
 
+      this._editor.on('editor-change', () => {
+        const selection = this._editor.getSelection();
+        if (selection) {
+          const format = this._editor.getFormat(selection.index, selection.length);
+          this._toolbar.style.setProperty('--_color-value', format.color || null);
+          this._toolbar.style.setProperty('--_background-value', format.background || null);
+        }
+      });
+
       const TAB_KEY = 9;
 
       editorContent.addEventListener('keydown', (e) => {
@@ -367,6 +424,9 @@ export const RichTextEditorMixin = (superClass) =>
 
       this._addToolbarListeners();
 
+      this.$.backgroundPopup.target = this.shadowRoot.querySelector('#btn-background');
+      this.$.colorPopup.target = this.shadowRoot.querySelector('#btn-color');
+
       requestAnimationFrame(() => {
         this.$.linkDialog.$.dialog.$.overlay.addEventListener('vaadin-overlay-open', () => {
           this.$.linkUrl.focus();
@@ -668,6 +728,36 @@ export const RichTextEditorMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    __onColorClick() {
+      this._colorEditing = true;
+    }
+
+    /** @private */
+    __onColorSelected(event) {
+      const color = event.detail.color;
+      this._colorValue = color === '#000000' ? null : color;
+      this._markToolbarClicked();
+      this._editor.format('color', this._colorValue, SOURCE.USER);
+      this._toolbar.style.setProperty('--_color-value', this._colorValue);
+      this._colorEditing = false;
+    }
+
+    /** @private */
+    __onBackgroundClick() {
+      this._backgroundEditing = true;
+    }
+
+    /** @private */
+    __onBackgroundSelected(event) {
+      const color = event.detail.color;
+      this._backgroundValue = color === '#ffffff' ? null : color;
+      this._markToolbarClicked();
+      this._editor.format('background', this._backgroundValue, SOURCE.USER);
+      this._toolbar.style.setProperty('--_background-value', this._backgroundValue);
+      this._backgroundEditing = false;
+    }
+
     /** @private */
     __updateHtmlValue() {
       const editor = this.shadowRoot.querySelector('.ql-editor');

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

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+
+/**
+ * @polymerMixin
+ */
+export const RichTextEditorPopupMixin = (superClass) =>
+  class RichTextEditorPopupMixinClass extends superClass {
+    static get properties() {
+      return {
+        target: {
+          type: Object,
+        },
+
+        opened: {
+          type: Boolean,
+          notify: true,
+        },
+
+        colors: {
+          type: Array,
+        },
+
+        renderer: {
+          type: Object,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__openedOrTargetChanged(opened, target)', '__colorsChanged(colors)'];
+    }
+
+    /** @private */
+    __colorsChanged(colors) {
+      this.renderer = (root) => {
+        if (!root.firstChild) {
+          colors.forEach((color) => {
+            const btn = document.createElement('button');
+            btn.style.background = color;
+            btn.dataset.color = color;
+            btn.addEventListener('click', () => {
+              this.dispatchEvent(new CustomEvent('color-selected', { detail: { color } }));
+            });
+            root.appendChild(btn);
+          });
+        }
+      };
+    }
+
+    /** @private */
+    __openedOrTargetChanged(opened, target) {
+      if (target) {
+        target.setAttribute('aria-expanded', opened ? 'true' : 'false');
+      }
+    }
+
+    /** @protected */
+    _onOverlayEscapePress() {
+      this.target.focus();
+    }
+  };

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

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { RichTextEditorPopupMixin } from './vaadin-rich-text-editor-popup-mixin.js';
+
+registerStyles('vaadin-rich-text-editor-popup-overlay', [overlayStyles], {
+  moduleId: 'vaadin-rich-text-editor-popup-overlay-styles',
+});
+
+/**
+ * An element used internally by `<vaadin-rich-text-editor>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes RichTextEditorPopupMixin
+ * @private
+ */
+class RichTextEditorPopup extends RichTextEditorPopupMixin(PolymerElement) {
+  static get is() {
+    return 'vaadin-rich-text-editor-popup';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: none;
+        }
+      </style>
+      <vaadin-rich-text-editor-popup-overlay
+        renderer="[[renderer]]"
+        opened="{{opened}}"
+        position-target="[[target]]"
+        no-vertical-overlap
+        horizontal-align="start"
+        vertical-align="top"
+        on-vaadin-overlay-escape-press="_onOverlayEscapePress"
+        focus-trap
+      ></vaadin-rich-text-editor-popup-overlay>
+    `;
+  }
+}
+
+defineCustomElement(RichTextEditorPopup);
+
+export { RichTextEditorPopup };
+
+/**
+ * An element used internally by `<vaadin-rich-text-editor>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes DirMixin
+ * @mixes ThemableMixin
+ * @mixes OverlayMixin
+ * @mixes PositionMixin
+ * @private
+ */
+class RichTextEditorPopupOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
+  static get is() {
+    return 'vaadin-rich-text-editor-popup-overlay';
+  }
+
+  static get template() {
+    return html`
+      <div id="backdrop" part="backdrop" hidden></div>
+      <div part="overlay" id="overlay">
+        <div part="content" id="content"><slot></slot></div>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(RichTextEditorPopupOverlay);

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

@@ -141,6 +141,40 @@ export const buttonsStyles = css`
     content: '</>';
     font-size: 0.875em;
   }
+
+  [part~='toolbar-button-background']::before,
+  [part~='toolbar-button-color']::before {
+    content: 'A';
+    font-size: 1em;
+  }
+
+  [part~='toolbar-button-color']::after {
+    content: '';
+    position: absolute;
+    bottom: 4px;
+    left: 25%;
+    right: 25%;
+    width: 50%;
+    height: 4px;
+    background-color: var(--_color-value, currentColor);
+  }
+
+  [part~='toolbar-button-background']::before {
+    z-index: 1;
+  }
+
+  [part~='toolbar-button-background']::after {
+    content: '';
+    position: absolute;
+    inset: 20%;
+    background: repeating-linear-gradient(
+      135deg,
+      var(--_background-value, currentColor),
+      var(--_background-value, currentColor) 1px,
+      transparent 1px,
+      transparent 2px
+    );
+  }
 `;
 
 export const toolbarStyles = [iconsStyles, buttonsStyles];

package/src/vaadin-rich-text-editor.d.ts

@@ -57,6 +57,7 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  * `toolbar-group-history`              | The group for histroy controls
  * `toolbar-group-emphasis`             | The group for emphasis controls
  * `toolbar-group-heading`              | The group for heading controls
+ * `toolbar-group-style`                | The group for style controls
  * `toolbar-group-glyph-transformation` | The group for glyph transformation controls
  * `toolbar-group-group-list`           | The group for group list controls
  * `toolbar-group-alignment`            | The group for alignment controls
@@ -71,6 +72,8 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  * `toolbar-button-italic`              | The "italic" button
  * `toolbar-button-underline`           | The "underline" button
  * `toolbar-button-strike`              | The "strike-through" button
+ * `toolbar-button-color`               | The "color" button
+ * `toolbar-button-background`          | The "background" button
  * `toolbar-button-h1`                  | The "header 1" button
  * `toolbar-button-h2`                  | The "header 2" button
  * `toolbar-button-h3`                  | The "header 3" button

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

@@ -12,6 +12,7 @@ import '@vaadin/button/src/vaadin-button.js';
 import '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';
 import '@vaadin/text-field/src/vaadin-text-field.js';
 import '@vaadin/tooltip/src/vaadin-tooltip.js';
+import './vaadin-rich-text-editor-popup.js';
 import './vaadin-rich-text-editor-toolbar-styles.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
@@ -55,6 +56,7 @@ registerStyles('vaadin-rich-text-editor', richTextEditorStyles, { moduleId: 'vaa
  * `toolbar-group-history`              | The group for histroy controls
  * `toolbar-group-emphasis`             | The group for emphasis controls
  * `toolbar-group-heading`              | The group for heading controls
+ * `toolbar-group-style`                | The group for style controls
  * `toolbar-group-glyph-transformation` | The group for glyph transformation controls
  * `toolbar-group-group-list`           | The group for group list controls
  * `toolbar-group-alignment`            | The group for alignment controls
@@ -69,6 +71,8 @@ registerStyles('vaadin-rich-text-editor', richTextEditorStyles, { moduleId: 'vaa
  * `toolbar-button-italic`              | The "italic" button
  * `toolbar-button-underline`           | The "underline" button
  * `toolbar-button-strike`              | The "strike-through" button
+ * `toolbar-button-color`               | The "color" button
+ * `toolbar-button-background`          | The "background" button
  * `toolbar-button-h1`                  | The "header 1" button
  * `toolbar-button-h2`                  | The "header 2" button
  * `toolbar-button-h3`                  | The "header 3" button
@@ -130,6 +134,25 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
             <vaadin-tooltip for="btn-strike" text="[[i18n.strike]]"></vaadin-tooltip>
           </span>
 
+          <span part="toolbar-group toolbar-group-style">
+            <!-- Color -->
+            <button
+              id="btn-color"
+              type="button"
+              part="toolbar-button toolbar-button-color"
+              on-click="__onColorClick"
+            ></button>
+            <vaadin-tooltip for="btn-color" text="[[i18n.color]]"></vaadin-tooltip>
+            <!-- Background -->
+            <button
+              id="btn-background"
+              type="button"
+              part="toolbar-button toolbar-button-background"
+              on-click="__onBackgroundClick"
+            ></button>
+            <vaadin-tooltip for="btn-background" text="[[i18n.background]]"></vaadin-tooltip>
+          </span>
+
           <span part="toolbar-group toolbar-group-heading">
             <!-- Header buttons -->
             <button
@@ -305,6 +328,20 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
           [[i18n.cancel]]
         </vaadin-button>
       </vaadin-confirm-dialog>
+
+      <vaadin-rich-text-editor-popup
+        id="colorPopup"
+        colors="[[colorOptions]]"
+        opened="{{_colorEditing}}"
+        on-color-selected="__onColorSelected"
+      ></vaadin-rich-text-editor-popup>
+
+      <vaadin-rich-text-editor-popup
+        id="backgroundPopup"
+        colors="[[colorOptions]]"
+        opened="{{_backgroundEditing}}"
+        on-color-selected="__onBackgroundSelected"
+      ></vaadin-rich-text-editor-popup>
     `;
   }
 

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

@@ -3,9 +3,37 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import { color } from '@vaadin/vaadin-lumo-styles/color.js';
+import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
 import { typography } from '@vaadin/vaadin-lumo-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+const popupOverlay = css`
+  [part='overlay'] {
+    margin: var(--lumo-space-xs) 0;
+  }
+
+  [part='content'] {
+    padding: var(--lumo-space-xs);
+    max-width: calc(7 * (var(--_button-size) + var(--_button-margin) * 2));
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    --_button-size: 1.25rem;
+    --_button-margin: 3px;
+  }
+
+  [part='content'] ::slotted(button) {
+    border: none;
+    width: var(--_button-size);
+    height: var(--_button-size);
+    margin: var(--_button-margin);
+  }
+`;
+
+registerStyles('vaadin-rich-text-editor-popup-overlay', [overlay, popupOverlay], {
+  moduleId: 'lumo-rich-text-editor-popup-overlay',
+});
+
 const richTextEditor = css`
   :host {
     min-height: calc(var(--lumo-size-m) * 8);
@@ -32,7 +60,8 @@ const richTextEditor = css`
     transition: background-color 100ms, color 100ms;
   }
 
-  [part~='toolbar-button']:focus {
+  [part~='toolbar-button']:focus,
+  [part~='toolbar-button'][aria-expanded='true'] {
     outline: none;
     box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
@@ -40,7 +69,6 @@ const richTextEditor = css`
   [part~='toolbar-button']:hover {
     background-color: var(--lumo-contrast-5pct);
     color: var(--lumo-contrast-80pct);
-    box-shadow: none;
   }
 
   @media (hover: none) {
@@ -73,6 +101,8 @@ const richTextEditor = css`
   }
 
   [part~='toolbar-button-bold']::before,
+  [part~='toolbar-button-background']::before,
+  [part~='toolbar-button-color']::before,
   [part~='toolbar-button-italic']::before,
   [part~='toolbar-button-underline']::before,
   [part~='toolbar-button-strike']::before {
@@ -84,6 +114,21 @@ const richTextEditor = css`
     font-weight: 700;
   }
 
+  [part~='toolbar-button-background']::before {
+    background-color: var(--lumo-base-color);
+    background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+  }
+
+  [part~='toolbar-button-background']:hover::before {
+    background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)),
+      linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+  }
+
+  [part~='toolbar-button-background']:active::before {
+    background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)),
+      linear-gradient(var(--lumo-contrast-10pct), var(--lumo-contrast-10pct));
+  }
+
   [part~='toolbar-button-h1']::before,
   [part~='toolbar-button-h2']::before,
   [part~='toolbar-button-h3']::before {

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

@@ -1,7 +1,35 @@
 import '@vaadin/vaadin-material-styles/color.js';
+import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
 import { typography } from '@vaadin/vaadin-material-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+const popupOverlay = css`
+  [part='overlay'] {
+    margin: 0.25rem 0;
+  }
+
+  [part='content'] {
+    padding: 0.25rem;
+    max-width: calc(7 * (var(--_button-size) + var(--_button-margin) * 2));
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    --_button-size: 1.25rem;
+    --_button-margin: 3px;
+  }
+
+  [part='content'] ::slotted(button) {
+    border: none;
+    width: var(--_button-size);
+    height: var(--_button-size);
+    margin: var(--_button-margin);
+  }
+`;
+
+registerStyles('vaadin-rich-text-editor-popup-overlay', [overlay, popupOverlay], {
+  moduleId: 'material-rich-text-editor-popup-overlay',
+});
+
 const richTextEditor = css`
   :host {
     background-color: var(--material-background-color);
@@ -37,6 +65,10 @@ const richTextEditor = css`
     color: inherit;
   }
 
+  [part~='toolbar-button'][aria-expanded='true'] {
+    outline: -webkit-focus-ring-color auto 1px;
+  }
+
   [part~='toolbar-button'][on] {
     background-color: rgba(0, 0, 0, 0.1);
     color: inherit;
@@ -71,6 +103,14 @@ const richTextEditor = css`
     font-size: 20px;
   }
 
+  [part~='toolbar-button-background']::before {
+    background-color: var(--material-secondary-background-color);
+  }
+
+  [part~='toolbar-button-background']::after {
+    inset: 0.25rem;
+  }
+
   /* TODO unsupported selector */
   [part='content'] > .ql-editor {
     padding: 0 16px;

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/rich-text-editor",
-  "version": "24.4.0-rc2",
+  "version": "24.5.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-rich-text-editor",
-          "description": "`<vaadin-rich-text-editor>` is a Web Component for rich text editing.\nIt provides a set of toolbar controls to apply formatting on the content,\nwhich is stored and can be accessed as HTML5 or JSON string.\n\n```\n<vaadin-rich-text-editor></vaadin-rich-text-editor>\n```\n\nVaadin Rich Text Editor focuses on the structure, not the styling of content.\nTherefore, the semantic HTML5 tags such as <h1>, <strong> and <ul> are used,\nand CSS usage is limited to most common cases, like horizontal text alignment.\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute    | Description | Part name\n-------------|-------------|------------\n`disabled`   | Set to a disabled text editor | :host\n`readonly`   | Set to a readonly text editor | :host\n`on`         | Set to a toolbar button applied to the selected text | toolbar-button\n\nThe following shadow DOM parts are available for styling:\n\nPart name                            | Description\n-------------------------------------|----------------\n`content`                            | The content wrapper\n`toolbar`                            | The toolbar wrapper\n`toolbar-group`                      | The group for toolbar controls\n`toolbar-group-history`              | The group for histroy controls\n`toolbar-group-emphasis`             | The group for emphasis controls\n`toolbar-group-heading`              | The group for heading controls\n`toolbar-group-glyph-transformation` | The group for glyph transformation controls\n`toolbar-group-group-list`           | The group for group list controls\n`toolbar-group-alignment`            | The group for alignment controls\n`toolbar-group-rich-text`            | The group for rich text controls\n`toolbar-group-block`                | The group for preformatted block controls\n`toolbar-group-format`               | The group for format controls\n`toolbar-button`                     | The toolbar button (applies to all buttons)\n`toolbar-button-pressed`             | The toolbar button in pressed state (applies to all buttons)\n`toolbar-button-undo`                | The \"undo\" button\n`toolbar-button-redo`                | The \"redo\" button\n`toolbar-button-bold`                | The \"bold\" button\n`toolbar-button-italic`              | The \"italic\" button\n`toolbar-button-underline`           | The \"underline\" button\n`toolbar-button-strike`              | The \"strike-through\" button\n`toolbar-button-h1`                  | The \"header 1\" button\n`toolbar-button-h2`                  | The \"header 2\" button\n`toolbar-button-h3`                  | The \"header 3\" button\n`toolbar-button-subscript`           | The \"subscript\" button\n`toolbar-button-superscript`         | The \"superscript\" button\n`toolbar-button-list-ordered`        | The \"ordered list\" button\n`toolbar-button-list-bullet`         | The \"bullet list\" button\n`toolbar-button-align-left`          | The \"left align\" button\n`toolbar-button-align-center`        | The \"center align\" button\n`toolbar-button-align-right`         | The \"right align\" button\n`toolbar-button-image`               | The \"image\" button\n`toolbar-button-link`                | The \"link\" button\n`toolbar-button-blockquote`          | The \"blockquote\" button\n`toolbar-button-code-block`          | The \"code block\" button\n`toolbar-button-clean`               | The \"clean formatting\" button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-rich-text-editor>` is a Web Component for rich text editing.\nIt provides a set of toolbar controls to apply formatting on the content,\nwhich is stored and can be accessed as HTML5 or JSON string.\n\n```\n<vaadin-rich-text-editor></vaadin-rich-text-editor>\n```\n\nVaadin Rich Text Editor focuses on the structure, not the styling of content.\nTherefore, the semantic HTML5 tags such as <h1>, <strong> and <ul> are used,\nand CSS usage is limited to most common cases, like horizontal text alignment.\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute    | Description | Part name\n-------------|-------------|------------\n`disabled`   | Set to a disabled text editor | :host\n`readonly`   | Set to a readonly text editor | :host\n`on`         | Set to a toolbar button applied to the selected text | toolbar-button\n\nThe following shadow DOM parts are available for styling:\n\nPart name                            | Description\n-------------------------------------|----------------\n`content`                            | The content wrapper\n`toolbar`                            | The toolbar wrapper\n`toolbar-group`                      | The group for toolbar controls\n`toolbar-group-history`              | The group for histroy controls\n`toolbar-group-emphasis`             | The group for emphasis controls\n`toolbar-group-heading`              | The group for heading controls\n`toolbar-group-style`                | The group for style controls\n`toolbar-group-glyph-transformation` | The group for glyph transformation controls\n`toolbar-group-group-list`           | The group for group list controls\n`toolbar-group-alignment`            | The group for alignment controls\n`toolbar-group-rich-text`            | The group for rich text controls\n`toolbar-group-block`                | The group for preformatted block controls\n`toolbar-group-format`               | The group for format controls\n`toolbar-button`                     | The toolbar button (applies to all buttons)\n`toolbar-button-pressed`             | The toolbar button in pressed state (applies to all buttons)\n`toolbar-button-undo`                | The \"undo\" button\n`toolbar-button-redo`                | The \"redo\" button\n`toolbar-button-bold`                | The \"bold\" button\n`toolbar-button-italic`              | The \"italic\" button\n`toolbar-button-underline`           | The \"underline\" button\n`toolbar-button-strike`              | The \"strike-through\" button\n`toolbar-button-color`               | The \"color\" button\n`toolbar-button-background`          | The \"background\" button\n`toolbar-button-h1`                  | The \"header 1\" button\n`toolbar-button-h2`                  | The \"header 2\" button\n`toolbar-button-h3`                  | The \"header 3\" button\n`toolbar-button-subscript`           | The \"subscript\" button\n`toolbar-button-superscript`         | The \"superscript\" button\n`toolbar-button-list-ordered`        | The \"ordered list\" button\n`toolbar-button-list-bullet`         | The \"bullet list\" button\n`toolbar-button-align-left`          | The \"left align\" button\n`toolbar-button-align-center`        | The \"center align\" button\n`toolbar-button-align-right`         | The \"right align\" button\n`toolbar-button-image`               | The \"image\" button\n`toolbar-button-link`                | The \"link\" button\n`toolbar-button-blockquote`          | The \"blockquote\" button\n`toolbar-button-code-block`          | The \"code block\" button\n`toolbar-button-clean`               | The \"clean formatting\" button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "value",
@@ -86,6 +86,17 @@
                     "RichTextEditorI18n"
                   ]
                 }
+              },
+              {
+                "name": "colorOptions",
+                "description": "The list of colors used by the background and text color\nselection controls. Should contain an array of HEX strings.\n\nWhen user selects `#000000` (black) as a text color,\nor `#ffffff` (white) as a background color, it resets\nthe corresponding format for the selected text.",
+                "value": {
+                  "type": [
+                    "Array",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/rich-text-editor",
-  "version": "24.4.0-rc2",
+  "version": "24.5.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-rich-text-editor",
-          "description": "`<vaadin-rich-text-editor>` is a Web Component for rich text editing.\nIt provides a set of toolbar controls to apply formatting on the content,\nwhich is stored and can be accessed as HTML5 or JSON string.\n\n```\n<vaadin-rich-text-editor></vaadin-rich-text-editor>\n```\n\nVaadin Rich Text Editor focuses on the structure, not the styling of content.\nTherefore, the semantic HTML5 tags such as <h1>, <strong> and <ul> are used,\nand CSS usage is limited to most common cases, like horizontal text alignment.\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute    | Description | Part name\n-------------|-------------|------------\n`disabled`   | Set to a disabled text editor | :host\n`readonly`   | Set to a readonly text editor | :host\n`on`         | Set to a toolbar button applied to the selected text | toolbar-button\n\nThe following shadow DOM parts are available for styling:\n\nPart name                            | Description\n-------------------------------------|----------------\n`content`                            | The content wrapper\n`toolbar`                            | The toolbar wrapper\n`toolbar-group`                      | The group for toolbar controls\n`toolbar-group-history`              | The group for histroy controls\n`toolbar-group-emphasis`             | The group for emphasis controls\n`toolbar-group-heading`              | The group for heading controls\n`toolbar-group-glyph-transformation` | The group for glyph transformation controls\n`toolbar-group-group-list`           | The group for group list controls\n`toolbar-group-alignment`            | The group for alignment controls\n`toolbar-group-rich-text`            | The group for rich text controls\n`toolbar-group-block`                | The group for preformatted block controls\n`toolbar-group-format`               | The group for format controls\n`toolbar-button`                     | The toolbar button (applies to all buttons)\n`toolbar-button-pressed`             | The toolbar button in pressed state (applies to all buttons)\n`toolbar-button-undo`                | The \"undo\" button\n`toolbar-button-redo`                | The \"redo\" button\n`toolbar-button-bold`                | The \"bold\" button\n`toolbar-button-italic`              | The \"italic\" button\n`toolbar-button-underline`           | The \"underline\" button\n`toolbar-button-strike`              | The \"strike-through\" button\n`toolbar-button-h1`                  | The \"header 1\" button\n`toolbar-button-h2`                  | The \"header 2\" button\n`toolbar-button-h3`                  | The \"header 3\" button\n`toolbar-button-subscript`           | The \"subscript\" button\n`toolbar-button-superscript`         | The \"superscript\" button\n`toolbar-button-list-ordered`        | The \"ordered list\" button\n`toolbar-button-list-bullet`         | The \"bullet list\" button\n`toolbar-button-align-left`          | The \"left align\" button\n`toolbar-button-align-center`        | The \"center align\" button\n`toolbar-button-align-right`         | The \"right align\" button\n`toolbar-button-image`               | The \"image\" button\n`toolbar-button-link`                | The \"link\" button\n`toolbar-button-blockquote`          | The \"blockquote\" button\n`toolbar-button-code-block`          | The \"code block\" button\n`toolbar-button-clean`               | The \"clean formatting\" button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-rich-text-editor>` is a Web Component for rich text editing.\nIt provides a set of toolbar controls to apply formatting on the content,\nwhich is stored and can be accessed as HTML5 or JSON string.\n\n```\n<vaadin-rich-text-editor></vaadin-rich-text-editor>\n```\n\nVaadin Rich Text Editor focuses on the structure, not the styling of content.\nTherefore, the semantic HTML5 tags such as <h1>, <strong> and <ul> are used,\nand CSS usage is limited to most common cases, like horizontal text alignment.\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute    | Description | Part name\n-------------|-------------|------------\n`disabled`   | Set to a disabled text editor | :host\n`readonly`   | Set to a readonly text editor | :host\n`on`         | Set to a toolbar button applied to the selected text | toolbar-button\n\nThe following shadow DOM parts are available for styling:\n\nPart name                            | Description\n-------------------------------------|----------------\n`content`                            | The content wrapper\n`toolbar`                            | The toolbar wrapper\n`toolbar-group`                      | The group for toolbar controls\n`toolbar-group-history`              | The group for histroy controls\n`toolbar-group-emphasis`             | The group for emphasis controls\n`toolbar-group-heading`              | The group for heading controls\n`toolbar-group-style`                | The group for style controls\n`toolbar-group-glyph-transformation` | The group for glyph transformation controls\n`toolbar-group-group-list`           | The group for group list controls\n`toolbar-group-alignment`            | The group for alignment controls\n`toolbar-group-rich-text`            | The group for rich text controls\n`toolbar-group-block`                | The group for preformatted block controls\n`toolbar-group-format`               | The group for format controls\n`toolbar-button`                     | The toolbar button (applies to all buttons)\n`toolbar-button-pressed`             | The toolbar button in pressed state (applies to all buttons)\n`toolbar-button-undo`                | The \"undo\" button\n`toolbar-button-redo`                | The \"redo\" button\n`toolbar-button-bold`                | The \"bold\" button\n`toolbar-button-italic`              | The \"italic\" button\n`toolbar-button-underline`           | The \"underline\" button\n`toolbar-button-strike`              | The \"strike-through\" button\n`toolbar-button-color`               | The \"color\" button\n`toolbar-button-background`          | The \"background\" button\n`toolbar-button-h1`                  | The \"header 1\" button\n`toolbar-button-h2`                  | The \"header 2\" button\n`toolbar-button-h3`                  | The \"header 3\" button\n`toolbar-button-subscript`           | The \"subscript\" button\n`toolbar-button-superscript`         | The \"superscript\" button\n`toolbar-button-list-ordered`        | The \"ordered list\" button\n`toolbar-button-list-bullet`         | The \"bullet list\" button\n`toolbar-button-align-left`          | The \"left align\" button\n`toolbar-button-align-center`        | The \"center align\" button\n`toolbar-button-align-right`         | The \"right align\" button\n`toolbar-button-image`               | The \"image\" button\n`toolbar-button-link`                | The \"link\" button\n`toolbar-button-blockquote`          | The \"blockquote\" button\n`toolbar-button-code-block`          | The \"code block\" button\n`toolbar-button-clean`               | The \"clean formatting\" button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -47,6 +47,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".colorOptions",
+              "description": "The list of colors used by the background and text color\nselection controls. Should contain an array of HEX strings.\n\nWhen user selects `#000000` (black) as a text color,\nor `#ffffff` (white) as a background color, it resets\nthe corresponding format for the selected text.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@change",
               "description": "Fired when the user commits a value change.",