refactor(editor): extract common components (#9277)

blocksuite/affine/components/src/context-menu/index.ts

@@ -1,16 +1,19 @@
-import { MenuButton, MobileMenuButton } from './button.js';
-import { MenuInput, MobileMenuInput } from './input.js';
-import { MenuComponent, MobileMenuComponent } from './menu-renderer.js';
-import { MenuSubMenu, MobileSubMenu } from './sub-menu.js';
+import { MenuButton, MobileMenuButton } from './button';
+import { MenuInput, MobileMenuInput } from './input';
+import { MenuDivider } from './menu-divider';
+import { MenuComponent, MobileMenuComponent } from './menu-renderer';
+import { MenuSubMenu, MobileSubMenu } from './sub-menu';
 
-export * from './button.js';
-export * from './focusable.js';
-export * from './group.js';
-export * from './input.js';
-export * from './item.js';
-export * from './menu.js';
-export * from './menu-renderer.js';
-export * from './sub-menu.js';
+export * from './button';
+export * from './focusable';
+export * from './group';
+export * from './input';
+export * from './item';
+export * from './menu';
+export * from './menu-all';
+export * from './menu-divider';
+export * from './menu-renderer';
+export * from './sub-menu';
 
 export function effects() {
   customElements.define('affine-menu', MenuComponent);
@@ -21,6 +24,7 @@ export function effects() {
   customElements.define('mobile-menu-input', MobileMenuInput);
   customElements.define('affine-menu-sub-menu', MenuSubMenu);
   customElements.define('mobile-sub-menu', MobileSubMenu);
+  customElements.define('menu-divider', MenuDivider);
 }
 
 export * from './types.js';

blocksuite/affine/components/src/context-menu/menu-all.ts

@@ -0,0 +1,14 @@
+import { menuButtonItems } from './button';
+import { menuDynamicItems } from './dynamic';
+import { menuGroupItems } from './group';
+import { menuInputItems } from './input';
+import { subMenuItems } from './sub-menu';
+import type { MenuItemRender } from './types';
+
+export const menu = {
+  ...menuButtonItems,
+  ...subMenuItems,
+  ...menuInputItems,
+  ...menuGroupItems,
+  ...menuDynamicItems,
+} satisfies Record<string, MenuItemRender<never>>;

blocksuite/affine/components/src/context-menu/menu-divider.ts

@@ -0,0 +1,50 @@
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+// FIXME: horizontal
+export class MenuDivider extends LitElement {
+  static override styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    .divider {
+      background-color: var(--affine-border-color);
+    }
+
+    .divider.vertical {
+      width: 1px;
+      height: 100%;
+      margin: 0 var(--divider-margin);
+    }
+
+    .divider.horizontal {
+      width: 100%;
+      height: 1px;
+      margin: var(--divider-margin) 0;
+    }
+  `;
+
+  override render() {
+    const dividerStyles = styleMap({
+      '--divider-margin': `${this.dividerMargin}px`,
+    });
+    return html`<div
+      class="divider ${this.vertical ? 'vertical' : 'horizontal'}"
+      style=${dividerStyles}
+    ></div>`;
+  }
+
+  @property({ attribute: false })
+  accessor dividerMargin = 7;
+
+  @property({ attribute: false })
+  accessor vertical = false;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'menu-divider': MenuDivider;
+  }
+}

blocksuite/affine/components/src/context-menu/menu.ts

@@ -2,23 +2,9 @@ import { IS_MOBILE } from '@blocksuite/global/env';
 import { computed, signal } from '@preact/signals-core';
 import type { TemplateResult } from 'lit';
 
-import { menuButtonItems } from './button.js';
-import { menuDynamicItems } from './dynamic.js';
 import { MenuFocusable } from './focusable.js';
-import { menuGroupItems } from './group.js';
-import { menuInputItems } from './input.js';
-// eslint-disable-next-line
-import { MenuComponent, MobileMenuComponent } from './menu-renderer.js';
-import { subMenuItems } from './sub-menu.js';
-import type { MenuComponentInterface, MenuItemRender } from './types.js';
+import type { MenuComponentInterface } from './types.js';
 
-export const menu = {
-  ...menuButtonItems,
-  ...subMenuItems,
-  ...menuInputItems,
-  ...menuGroupItems,
-  ...menuDynamicItems,
-} satisfies Record<string, MenuItemRender<never>>;
 export type MenuConfig = (
   menu: Menu,
   index: number
@@ -83,8 +69,8 @@ export class Menu {
 
   constructor(public options: MenuOptions) {
     this.menuElement = IS_MOBILE
-      ? new MobileMenuComponent()
-      : new MenuComponent();
+      ? document.createElement('affine-menu-mobile')
+      : document.createElement('affine-menu');
     this.menuElement.menu = this;
 
     // Call global menu open listeners