@vaadin/rich-text-editor 24.4.0-dev.b3e1d14600 → 24.5.0-alpha1

package/README.md

@@ -7,7 +7,6 @@ An input field web component for entering rich text.
 [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/rich-text-editor)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/rich-text-editor)](https://www.npmjs.com/package/@vaadin/rich-text-editor)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
 <vaadin-rich-text-editor></vaadin-rich-text-editor>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "24.4.0-dev.b3e1d14600",
+  "version": "24.5.0-alpha1",
   "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-dev.b3e1d14600",
-    "@vaadin/component-base": "24.4.0-dev.b3e1d14600",
-    "@vaadin/confirm-dialog": "24.4.0-dev.b3e1d14600",
-    "@vaadin/text-field": "24.4.0-dev.b3e1d14600",
-    "@vaadin/tooltip": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-material-styles": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.b3e1d14600",
+    "@vaadin/button": "24.5.0-alpha1",
+    "@vaadin/component-base": "24.5.0-alpha1",
+    "@vaadin/confirm-dialog": "24.5.0-alpha1",
+    "@vaadin/text-field": "24.5.0-alpha1",
+    "@vaadin/tooltip": "24.5.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/a11y-base": "24.4.0-dev.b3e1d14600",
+    "@vaadin/a11y-base": "24.5.0-alpha1",
     "@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": "502d4f5b03f770a83d270d98078cde230254dd0e"
+  "gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
 }

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.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -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';
@@ -25,7 +26,7 @@ import { richTextEditorStyles } from './vaadin-rich-text-editor-styles.js';
  *
  * ## Disclaimer
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
  */
 class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
@@ -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-content-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -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) => {
@@ -345,8 +402,9 @@ export const RichTextEditorMixin = (superClass) =>
       });
 
       editorContent.addEventListener('focus', () => {
-        // Format changed, but no value changed happened
-        if (this._toolbarState === STATE.CLICKED) {
+        // When editing link, editor gets focus while dialog is still open.
+        // Keep toolbar state as clicked in this case to fire change event.
+        if (this._toolbarState === STATE.CLICKED && !this._linkEditing) {
           this._cleanToolbarState();
         }
       });
@@ -366,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();
@@ -667,15 +728,50 @@ 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(/\s*ql-(?!align)[\w-]*\s*/gu, '');
+      content = content.replace(/class="([^"]*)"/gu, (match, group1) => {
+        const classes = group1.split(' ').filter((className) => {
+          return !className.startsWith('ql-') || className.startsWith('ql-align');
+        });
+        return `class="${classes.join(' ')}"`;
+      });
       // Remove meta spans, e.g. cursor which are empty after Quill classes removed
-      content = content.replace(/<\/?span[^>]*>/gu, '');
+      content = content.replace(/<span[^>]*><\/span>/gu, '');
 
       // Replace Quill align classes with inline styles
       [this.__dir === 'rtl' ? 'left' : 'right', 'center', 'justify'].forEach((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-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -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];