@vaadin/rich-text-editor 25.0.0-alpha2 → 25.0.0-alpha21

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

@@ -13,36 +13,37 @@ 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 { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 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-base-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>
  * ```
  *
  * Vaadin Rich Text Editor focuses on the structure, not the styling of content.
- * Therefore, the semantic HTML5 tags such as <h1>, <strong> and <ul> are used,
+ * Therefore, the semantic HTML5 tags such as `<h1>`, `<strong>` and `<ul>` are used,
  * and CSS usage is limited to most common cases, like horizontal text alignment.
  *
  * ### Styling
  *
  * The following state attributes are available for styling:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `disabled`   | Set to a disabled text editor | :host
- * `readonly`   | Set to a readonly text editor | :host
- * `on`         | Set to a toolbar button applied to the selected text | toolbar-button
+ * Attribute    | Description
+ * -------------|------------------------------
+ * `disabled`   | Set to a disabled text editor
+ * `readonly`   | Set to a readonly text editor
  *
  * The following shadow DOM parts are available for styling:
  *
@@ -51,12 +52,13 @@ import { richTextEditorStyles } from './vaadin-rich-text-editor-styles.js';
  * `content`                            | The content wrapper
  * `toolbar`                            | The toolbar wrapper
  * `toolbar-group`                      | The group for toolbar controls
- * `toolbar-group-history`              | The group for histroy controls
+ * `toolbar-group-history`              | The group for history controls
  * `toolbar-group-emphasis`             | The group for emphasis controls
  * `toolbar-group-heading`              | The group for heading controls
  * `toolbar-group-style`                | The group for style controls
  * `toolbar-group-glyph-transformation` | The group for glyph transformation controls
- * `toolbar-group-group-list`           | The group for group list controls
+ * `toolbar-group-list`                 | The group for list controls
+ * `toolbar-group-indent`               | The group for indentation controls
  * `toolbar-group-alignment`            | The group for alignment controls
  * `toolbar-group-rich-text`            | The group for rich text controls
  * `toolbar-group-block`                | The group for preformatted block controls
@@ -78,6 +80,8 @@ import { richTextEditorStyles } from './vaadin-rich-text-editor-styles.js';
  * `toolbar-button-superscript`         | The "superscript" button
  * `toolbar-button-list-ordered`        | The "ordered list" button
  * `toolbar-button-list-bullet`         | The "bullet list" button
+ * `toolbar-button-outdent`             | The "decrease indentation" button
+ * `toolbar-button-indent`              | The "increase indentation" button
  * `toolbar-button-align-left`          | The "left align" button
  * `toolbar-button-align-center`        | The "center align" button
  * `toolbar-button-align-right`         | The "right align" button
@@ -99,7 +103,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';
   }
@@ -112,6 +118,12 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
     return richTextEditorStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`
@@ -124,35 +136,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 +189,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 +210,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 +237,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 +256,37 @@ 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>
+          </span>
+
+          <span part="toolbar-group toolbar-group-indent">
+            <!-- Decrease -->
+            <button
+              id="btn-outdent"
+              type="button"
+              class="ql-indent"
+              value="-1"
+              part="toolbar-button toolbar-button-outdent"
+              aria-label="${this.__effectiveI18n.outdent}"
+            ></button>
+            <!-- Increase -->
+            <button
+              id="btn-indent"
+              type="button"
+              class="ql-indent"
+              value="+1"
+              part="toolbar-button toolbar-button-indent"
+              aria-label="${this.__effectiveI18n.indent}"
             ></button>
-            <vaadin-tooltip for="btn-ul" text="${this.__effectiveI18n.listBullet}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-alignment">
@@ -248,24 +297,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 +323,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 +344,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 +380,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 +461,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({ focusVisible: isKeyboardActive() });
+        },
+        { once: true },
+      );
+    }
     this._linkEditing = event.detail.value;
   }
 

package/vaadin-rich-text-editor.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-rich-text-editor.js';
+import './src/vaadin-rich-text-editor.js';
 export * from './src/vaadin-rich-text-editor.js';