feat(blocks): add event tracking for linked doc (#8876)

Closes: [BS-2052](https://linear.app/affine-design/issue/BS-2052/增加埋点)

packages/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/link-popup.ts

@@ -1,14 +1,23 @@
 import type { EmbedOptions } from '@blocksuite/affine-shared/types';
 import type { InlineRange } from '@blocksuite/inline/types';
 
-import { EmbedOptionProvider } from '@blocksuite/affine-shared/services';
+import {
+  EmbedOptionProvider,
+  type LinkEventType,
+  type TelemetryEvent,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
 import {
   getHostName,
   isValidUrl,
   normalizeUrl,
   stopPropagation,
 } from '@blocksuite/affine-shared/utils';
-import { BLOCK_ID_ATTR, type BlockComponent } from '@blocksuite/block-std';
+import {
+  BLOCK_ID_ATTR,
+  type BlockComponent,
+  type BlockStdScope,
+} from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { computePosition, inline, offset, shift } from '@floating-ui/dom';
 import { html, LitElement, nothing } from 'lit';
@@ -75,7 +84,11 @@ export class LinkPopup extends WithDisposable(LitElement) {
   };
 
   private _edit = () => {
+    if (!this.host) return;
+
     this.type = 'edit';
+
+    track(this.host.std, 'OpenedAliasPopup', { control: 'edit' });
   };
 
   private _editTemplate = () => {
@@ -152,6 +165,24 @@ export class LinkPopup extends WithDisposable(LitElement) {
     this.abortController.abort();
   };
 
+  private _toggleViewSelector = (e: Event) => {
+    if (!this.host) return;
+
+    const opened = (e as CustomEvent<boolean>).detail;
+    if (!opened) return;
+
+    track(this.host.std, 'OpenedViewSelector', { control: 'switch view' });
+  };
+
+  private _trackViewSelected = (type: string) => {
+    if (!this.host) return;
+
+    track(this.host.std, 'SelectedView', {
+      control: 'select view',
+      type: `${type} view`,
+    });
+  };
+
   private _viewTemplate = () => {
     if (!this.currentLink) return;
 
@@ -191,7 +222,7 @@ export class LinkPopup extends WithDisposable(LitElement) {
         </editor-icon-button>
       `,
 
-      this._viewToggleMenu(),
+      this._viewSelector(),
 
       html`
         <editor-menu-button
@@ -354,6 +385,8 @@ export class LinkPopup extends WithDisposable(LitElement) {
     if (!this.host) return;
     toast(this.host, 'Copied link to clipboard');
     this.abortController.abort();
+
+    track(this.host.std, 'CopiedLink', { control: 'copy link' });
   }
 
   private _moreActions() {
@@ -449,7 +482,7 @@ export class LinkPopup extends WithDisposable(LitElement) {
     this.confirmButton.requestUpdate();
   }
 
-  private _viewToggleMenu() {
+  private _viewSelector() {
     if (!this._isBookmarkAllowed) return nothing;
 
     const buttons = [];
@@ -487,6 +520,7 @@ export class LinkPopup extends WithDisposable(LitElement) {
             ${SmallArrowDownIcon}
           </editor-icon-button>
         `}
+        @toggle=${this._toggleViewSelector}
       >
         <div data-size="small" data-orientation="vertical">
           ${repeat(
@@ -497,7 +531,10 @@ export class LinkPopup extends WithDisposable(LitElement) {
                 data-testid=${`link-to-${type}`}
                 ?data-selected=${type === 'inline'}
                 ?disabled=${type === 'inline'}
-                @click=${action}
+                @click=${() => {
+                  action?.();
+                  this._trackViewSelected(type);
+                }}
               >
                 ${label}
               </editor-menu-action>
@@ -637,3 +674,18 @@ export class LinkPopup extends WithDisposable(LitElement) {
   @property()
   accessor type: 'create' | 'edit' | 'view' = 'create';
 }
+
+function track(
+  std: BlockStdScope,
+  event: LinkEventType,
+  props: Partial<TelemetryEvent>
+) {
+  std.getOptional(TelemetryProvider)?.track(event, {
+    segment: 'toolbar',
+    page: 'doc editor',
+    module: 'link toolbar',
+    type: 'inline view',
+    category: 'link',
+    ...props,
+  });
+}

packages/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-alias-popup.ts

@@ -2,8 +2,13 @@ import type { ReferenceInfo } from '@blocksuite/affine-model';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import type { DeltaInsert, InlineRange } from '@blocksuite/inline';
 
+import {
+  type LinkEventType,
+  type TelemetryEvent,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
 import { FONT_XS, PANEL_BASE } from '@blocksuite/affine-shared/styles';
-import { ShadowlessElement } from '@blocksuite/block-std';
+import { type BlockStdScope, ShadowlessElement } from '@blocksuite/block-std';
 import {
   assertExists,
   SignalWatcher,
@@ -95,6 +100,8 @@ export class ReferenceAliasPopup extends SignalWatcher(
 
     this._setTitle(title);
 
+    track(this.std, 'SavedAlias', { control: 'save' });
+
     this.remove();
   };
 
@@ -124,6 +131,8 @@ export class ReferenceAliasPopup extends SignalWatcher(
 
     this._setTitle();
 
+    track(this.std, 'ResetedAlias', { control: 'reset' });
+
     this.remove();
   }
 
@@ -255,5 +264,23 @@ export class ReferenceAliasPopup extends SignalWatcher(
   @query('editor-icon-button.save')
   accessor saveButton!: EditorIconButton;
 
+  @property({ attribute: false })
+  accessor std!: BlockStdScope;
+
   accessor title$ = signal<string>('');
 }
+
+function track(
+  std: BlockStdScope,
+  event: LinkEventType,
+  props: Partial<TelemetryEvent>
+) {
+  std.getOptional(TelemetryProvider)?.track(event, {
+    segment: 'toolbar',
+    page: 'doc editor',
+    module: 'reference edit popup',
+    type: 'inline view',
+    category: 'linked doc',
+    ...props,
+  });
+}