feat(editor): slash menu and toolbar widget extensions (#12002)

Closes: BS-3226
Closes: BS-3227
Closes: BS-3228
Closes: BS-3229

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced new view extensions for remote selection, scroll anchoring, slash menu, and toolbar widgets, enhancing customization and integration capabilities.

- **Refactor**
  - Updated export paths and module structure for widget-related packages to improve modularity and accessibility.
  - Reorganized internal dependencies and removed redundant widget imports from core block packages.
  - Refactored edgeless-related widgets and components to use a standardized scope interface for improved context and state management.
  - Centralized graphics controller access and slot management through standardized context objects.

- **Chores**
  - Added and updated dependencies to streamline extension loading and workspace management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/all/package.json

@@ -172,10 +172,14 @@
     "./widgets/frame-title/view": "./src/widgets/frame-title/view.ts",
     "./widgets/linked-doc": "./src/widgets/linked-doc/index.ts",
     "./widgets/linked-doc/view": "./src/widgets/linked-doc/view.ts",
-    "./widgets/remote-selection": "./src/widgets/remote-selection.ts",
+    "./widgets/remote-selection": "./src/widgets/remote-selection/index.ts",
-    "./widgets/scroll-anchoring": "./src/widgets/scroll-anchoring.ts",
+    "./widgets/remote-selection/view": "./src/widgets/remote-selection/view.ts",
-    "./widgets/slash-menu": "./src/widgets/slash-menu.ts",
+    "./widgets/scroll-anchoring": "./src/widgets/scroll-anchoring/index.ts",
-    "./widgets/toolbar": "./src/widgets/toolbar.ts",
+    "./widgets/scroll-anchoring/view": "./src/widgets/scroll-anchoring/view.ts",
+    "./widgets/slash-menu": "./src/widgets/slash-menu/index.ts",
+    "./widgets/slash-menu/view": "./src/widgets/slash-menu/view.ts",
+    "./widgets/toolbar": "./src/widgets/toolbar/index.ts",
+    "./widgets/toolbar/view": "./src/widgets/toolbar/view.ts",
     "./widgets/keyboard-toolbar": "./src/widgets/keyboard-toolbar/index.ts",
     "./widgets/keyboard-toolbar/view": "./src/widgets/keyboard-toolbar/view.ts",
     "./fragments/doc-title": "./src/fragments/doc-title.ts",

blocksuite/affine/all/src/extensions/effects.ts

@@ -29,10 +29,6 @@ import { effects as fragmentDocTitleEffects } from '@blocksuite/affine-fragment-
 import { effects as fragmentFramePanelEffects } from '@blocksuite/affine-fragment-frame-panel/effects';
 import { effects as fragmentOutlineEffects } from '@blocksuite/affine-fragment-outline/effects';
 import { effects as richTextEffects } from '@blocksuite/affine-rich-text/effects';
-import { effects as widgetRemoteSelectionEffects } from '@blocksuite/affine-widget-remote-selection/effects';
-import { effects as widgetScrollAnchoringEffects } from '@blocksuite/affine-widget-scroll-anchoring/effects';
-import { effects as widgetSlashMenuEffects } from '@blocksuite/affine-widget-slash-menu/effects';
-import { effects as widgetToolbarEffects } from '@blocksuite/affine-widget-toolbar/effects';
 import { effects as dataViewEffects } from '@blocksuite/data-view/effects';
 import { effects as stdEffects } from '@blocksuite/std/effects';
 
@@ -65,11 +61,6 @@ export function effects() {
   componentEdgelessShapeColorPickerEffects();
   componentOpenDocDropdownMenuEffects();
 
-  widgetScrollAnchoringEffects();
-  widgetRemoteSelectionEffects();
-  widgetSlashMenuEffects();
-  widgetToolbarEffects();
-
   fragmentDocTitleEffects();
   fragmentFramePanelEffects();
   fragmentOutlineEffects();

blocksuite/affine/all/src/extensions/view.ts

@@ -36,6 +36,10 @@ import { EdgelessToolbarViewExtension } from '@blocksuite/affine-widget-edgeless
 import { FrameTitleViewExtension } from '@blocksuite/affine-widget-frame-title/view';
 import { KeyboardToolbarViewExtension } from '@blocksuite/affine-widget-keyboard-toolbar/view';
 import { LinkedDocViewExtension } from '@blocksuite/affine-widget-linked-doc/view';
+import { RemoteSelectionViewExtension } from '@blocksuite/affine-widget-remote-selection/view';
+import { ScrollAnchoringViewExtension } from '@blocksuite/affine-widget-scroll-anchoring/view';
+import { SlashMenuViewExtension } from '@blocksuite/affine-widget-slash-menu/view';
+import { ToolbarViewExtension } from '@blocksuite/affine-widget-toolbar/view';
 
 import { MigratingViewExtension } from './migrating-view';
 
@@ -87,5 +91,9 @@ export function getInternalViewExtensions() {
     FrameTitleViewExtension,
     KeyboardToolbarViewExtension,
     LinkedDocViewExtension,
+    RemoteSelectionViewExtension,
+    ScrollAnchoringViewExtension,
+    SlashMenuViewExtension,
+    ToolbarViewExtension,
   ];
 }

blocksuite/affine/all/src/widgets/remote-selection/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-remote-selection/view';

blocksuite/affine/all/src/widgets/scroll-anchoring/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-scroll-anchoring/view';

blocksuite/affine/all/src/widgets/slash-menu/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-slash-menu/view';

blocksuite/affine/all/src/widgets/toolbar/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-toolbar/view';

blocksuite/affine/blocks/frame/src/effects.ts

@@ -3,6 +3,10 @@ import { PresentationToolbar } from './edgeless-toolbar/presentation-toolbar';
 import { FrameBlockComponent } from './frame-block';
 import { EdgelessFrameOrderButton } from './present/frame-order-button';
 import { EdgelessFrameOrderMenu } from './present/frame-order-menu';
+import {
+  EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET,
+  EdgelessNavigatorBlackBackgroundWidget,
+} from './present/navigator-bg-widget';
 import { EdgelessNavigatorSettingButton } from './present/navigator-setting-button';
 import { EdgelessPresentButton } from './present/present-button';
 
@@ -21,6 +25,11 @@ export function effects() {
   );
   customElements.define('edgeless-present-button', EdgelessPresentButton);
   customElements.define('presentation-toolbar', PresentationToolbar);
+  // Navigation components
+  customElements.define(
+    EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET,
+    EdgelessNavigatorBlackBackgroundWidget
+  );
 }
 
 declare global {
@@ -33,5 +42,6 @@ declare global {
     'edgeless-navigator-setting-button': EdgelessNavigatorSettingButton;
     'edgeless-present-button': EdgelessPresentButton;
     'presentation-toolbar': PresentationToolbar;
+    'edgeless-navigator-black-background': EdgelessNavigatorBlackBackgroundWidget;
   }
 }

