feat(editor): add WidgetViewExtension (#10180)

Closes: [BS-2282](https://linear.app/affine-design/issue/BS-2282/replace-widgetviewmapextension-with-widgetextension)
2026-02-24 18:02:47 +08:00 · 2025-02-14 11:00:01 +00:00
parent 9dc81ecb99
commit d111f8ac88
19 changed files with 324 additions and 313 deletions
--- a/blocksuite/blocks/src/root-block/common-specs/index.ts
+++ b/blocksuite/blocks/src/root-block/common-specs/index.ts
@@ -0,0 +1,50 @@
+import { FileDropExtension } from '@blocksuite/affine-components/drop-indicator';
+import {
+  DNDAPIExtension,
+  DocModeService,
+  EmbedOptionService,
+  PageViewportServiceExtension,
+  ThemeService,
+} from '@blocksuite/affine-shared/services';
+import { FlavourExtension } from '@blocksuite/block-std';
+import type { ExtensionType } from '@blocksuite/store';
+
+import { ExportManagerExtension } from '../../_common/export-manager/export-manager';
+import { RootBlockAdapterExtensions } from '../adapters/extension';
+import {
+  docRemoteSelectionWidget,
+  dragHandleWidget,
+  embedCardToolbarWidget,
+  formatBarWidget,
+  innerModalWidget,
+  linkedDocWidget,
+  modalWidget,
+  scrollAnchoringWidget,
+  slashMenuWidget,
+  viewportOverlayWidget,
+} from './widgets';
+
+export const CommonSpecs: ExtensionType[] = [
+  FlavourExtension('affine:page'),
+  DocModeService,
+  ThemeService,
+  EmbedOptionService,
+  ExportManagerExtension,
+  PageViewportServiceExtension,
+  DNDAPIExtension,
+  FileDropExtension,
+  ...RootBlockAdapterExtensions,
+
+  modalWidget,
+  innerModalWidget,
+  slashMenuWidget,
+  linkedDocWidget,
+  dragHandleWidget,
+  embedCardToolbarWidget,
+  formatBarWidget,
+  docRemoteSelectionWidget,
+  viewportOverlayWidget,
+  scrollAnchoringWidget,
+];
+
+export * from './widgets';
--- a/blocksuite/blocks/src/root-block/common-specs/widgets.ts
+++ b/blocksuite/blocks/src/root-block/common-specs/widgets.ts
@@ -0,0 +1,64 @@
+import { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
+import { AFFINE_DOC_REMOTE_SELECTION_WIDGET } from '@blocksuite/affine-widget-remote-selection';
+import { AFFINE_SCROLL_ANCHORING_WIDGET } from '@blocksuite/affine-widget-scroll-anchoring';
+import { WidgetViewExtension } from '@blocksuite/block-std';
+import { literal, unsafeStatic } from 'lit/static-html.js';
+
+import { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from '../widgets/embed-card-toolbar/embed-card-toolbar.js';
+import { AFFINE_FORMAT_BAR_WIDGET } from '../widgets/format-bar/format-bar.js';
+import { AFFINE_INNER_MODAL_WIDGET } from '../widgets/inner-modal/inner-modal.js';
+import { AFFINE_LINKED_DOC_WIDGET } from '../widgets/linked-doc/config.js';
+import { AFFINE_MODAL_WIDGET } from '../widgets/modal/modal.js';
+import { AFFINE_SLASH_MENU_WIDGET } from '../widgets/slash-menu/index.js';
+import { AFFINE_VIEWPORT_OVERLAY_WIDGET } from '../widgets/viewport-overlay/viewport-overlay.js';
+
+export const modalWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_MODAL_WIDGET,
+  literal`${unsafeStatic(AFFINE_MODAL_WIDGET)}`
+);
+export const innerModalWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_INNER_MODAL_WIDGET,
+  literal`${unsafeStatic(AFFINE_INNER_MODAL_WIDGET)}`
+);
+export const slashMenuWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_SLASH_MENU_WIDGET,
+  literal`${unsafeStatic(AFFINE_SLASH_MENU_WIDGET)}`
+);
+export const linkedDocWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_LINKED_DOC_WIDGET,
+  literal`${unsafeStatic(AFFINE_LINKED_DOC_WIDGET)}`
+);
+export const dragHandleWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_DRAG_HANDLE_WIDGET,
+  literal`${unsafeStatic(AFFINE_DRAG_HANDLE_WIDGET)}`
+);
+export const embedCardToolbarWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_EMBED_CARD_TOOLBAR_WIDGET,
+  literal`${unsafeStatic(AFFINE_EMBED_CARD_TOOLBAR_WIDGET)}`
+);
+export const formatBarWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_FORMAT_BAR_WIDGET,
+  literal`${unsafeStatic(AFFINE_FORMAT_BAR_WIDGET)}`
+);
+export const docRemoteSelectionWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_DOC_REMOTE_SELECTION_WIDGET,
+  literal`${unsafeStatic(AFFINE_DOC_REMOTE_SELECTION_WIDGET)}`
+);
+export const viewportOverlayWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_VIEWPORT_OVERLAY_WIDGET,
+  literal`${unsafeStatic(AFFINE_VIEWPORT_OVERLAY_WIDGET)}`
+);
+export const scrollAnchoringWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_SCROLL_ANCHORING_WIDGET,
+  literal`${unsafeStatic(AFFINE_SCROLL_ANCHORING_WIDGET)}`
+);
--- a/blocksuite/blocks/src/root-block/edgeless/edgeless-root-spec.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/edgeless-root-spec.ts
@@ -1,40 +1,18 @@
-import { FileDropExtension } from '@blocksuite/affine-components/drop-indicator';
-import {
-  DNDAPIExtension,
-  DocModeService,
-  EmbedOptionService,
-  PageViewportServiceExtension,
-  ThemeService,
-} from '@blocksuite/affine-shared/services';
-import { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
 import { AFFINE_EDGELESS_AUTO_CONNECT_WIDGET } from '@blocksuite/affine-widget-edgeless-auto-connect';
 import { AFFINE_FRAME_TITLE_WIDGET } from '@blocksuite/affine-widget-frame-title';
-import {
-  AFFINE_DOC_REMOTE_SELECTION_WIDGET,
-  AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
-} from '@blocksuite/affine-widget-remote-selection';
-import { AFFINE_SCROLL_ANCHORING_WIDGET } from '@blocksuite/affine-widget-scroll-anchoring';
+import { AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET } from '@blocksuite/affine-widget-remote-selection';
 import {
  BlockServiceWatcher,
  BlockViewExtension,
-  FlavourExtension,
-  WidgetViewMapExtension,
+  WidgetViewExtension,
 } from '@blocksuite/block-std';
 import { ToolController } from '@blocksuite/block-std/gfx';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal, unsafeStatic } from 'lit/static-html.js';

