feat(editor): add gfx pointer extension (#12006)

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

- **New Features**
  - Introduced a new pointer graphics module with tools and quick tool integration for edgeless surfaces.
  - Added a quick tool button for pointer interactions in edgeless mode.
  - Exposed new extension points for pointer graphics and effects.

- **Improvements**
  - Integrated pointer graphics as a dependency into related packages.
  - Enhanced toolbar context to support additional surface alignment modes.
  - Added conditional clipboard configuration registrations for edgeless contexts across multiple block types.

- **Removals**
  - Removed legacy tool and effect definitions and related quick tool exports from edgeless components.
  - Streamlined extension arrays and removed unused exports for a cleaner codebase.
  - Deleted obsolete utility functions and component registrations.

- **Chores**
  - Updated workspace and TypeScript project references to include the new pointer graphics module.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/all/package.json

@@ -39,6 +39,7 @@
     "@blocksuite/affine-gfx-group": "workspace:*",
     "@blocksuite/affine-gfx-mindmap": "workspace:*",
     "@blocksuite/affine-gfx-note": "workspace:*",
+    "@blocksuite/affine-gfx-pointer": "workspace:*",
     "@blocksuite/affine-gfx-shape": "workspace:*",
     "@blocksuite/affine-gfx-template": "workspace:*",
     "@blocksuite/affine-gfx-text": "workspace:*",
@@ -191,6 +192,8 @@
     "./gfx/brush": "./src/gfx/brush/index.ts",
     "./gfx/brush/store": "./src/gfx/brush/store.ts",
     "./gfx/brush/view": "./src/gfx/brush/view.ts",
+    "./gfx/pointer": "./src/gfx/pointer/index.ts",
+    "./gfx/pointer/view": "./src/gfx/pointer/view.ts",
     "./gfx/shape": "./src/gfx/shape/index.ts",
     "./gfx/shape/store": "./src/gfx/shape/store.ts",
     "./gfx/shape/view": "./src/gfx/shape/view.ts",

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

@@ -21,6 +21,7 @@ import { ConnectorViewExtension } from '@blocksuite/affine-gfx-connector/view';
 import { GroupViewExtension } from '@blocksuite/affine-gfx-group/view';
 import { MindmapViewExtension } from '@blocksuite/affine-gfx-mindmap/view';
 import { NoteViewExtension as GfxNoteViewExtension } from '@blocksuite/affine-gfx-note/view';
+import { PointerViewExtension } from '@blocksuite/affine-gfx-pointer/view';
 import { ShapeViewExtension } from '@blocksuite/affine-gfx-shape/view';
 import { TemplateViewExtension } from '@blocksuite/affine-gfx-template/view';
 import { TextViewExtension } from '@blocksuite/affine-gfx-text/view';
@@ -46,6 +47,7 @@ import { MigratingViewExtension } from './migrating-view';
 export function getInternalViewExtensions() {
   return [
     // Gfx
+    PointerViewExtension,
     GfxNoteViewExtension,
     BrushViewExtension,
     ShapeViewExtension,

blocksuite/affine/all/src/gfx/pointer/index.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-pointer';

blocksuite/affine/all/src/gfx/pointer/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-pointer/view';

blocksuite/affine/all/tsconfig.json

@@ -36,6 +36,7 @@
     { "path": "../gfx/group" },
     { "path": "../gfx/mindmap" },
     { "path": "../gfx/note" },
+    { "path": "../gfx/pointer" },
     { "path": "../gfx/shape" },
     { "path": "../gfx/template" },
     { "path": "../gfx/text" },

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

@@ -10,6 +10,7 @@ import { literal } from 'lit/static-html.js';
 import { AttachmentDropOption } from './attachment-service.js';
 import { attachmentSlashMenuConfig } from './configs/slash-menu.js';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
+import { EdgelessClipboardAttachmentConfig } from './edgeless-clipboard-config';
 import { effects } from './effects.js';
 import {
   AttachmentEmbedConfigExtension,
@@ -41,5 +42,8 @@ export class AttachmentViewExtension extends ViewExtensionProvider {
       SlashMenuConfigExtension(flavour, attachmentSlashMenuConfig),
       ...createBuiltinToolbarConfigExtension(flavour),
     ]);
+    if (this.isEdgeless(context.scope)) {
+      context.register(EdgelessClipboardAttachmentConfig);
+    }
   }
 }

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

@@ -8,6 +8,7 @@ import { literal } from 'lit/static-html.js';
 
 import { BookmarkSlashMenuConfigExtension } from './configs/slash-menu';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
+import { EdgelessClipboardBookmarkConfig } from './edgeless-clipboard-config';
 import { effects } from './effects';
 
 const flavour = BookmarkBlockSchema.model.flavour;
@@ -32,5 +33,9 @@ export class BookmarkViewExtension extends ViewExtensionProvider {
       BookmarkSlashMenuConfigExtension,
     ]);
     context.register(createBuiltinToolbarConfigExtension(flavour));
