feat(editor): gfx link extension (#12046)

Closes: BS-3368

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

## Summary by CodeRabbit

- **New Features**
  - Introduced a new link tool extension, enabling enhanced link-related functionality within the edgeless workspace.
  - Added a new view extension for link tools, improving integration and usability in edgeless mode.

- **Chores**
  - Added a new package for link tool functionality with appropriate dependencies and exports.
  - Registered new custom elements for edgeless toolbars and link tools to support modular UI components.
  - Updated project configurations and workspace dependencies to include the new link tool module.

- **Refactor**
  - Removed unused quick tool exports and toolbar component registrations to streamline the edgeless extension codebase.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/all/package.json

@@ -38,6 +38,7 @@
     "@blocksuite/affine-gfx-brush": "workspace:*",
     "@blocksuite/affine-gfx-connector": "workspace:*",
     "@blocksuite/affine-gfx-group": "workspace:*",
+    "@blocksuite/affine-gfx-link": "workspace:*",
     "@blocksuite/affine-gfx-mindmap": "workspace:*",
     "@blocksuite/affine-gfx-note": "workspace:*",
     "@blocksuite/affine-gfx-pointer": "workspace:*",
@@ -205,6 +206,8 @@
     "./gfx/shape": "./src/gfx/shape/index.ts",
     "./gfx/shape/store": "./src/gfx/shape/store.ts",
     "./gfx/shape/view": "./src/gfx/shape/view.ts",
+    "./gfx/link": "./src/gfx/link/index.ts",
+    "./gfx/link/view": "./src/gfx/link/view.ts",
     "./gfx/note": "./src/gfx/note/index.ts",
     "./gfx/note/view": "./src/gfx/note/view.ts",
     "./gfx/mindmap": "./src/gfx/mindmap/index.ts",

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

@@ -20,6 +20,7 @@ import { FoundationViewExtension } from '@blocksuite/affine-foundation/view';
 import { BrushViewExtension } from '@blocksuite/affine-gfx-brush/view';
 import { ConnectorViewExtension } from '@blocksuite/affine-gfx-connector/view';
 import { GroupViewExtension } from '@blocksuite/affine-gfx-group/view';
+import { LinkViewExtension as GfxLinkViewExtension } from '@blocksuite/affine-gfx-link/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';
@@ -62,6 +63,7 @@ export function getInternalViewExtensions() {
     GroupViewExtension,
     TextViewExtension,
     TemplateViewExtension,
+    GfxLinkViewExtension,
 
     // Block
     AttachmentViewExtension,

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

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

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

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

blocksuite/affine/all/tsconfig.json

@@ -35,6 +35,7 @@
     { "path": "../gfx/brush" },
     { "path": "../gfx/connector" },
     { "path": "../gfx/group" },
+    { "path": "../gfx/link" },
     { "path": "../gfx/mindmap" },
     { "path": "../gfx/note" },
     { "path": "../gfx/pointer" },

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

@@ -13,7 +13,6 @@ import { EdgelessClipboardController } from './clipboard/clipboard.js';
 import { NOTE_SLICER_WIDGET } from './components/note-slicer/index.js';
 import { EDGELESS_DRAGGING_AREA_WIDGET } from './components/rects/edgeless-dragging-area-rect.js';
 import { EDGELESS_SELECTED_RECT_WIDGET } from './components/rects/edgeless-selected-rect.js';
-import { quickTools } from './components/toolbar/tools.js';
 import { EdgelessRootService } from './edgeless-root-service.js';
 
 export const edgelessDraggingAreaWidget = WidgetViewExtension(
@@ -45,7 +44,6 @@ const EdgelessCommonExtension: ExtensionType[] = [
   CommonSpecs,
   EdgelessRootService,
   ViewportElementExtension('.affine-edgeless-viewport'),
-  ...quickTools,
 ].flat();
 
 export const EdgelessRootBlockSpec: ExtensionType[] = [

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

@@ -12,9 +12,6 @@ import {
   EDGELESS_SELECTED_RECT_WIDGET,
   EdgelessSelectedRectWidget,
 } 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 { EdgelessLinkToolButton } from './edgeless/components/toolbar/link/link-tool-button.js';
 import {
   EdgelessRootBlockComponent,
   EdgelessRootPreviewBlockComponent,
@@ -25,7 +22,6 @@ import {
 export function effects() {
   // Register components by category
   registerRootComponents();
-  registerEdgelessToolbarComponents();
   registerMiscComponents();
 }
 
@@ -39,17 +35,6 @@ function registerRootComponents() {
   );
 }
 
-function registerEdgelessToolbarComponents() {
-  // Tool buttons
-  customElements.define('edgeless-link-tool-button', EdgelessLinkToolButton);
-
-  // Menus
-  customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
-
-  // Toolbar components
-  customElements.define('toolbar-arrow-up-icon', ToolbarArrowUpIcon);
-}
-
 function registerMiscComponents() {
   // Auto-complete components
   customElements.define(
@@ -81,9 +66,6 @@ declare global {
     'note-slicer': NoteSlicer;
     'edgeless-dragging-area-rect': EdgelessDraggingAreaRectWidget;
     'edgeless-selected-rect': EdgelessSelectedRectWidget;
-    'edgeless-slide-menu': EdgelessSlideMenu;
-    'toolbar-arrow-up-icon': ToolbarArrowUpIcon;
-    'edgeless-link-tool-button': EdgelessLinkToolButton;
     'affine-page-root': PageRootBlockComponent;
   }
 }

blocksuite/affine/gfx/link/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@blocksuite/affine-gfx-link",
+  "description": "Gfx link for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-bookmark": "workspace:*",
+    "@blocksuite/affine-block-embed": "workspace:*",
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-gfx-pointer": "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/link/src/effects.ts

@@ -0,0 +1,5 @@
+import { EdgelessLinkToolButton } from './toolbar/link-tool-button';
+
+export function effects() {
+  customElements.define('edgeless-link-tool-button', EdgelessLinkToolButton);
+}

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

@@ -0,0 +1 @@
+export {};

blocksuite/affine/gfx/link/src/link-tool.ts

@@ -1,9 +1,9 @@
 import { QuickToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { html } from 'lit';
 
-import { buildLinkDenseMenu } from './link/link-dense-menu.js';
+import { buildLinkDenseMenu } from './toolbar/link-dense-menu';
 
-const linkQuickTool = QuickToolExtension('link', ({ block, gfx }) => {
+export const linkQuickTool = QuickToolExtension('link', ({ block, gfx }) => {
   return {
     content: html`<edgeless-link-tool-button
       .edgeless=${block}
@@ -11,5 +11,3 @@ const linkQuickTool = QuickToolExtension('link', ({ block, gfx }) => {
     menu: buildLinkDenseMenu(block, gfx),
   };
 });
-
-export const quickTools = [linkQuickTool];

blocksuite/affine/gfx/link/src/toolbar/link-tool-button.ts

@@ -2,10 +2,13 @@ import { insertLinkByQuickSearchCommand } from '@blocksuite/affine-block-bookmar
 import { insertEmbedCard } from '@blocksuite/affine-block-embed';
 import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal';
 import { LinkIcon } from '@blocksuite/affine-components/icons';
+import type * as PointerEffect from '@blocksuite/affine-gfx-pointer';
 import { TelemetryProvider } from '@blocksuite/affine-shared/services';
 import { QuickToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { css, html, LitElement } from 'lit';
 
+declare type _GLOBAL_ = typeof PointerEffect;
+
 export class EdgelessLinkToolButton extends QuickToolMixin(LitElement) {
   static override styles = css`
     .link-icon,

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

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

blocksuite/affine/gfx/link/tsconfig.json

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

blocksuite/affine/widgets/edgeless-toolbar/src/effects.ts

@@ -4,6 +4,8 @@ import {
   EDGELESS_TOOLBAR_WIDGET,
   EdgelessToolbarWidget,
 } from './edgeless-toolbar';
+import { EdgelessSlideMenu } from './menu/slide-menu';
+import { ToolbarArrowUpIcon } from './menu/toolbar-arrow-up-icon';
 import { EdgelessFontFamilyPanel } from './panel/font-family-panel';
 import { EdgelessFontWeightAndStylePanel } from './panel/font-weight-and-style-panel';
 
@@ -16,6 +18,8 @@ export function effects() {
     EdgelessFontWeightAndStylePanel
   );
   customElements.define('edgeless-font-family-panel', EdgelessFontFamilyPanel);
+  customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
+  customElements.define('toolbar-arrow-up-icon', ToolbarArrowUpIcon);
 }
 
 declare global {
@@ -25,5 +29,7 @@ declare global {
     'edgeless-toolbar-widget': EdgelessToolbarWidget;
     'edgeless-font-weight-and-style-panel': EdgelessFontWeightAndStylePanel;
     'edgeless-font-family-panel': EdgelessFontFamilyPanel;
+    'edgeless-slide-menu': EdgelessSlideMenu;
+    'toolbar-arrow-up-icon': ToolbarArrowUpIcon;
   }
 }

blocksuite/affine/widgets/edgeless-toolbar/src/menu/slide-menu.ts

@@ -1,7 +1,3 @@
-import {
-  type EdgelessToolbarSlots,
-  edgelessToolbarSlotsContext,
-} from '@blocksuite/affine-widget-edgeless-toolbar';
 import { WithDisposable } from '@blocksuite/global/lit';
 import { ArrowRightSmallIcon } from '@blocksuite/icons/lit';
 import { consume } from '@lit/context';
@@ -9,6 +5,11 @@ import { css, html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import {
+  type EdgelessToolbarSlots,
+  edgelessToolbarSlotsContext,
+} from '../index';
+
 export class EdgelessSlideMenu extends WithDisposable(LitElement) {
   static override styles = css`
     :host {

tools/utils/src/workspace.gen.ts

@@ -33,6 +33,7 @@ export const PackageList = [
       'blocksuite/affine/gfx/brush',
       'blocksuite/affine/gfx/connector',
       'blocksuite/affine/gfx/group',
+      'blocksuite/affine/gfx/link',
       'blocksuite/affine/gfx/mindmap',
       'blocksuite/affine/gfx/note',
       'blocksuite/affine/gfx/pointer',
@@ -546,6 +547,25 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/gfx/link',
+    name: '@blocksuite/affine-gfx-link',
+    workspaceDependencies: [
+      'blocksuite/affine/blocks/bookmark',
+      'blocksuite/affine/blocks/embed',
+      'blocksuite/affine/blocks/surface',
+      'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
+      'blocksuite/affine/gfx/pointer',
+      '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/mindmap',
     name: '@blocksuite/affine-gfx-mindmap',
@@ -1377,6 +1397,7 @@ export type PackageName =
   | '@blocksuite/affine-gfx-brush'
   | '@blocksuite/affine-gfx-connector'
   | '@blocksuite/affine-gfx-group'
+  | '@blocksuite/affine-gfx-link'
   | '@blocksuite/affine-gfx-mindmap'
   | '@blocksuite/affine-gfx-note'
   | '@blocksuite/affine-gfx-pointer'

tsconfig.json

@@ -80,6 +80,7 @@
     { "path": "./blocksuite/affine/gfx/brush" },
     { "path": "./blocksuite/affine/gfx/connector" },
     { "path": "./blocksuite/affine/gfx/group" },
+    { "path": "./blocksuite/affine/gfx/link" },
     { "path": "./blocksuite/affine/gfx/mindmap" },
     { "path": "./blocksuite/affine/gfx/note" },
     { "path": "./blocksuite/affine/gfx/pointer" },

yarn.lock

@@ -3209,6 +3209,37 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-gfx-link@workspace:*, @blocksuite/affine-gfx-link@workspace:blocksuite/affine/gfx/link":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-gfx-link@workspace:blocksuite/affine/gfx/link"
+  dependencies:
+    "@blocksuite/affine-block-bookmark": "workspace:*"
+    "@blocksuite/affine-block-embed": "workspace:*"
+    "@blocksuite/affine-block-surface": "workspace:*"
+    "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
+    "@blocksuite/affine-gfx-pointer": "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-mindmap@workspace:*, @blocksuite/affine-gfx-mindmap@workspace:blocksuite/affine/gfx/mindmap":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-gfx-mindmap@workspace:blocksuite/affine/gfx/mindmap"
@@ -4020,6 +4051,7 @@ __metadata:
     "@blocksuite/affine-gfx-brush": "workspace:*"
     "@blocksuite/affine-gfx-connector": "workspace:*"
     "@blocksuite/affine-gfx-group": "workspace:*"
+    "@blocksuite/affine-gfx-link": "workspace:*"
     "@blocksuite/affine-gfx-mindmap": "workspace:*"
     "@blocksuite/affine-gfx-note": "workspace:*"
     "@blocksuite/affine-gfx-pointer": "workspace:*"