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/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

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

blocksuite/affine/gfx/link/src/toolbar/link-dense-menu.ts

@@ -0,0 +1,32 @@
+import { insertLinkByQuickSearchCommand } from '@blocksuite/affine-block-bookmark';
+import { menu } from '@blocksuite/affine-components/context-menu';
+import { LinkIcon } from '@blocksuite/affine-components/icons';
+import { TelemetryProvider } from '@blocksuite/affine-shared/services';
+import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar';
+
+export const buildLinkDenseMenu: DenseMenuBuilder = edgeless =>
+  menu.action({
+    name: 'Link',
+    prefix: LinkIcon,
+    select: () => {
+      const [_, { insertedLinkType }] = edgeless.std.command.exec(
+        insertLinkByQuickSearchCommand
+      );
+
+      insertedLinkType
+        ?.then(type => {
+          const flavour = type?.flavour;
+          if (!flavour) return;
+
+          edgeless.std
+            .getOptional(TelemetryProvider)
+            ?.track('CanvasElementAdded', {
+              control: 'toolbar:general',
+              page: 'whiteboard editor',
+              module: 'toolbar',
+              type: flavour.split(':')[1],
+            });
+        })
+        .catch(console.error);
+    },
+  });

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

@@ -0,0 +1,91 @@
+import { insertLinkByQuickSearchCommand } from '@blocksuite/affine-block-bookmark';
+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,
+    .link-icon > svg {
+      width: 24px;
+      height: 24px;
+    }
+  `;
+
+  override type = 'default' as const;
+
+  private _onClick() {
+    const [success, { insertedLinkType }] = this.edgeless.std.command.exec(
+      insertLinkByQuickSearchCommand
+    );
+
+    if (!success) {
+      // fallback to create a bookmark block with input modal
+      toggleEmbedCardCreateModal(
+        this.edgeless.host,
+        'Links',
+        'The added link will be displayed as a card view.',
+        {
+          mode: 'edgeless',
+          onSave: url => {
+            insertEmbedCard(this.edgeless.std, {
+              flavour: 'affine:bookmark',
+              targetStyle: 'vertical',
+              props: { url },
+            });
+          },
+        }
+      ).catch(console.error);
+      return;
+    }
+
+    insertedLinkType
+      ?.then(type => {
+        const flavour = type?.flavour;
+        if (!flavour) return;
+
+        this.edgeless.std
+          .getOptional(TelemetryProvider)
+          ?.track('CanvasElementAdded', {
+            control: 'toolbar:general',
+            page: 'whiteboard editor',
+            module: 'toolbar',
+            segment: 'toolbar',
+            type: flavour.split(':')[1],
+          });
+
+        this.edgeless.std
+          .getOptional(TelemetryProvider)
+          ?.track('LinkedDocCreated', {
+            control: 'links',
+            page: 'whiteboard editor',
+            module: 'edgeless toolbar',
+            segment: 'whiteboard',
+            type: flavour.split(':')[1],
+            other: 'existing doc',
+          });
+      })
+      .catch(console.error);
+  }
+
+  override render() {
+    return html`<edgeless-tool-icon-button
+      .iconContainerPadding="${6}"
+      .tooltip="${html`<affine-tooltip-content-with-shortcut
+        data-tip="${'Link'}"
+        data-shortcut="${'@'}"
+      ></affine-tooltip-content-with-shortcut>`}"
+      .tooltipOffset=${17}
+      class="edgeless-link-tool-button"
+      @click=${this._onClick}
+    >
+      <span class="link-icon">${LinkIcon}</span>
+    </edgeless-tool-icon-button>`;
+  }
+}

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