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

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

@@ -13,20 +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 { html, LitElement } from 'lit';
+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 { 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';
 
 /**
  * `<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>
  * ```
  *
@@ -99,7 +100,9 @@ import { richTextEditorStyles } from './vaadin-rich-text-editor-styles.js';
  * @mixes RichTextEditorMixin
  * @mixes ThemableMixin
  */
-class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class RichTextEditor extends RichTextEditorMixin(
+  ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-rich-text-editor';
   }
@@ -124,35 +127,51 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               id="btn-undo"
               type="button"
               part="toolbar-button toolbar-button-undo"
+              aria-label="${this.__effectiveI18n.undo}"
               @click="${this._undo}"
             ></button>
-            <vaadin-tooltip for="btn-undo" .text="${this.__effectiveI18n.undo}"></vaadin-tooltip>
 
             <button
               id="btn-redo"
               type="button"
               part="toolbar-button toolbar-button-redo"
+              aria-label="${this.__effectiveI18n.redo}"
               @click="${this._redo}"
             ></button>
-            <vaadin-tooltip for="btn-redo" .text="${this.__effectiveI18n.redo}"></vaadin-tooltip>
           </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="${this.__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="${this.__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="${this.__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="${this.__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">
@@ -161,17 +180,17 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               id="btn-color"
               type="button"
               part="toolbar-button toolbar-button-color"
+              aria-label="${this.__effectiveI18n.color}"
               @click="${this.__onColorClick}"
             ></button>
-            <vaadin-tooltip for="btn-color" .text="${this.__effectiveI18n.color}"></vaadin-tooltip>
             <!-- Background -->
             <button
               id="btn-background"
               type="button"
               part="toolbar-button toolbar-button-background"
+              aria-label="${this.__effectiveI18n.background}"
               @click="${this.__onBackgroundClick}"
             ></button>
-            <vaadin-tooltip for="btn-background" .text="${this.__effectiveI18n.background}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-heading">
@@ -182,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="${this.__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="${this.__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="${this.__effectiveI18n.h3}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-glyph-transformation">
@@ -209,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="${this.__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="${this.__effectiveI18n.superscript}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-list">
@@ -228,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="${this.__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="${this.__effectiveI18n.listBullet}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-alignment">
@@ -248,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="${this.__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="${this.__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="${this.__effectiveI18n.alignRight}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-rich-text">
@@ -274,18 +293,18 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               id="btn-image"
               type="button"
               part="toolbar-button toolbar-button-image"
+              aria-label="${this.__effectiveI18n.image}"
               @touchend="${this._onImageTouchEnd}"
               @click="${this._onImageClick}"
             ></button>
-            <vaadin-tooltip for="btn-image" .text="${this.__effectiveI18n.image}"></vaadin-tooltip>
             <!-- Link -->
             <button
               id="btn-link"
               type="button"
               part="toolbar-button toolbar-button-link"
+              aria-label="${this.__effectiveI18n.link}"
               @click="${this._onLinkClick}"
             ></button>
-            <vaadin-tooltip for="btn-link" .text="${this.__effectiveI18n.link}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-block">
@@ -295,22 +314,27 @@ 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="${this.__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="${this.__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="${this.__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
@@ -326,54 +350,75 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
         <div class="announcer" aria-live="polite"></div>
       </div>
 
-      <vaadin-confirm-dialog
-        id="linkDialog"
-        .opened="${this._linkEditing}"
-        .header="${this.__effectiveI18n.linkDialogTitle}"
-        @opened-changed="${this._onLinkEditingChanged}"
-      >
-        <vaadin-text-field
-          id="linkUrl"
-          .value="${this._linkUrl}"
-          style="width: 100%;"
-          @keydown="${this._onLinkKeydown}"
-          @value-changed="${this._onLinkUrlChanged}"
-        ></vaadin-text-field>
-        <vaadin-button id="confirmLink" slot="confirm-button" theme="primary" @click="${this._onLinkEditConfirm}">
-          ${this.__effectiveI18n.ok}
-        </vaadin-button>
-        <vaadin-button
-          id="removeLink"
-          slot="reject-button"
-          theme="error"
-          @click="${this._onLinkEditRemove}"
-          ?hidden="${!this._linkRange}"
-        >
-          ${this.__effectiveI18n.remove}
-        </vaadin-button>
-        <vaadin-button id="cancelLink" slot="cancel-button" @click="${this._onLinkEditCancel}">
-          ${this.__effectiveI18n.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>
+      <slot name="tooltip"></slot>
+
+      <slot name="link-dialog"></slot>
+
+      <slot name="color-popup"></slot>
+
+      <slot name="background-popup"></slot>
     `;
   }
 
+  /**
+   * Override update to render slotted overlays into light DOM after rendering shadow DOM.
+   * @param changedProperties
+   * @protected
+   */
+  update(changedProperties) {
+    super.update(changedProperties);
+
+    this.__renderSlottedOverlays();
+  }
+
+  /** @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 },
+    );
+  }
+
   /** @private */
   __onBackgroundEditingChanged(event) {
     this._backgroundEditing = event.detail.value;
@@ -386,6 +431,18 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
 
   /** @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;
   }
 

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": "25.0.0-alpha1",
+  "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",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/rich-text-editor",
-  "version": "25.0.0-alpha1",
+  "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": [
             {

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

@@ -1,118 +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, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-export const contentStyles = css`
-  [part='content'] {
-    box-sizing: border-box;
-    position: relative;
-    flex: auto;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  /*
-    Quill core styles.
-    CSS selectors removed: margin & padding reset, check list, indentation, video, colors, ordered & unordered list, h1-6, anchor
-  */
-  .ql-clipboard {
-    left: -100000px;
-    height: 1px;
-    overflow-y: hidden;
-    position: absolute;
-    top: 50%;
-  }
-
-  .ql-clipboard p {
-    margin: 0;
-    padding: 0;
-  }
-
-  .ql-editor {
-    box-sizing: border-box;
-    line-height: 1.42;
-    height: 100%;
-    outline: none;
-    overflow-y: auto;
-    padding: 0.75em 1em;
-    -moz-tab-size: 4;
-    tab-size: 4;
-    text-align: left;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    flex: 1;
-  }
-
-  .ql-editor > * {
-    cursor: text;
-  }
-
-  .ql-align-left {
-    text-align: left;
-  }
-
-  .ql-direction-rtl {
-    direction: rtl;
-    text-align: inherit;
-  }
-
-  .ql-align-center {
-    text-align: center;
-  }
-
-  .ql-align-justify {
-    text-align: justify;
-  }
-
-  .ql-align-right {
-    text-align: right;
-  }
-  /* quill core end */
-
-  blockquote {
-    border-left: 0.25em solid #ccc;
-    margin-bottom: 0.3125em;
-    margin-top: 0.3125em;
-    padding-left: 1em;
-  }
-
-  code,
-  pre {
-    background-color: #f0f0f0;
-    border-radius: 0.1875em;
-  }
-
-  pre {
-    white-space: pre-wrap;
-    margin-bottom: 0.3125em;
-    margin-top: 0.3125em;
-    padding: 0.3125em 0.625em;
-  }
-
-  code {
-    font-size: 85%;
-    padding: 0.125em 0.25em;
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  /* RTL specific styles */
-  :host([dir='rtl']) .ql-editor {
-    direction: rtl;
-    text-align: right;
-  }
-`;
-
-// Register a module with ID for backwards compatibility.
-registerStyles('', contentStyles, { moduleId: 'vaadin-rich-text-editor-content-styles' });