+    const isEdgeless = this.isEdgeless(context.scope);
+    if (isEdgeless) {
+      context.register(EdgelessClipboardBookmarkConfig);
+    }
   }
 }

blocksuite/affine/blocks/edgeless-text/src/view.ts

@@ -5,6 +5,7 @@ import {
 import { BlockViewExtension } from '@blocksuite/std';
 import { literal } from 'lit/static-html.js';
 
+import { EdgelessClipboardEdgelessTextConfig } from './edgeless-clipboard-config';
 import { edgelessTextToolbarExtension } from './edgeless-toolbar';
 import { effects } from './effects';
 
@@ -28,6 +29,7 @@ export class EdgelessTextViewExtension extends ViewExtensionProvider {
         ),
       ]);
       context.register(edgelessTextToolbarExtension);
+      context.register(EdgelessClipboardEdgelessTextConfig);
     }
   }
 }

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

@@ -4,14 +4,39 @@ import {
 } from '@blocksuite/affine-ext-loader';
 
 import { effects } from './effects';
-import { EmbedFigmaViewExtensions } from './embed-figma-block';
+import {
-import { EmbedGithubViewExtensions } from './embed-github-block';
+  EdgelessClipboardEmbedFigmaConfig,
-import { EmbedHtmlViewExtensions } from './embed-html-block';
+  EmbedFigmaViewExtensions,
-import { EmbedIframeViewExtensions } from './embed-iframe-block';
+} from './embed-figma-block';
-import { EmbedLinkedDocViewExtensions } from './embed-linked-doc-block';
+import {
-import { EmbedLoomViewExtensions } from './embed-loom-block';
+  EdgelessClipboardEmbedGithubConfig,
-import { EmbedSyncedDocViewExtensions } from './embed-synced-doc-block';
+  EmbedGithubViewExtensions,
-import { EmbedYoutubeViewExtensions } from './embed-youtube-block';
+} from './embed-github-block';
+import {
+  EdgelessClipboardEmbedHtmlConfig,
+  EmbedHtmlViewExtensions,
+} from './embed-html-block';
+import {
+  EdgelessClipboardEmbedIframeConfig,
+  EmbedIframeViewExtensions,
+} from './embed-iframe-block';
+import {
+  EdgelessClipboardEmbedLinkedDocConfig,
+  EmbedLinkedDocViewExtensions,
+} from './embed-linked-doc-block';
+import {
+  EdgelessClipboardEmbedLoomConfig,
+  EmbedLoomViewExtensions,
+} from './embed-loom-block';
+import {
+  EdgelessClipboardEmbedSyncedDocConfig,
+  EmbedSyncedDocViewExtensions,
+} from './embed-synced-doc-block';
+import {
+  EdgelessClipboardEmbedYoutubeConfig,
+  EmbedYoutubeViewExtensions,
+} from './embed-youtube-block';
+
 export class EmbedViewExtension extends ViewExtensionProvider {
   override name = 'affine-embed-block';
 
@@ -30,5 +55,18 @@ export class EmbedViewExtension extends ViewExtensionProvider {
     context.register(EmbedLinkedDocViewExtensions);
     context.register(EmbedSyncedDocViewExtensions);
     context.register(EmbedIframeViewExtensions);
+    const isEdgeless = this.isEdgeless(context.scope);
+    if (isEdgeless) {
+      context.register([
+        EdgelessClipboardEmbedFigmaConfig,
+        EdgelessClipboardEmbedGithubConfig,
+        EdgelessClipboardEmbedHtmlConfig,
+        EdgelessClipboardEmbedLoomConfig,
+        EdgelessClipboardEmbedYoutubeConfig,
+        EdgelessClipboardEmbedIframeConfig,
+        EdgelessClipboardEmbedLinkedDocConfig,
+        EdgelessClipboardEmbedSyncedDocConfig,
+      ]);
+    }
   }
 }

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

@@ -3,6 +3,7 @@ import {
   ViewExtensionProvider,
 } from '@blocksuite/affine-ext-loader';
 
+import { EdgelessClipboardFrameConfig } from './edgeless-clipboard-config';
 import { frameQuickTool } from './edgeless-toolbar';
 import { effects } from './effects';
 import { FrameHighlightManager } from './frame-highlight-manager';
@@ -30,6 +31,7 @@ export class FrameViewExtension extends ViewExtensionProvider {
       context.register(frameQuickTool);
       context.register(frameToolbarExtension);
       context.register(edgelessNavigatorBgWidget);
+      context.register(EdgelessClipboardFrameConfig);
     }
   }
 }

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

@@ -3,6 +3,7 @@ import {
   ViewExtensionProvider,
 } from '@blocksuite/affine-ext-loader';
 
