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

Closes: BS-3368  ## 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.
2026-02-04 08:38:34 +00:00 · 2025-04-29 03:19:37 +00:00
parent be28038e94
commit 4c84e6bac7
21 changed files with 181 additions and 28 deletions
--- a/blocksuite/affine/all/package.json
+++ b/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",
--- a/blocksuite/affine/all/src/extensions/view.ts
+++ b/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,
--- a/blocksuite/affine/all/src/gfx/link/index.ts
+++ b/blocksuite/affine/all/src/gfx/link/index.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-link';
--- a/blocksuite/affine/all/src/gfx/link/view.ts
+++ b/blocksuite/affine/all/src/gfx/link/view.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-link/view';
--- a/blocksuite/affine/all/tsconfig.json
+++ b/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" },
--- a/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-spec.ts
+++ b/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[] = [
--- a/blocksuite/affine/blocks/root/src/effects.ts
+++ b/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;
  }
 }
--- a/blocksuite/affine/gfx/link/package.json
+++ b/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"
+}
--- a/blocksuite/affine/gfx/link/src/effects.ts
+++ b/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);
+}
--- a/blocksuite/affine/gfx/link/src/index.ts
+++ b/blocksuite/affine/gfx/link/src/index.ts
@@ -0,0 +1 @@
+export {};
--- a/blocksuite/affine/blocks/root/src/edgeless/components/toolbar/tools.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/components/toolbar/tools.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];
--- a/blocksuite/affine/blocks/root/src/edgeless/components/toolbar/link/link-dense-menu.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/components/toolbar/link/link-dense-menu.ts
--- a/blocksuite/affine/blocks/root/src/edgeless/components/toolbar/link/link-tool-button.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/components/toolbar/link/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,
--- a/blocksuite/affine/gfx/link/src/view.ts
+++ b/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);
+    }
+  }
+}
--- a/blocksuite/affine/gfx/link/tsconfig.json
+++ b/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" }
+  ]
+}
--- a/blocksuite/affine/widgets/edgeless-toolbar/src/effects.ts
+++ b/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;
  }
 }
--- a/blocksuite/affine/blocks/root/src/edgeless/components/toolbar/common/slide-menu.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/components/toolbar/common/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 {
--- a/blocksuite/affine/blocks/root/src/edgeless/components/toolbar/common/toolbar-arrow-up-icon.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/components/toolbar/common/toolbar-arrow-up-icon.ts
--- a/tools/utils/src/workspace.gen.ts
+++ b/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'
--- a/tsconfig.json
+++ b/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" },
--- a/yarn.lock
+++ b/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:*"
				`@@ -0,0 +1 @@`
				`export * from '@blocksuite/affine-gfx-link';`