blocksuite/affine/blocks/frame/src/view.ts

@@ -9,6 +9,7 @@ import { FrameHighlightManager } from './frame-highlight-manager';
 import { FrameBlockSpec } from './frame-spec';
 import { FrameTool } from './frame-tool';
 import { frameToolbarExtension } from './frame-toolbar';
+import { edgelessNavigatorBgWidget } from './present/navigator-bg-widget';
 import { PresentTool } from './preset-tool';
 
 export class FrameViewExtension extends ViewExtensionProvider {
@@ -28,6 +29,7 @@ export class FrameViewExtension extends ViewExtensionProvider {
       context.register(PresentTool);
       context.register(frameQuickTool);
       context.register(frameToolbarExtension);
+      context.register(edgelessNavigatorBgWidget);
     }
   }
 }

blocksuite/affine/blocks/root/package.json

@@ -34,8 +34,6 @@
     "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
-    "@blocksuite/affine-widget-remote-selection": "workspace:*",
-    "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
     "@blocksuite/affine-widget-slash-menu": "workspace:*",
     "@blocksuite/affine-widget-toolbar": "workspace:*",
     "@blocksuite/data-view": "workspace:*",

blocksuite/affine/blocks/root/src/common-specs/index.ts

@@ -10,10 +10,6 @@ import {
   ToolbarModuleExtension,
   ToolbarRegistryExtension,
 } from '@blocksuite/affine-shared/services';