+import { EdgelessClipboardImageConfig } from './edgeless-clipboard-config';
 import { effects } from './effects';
 import { ImageBlockSpec } from './image-spec';
 
@@ -17,5 +18,8 @@ export class ImageViewExtension extends ViewExtensionProvider {
   override setup(context: ViewExtensionContext) {
     super.setup(context);
     context.register(ImageBlockSpec);
+    if (this.isEdgeless(context.scope)) {
+      context.register(EdgelessClipboardImageConfig);
+    }
   }
 }

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

@@ -8,6 +8,7 @@ import { literal } from 'lit/static-html.js';
 
 import { NoteSlashMenuConfigExtension } from './configs/slash-menu';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
+import { EdgelessClipboardNoteConfig } from './edgeless-clipboard-config';
 import { effects } from './effects';
 import { NoteKeymapExtension } from './note-keymap';
 
@@ -29,17 +30,14 @@ export class NoteViewExtension extends ViewExtensionProvider {
       NoteKeymapExtension,
     ]);
 
-    const scope = context.scope;
+    const isEdgeless = this.isEdgeless(context.scope);
-    const isEdgeless =
-      scope === 'edgeless' ||
-      scope === 'preview-edgeless' ||
-      scope === 'mobile-edgeless';
 
     if (isEdgeless) {
       context.register(
         BlockViewExtension(flavour, literal`affine-edgeless-note`)
       );
       context.register(createBuiltinToolbarConfigExtension(flavour));
+      context.register(EdgelessClipboardNoteConfig);
     } else {
       context.register(BlockViewExtension(flavour, literal`affine-note`));
     }

blocksuite/affine/blocks/root/package.json

@@ -27,6 +27,7 @@
     "@blocksuite/affine-gfx-group": "workspace:*",
     "@blocksuite/affine-gfx-mindmap": "workspace:*",
     "@blocksuite/affine-gfx-note": "workspace:*",
+    "@blocksuite/affine-gfx-pointer": "workspace:*",
     "@blocksuite/affine-gfx-shape": "workspace:*",
     "@blocksuite/affine-gfx-text": "workspace:*",
     "@blocksuite/affine-inline-preset": "workspace:*",

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

@@ -1,3 +1,7 @@
+import {
+  DefaultModeDragType,
+  DefaultTool,
+} from '@blocksuite/affine-gfx-pointer';
 import type { RootBlockModel } from '@blocksuite/affine-model';
 import { WidgetComponent } from '@blocksuite/std';
 import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
