refactor(editor): group and expose parameters of createButtonPopper (#10999)

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/frame-order-button.ts

@@ -29,14 +29,12 @@ export class EdgelessFrameOrderButton extends WithDisposable(LitElement) {
   }
 
   override firstUpdated() {
-    this._edgelessFrameOrderPopper = createButtonPopper(
+    this._edgelessFrameOrderPopper = createButtonPopper({
-      this._edgelessFrameOrderButton,
+      reference: this._edgelessFrameOrderButton,
-      this._edgelessFrameOrderMenu,
+      popperElement: this._edgelessFrameOrderMenu,
-      ({ display }) => this.setPopperShow(display === 'show'),
+      stateUpdated: ({ display }) => this.setPopperShow(display === 'show'),
-      {
+      mainAxis: 22,
-        mainAxis: 22,
+    });
-      }
-    );
   }
 
   protected override render() {

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/navigator-setting-button.ts

@@ -96,14 +96,12 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
   }
 
   override firstUpdated() {
-    this._navigatorSettingPopper = createButtonPopper(
+    this._navigatorSettingPopper = createButtonPopper({
-      this._navigatorSettingButton,
+      reference: this._navigatorSettingButton,
-      this._navigatorSettingMenu,
+      popperElement: this._navigatorSettingMenu,
-      ({ display }) => this.setPopperShow(display === 'show'),
+      stateUpdated: ({ display }) => this.setPopperShow(display === 'show'),
-      {
+      mainAxis: 22,
-        mainAxis: 22,
+    });
-      }
-    );
   }
 
   override render() {

blocksuite/affine/components/src/toolbar/menu-button.ts

@@ -1,5 +1,8 @@
 import { PANEL_BASE } from '@blocksuite/affine-shared/styles';
-import { createButtonPopper } from '@blocksuite/affine-shared/utils';
+import {
+  type ButtonPopperOptions,
+  createButtonPopper,
+} from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/lit';
 import {
   css,
@@ -25,13 +28,12 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
   private _popper!: ReturnType<typeof createButtonPopper>;
 
   override firstUpdated() {
-    this._popper = createButtonPopper(
+    this._popper = createButtonPopper({
-      this._trigger,
+      reference: this._trigger,
-      this._content,
+      popperElement: this._content,
-      ({ display }) => {
+      stateUpdated: ({ display }) => {
         const opened = display === 'show';
         this._trigger.showTooltip = !opened;
-
         this.dispatchEvent(
           new CustomEvent('toggle', {
             detail: opened,
@@ -41,12 +43,11 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
           })
         );
       },
-      {
+      mainAxis: 12,
-        mainAxis: 12,
+      ignoreShift: true,
-        ignoreShift: true,
+      offsetHeight: 6 * 4,
-        offsetHeight: 6 * 4,
+      ...this.popperOptions,
-      }
+    });
-    );
     this._disposables.addFromEvent(this, 'keydown', (e: KeyboardEvent) => {
       e.stopPropagation();
       if (e.key === 'Escape') {
@@ -93,6 +94,9 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
 
   @property({ attribute: false })
   accessor contentPadding: string | undefined = undefined;
+
+  @property({ attribute: false })
+  accessor popperOptions: Partial<ButtonPopperOptions> = {};
 }
 
 export class EditorMenuContent extends LitElement {

blocksuite/affine/fragments/fragment-frame-panel/src/header/frame-panel-header.ts

@@ -172,17 +172,15 @@ export class FramePanelHeader extends WithDisposable(LitElement) {
   override firstUpdated() {
     const disposables = this.disposables;
 
-    this._framesSettingMenuPopper = createButtonPopper(
+    this._framesSettingMenuPopper = createButtonPopper({
-      this._frameSettingButton,
+      reference: this._frameSettingButton,
-      this._frameSettingMenu,
+      popperElement: this._frameSettingMenu,
-      ({ display }) => {
+      stateUpdated: ({ display }) => {
         this._settingPopperShow = display === 'show';
       },
-      {
+      mainAxis: 14,
-        mainAxis: 14,
+      crossAxis: -100,
-        crossAxis: -100,
+    });
-      }
-    );
     disposables.add(this._framesSettingMenuPopper);
   }
 

blocksuite/affine/fragments/fragment-outline/src/card/outline-card.ts

@@ -152,17 +152,15 @@ export class OutlineNoteCard extends SignalWatcher(
   }
 
   override firstUpdated() {
-    this._displayModePopper = createButtonPopper(
+    this._displayModePopper = createButtonPopper({
-      this._displayModeButtonGroup,
+      reference: this._displayModeButtonGroup,
-      this._displayModePanel,
+      popperElement: this._displayModePanel,
-      ({ display }) => {
+      stateUpdated: ({ display }) => {
         this._showPopper$.value = display === 'show';
       },
-      {
+      mainAxis: 0,
-        mainAxis: 0,
+      crossAxis: -60,
-        crossAxis: -60,
+    });
-      }
-    );
 
     this.disposables.add(this._displayModePopper);
   }

blocksuite/affine/fragments/fragment-outline/src/header/outline-panel-header.ts

@@ -22,17 +22,15 @@ export class OutlinePanelHeader extends SignalWatcher(
   private readonly _settingPopperShow$ = signal(false);
 
   override firstUpdated() {
-    this._notePreviewSettingMenuPopper = createButtonPopper(
+    this._notePreviewSettingMenuPopper = createButtonPopper({
-      this._noteSettingButton,
+      reference: this._noteSettingButton,
-      this._notePreviewSettingMenu,
+      popperElement: this._notePreviewSettingMenu,
-      ({ display }) => {
+      stateUpdated: ({ display }) => {
         this._settingPopperShow$.value = display === 'show';
       },
-      {
+      mainAxis: 14,
-        mainAxis: 14,
+      crossAxis: -30,
-        crossAxis: -30,
+    });
-      }
-    );
     this.disposables.add(this._notePreviewSettingMenuPopper);
   }
 

blocksuite/affine/shared/src/utils/button-popper.ts

@@ -32,6 +32,17 @@ export function listenClickAway(
 type Display = 'show' | 'hidden';
 
 const ATTR_SHOW = 'data-show';
+
+export type ButtonPopperOptions = {
+  reference: HTMLElement;
+  popperElement: HTMLElement;
+  stateUpdated?: (state: { display: Display }) => void;
+  mainAxis?: number;
+  crossAxis?: number;
+  rootBoundary?: Rect | (() => Rect | undefined);
+  ignoreShift?: boolean;
+  offsetHeight?: number;
+};
 /**
  * Using attribute 'data-show' to control popper visibility.
  *
@@ -44,28 +55,19 @@ const ATTR_SHOW = 'data-show';
  * }
  * ```
  */
-export function createButtonPopper(
+export function createButtonPopper(options: ButtonPopperOptions) {
-  reference: HTMLElement,
+  let display: Display = 'hidden';
-  popperElement: HTMLElement,
+  let cleanup: (() => void) | void;
-  stateUpdated: (state: { display: Display }) => void = () => {
+  const {
-    /** DEFAULT EMPTY FUNCTION */
+    reference,
-  },
+    popperElement,
-  {
+    stateUpdated = () => {},
     mainAxis,
     crossAxis,
     rootBoundary,
     ignoreShift,
     offsetHeight,
-  }: {
+  } = options;
-    mainAxis?: number;
-    crossAxis?: number;
-    rootBoundary?: Rect | (() => Rect | undefined);
-    ignoreShift?: boolean;
-    offsetHeight?: number;
-  } = {}
-) {
-  let display: Display = 'hidden';
-  let cleanup: (() => void) | void;
 
   const originMaxHeight = window.getComputedStyle(popperElement).maxHeight;
 

packages/frontend/core/src/blocksuite/ai/components/copy-more.ts

@@ -146,15 +146,14 @@ export class ChatCopyMore extends WithDisposable(LitElement) {
         this._morePopper?.dispose();
         this._morePopper = null;
       } else if (!this._morePopper) {
-        this._morePopper = createButtonPopper(
+        this._morePopper = createButtonPopper({
-          this._moreButton,
+          reference: this._moreButton,
-          this._moreMenu,
+          popperElement: this._moreMenu,
-          ({ display }) => (this._showMoreMenu = display === 'show'),
+          stateUpdated: ({ display }) =>
-          {
+            (this._showMoreMenu = display === 'show'),
-            mainAxis: 0,
+          mainAxis: 0,
-            crossAxis: -100,
+          crossAxis: -100,
-          }
+        });
-        );
       }
     }
   }