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

package/src/styles/vaadin-rich-text-editor-popup-overlay-base-styles.js

@@ -0,0 +1,43 @@
+/**
+ * @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 } from 'lit';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
+
+export const richTextEditorPopupOverlay = css`
+  [part='overlay'] {
+    padding: var(--vaadin-rich-text-editor-overlay-padding, var(--vaadin-padding-container));
+  }
+
+  [part='content'] {
+    display: grid;
+    gap: var(--vaadin-rich-text-editor-overlay-gap, var(--vaadin-gap-container-inline));
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
+  [part='content'] ::slotted(button) {
+    border: var(--vaadin-rich-text-editor-overlay-color-option-border-width, 1px) solid
+      var(--vaadin-rich-text-editor-overlay-color-option-border-color, transparent);
+    border-radius: var(--vaadin-rich-text-editor-overlay-color-option-border-radius, 9999px);
+    cursor: var(--vaadin-clickable-cursor);
+    font-size: var(--vaadin-rich-text-editor-overlay-color-option-font-size, inherit);
+    height: var(--vaadin-rich-text-editor-overlay-color-option-height, 1lh);
+    line-height: var(--vaadin-rich-text-editor-overlay-color-option-line-height, inherit);
+    padding: var(--vaadin-rich-text-editor-overlay-color-option-padding, 0);
+    width: var(--vaadin-rich-text-editor-overlay-color-option-width, 1lh);
+  }
+
+  [part='content'] ::slotted(button:focus-visible) {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: 1px;
+  }
+`;
+
+export const richTextEditorPopupOverlayStyles = [overlayStyles, richTextEditorPopupOverlay];

package/src/styles/vaadin-rich-text-editor-popup-overlay-core-styles.js

@@ -0,0 +1,13 @@
+/**
+ * @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 { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
+
+export const richTextEditorPopupOverlayStyles = [overlayStyles];

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

@@ -10,7 +10,6 @@
  */
 import '../vendor/vaadin-quill.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
-import { isFirefox } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 
@@ -177,7 +176,7 @@ export const RichTextEditorMixin = (superClass) =>
               '#ffffff', '#facccc', '#ffebcc', '#ffffcc', '#cce8cc', '#cce0f5', '#ebd6ff',
               '#bbbbbb', '#f06666', '#ffc266', '#ffff66', '#66b966', '#66a3e0', '#c285ff',
               '#888888', '#a10000', '#b26b00', '#b2b200', '#006100', '#0047b2', '#6b24b2',
-              '#444444', '#5c0000', '#663d00', '#666600', '#003700', '#002966', '#3d1466'
+              '#444444', '#5c0000', '#663d00', '#666600', '#003700', '#002966', '#3d1466',
             ];
           },
         },
@@ -352,11 +351,6 @@ export const RichTextEditorMixin = (superClass) =>
       this.__patchToolbar();
       this.__patchKeyboard();
 
-      /* c8 ignore next 3 */
-      if (isFirefox) {
-        this.__patchFirefoxFocus();
-      }
-
       this.__setDirection(this.__dir);
 
       const editorContent = editor.querySelector('.ql-editor');
@@ -422,13 +416,32 @@ export const RichTextEditorMixin = (superClass) =>
       // Flush pending htmlValue only once the editor is fully initialized
       this.__flushPendingHtmlValue();
 
-      this.$.backgroundPopup.target = this.shadowRoot.querySelector('#btn-background');
-      this.$.colorPopup.target = this.shadowRoot.querySelector('#btn-color');
+      this.querySelector('[slot="color-popup"]').target = this.shadowRoot.querySelector('#btn-color');
+      this.querySelector('[slot="background-popup"]').target = this.shadowRoot.querySelector('#btn-background');
+
+      // Set up tooltip to show when hovering or focusing toolbar buttons
+      this._tooltip = document.createElement('vaadin-tooltip');
+      this._tooltip.slot = 'tooltip';
+      // Create dummy aria target, as toolbar buttons already have aria-label, and also cannot be linked with the
+      // tooltip being in the light DOM
+      this._tooltip.ariaTarget = document.createElement('div');
+      this.append(this._tooltip);
+
+      const buttons = this.shadowRoot.querySelectorAll('[part~="toolbar-button"]');
+      buttons.forEach((button) => {
+        button.addEventListener('mouseenter', this.__showTooltip.bind(this));
+        button.addEventListener('focusin', this.__showTooltip.bind(this));
+      });
+    }
 
