refactor(editor): extract widgets (#12304)

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

- **New Features**
  - Introduced two new widgets: Edgeless Dragging Area and Note Slicer, now available for use.
  - Added extension support for these widgets, enabling enhanced interaction and integration within the application.

- **Chores**
  - Updated package configurations and workspace settings to include the new widgets and their dependencies.
  - Added project references and configuration files to support modular development and build processes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/all/package.json

@@ -58,12 +58,14 @@
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/affine-widget-drag-handle": "workspace:*",
     "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-dragging-area": "workspace:*",
     "@blocksuite/affine-widget-edgeless-selected-rect": "workspace:*",
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
     "@blocksuite/affine-widget-edgeless-zoom-toolbar": "workspace:*",
     "@blocksuite/affine-widget-frame-title": "workspace:*",
     "@blocksuite/affine-widget-keyboard-toolbar": "workspace:*",
     "@blocksuite/affine-widget-linked-doc": "workspace:*",
+    "@blocksuite/affine-widget-note-slicer": "workspace:*",
     "@blocksuite/affine-widget-page-dragging-area": "workspace:*",
     "@blocksuite/affine-widget-remote-selection": "workspace:*",
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
@@ -179,6 +181,8 @@
     "./widgets/drag-handle/view": "./src/widgets/drag-handle/view.ts",
     "./widgets/edgeless-auto-connect": "./src/widgets/edgeless-auto-connect/index.ts",
     "./widgets/edgeless-auto-connect/view": "./src/widgets/edgeless-auto-connect/view.ts",
+    "./widgets/edgeless-dragging-area": "./src/widgets/edgeless-dragging-area/index.ts",
+    "./widgets/edgeless-dragging-area/view": "./src/widgets/edgeless-dragging-area/view.ts",
     "./widgets/edgeless-toolbar": "./src/widgets/edgeless-toolbar/index.ts",
     "./widgets/edgeless-toolbar/view": "./src/widgets/edgeless-toolbar/view.ts",
     "./widgets/frame-title": "./src/widgets/frame-title/index.ts",

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

@@ -40,12 +40,14 @@ import { InlinePresetViewExtension } from '@blocksuite/affine-inline-preset/view
 import { ReferenceViewExtension } from '@blocksuite/affine-inline-reference/view';
 import { DragHandleViewExtension } from '@blocksuite/affine-widget-drag-handle/view';
 import { EdgelessAutoConnectViewExtension } from '@blocksuite/affine-widget-edgeless-auto-connect/view';
+import { EdgelessDraggingAreaViewExtension } from '@blocksuite/affine-widget-edgeless-dragging-area/view';
 import { EdgelessSelectedRectViewExtension } from '@blocksuite/affine-widget-edgeless-selected-rect/view';
 import { EdgelessToolbarViewExtension } from '@blocksuite/affine-widget-edgeless-toolbar/view';
 import { EdgelessZoomToolbarViewExtension } from '@blocksuite/affine-widget-edgeless-zoom-toolbar/view';
 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 { NoteSlicerViewExtension } from '@blocksuite/affine-widget-note-slicer/view';
 import { PageDraggingAreaViewExtension } from '@blocksuite/affine-widget-page-dragging-area/view';
 import { RemoteSelectionViewExtension } from '@blocksuite/affine-widget-remote-selection/view';
 import { ScrollAnchoringViewExtension } from '@blocksuite/affine-widget-scroll-anchoring/view';
@@ -114,6 +116,8 @@ export function getInternalViewExtensions() {
     EdgelessZoomToolbarViewExtension,
     PageDraggingAreaViewExtension,
     EdgelessSelectedRectViewExtension,
+    EdgelessDraggingAreaViewExtension,
+    NoteSlicerViewExtension,
 
     // Fragment
     DocTitleViewExtension,

blocksuite/affine/all/src/widgets/edgeless-dragging-area/index.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-edgeless-dragging-area';

blocksuite/affine/all/src/widgets/edgeless-dragging-area/view.ts

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

blocksuite/affine/all/src/widgets/note-slicer/index.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-note-slicer';

blocksuite/affine/all/src/widgets/note-slicer/view.ts

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

blocksuite/affine/all/tsconfig.json

@@ -55,12 +55,14 @@
     { "path": "../shared" },
     { "path": "../widgets/drag-handle" },
     { "path": "../widgets/edgeless-auto-connect" },
+    { "path": "../widgets/edgeless-dragging-area" },
     { "path": "../widgets/edgeless-selected-rect" },
     { "path": "../widgets/edgeless-toolbar" },
     { "path": "../widgets/edgeless-zoom-toolbar" },
     { "path": "../widgets/frame-title" },
     { "path": "../widgets/keyboard-toolbar" },
     { "path": "../widgets/linked-doc" },
+    { "path": "../widgets/note-slicer" },
     { "path": "../widgets/page-dragging-area" },
     { "path": "../widgets/remote-selection" },
     { "path": "../widgets/scroll-anchoring" },

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

@@ -1,7 +1,11 @@
 import { insertLinkByQuickSearchCommand } from '@blocksuite/affine-block-bookmark';
 import { EdgelessTextBlockComponent } from '@blocksuite/affine-block-edgeless-text';
 import { FrameTool } from '@blocksuite/affine-block-frame';
-import { DefaultTool, isNoteBlock } from '@blocksuite/affine-block-surface';
+import {
+  DefaultTool,
+  EdgelessLegacySlotIdentifier,
+  isNoteBlock,
+} from '@blocksuite/affine-block-surface';
 import { toast } from '@blocksuite/affine-components/toast';
 import {
   BrushTool,
@@ -47,6 +51,7 @@ import { SurfaceSelection, TextSelection } from '@blocksuite/std';
 import {
   type BaseTool,
   GfxBlockElementModel,
+  GfxControllerIdentifier,
   type GfxPrimitiveElementModel,
   isGfxGroupCompatibleModel,
   type ToolOptions,
@@ -66,7 +71,15 @@ import { isCanvasElement } from './utils/query.js';
 
 export class EdgelessPageKeyboardManager extends PageKeyboardManager {
   get gfx() {
-    return this.rootComponent.gfx;
+    return this.std.get(GfxControllerIdentifier);
+  }
+
+  get slots() {
+    return this.std.get(EdgelessLegacySlotIdentifier);
+  }
+
+  get std() {
+    return this.rootComponent.std;
   }
 
   constructor(override rootComponent: EdgelessRootBlockComponent) {
@@ -118,7 +131,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
               NoteBlockModel,
             ])
           ) {
-            rootComponent.slots.toggleNoteSlicer.next();
+            this.slots.toggleNoteSlicer.next();
           }
         },
         f: () => {
@@ -153,7 +166,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
             elements.length === 1 &&
             isNoteBlock(elements[0])
           ) {
-            rootComponent.slots.toggleNoteSlicer.next();
+            this.slots.toggleNoteSlicer.next();
           }
         },
         '@': () => {
@@ -705,7 +718,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
       }
       this._setEdgelessTool(PanTool, { panning: false });
 
-      edgeless.dispatcher.disposables.addFromEvent(
+      this.std.event.disposables.addFromEvent(
         document,
         'keyup',
         revertToPrevTool

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

@@ -1,7 +1,6 @@
 import { NoteConfigExtension } from '@blocksuite/affine-block-note';
 import {
   DefaultTool,
-  EdgelessLegacySlotIdentifier,
   getBgGridGap,
   normalizeWheelDeltaY,
   type SurfaceBlockComponent,
@@ -120,36 +119,27 @@ export class EdgelessRootBlockComponent extends BlockComponent<
 
   keyboardManager: EdgelessPageKeyboardManager | null = null;
 
-  get dispatcher() {
-    return this.std.event;
-  }
-
-  get fontLoader() {
-    return this.std.get(FontLoaderService);
-  }
-
   get gfx() {
     return this.std.get(GfxControllerIdentifier);
   }
 
-  get slots() {
-    return this.std.get(EdgelessLegacySlotIdentifier);
-  }
-
   get surfaceBlockModel() {
     return this.model.children.find(
       child => child.flavour === 'affine:surface'
     ) as SurfaceBlockModel;
   }
 
-  get viewportElement(): HTMLElement {
+  private get _viewportElement(): HTMLElement {
     return this.std.get(ViewportElementProvider).viewportElement;
   }
 
+  get fontLoader() {
+    return this.std.get(FontLoaderService);
+  }
+
   private _initFontLoader() {
-    this.std
+    this.fontLoader.ready
-      .get(FontLoaderService)
+      .then(() => {
-      .ready.then(() => {
         this.surface.refresh();
       })
       .catch(console.error);
@@ -173,7 +163,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
 
   private _initPanEvent() {
     this.disposables.add(
-      this.dispatcher.add('pan', ctx => {
+      this.std.event.add('pan', ctx => {
         const { viewport } = this.gfx;
         if (viewport.locked) return;
 
@@ -197,7 +187,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
 
   private _initPinchEvent() {
     this.disposables.add(
-      this.dispatcher.add('pinch', ctx => {
+      this.std.event.add('pinch', ctx => {
         const { viewport } = this.gfx;
         if (viewport.locked) return;
 
@@ -277,7 +267,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
       this.gfx.viewport.onResize();
     });
 
-    resizeObserver.observe(this.viewportElement);
+    resizeObserver.observe(this._viewportElement);
     this._resizeObserver = resizeObserver;
   }
 
@@ -340,7 +330,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
 
   private _initWheelEvent() {
     this._disposables.add(
-      this.dispatcher.add('wheel', ctx => {
+      this.std.event.add('wheel', ctx => {
         const config = this.std.getOptional(EditorSettingProvider)?.setting$;
         const state = ctx.get('defaultState');
         const e = state.event as WheelEvent;

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

@@ -1,20 +1,5 @@
-import { LifeCycleWatcher, WidgetViewExtension } from '@blocksuite/std';
+import { LifeCycleWatcher } from '@blocksuite/std';
 import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
-import { literal, unsafeStatic } from 'lit/static-html.js';
-
-import { NOTE_SLICER_WIDGET } from './components/note-slicer/index.js';
-import { EDGELESS_DRAGGING_AREA_WIDGET } from './components/rects/edgeless-dragging-area-rect.js';
-
-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 class EdgelessLocker extends LifeCycleWatcher {
   static override key = 'edgeless-locker';

blocksuite/affine/blocks/root/src/edgeless/index.ts

@@ -1,7 +1,7 @@
+export { EdgelessRootPreviewBlockComponent } from '../preview/edgeless-root-preview-block';
 export * from './clipboard/clipboard';
 export * from './clipboard/command';
 export * from './edgeless-root-block.js';
-export { EdgelessRootPreviewBlockComponent } from './edgeless-root-preview-block.js';
 export { EdgelessRootService } from './edgeless-root-service.js';
 export * from './utils/clipboard-utils.js';
 export { sortEdgelessElements } from './utils/clone-utils.js';

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

@@ -1,11 +1,3 @@
-import {
-  NOTE_SLICER_WIDGET,
-  NoteSlicer,
-} from './edgeless/components/note-slicer/index.js';
-import {
-  EDGELESS_DRAGGING_AREA_WIDGET,
-  EdgelessDraggingAreaRectWidget,
-} from './edgeless/components/rects/edgeless-dragging-area-rect.js';
 import {
   EdgelessRootBlockComponent,
   EdgelessRootPreviewBlockComponent,
@@ -16,7 +8,6 @@ import {
 export function effects() {
   // Register components by category
   registerRootComponents();
-  registerMiscComponents();
 }
 
 function registerRootComponents() {
@@ -29,23 +20,9 @@ function registerRootComponents() {
   );
 }
 
-function registerMiscComponents() {
-  // Note and template components
-  customElements.define(NOTE_SLICER_WIDGET, NoteSlicer);
-
-  // Dragging area components
-  customElements.define(
-    EDGELESS_DRAGGING_AREA_WIDGET,
-    EdgelessDraggingAreaRectWidget
-  );
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     'affine-edgeless-root': EdgelessRootBlockComponent;
-    'affine-edgeless-root-preview': EdgelessRootPreviewBlockComponent;
-    'note-slicer': NoteSlicer;
-    'edgeless-dragging-area-rect': EdgelessDraggingAreaRectWidget;
     'affine-page-root': PageRootBlockComponent;
   }
 }

blocksuite/affine/blocks/root/src/preview/edgeless-root-preview-block.ts

@@ -25,13 +25,9 @@ import { css, html } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
-import type { EdgelessRootService } from './edgeless-root-service.js';
+import { isCanvasElement } from '../edgeless/utils/query';
-import { isCanvasElement } from './utils/query.js';
 
-export class EdgelessRootPreviewBlockComponent extends BlockComponent<
+export class EdgelessRootPreviewBlockComponent extends BlockComponent<RootBlockModel> {
-  RootBlockModel,
-  EdgelessRootService
-> {
   static override styles = css`
     affine-edgeless-root-preview {
       pointer-events: none;
@@ -66,9 +62,13 @@ export class EdgelessRootPreviewBlockComponent extends BlockComponent<
     }
   `;
 
+  private get _viewport() {
+    return this._gfx.viewport;
+  }
+
   private readonly _refreshLayerViewport = requestThrottledConnectedFrame(
     () => {
-      const { zoom, translateX, translateY } = this.service.viewport;
+      const { zoom, translateX, translateY } = this._viewport;
       const gap = getBgGridGap(zoom);
 
       this.backgroundStyle = {
@@ -81,10 +81,6 @@ export class EdgelessRootPreviewBlockComponent extends BlockComponent<
 
   private _resizeObserver: ResizeObserver | null = null;
 
-  get dispatcher() {
-    return this.service?.uiEventDispatcher;
-  }
-
   private get _gfx() {
     return this.std.get(GfxControllerIdentifier);
   }

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

@@ -18,11 +18,7 @@ import { PageClipboard, ReadOnlyClipboard } from './clipboard';
 import { builtinToolbarConfig } from './configs/toolbar';
 import { EdgelessClipboardController, EdgelessRootService } from './edgeless';
 import { EdgelessElementToolbarExtension } from './edgeless/configs/toolbar';
-import {
+import { EdgelessLocker } from './edgeless/edgeless-root-spec';
-  edgelessDraggingAreaWidget,
-  EdgelessLocker,
-  noteSlicerWidget,
-} from './edgeless/edgeless-root-spec';
 import { AltCloneExtension } from './edgeless/interact-extensions/clone-ext';
 import { effects } from './effects';
 import { fallbackKeymap } from './keyboard/keymap';
@@ -89,8 +85,6 @@ export class RootViewExtension extends ViewExtensionProvider {
     }
     context.register([
       BlockViewExtension('affine:page', literal`affine-edgeless-root`),
-      edgelessDraggingAreaWidget,
-      noteSlicerWidget,
       EdgelessClipboardController,
       AltCloneExtension,
     ]);

blocksuite/affine/widgets/edgeless-dragging-area/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@blocksuite/affine-widget-edgeless-dragging-area",
+  "description": "Affine edgeless dragging area widget.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-note": "workspace:*",
+    "@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:*",
+    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/std": "workspace:*",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.14",
+    "lit": "^3.2.0",
+    "rxjs": "^7.8.1",
+    "yjs": "^13.6.21"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.21.0"
+}

blocksuite/affine/widgets/edgeless-dragging-area/src/edgeless-dragging-area-rect.ts

@@ -3,11 +3,12 @@ import {
   DefaultTool,
 } from '@blocksuite/affine-block-surface';
 import type { RootBlockModel } from '@blocksuite/affine-model';
-import { WidgetComponent } from '@blocksuite/std';
+import { WidgetComponent, WidgetViewExtension } 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 { literal, unsafeStatic } from 'lit/static-html.js';
 
 export const EDGELESS_DRAGGING_AREA_WIDGET = 'edgeless-dragging-area-rect';
 
@@ -59,3 +60,9 @@ export class EdgelessDraggingAreaRectWidget extends WidgetComponent<RootBlockMod
     `;
   }
 }
+
+export const edgelessDraggingAreaWidget = WidgetViewExtension(
+  'affine:page',
+  EDGELESS_DRAGGING_AREA_WIDGET,
+  literal`${unsafeStatic(EDGELESS_DRAGGING_AREA_WIDGET)}`
+);

blocksuite/affine/widgets/edgeless-dragging-area/src/effects.ts

@@ -0,0 +1,11 @@
+import {
+  EDGELESS_DRAGGING_AREA_WIDGET,
+  EdgelessDraggingAreaRectWidget,
+} from './edgeless-dragging-area-rect';
+
+export function effects() {
+  customElements.define(
+    EDGELESS_DRAGGING_AREA_WIDGET,
+    EdgelessDraggingAreaRectWidget
+  );
+}

blocksuite/affine/widgets/edgeless-dragging-area/src/index.ts

@@ -0,0 +1 @@
+export * from './edgeless-dragging-area-rect';

blocksuite/affine/widgets/edgeless-dragging-area/src/view.ts

@@ -0,0 +1,23 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { edgelessDraggingAreaWidget } from './edgeless-dragging-area-rect';
+import { effects } from './effects';
+
+export class EdgelessDraggingAreaViewExtension extends ViewExtensionProvider {
+  override name = 'affine-edgeless-dragging-area-widget';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    if (this.isEdgeless(context.scope)) {
+      context.register(edgelessDraggingAreaWidget);
+    }
+  }
+}

blocksuite/affine/widgets/edgeless-dragging-area/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../blocks/note" },
+    { "path": "../../blocks/surface" },
+    { "path": "../../components" },
+    { "path": "../../ext-loader" },
+    { "path": "../../model" },
+    { "path": "../../shared" },
+    { "path": "../../../framework/global" },
+    { "path": "../../../framework/std" }
+  ]
+}

blocksuite/affine/widgets/note-slicer/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@blocksuite/affine-widget-note-slicer",
+  "description": "Affine note slicer widget.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-note": "workspace:*",
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-selected-rect": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/std": "workspace:*",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.14",
+    "lit": "^3.2.0",
+    "rxjs": "^7.8.1",
+    "yjs": "^13.6.21"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.21.0"
+}

blocksuite/affine/widgets/note-slicer/src/effects.ts

@@ -0,0 +1,5 @@
+import { NOTE_SLICER_WIDGET, NoteSlicer } from './note-slicer';
+
+export function effects() {
+  customElements.define(NOTE_SLICER_WIDGET, NoteSlicer);
+}

blocksuite/affine/widgets/note-slicer/src/index.ts

@@ -0,0 +1 @@
+export * from './note-slicer';

blocksuite/affine/widgets/note-slicer/src/note-slicer.ts

@@ -16,12 +16,13 @@ import type { EdgelessSelectedRectWidget } from '@blocksuite/affine-widget-edgel
 import { DisposableGroup } from '@blocksuite/global/disposable';
 import { deserializeXYWH, Point, serializeXYWH } from '@blocksuite/global/gfx';
 import { ScissorsIcon } from '@blocksuite/icons/lit';
-import { WidgetComponent } from '@blocksuite/std';
+import { WidgetComponent, WidgetViewExtension } from '@blocksuite/std';
 import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
 import { css, html, nothing, type PropertyValues } from 'lit';
 import { state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { literal, unsafeStatic } from 'lit/static-html.js';
 
 const DIVIDING_LINE_OFFSET = 4;
 const NEW_NOTE_GAP = 40;
@@ -442,3 +443,9 @@ export class NoteSlicer extends WidgetComponent<RootBlockModel> {
   @state()
   private accessor _isResizing = false;
 }
+
+export const noteSlicerWidget = WidgetViewExtension(
+  'affine:page',
+  NOTE_SLICER_WIDGET,
+  literal`${unsafeStatic(NOTE_SLICER_WIDGET)}`
+);

blocksuite/affine/widgets/note-slicer/src/view.ts

@@ -0,0 +1,23 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import { noteSlicerWidget } from './note-slicer';
+
+export class NoteSlicerViewExtension extends ViewExtensionProvider {
+  override name = 'affine-note-slicer-widget';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    if (this.isEdgeless(context.scope)) {
+      context.register(noteSlicerWidget);
+    }
+  }
+}

blocksuite/affine/widgets/note-slicer/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../blocks/note" },
+    { "path": "../../blocks/surface" },
+    { "path": "../../components" },
+    { "path": "../../ext-loader" },
+    { "path": "../../model" },
+    { "path": "../../shared" },
+    { "path": "../edgeless-selected-rect" },
+    { "path": "../../../framework/global" },
+    { "path": "../../../framework/std" }
+  ]
+}

tools/utils/src/workspace.gen.ts

@@ -53,12 +53,14 @@ export const PackageList = [
       'blocksuite/affine/shared',
       'blocksuite/affine/widgets/drag-handle',
       'blocksuite/affine/widgets/edgeless-auto-connect',
+      'blocksuite/affine/widgets/edgeless-dragging-area',
       'blocksuite/affine/widgets/edgeless-selected-rect',
       'blocksuite/affine/widgets/edgeless-toolbar',
       'blocksuite/affine/widgets/edgeless-zoom-toolbar',
       'blocksuite/affine/widgets/frame-title',
       'blocksuite/affine/widgets/keyboard-toolbar',
       'blocksuite/affine/widgets/linked-doc',
+      'blocksuite/affine/widgets/note-slicer',
       'blocksuite/affine/widgets/page-dragging-area',
       'blocksuite/affine/widgets/remote-selection',
       'blocksuite/affine/widgets/scroll-anchoring',
@@ -860,6 +862,20 @@ export const PackageList = [
       'blocksuite/framework/std',
     ],
   },
+  {
+    location: 'blocksuite/affine/widgets/edgeless-dragging-area',
+    name: '@blocksuite/affine-widget-edgeless-dragging-area',
+    workspaceDependencies: [
+      'blocksuite/affine/blocks/note',
+      'blocksuite/affine/blocks/surface',
+      'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
+      'blocksuite/affine/model',
+      'blocksuite/affine/shared',
+      'blocksuite/framework/global',
+      'blocksuite/framework/std',
+    ],
+  },
   {
     location: 'blocksuite/affine/widgets/edgeless-selected-rect',
     name: '@blocksuite/affine-widget-edgeless-selected-rect',
@@ -965,6 +981,21 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/widgets/note-slicer',
+    name: '@blocksuite/affine-widget-note-slicer',
+    workspaceDependencies: [
+      'blocksuite/affine/blocks/note',
+      'blocksuite/affine/blocks/surface',
+      'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
+      'blocksuite/affine/model',
+      'blocksuite/affine/shared',
+      'blocksuite/affine/widgets/edgeless-selected-rect',
+      'blocksuite/framework/global',
+      'blocksuite/framework/std',
+    ],
+  },
   {
     location: 'blocksuite/affine/widgets/page-dragging-area',
     name: '@blocksuite/affine-widget-page-dragging-area',
@@ -1470,12 +1501,14 @@ export type PackageName =
   | '@blocksuite/affine-shared'
   | '@blocksuite/affine-widget-drag-handle'
   | '@blocksuite/affine-widget-edgeless-auto-connect'
+  | '@blocksuite/affine-widget-edgeless-dragging-area'
   | '@blocksuite/affine-widget-edgeless-selected-rect'
   | '@blocksuite/affine-widget-edgeless-toolbar'
   | '@blocksuite/affine-widget-edgeless-zoom-toolbar'
   | '@blocksuite/affine-widget-frame-title'
   | '@blocksuite/affine-widget-keyboard-toolbar'
   | '@blocksuite/affine-widget-linked-doc'
+  | '@blocksuite/affine-widget-note-slicer'
   | '@blocksuite/affine-widget-page-dragging-area'
   | '@blocksuite/affine-widget-remote-selection'
   | '@blocksuite/affine-widget-scroll-anchoring'

tsconfig.json

@@ -100,12 +100,14 @@
     { "path": "./blocksuite/affine/shared" },
     { "path": "./blocksuite/affine/widgets/drag-handle" },
     { "path": "./blocksuite/affine/widgets/edgeless-auto-connect" },
+    { "path": "./blocksuite/affine/widgets/edgeless-dragging-area" },
     { "path": "./blocksuite/affine/widgets/edgeless-selected-rect" },
     { "path": "./blocksuite/affine/widgets/edgeless-toolbar" },
     { "path": "./blocksuite/affine/widgets/edgeless-zoom-toolbar" },
     { "path": "./blocksuite/affine/widgets/frame-title" },
     { "path": "./blocksuite/affine/widgets/keyboard-toolbar" },
     { "path": "./blocksuite/affine/widgets/linked-doc" },
+    { "path": "./blocksuite/affine/widgets/note-slicer" },
     { "path": "./blocksuite/affine/widgets/page-dragging-area" },
     { "path": "./blocksuite/affine/widgets/remote-selection" },
     { "path": "./blocksuite/affine/widgets/scroll-anchoring" },

yarn.lock

@@ -3791,6 +3791,28 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-widget-edgeless-dragging-area@workspace:*, @blocksuite/affine-widget-edgeless-dragging-area@workspace:blocksuite/affine/widgets/edgeless-dragging-area":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-widget-edgeless-dragging-area@workspace:blocksuite/affine/widgets/edgeless-dragging-area"
+  dependencies:
+    "@blocksuite/affine-block-note": "workspace:*"
+    "@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:*"
+    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/std": "workspace:*"
+    "@lit/context": "npm:^1.1.2"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.14"
+    lit: "npm:^3.2.0"
+    rxjs: "npm:^7.8.1"
+    yjs: "npm:^13.6.21"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-widget-edgeless-selected-rect@workspace:*, @blocksuite/affine-widget-edgeless-selected-rect@workspace:blocksuite/affine/widgets/edgeless-selected-rect":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-widget-edgeless-selected-rect@workspace:blocksuite/affine/widgets/edgeless-selected-rect"
@@ -3950,6 +3972,29 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-widget-note-slicer@workspace:*, @blocksuite/affine-widget-note-slicer@workspace:blocksuite/affine/widgets/note-slicer":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-widget-note-slicer@workspace:blocksuite/affine/widgets/note-slicer"
+  dependencies:
+    "@blocksuite/affine-block-note": "workspace:*"
+    "@blocksuite/affine-block-surface": "workspace:*"
+    "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/affine-widget-edgeless-selected-rect": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/std": "workspace:*"
+    "@lit/context": "npm:^1.1.2"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.14"
+    lit: "npm:^3.2.0"
+    rxjs: "npm:^7.8.1"
+    yjs: "npm:^13.6.21"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-widget-page-dragging-area@workspace:*, @blocksuite/affine-widget-page-dragging-area@workspace:blocksuite/affine/widgets/page-dragging-area":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-widget-page-dragging-area@workspace:blocksuite/affine/widgets/page-dragging-area"
@@ -4129,12 +4174,14 @@ __metadata:
     "@blocksuite/affine-shared": "workspace:*"
     "@blocksuite/affine-widget-drag-handle": "workspace:*"
     "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*"
+    "@blocksuite/affine-widget-edgeless-dragging-area": "workspace:*"
     "@blocksuite/affine-widget-edgeless-selected-rect": "workspace:*"
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
     "@blocksuite/affine-widget-edgeless-zoom-toolbar": "workspace:*"
     "@blocksuite/affine-widget-frame-title": "workspace:*"
     "@blocksuite/affine-widget-keyboard-toolbar": "workspace:*"
     "@blocksuite/affine-widget-linked-doc": "workspace:*"
+    "@blocksuite/affine-widget-note-slicer": "workspace:*"
     "@blocksuite/affine-widget-page-dragging-area": "workspace:*"
     "@blocksuite/affine-widget-remote-selection": "workspace:*"
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*"