@@ -5,11 +9,6 @@ import { cssVarV2 } from '@toeverything/theme/v2';
 import { css, html, nothing, unsafeCSS } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import {
-  DefaultModeDragType,
-  DefaultTool,
-} from '../../gfx-tool/default-tool.js';
-
 export const EDGELESS_DRAGGING_AREA_WIDGET = 'edgeless-dragging-area-rect';
 
 export class EdgelessDraggingAreaRectWidget extends WidgetComponent<RootBlockModel> {

blocksuite/affine/blocks/root/src/edgeless/components/toolbar/tools.ts

@@ -3,16 +3,6 @@ import { html } from 'lit';
 
 import { buildLinkDenseMenu } from './link/link-dense-menu.js';
 
-const defaultQuickTool = QuickToolExtension('default', ({ block }) => {
-  return {
-    priority: 100,
-    type: 'default',
-    content: html`<edgeless-default-tool-button
-      .edgeless=${block}
-    ></edgeless-default-tool-button>`,
-  };
-});
-
 const linkQuickTool = QuickToolExtension('link', ({ block, gfx }) => {
   return {
     content: html`<edgeless-link-tool-button
@@ -22,4 +12,4 @@ const linkQuickTool = QuickToolExtension('link', ({ block, gfx }) => {
   };
 });
 
-export const quickTools = [defaultQuickTool, linkQuickTool];
+export const quickTools = [linkQuickTool];

blocksuite/affine/blocks/root/src/edgeless/components/utils.ts

@@ -9,21 +9,6 @@ export function generateCursorUrl(
   return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(${angle} 16 16)'%3E%3Cpath fill='white' d='M13.7,18.5h3.9l0-1.5c0-1.4-1.2-2.6-2.6-2.6h-1.5v3.9l-5.8-5.8l5.8-5.8v3.9h2.3c3.1,0,5.6,2.5,5.6,5.6v2.3h3.9l-5.8,5.8L13.7,18.5z'/%3E%3Cpath d='M20.4,19.4v-3.2c0-2.6-2.1-4.7-4.7-4.7h-3.2l0,0V9L9,12.6l3.6,3.6v-2.6l0,0H15c1.9,0,3.5,1.6,3.5,3.5v2.4l0,0h-2.6l3.6,3.6l3.6-3.6L20.4,19.4L20.4,19.4z'/%3E%3C/g%3E%3C/svg%3E") 16 16, ${fallback}`;
 }
 
-export function getCommonRectStyle(
-  rect: DOMRect,
-  active = false,
-  selected = false,
-  rotate = 0
-) {
-  return {
-    '--affine-border-width': `${active ? 2 : 1}px`,
-    width: `${rect.width}px`,
-    height: `${rect.height}px`,
-    transform: `translate(${rect.x}px, ${rect.y}px) rotate(${rotate}deg)`,
-    backgroundColor: !active && selected ? 'var(--affine-hover-color)' : '',
-  };
-}
-
 const RESIZE_CURSORS: CursorType[] = [
   'ew-resize',
   'nwse-resize',

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

@@ -1,45 +1,19 @@
-import type * as BrushEffect from '@blocksuite/affine-gfx-brush';
-import type * as NoteEffect from '@blocksuite/affine-gfx-note';
-import type * as ShapeEffect from '@blocksuite/affine-gfx-shape';
 import { InteractivityManager } from '@blocksuite/std/gfx';
 import type { ExtensionType } from '@blocksuite/store';
 
 import { EdgelessElementToolbarExtension } from './configs/toolbar';
 import { EdgelessRootBlockSpec } from './edgeless-root-spec.js';
-import { DefaultTool } from './gfx-tool/default-tool.js';
-import { EmptyTool } from './gfx-tool/empty-tool.js';
-import { PanTool } from './gfx-tool/pan-tool.js';
 import { AltCloneExtension } from './interact-extensions/clone-ext.js';
-import { SnapExtension } from './interact-extensions/snap-manager.js';
-import { EditPropsMiddlewareBuilder } from './middlewares/base.js';
-import { SnapOverlay } from './utils/snap-manager.js';
 
-declare type _GLOBAL_ =
+export const EdgelessEditExtensions: ExtensionType[] = [InteractivityManager];
-  | typeof NoteEffect
-  | typeof BrushEffect
-  | typeof ShapeEffect;
-
-export const EdgelessToolExtension: ExtensionType[] = [
-  DefaultTool,
-  PanTool,
-  EmptyTool,
-];
-
-export const EdgelessEditExtensions: ExtensionType[] = [
-  InteractivityManager,
-  SnapExtension,
-];
 
 export const EdgelessBuiltInManager: ExtensionType[] = [
-  SnapOverlay,
   AltCloneExtension,
-  EditPropsMiddlewareBuilder,
   EdgelessElementToolbarExtension,
 ].flat();
 
 export const EdgelessBuiltInSpecs: ExtensionType[] = [
   EdgelessRootBlockSpec,
-  EdgelessToolExtension,
   EdgelessBuiltInManager,
   EdgelessEditExtensions,
 ].flat();

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

@@ -1,19 +1,3 @@
-import { EdgelessClipboardAttachmentConfig } from '@blocksuite/affine-block-attachment';
-import { EdgelessClipboardBookmarkConfig } from '@blocksuite/affine-block-bookmark';
-import { EdgelessClipboardEdgelessTextConfig } from '@blocksuite/affine-block-edgeless-text';
-import {
-  EdgelessClipboardEmbedFigmaConfig,
-  EdgelessClipboardEmbedGithubConfig,
-  EdgelessClipboardEmbedHtmlConfig,
-  EdgelessClipboardEmbedIframeConfig,
-  EdgelessClipboardEmbedLinkedDocConfig,
-  EdgelessClipboardEmbedLoomConfig,
-  EdgelessClipboardEmbedSyncedDocConfig,
-  EdgelessClipboardEmbedYoutubeConfig,
-} from '@blocksuite/affine-block-embed';
-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 {
   BlockViewExtension,
@@ -63,30 +47,12 @@ class EdgelessLocker extends LifeCycleWatcher {
   }
 }
 
-const EdgelessClipboardConfigs: ExtensionType[] = [
-  EdgelessClipboardNoteConfig,
-  EdgelessClipboardEdgelessTextConfig,
-  EdgelessClipboardImageConfig,
-  EdgelessClipboardFrameConfig,
-  EdgelessClipboardAttachmentConfig,
-  EdgelessClipboardBookmarkConfig,
-  EdgelessClipboardEmbedFigmaConfig,
-  EdgelessClipboardEmbedGithubConfig,
-  EdgelessClipboardEmbedHtmlConfig,
-  EdgelessClipboardEmbedLoomConfig,
-  EdgelessClipboardEmbedYoutubeConfig,
-  EdgelessClipboardEmbedIframeConfig,
-  EdgelessClipboardEmbedLinkedDocConfig,
-  EdgelessClipboardEmbedSyncedDocConfig,
-];
-
 const EdgelessCommonExtension: ExtensionType[] = [
   CommonSpecs,
   ToolController,
   EdgelessRootService,
   ViewportElementExtension('.affine-edgeless-viewport'),
   ...quickTools,
-  ...EdgelessClipboardConfigs,
 ].flat();
 
 export const EdgelessRootBlockSpec: ExtensionType[] = [

blocksuite/affine/blocks/root/src/edgeless/gfx-tool/index.ts

@@ -1,3 +0,0 @@
-export { DefaultTool } from './default-tool.js';
-export { EmptyTool } from './empty-tool.js';
-export { PanTool, type PanToolOption } from './pan-tool.js';

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

@@ -3,7 +3,6 @@ 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 './gfx-tool';
 export * from './utils/clipboard-utils.js';
 export { sortEdgelessElements } from './utils/clone-utils.js';
 export { isCanvasElement } from './utils/query.js';

blocksuite/affine/blocks/root/src/edgeless/utils/query.ts

@@ -27,7 +27,6 @@ import type {
   GfxModel,
   GfxPrimitiveElementModel,
   GfxToolsFullOptionValue,
-  Viewport,
 } from '@blocksuite/std/gfx';
 import type { BlockModel } from '@blocksuite/store';
 
@@ -105,14 +104,6 @@ export function isEmbedIframeBlock(element: BlockModel | GfxModel | null) {
   );
 }
 
-export function isEmbeddedLinkBlock(element: BlockModel | GfxModel | null) {
-  return (
-    isEmbeddedBlock(element) &&
-    !isEmbedSyncedDocBlock(element) &&
-    !isEmbedLinkedDocBlock(element)
-  );
-}
-
 export function isEmbedGithubBlock(
   element: BlockModel | GfxModel | null
 ): element is EmbedGithubModel {
@@ -199,12 +190,6 @@ export function isConnectable(
   return !!element && element.connectable;
 }
 
-export function getSelectionBoxBound(viewport: Viewport, bound: Bound) {
-  const { w, h } = bound;
-  const [x, y] = viewport.toViewCoord(bound.x, bound.y);
-  return new DOMRect(x, y, w * viewport.zoom, h * viewport.zoom);
-}
-
 // https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
 export function getCursorMode(edgelessTool: GfxToolsFullOptionValue | null) {
   if (!edgelessTool) {

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

@@ -14,7 +14,6 @@ import {
 } from './edgeless/components/rects/edgeless-selected-rect.js';
 import { EdgelessSlideMenu } from './edgeless/components/toolbar/common/slide-menu.js';
 import { ToolbarArrowUpIcon } from './edgeless/components/toolbar/common/toolbar-arrow-up-icon.js';
-import { EdgelessDefaultToolButton } from './edgeless/components/toolbar/default/default-tool-button.js';
 import { EdgelessLinkToolButton } from './edgeless/components/toolbar/link/link-tool-button.js';
 import {
   EdgelessRootBlockComponent,
@@ -72,10 +71,6 @@ function registerWidgets() {
 
 function registerEdgelessToolbarComponents() {
   // Tool buttons
-  customElements.define(
-    'edgeless-default-tool-button',
-    EdgelessDefaultToolButton
-  );
   customElements.define('edgeless-link-tool-button', EdgelessLinkToolButton);
 
   // Menus
@@ -122,7 +117,6 @@ declare global {
     'edgeless-selected-rect': EdgelessSelectedRectWidget;
     'edgeless-slide-menu': EdgelessSlideMenu;
     'toolbar-arrow-up-icon': ToolbarArrowUpIcon;
-    'edgeless-default-tool-button': EdgelessDefaultToolButton;
     'edgeless-link-tool-button': EdgelessLinkToolButton;
     'affine-page-root': PageRootBlockComponent;
     'zoom-bar-toggle-button': ZoomBarToggleButton;

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

@@ -1,3 +1,8 @@
+import type * as BrushEffect from '@blocksuite/affine-gfx-brush';
+import type * as NoteEffect from '@blocksuite/affine-gfx-note';
+import type * as PointerEffect from '@blocksuite/affine-gfx-pointer';
+import type * as ShapeEffect from '@blocksuite/affine-gfx-shape';
+
 export * from './adapters';
 export * from './clipboard/index.js';
 export * from './common-specs/index.js';
@@ -12,3 +17,9 @@ export { RootService } from './root-service.js';
 export * from './types.js';
 export * from './utils/index.js';
 export * from './widgets/index.js';
+
+declare type _GLOBAL_ =
+  | typeof PointerEffect
+  | typeof NoteEffect
+  | typeof BrushEffect
+  | typeof ShapeEffect;

blocksuite/affine/blocks/root/tsconfig.json

@@ -24,6 +24,7 @@
     { "path": "../../gfx/group" },
     { "path": "../../gfx/mindmap" },
     { "path": "../../gfx/note" },
+    { "path": "../../gfx/pointer" },
     { "path": "../../gfx/shape" },
     { "path": "../../gfx/text" },
     { "path": "../../inlines/preset" },

blocksuite/affine/blocks/surface/src/extensions/edit-props-middleware-builder.ts

@@ -1,10 +1,11 @@
-import { getLastPropsKey } from '@blocksuite/affine-block-surface';
 import { EditPropsStore } from '@blocksuite/affine-shared/services';
 import {
   type SurfaceMiddleware,
   SurfaceMiddlewareBuilder,
 } from '@blocksuite/std/gfx';
 
+import { getLastPropsKey } from '../utils';
+
 export class EditPropsMiddlewareBuilder extends SurfaceMiddlewareBuilder {
   static override key = 'editProps';
 

blocksuite/affine/blocks/surface/src/extensions/index.ts

@@ -1,5 +1,6 @@
 export * from './clipboard-config';
 export * from './crud-extension';
+export * from './edit-props-middleware-builder';
 export * from './element-renderer';
 export * from './export-manager';
 export * from './legacy-slot-extension';

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

@@ -9,6 +9,7 @@ import { effects } from './effects';
 import {
   EdgelessCRUDExtension,
   EdgelessLegacySlotExtension,
+  EditPropsMiddlewareBuilder,
 } from './extensions';
 import { ExportManagerExtension } from './extensions/export-manager/export-manager';
 
@@ -32,6 +33,7 @@ export class SurfaceViewExtension extends ViewExtensionProvider {
       context.register(
         BlockViewExtension('affine:surface', literal`affine-surface`)
       );
+      context.register(EditPropsMiddlewareBuilder);
     } else {
       context.register(
         BlockViewExtension('affine:surface', literal`affine-surface-void`)

blocksuite/affine/gfx/pointer/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@blocksuite/affine-gfx-pointer",
+  "description": "Gfx pointer for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/std": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "@types/lodash-es": "^4.17.12",
+    "lit": "^3.2.0",
+    "lodash-es": "^4.17.21",
+    "minimatch": "^10.0.1",
+    "rxjs": "^7.8.1",
+    "yjs": "^13.6.21",
+    "zod": "^3.23.8"
+  },
+  "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/gfx/pointer/src/effects.ts

@@ -0,0 +1,8 @@
+import { EdgelessDefaultToolButton } from './quick-tool/default-tool-button';
+
+export function effects() {
+  customElements.define(
+    'edgeless-default-tool-button',
+    EdgelessDefaultToolButton
+  );
+}

blocksuite/affine/gfx/pointer/src/index.ts

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

blocksuite/affine/gfx/pointer/src/quick-tool/quick-tool.ts

@@ -0,0 +1,12 @@
+import { QuickToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { html } from 'lit';
+
+export const defaultQuickTool = QuickToolExtension('default', ({ block }) => {
+  return {
+    priority: 100,
+    type: 'default',
+    content: html`<edgeless-default-tool-button
+      .edgeless=${block}
+    ></edgeless-default-tool-button>`,
+  };
+});

blocksuite/affine/gfx/pointer/src/snap/snap-manager.ts

@@ -8,7 +8,7 @@ import {
   InteractivityExtension,
 } from '@blocksuite/std/gfx';
 
-import type { SnapOverlay } from '../utils/snap-manager';
+import type { SnapOverlay } from './snap-overlay';
 
 export class SnapExtension extends InteractivityExtension {
   static override key = 'snap-manager';

blocksuite/affine/gfx/pointer/src/tools/index.ts

@@ -0,0 +1,3 @@
+export * from './default-tool.js';
+export * from './empty-tool.js';
+export * from './pan-tool.js';

blocksuite/affine/gfx/pointer/src/view.ts

@@ -0,0 +1,31 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import { defaultQuickTool } from './quick-tool/quick-tool';
+import { SnapExtension } from './snap/snap-manager';
+import { SnapOverlay } from './snap/snap-overlay';
+import { DefaultTool, EmptyTool, PanTool } from './tools';
+
+export class PointerViewExtension extends ViewExtensionProvider {
+  override name = 'affine-pointer-gfx';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register(EmptyTool);
+    context.register(DefaultTool);
+    context.register(PanTool);
+    if (this.isEdgeless(context.scope)) {
+      context.register(defaultQuickTool);
+      context.register(SnapExtension);
+      context.register(SnapOverlay);
+    }
+  }
+}

blocksuite/affine/gfx/pointer/tsconfig.json

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

blocksuite/affine/shared/src/services/toolbar-service/context.ts

@@ -146,9 +146,11 @@ abstract class ToolbarContextBase {
     if (this.hasSelectedSurfaceModels) {
       const flavour = this.flavour$.peek();
       const elementsMap = this.elementsMap$.peek();
-      const elements = ['affine:surface', 'affine:surface:locked'].includes(
+      const elements = [
-        flavour
+        'affine:surface',
-      )
+        'affine:surface:locked',
+        'affine:surface:alignment',
+      ].includes(flavour)
         ? Array.from(elementsMap.values()).flat()
         : elementsMap.get(flavour);
       return elements ?? [];

blocksuite/integration-test/src/__tests__/edgeless/color-picker.spec.ts

@@ -1,4 +1,5 @@
 import '@toeverything/theme/style.css';
+import '@blocksuite/affine/gfx/pointer';
 
 import type { EdgelessRootBlockComponent } from '@blocksuite/affine/blocks/root';
 import { ColorScheme } from '@blocksuite/affine/model';

packages/frontend/core/src/blocksuite/ai/actions/edgeless-handler.ts

@@ -1,4 +1,5 @@
 import { splitElements } from '@blocksuite/affine/blocks/root';
+import type * as PointerEffect from '@blocksuite/affine/gfx/pointer';
 import {
   CodeBlockModel,
   EdgelessTextBlockModel,
@@ -48,6 +49,8 @@ import {
   getToolbar,
 } from './edgeless-response';
 
+declare type _GLOBAL_ = typeof PointerEffect;
+
 async function getContentFromEmbedSyncedDocModel(
   host: EditorHost,
   models: EmbedSyncedDocModel[]

packages/frontend/core/src/blocksuite/ai/extensions/ai-edgeless-root.ts

@@ -1,51 +1,11 @@
-import { EdgelessRootBlockSpec } from '@blocksuite/affine/blocks/root';
+import { LifeCycleWatcher } from '@blocksuite/affine/std';
-import { ToolbarModuleExtension } from '@blocksuite/affine/shared/services';
-import {
-  BlockFlavourIdentifier,
-  LifeCycleWatcher,
-} from '@blocksuite/affine/std';
-import type { ExtensionType } from '@blocksuite/affine/store';
 import type { FrameworkProvider } from '@toeverything/infra';
 
 import { buildAIPanelConfig } from '../ai-panel';
-import { toolbarAIEntryConfig } from '../entries';
+import { setupEdgelessCopilot } from '../entries/edgeless/index';
-import {
-  edgelessToolbarAIEntryConfig,
-  setupEdgelessCopilot,
-} from '../entries/edgeless/index';
 import { setupSpaceAIEntry } from '../entries/space/setup-space';
-import { CopilotTool } from '../tool/copilot-tool';
+import { AffineAIPanelWidget } from '../widgets/ai-panel/ai-panel';
-import {
+import { EdgelessCopilotWidget } from '../widgets/edgeless-copilot';
-  AffineAIPanelWidget,
-  aiPanelWidget,
-} from '../widgets/ai-panel/ai-panel';
-import {
-  EdgelessCopilotWidget,
-  edgelessCopilotWidget,
-} from '../widgets/edgeless-copilot';
-import { AiSlashMenuConfigExtension } from './ai-slash-menu';
-
-export function createAIEdgelessRootBlockSpec(
-  framework: FrameworkProvider
-): ExtensionType[] {
-  return [
-    ...EdgelessRootBlockSpec,
-    CopilotTool,
-    aiPanelWidget,
-    edgelessCopilotWidget,
-    getAIEdgelessRootWatcher(framework),
-    // In note
-    ToolbarModuleExtension({
-      id: BlockFlavourIdentifier('custom:affine:note'),
-      config: toolbarAIEntryConfig(),
-    }),
-    ToolbarModuleExtension({
-      id: BlockFlavourIdentifier('custom:affine:surface:*'),
-      config: edgelessToolbarAIEntryConfig(),
-    }),
-    AiSlashMenuConfigExtension(),
-  ];
-}
 
 export function getAIEdgelessRootWatcher(framework: FrameworkProvider) {
   class AIEdgelessRootWatcher extends LifeCycleWatcher {

tests/affine-cloud-copilot/e2e/utils/chat-panel-utils.ts

@@ -218,9 +218,10 @@ export class ChatPanelUtils {
 
     for (const attachment of attachments) {
       const fileChooserPromise = page.waitForEvent('filechooser');
-      const withButton = await page.getByTestId('chat-panel-with-button');
+      const withButton = page.getByTestId('chat-panel-with-button');
+      await withButton.hover();
       await withButton.click();
-      const withMenu = await page.getByTestId('ai-add-popover');
+      const withMenu = page.getByTestId('ai-add-popover');
       await withMenu.getByTestId('ai-chat-with-files').click();
       const fileChooser = await fileChooserPromise;
       await fileChooser.setFiles(attachment);
@@ -231,8 +232,8 @@ export class ChatPanelUtils {
         .evaluateAll(elements =>
           elements.map(el => el.getAttribute('data-state'))
         );
-      await expect(states).toHaveLength(attachments.length);
+      expect(states).toHaveLength(attachments.length);
-      await expect(states.every(state => state === 'finished')).toBe(true);
+      expect(states.every(state => state === 'finished')).toBe(true);
     }).toPass({ timeout: 20000 });
 
     await this.makeChat(page, text);

tools/utils/src/workspace.gen.ts

@@ -34,6 +34,7 @@ export const PackageList = [
       'blocksuite/affine/gfx/group',
       'blocksuite/affine/gfx/mindmap',
       'blocksuite/affine/gfx/note',
+      'blocksuite/affine/gfx/pointer',
       'blocksuite/affine/gfx/shape',
       'blocksuite/affine/gfx/template',
       'blocksuite/affine/gfx/text',
@@ -337,6 +338,7 @@ export const PackageList = [
       'blocksuite/affine/gfx/group',
       'blocksuite/affine/gfx/mindmap',
       'blocksuite/affine/gfx/note',
+      'blocksuite/affine/gfx/pointer',
       'blocksuite/affine/gfx/shape',
       'blocksuite/affine/gfx/text',
       'blocksuite/affine/inlines/preset',
@@ -567,6 +569,22 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/gfx/pointer',
+    name: '@blocksuite/affine-gfx-pointer',
+    workspaceDependencies: [
+      'blocksuite/affine/blocks/surface',
+      'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
+      'blocksuite/affine/model',
+      'blocksuite/affine/rich-text',
+      'blocksuite/affine/shared',
+      'blocksuite/affine/widgets/edgeless-toolbar',
+      'blocksuite/framework/global',
+      'blocksuite/framework/std',
+      'blocksuite/framework/store',
+    ],
+  },
   {
     location: 'blocksuite/affine/gfx/shape',
     name: '@blocksuite/affine-gfx-shape',
@@ -1304,6 +1322,7 @@ export type PackageName =
   | '@blocksuite/affine-gfx-group'
   | '@blocksuite/affine-gfx-mindmap'
   | '@blocksuite/affine-gfx-note'
+  | '@blocksuite/affine-gfx-pointer'
   | '@blocksuite/affine-gfx-shape'
   | '@blocksuite/affine-gfx-template'
   | '@blocksuite/affine-gfx-text'

tsconfig.json

@@ -81,6 +81,7 @@
     { "path": "./blocksuite/affine/gfx/group" },
     { "path": "./blocksuite/affine/gfx/mindmap" },
     { "path": "./blocksuite/affine/gfx/note" },
+    { "path": "./blocksuite/affine/gfx/pointer" },
     { "path": "./blocksuite/affine/gfx/shape" },
     { "path": "./blocksuite/affine/gfx/template" },
     { "path": "./blocksuite/affine/gfx/text" },

yarn.lock

@@ -2853,6 +2853,7 @@ __metadata:
     "@blocksuite/affine-gfx-group": "workspace:*"
     "@blocksuite/affine-gfx-mindmap": "workspace:*"
     "@blocksuite/affine-gfx-note": "workspace:*"
+    "@blocksuite/affine-gfx-pointer": "workspace:*"
     "@blocksuite/affine-gfx-shape": "workspace:*"
     "@blocksuite/affine-gfx-text": "workspace:*"
     "@blocksuite/affine-inline-preset": "workspace:*"
@@ -3248,6 +3249,34 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-gfx-pointer@workspace:*, @blocksuite/affine-gfx-pointer@workspace:blocksuite/affine/gfx/pointer":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-gfx-pointer@workspace:blocksuite/affine/gfx/pointer"
+  dependencies:
+    "@blocksuite/affine-block-surface": "workspace:*"
+    "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-rich-text": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/std": "workspace:*"
+    "@blocksuite/store": "workspace:*"
+    "@lit/context": "npm:^1.1.2"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.12"
+    "@types/lodash-es": "npm:^4.17.12"
+    lit: "npm:^3.2.0"
+    lodash-es: "npm:^4.17.21"
+    minimatch: "npm:^10.0.1"
+    rxjs: "npm:^7.8.1"
+    yjs: "npm:^13.6.21"
+    zod: "npm:^3.23.8"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-gfx-shape@workspace:*, @blocksuite/affine-gfx-shape@workspace:blocksuite/affine/gfx/shape":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-gfx-shape@workspace:blocksuite/affine/gfx/shape"
@@ -3905,6 +3934,7 @@ __metadata:
     "@blocksuite/affine-gfx-group": "workspace:*"
     "@blocksuite/affine-gfx-mindmap": "workspace:*"
     "@blocksuite/affine-gfx-note": "workspace:*"
+    "@blocksuite/affine-gfx-pointer": "workspace:*"
     "@blocksuite/affine-gfx-shape": "workspace:*"
     "@blocksuite/affine-gfx-template": "workspace:*"
     "@blocksuite/affine-gfx-text": "workspace:*"