-      requestAnimationFrame(() => {
-        this.$.linkDialog.$.dialog.$.overlay.addEventListener('vaadin-overlay-open', () => {
-          this.$.linkUrl.focus();
-        });
+    /** @private */
+    __showTooltip(event) {
+      const target = event.target;
+      this._tooltip.target = target;
+      this._tooltip.text = target.ariaLabel;
+      this._tooltip._stateController.open({
+        focus: event.type === 'focusin',
+        hover: event.type === 'mouseenter',
       });
     }
 
@@ -512,69 +525,6 @@ export const RichTextEditorMixin = (superClass) =>
       this._toolbarState = STATE.DEFAULT;
     }
 
-    /** @private */
-    __createFakeFocusTarget() {
-      const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
-      const elem = document.createElement('textarea');
-      // Reset box model
-      elem.style.border = '0';
-      elem.style.padding = '0';
-      elem.style.margin = '0';
-      // Move element out of screen horizontally
-      elem.style.position = 'absolute';
-      elem.style[isRTL ? 'right' : 'left'] = '-9999px';
-      // Move element to the same position vertically
-      const yPosition = window.pageYOffset || document.documentElement.scrollTop;
-      elem.style.top = `${yPosition}px`;
-      return elem;
-    }
-
-    /** @private */
-    __patchFirefoxFocus() {
-      // In Firefox 63+ with native Shadow DOM, when moving focus out of
-      // contenteditable and back again within same shadow root, cursor
-      // disappears. See https://bugzilla.mozilla.org/show_bug.cgi?id=1496769
-      const editorContent = this.shadowRoot.querySelector('.ql-editor');
-      let isFake = false;
-
-      const focusFake = () => {
-        isFake = true;
-        this.__fakeTarget = this.__createFakeFocusTarget();
-        document.body.appendChild(this.__fakeTarget);
-        // Let the focus step out of shadow root!
-        this.__fakeTarget.focus();
-        return new Promise((resolve) => {
-          setTimeout(resolve);
-        });
-      };
-
-      const focusBack = (offsetNode, offset) => {
-        this._editor.focus();
-        if (offsetNode) {
-          this._editor.selection.setNativeRange(offsetNode, offset);
-        }
-        document.body.removeChild(this.__fakeTarget);
-        delete this.__fakeTarget;
-        isFake = false;
-      };
-
-      editorContent.addEventListener('mousedown', (e) => {
-        if (!this._editor.hasFocus()) {
-          const { x, y } = e;
-          const { offset, offsetNode } = document.caretPositionFromPoint(x, y);
-          focusFake().then(() => {
-            focusBack(offsetNode, offset);
-          });
-        }
-      });
-
-      editorContent.addEventListener('focusin', () => {
-        if (isFake === false) {
-          focusFake().then(() => focusBack());
-        }
-      });
-    }
-
     /** @private */
     __patchToolbar() {
       const toolbar = this._editor.getModule('toolbar');
@@ -721,7 +671,8 @@ export const RichTextEditorMixin = (superClass) =>
       if (e.keyCode === 13) {
         e.preventDefault();
         e.stopPropagation();
-        this.$.confirmLink.click();
+        this._onLinkEditConfirm();
+        this._closeLinkDialog();
       }
     }
 
@@ -868,10 +819,7 @@ export const RichTextEditorMixin = (superClass) =>
         timeOut.after(timeout),
         () => {
           const formatting = Array.from(this.shadowRoot.querySelectorAll('[part="toolbar"] .ql-active'))
-            .map((button) => {
-              const tooltip = this.shadowRoot.querySelector(`[for="${button.id}"]`);
-              return tooltip.text;
-            })
+            .map((button) => button.getAttribute('aria-label'))
             .join(', ');
           announcer.textContent = formatting;
         },

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

@@ -8,51 +8,83 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, render } 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 { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { RichTextEditorPopupMixin } from './vaadin-rich-text-editor-popup-mixin.js';
+import { richTextEditorPopupOverlayStyles } from './styles/vaadin-rich-text-editor-popup-overlay-core-styles.js';
 
 /**
  * An element used internally by `<vaadin-rich-text-editor>`. Not intended to be used separately.
  *
  * @customElement
  * @extends HTMLElement
- * @mixes RichTextEditorPopupMixin
  * @private
  */
-class RichTextEditorPopup extends RichTextEditorPopupMixin(PolylitMixin(LitElement)) {
+class RichTextEditorPopup extends PolylitMixin(LitElement) {
   static get is() {
     return 'vaadin-rich-text-editor-popup';
   }
 
   static get styles() {
     return css`
-      :host {
-        display: none;
+      :host([opened]),
+      :host([opening]),
+      :host([closing]) {
+        display: contents !important;
+      }
+
+      :host,
+      :host([hidden]) {
+        display: none !important;
       }
     `;
   }
 
+  static get properties() {
+    return {
+      target: {
+        type: Object,
+      },
+
+      opened: {
+        type: Boolean,
+        reflectToAttribute: true,
+        notify: true,
+      },
+
+      colors: {
+        type: Array,
+      },
+    };
+  }
+
+  static get observers() {
+    return ['__openedOrTargetChanged(opened, target)', '__colorsChanged(colors)'];
+  }
+
   /** @protected */
   render() {
     return html`
       <vaadin-rich-text-editor-popup-overlay
-        .renderer="${this.renderer}"
+        id="overlay"
+        .owner="${this}"
         .opened="${this.opened}"
         .positionTarget="${this.target}"
         no-vertical-overlap
         horizontal-align="start"
         vertical-align="top"
         focus-trap
+        exportparts="overlay, content"
         @opened-changed="${this._onOpenedChanged}"
         @vaadin-overlay-escape-press="${this._onOverlayEscapePress}"
-      ></vaadin-rich-text-editor-popup-overlay>
+      >
+        <slot></slot>
+      </vaadin-rich-text-editor-popup-overlay>
     `;
   }
 
@@ -60,6 +92,39 @@ class RichTextEditorPopup extends RichTextEditorPopupMixin(PolylitMixin(LitEleme
   _onOpenedChanged(event) {
     this.opened = event.detail.value;
   }
+
+  /** @private */
+  _onOverlayEscapePress() {
+    this.target.focus();
+  }
+
+  /** @private */
+  _onColorClick(e) {
+    const { color } = e.target.dataset;
+    this.dispatchEvent(new CustomEvent('color-selected', { detail: { color } }));
+  }
+
+  /** @private */
+  __colorsChanged(colors) {
+    render(
+      html`
+        ${colors.map(
+          (color) => html`
+            <button data-color="${color}" style="background: ${color}" @click="${this._onColorClick}"></button>
+          `,
+        )}
+      `,
+      this,
+      { host: this },
+    );
+  }
+
+  /** @private */
+  __openedOrTargetChanged(opened, target) {
+    if (target) {
+      target.setAttribute('aria-expanded', opened ? 'true' : 'false');
+    }
+  }
 }
 
 defineCustomElement(RichTextEditorPopup);
@@ -78,25 +143,44 @@ export { RichTextEditorPopup };
  * @private
  */
 class RichTextEditorPopupOverlay extends PositionMixin(
-  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
 ) {
   static get is() {
     return 'vaadin-rich-text-editor-popup-overlay';
   }
 
   static get styles() {
-    return overlayStyles;
+    return richTextEditorPopupOverlayStyles;
   }
 
   /** @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 part="content" id="content">
+          <slot></slot>
+        </div>
       </div>
     `;
   }
+
+  /**
+   * Override method from OverlayFocusMixin to use owner as content root
+   * @protected
+   * @override
+   */
+  get _contentRoot() {
+    return this.owner;
+  }
+
+  /**
+   * Override method from OverlayFocusMixin to use owner as modal root
+   * @protected
+   * @override
+   */
+  get _modalRoot() {
+    return this.owner;
+  }
 }
 
 defineCustomElement(RichTextEditorPopupOverlay);

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

@@ -29,7 +29,7 @@ export interface RichTextEditorEventMap extends HTMLElementEventMap, RichTextEdi
  * 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>
  * ```
  *