From 25a2b94a43d34b91e07f2acf6271f1a9da142b9a Mon Sep 17 00:00:00 2001
From: Saul-Mirone <Saul-Mirone@outlook.com>
Date: Sat, 26 Apr 2025 01:21:49 +0000
Subject: [PATCH] feat(editor): edgeless auto connect widget extension (#11990)

Closes: BS-3221
Closes: BS-3222

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

- **New Features**
  - Introduced extensions that conditionally register edgeless auto-connect and toolbar widgets with associated effects based on the view context.
  - Added new exports for edgeless auto-connect and toolbar widget views, making them available for external use.

- **Chores**
  - Updated dependencies and project references to include the extension loader for improved module integration.
  - Refined workspace configuration to reflect new package dependencies.

- **Refactor**
  - Streamlined registration and effect logic by removing legacy integration points for edgeless auto-connect and toolbar widgets.
  - Reorganized widget export paths to a more modular directory structure.

- **Bug Fixes**
  - Disabled pointer events on the edgeless navigator black background to prevent interaction interference.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 blocksuite/affine/all/package.json            |  6 +++--
 .../affine/all/src/extensions/effects.ts      |  2 --
 blocksuite/affine/all/src/extensions/view.ts  |  5 +++-
 .../index.ts}                                 |  0
 .../src/widgets/edgeless-auto-connect/view.ts |  1 +
 .../index.ts}                                 |  0
 .../all/src/widgets/edgeless-toolbar/view.ts  |  1 +
 .../root/src/edgeless/edgeless-root-spec.ts   |  4 ----
 blocksuite/affine/blocks/root/src/effects.ts  |  2 --
 .../widgets/edgeless-navigator-bg/index.ts    |  1 +
 .../edgeless-auto-connect/package.json        |  4 +++-
 .../widgets/edgeless-auto-connect/src/view.ts | 23 +++++++++++++++++++
 .../edgeless-auto-connect/tsconfig.json       |  1 +
 .../widgets/edgeless-toolbar/package.json     |  4 +++-
 .../widgets/edgeless-toolbar/src/view.ts      | 23 +++++++++++++++++++
 .../widgets/edgeless-toolbar/tsconfig.json    |  1 +
 tools/utils/src/workspace.gen.ts              |  2 ++
 yarn.lock                                     |  2 ++
 18 files changed, 69 insertions(+), 13 deletions(-)
 rename blocksuite/affine/all/src/widgets/{edgeless-auto-connect.ts => edgeless-auto-connect/index.ts} (100%)
 create mode 100644 blocksuite/affine/all/src/widgets/edgeless-auto-connect/view.ts
 rename blocksuite/affine/all/src/widgets/{edgeless-toolbar.ts => edgeless-toolbar/index.ts} (100%)
 create mode 100644 blocksuite/affine/all/src/widgets/edgeless-toolbar/view.ts
 create mode 100644 blocksuite/affine/widgets/edgeless-auto-connect/src/view.ts
 create mode 100644 blocksuite/affine/widgets/edgeless-toolbar/src/view.ts

diff --git a/blocksuite/affine/all/package.json b/blocksuite/affine/all/package.json
index 2a410ffb03..cd7a29542e 100644
--- a/blocksuite/affine/all/package.json
+++ b/blocksuite/affine/all/package.json
@@ -164,8 +164,10 @@
     "./inlines/mention/view": "./src/inlines/mention/view.ts",
     "./widgets/drag-handle": "./src/widgets/drag-handle/index.ts",
     "./widgets/drag-handle/view": "./src/widgets/drag-handle/view.ts",
-    "./widgets/edgeless-auto-connect": "./src/widgets/edgeless-auto-connect.ts",
-    "./widgets/edgeless-toolbar": "./src/widgets/edgeless-toolbar.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-toolbar": "./src/widgets/edgeless-toolbar/index.ts",
+    "./widgets/edgeless-toolbar/view": "./src/widgets/edgeless-toolbar/view.ts",
     "./widgets/frame-title": "./src/widgets/frame-title.ts",
     "./widgets/linked-doc": "./src/widgets/linked-doc.ts",
     "./widgets/remote-selection": "./src/widgets/remote-selection.ts",
diff --git a/blocksuite/affine/all/src/extensions/effects.ts b/blocksuite/affine/all/src/extensions/effects.ts
index ed6ef682b6..2b77036e5b 100644
--- a/blocksuite/affine/all/src/extensions/effects.ts
+++ b/blocksuite/affine/all/src/extensions/effects.ts
@@ -29,7 +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 widgetEdgelessAutoConnectEffects } from '@blocksuite/affine-widget-edgeless-auto-connect/effects';
 import { effects as widgetFrameTitleEffects } from '@blocksuite/affine-widget-frame-title/effects';
 import { effects as widgetRemoteSelectionEffects } from '@blocksuite/affine-widget-remote-selection/effects';
 import { effects as widgetScrollAnchoringEffects } from '@blocksuite/affine-widget-scroll-anchoring/effects';
