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/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);
+    }
+  }
+}