@vaadin/rich-text-editor 24.4.6 → 24.5.0-alpha10

package/README.md

@@ -53,7 +53,7 @@ import '@vaadin/rich-text-editor/src/vaadin-rich-text-editor.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "24.4.6",
+  "version": "24.5.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -41,29 +41,30 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "~24.4.6",
-    "@vaadin/component-base": "~24.4.6",
-    "@vaadin/confirm-dialog": "~24.4.6",
-    "@vaadin/text-field": "~24.4.6",
-    "@vaadin/tooltip": "~24.4.6",
-    "@vaadin/vaadin-lumo-styles": "~24.4.6",
-    "@vaadin/vaadin-material-styles": "~24.4.6",
-    "@vaadin/vaadin-themable-mixin": "~24.4.6",
+    "@vaadin/button": "24.5.0-alpha10",
+    "@vaadin/component-base": "24.5.0-alpha10",
+    "@vaadin/confirm-dialog": "24.5.0-alpha10",
+    "@vaadin/overlay": "24.5.0-alpha10",
+    "@vaadin/text-field": "24.5.0-alpha10",
+    "@vaadin/tooltip": "24.5.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/a11y-base": "~24.4.6",
-    "@vaadin/testing-helpers": "^0.6.0",
+    "@vaadin/a11y-base": "24.5.0-alpha10",
+    "@vaadin/chai-plugins": "24.5.0-alpha10",
+    "@vaadin/testing-helpers": "^1.0.0",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "gulp-iconfont": "^11.0.0",
-    "sinon": "^13.0.2"
+    "sinon": "^18.0.0"
   },
   "cvdlName": "vaadin-rich-text-editor",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "46d3cdb72eb99d544c7bb86c3de95043b9e5857f"
+  "gitHead": "6f9c37308031af872a98017bfab4de89aeacda51"
 }

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: '',
+        },
       };
     }
 
@@ -320,6 +368,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) => {
@@ -362,6 +419,9 @@ export const RichTextEditorMixin = (superClass) =>
       // Flush pending htmlValue only once the editor is fully initialized
       this.__flushPendingHtmlValue();
 
+      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();
@@ -663,13 +723,43 @@ 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');
       let content = editor.innerHTML;
 
       // Remove Quill classes, e.g. ql-syntax, except for align
-      content = content.replace(/class="([^"]*)"/gu, (match, group1) => {
+      content = content.replace(/class="([^"]*)"/gu, (_match, group1) => {
         const classes = group1.split(' ').filter((className) => {
           return !className.startsWith('ql-') || className.startsWith('ql-align');
         });

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>
     `;
   }