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

blocksuite/affine/components/package.json

@@ -48,7 +48,9 @@
     "./drag-indicator": "./src/drag-indicator/index.ts",
     "./virtual-keyboard": "./src/virtual-keyboard/index.ts",
     "./toggle-button": "./src/toggle-button/index.ts",
-    "./notification": "./src/notification/index.ts"
+    "./notification": "./src/notification/index.ts",
+    "./block-zero-width": "./src/block-zero-width/index.ts",
+    "./block-selection": "./src/block-selection/index.ts"
   },
   "files": [
     "src",

blocksuite/affine/components/src/block-zero-width/index.ts

@@ -1,9 +1,10 @@
-import { focusTextModel } from '@blocksuite/affine-components/rich-text';
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import type { BlockComponent } from '@blocksuite/block-std';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
+import { focusTextModel } from '../rich-text';
+
 export class BlockZeroWidth extends LitElement {
   static override styles = css`
     .block-zero-width {

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

@@ -1,16 +1,19 @@
-import { MenuButton, MobileMenuButton } from './button.js';
+import { MenuButton, MobileMenuButton } from './button';
-import { MenuInput, MobileMenuInput } from './input.js';
+import { MenuInput, MobileMenuInput } from './input';
-import { MenuComponent, MobileMenuComponent } from './menu-renderer.js';
+import { MenuDivider } from './menu-divider';
-import { MenuSubMenu, MobileSubMenu } from './sub-menu.js';
+import { MenuComponent, MobileMenuComponent } from './menu-renderer';
+import { MenuSubMenu, MobileSubMenu } from './sub-menu';
 
-export * from './button.js';
+export * from './button';
-export * from './focusable.js';
+export * from './focusable';
-export * from './group.js';
+export * from './group';
-export * from './input.js';
+export * from './input';
-export * from './item.js';
+export * from './item';
-export * from './menu.js';
+export * from './menu';
-export * from './menu-renderer.js';
+export * from './menu-all';
-export * from './sub-menu.js';
+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.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 type { MenuComponentInterface } from './types.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';
 
-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()
+      ? document.createElement('affine-menu-mobile')
-      : new MenuComponent();
+      : document.createElement('affine-menu');
     this.menuElement.menu = this;
 
     // Call global menu open listeners

blocksuite/blocks/src/_common/components/embed-card/embed-card-more-menu-popper.ts

@@ -8,6 +8,7 @@ import {
 } from '@blocksuite/affine-components/icons';
 import { isPeekable, peek } from '@blocksuite/affine-components/peek';
 import { toast } from '@blocksuite/affine-components/toast';
+import { getBlockProps } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { Slice } from '@blocksuite/store';
 import { css, html, LitElement, nothing } from 'lit';
@@ -17,7 +18,6 @@ import {
   isEmbedLinkedDocBlock,
   isEmbedSyncedDocBlock,
 } from '../../../root-block/edgeless/utils/query.js';
-import { getBlockProps } from '../../utils/index.js';
 import type { EmbedBlockComponent } from './type.js';
 
 export class EmbedCardMoreMenu extends WithDisposable(LitElement) {

blocksuite/blocks/src/_common/components/index.ts

@@ -1,5 +1,2 @@
 export * from './ai-item/index.js';
-export * from './block-selection.js';
-export * from './block-zero-width.js';
-export * from './menu-divider.js';
 export { scrollbarStyle } from './utils.js';

blocksuite/blocks/src/effects.ts

@@ -2,6 +2,8 @@ import { effects as blockEmbedEffects } from '@blocksuite/affine-block-embed/eff
 import { effects as blockListEffects } from '@blocksuite/affine-block-list/effects';
 import { effects as blockParagraphEffects } from '@blocksuite/affine-block-paragraph/effects';
 import { effects as blockSurfaceEffects } from '@blocksuite/affine-block-surface/effects';
+import { BlockSelection } from '@blocksuite/affine-components/block-selection';
+import { BlockZeroWidth } from '@blocksuite/affine-components/block-zero-width';
 import { effects as componentCaptionEffects } from '@blocksuite/affine-components/caption';
 import { effects as componentContextMenuEffects } from '@blocksuite/affine-components/context-menu';
 import { effects as componentDatePickerEffects } from '@blocksuite/affine-components/date-picker';
@@ -26,12 +28,7 @@ import { EmbedCardEditCaptionEditModal } from './_common/components/embed-card/m
 import { EmbedCardCreateModal } from './_common/components/embed-card/modal/embed-card-create-modal.js';
 import { EmbedCardEditModal } from './_common/components/embed-card/modal/embed-card-edit-modal.js';
 import { FilterableListComponent } from './_common/components/filterable-list/index.js';
-import {
+import { AIItemList } from './_common/components/index.js';
-  AIItemList,
-  BlockSelection,
-  BlockZeroWidth,
-  MenuDivider,
-} from './_common/components/index.js';
 import { Loader } from './_common/components/loader.js';
 import { SmoothCorner } from './_common/components/smooth-corner.js';
 import { ToggleSwitch } from './_common/components/toggle-switch.js';
@@ -544,7 +541,6 @@ export function effects() {
   customElements.define('affine-drop-indicator', DropIndicator);
   customElements.define('mini-mindmap-root-block', MindmapRootBlock);
   customElements.define('affine-block-selection', BlockSelection);
-  customElements.define('menu-divider', MenuDivider);
   customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
   customElements.define(
     'edgeless-toolbar-shape-draggable',