@vaadin/rich-text-editor 24.8.4 → 25.0.0-alpha10

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

@@ -13,22 +13,21 @@ 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 { html, LitElement, render } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { richTextEditorStyles } from './styles/vaadin-rich-text-editor-core-styles.js';
 import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
-import { richTextEditorStyles } from './vaadin-rich-text-editor-styles.js';
-
-registerStyles('vaadin-rich-text-editor', richTextEditorStyles, { moduleId: 'vaadin-rich-text-editor-styles' });
 
 /**
  * `<vaadin-rich-text-editor>` is a Web Component for rich text editing.
  * It provides a set of toolbar controls to apply formatting on the content,
  * which is stored and can be accessed as HTML5 or JSON string.
  *
- * ```
+ * ```html
  * <vaadin-rich-text-editor></vaadin-rich-text-editor>
  * ```
  *
@@ -101,37 +100,78 @@ registerStyles('vaadin-rich-text-editor', richTextEditorStyles, { moduleId: 'vaa
  * @mixes RichTextEditorMixin
  * @mixes ThemableMixin
  */
-class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(PolymerElement))) {
-  static get template() {
+class RichTextEditor extends RichTextEditorMixin(
+  ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
+) {
+  static get is() {
+    return 'vaadin-rich-text-editor';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-rich-text-editor';
+  }
+
+  static get styles() {
+    return richTextEditorStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div class="vaadin-rich-text-editor-container">
         <!-- Create toolbar container -->
         <div part="toolbar" role="toolbar">
           <span part="toolbar-group toolbar-group-history">
             <!-- Undo and Redo -->
-            <button id="btn-undo" type="button" part="toolbar-button toolbar-button-undo" on-click="_undo"></button>
-            <vaadin-tooltip for="btn-undo" text="[[__effectiveI18n.undo]]"></vaadin-tooltip>
+            <button
+              id="btn-undo"
+              type="button"
+              part="toolbar-button toolbar-button-undo"
+              aria-label="${this.__effectiveI18n.undo}"
+              @click="${this._undo}"
+            ></button>
 
-            <button id="btn-redo" type="button" part="toolbar-button toolbar-button-redo" on-click="_redo"></button>
-            <vaadin-tooltip for="btn-redo" text="[[__effectiveI18n.redo]]"></vaadin-tooltip>
+            <button
+              id="btn-redo"
+              type="button"
+              part="toolbar-button toolbar-button-redo"
+              aria-label="${this.__effectiveI18n.redo}"
+              @click="${this._redo}"
+            ></button>
           </span>
 
           <span part="toolbar-group toolbar-group-emphasis">
             <!-- Bold -->
-            <button id="btn-bold" class="ql-bold" part="toolbar-button toolbar-button-bold"></button>
-            <vaadin-tooltip for="btn-bold" text="[[__effectiveI18n.bold]]"></vaadin-tooltip>
+            <button
+              id="btn-bold"
+              class="ql-bold"
+              part="toolbar-button toolbar-button-bold"
+              aria-label="${this.__effectiveI18n.bold}"
+            ></button>
 
             <!-- Italic -->
-            <button id="btn-italic" class="ql-italic" part="toolbar-button toolbar-button-italic"></button>
-            <vaadin-tooltip for="btn-italic" text="[[__effectiveI18n.italic]]"></vaadin-tooltip>
+            <button
+              id="btn-italic"
+              class="ql-italic"
+              part="toolbar-button toolbar-button-italic"
+              aria-label="${this.__effectiveI18n.italic}"
+            ></button>
 
             <!-- Underline -->
-            <button id="btn-underline" class="ql-underline" part="toolbar-button toolbar-button-underline"></button>
-            <vaadin-tooltip for="btn-underline" text="[[__effectiveI18n.underline]]"></vaadin-tooltip>
+            <button
+              id="btn-underline"
+              class="ql-underline"
+              part="toolbar-button toolbar-button-underline"
+              aria-label="${this.__effectiveI18n.underline}"
+            ></button>
 
             <!-- Strike -->
-            <button id="btn-strike" class="ql-strike" part="toolbar-button toolbar-button-strike"></button>
-            <vaadin-tooltip for="btn-strike" text="[[__effectiveI18n.strike]]"></vaadin-tooltip>
+            <button
+              id="btn-strike"
+              class="ql-strike"
+              part="toolbar-button toolbar-button-strike"
+              aria-label="${this.__effectiveI18n.strike}"
+            ></button>
           </span>
 
           <span part="toolbar-group toolbar-group-style">
@@ -140,17 +180,17 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               id="btn-color"
               type="button"
               part="toolbar-button toolbar-button-color"
-              on-click="__onColorClick"
+              aria-label="${this.__effectiveI18n.color}"
+              @click="${this.__onColorClick}"
             ></button>
-            <vaadin-tooltip for="btn-color" text="[[__effectiveI18n.color]]"></vaadin-tooltip>
             <!-- Background -->
             <button
               id="btn-background"
               type="button"
               part="toolbar-button toolbar-button-background"
-              on-click="__onBackgroundClick"
+              aria-label="${this.__effectiveI18n.background}"
+              @click="${this.__onBackgroundClick}"
             ></button>
-            <vaadin-tooltip for="btn-background" text="[[__effectiveI18n.background]]"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-heading">
@@ -161,24 +201,24 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               class="ql-header"
               value="1"
               part="toolbar-button toolbar-button-h1"
+              aria-label="${this.__effectiveI18n.h1}"
             ></button>
-            <vaadin-tooltip for="btn-h1" text="[[__effectiveI18n.h1]]"></vaadin-tooltip>
             <button
               id="btn-h2"
               type="button"
               class="ql-header"
               value="2"
               part="toolbar-button toolbar-button-h2"
+              aria-label="${this.__effectiveI18n.h2}"
             ></button>
-            <vaadin-tooltip for="btn-h2" text="[[__effectiveI18n.h2]]"></vaadin-tooltip>
             <button
               id="btn-h3"
               type="button"
               class="ql-header"
               value="3"
               part="toolbar-button toolbar-button-h3"
+              aria-label="${this.__effectiveI18n.h3}"
             ></button>
-            <vaadin-tooltip for="btn-h3" text="[[__effectiveI18n.h3]]"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-glyph-transformation">
@@ -188,15 +228,15 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               class="ql-script"
               value="sub"
               part="toolbar-button toolbar-button-subscript"
+              aria-label="${this.__effectiveI18n.subscript}"
             ></button>
-            <vaadin-tooltip for="btn-subscript" text="[[__effectiveI18n.subscript]]"></vaadin-tooltip>
             <button
               id="btn-superscript"
               class="ql-script"
               value="super"
               part="toolbar-button toolbar-button-superscript"
+              aria-label="${this.__effectiveI18n.superscript}"
             ></button>
-            <vaadin-tooltip for="btn-superscript" text="[[__effectiveI18n.superscript]]"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-list">
@@ -207,16 +247,16 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               class="ql-list"
               value="ordered"
               part="toolbar-button toolbar-button-list-ordered"
+              aria-label="${this.__effectiveI18n.listOrdered}"
             ></button>
-            <vaadin-tooltip for="btn-ol" text="[[__effectiveI18n.listOrdered]]"></vaadin-tooltip>
             <button
               id="btn-ul"
               type="button"
               class="ql-list"
               value="bullet"
               part="toolbar-button toolbar-button-list-bullet"
+              aria-label="${this.__effectiveI18n.listBullet}"
             ></button>
-            <vaadin-tooltip for="btn-ul" text="[[__effectiveI18n.listBullet]]"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-alignment">
@@ -227,24 +267,24 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               class="ql-align"
               value=""
               part="toolbar-button toolbar-button-align-left"
+              aria-label="${this.__effectiveI18n.alignLeft}"
             ></button>
-            <vaadin-tooltip for="btn-left" text="[[__effectiveI18n.alignLeft]]"></vaadin-tooltip>
             <button
               id="btn-center"
               type="button"
               class="ql-align"
               value="center"
               part="toolbar-button toolbar-button-align-center"
+              aria-label="${this.__effectiveI18n.alignCenter}"
             ></button>
-            <vaadin-tooltip for="btn-center" text="[[__effectiveI18n.alignCenter]]"></vaadin-tooltip>
             <button
               id="btn-right"
               type="button"
               class="ql-align"
               value="right"
               part="toolbar-button toolbar-button-align-right"
+              aria-label="${this.__effectiveI18n.alignRight}"
             ></button>
-            <vaadin-tooltip for="btn-right" text="[[__effectiveI18n.alignRight]]"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-rich-text">
@@ -253,18 +293,18 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               id="btn-image"
               type="button"
               part="toolbar-button toolbar-button-image"
-              on-touchend="_onImageTouchEnd"
-              on-click="_onImageClick"
+              aria-label="${this.__effectiveI18n.image}"
+              @touchend="${this._onImageTouchEnd}"
+              @click="${this._onImageClick}"
             ></button>
-            <vaadin-tooltip for="btn-image" text="[[__effectiveI18n.image]]"></vaadin-tooltip>
             <!-- Link -->
             <button
               id="btn-link"
               type="button"
               part="toolbar-button toolbar-button-link"
-              on-click="_onLinkClick"
+              aria-label="${this.__effectiveI18n.link}"
+              @click="${this._onLinkClick}"
             ></button>
-            <vaadin-tooltip for="btn-link" text="[[__effectiveI18n.link]]"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-block">
@@ -274,29 +314,34 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               type="button"
               class="ql-blockquote"
               part="toolbar-button toolbar-button-blockquote"
+              aria-label="${this.__effectiveI18n.blockquote}"
             ></button>
-            <vaadin-tooltip for="btn-blockquote" text="[[__effectiveI18n.blockquote]]"></vaadin-tooltip>
             <!-- Code block -->
             <button
               id="btn-code"
               type="button"
               class="ql-code-block"
               part="toolbar-button toolbar-button-code-block"
+              aria-label="${this.__effectiveI18n.codeBlock}"
             ></button>
-            <vaadin-tooltip for="btn-code" text="[[__effectiveI18n.codeBlock]]"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-format">
             <!-- Clean -->
-            <button id="btn-clean" type="button" class="ql-clean" part="toolbar-button toolbar-button-clean"></button>
-            <vaadin-tooltip for="btn-clean" text="[[__effectiveI18n.clean]]"></vaadin-tooltip>
+            <button
+              id="btn-clean"
+              type="button"
+              class="ql-clean"
+              part="toolbar-button toolbar-button-clean"
+              aria-label="${this.__effectiveI18n.clean}"
+            ></button>
           </span>
 
           <input
             id="fileInput"
             type="file"
             accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon"
-            on-change="_uploadImage"
+            @change="${this._uploadImage}"
           />
         </div>
 
@@ -305,59 +350,106 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
         <div class="announcer" aria-live="polite"></div>
       </div>
 
-      <vaadin-confirm-dialog id="linkDialog" opened="{{_linkEditing}}" header="[[__effectiveI18n.linkDialogTitle]]">
-        <vaadin-text-field
-          id="linkUrl"
-          value="{{_linkUrl}}"
-          style="width: 100%;"
-          on-keydown="_onLinkKeydown"
-        ></vaadin-text-field>
-        <vaadin-button id="confirmLink" slot="confirm-button" theme="primary" on-click="_onLinkEditConfirm">
-          [[__effectiveI18n.ok]]
-        </vaadin-button>
-        <vaadin-button
-          id="removeLink"
-          slot="reject-button"
-          theme="error"
-          on-click="_onLinkEditRemove"
-          hidden$="[[!_linkRange]]"
-        >
-          [[__effectiveI18n.remove]]
-        </vaadin-button>
-        <vaadin-button id="cancelLink" slot="cancel-button" on-click="_onLinkEditCancel">
-          [[__effectiveI18n.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>
+      <slot name="tooltip"></slot>
+
+      <slot name="link-dialog"></slot>
+
+      <slot name="color-popup"></slot>
+
+      <slot name="background-popup"></slot>
     `;
   }
 
-  static get is() {
-    return 'vaadin-rich-text-editor';
+  /**
+   * Override update to render slotted overlays into light DOM after rendering shadow DOM.
+   * @param changedProperties
+   * @protected
+   */
+  update(changedProperties) {
+    super.update(changedProperties);
+
+    this.__renderSlottedOverlays();
   }
 
-  static get cvdlName() {
-    return 'vaadin-rich-text-editor';
+  /** @private */
+  __renderSlottedOverlays() {
+    render(
+      html`
+        <vaadin-confirm-dialog
+          slot="link-dialog"
+          cancel-button-visible
+          reject-theme="error"
+          .opened="${this._linkEditing}"
+          .header="${this.__effectiveI18n.linkDialogTitle}"
+          .confirmText="${this.__effectiveI18n.ok}"
+          .rejectText="${this.__effectiveI18n.remove}"
+          .cancelText="${this.__effectiveI18n.cancel}"
+          .rejectButtonVisible="${!!this._linkRange}"
+          @confirm="${this._onLinkEditConfirm}"
+          @cancel="${this._onLinkEditCancel}"
+          @reject="${this._onLinkEditRemove}"
+          @opened-changed="${this._onLinkEditingChanged}"
+        >
+          <vaadin-text-field
+            .value="${this._linkUrl}"
+            style="width: 100%;"
+            @keydown="${this._onLinkKeydown}"
+            @value-changed="${this._onLinkUrlChanged}"
+          ></vaadin-text-field>
+        </vaadin-confirm-dialog>
+
+        <vaadin-rich-text-editor-popup
+          slot="color-popup"
+          .colors="${this.colorOptions}"
+          .opened="${this._colorEditing}"
+          @color-selected="${this.__onColorSelected}"
+          @opened-changed="${this.__onColorEditingChanged}"
+        ></vaadin-rich-text-editor-popup>
+
+        <vaadin-rich-text-editor-popup
+          slot="background-popup"
+          .colors="${this.colorOptions}"
+          .opened="${this._backgroundEditing}"
+          @color-selected="${this.__onBackgroundSelected}"
+          @opened-changed="${this.__onBackgroundEditingChanged}"
+        ></vaadin-rich-text-editor-popup>
+      `,
+      this,
+      { host: this },
+    );
   }
 
-  /**
-   * Fired when the user commits a value change.
-   *
-   * @event change
-   */
+  /** @private */
+  __onBackgroundEditingChanged(event) {
+    this._backgroundEditing = event.detail.value;
+  }
+
+  /** @private */
+  __onColorEditingChanged(event) {
+    this._colorEditing = event.detail.value;
+  }
+
+  /** @private */
+  _onLinkEditingChanged(event) {
+    // Autofocus the URL field when the dialog opens
+    if (event.detail.value) {
+      const confirmDialog = event.target;
+      const urlField = confirmDialog.querySelector('vaadin-text-field');
+      confirmDialog.$.overlay.addEventListener(
+        'vaadin-overlay-open',
+        () => {
+          urlField.focus();
+        },
+        { once: true },
+      );
+    }
+    this._linkEditing = event.detail.value;
+  }
+
+  /** @private */
+  _onLinkUrlChanged(event) {
+    this._linkUrl = event.detail.value;
+  }
 }
 
 defineCustomElement(RichTextEditor);

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

@@ -122,12 +122,14 @@ const richTextEditor = css`
   }
 
   [part~='toolbar-button-background']:hover::before {
-    background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)),
+    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)),
+    background-image:
+      linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)),
       linear-gradient(var(--lumo-contrast-10pct), var(--lumo-contrast-10pct));
   }
 
@@ -198,12 +200,11 @@ const richTextEditor = css`
   }
 
   [part~='toolbar-button-link']::before {
-    font-family: 'vaadin-rte-icons';
-    font-size: var(--lumo-icon-size-m);
+    content: var(--lumo-icons-link);
   }
 
   [part~='toolbar-button-clean']::before {
-    font-family: 'vaadin-rte-icons';
+    content: var(--lumo-icons-clean);
     font-size: var(--lumo-font-size-l);
   }
 

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/rich-text-editor",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "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-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.",
+          "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```html\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",
@@ -100,10 +100,6 @@
               }
             ],
             "events": [
-              {
-                "name": "change",
-                "description": "Fired when the user commits a value change."
-              },
               {
                 "name": "value-changed",
                 "description": "Fired when the `value` property changes."

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/rich-text-editor",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "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-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.",
+          "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```html\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": [
             {
@@ -54,13 +54,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": "@change",
-              "description": "Fired when the user commits a value change.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": "@value-changed",
               "description": "Fired when the `value` property changes.",

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

@@ -1,91 +0,0 @@
-/**
- * @license
- * Copyright (c) 2000 - 2025 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);