-import { ExportManagerExtension } from '../../_common/export-manager/export-manager.js';
-import { RootBlockAdapterExtensions } from '../adapters/extension.js';
+import { CommonSpecs } from '../common-specs/index.js';
 import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from '../widgets/edgeless-zoom-toolbar/index.js';
 import { EDGELESS_ELEMENT_TOOLBAR_WIDGET } from '../widgets/element-toolbar/index.js';
-import { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from '../widgets/embed-card-toolbar/embed-card-toolbar.js';
-import { AFFINE_FORMAT_BAR_WIDGET } from '../widgets/format-bar/format-bar.js';
-import { AFFINE_INNER_MODAL_WIDGET } from '../widgets/inner-modal/inner-modal.js';
-import { AFFINE_LINKED_DOC_WIDGET } from '../widgets/linked-doc/config.js';
-import { AFFINE_MODAL_WIDGET } from '../widgets/modal/modal.js';
-import { AFFINE_SLASH_MENU_WIDGET } from '../widgets/slash-menu/index.js';
-import { AFFINE_VIEWPORT_OVERLAY_WIDGET } from '../widgets/viewport-overlay/viewport-overlay.js';
 import { NOTE_SLICER_WIDGET } from './components/note-slicer/index.js';
 import { EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET } from './components/presentation/edgeless-navigator-black-background.js';
 import { EDGELESS_DRAGGING_AREA_WIDGET } from './components/rects/edgeless-dragging-area-rect.js';
@@ -42,68 +20,56 @@ import { EDGELESS_SELECTED_RECT_WIDGET } from './components/rects/edgeless-selec
 import { EDGELESS_TOOLBAR_WIDGET } from './components/toolbar/edgeless-toolbar.js';
 import { EdgelessRootService } from './edgeless-root-service.js';

-export const edgelessRootWidgetViewMap = {
-  [AFFINE_MODAL_WIDGET]: literal`${unsafeStatic(AFFINE_MODAL_WIDGET)}`,
-  [AFFINE_INNER_MODAL_WIDGET]: literal`${unsafeStatic(AFFINE_INNER_MODAL_WIDGET)}`,
-  [AFFINE_SLASH_MENU_WIDGET]: literal`${unsafeStatic(
-    AFFINE_SLASH_MENU_WIDGET
-  )}`,
-  [AFFINE_LINKED_DOC_WIDGET]: literal`${unsafeStatic(
-    AFFINE_LINKED_DOC_WIDGET
-  )}`,
-  [AFFINE_DRAG_HANDLE_WIDGET]: literal`${unsafeStatic(
-    AFFINE_DRAG_HANDLE_WIDGET
-  )}`,
-  [AFFINE_EMBED_CARD_TOOLBAR_WIDGET]: literal`${unsafeStatic(
-    AFFINE_EMBED_CARD_TOOLBAR_WIDGET
-  )}`,
-  [AFFINE_FORMAT_BAR_WIDGET]: literal`${unsafeStatic(
-    AFFINE_FORMAT_BAR_WIDGET
-  )}`,
-  [AFFINE_DOC_REMOTE_SELECTION_WIDGET]: literal`${unsafeStatic(
-    AFFINE_DOC_REMOTE_SELECTION_WIDGET
-  )}`,
-  [AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET]: literal`${unsafeStatic(
-    AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET
-  )}`,
-  [AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET]: literal`${unsafeStatic(
-    AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET
-  )}`,
-  [AFFINE_FRAME_TITLE_WIDGET]: literal`${unsafeStatic(AFFINE_FRAME_TITLE_WIDGET)}`,
-  [EDGELESS_ELEMENT_TOOLBAR_WIDGET]: literal`${unsafeStatic(EDGELESS_ELEMENT_TOOLBAR_WIDGET)}`,
-  [AFFINE_VIEWPORT_OVERLAY_WIDGET]: literal`${unsafeStatic(
-    AFFINE_VIEWPORT_OVERLAY_WIDGET
-  )}`,
-  [AFFINE_EDGELESS_AUTO_CONNECT_WIDGET]: literal`${unsafeStatic(
-    AFFINE_EDGELESS_AUTO_CONNECT_WIDGET
-  )}`,
-  [AFFINE_SCROLL_ANCHORING_WIDGET]: literal`${unsafeStatic(AFFINE_SCROLL_ANCHORING_WIDGET)}`,
-  [EDGELESS_DRAGGING_AREA_WIDGET]: literal`${unsafeStatic(EDGELESS_DRAGGING_AREA_WIDGET)}`,
-  [NOTE_SLICER_WIDGET]: literal`${unsafeStatic(NOTE_SLICER_WIDGET)}`,
-  [EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET]: literal`${unsafeStatic(EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET)}`,
-  [EDGELESS_SELECTED_RECT_WIDGET]: literal`${unsafeStatic(EDGELESS_SELECTED_RECT_WIDGET)}`,
-  [EDGELESS_TOOLBAR_WIDGET]: literal`${unsafeStatic(EDGELESS_TOOLBAR_WIDGET)}`,
-};
-
-const EdgelessCommonExtension: ExtensionType[] = [
-  FlavourExtension('affine:page'),
-  EdgelessRootService,
-  DocModeService,
-  ThemeService,
-  EmbedOptionService,
-  ExportManagerExtension,
-  ToolController,
-  DNDAPIExtension,
-  PageViewportServiceExtension,
-  RootBlockAdapterExtensions,
-  FileDropExtension,
-].flat();
-
-export const EdgelessRootBlockSpec: ExtensionType[] = [
-  ...EdgelessCommonExtension,
-  BlockViewExtension('affine:page', literal`affine-edgeless-root`),
-  WidgetViewMapExtension('affine:page', edgelessRootWidgetViewMap),
-];
+export const edgelessRemoteSelectionWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
+  literal`${unsafeStatic(AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET)}`
+);
+export const edgelessZoomToolbarWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
+  literal`${unsafeStatic(AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET)}`
+);
+export const frameTitleWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_FRAME_TITLE_WIDGET,
+  literal`${unsafeStatic(AFFINE_FRAME_TITLE_WIDGET)}`
+);
+export const elementToolbarWidget = WidgetViewExtension(
+  'affine:page',
+  EDGELESS_ELEMENT_TOOLBAR_WIDGET,
+  literal`${unsafeStatic(EDGELESS_ELEMENT_TOOLBAR_WIDGET)}`
+);
+export const autoConnectWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_EDGELESS_AUTO_CONNECT_WIDGET,
+  literal`${unsafeStatic(AFFINE_EDGELESS_AUTO_CONNECT_WIDGET)}`
+);
+export const edgelessDraggingAreaWidget = WidgetViewExtension(
+  'affine:page',
+  EDGELESS_DRAGGING_AREA_WIDGET,
+  literal`${unsafeStatic(EDGELESS_DRAGGING_AREA_WIDGET)}`
+);
+export const noteSlicerWidget = WidgetViewExtension(
+  'affine:page',
+  NOTE_SLICER_WIDGET,
+  literal`${unsafeStatic(NOTE_SLICER_WIDGET)}`
+);
+export const edgelessNavigatorBlackBackgroundWidget = WidgetViewExtension(
+  'affine:page',
+  EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET,
+  literal`${unsafeStatic(EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET)}`
+);
+export const edgelessSelectedRectWidget = WidgetViewExtension(
+  'affine:page',
+  EDGELESS_SELECTED_RECT_WIDGET,
+  literal`${unsafeStatic(EDGELESS_SELECTED_RECT_WIDGET)}`
+);
+export const edgelessToolbarWidget = WidgetViewExtension(
+  'affine:page',
+  EDGELESS_TOOLBAR_WIDGET,
+  literal`${unsafeStatic(EDGELESS_TOOLBAR_WIDGET)}`
+);

 class EdgelessLocker extends BlockServiceWatcher {
  static override readonly flavour = 'affine:page';
@@ -119,6 +85,27 @@ class EdgelessLocker extends BlockServiceWatcher {
  }
 }