@@ -70,7 +69,6 @@ export function effects() {
   widgetScrollAnchoringEffects();
   widgetFrameTitleEffects();
   widgetRemoteSelectionEffects();
-  widgetEdgelessAutoConnectEffects();
   widgetSlashMenuEffects();
   widgetToolbarEffects();
 
diff --git a/blocksuite/affine/all/src/extensions/view.ts b/blocksuite/affine/all/src/extensions/view.ts
index 7b4fd1a48b..07d42acb89 100644
--- a/blocksuite/affine/all/src/extensions/view.ts
+++ b/blocksuite/affine/all/src/extensions/view.ts
@@ -31,6 +31,8 @@ import { MentionViewExtension } from '@blocksuite/affine-inline-mention/view';
 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 { EdgelessToolbarViewExtension } from '@blocksuite/affine-widget-edgeless-toolbar/view';
 
 import { MigratingViewExtension } from './migrating-view';
 
@@ -76,7 +78,8 @@ export function getInternalViewExtensions() {
 
     // Widget
     DragHandleViewExtension,
-
+    EdgelessAutoConnectViewExtension,
+    EdgelessToolbarViewExtension,
     MigratingViewExtension,
   ];
 }
diff --git a/blocksuite/affine/all/src/widgets/edgeless-auto-connect.ts b/blocksuite/affine/all/src/widgets/edgeless-auto-connect/index.ts
similarity index 100%
rename from blocksuite/affine/all/src/widgets/edgeless-auto-connect.ts
rename to blocksuite/affine/all/src/widgets/edgeless-auto-connect/index.ts
diff --git a/blocksuite/affine/all/src/widgets/edgeless-auto-connect/view.ts b/blocksuite/affine/all/src/widgets/edgeless-auto-connect/view.ts
new file mode 100644
index 0000000000..278bfbaa5a
--- /dev/null
+++ b/blocksuite/affine/all/src/widgets/edgeless-auto-connect/view.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-edgeless-auto-connect/view';
diff --git a/blocksuite/affine/all/src/widgets/edgeless-toolbar.ts b/blocksuite/affine/all/src/widgets/edgeless-toolbar/index.ts
similarity index 100%
rename from blocksuite/affine/all/src/widgets/edgeless-toolbar.ts
rename to blocksuite/affine/all/src/widgets/edgeless-toolbar/index.ts
diff --git a/blocksuite/affine/all/src/widgets/edgeless-toolbar/view.ts b/blocksuite/affine/all/src/widgets/edgeless-toolbar/view.ts
new file mode 100644
index 0000000000..d8ec56d6d4
--- /dev/null
+++ b/blocksuite/affine/all/src/widgets/edgeless-toolbar/view.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-edgeless-toolbar/view';
diff --git a/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-spec.ts b/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-spec.ts
index a08cde7a75..15c7545e56 100644
--- a/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-spec.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-spec.ts
@@ -15,8 +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 { autoConnectWidget } from '@blocksuite/affine-widget-edgeless-auto-connect';
-import { edgelessToolbarWidget } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { frameTitleWidget } from '@blocksuite/affine-widget-frame-title';
 import { edgelessRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection';
 import {
@@ -100,12 +98,10 @@ export const EdgelessRootBlockSpec: ExtensionType[] = [
   edgelessRemoteSelectionWidget,
   edgelessZoomToolbarWidget,
   frameTitleWidget,
-  autoConnectWidget,
   edgelessDraggingAreaWidget,
   noteSlicerWidget,
   edgelessNavigatorBgWidget,
   edgelessSelectedRectWidget,
-  edgelessToolbarWidget,
   EdgelessClipboardController,
 ];
 
diff --git a/blocksuite/affine/blocks/root/src/effects.ts b/blocksuite/affine/blocks/root/src/effects.ts
index 172a7584d1..6ac0e9c716 100644
--- a/blocksuite/affine/blocks/root/src/effects.ts
+++ b/blocksuite/affine/blocks/root/src/effects.ts
@@ -1,4 +1,3 @@
-import { effects as widgetEdgelessToolbarEffects } from '@blocksuite/affine-widget-edgeless-toolbar/effects';
 import { effects as widgetMobileToolbarEffects } from '@blocksuite/affine-widget-keyboard-toolbar/effects';
 import { effects as widgetLinkedDocEffects } from '@blocksuite/affine-widget-linked-doc/effects';
 
@@ -49,7 +48,6 @@ export function effects() {
   // Run other effects
   widgetMobileToolbarEffects();
   widgetLinkedDocEffects();
-  widgetEdgelessToolbarEffects();
 
   // Register components by category
   registerRootComponents();
diff --git a/blocksuite/affine/blocks/root/src/widgets/edgeless-navigator-bg/index.ts b/blocksuite/affine/blocks/root/src/widgets/edgeless-navigator-bg/index.ts
index 6fb0eb9571..ef52623775 100644
--- a/blocksuite/affine/blocks/root/src/widgets/edgeless-navigator-bg/index.ts
+++ b/blocksuite/affine/blocks/root/src/widgets/edgeless-navigator-bg/index.ts
@@ -19,6 +19,7 @@ export class EdgelessNavigatorBlackBackgroundWidget extends WidgetComponent<Root
       z-index: 1;
       background-color: transparent;
       box-shadow: 0 0 0 5000px black;
+      pointer-events: none;
     }
   `;
 
diff --git a/blocksuite/affine/widgets/edgeless-auto-connect/package.json b/blocksuite/affine/widgets/edgeless-auto-connect/package.json
index 48c6e931b7..8bff5fccc5 100644
--- a/blocksuite/affine/widgets/edgeless-auto-connect/package.json
+++ b/blocksuite/affine/widgets/edgeless-auto-connect/package.json
@@ -13,6 +13,7 @@
     "@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:*",
@@ -25,7 +26,8 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts"
   },
   "files": [
     "src",
diff --git a/blocksuite/affine/widgets/edgeless-auto-connect/src/view.ts b/blocksuite/affine/widgets/edgeless-auto-connect/src/view.ts
new file mode 100644
index 0000000000..fb86f35b7a
--- /dev/null
+++ b/blocksuite/affine/widgets/edgeless-auto-connect/src/view.ts
@@ -0,0 +1,23 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { autoConnectWidget } from '.';
+import { effects } from './effects';
+
+export class EdgelessAutoConnectViewExtension extends ViewExtensionProvider {
+  override name = 'affine-edgeless-auto-connect-widget';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    if (this.isEdgeless(context.scope)) {
+      context.register(autoConnectWidget);
+    }
+  }
+}
diff --git a/blocksuite/affine/widgets/edgeless-auto-connect/tsconfig.json b/blocksuite/affine/widgets/edgeless-auto-connect/tsconfig.json
index f8632a4156..79dd9d95d8 100644
--- a/blocksuite/affine/widgets/edgeless-auto-connect/tsconfig.json
+++ b/blocksuite/affine/widgets/edgeless-auto-connect/tsconfig.json
@@ -10,6 +10,7 @@
     { "path": "../../blocks/note" },
     { "path": "../../blocks/surface" },
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../../model" },
     { "path": "../../shared" },
     { "path": "../../../framework/global" },
diff --git a/blocksuite/affine/widgets/edgeless-toolbar/package.json b/blocksuite/affine/widgets/edgeless-toolbar/package.json
index 103e1bd2ea..9c6edbfa10 100644
--- a/blocksuite/affine/widgets/edgeless-toolbar/package.json
+++ b/blocksuite/affine/widgets/edgeless-toolbar/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-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
@@ -29,7 +30,8 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts"
   },
   "files": [
     "src",
diff --git a/blocksuite/affine/widgets/edgeless-toolbar/src/view.ts b/blocksuite/affine/widgets/edgeless-toolbar/src/view.ts
new file mode 100644
index 0000000000..087b5f3ace
--- /dev/null
+++ b/blocksuite/affine/widgets/edgeless-toolbar/src/view.ts
@@ -0,0 +1,23 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { edgelessToolbarWidget } from './edgeless-toolbar';
+import { effects } from './effects';
+
+export class EdgelessToolbarViewExtension extends ViewExtensionProvider {
+  override name = 'affine-edgeless-toolbar-widget';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    if (this.isEdgeless(context.scope)) {
+      context.register(edgelessToolbarWidget);
+    }
+  }
+}
diff --git a/blocksuite/affine/widgets/edgeless-toolbar/tsconfig.json b/blocksuite/affine/widgets/edgeless-toolbar/tsconfig.json
index 55ba24cb4b..179c2edda9 100644
--- a/blocksuite/affine/widgets/edgeless-toolbar/tsconfig.json
+++ b/blocksuite/affine/widgets/edgeless-toolbar/tsconfig.json
@@ -9,6 +9,7 @@
   "references": [
     { "path": "../../blocks/surface" },
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../../model" },
     { "path": "../../rich-text" },
     { "path": "../../shared" },
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index 1344ca7ade..18b7b6fe8c 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -777,6 +777,7 @@ export const PackageList = [
       'blocksuite/affine/blocks/note',
       'blocksuite/affine/blocks/surface',
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/model',
       'blocksuite/affine/shared',
       'blocksuite/framework/global',
@@ -789,6 +790,7 @@ export const PackageList = [
     workspaceDependencies: [
       'blocksuite/affine/blocks/surface',
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/model',
       'blocksuite/affine/rich-text',
       'blocksuite/affine/shared',
diff --git a/yarn.lock b/yarn.lock
index 23e031a189..5f1e2965e0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3668,6 +3668,7 @@ __metadata:
     "@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:*"
@@ -3686,6 +3687,7 @@ __metadata:
   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:*"