refactor!: update rich text editor color popup to use native popover (#9777)

sissbruecker · web-flow · commit 90df1724c7e4 · 2025-07-21T12:21:55.000+03:00
diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js b/packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js
@@ -176,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',
             ];
           },
         },
@@ -416,8 +416,8 @@ 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');
diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor-popup.js b/packages/rich-text-editor/src/vaadin-rich-text-editor-popup.js
@@ -33,7 +33,13 @@ class RichTextEditorPopup extends PolylitMixin(LitElement) {
   static get styles() {
     return css`
       :host {
-        display: none;
+        display: none !important;
+      }
+
+      :host([opened]),
+      :host([opening]),
+      :host([closing]) {
+        display: contents !important;
       }
     `;
   }
@@ -46,16 +52,13 @@ class RichTextEditorPopup extends PolylitMixin(LitElement) {
 
       opened: {
         type: Boolean,
+        reflectToAttribute: true,
         notify: true,
       },
 
       colors: {
         type: Array,
       },
-
-      renderer: {
-        type: Object,
-      },
     };
   }
 
@@ -67,16 +70,20 @@ class RichTextEditorPopup extends PolylitMixin(LitElement) {
   render() {
     return html`
       <vaadin-rich-text-editor-popup-overlay
-        .renderer="${this.renderer}"
+        popover="manual"
+        .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>
     `;
   }
 
@@ -98,19 +105,17 @@ class RichTextEditorPopup extends PolylitMixin(LitElement) {
 
   /** @private */
   __colorsChanged(colors) {
-    this.renderer = (root) => {
-      render(
-        html`
-          ${colors.map(
-            (color) => html`
-              <button data-color="${color}" style="background: ${color}" @click="${this._onColorClick}"></button>
-            `,
-          )}
-        `,
-        root,
-        { host: this },
-      );
-    };
+    render(
+      html`
+        ${colors.map(
+          (color) => html`
+            <button data-color="${color}" style="background: ${color}" @click="${this._onColorClick}"></button>
+          `,
+        )}
+      `,
+      this,
+      { host: this },
+    );
   }
 
   /** @private */
@@ -152,10 +157,46 @@ class RichTextEditorPopupOverlay extends PositionMixin(
     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>
     `;
   }
+
+  /**
+   * @protected
+   * @override
+   */
+  _attachOverlay() {
+    this.showPopover();
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  _detachOverlay() {
+    this.hidePopover();
+  }
+
+  /**
+   * 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);
diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor.js b/packages/rich-text-editor/src/vaadin-rich-text-editor.js
@@ -350,25 +350,13 @@ class RichTextEditor extends RichTextEditorMixin(
         <div class="announcer" aria-live="polite"></div>
       </div>
 
-      <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>
     `;
   }
 
@@ -380,11 +368,11 @@ class RichTextEditor extends RichTextEditorMixin(
   update(changedProperties) {
     super.update(changedProperties);
 
-    this.__renderLinkDialog();
+    this.__renderSlottedOverlays();
   }
 
   /** @private */
-  __renderLinkDialog() {
+  __renderSlottedOverlays() {
     render(
       html`
         <vaadin-confirm-dialog
@@ -409,6 +397,22 @@ class RichTextEditor extends RichTextEditorMixin(
             @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 },
diff --git a/packages/rich-text-editor/test/toolbar.test.js b/packages/rich-text-editor/test/toolbar.test.js
@@ -223,14 +223,14 @@ describe('toolbar controls', () => {
           let popup, overlay;
 
           beforeEach(() => {
-            popup = rte.shadowRoot.querySelector(`#${style}Popup`);
+            popup = rte.querySelector(`[slot="${style}-popup"]`);
             overlay = popup.shadowRoot.querySelector('vaadin-rich-text-editor-popup-overlay');
           });
 
           it(`should apply ${style} when clicking the "toolbar-button-${style}" and selecting value`, async () => {
             getButton(style).click();
             await oneEvent(overlay, 'vaadin-overlay-open');
-            const button = overlay.querySelectorAll('button')[1];
+            const button = popup.querySelectorAll('button')[1];
             button.click();
             editor.insertText(0, 'Foo', 'user');
             expect(editor.getFormat(0, 3)[style]).to.equal(button.dataset.color);
@@ -247,7 +247,7 @@ describe('toolbar controls', () => {
 
             // Default color (black) or background (white)
             const value = style === 'color' ? '#000000' : '#ffffff';
-            const button = overlay.querySelector(`[data-color="${value}"]`);
+            const button = popup.querySelector(`[data-color="${value}"]`);
             button.click();
             expect(editor.getFormat(0, 3)[style]).to.be.not.ok;
           });
@@ -280,10 +280,20 @@ describe('toolbar controls', () => {
             getButton(style).click();
             await oneEvent(overlay, 'vaadin-overlay-open');
 
-            const popup = document.querySelector('vaadin-rich-text-editor-popup-overlay');
             const button = popup.querySelectorAll('button')[1];
             expect(button.dataset.color).to.equal(rte.colorOptions[1]);
           });
+
+          it('should export all overlay parts for styling', () => {
+            const parts = [...overlay.shadowRoot.querySelectorAll('[part]')]
+              .map((el) => el.getAttribute('part'))
+              .filter((part) => part !== 'backdrop');
+            const exportParts = overlay.getAttribute('exportparts').split(', ');
+
+            parts.forEach((part) => {
+              expect(exportParts).to.include(part);
+            });
+          });
         });
       });
     });
