From ea0a34553344bc5ab53e706d9a0e68b9e1e3d5ee Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Tue, 24 Dec 2024 04:42:53 +0000 Subject: [PATCH] refactor(editor): extract common components (#9277) --- blocksuite/affine/components/package.json | 4 ++- .../components/src/block-selection/index.ts} | 0 .../components/src/block-zero-width/index.ts} | 3 +- .../components/src/context-menu/index.ts | 28 +++++++++++-------- .../components/src/context-menu/menu-all.ts | 14 ++++++++++ .../src/context-menu}/menu-divider.ts | 0 .../components/src/context-menu/menu.ts | 20 ++----------- .../embed-card/embed-card-more-menu-popper.ts | 2 +- .../blocks/src/_common/components/index.ts | 3 -- blocksuite/blocks/src/effects.ts | 10 ++----- 10 files changed, 42 insertions(+), 42 deletions(-) rename blocksuite/{blocks/src/_common/components/block-selection.ts => affine/components/src/block-selection/index.ts} (100%) rename blocksuite/{blocks/src/_common/components/block-zero-width.ts => affine/components/src/block-zero-width/index.ts} (94%) create mode 100644 blocksuite/affine/components/src/context-menu/menu-all.ts rename blocksuite/{blocks/src/_common/components => affine/components/src/context-menu}/menu-divider.ts (100%) diff --git a/blocksuite/affine/components/package.json b/blocksuite/affine/components/package.json index ec1486746b..a66456b588 100644 --- a/blocksuite/affine/components/package.json +++ b/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", diff --git a/blocksuite/blocks/src/_common/components/block-selection.ts b/blocksuite/affine/components/src/block-selection/index.ts similarity index 100% rename from blocksuite/blocks/src/_common/components/block-selection.ts rename to blocksuite/affine/components/src/block-selection/index.ts diff --git a/blocksuite/blocks/src/_common/components/block-zero-width.ts b/blocksuite/affine/components/src/block-zero-width/index.ts similarity index 94% rename from blocksuite/blocks/src/_common/components/block-zero-width.ts rename to blocksuite/affine/components/src/block-zero-width/index.ts index 135320e778..b170ac1557 100644 --- a/blocksuite/blocks/src/_common/components/block-zero-width.ts +++ b/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 { diff --git a/blocksuite/affine/components/src/context-menu/index.ts b/blocksuite/affine/components/src/context-menu/index.ts index 8f56c37066..7fd1121fe3 100644 --- a/blocksuite/affine/components/src/context-menu/index.ts +++ b/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'; diff --git a/blocksuite/affine/components/src/context-menu/menu-all.ts b/blocksuite/affine/components/src/context-menu/menu-all.ts new file mode 100644 index 0000000000..2c0650f0cd --- /dev/null +++ b/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>; diff --git a/blocksuite/blocks/src/_common/components/menu-divider.ts b/blocksuite/affine/components/src/context-menu/menu-divider.ts similarity index 100% rename from blocksuite/blocks/src/_common/components/menu-divider.ts rename to blocksuite/affine/components/src/context-menu/menu-divider.ts diff --git a/blocksuite/affine/components/src/context-menu/menu.ts b/blocksuite/affine/components/src/context-menu/menu.ts index 3011f4c0b4..74511d35b3 100644 --- a/blocksuite/affine/components/src/context-menu/menu.ts +++ b/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>; 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 diff --git a/blocksuite/blocks/src/_common/components/embed-card/embed-card-more-menu-popper.ts b/blocksuite/blocks/src/_common/components/embed-card/embed-card-more-menu-popper.ts index a0f62db83a..754853931e 100644 --- a/blocksuite/blocks/src/_common/components/embed-card/embed-card-more-menu-popper.ts +++ b/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) { diff --git a/blocksuite/blocks/src/_common/components/index.ts b/blocksuite/blocks/src/_common/components/index.ts index 19d52716ce..bd24b269fc 100644 --- a/blocksuite/blocks/src/_common/components/index.ts +++ b/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'; diff --git a/blocksuite/blocks/src/effects.ts b/blocksuite/blocks/src/effects.ts index 14fe25309a..5a81ffe935 100644 --- a/blocksuite/blocks/src/effects.ts +++ b/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 { - AIItemList, - BlockSelection, - BlockZeroWidth, - MenuDivider, -} from './_common/components/index.js'; +import { AIItemList } 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',