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/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

@@ -0,0 +1,68 @@
+import {
+  DefaultModeDragType,
+  DefaultTool,
+} from '@blocksuite/affine-block-surface';
+import type { RootBlockModel } from '@blocksuite/affine-model';
+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';
+
+export class EdgelessDraggingAreaRectWidget extends WidgetComponent<RootBlockModel> {
+  static override styles = css`
+    .affine-edgeless-dragging-area {
+      position: absolute;
+      background: ${unsafeCSS(
+        cssVarV2('edgeless/selection/selectionMarqueeBackground', '#1E96EB14')
+      )};
+      box-sizing: border-box;
+      border-width: 1px;
+      border-style: solid;
+      border-color: ${unsafeCSS(
+        cssVarV2('edgeless/selection/selectionMarqueeBorder', '#1E96EB')
+      )};
+
+      z-index: 1;
+      pointer-events: none;
+    }
+  `;
+
+  get gfx() {
+    return this.std.get(GfxControllerIdentifier);
+  }
+
+  override render() {
+    const rect = this.gfx.tool.draggingViewArea$.value;
+    const tool = this.gfx.tool.currentTool$.value;
+
+    if (
+      rect.w === 0 ||
+      rect.h === 0 ||
+      !tool ||
+      !(tool instanceof DefaultTool) ||
+      tool.dragType !== DefaultModeDragType.Selecting
+    )
+      return nothing;
+
+    const style = {
+      left: rect.x + 'px',
+      top: rect.y + 'px',
+      width: rect.w + 'px',
+      height: rect.h + 'px',
+    };
+
+    return html`
+      <div class="affine-edgeless-dragging-area" style=${styleMap(style)}></div>
+    `;
+  }
+}
+
+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" }
+  ]
+}