snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

blocksuite/affine/inlines/mention/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@blocksuite/affine-inline-mention",
+  "description": "Inline mention for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "yarn run -T tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/std": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "lit": "^3.2.0",
+    "zod": "^3.25.76"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./view": "./src/view.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.27.5"
+}

blocksuite/affine/inlines/mention/src/affine-mention.ts

@@ -0,0 +1,150 @@
+import { UserProvider } from '@blocksuite/affine-shared/services';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
+import type { BlockStdScope } from '@blocksuite/std';
+import { ShadowlessElement } from '@blocksuite/std';
+import {
+  ZERO_WIDTH_FOR_EMBED_NODE,
+  ZERO_WIDTH_FOR_EMPTY_LINE,
+} from '@blocksuite/std/inline';
+import type { DeltaInsert } from '@blocksuite/store';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export class AffineMention extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
+  static override styles = css`
+    .affine-mention {
+      color: ${unsafeCSSVarV2('text/primary')};
+      font-feature-settings:
+        'liga' off,
+        'clig' off;
+      /* Client/baseMedium */
+      font-family: Inter;
+      font-size: var(--affine-font-size-base);
+      font-style: normal;
+      font-weight: 500;
+      line-height: 24px; /* 160% */
+      padding: 0 4px;
+      border-radius: 4px;
+      user-select: none;
+    }
+    .affine-mention:hover {
+      background: var(--affine-hover-color);
+    }
+    .affine-mention[data-selected='true'] {
+      background: var(--affine-hover-color);
+    }
+    .affine-mention[data-type='default'] {
+      color: ${unsafeCSSVarV2('text/primary')};
+    }
+    .affine-mention[data-type='removed'] {
+      color: ${unsafeCSSVarV2('text/disable')};
+    }
+    .affine-mention[data-type='error'] {
+      color: ${unsafeCSSVarV2('text/disable')};
+    }
+    .affine-mention[data-type='loading'] {
+      color: ${unsafeCSSVarV2('text/placeholder')};
+      background: ${unsafeCSSVarV2('skeleton/skeleton')};
+    }
+    .loading-text {
+      display: inline-block;
+    }
+    .dots {
+      display: inline-block;
+    }
+    .dot {
+      display: inline-block;
+      opacity: 0;
+      animation: pulse 1.2s infinite;
+    }
+    .dots > .dot:nth-child(2) {
+      animation-delay: 0.4s;
+    }
+    .dots > .dot:nth-child(3) {
+      animation-delay: 0.8s;
+    }
+    @keyframes pulse {
+      0% {
+        opacity: 0;
+      }
+      33.333% {
+        opacity: 1;
+      }
+      66.666% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+  `;
+
+  override render() {
+    const errorContent = html`<span
+      data-selected=${this.selected}
+      data-type="error"
+      class="affine-mention"
+      >@Unknown Member<v-text .str=${ZERO_WIDTH_FOR_EMBED_NODE}></v-text
+    ></span>`;
+
+    const userService = this.std.getOptional(UserProvider);
+    const memberId = this.delta.attributes?.mention?.member;
+    if (!userService || !memberId) {
+      return errorContent;
+    }
+
+    userService.revalidateUserInfo(memberId);
+    const isLoading$ = userService.isLoading$(memberId);
+    const userInfo$ = userService.userInfo$(memberId);
+
+    if (userInfo$.value) {
+      if (userInfo$.value.removed) {
+        return html`<span
+          data-selected=${this.selected}
+          data-type="removed"
+          class="affine-mention"
+          >@Inactive Member<v-text .str=${ZERO_WIDTH_FOR_EMBED_NODE}></v-text
+        ></span>`;
+      } else {
+        return html`<span
+          data-selected=${this.selected}
+          data-type="default"
+          class="affine-mention"
+          >@${userInfo$.value.name ?? 'Unknown'}<v-text
+            .str=${ZERO_WIDTH_FOR_EMBED_NODE}
+          ></v-text
+        ></span>`;
+      }
+    }
+
+    if (isLoading$.value) {
+      return html`<span
+        data-selected=${this.selected}
+        data-type="loading"
+        class="affine-mention"
+        >@loading<span class="dots"
+          ><span class="dot">.</span><span class="dot">.</span
+          ><span class="dot">.</span></span
+        ><v-text .str=${ZERO_WIDTH_FOR_EMBED_NODE}></v-text
+      ></span>`;
+    }
+
+    return errorContent;
+  }
+
+  @property({ type: Object })
+  accessor delta: DeltaInsert<AffineTextAttributes> = {
+    insert: ZERO_WIDTH_FOR_EMPTY_LINE,
+    attributes: {},
+  };
+
+  @property({ type: Boolean })
+  accessor selected = false;
+
+  @property({ attribute: false })
+  accessor std!: BlockStdScope;
+}

blocksuite/affine/inlines/mention/src/effects.ts

@@ -0,0 +1,11 @@
+import { AffineMention } from './affine-mention';
+
+export function effects() {
+  customElements.define('affine-mention', AffineMention);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-mention': AffineMention;
+  }
+}

blocksuite/affine/inlines/mention/src/index.ts

@@ -0,0 +1,3 @@
+export * from './affine-mention';
+export * from './effects';
+export * from './inline-spec';

blocksuite/affine/inlines/mention/src/inline-spec.ts

@@ -0,0 +1,34 @@
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { StdIdentifier } from '@blocksuite/std';
+import { InlineSpecExtension } from '@blocksuite/std/inline';
+import { html } from 'lit';
+import { z } from 'zod';
+
+export const MentionInlineSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>('mention', provider => {
+    const std = provider.get(StdIdentifier);
+    return {
+      name: 'mention',
+      schema: z.object({
+        mention: z
+          .object({
+            member: z.string(),
+            notification: z.string().optional(),
+          })
+          .optional()
+          .nullable()
+          .catch(undefined),
+      }),
+      match: delta => {
+        return !!delta.attributes?.mention?.member;
+      },
+      renderer: ({ delta, selected }) => {
+        return html`<affine-mention
+          .delta=${delta}
+          .std=${std}
+          .selected=${selected}
+        ></affine-mention>`;
+      },
+      embed: true,
+    };
+  });

blocksuite/affine/inlines/mention/src/view.ts

@@ -0,0 +1,21 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import { MentionInlineSpecExtension } from './inline-spec';
+
+export class MentionViewExtension extends ViewExtensionProvider {
+  override name = 'affine-mention-inline';
+
+  override effect(): void {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext): void {
+    super.setup(context);
+    context.register(MentionInlineSpecExtension);
+  }
+}

blocksuite/affine/inlines/mention/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../ext-loader" },
+    { "path": "../../shared" },
+    { "path": "../../../framework/global" },
+    { "path": "../../../framework/std" },
+    { "path": "../../../framework/store" }
+  ]
+}