feat(editor): support member node (#11075)

Close [BS-2793](https://linear.app/affine-design/issue/BS-2793/inline-member)

blocksuite/affine/inlines/mention/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@blocksuite/affine-inline-mention",
+  "description": "Inline mention for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.8",
+    "@blocksuite/store": "workspace:*",
+    "@floating-ui/dom": "^1.6.13",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "@types/lodash-es": "^4.17.12",
+    "collapse-white-space": "^2.1.0",
+    "date-fns": "^4.0.0",
+    "lit": "^3.2.0",
+    "lit-html": "^3.2.1",
+    "lodash-es": "^4.17.21",
+    "rxjs": "^7.8.1",
+    "yjs": "^13.6.21",
+    "zod": "^3.23.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.20.0"
+}

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

@@ -0,0 +1,149 @@
+import { UserProvider } from '@blocksuite/affine-shared/services';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import type { BlockStdScope } from '@blocksuite/block-std';
+import { ShadowlessElement } from '@blocksuite/block-std';
+import {
+  ZERO_WIDTH_NON_JOINER,
+  ZERO_WIDTH_SPACE,
+} from '@blocksuite/block-std/inline';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
+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: 15px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 24px; /* 160% */
+      padding: 0 4px;
+      border-radius: 4px;
+    }
+    .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_NON_JOINER}></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_NON_JOINER}></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_NON_JOINER}
+          ></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_NON_JOINER}></v-text
+      ></span>`;
+    }
+
+    return errorContent;
+  }
+
+  @property({ type: Object })
+  accessor delta: DeltaInsert<AffineTextAttributes> = {
+    insert: ZERO_WIDTH_SPACE,
+    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/exts.ts

@@ -0,0 +1,7 @@
+import type { ExtensionType } from '@blocksuite/store';
+
+import { MentionInlineSpecExtension } from './inline-spec';
+
+export const inlineMentionExtensions: ExtensionType[] = [
+  MentionInlineSpecExtension,
+];

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

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

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

@@ -0,0 +1,32 @@
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { StdIdentifier } from '@blocksuite/block-std';
+import { InlineSpecExtension } from '@blocksuite/block-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({
+          member: z.string(),
+          notification: z.string(),
+        })
+        .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/tsconfig.json

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