chore(server): down scale service (#13367 )

## Summary by CodeRabbit * **Chores** * Reduced the number of deployment replicas for web, graphql, sync, renderer, and doc components across all build types (stable, beta, canary).
fix(server): exclude outdated doc id style in embedding count (#13269 )
2026-02-04 08:38:34 +00:00 · 2025-07-30 17:31:40 +08:00 · 2025-07-21 10:58:29 +00:00 · 2025-07-21 10:35:13 +00:00 · 2025-07-21 10:24:33 +00:00 · 2025-07-21 10:07:32 +00:00
667 changed files with 21874 additions and 6111 deletions
--- a/.devcontainer/docker-compose.yml
+++ b/.devcontainer/docker-compose.yml
@@ -25,7 +25,7 @@ services:
    image: redis

  indexer:
-    image: manticoresearch/manticore:${MANTICORE_VERSION:-9.3.2}
+    image: manticoresearch/manticore:${MANTICORE_VERSION:-10.1.0}
    ulimits:
      nproc: 65535
      nofile:
--- a/.docker/dev/.env.example
+++ b/.docker/dev/.env.example
@@ -12,4 +12,4 @@ DB_DATABASE_NAME=affine
 # ELASTIC_PLATFORM=linux/arm64

 # manticoresearch
-MANTICORE_VERSION=9.3.2
+MANTICORE_VERSION=10.1.0
--- a/.docker/dev/README.md
+++ b/.docker/dev/README.md
@@ -15,13 +15,7 @@ yarn affine cert --install

 ```bash
 # certificates will be located at `./.docker/dev/certs/${domain}`
-yarn affine cert --domain dev.affine.fail
+yarn affine cert --domain affine.localhost
 ```

-### 3. Enable dns and nginx service in compose.yml
-
-### 4. Add custom dns server
-
-```bash
-echo "nameserver 127.0.0.1" | sudo tee /etc/resolver/dev.affine.fail
-```
+### 3. Enable nginx service in compose.yml
--- a/.docker/dev/compose.yml.example
+++ b/.docker/dev/compose.yml.example
@@ -26,7 +26,7 @@ services:

  # https://manual.manticoresearch.com/Starting_the_server/Docker
  manticoresearch:
-    image: manticoresearch/manticore:${MANTICORE_VERSION:-9.3.2}
+    image: manticoresearch/manticore:${MANTICORE_VERSION:-10.1.0}
    ports:
      - 9308:9308
    ulimits:
@@ -73,17 +73,6 @@ services:
  #     timeout: 10s
  #     retries: 120

-  # dns:
-  #   image: strm/dnsmasq
-  #   volumes:
-  #     - ./dnsmasq.conf:/etc/dnsmasq.d/local.conf
-  #   ports:
-  #     - "53:53/udp"
-  #   cap_add:
-  #     - NET_ADMIN
-  #   depends_on:
-  #     - nginx
-
  # nginx:
  #   image: nginx:alpine
  #   volumes:
--- a/.docker/dev/dnsmasq.conf
+++ b/.docker/dev/dnsmasq.conf
@@ -1,2 +0,0 @@
-log-queries
-address=/dev.affine.fail/127.0.0.1
--- a/.github/actions/deploy/deploy.mjs
+++ b/.github/actions/deploy/deploy.mjs
@@ -29,25 +29,25 @@ const isInternal = buildType === 'internal';

 const replicaConfig = {
  stable: {
-    web: 3,
-    graphql: Number(process.env.PRODUCTION_GRAPHQL_REPLICA) || 3,
-    sync: Number(process.env.PRODUCTION_SYNC_REPLICA) || 3,
-    renderer: Number(process.env.PRODUCTION_RENDERER_REPLICA) || 3,
-    doc: Number(process.env.PRODUCTION_DOC_REPLICA) || 3,
+    web: 2,
+    graphql: Number(process.env.PRODUCTION_GRAPHQL_REPLICA) || 2,
+    sync: Number(process.env.PRODUCTION_SYNC_REPLICA) || 2,
+    renderer: Number(process.env.PRODUCTION_RENDERER_REPLICA) || 2,
+    doc: Number(process.env.PRODUCTION_DOC_REPLICA) || 2,
  },
  beta: {
-    web: 2,
-    graphql: Number(process.env.BETA_GRAPHQL_REPLICA) || 2,
-    sync: Number(process.env.BETA_SYNC_REPLICA) || 2,
-    renderer: Number(process.env.BETA_RENDERER_REPLICA) || 2,
-    doc: Number(process.env.BETA_DOC_REPLICA) || 2,
+    web: 1,
+    graphql: Number(process.env.BETA_GRAPHQL_REPLICA) || 1,
+    sync: Number(process.env.BETA_SYNC_REPLICA) || 1,
+    renderer: Number(process.env.BETA_RENDERER_REPLICA) || 1,
+    doc: Number(process.env.BETA_DOC_REPLICA) || 1,
  },
  canary: {
-    web: 2,
-    graphql: 2,
-    sync: 2,
-    renderer: 2,
-    doc: 2,
+    web: 1,
+    graphql: 1,
+    sync: 1,
+    renderer: 1,
+    doc: 1,
  },
 };

--- a/.github/actions/setup-version/action.yml
+++ b/.github/actions/setup-version/action.yml
@@ -4,9 +4,15 @@ inputs:
  app-version:
    description: 'App Version'
    required: true
+  ios-app-version:
+    description: 'iOS App Store Version (Optional, use App version if empty)'
+    required: false
+    type: string
 runs:
  using: 'composite'
  steps:
    - name: 'Write Version'
      shell: bash
+      env:
+        IOS_APP_VERSION: ${{ inputs.ios-app-version }}
      run: ./scripts/set-version.sh ${{ inputs.app-version }}
--- a/.github/deployment/node/Dockerfile
+++ b/.github/deployment/node/Dockerfile
@@ -7,7 +7,10 @@ COPY ./packages/frontend/apps/mobile/dist /app/static/mobile
 WORKDIR /app

 RUN apt-get update && \
-  apt-get install -y --no-install-recommends openssl && \
+  apt-get install -y --no-install-recommends openssl libjemalloc2 && \
  rm -rf /var/lib/apt/lists/*

+# Enable jemalloc by preloading the library
+ENV LD_PRELOAD=libjemalloc.so.2
+
 CMD ["node", "./dist/main.js"]
--- a/.github/workflows/build-test.yml
+++ b/.github/workflows/build-test.yml
@@ -972,8 +972,8 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
-        shardTotal: [8]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+        shardTotal: [10]
    needs:
      - build-server-native
    services:
@@ -1064,24 +1064,36 @@ jobs:
      fail-fast: false
      matrix:
        tests:
-          - name: 'Cloud E2E Test 1/6'
+          - name: 'Cloud E2E Test 1/10'
            shard: 1
-            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=1/6
-          - name: 'Cloud E2E Test 2/6'
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=1/10
+          - name: 'Cloud E2E Test 2/10'
            shard: 2
-            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=2/6
-          - name: 'Cloud E2E Test 3/6'
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=2/10
+          - name: 'Cloud E2E Test 3/10'
            shard: 3
-            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=3/6
-          - name: 'Cloud E2E Test 4/6'
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=3/10
+          - name: 'Cloud E2E Test 4/10'
            shard: 4
-            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=4/6
-          - name: 'Cloud E2E Test 5/6'
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=4/10
+          - name: 'Cloud E2E Test 5/10'
            shard: 5
-            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=5/6
-          - name: 'Cloud E2E Test 6/6'
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=5/10
+          - name: 'Cloud E2E Test 6/10'
            shard: 6
-            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=6/6
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=6/10
+          - name: 'Cloud E2E Test 7/10'
+            shard: 7
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=7/10
+          - name: 'Cloud E2E Test 8/10'
+            shard: 8
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=8/10
+          - name: 'Cloud E2E Test 9/10'
+            shard: 9
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=9/10
+          - name: 'Cloud E2E Test 10/10'
+            shard: 10
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=10/10
          - name: 'Cloud Desktop E2E Test'
            shard: desktop
            script: |
--- a/.github/workflows/copilot-test.yml
+++ b/.github/workflows/copilot-test.yml
@@ -109,8 +109,8 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
-        shardTotal: [8]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+        shardTotal: [10]
    needs:
      - build-server-native
    services:
--- a/.github/workflows/release-desktop.yml
+++ b/.github/workflows/release-desktop.yml
@@ -465,7 +465,7 @@ jobs:
          name: ${{ env.RELEASE_VERSION }}
          draft: ${{ inputs.build-type == 'stable' }}
          prerelease: ${{ inputs.build-type != 'stable' }}
-          tag_name: ${{ env.RELEASE_VERSION}}
+          tag_name: v${{ env.RELEASE_VERSION}}
          files: |
            ./release/*
            ./release/.env.example
--- a/.github/workflows/release-mobile.yml
+++ b/.github/workflows/release-mobile.yml
@@ -12,6 +12,9 @@ on:
      build-type:
        type: string
        required: true
+      ios-app-version:
+        type: string
+        required: false

 env:
  BUILD_TYPE: ${{ inputs.build-type }}
@@ -78,7 +81,7 @@ jobs:
          path: packages/frontend/apps/android/dist

  ios:
-    runs-on: ${{ github.ref_name == 'canary' && 'macos-latest' || 'blaze/macos-14' }}
+    runs-on: 'macos-15'
    needs:
      - build-ios-web
    steps:
@@ -87,6 +90,7 @@ jobs:
        uses: ./.github/actions/setup-version
        with:
          app-version: ${{ inputs.app-version }}
+          ios-app-version: ${{ inputs.ios-app-version }}
      - name: 'Update Code Sign Identity'
        shell: bash
        run: ./packages/frontend/apps/ios/update_code_sign_identity.sh
@@ -106,7 +110,7 @@ jobs:
          enableScripts: false
      - uses: maxim-lobanov/setup-xcode@v1
        with:
-          xcode-version: 16.2
+          xcode-version: 16.4
      - name: Install Swiftformat
        run: brew install swiftformat
      - name: Cap sync
@@ -124,7 +128,6 @@ jobs:
          package: 'affine_mobile_native'
          no-build: 'true'
      - name: Testflight
-        if: ${{ env.BUILD_TYPE != 'stable' }}
        working-directory: packages/frontend/apps/ios/App
        run: |
          echo -n "${{ env.BUILD_PROVISION_PROFILE }}" | base64 --decode -o $PP_PATH
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -21,6 +21,10 @@ on:
        required: true
        type: boolean
        default: false
+      ios-app-version:
+        description: 'iOS App Store Version (Optional, use tag version if empty)'
+        required: false
+        type: string

 permissions:
  contents: write
@@ -30,6 +34,7 @@ permissions:
  packages: write
  security-events: write
  attestations: write
+  issues: write

 jobs:
  prepare:
@@ -70,6 +75,7 @@ jobs:
        with:
          secret: ${{ secrets.GITHUB_TOKEN }}
          approvers: forehalo,fengmk2
+          minimum-approvals: 1
          fail-on-denial: true
          issue-title: Please confirm to release docker image
          issue-body: |
@@ -117,3 +123,4 @@ jobs:
      build-type: ${{ needs.prepare.outputs.BUILD_TYPE }}
      app-version: ${{ needs.prepare.outputs.APP_VERSION }}
      git-short-hash: ${{ needs.prepare.outputs.GIT_SHORT_HASH }}
+      ios-app-version: ${{ inputs.ios-app-version }}
--- a/blocksuite/affine/all/package.json
+++ b/blocksuite/affine/all/package.json
@@ -266,6 +266,7 @@
    "./components/toggle-button": "./src/components/toggle-button.ts",
    "./components/toggle-switch": "./src/components/toggle-switch.ts",
    "./components/toolbar": "./src/components/toolbar.ts",
+    "./components/tooltip": "./src/components/tooltip.ts",
    "./components/view-dropdown-menu": "./src/components/view-dropdown-menu.ts",
    "./components/tooltip-content-with-shortcut": "./src/components/tooltip-content-with-shortcut.ts",
    "./components/resource": "./src/components/resource.ts",
--- a/blocksuite/affine/all/src/components/tooltip.ts
+++ b/blocksuite/affine/all/src/components/tooltip.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-components/tooltip';
--- a/blocksuite/affine/blocks/attachment/package.json
+++ b/blocksuite/affine/blocks/attachment/package.json
@@ -23,7 +23,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "file-type": "^21.0.0",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/blocks/attachment/src/attachment-block.ts
+++ b/blocksuite/affine/blocks/attachment/src/attachment-block.ts
@@ -17,7 +17,7 @@ import {
  AttachmentBlockStyles,
 } from '@blocksuite/affine-model';
 import {
-  BlockCommentManager,
+  BlockElementCommentManager,
  CitationProvider,
  DocModeProvider,
  FileSizeLimitProvider,
@@ -96,7 +96,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
  get isCommentHighlighted() {
    return (
      this.std
-        .getOptional(BlockCommentManager)
+        .getOptional(BlockElementCommentManager)
        ?.isBlockCommentHighlighted(this.model) ?? false
    );
  }
--- a/blocksuite/affine/blocks/attachment/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/attachment/src/configs/toolbar.ts
@@ -10,7 +10,6 @@ import {
 } from '@blocksuite/affine-shared/consts';
 import {
  ActionPlacement,
-  blockCommentToolbarButton,
  type ToolbarAction,
  type ToolbarActionGroup,
  type ToolbarModuleConfig,
@@ -241,10 +240,6 @@ const builtinToolbarConfig = {
    replaceAction,
    downloadAction,
    captionAction,
-    {
-      id: 'f.comment',
-      ...blockCommentToolbarButton,
-    },
    {
      placement: ActionPlacement.More,
      id: 'a.clipboard',
--- a/blocksuite/affine/blocks/bookmark/package.json
+++ b/blocksuite/affine/blocks/bookmark/package.json
@@ -24,7 +24,7 @@
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
    "rxjs": "^7.8.1",
--- a/blocksuite/affine/blocks/bookmark/src/bookmark-block.ts
+++ b/blocksuite/affine/blocks/bookmark/src/bookmark-block.ts
@@ -8,7 +8,7 @@ import type {
 } from '@blocksuite/affine-model';
 import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
 import {
-  BlockCommentManager,
+  BlockElementCommentManager,
  CitationProvider,
  DocModeProvider,
  LinkPreviewServiceIdentifier,
@@ -132,7 +132,7 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
  get isCommentHighlighted() {
    return (
      this.std
-        .getOptional(BlockCommentManager)
+        .getOptional(BlockElementCommentManager)
        ?.isBlockCommentHighlighted(this.model) ?? false
    );
  }
--- a/blocksuite/affine/blocks/bookmark/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/bookmark/src/configs/toolbar.ts
@@ -17,7 +17,6 @@ import {
 } from '@blocksuite/affine-shared/consts';
 import {
  ActionPlacement,
-  blockCommentToolbarButton,
  EmbedIframeService,
  EmbedOptionProvider,
  type LinkEventType,
@@ -289,10 +288,6 @@ const builtinToolbarConfig = {
      },
    } satisfies ToolbarActionGroup<ToolbarAction>,
    captionAction,
-    {
-      id: 'e.comment',
-      ...blockCommentToolbarButton,
-    },
    {
      placement: ActionPlacement.More,
      id: 'a.clipboard',
--- a/blocksuite/affine/blocks/bookmark/src/styles.ts
+++ b/blocksuite/affine/blocks/bookmark/src/styles.ts
@@ -17,9 +17,9 @@ export const styles = css`
    width: 100%;

    border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};

-    background: var(--affine-background-primary-color);
+    background: ${unsafeCSSVarV2('layer/background/primary')};
    user-select: none;
  }

--- a/blocksuite/affine/blocks/callout/package.json
+++ b/blocksuite/affine/blocks/callout/package.json
@@ -25,7 +25,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/mdast": "^4.0.4",
    "emoji-mart": "^5.6.0",
    "lit": "^3.2.0",
--- a/blocksuite/affine/blocks/code/package.json
+++ b/blocksuite/affine/blocks/code/package.json
@@ -28,7 +28,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/mdast": "^4.0.4",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/blocks/code/src/code-block-service.ts
+++ b/blocksuite/affine/blocks/code/src/code-block-service.ts
@@ -19,8 +19,12 @@ import {
 export class CodeBlockHighlighter extends LifeCycleWatcher {
  static override key = 'code-block-highlighter';

-  private _darkThemeKey: string | undefined;
+  // Singleton highlighter instance
+  private static _sharedHighlighter: HighlighterCore | null = null;
+  private static _highlighterPromise: Promise<HighlighterCore> | null = null;
+  private static _refCount = 0;

+  private _darkThemeKey: string | undefined;
  private _lightThemeKey: string | undefined;

  highlighter$: Signal<HighlighterCore | null> = signal(null);
@@ -35,6 +39,13 @@ export class CodeBlockHighlighter extends LifeCycleWatcher {
  private readonly _loadTheme = async (
    highlighter: HighlighterCore
  ): Promise<void> => {
+    // It is possible that by the time the highlighter is ready all instances
+    // have already been unmounted. In that case there is no need to load
+    // themes or update state.
+    if (CodeBlockHighlighter._refCount === 0) {
+      return;
+    }
+
    const config = this.std.getOptional(CodeBlockConfigExtension.identifier);
    const darkTheme = config?.theme?.dark ?? CODE_BLOCK_DEFAULT_DARK_THEME;
    const lightTheme = config?.theme?.light ?? CODE_BLOCK_DEFAULT_LIGHT_THEME;
@@ -44,18 +55,58 @@ export class CodeBlockHighlighter extends LifeCycleWatcher {
    this.highlighter$.value = highlighter;
  };

+  private static async _getOrCreateHighlighter(): Promise<HighlighterCore> {
+    if (CodeBlockHighlighter._sharedHighlighter) {
+      return CodeBlockHighlighter._sharedHighlighter;
+    }
+
+    if (!CodeBlockHighlighter._highlighterPromise) {
+      CodeBlockHighlighter._highlighterPromise = createHighlighterCore({
+        engine: createOnigurumaEngine(() => getWasm),
+      }).then(highlighter => {
+        CodeBlockHighlighter._sharedHighlighter = highlighter;
+        return highlighter;
+      });
+    }
+
+    return CodeBlockHighlighter._highlighterPromise;
+  }
+
  override mounted(): void {
    super.mounted();

-    createHighlighterCore({
-      engine: createOnigurumaEngine(() => getWasm),
-    })
+    CodeBlockHighlighter._refCount++;
+
+    CodeBlockHighlighter._getOrCreateHighlighter()
      .then(this._loadTheme)
      .catch(console.error);
  }

  override unmounted(): void {
-    this.highlighter$.value?.dispose();
+    CodeBlockHighlighter._refCount--;
+
+    // Dispose the shared highlighter **after** any in-flight creation finishes.
+    if (CodeBlockHighlighter._refCount !== 0) {
+      return;
+    }
+
+    const doDispose = (highlighter: HighlighterCore | null) => {
+      if (highlighter) {
+        highlighter.dispose();
+      }
+      CodeBlockHighlighter._sharedHighlighter = null;
+      CodeBlockHighlighter._highlighterPromise = null;
+    };
+
+    if (CodeBlockHighlighter._sharedHighlighter) {
+      // Highlighter already created – dispose immediately.
+      doDispose(CodeBlockHighlighter._sharedHighlighter);
+    } else if (CodeBlockHighlighter._highlighterPromise) {
+      // Highlighter still being created – wait for it, then dispose.
+      CodeBlockHighlighter._highlighterPromise
+        .then(doDispose)
+        .catch(console.error);
+    }
  }
 }

--- a/blocksuite/affine/blocks/code/src/code-block.ts
+++ b/blocksuite/affine/blocks/code/src/code-block.ts
@@ -6,7 +6,7 @@ import {
  EDGELESS_TOP_CONTENTEDITABLE_SELECTOR,
 } from '@blocksuite/affine-shared/consts';
 import {
-  BlockCommentManager,
+  BlockElementCommentManager,
  DocModeProvider,
  NotificationProvider,
 } from '@blocksuite/affine-shared/services';
@@ -394,7 +394,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
  get isCommentHighlighted() {
    return (
      this.std
-        .getOptional(BlockCommentManager)
+        .getOptional(BlockElementCommentManager)
        ?.isBlockCommentHighlighted(this.model) ?? false
    );
  }
--- a/blocksuite/affine/blocks/code/src/index.ts
+++ b/blocksuite/affine/blocks/code/src/index.ts
@@ -2,7 +2,9 @@ export * from './adapters';
 export * from './clipboard';
 export * from './code-block';
 export * from './code-block-config';
+export * from './code-block-service';
 export * from './code-preview-extension';
 export * from './code-toolbar';
+export * from './highlight/const';
 export * from './turbo/code-layout-handler';
 export * from './turbo/code-painter.worker';
--- a/blocksuite/affine/blocks/data-view/package.json
+++ b/blocksuite/affine/blocks/data-view/package.json
@@ -24,7 +24,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/mdast": "^4.0.4",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/blocks/data-view/src/data-view-block.ts
+++ b/blocksuite/affine/blocks/data-view/src/data-view-block.ts
@@ -40,6 +40,7 @@ import { RANGE_SYNC_EXCLUDE_ATTR } from '@blocksuite/std/inline';
 import { Slice } from '@blocksuite/store';
 import { computed, signal } from '@preact/signals-core';
 import { css, nothing, unsafeCSS } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';

 import { BlockQueryDataSource } from './data-source.js';
@@ -303,9 +304,15 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
    },
  });
  override renderBlock() {
+    const widgets = html`${repeat(
+      Object.entries(this.widgets),
+      ([id]) => id,
+      ([_, widget]) => widget
+    )}`;
+
    return html`
      <div contenteditable="false" style="position: relative">
-        ${this.dataViewRootLogic.render()}
+        ${this.dataViewRootLogic.render()} ${widgets}
      </div>
    `;
  }
--- a/blocksuite/affine/blocks/database/package.json
+++ b/blocksuite/affine/blocks/database/package.json
@@ -28,7 +28,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/mdast": "^4.0.4",
    "date-fns": "^4.0.0",
    "lit": "^3.2.0",
--- a/blocksuite/affine/blocks/database/src/database-block.ts
+++ b/blocksuite/affine/blocks/database/src/database-block.ts
@@ -10,7 +10,7 @@ import { toast } from '@blocksuite/affine-components/toast';
 import type { DatabaseBlockModel } from '@blocksuite/affine-model';
 import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '@blocksuite/affine-shared/consts';
 import {
-  BlockCommentManager,
+  BlockElementCommentManager,
  CommentProviderIdentifier,
  DocModeProvider,
  NotificationProvider,
@@ -47,6 +47,7 @@ import { Slice } from '@blocksuite/store';
 import { autoUpdate } from '@floating-ui/dom';
 import { computed, signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';

 import { popSideDetail } from './components/layout.js';
 import { DatabaseConfigExtension } from './config.js';
@@ -315,7 +316,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
  get isCommentHighlighted() {
    return (
      this.std
-        .getOptional(BlockCommentManager)
+        .getOptional(BlockElementCommentManager)
        ?.isBlockCommentHighlighted(this.model) ?? false
    );
  }
@@ -451,9 +452,15 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
      })
  );
  override renderBlock() {
+    const widgets = html`${repeat(
+      Object.entries(this.widgets),
+      ([id]) => id,
+      ([_, widget]) => widget
+    )}`;
+
    return html`
      <div contenteditable="false" class="${databaseContentStyles}">
-        ${this.dataViewRootLogic.value.render()}
+        ${this.dataViewRootLogic.value.render()} ${widgets}
      </div>
    `;
  }
--- a/blocksuite/affine/blocks/divider/package.json
+++ b/blocksuite/affine/blocks/divider/package.json
@@ -21,7 +21,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/mdast": "^4.0.4",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/blocks/edgeless-text/package.json
+++ b/blocksuite/affine/blocks/edgeless-text/package.json
@@ -26,7 +26,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
    "rxjs": "^7.8.1",
--- a/blocksuite/affine/blocks/embed-doc/package.json
+++ b/blocksuite/affine/blocks/embed-doc/package.json
@@ -26,7 +26,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/configs/toolbar.ts
@@ -11,7 +11,6 @@ import {
 } from '@blocksuite/affine-shared/consts';
 import {
  ActionPlacement,
-  blockCommentToolbarButton,
  DocDisplayMetaProvider,
  EditorSettingProvider,
  type LinkEventType,
@@ -306,10 +305,6 @@ const builtinToolbarConfig = {
      },
    } satisfies ToolbarActionGroup<ToolbarAction>,
    captionAction,
-    {
-      id: 'e.comment',
-      ...blockCommentToolbarButton,
-    },
    {
      placement: ActionPlacement.More,
      id: 'a.clipboard',
--- a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/index.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/index.ts
@@ -5,3 +5,4 @@ export * from './edgeless-clipboard-config';
 export * from './embed-edgeless-linked-doc-block';
 export * from './embed-linked-doc-block';
 export * from './embed-linked-doc-spec';
+export { getEmbedLinkedDocIcons } from './utils';
--- a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts
@@ -9,7 +9,7 @@ export const styles = css`
    width: 100%;
    height: 100%;
    border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
    background: ${unsafeCSSVarV2('layer/background/primary')};
    user-select: none;
    position: relative;
@@ -168,6 +168,7 @@ export const styles = css`
  .affine-embed-linked-doc-banner {
    margin: 12px 12px 0px 0px;
    width: 204px;
+    min-width: 204px;
    max-width: 100%;
    height: 102px;
    pointer-events: none;
--- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/configs/toolbar.ts
@@ -16,7 +16,6 @@ import {
 import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
 import {
  ActionPlacement,
-  blockCommentToolbarButton,
  EditorSettingProvider,
  type LinkEventType,
  type OpenDocMode,
@@ -226,10 +225,6 @@ const builtinToolbarConfig = {
    openDocActionGroup,
    conversionsActionGroup,
    captionAction,
-    {
-      id: 'e.comment',
-      ...blockCommentToolbarButton,
-    },
    {
      placement: ActionPlacement.More,
      id: 'a.clipboard',
--- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts
@@ -197,8 +197,8 @@ export const cardStyles = css`
    width: 100%;
    height: ${EMBED_CARD_HEIGHT.horizontal}px;
    border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
-    background: var(--affine-background-primary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
+    background: ${unsafeCSSVarV2('layer/background/primary')};
    user-select: none;
  }

--- a/blocksuite/affine/blocks/embed/package.json
+++ b/blocksuite/affine/blocks/embed/package.json
@@ -26,7 +26,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/blocks/embed/src/common/embed-block-element.ts
+++ b/blocksuite/affine/blocks/embed/src/common/embed-block-element.ts
@@ -9,7 +9,7 @@ import {
  EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
 import {
-  BlockCommentManager,
+  BlockElementCommentManager,
  DocModeProvider,
 } from '@blocksuite/affine-shared/services';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
@@ -65,7 +65,7 @@ export class EmbedBlockComponent<
  get isCommentHighlighted() {
    return (
      this.std
-        .getOptional(BlockCommentManager)
+        .getOptional(BlockElementCommentManager)
        ?.isBlockCommentHighlighted(this.model) ?? false
    );
  }
--- a/blocksuite/affine/blocks/embed/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/embed/src/configs/toolbar.ts
@@ -13,7 +13,6 @@ import {
 } from '@blocksuite/affine-shared/consts';
 import {
  ActionPlacement,
-  blockCommentToolbarButton,
  EmbedOptionProvider,
  type LinkEventType,
  type ToolbarAction,
@@ -349,10 +348,6 @@ function createBuiltinToolbarConfigForExternal(
          });
        },
      },
-      {
-        id: 'e.comment',
-        ...blockCommentToolbarButton,
-      },
      {
        placement: ActionPlacement.More,
        id: 'a.clipboard',
--- a/blocksuite/affine/blocks/embed/src/embed-figma-block/styles.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-figma-block/styles.ts
@@ -11,9 +11,9 @@ export const styles = css`
    height: 100%;

    border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};

-    background: var(--affine-background-primary-color);
+    background: ${unsafeCSSVarV2('layer/background/primary')};
    user-select: none;
  }

--- a/blocksuite/affine/blocks/embed/src/embed-github-block/styles.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-github-block/styles.ts
@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css, html } from 'lit';

 export const styles = css`
@@ -9,9 +10,9 @@ export const styles = css`
    height: 100%;

    border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};

-    background: var(--affine-background-primary-color);
+    background: ${unsafeCSSVarV2('layer/background/primary')};
    user-select: none;
    overflow: hidden;
  }
--- a/blocksuite/affine/blocks/embed/src/embed-html-block/styles.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-html-block/styles.ts
@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css, html } from 'lit';

 export const EMBED_HTML_MIN_WIDTH = 370;
@@ -15,9 +16,9 @@ export const styles = css`
    gap: 20px;

    border-radius: 12px;
-    border: 1px solid var(--affine-background-tertiary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};

-    background: var(--affine-background-primary-color);
+    background: ${unsafeCSSVarV2('layer/background/primary')};
    user-select: none;
  }

--- a/blocksuite/affine/blocks/embed/src/embed-iframe-block/embed-iframe-block.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-iframe-block/embed-iframe-block.ts
@@ -11,6 +11,7 @@ import {
  type IframeOptions,
  LinkPreviewServiceIdentifier,
  NotificationProvider,
+  VirtualKeyboardProvider,
 } from '@blocksuite/affine-shared/services';
 import { matchModels } from '@blocksuite/affine-shared/utils';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
@@ -213,9 +214,33 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
      this._linkInputAbortController.abort();
    }

+    const keyboard = this.host.std.getOptional(VirtualKeyboardProvider);
+    const computePosition = keyboard
+      ? {
+          referenceElement: document.body,
+          placement: 'top' as const,
+          middleware: [
+            offset(({ rects }) => ({
+              mainAxis:
+                -rects.floating.height -
+                (window.innerHeight -
+                  rects.floating.height -
+                  keyboard.height$.value) /
+                  2,
+            })),
+          ],
+          autoUpdate: { animationFrame: true },
+        }
+      : {
+          referenceElement: this._blockContainer,
+          placement: 'bottom' as const,
+          middleware: [flip(), offset(LINK_CREATE_POPUP_OFFSET), shift()],
+          autoUpdate: { animationFrame: true },
+        };
+
    this._linkInputAbortController = new AbortController();

-    createLitPortal({
+    const { update } = createLitPortal({
      template: html`<embed-iframe-link-input-popup
        .model=${this.model}
        .abortController=${this._linkInputAbortController}
@@ -224,15 +249,19 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
        .options=${options}
      ></embed-iframe-link-input-popup>`,
      container: document.body,
-      computePosition: {
-        referenceElement: this._blockContainer,
-        placement: 'bottom',
-        middleware: [flip(), offset(LINK_CREATE_POPUP_OFFSET), shift()],
-        autoUpdate: { animationFrame: true },
-      },
+      computePosition,
      abortController: this._linkInputAbortController,
      closeOnClickAway: true,
    });
+
+    if (keyboard) {
+      this._linkInputAbortController.signal.addEventListener(
+        'abort',
+        keyboard.height$.subscribe(() => {
+          update();
+        })
+      );
+    }
  };

  /**
--- a/blocksuite/affine/blocks/embed/src/embed-loom-block/styles.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-loom-block/styles.ts
@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css, html } from 'lit';

 export const styles = css`
@@ -12,9 +13,9 @@ export const styles = css`
    height: 100%;

    border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};

-    background: var(--affine-background-primary-color);
+    background: ${unsafeCSSVarV2('layer/background/primary')};
    user-select: none;
  }

--- a/blocksuite/affine/blocks/embed/src/embed-youtube-block/styles.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-youtube-block/styles.ts
@@ -13,9 +13,9 @@ export const styles = css`
    padding: 12px;

    border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};

-    background: var(--affine-background-primary-color);
+    background: ${unsafeCSSVarV2('layer/background/primary')};
    user-select: none;
  }

--- a/blocksuite/affine/blocks/frame/package.json
+++ b/blocksuite/affine/blocks/frame/package.json
@@ -25,7 +25,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/mdast": "^4.0.4",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/blocks/image/package.json
+++ b/blocksuite/affine/blocks/image/package.json
@@ -25,7 +25,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "file-type": "^21.0.0",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/blocks/image/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/image/src/configs/toolbar.ts
@@ -1,7 +1,6 @@
 import { ImageBlockModel } from '@blocksuite/affine-model';
 import {
  ActionPlacement,
-  blockCommentToolbarButton,
  type ToolbarModuleConfig,
  ToolbarModuleExtension,
 } from '@blocksuite/affine-shared/services';
@@ -50,10 +49,6 @@ const builtinToolbarConfig = {
        });
      },
    },
-    {
-      id: 'c.comment',
-      ...blockCommentToolbarButton,
-    },
    {
      placement: ActionPlacement.More,
      id: 'a.clipboard',
@@ -146,10 +141,6 @@ const builtinSurfaceToolbarConfig = {
        });
      },
    },
-    {
-      id: 'c.comment',
-      ...blockCommentToolbarButton,
-    },
  ],

  when: ctx => ctx.getSurfaceModelsByType(ImageBlockModel).length === 1,
--- a/blocksuite/affine/blocks/image/src/image-block.ts
+++ b/blocksuite/affine/blocks/image/src/image-block.ts
@@ -6,7 +6,7 @@ import { ResourceController } from '@blocksuite/affine-components/resource';
 import type { ImageBlockModel } from '@blocksuite/affine-model';
 import { ImageSelection } from '@blocksuite/affine-shared/selection';
 import {
-  BlockCommentManager,
+  BlockElementCommentManager,
  ToolbarRegistryIdentifier,
 } from '@blocksuite/affine-shared/services';
 import { formatSize } from '@blocksuite/affine-shared/utils';
@@ -71,7 +71,7 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
  get isCommentHighlighted() {
    return (
      this.std
-        .getOptional(BlockCommentManager)
+        .getOptional(BlockElementCommentManager)
        ?.isBlockCommentHighlighted(this.model) ?? false
    );
  }
--- a/blocksuite/affine/blocks/image/src/preview-image/edgeless.ts
+++ b/blocksuite/affine/blocks/image/src/preview-image/edgeless.ts
@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { toGfxBlockComponent } from '@blocksuite/std';
 import { css } from 'lit';

@@ -9,7 +10,7 @@ export class ImageEdgelessPlaceholderBlockComponent extends toGfxBlockComponent(
  static override styles = css`
    affine-edgeless-placeholder-preview-image
      .affine-placeholder-preview-container {
-      border: 1px solid var(--affine-background-tertiary-color);
+      border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
    }
  `;

--- a/blocksuite/affine/blocks/latex/package.json
+++ b/blocksuite/affine/blocks/latex/package.json
@@ -25,7 +25,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/katex": "^0.16.7",
    "@types/mdast": "^4.0.4",
    "katex": "^0.16.11",
--- a/blocksuite/affine/blocks/latex/src/latex-block.ts
+++ b/blocksuite/affine/blocks/latex/src/latex-block.ts
@@ -116,7 +116,7 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel

    this.selection.setGroup('note', []);

-    const portal = createLitPortal({
+    const { portal } = createLitPortal({
      template: html`<latex-editor-menu
        .std=${this.std}
        .latexSignal=${this.model.props.latex$}
--- a/blocksuite/affine/blocks/list/package.json
+++ b/blocksuite/affine/blocks/list/package.json
@@ -24,7 +24,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/mdast": "^4.0.4",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/blocks/list/src/list-block.ts
+++ b/blocksuite/affine/blocks/list/src/list-block.ts
@@ -23,6 +23,7 @@ import { effect } from '@preact/signals-core';
 import { html, nothing, type TemplateResult } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';

 import { correctNumberedListsOrderToPrev } from './commands/utils.js';
@@ -138,6 +139,11 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>

  override renderBlock(): TemplateResult<1> {
    const { model, _onClickIcon } = this;
+    const widgets = html`${repeat(
+      Object.entries(this.widgets),
+      ([id]) => id,
+      ([_, widget]) => widget
+    )}`;
    const collapsed = this.store.readonly
      ? this._readonlyCollapsed
      : model.props.collapsed;
@@ -199,7 +205,7 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
          ></rich-text>
        </div>

-        ${children}
+        ${children} ${widgets}
      </div>
    `;
  }
--- a/blocksuite/affine/blocks/note/package.json
+++ b/blocksuite/affine/blocks/note/package.json
@@ -27,7 +27,7 @@
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "@types/mdast": "^4.0.4",
    "@vanilla-extract/css": "^1.17.0",
--- a/blocksuite/affine/blocks/paragraph/package.json
+++ b/blocksuite/affine/blocks/paragraph/package.json
@@ -23,7 +23,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/mdast": "^4.0.4",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/blocks/paragraph/src/paragraph-block.ts
+++ b/blocksuite/affine/blocks/paragraph/src/paragraph-block.ts
@@ -8,7 +8,7 @@ import {
  EDGELESS_TOP_CONTENTEDITABLE_SELECTOR,
 } from '@blocksuite/affine-shared/consts';
 import {
-  BlockCommentManager,
+  BlockElementCommentManager,
  CitationProvider,
  DocModeProvider,
 } from '@blocksuite/affine-shared/services';
@@ -27,6 +27,7 @@ import { computed, effect, signal } from '@preact/signals-core';
 import { html, nothing, type TemplateResult } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';

@@ -111,7 +112,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
  get isCommentHighlighted() {
    return (
      this.std
-        .getOptional(BlockCommentManager)
+        .getOptional(BlockElementCommentManager)
        ?.isBlockCommentHighlighted(this.model) ?? false
    );
  }
@@ -236,6 +237,12 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
  }

  override renderBlock(): TemplateResult<1> {
+    const widgets = html`${repeat(
+      Object.entries(this.widgets),
+      ([id]) => id,
+      ([_, widget]) => widget
+    )}`;
+
    const { type$ } = this.model.props;
    const collapsed = this.store.readonly
      ? this._readonlyCollapsed
@@ -352,7 +359,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
              `}
        </div>

-        ${children}
+        ${children} ${widgets}
      </div>
    `;
  }
--- a/blocksuite/affine/blocks/root/package.json
+++ b/blocksuite/affine/blocks/root/package.json
@@ -44,7 +44,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "dompurify": "^3.2.4",
    "html2canvas": "^1.4.1",
--- a/blocksuite/affine/blocks/root/src/edgeless/configs/toolbar/misc.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/configs/toolbar/misc.ts
@@ -17,6 +17,7 @@ import {
 } from '@blocksuite/affine-model';
 import {
  ActionPlacement,
+  blockCommentToolbarButton,
  type ElementLockEvent,
  type ToolbarAction,
  type ToolbarContext,
@@ -305,6 +306,12 @@ export const builtinMiscToolbarConfig = {
      },
    },

+    {
+      placement: ActionPlacement.End,
+      id: 'c.comment',
+      ...blockCommentToolbarButton,
+    },
+
    // More actions
    ...moreActions.map(action => ({
      ...action,
--- a/blocksuite/affine/blocks/root/src/page/page-root-block.ts
+++ b/blocksuite/affine/blocks/root/src/page/page-root-block.ts
@@ -305,7 +305,10 @@ export class PageRootBlockComponent extends BlockComponent<RootBlockModel> {
      );

      // make sure there is a block can be focused
-      if (notes.length === 0 || notes[notes.length - 1].children.length === 0) {
+      if (
+        !this.store.readonly$.value &&
+        (notes.length === 0 || notes[notes.length - 1].children.length === 0)
+      ) {
        this.std.command.exec(appendParagraphCommand);
        return;
      }
@@ -322,7 +325,7 @@ export class PageRootBlockComponent extends BlockComponent<RootBlockModel> {
        parseFloat(paddingLeft),
        parseFloat(paddingRight)
      );
-      if (!isClickOnBlankArea) {
+      if (!isClickOnBlankArea && !this.store.readonly$.value) {
        const lastBlock = notes[notes.length - 1].lastChild();
        if (
          !lastBlock ||
--- a/blocksuite/affine/blocks/surface-ref/package.json
+++ b/blocksuite/affine/blocks/surface-ref/package.json
@@ -25,7 +25,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "fractional-indexing": "^3.2.0",
    "lit": "^3.2.0",
--- a/blocksuite/affine/blocks/surface-ref/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/surface-ref/src/configs/toolbar.ts
@@ -5,7 +5,6 @@ import {
 } from '@blocksuite/affine-shared/commands';
 import {
  ActionPlacement,
-  blockCommentToolbarButton,
  type ToolbarModuleConfig,
 } from '@blocksuite/affine-shared/services';
 import { CaptionIcon, CopyIcon, DeleteIcon } from '@blocksuite/icons/lit';
@@ -62,10 +61,6 @@ export const surfaceRefToolbarModuleConfig: ToolbarModuleConfig = {
        surfaceRefBlock.captionElement.show();
      },
    },
-    {
-      id: 'e.comment',
-      ...blockCommentToolbarButton,
-    },
    {
      id: 'a.clipboard',
      placement: ActionPlacement.More,
--- a/blocksuite/affine/blocks/surface-ref/src/surface-ref-block.ts
+++ b/blocksuite/affine/blocks/surface-ref/src/surface-ref-block.ts
@@ -13,7 +13,7 @@ import {
  type SurfaceRefBlockModel,
 } from '@blocksuite/affine-model';
 import {
-  BlockCommentManager,
+  BlockElementCommentManager,
  DocModeProvider,
  EditPropsStore,
  type OpenDocMode,
@@ -145,7 +145,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
  get isCommentHighlighted() {
    return (
      this.std
-        .getOptional(BlockCommentManager)
+        .getOptional(BlockElementCommentManager)
        ?.isBlockCommentHighlighted(this.model) ?? false
    );
  }
--- a/blocksuite/affine/blocks/surface/package.json
+++ b/blocksuite/affine/blocks/surface/package.json
@@ -20,7 +20,7 @@
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "fractional-indexing": "^3.2.0",
    "html2canvas": "^1.4.1",
--- a/blocksuite/affine/components/package.json
+++ b/blocksuite/affine/components/package.json
@@ -21,7 +21,7 @@
    "@lit/context": "^1.1.2",
    "@lottiefiles/dotlottie-wc": "^0.5.0",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/hast": "^3.0.4",
    "@types/katex": "^0.16.7",
    "@types/lodash-es": "^4.17.12",
@@ -73,7 +73,8 @@
    "./edgeless-line-styles-panel": "./src/edgeless-line-styles-panel/index.ts",
    "./edgeless-shape-color-picker": "./src/edgeless-shape-color-picker/index.ts",
    "./open-doc-dropdown-menu": "./src/open-doc-dropdown-menu/index.ts",
-    "./slider": "./src/slider/index.ts"
+    "./slider": "./src/slider/index.ts",
+    "./tooltip": "./src/tooltip/index.ts"
  },
  "files": [
    "src",
--- a/blocksuite/affine/components/src/context-menu/sub-menu.ts
+++ b/blocksuite/affine/components/src/context-menu/sub-menu.ts
@@ -85,6 +85,8 @@ export class MenuSubMenu extends MenuFocusable {
        .catch(err => console.error(err));
    });
    this.menu.openSubMenu(menu);
+    // in case that the menu is not closed, but the component is removed,
+    this.disposables.add(unsub);
  }

  protected override render(): unknown {
--- a/blocksuite/affine/components/src/hover/controller.ts
+++ b/blocksuite/affine/components/src/hover/controller.ts
@@ -179,7 +179,7 @@ export class HoverController implements ReactiveController {
      this._portal = createLitPortal({
        ...portalOptions,
        abortController: this._abortController,
-      });
+      }).portal;

      const transition = this._hoverOptions.transition;
      if (transition) {
--- a/blocksuite/affine/components/src/icons/loading.ts
+++ b/blocksuite/affine/components/src/icons/loading.ts
@@ -18,6 +18,7 @@ export const LoadingIcon = ({
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
+    style="fill: none;"
  >
    <style>
      .spinner {
--- a/blocksuite/affine/components/src/portal/helper.ts
+++ b/blocksuite/affine/components/src/portal/helper.ts
@@ -161,7 +161,7 @@ export function createLitPortal({
  }

  if (!positionConfigOrFn) {
-    return portalRoot;
+    return { portal: portalRoot, update: () => {} };
  }

  const visibility = portalRoot.style.visibility;
@@ -221,5 +221,5 @@ export function createLitPortal({
    });
  }

-  return portalRoot;
+  return { portal: portalRoot, update };
 }
--- a/blocksuite/affine/components/src/toolbar/index.ts
+++ b/blocksuite/affine/components/src/toolbar/index.ts
@@ -1,3 +1,4 @@
+import { effects as tooltipEffects } from '../tooltip/effect.js';
 import { EditorIconButton } from './icon-button.js';
 import {
  EditorMenuAction,
@@ -6,7 +7,6 @@ import {
 } from './menu-button.js';
 import { EditorToolbarSeparator } from './separator.js';
 import { EditorToolbar } from './toolbar.js';
-import { Tooltip } from './tooltip.js';

 export { EditorChevronDown } from './chevron-down.js';
 export { ToolbarMoreMenuConfigExtension } from './config.js';
@@ -20,7 +20,6 @@ export { MenuContext } from './menu-context.js';
 export { EditorToolbarSeparator } from './separator.js';
 export { darkToolbarStyles, lightToolbarStyles } from './styles.js';
 export { EditorToolbar } from './toolbar.js';
-export { Tooltip } from './tooltip.js';
 export type {
  AdvancedMenuItem,
  FatMenuItems,
@@ -38,11 +37,12 @@ export {
 } from './utils.js';

 export function effects() {
+  tooltipEffects();
+
  customElements.define('editor-toolbar-separator', EditorToolbarSeparator);
  customElements.define('editor-toolbar', EditorToolbar);
  customElements.define('editor-icon-button', EditorIconButton);
  customElements.define('editor-menu-button', EditorMenuButton);
  customElements.define('editor-menu-content', EditorMenuContent);
  customElements.define('editor-menu-action', EditorMenuAction);
-  customElements.define('affine-tooltip', Tooltip);
 }
--- a/blocksuite/affine/components/src/tooltip/effect.ts
+++ b/blocksuite/affine/components/src/tooltip/effect.ts
@@ -0,0 +1,7 @@
+import { Tooltip } from './tooltip.js';
+
+export function effects() {
+  if (!customElements.get('affine-tooltip')) {
+    customElements.define('affine-tooltip', Tooltip);
+  }
+}
--- a/blocksuite/affine/components/src/tooltip/index.ts
+++ b/blocksuite/affine/components/src/tooltip/index.ts
@@ -0,0 +1,2 @@
+export { effects } from './effect.js';
+export { Tooltip } from './tooltip.js';
--- a/blocksuite/affine/components/src/tooltip/tooltip.ts
+++ b/blocksuite/affine/components/src/tooltip/tooltip.ts
@@ -190,7 +190,10 @@ export class Tooltip extends LitElement {
            middleware: [
              this.autoFlip && flip({ padding: AUTO_FLIP_PADDING }),
              this.autoShift && shift({ padding: AUTO_SHIFT_PADDING }),
-              offset((this.arrow ? TRIANGLE_HEIGHT : 0) + this.offset),
+              offset({
+                mainAxis: (this.arrow ? TRIANGLE_HEIGHT : 0) + this.offsetY,
+                crossAxis: this.offsetX,
+              }),
              arrow({
                element: portalRoot.shadowRoot!.querySelector('.arrow')!,
              }),
@@ -264,7 +267,7 @@ export class Tooltip extends LitElement {
   * Show a triangle arrow pointing to the reference element.
   */
  @property({ attribute: false })
-  accessor arrow = true;
+  accessor arrow = false;

  /**
   * changes the placement of the floating element in order to keep it in view,
@@ -303,7 +306,10 @@ export class Tooltip extends LitElement {
   * See https://floating-ui.com/docs/offset
   */
  @property({ attribute: false })
-  accessor offset = 4;
+  accessor offsetY = 6;
+
+  @property({ attribute: false })
+  accessor offsetX = 0;

  @property({ attribute: 'tip-position' })
  accessor placement: Placement = 'top';
--- a/blocksuite/affine/data-view/package.json
+++ b/blocksuite/affine/data-view/package.json
@@ -21,7 +21,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "clsx": "^2.1.1",
    "date-fns": "^4.0.0",
--- a/blocksuite/affine/data-view/src/property-presets/date/cell-renderer.ts
+++ b/blocksuite/affine/data-view/src/property-presets/date/cell-renderer.ts
@@ -78,7 +78,7 @@ export class DateCell extends BaseCellRenderer<number, number> {
        },
      });
    } else {
-      const root = createLitPortal({
+      const { portal } = createLitPortal({
        abortController,
        closeOnClickAway: true,
        computePosition: {
@@ -107,7 +107,7 @@ export class DateCell extends BaseCellRenderer<number, number> {
      //       for now the slide-layout-modal's z-index is `1001`
      //       the z-index of popover should be higher than it
      // root.style.zIndex = 'var(--affine-z-index-popover)';
-      root.style.zIndex = '1002';
+      portal.style.zIndex = '1002';
    }
  };

--- a/blocksuite/affine/foundation/package.json
+++ b/blocksuite/affine/foundation/package.json
@@ -22,7 +22,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/foundation/src/view.ts
+++ b/blocksuite/affine/foundation/src/view.ts
@@ -9,7 +9,7 @@ import {
 } from '@blocksuite/affine-ext-loader';
 import {
  AutoClearSelectionService,
-  BlockCommentManager,
+  BlockElementCommentManager,
  CitationService,
  DefaultOpenDocExtension,
  DNDAPIExtension,
@@ -79,7 +79,7 @@ export class FoundationViewExtension extends ViewExtensionProvider<FoundationVie
      LinkPreviewCache,
      LinkPreviewService,
      CitationService,
-      BlockCommentManager,
+      BlockElementCommentManager,
    ]);
    context.register(clipboardConfigs);
    if (this.isEdgeless(context.scope)) {
--- a/blocksuite/affine/fragments/adapter-panel/package.json
+++ b/blocksuite/affine/fragments/adapter-panel/package.json
@@ -21,7 +21,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "lit": "^3.2.0",
    "rxjs": "^7.8.1"
  },
--- a/blocksuite/affine/fragments/doc-title/package.json
+++ b/blocksuite/affine/fragments/doc-title/package.json
@@ -24,7 +24,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
    "rxjs": "^7.8.1",
--- a/blocksuite/affine/fragments/frame-panel/package.json
+++ b/blocksuite/affine/fragments/frame-panel/package.json
@@ -24,7 +24,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/fragments/outline/package.json
+++ b/blocksuite/affine/fragments/outline/package.json
@@ -24,7 +24,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@vanilla-extract/css": "^1.17.0",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/gfx/brush/package.json
+++ b/blocksuite/affine/gfx/brush/package.json
@@ -23,7 +23,7 @@
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/gfx/connector/package.json
+++ b/blocksuite/affine/gfx/connector/package.json
@@ -24,7 +24,7 @@
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/gfx/group/package.json
+++ b/blocksuite/affine/gfx/group/package.json
@@ -24,7 +24,7 @@
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/gfx/link/package.json
+++ b/blocksuite/affine/gfx/link/package.json
@@ -26,7 +26,7 @@
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/gfx/mindmap/package.json
+++ b/blocksuite/affine/gfx/mindmap/package.json
@@ -30,7 +30,7 @@
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/gfx/note/package.json
+++ b/blocksuite/affine/gfx/note/package.json
@@ -26,7 +26,7 @@
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/gfx/pointer/package.json
+++ b/blocksuite/affine/gfx/pointer/package.json
@@ -23,7 +23,7 @@
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/gfx/shape/package.json
+++ b/blocksuite/affine/gfx/shape/package.json
@@ -24,7 +24,7 @@
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/gfx/template/package.json
+++ b/blocksuite/affine/gfx/template/package.json
@@ -25,7 +25,7 @@
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/gfx/template/src/toolbar/template-tool-button.ts
+++ b/blocksuite/affine/gfx/template/src/toolbar/template-tool-button.ts
@@ -116,6 +116,7 @@ export class EdgelessTemplateButton extends EdgelessToolbarToolMixin(
  `;

  private _cleanup: (() => void) | null = null;
+  private _autoUpdateCleanup: (() => void) | null = null;

  private _prevTool: ToolOptionWithType | null = null;

@@ -128,6 +129,11 @@ export class EdgelessTemplateButton extends EdgelessToolbarToolMixin(
    return [TemplateCard1[theme], TemplateCard2[theme], TemplateCard3[theme]];
  }

+  override connectedCallback() {
+    super.connectedCallback();
+    this.disposables.add(() => this._autoUpdateCleanup?.());
+  }
+
  private _closePanel() {
    if (this._openedPanel) {
      this._openedPanel.remove();
@@ -175,8 +181,8 @@ export class EdgelessTemplateButton extends EdgelessToolbarToolMixin(

    requestAnimationFrame(() => {
      const arrowEl = panel.renderRoot.querySelector('.arrow') as HTMLElement;
-
-      autoUpdate(this, panel, () => {
+      this._autoUpdateCleanup?.();
+      this._autoUpdateCleanup = autoUpdate(this, panel, () => {
        computePosition(this, panel, {
          placement: 'top',
          middleware: [offset(20), arrow({ element: arrowEl }), shift()],
--- a/blocksuite/affine/gfx/text/package.json
+++ b/blocksuite/affine/gfx/text/package.json
@@ -23,7 +23,7 @@
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/gfx/text/src/toolbar/actions.ts
+++ b/blocksuite/affine/gfx/text/src/toolbar/actions.ts
@@ -17,9 +17,9 @@ import {
  TextAlign,
  type TextStyleProps,
 } from '@blocksuite/affine-model';
-import type {
-  ToolbarActions,
-  ToolbarContext,
+import {
+  type ToolbarActions,
+  type ToolbarContext,
 } from '@blocksuite/affine-shared/services';
 import {
  getMostCommonResolvedValue,
--- a/blocksuite/affine/inlines/comment/src/index.ts
+++ b/blocksuite/affine/inlines/comment/src/index.ts
@@ -1,2 +1,4 @@
+export { InlineCommentManager } from './inline-comment-manager';
 export * from './inline-spec';
 export * from './utils';
+export * from './view';
--- a/blocksuite/affine/inlines/comment/src/inline-comment-manager.ts
+++ b/blocksuite/affine/inlines/comment/src/inline-comment-manager.ts
@@ -1,8 +1,11 @@
 import { getInlineEditorByModel } from '@blocksuite/affine-rich-text';
 import { getSelectedBlocksCommand } from '@blocksuite/affine-shared/commands';
 import {
+  BlockElementCommentManager,
  type CommentId,
  CommentProviderIdentifier,
+  findAllCommentedBlocks,
+  findAllCommentedElements,
 } from '@blocksuite/affine-shared/services';
 import type { AffineInlineEditor } from '@blocksuite/affine-shared/types';
 import { DisposableGroup } from '@blocksuite/global/disposable';
@@ -13,8 +16,13 @@ import {
 } from '@blocksuite/std';
 import type { BaseSelection, BlockModel } from '@blocksuite/store';
 import { signal } from '@preact/signals-core';
+import difference from 'lodash-es/difference';

-import { extractCommentIdFromDelta, findCommentedTexts } from './utils';
+import {
+  extractCommentIdFromDelta,
+  findAllCommentedTexts,
+  findCommentedTexts,
+} from './utils';

 export class InlineCommentManager extends LifeCycleWatcher {
  static override key = 'inline-comment-manager';
@@ -31,12 +39,18 @@ export class InlineCommentManager extends LifeCycleWatcher {
    const provider = this._provider;
    if (!provider) return;

+    this._init().catch(console.error);
+
    this._disposables.add(provider.onCommentAdded(this._handleAddComment));
    this._disposables.add(
-      provider.onCommentDeleted(this._handleDeleteAndResolve)
+      provider.onCommentDeleted(id =>
+        this._handleDeleteAndResolve(id, 'delete')
+      )
    );
    this._disposables.add(
-      provider.onCommentResolved(this._handleDeleteAndResolve)
+      provider.onCommentResolved(id =>
+        this._handleDeleteAndResolve(id, 'resolve')
+      )
    );
    this._disposables.add(
      provider.onCommentHighlighted(this._handleHighlightComment)
@@ -50,6 +64,41 @@ export class InlineCommentManager extends LifeCycleWatcher {
    this._disposables.dispose();
  }

+  private async _init() {
+    const provider = this._provider;
+    if (!provider) return;
+
+    const commentsInProvider = await provider.getComments('all');
+
+    const commentsInEditor = this.getCommentsInEditor();
+
+    // remove comments that are in editor but not in provider
+    // which means the comment may be removed or resolved in provider side
+    difference(commentsInEditor, commentsInProvider).forEach(comment => {
+      this.std
+        .get(BlockElementCommentManager)
+        .handleDeleteAndResolve(comment, 'delete');
+    });
+  }
+
+  getCommentsInEditor() {
+    const inlineComments = [...findAllCommentedTexts(this.std.store).values()];
+
+    const blockComments = findAllCommentedBlocks(this.std.store).flatMap(
+      block => Object.keys(block.props.comments)
+    );
+
+    const surfaceComments = findAllCommentedElements(this.std.store).flatMap(
+      element => Object.keys(element.comments)
+    );
+
+    const commentsInEditor = [
+      ...new Set([...inlineComments, ...blockComments, ...surfaceComments]),
+    ];
+
+    return commentsInEditor;
+  }
+
  private readonly _handleAddComment = (
    id: CommentId,
    selections: BaseSelection[]
@@ -118,16 +167,24 @@ export class InlineCommentManager extends LifeCycleWatcher {
    });
  };

-  private readonly _handleDeleteAndResolve = (id: CommentId) => {
-    const commentedTexts = findCommentedTexts(this.std, id);
+  private readonly _handleDeleteAndResolve = (
+    id: CommentId,
+    type: 'delete' | 'resolve'
+  ) => {
+    const commentedTexts = findCommentedTexts(this.std.store, id);
    if (commentedTexts.length === 0) return;

    this.std.store.withoutTransact(() => {
-      commentedTexts.forEach(([selection, inlineEditor]) => {
-        inlineEditor.formatText(
+      commentedTexts.forEach(selection => {
+        const inlineEditor = getInlineEditorByModel(
+          this.std,
+          selection.from.blockId
+        );
+
+        inlineEditor?.formatText(
          selection.from,
          {
-            [`comment-${id}`]: null,
+            [`comment-${id}`]: type === 'delete' ? null : false,
          },
          {
            withoutTransact: true,
--- a/blocksuite/affine/inlines/comment/src/inline-comment.ts
+++ b/blocksuite/affine/inlines/comment/src/inline-comment.ts
@@ -23,7 +23,10 @@ import { isEqual } from 'lodash-es';
 export class InlineComment extends WithDisposable(ShadowlessElement) {
  static override styles = css`
    inline-comment {
-      display: inline-block;
+      display: inline;
+    }
+
+    inline-comment.unresolved {
      background-color: ${unsafeCSSVarV2('block/comment/highlightDefault')};
      border-bottom: 2px solid
        ${unsafeCSSVarV2('block/comment/highlightUnderline')};
@@ -41,6 +44,11 @@ export class InlineComment extends WithDisposable(ShadowlessElement) {
  })
  accessor commentIds!: string[];

+  @property({ attribute: false })
+  accessor unresolved = false;
+
+  private _index: number = 0;
+
  @consume({ context: stdContext })
  private accessor _std!: BlockStdScope;

@@ -52,8 +60,10 @@ export class InlineComment extends WithDisposable(ShadowlessElement) {
  }

  private readonly _handleClick = () => {
-    const provider = this._provider;
-    provider && this.commentIds.forEach(id => provider.highlightComment(id));
+    if (this.unresolved) {
+      this._provider?.highlightComment(this.commentIds[this._index]);
+      this._index = (this._index + 1) % this.commentIds.length;
+    }
  };

  private readonly _handleHighlight = (id: CommentId | null) => {
@@ -87,6 +97,13 @@ export class InlineComment extends WithDisposable(ShadowlessElement) {
        this.classList.remove('highlighted');
      }
    }
+    if (_changedProperties.has('unresolved')) {
+      if (this.unresolved) {
+        this.classList.add('unresolved');
+      } else {
+        this.classList.remove('unresolved');
+      }
+    }
  }

  override render() {
--- a/blocksuite/affine/inlines/comment/src/inline-spec.ts
+++ b/blocksuite/affine/inlines/comment/src/inline-spec.ts
@@ -21,18 +21,39 @@ export const CommentInlineSpecExtension =
    ),
    match: delta => {
      if (!delta.attributes) return false;
-      const comments = Object.entries(delta.attributes).filter(
-        ([key, value]) => isInlineCommendId(key) && value === true
-      );
+      const comments = Object.keys(delta.attributes).filter(isInlineCommendId);
      return comments.length > 0;
    },
-    renderer: ({ delta, children }) =>
-      html`<inline-comment .commentIds=${extractCommentIdFromDelta(delta)}
+    renderer: ({ delta, children }) => {
+      if (!delta.attributes) return html`${nothing}`;
+
+      const unresolved = Object.entries(delta.attributes).some(
+        ([key, value]) => isInlineCommendId(key) && value === true
+      );
+      return html`<inline-comment
+        .unresolved=${unresolved}
+        .commentIds=${extractCommentIdFromDelta(delta)}
        >${when(
          children,
          () => html`${children}`,
          () => nothing
        )}</inline-comment
-      >`,
+      >`;
+    },
    wrapper: true,
  });
+
+export const NullCommentInlineSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>({
+    name: 'comment',
+    schema: dynamicSchema(
+      isInlineCommendId,
+      z.boolean().optional().nullable().catch(undefined)
+    ),
+    match: () => false,
+    renderer: () => html``,
+  });
+
+// reuse the same identifier
+NullCommentInlineSpecExtension.identifier =
+  CommentInlineSpecExtension.identifier;
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export * from '@blocksuite/affine-components/tooltip';`