+const EdgelessCommonExtension: ExtensionType[] = [
+  CommonSpecs,
+  ToolController,
+  EdgelessRootService,
+].flat();
+
+export const EdgelessRootBlockSpec: ExtensionType[] = [
+  ...EdgelessCommonExtension,
+  BlockViewExtension('affine:page', literal`affine-edgeless-root`),
+  edgelessRemoteSelectionWidget,
+  edgelessZoomToolbarWidget,
+  frameTitleWidget,
+  elementToolbarWidget,
+  autoConnectWidget,
+  edgelessDraggingAreaWidget,
+  noteSlicerWidget,
+  edgelessNavigatorBlackBackgroundWidget,
+  edgelessSelectedRectWidget,
+  edgelessToolbarWidget,
+];
+
 export const PreviewEdgelessRootBlockSpec: ExtensionType[] = [
  ...EdgelessCommonExtension,
  BlockViewExtension('affine:page', literal`affine-edgeless-root-preview`),
--- a/blocksuite/blocks/src/root-block/index.ts
+++ b/blocksuite/blocks/src/root-block/index.ts
@@ -1,5 +1,6 @@
 export * from './adapters/markdown.js';
 export * from './clipboard/index.js';
+export * from './common-specs/index.js';
 export * from './edgeless/edgeless-root-spec.js';
 export * from './edgeless/index.js';
 export { TemplateJob } from './edgeless/services/template.js';
--- a/blocksuite/blocks/src/root-block/page/page-root-spec.ts
+++ b/blocksuite/blocks/src/root-block/page/page-root-spec.ts
@@ -1,83 +1,34 @@
-import { FileDropExtension } from '@blocksuite/affine-components/drop-indicator';
-import {
-  DNDAPIExtension,
-  DocModeService,
-  EmbedOptionService,
-  PageViewportServiceExtension,
-  ThemeService,
-} from '@blocksuite/affine-shared/services';
-import { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
-import { AFFINE_DOC_REMOTE_SELECTION_WIDGET } from '@blocksuite/affine-widget-remote-selection';
-import { AFFINE_SCROLL_ANCHORING_WIDGET } from '@blocksuite/affine-widget-scroll-anchoring';
-import {
-  BlockViewExtension,
-  FlavourExtension,
-  WidgetViewMapExtension,
-} from '@blocksuite/block-std';
+import { BlockViewExtension, WidgetViewExtension } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal, unsafeStatic } from 'lit/static-html.js';

-import { ExportManagerExtension } from '../../_common/export-manager/export-manager.js';
-import { RootBlockAdapterExtensions } from '../adapters/extension.js';
-import { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from '../widgets/embed-card-toolbar/embed-card-toolbar.js';
-import { AFFINE_FORMAT_BAR_WIDGET } from '../widgets/format-bar/format-bar.js';
-import { AFFINE_INNER_MODAL_WIDGET } from '../widgets/inner-modal/inner-modal.js';
+import { CommonSpecs } from '../common-specs/index.js';
 import { AFFINE_KEYBOARD_TOOLBAR_WIDGET } from '../widgets/keyboard-toolbar/index.js';
-import { AFFINE_LINKED_DOC_WIDGET } from '../widgets/linked-doc/config.js';
-import { AFFINE_MODAL_WIDGET } from '../widgets/modal/modal.js';
 import { AFFINE_PAGE_DRAGGING_AREA_WIDGET } from '../widgets/page-dragging-area/page-dragging-area.js';
-import { AFFINE_SLASH_MENU_WIDGET } from '../widgets/slash-menu/index.js';
-import { AFFINE_VIEWPORT_OVERLAY_WIDGET } from '../widgets/viewport-overlay/viewport-overlay.js';
 import { PageRootService } from './page-root-service.js';

-export const pageRootWidgetViewMap = {
-  [AFFINE_KEYBOARD_TOOLBAR_WIDGET]: literal`${unsafeStatic(AFFINE_KEYBOARD_TOOLBAR_WIDGET)}`,
-  [AFFINE_MODAL_WIDGET]: literal`${unsafeStatic(AFFINE_MODAL_WIDGET)}`,
-  [AFFINE_INNER_MODAL_WIDGET]: literal`${unsafeStatic(AFFINE_INNER_MODAL_WIDGET)}`,
-  [AFFINE_SLASH_MENU_WIDGET]: literal`${unsafeStatic(
-    AFFINE_SLASH_MENU_WIDGET
-  )}`,
-  [AFFINE_LINKED_DOC_WIDGET]: literal`${unsafeStatic(
-    AFFINE_LINKED_DOC_WIDGET
-  )}`,
-  [AFFINE_DRAG_HANDLE_WIDGET]: literal`${unsafeStatic(
-    AFFINE_DRAG_HANDLE_WIDGET
-  )}`,
-  [AFFINE_EMBED_CARD_TOOLBAR_WIDGET]: literal`${unsafeStatic(
-    AFFINE_EMBED_CARD_TOOLBAR_WIDGET
-  )}`,
-  [AFFINE_FORMAT_BAR_WIDGET]: literal`${unsafeStatic(
-    AFFINE_FORMAT_BAR_WIDGET
-  )}`,
-  [AFFINE_DOC_REMOTE_SELECTION_WIDGET]: literal`${unsafeStatic(
-    AFFINE_DOC_REMOTE_SELECTION_WIDGET
-  )}`,
-  [AFFINE_PAGE_DRAGGING_AREA_WIDGET]: literal`${unsafeStatic(
-    AFFINE_PAGE_DRAGGING_AREA_WIDGET
-  )}`,
-  [AFFINE_VIEWPORT_OVERLAY_WIDGET]: literal`${unsafeStatic(
-    AFFINE_VIEWPORT_OVERLAY_WIDGET
-  )}`,
-  [AFFINE_SCROLL_ANCHORING_WIDGET]: literal`${unsafeStatic(AFFINE_SCROLL_ANCHORING_WIDGET)}`,
-};
+export const keyboardToolbarWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_KEYBOARD_TOOLBAR_WIDGET,
+  literal`${unsafeStatic(AFFINE_KEYBOARD_TOOLBAR_WIDGET)}`
+);
+
+export const pageDraggingAreaWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_PAGE_DRAGGING_AREA_WIDGET,
+  literal`${unsafeStatic(AFFINE_PAGE_DRAGGING_AREA_WIDGET)}`
+);

 const PageCommonExtension: ExtensionType[] = [
-  FlavourExtension('affine:page'),
+  CommonSpecs,
  PageRootService,
-  DocModeService,
-  ThemeService,
-  EmbedOptionService,
-  PageViewportServiceExtension,
-];
+  pageDraggingAreaWidget,
+].flat();

 export const PageRootBlockSpec: ExtensionType[] = [
  ...PageCommonExtension,
  BlockViewExtension('affine:page', literal`affine-page-root`),
-  WidgetViewMapExtension('affine:page', pageRootWidgetViewMap),
-  ExportManagerExtension,
-  DNDAPIExtension,
-  RootBlockAdapterExtensions,
-  FileDropExtension,
+  keyboardToolbarWidget,
 ].flat();

 export const PreviewPageRootBlockSpec: ExtensionType[] = [