-import { docRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection';
-import { scrollAnchoringWidget } from '@blocksuite/affine-widget-scroll-anchoring';
-import { SlashMenuExtension } from '@blocksuite/affine-widget-slash-menu';
-import { toolbarWidget } from '@blocksuite/affine-widget-toolbar';
 import { BlockFlavourIdentifier, FlavourExtension } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';
 
@@ -35,11 +31,7 @@ export const CommonSpecs: ExtensionType[] = [
   AutoClearSelectionService,
   ...RootBlockAdapterExtensions,
   ...clipboardConfigs,
-  SlashMenuExtension,
-  docRemoteSelectionWidget,
   viewportOverlayWidget,
-  scrollAnchoringWidget,
-  toolbarWidget,
   fallbackKeymap,
 
   ToolbarModuleExtension({

blocksuite/affine/blocks/root/src/edgeless/components/rects/edgeless-dragging-area-rect.ts

@@ -1,10 +1,10 @@
 import type { RootBlockModel } from '@blocksuite/affine-model';
 import { WidgetComponent } from '@blocksuite/std';
+import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { css, html, nothing, unsafeCSS } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js';
 import {
   DefaultModeDragType,
   DefaultTool,
@@ -12,10 +12,7 @@ import {
 
 export const EDGELESS_DRAGGING_AREA_WIDGET = 'edgeless-dragging-area-rect';
 
-export class EdgelessDraggingAreaRectWidget extends WidgetComponent<
+export class EdgelessDraggingAreaRectWidget extends WidgetComponent<RootBlockModel> {
-  RootBlockModel,
-  EdgelessRootBlockComponent
-> {
   static override styles = css`
     .affine-edgeless-dragging-area {
       position: absolute;
@@ -34,12 +31,13 @@ export class EdgelessDraggingAreaRectWidget extends WidgetComponent<
     }
   `;
 
+  get gfx() {
+    return this.std.get(GfxControllerIdentifier);
+  }
+
   override render() {
-    if (!this.block) {
+    const rect = this.gfx.tool.draggingViewArea$.value;
-      return nothing;
+    const tool = this.gfx.tool.currentTool$.value;
-    }
-    const rect = this.block.gfx.tool.draggingViewArea$.value;
-    const tool = this.block.gfx.tool.currentTool$.value;
 
     if (
       rect.w === 0 ||

blocksuite/affine/blocks/root/src/edgeless/edgeless-root-spec.ts

@@ -15,7 +15,6 @@ import { EdgelessClipboardFrameConfig } from '@blocksuite/affine-block-frame';
 import { EdgelessClipboardImageConfig } from '@blocksuite/affine-block-image';
 import { EdgelessClipboardNoteConfig } from '@blocksuite/affine-block-note';
 import { ViewportElementExtension } from '@blocksuite/affine-shared/services';
-import { edgelessRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection';
 import {
   BlockViewExtension,
   LifeCycleWatcher,
@@ -26,7 +25,6 @@ import type { ExtensionType } from '@blocksuite/store';
 import { literal, unsafeStatic } from 'lit/static-html.js';
 
 import { CommonSpecs } from '../common-specs/index.js';
-import { edgelessNavigatorBgWidget } from '../widgets/edgeless-navigator-bg/index.js';
 import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from '../widgets/edgeless-zoom-toolbar/index.js';
 import { EdgelessClipboardController } from './clipboard/clipboard.js';
 import { NOTE_SLICER_WIDGET } from './components/note-slicer/index.js';
@@ -94,11 +92,9 @@ const EdgelessCommonExtension: ExtensionType[] = [
 export const EdgelessRootBlockSpec: ExtensionType[] = [
   ...EdgelessCommonExtension,
   BlockViewExtension('affine:page', literal`affine-edgeless-root`),
-  edgelessRemoteSelectionWidget,
   edgelessZoomToolbarWidget,
   edgelessDraggingAreaWidget,
   noteSlicerWidget,
-  edgelessNavigatorBgWidget,
   edgelessSelectedRectWidget,
   EdgelessClipboardController,
 ];

blocksuite/affine/blocks/root/src/effects.ts

@@ -22,10 +22,6 @@ import {
   PageRootBlockComponent,
   PreviewRootBlockComponent,
 } from './index.js';
-import {
-  EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET,
-  EdgelessNavigatorBlackBackgroundWidget,
-} from './widgets/edgeless-navigator-bg/index.js';
 import {
   AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
   AffineEdgelessZoomToolbarWidget,
@@ -104,12 +100,6 @@ function registerMiscComponents() {
   // Note and template components
   customElements.define(NOTE_SLICER_WIDGET, NoteSlicer);
 
-  // Navigation components
-  customElements.define(
-    EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET,
-    EdgelessNavigatorBlackBackgroundWidget
-  );
-
   // Dragging area components
   customElements.define(
     EDGELESS_DRAGGING_AREA_WIDGET,
@@ -128,7 +118,6 @@ declare global {
     'edgeless-auto-complete-panel': EdgelessAutoCompletePanel;
     'edgeless-auto-complete': EdgelessAutoComplete;
     'note-slicer': NoteSlicer;
-    'edgeless-navigator-black-background': EdgelessNavigatorBlackBackgroundWidget;
     'edgeless-dragging-area-rect': EdgelessDraggingAreaRectWidget;
     'edgeless-selected-rect': EdgelessSelectedRectWidget;
     'edgeless-slide-menu': EdgelessSlideMenu;

blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/index.ts

@@ -1,19 +1,15 @@
 import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import type { RootBlockModel } from '@blocksuite/affine-model';
 import { WidgetComponent } from '@blocksuite/std';
+import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
 import { effect } from '@preact/signals-core';
 import { css, html, nothing } from 'lit';
 import { state } from 'lit/decorators.js';
 
-import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
-
 export const AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET =
   'affine-edgeless-zoom-toolbar-widget';
 
-export class AffineEdgelessZoomToolbarWidget extends WidgetComponent<
+export class AffineEdgelessZoomToolbarWidget extends WidgetComponent<RootBlockModel> {
-  RootBlockModel,
-  EdgelessRootBlockComponent
-> {
   static override styles = css`
     :host {
       position: absolute;
@@ -43,12 +39,16 @@ export class AffineEdgelessZoomToolbarWidget extends WidgetComponent<
     return this.block;
   }
 
+  get gfx() {
+    return this.std.get(GfxControllerIdentifier);
+  }
+
   override connectedCallback() {
     super.connectedCallback();
 
     this.disposables.add(
       effect(() => {
-        const currentTool = this.edgeless?.gfx.tool.currentToolName$.value;
+        const currentTool = this.gfx.tool.currentToolName$.value;
 
         if (currentTool !== 'frameNavigator') {
           this._hide = false;
@@ -77,10 +77,8 @@ export class AffineEdgelessZoomToolbarWidget extends WidgetComponent<
     }
 
     return html`
-      <edgeless-zoom-toolbar .edgeless=${this.edgeless}></edgeless-zoom-toolbar>
+      <edgeless-zoom-toolbar .std=${this.std}></edgeless-zoom-toolbar>
-      <zoom-bar-toggle-button
+      <zoom-bar-toggle-button .std=${this.std}></zoom-bar-toggle-button>
-        .edgeless=${this.edgeless}
-      ></zoom-bar-toggle-button>
     `;
   }
 

blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.ts

@@ -1,13 +1,13 @@
+import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import { createLitPortal } from '@blocksuite/affine-components/portal';
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/lit';
 import { MoreHorizontalIcon } from '@blocksuite/icons/lit';
+import type { BlockStdScope } from '@blocksuite/std';
 import { offset } from '@floating-ui/dom';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 
-import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
-
 export class ZoomBarToggleButton extends WithDisposable(LitElement) {
   static override styles = css`
     :host {
@@ -33,6 +33,10 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) {
     }
   }
 
+  private get _slots() {
+    return this.std.get(EdgelessLegacySlotIdentifier);
+  }
+
   private _toggleZoomMenu() {
     if (this._abortController && !this._abortController.signal.aborted) {
       this._closeZoomMenu();
@@ -45,7 +49,7 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) {
     });
     createLitPortal({
       template: html`<edgeless-zoom-toolbar
-        .edgeless=${this.edgeless}
+        .std=${this.std}
         .layout=${'vertical'}
       ></edgeless-zoom-toolbar>`,
       container: this._toggleButton,
@@ -69,14 +73,14 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) {
   override firstUpdated() {
     const { disposables } = this;
     disposables.add(
-      this.edgeless.slots.readonlyUpdated.subscribe(() => {
+      this._slots.readonlyUpdated.subscribe(() => {
         this.requestUpdate();
       })
     );
   }
 
   override render() {
-    if (this.edgeless.doc.readonly) {
+    if (this.std.store.readonly) {
       return nothing;
     }
 
@@ -105,5 +109,5 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) {
   private accessor _toggleButton!: HTMLElement;
 
   @property({ attribute: false })
-  accessor edgeless!: EdgelessRootBlockComponent;
+  accessor std!: BlockStdScope;
 }

blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/zoom-toolbar.ts

@@ -1,13 +1,19 @@
+import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/lit';
 import { MinusIcon, PlusIcon, ViewBarIcon } from '@blocksuite/icons/lit';
-import { ZOOM_STEP } from '@blocksuite/std/gfx';
+import type { BlockStdScope } from '@blocksuite/std';
+import {
+  GfxControllerIdentifier,
+  ZOOM_MAX,
+  ZOOM_MIN,
+  ZOOM_STEP,
+} from '@blocksuite/std/gfx';
 import { effect } from '@preact/signals-core';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
-
+import clamp from 'lodash-es/clamp';
-import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
 
 export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
   static override styles = css`
@@ -79,26 +85,30 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
     }
   `;
 
-  get edgelessService() {
+  get slots() {
-    return this.edgeless.service;
+    return this.std.get(EdgelessLegacySlotIdentifier);
   }
 
   get gfx() {
-    return this.edgeless.gfx;
+    return this.std.get(GfxControllerIdentifier);
   }
 
   get edgelessTool() {
-    return this.edgeless.gfx.tool.currentToolOption$.peek();
+    return this.gfx.tool.currentToolOption$.peek();
   }
 
   get locked() {
-    return this.edgelessService.locked;
+    return this.viewport.locked;
   }
 
   get viewport() {
-    return this.edgelessService.viewport;
+    return this.gfx.viewport;
   }
 
+  setZoomByStep = (step: number) => {
+    this.viewport.smoothZoom(clamp(this.zoom + step, ZOOM_MIN, ZOOM_MAX));
+  };
+
   get zoom() {
     if (!this.viewport) {
       console.error('Something went wrong, viewport is not available');
@@ -107,11 +117,6 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
     return this.viewport.zoom;
   }
 
-  constructor(edgeless: EdgelessRootBlockComponent) {
-    super();
-    this.edgeless = edgeless;
-  }
-
   private _isVerticalBar() {
     return this.layout === 'vertical';
   }
@@ -121,7 +126,7 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
 
     this.disposables.add(
       effect(() => {
-        this.edgeless.gfx.tool.currentToolName$.value;
+        this.gfx.tool.currentToolName$.value;
         this.requestUpdate();
       })
     );
@@ -130,19 +135,17 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
   override firstUpdated() {
     const { disposables } = this;
     disposables.add(
-      this.edgeless.service.viewport.viewportUpdated.subscribe(() =>
+      this.viewport.viewportUpdated.subscribe(() => this.requestUpdate())
-        this.requestUpdate()
-      )
     );
     disposables.add(
-      this.edgeless.slots.readonlyUpdated.subscribe(() => {
+      this.slots.readonlyUpdated.subscribe(() => {
         this.requestUpdate();
       })
     );
   }
 
   override render() {
-    if (this.edgeless.doc.readonly) {
+    if (this.std.store.readonly) {
       return nothing;
     }
 
@@ -173,7 +176,7 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
           .tooltip=${'Zoom out'}
           .tipPosition=${this._isVerticalBar() ? 'right' : 'top'}
           .arrow=${!this._isVerticalBar()}
-          @click=${() => this.edgelessService.setZoomByStep(-ZOOM_STEP)}
+          @click=${() => this.setZoomByStep(-ZOOM_STEP)}
           .iconContainerPadding=${4}
           .iconSize=${'24px'}
           .disabled=${locked}
@@ -191,7 +194,7 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
           .tooltip=${'Zoom in'}
           .tipPosition=${this._isVerticalBar() ? 'right' : 'top'}
           .arrow=${!this._isVerticalBar()}
-          @click=${() => this.edgelessService.setZoomByStep(ZOOM_STEP)}
+          @click=${() => this.setZoomByStep(ZOOM_STEP)}
           .iconContainerPadding=${4}
           .iconSize=${'24px'}
           .disabled=${locked}
@@ -203,8 +206,8 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
   }
 
   @property({ attribute: false })
-  accessor edgeless: EdgelessRootBlockComponent;
+  accessor layout: 'horizontal' | 'vertical' = 'horizontal';
 
   @property({ attribute: false })
-  accessor layout: 'horizontal' | 'vertical' = 'horizontal';
+  accessor std!: BlockStdScope;
 }

blocksuite/affine/blocks/root/tsconfig.json

@@ -31,8 +31,6 @@
     { "path": "../../rich-text" },
     { "path": "../../shared" },
     { "path": "../../widgets/edgeless-toolbar" },
-    { "path": "../../widgets/remote-selection" },
-    { "path": "../../widgets/scroll-anchoring" },
     { "path": "../../widgets/slash-menu" },
     { "path": "../../widgets/toolbar" },
     { "path": "../../data-view" },

blocksuite/affine/widgets/remote-selection/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/global": "workspace:*",
@@ -26,7 +27,8 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts"
   },
   "files": [
     "src",

blocksuite/affine/widgets/remote-selection/src/view.ts

@@ -0,0 +1,27 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import {
+  docRemoteSelectionWidget,
+  edgelessRemoteSelectionWidget,
+} from './index';
+
+export class RemoteSelectionViewExtension extends ViewExtensionProvider {
+  override name = 'affine-remote-selection-widget';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register(docRemoteSelectionWidget);
+    if (context.scope === 'edgeless') {
+      context.register(edgelessRemoteSelectionWidget);
+    }
+  }
+}

blocksuite/affine/widgets/remote-selection/tsconfig.json

@@ -9,6 +9,7 @@
   "references": [
     { "path": "../../blocks/surface" },
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../../model" },
     { "path": "../../shared" },
     { "path": "../../../framework/global" },

blocksuite/affine/widgets/scroll-anchoring/package.json

@@ -10,6 +10,7 @@
   "author": "toeverything",
   "license": "MIT",
   "dependencies": {
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/global": "workspace:*",
@@ -21,7 +22,8 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts"
   },
   "files": [
     "src",

blocksuite/affine/widgets/scroll-anchoring/src/view.ts

@@ -0,0 +1,21 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import { scrollAnchoringWidget } from './index';
+
+export class ScrollAnchoringViewExtension extends ViewExtensionProvider {
+  override name = 'affine-scroll-anchoring-widget';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register(scrollAnchoringWidget);
+  }
+}

blocksuite/affine/widgets/scroll-anchoring/tsconfig.json

@@ -7,6 +7,7 @@
   },
   "include": ["./src"],
   "references": [
+    { "path": "../../ext-loader" },
     { "path": "../../model" },
     { "path": "../../shared" },
     { "path": "../../../framework/global" },

blocksuite/affine/widgets/slash-menu/package.json

@@ -11,6 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/global": "workspace:*",
@@ -27,7 +28,8 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts"
   },
   "files": [
     "src",

blocksuite/affine/widgets/slash-menu/src/view.ts

@@ -0,0 +1,21 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import { SlashMenuExtension } from './extensions';
+
+export class SlashMenuViewExtension extends ViewExtensionProvider {
+  override name = 'affine-slash-menu-widget';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register(SlashMenuExtension);
+  }
+}

blocksuite/affine/widgets/slash-menu/tsconfig.json

@@ -8,6 +8,7 @@
   "include": ["./src"],
   "references": [
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../../rich-text" },
     { "path": "../../shared" },
     { "path": "../../../framework/global" },

blocksuite/affine/widgets/toolbar/package.json

@@ -14,6 +14,7 @@
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-block-table": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/global": "workspace:*",
@@ -29,7 +30,8 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts"
   },
   "files": [
     "src",

blocksuite/affine/widgets/toolbar/src/view.ts

@@ -0,0 +1,21 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { toolbarWidget } from '.';
+import { effects } from './effects';
+
+export class ToolbarViewExtension extends ViewExtensionProvider {
+  override name = 'affine-toolbar-widget';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register(toolbarWidget);
+  }
+}

blocksuite/affine/widgets/toolbar/tsconfig.json

@@ -11,6 +11,7 @@
     { "path": "../../blocks/surface" },
     { "path": "../../blocks/table" },
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../../model" },
     { "path": "../../shared" },
     { "path": "../../../framework/global" },

tools/utils/src/workspace.gen.ts

@@ -344,8 +344,6 @@ export const PackageList = [
       'blocksuite/affine/rich-text',
       'blocksuite/affine/shared',
       'blocksuite/affine/widgets/edgeless-toolbar',
-      'blocksuite/affine/widgets/remote-selection',
-      'blocksuite/affine/widgets/scroll-anchoring',
       'blocksuite/affine/widgets/slash-menu',
       'blocksuite/affine/widgets/toolbar',
       'blocksuite/affine/data-view',
@@ -859,6 +857,7 @@ export const PackageList = [
     workspaceDependencies: [
       'blocksuite/affine/blocks/surface',
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/model',
       'blocksuite/affine/shared',
       'blocksuite/framework/global',
@@ -869,6 +868,7 @@ export const PackageList = [
     location: 'blocksuite/affine/widgets/scroll-anchoring',
     name: '@blocksuite/affine-widget-scroll-anchoring',
     workspaceDependencies: [
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/model',
       'blocksuite/affine/shared',
       'blocksuite/framework/global',
@@ -880,6 +880,7 @@ export const PackageList = [
     name: '@blocksuite/affine-widget-slash-menu',
     workspaceDependencies: [
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/rich-text',
       'blocksuite/affine/shared',
       'blocksuite/framework/global',
@@ -895,6 +896,7 @@ export const PackageList = [
       'blocksuite/affine/blocks/surface',
       'blocksuite/affine/blocks/table',
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/model',
       'blocksuite/affine/shared',
       'blocksuite/framework/global',

yarn.lock

@@ -2860,8 +2860,6 @@ __metadata:
     "@blocksuite/affine-rich-text": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
-    "@blocksuite/affine-widget-remote-selection": "workspace:*"
-    "@blocksuite/affine-widget-scroll-anchoring": "workspace:*"
     "@blocksuite/affine-widget-slash-menu": "workspace:*"
     "@blocksuite/affine-widget-toolbar": "workspace:*"
     "@blocksuite/data-view": "workspace:*"
@@ -3792,6 +3790,7 @@ __metadata:
   dependencies:
     "@blocksuite/affine-block-surface": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
     "@blocksuite/global": "workspace:*"
@@ -3810,6 +3809,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-widget-scroll-anchoring@workspace:blocksuite/affine/widgets/scroll-anchoring"
   dependencies:
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
     "@blocksuite/global": "workspace:*"
@@ -3826,6 +3826,7 @@ __metadata:
   resolution: "@blocksuite/affine-widget-slash-menu@workspace:blocksuite/affine/widgets/slash-menu"
   dependencies:
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-rich-text": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
     "@blocksuite/global": "workspace:*"
@@ -3850,6 +3851,7 @@ __metadata:
     "@blocksuite/affine-block-surface": "workspace:*"
     "@blocksuite/affine-block-table": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
     "@blocksuite/global": "workspace:*"