chore(server): use jemalloc to reduce RSS

#### PR Dependency Tree


* **PR #13122** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Inline comments now visually distinguish between unresolved, resolved,
and deleted states.
* Only unresolved inline comments are interactive and highlighted in the
editor.

* **Bug Fixes**
* Improved accuracy in fetching and displaying all comments, including
resolved ones, during initialization.

* **Refactor**
* Enhanced handling of comment resolution and deletion to provide
clearer differentiation in both behavior and appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

.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:

.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

.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:

.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: |

.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:

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",

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

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',

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",

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

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',

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

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",

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",

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);
@@ -44,18 +48,45 @@ 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--;
+
+    // Only dispose the shared highlighter when no instances are using it
+    if (
+      CodeBlockHighlighter._refCount === 0 &&
+      CodeBlockHighlighter._sharedHighlighter
+    ) {
+      CodeBlockHighlighter._sharedHighlighter.dispose();
+      CodeBlockHighlighter._sharedHighlighter = null;
+      CodeBlockHighlighter._highlighterPromise = null;
+    }
   }
 }
 

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

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",

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>
     `;
   }

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",

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>
     `;
   }

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",

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",

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",

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',

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;

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',

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

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",

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

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',

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

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

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

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

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

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

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",

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",

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,

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

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')};
     }
   `;
 

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",

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$}

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",

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>
     `;
   }

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",

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",

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>
     `;
   }

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",

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,

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

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",

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,

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

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",

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",

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) {

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

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",

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';
     }
   };
 

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",

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)) {

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"
   },

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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,

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';

blocksuite/affine/inlines/comment/src/inline-comment-manager.ts

@@ -1,10 +1,11 @@
 import { getInlineEditorByModel } from '@blocksuite/affine-rich-text';
 import { getSelectedBlocksCommand } from '@blocksuite/affine-shared/commands';
 import {
-  BlockCommentManager,
+  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';
@@ -42,10 +43,14 @@ export class InlineCommentManager extends LifeCycleWatcher {
 
     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)
@@ -63,29 +68,35 @@ export class InlineCommentManager extends LifeCycleWatcher {
     const provider = this._provider;
     if (!provider) return;
 
-    const commentsInProvider = await provider.getComments('unresolved');
+    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]),
+      ...new Set([...inlineComments, ...blockComments, ...surfaceComments]),
     ];
 
-    // resolve comments that are in provider but not in editor
-    // which means the commented content may be deleted
-    difference(commentsInProvider, commentsInEditor).forEach(comment => {
-      provider.resolveComment(comment);
-    });
-
-    // 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._handleDeleteAndResolve(comment);
-      this.std.get(BlockCommentManager).handleDeleteAndResolve(comment);
-    });
+    return commentsInEditor;
   }
 
   private readonly _handleAddComment = (
@@ -156,7 +167,10 @@ export class InlineCommentManager extends LifeCycleWatcher {
     });
   };
 
-  private readonly _handleDeleteAndResolve = (id: CommentId) => {
+  private readonly _handleDeleteAndResolve = (
+    id: CommentId,
+    type: 'delete' | 'resolve'
+  ) => {
     const commentedTexts = findCommentedTexts(this.std.store, id);
     if (commentedTexts.length === 0) return;
 
@@ -170,7 +184,7 @@ export class InlineCommentManager extends LifeCycleWatcher {
         inlineEditor?.formatText(
           selection.from,
           {
-            [`comment-${id}`]: null,
+            [`comment-${id}`]: type === 'delete' ? null : false,
           },
           {
             withoutTransact: true,

blocksuite/affine/inlines/comment/src/inline-comment.ts

@@ -22,7 +22,7 @@ import { isEqual } from 'lodash-es';
 })
 export class InlineComment extends WithDisposable(ShadowlessElement) {
   static override styles = css`
-    inline-comment {
+    inline-comment.unresolved {
       display: inline-block;
       background-color: ${unsafeCSSVarV2('block/comment/highlightDefault')};
       border-bottom: 2px solid
@@ -41,6 +41,9 @@ export class InlineComment extends WithDisposable(ShadowlessElement) {
   })
   accessor commentIds!: string[];
 
+  @property({ attribute: false })
+  accessor unresolved = false;
+
   private _index: number = 0;
 
   @consume({ context: stdContext })
@@ -54,8 +57,10 @@ export class InlineComment extends WithDisposable(ShadowlessElement) {
   }
 
   private readonly _handleClick = () => {
-    this._provider?.highlightComment(this.commentIds[this._index]);
-    this._index = (this._index + 1) % this.commentIds.length;
+    if (this.unresolved) {
+      this._provider?.highlightComment(this.commentIds[this._index]);
+      this._index = (this._index + 1) % this.commentIds.length;
+    }
   };
 
   private readonly _handleHighlight = (id: CommentId | null) => {
@@ -89,6 +94,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() {

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;

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

@@ -2,21 +2,41 @@ import {
   type ViewExtensionContext,
   ViewExtensionProvider,
 } from '@blocksuite/affine-ext-loader';
+import z from 'zod';
 
 import { effects } from './effects';
 import { InlineCommentManager } from './inline-comment-manager';
-import { CommentInlineSpecExtension } from './inline-spec';
+import {
+  CommentInlineSpecExtension,
+  NullCommentInlineSpecExtension,
+} from './inline-spec';
 
-export class InlineCommentViewExtension extends ViewExtensionProvider {
+const optionsSchema = z.object({
+  enabled: z.boolean().optional().default(true),
+});
+
+export class InlineCommentViewExtension extends ViewExtensionProvider<
+  z.infer<typeof optionsSchema>
+> {
   override name = 'affine-inline-comment';
 
+  override schema = optionsSchema;
+
   override effect(): void {
     super.effect();
     effects();
   }
 
-  override setup(context: ViewExtensionContext) {
-    super.setup(context);
-    context.register([CommentInlineSpecExtension, InlineCommentManager]);
+  override setup(
+    context: ViewExtensionContext,
+    options?: z.infer<typeof optionsSchema>
+  ) {
+    super.setup(context, options);
+    context.register([
+      options?.enabled
+        ? CommentInlineSpecExtension
+        : NullCommentInlineSpecExtension,
+      InlineCommentManager,
+    ]);
   }
 }

blocksuite/affine/inlines/footnote/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",
     "collapse-white-space": "^2.1.0",
     "date-fns": "^4.0.0",

blocksuite/affine/inlines/latex/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/hast": "^3.0.4",
     "@types/katex": "^0.16.7",
     "@types/lodash-es": "^4.17.12",

blocksuite/affine/inlines/latex/src/latex-node/latex-node.ts

@@ -190,7 +190,7 @@ export class AffineLatexNode extends SignalWatcher(
 
     blockComponent.selection.setGroup('note', []);
 
-    const portal = createLitPortal({
+    const { portal } = createLitPortal({
       template: html`<latex-editor-menu
         .std=${this.std}
         .latexSignal=${this.latexEditorSignal}

blocksuite/affine/inlines/link/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",
     "collapse-white-space": "^2.1.0",
     "date-fns": "^4.0.0",

blocksuite/affine/inlines/mention/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",
     "collapse-white-space": "^2.1.0",
     "date-fns": "^4.0.0",

blocksuite/affine/inlines/preset/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/hast": "^3.0.4",
     "@types/katex": "^0.16.7",
     "@types/lodash-es": "^4.17.12",

blocksuite/affine/inlines/reference/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",
     "collapse-white-space": "^2.1.0",
     "date-fns": "^4.0.0",

blocksuite/affine/model/package.json

@@ -13,7 +13,7 @@
     "@blocksuite/global": "workspace:*",
     "@blocksuite/std": "workspace:*",
     "@blocksuite/store": "workspace:*",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/lodash-es": "^4.17.12",
     "fractional-indexing": "^3.2.0",
     "lodash-es": "^4.17.21",

blocksuite/affine/rich-text/package.json

@@ -20,7 +20,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",
     "collapse-white-space": "^2.1.0",
     "date-fns": "^4.0.0",

blocksuite/affine/shared/package.json

@@ -18,7 +18,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/bytes": "^3.1.5",
     "@types/hast": "^3.0.4",
     "@types/lodash-es": "^4.17.12",

blocksuite/affine/shared/src/services/comment-service/block-comment-manager.ts

@@ -1,118 +0,0 @@
-import { DividerBlockModel } from '@blocksuite/affine-model';
-import { DisposableGroup } from '@blocksuite/global/disposable';
-import {
-  BlockSelection,
-  LifeCycleWatcher,
-  TextSelection,
-} from '@blocksuite/std';
-import type { BaseSelection, BlockModel } from '@blocksuite/store';
-import { signal } from '@preact/signals-core';
-
-import { getSelectedBlocksCommand } from '../../commands';
-import { ImageSelection } from '../../selection';
-import { matchModels } from '../../utils';
-import { type CommentId, CommentProviderIdentifier } from './comment-provider';
-import { findCommentedBlocks } from './utils';
-
-export class BlockCommentManager extends LifeCycleWatcher {
-  static override key = 'block-comment-manager';
-
-  private readonly _highlightedCommentId$ = signal<CommentId | null>(null);
-
-  private readonly _disposables = new DisposableGroup();
-
-  private get _provider() {
-    return this.std.getOptional(CommentProviderIdentifier);
-  }
-
-  isBlockCommentHighlighted(
-    block: BlockModel<{ comments?: Record<CommentId, boolean> }>
-  ) {
-    const comments = block.props.comments;
-    if (!comments) return false;
-    return (
-      this._highlightedCommentId$.value !== null &&
-      Object.keys(comments).includes(this._highlightedCommentId$.value)
-    );
-  }
-
-  override mounted() {
-    const provider = this._provider;
-    if (!provider) return;
-
-    this._disposables.add(provider.onCommentAdded(this._handleAddComment));
-    this._disposables.add(
-      provider.onCommentDeleted(this.handleDeleteAndResolve)
-    );
-    this._disposables.add(
-      provider.onCommentResolved(this.handleDeleteAndResolve)
-    );
-    this._disposables.add(
-      provider.onCommentHighlighted(this._handleHighlightComment)
-    );
-  }
-
-  override unmounted() {
-    this._disposables.dispose();
-  }
-
-  private readonly _handleAddComment = (
-    id: CommentId,
-    selections: BaseSelection[]
-  ) => {
-    const blocksFromTextRange = selections
-      .filter((s): s is TextSelection => s.is(TextSelection))
-      .map(s => {
-        const [_, { selectedBlocks }] = this.std.command.exec(
-          getSelectedBlocksCommand,
-          {
-            textSelection: s,
-          }
-        );
-        if (!selectedBlocks) return [];
-        return selectedBlocks.map(b => b.model).filter(m => !m.text);
-      });
-
-    const needCommentBlocks = [
-      ...blocksFromTextRange.flat(),
-      ...selections
-        .filter(s => s instanceof BlockSelection || s instanceof ImageSelection)
-        .map(({ blockId }) => this.std.store.getModelById(blockId))
-        .filter(
-          (m): m is BlockModel =>
-            m !== null && !matchModels(m, [DividerBlockModel])
-        ),
-    ];
-
-    if (needCommentBlocks.length === 0) return;
-
-    this.std.store.withoutTransact(() => {
-      needCommentBlocks.forEach(block => {
-        const comments = (
-          'comments' in block.props &&
-          typeof block.props.comments === 'object' &&
-          block.props.comments !== null
-            ? block.props.comments
-            : {}
-        ) as Record<CommentId, boolean>;
-
-        this.std.store.updateBlock(block, {
-          comments: { [id]: true, ...comments },
-        });
-      });
-    });
-  };
-
-  readonly handleDeleteAndResolve = (id: CommentId) => {
-    const commentedBlocks = findCommentedBlocks(this.std.store, id);
-    this.std.store.withoutTransact(() => {
-      commentedBlocks.forEach(block => {
-        delete block.props.comments[id];
-      });
-    });
-  };
-
-  private readonly _handleHighlightComment = (id: CommentId | null) => {
-    this._highlightedCommentId$.value = id;
-  };
-}

blocksuite/affine/shared/src/services/comment-service/block-element-comment-manager.ts

@@ -0,0 +1,181 @@
+import { DividerBlockModel } from '@blocksuite/affine-model';
+import { DisposableGroup } from '@blocksuite/global/disposable';
+import {
+  BlockSelection,
+  LifeCycleWatcher,
+  SurfaceSelection,
+  TextSelection,
+} from '@blocksuite/std';
+import {
+  GfxControllerIdentifier,
+  type GfxModel,
+  type GfxPrimitiveElementModel,
+} from '@blocksuite/std/gfx';
+import type { BaseSelection, BlockModel } from '@blocksuite/store';
+import { signal } from '@preact/signals-core';
+
+import { getSelectedBlocksCommand } from '../../commands';
+import { ImageSelection } from '../../selection';
+import { matchModels } from '../../utils';
+import { type CommentId, CommentProviderIdentifier } from './comment-provider';
+import { findCommentedBlocks, findCommentedElements } from './utils';
+
+export class BlockElementCommentManager extends LifeCycleWatcher {
+  static override key = 'block-element-comment-manager';
+
+  private readonly _highlightedCommentId$ = signal<CommentId | null>(null);
+
+  private readonly _disposables = new DisposableGroup();
+
+  private get _provider() {
+    return this.std.getOptional(CommentProviderIdentifier);
+  }
+
+  isBlockCommentHighlighted(
+    block: BlockModel<{ comments?: Record<CommentId, boolean> }>
+  ) {
+    const comments = block.props.comments;
+    if (!comments) return false;
+    return (
+      this._highlightedCommentId$.value !== null &&
+      Object.keys(comments).includes(this._highlightedCommentId$.value)
+    );
+  }
+
+  isElementCommentHighlighted(element: GfxPrimitiveElementModel) {
+    const comments = element.comments;
+    if (!comments) return false;
+    return (
+      this._highlightedCommentId$.value !== null &&
+      Object.keys(comments).includes(this._highlightedCommentId$.value)
+    );
+  }
+
+  override mounted() {
+    const provider = this._provider;
+    if (!provider) return;
+
+    this._disposables.add(provider.onCommentAdded(this._handleAddComment));
+    this._disposables.add(
+      provider.onCommentDeleted(id => this.handleDeleteAndResolve(id, 'delete'))
+    );
+    this._disposables.add(
+      provider.onCommentResolved(id =>
+        this.handleDeleteAndResolve(id, 'resolve')
+      )
+    );
+    this._disposables.add(
+      provider.onCommentHighlighted(this._handleHighlightComment)
+    );
+  }
+
+  override unmounted() {
+    this._disposables.dispose();
+  }
+
+  private readonly _handleAddComment = (
+    id: CommentId,
+    selections: BaseSelection[]
+  ) => {
+    // get blocks from text range that some no-text blocks are selected such as image, bookmark, etc.
+    const noTextBlocksFromTextRange = selections
+      .filter((s): s is TextSelection => s.is(TextSelection))
+      .flatMap(s => {
+        const [_, { selectedBlocks }] = this.std.command.exec(
+          getSelectedBlocksCommand,
+          {
+            textSelection: s,
+          }
+        );
+        if (!selectedBlocks) return [];
+        return selectedBlocks.map(b => b.model).filter(m => !m.text);
+      });
+
+    const blocksFromBlockSelection = selections
+      .filter(s => s instanceof BlockSelection || s instanceof ImageSelection)
+      .map(({ blockId }) => this.std.store.getModelById(blockId))
+      .filter(
+        (m): m is BlockModel =>
+          m !== null && !matchModels(m, [DividerBlockModel])
+      );
+
+    const needCommentBlocks = [
+      ...noTextBlocksFromTextRange,
+      ...blocksFromBlockSelection,
+    ];
+
+    if (needCommentBlocks.length !== 0) {
+      this.std.store.withoutTransact(() => {
+        needCommentBlocks.forEach(block => {
+          const comments = (
+            'comments' in block.props &&
+            typeof block.props.comments === 'object' &&
+            block.props.comments !== null
+              ? block.props.comments
+              : {}
+          ) as Record<CommentId, boolean>;
+
+          this.std.store.updateBlock(block, {
+            comments: { [id]: true, ...comments },
+          });
+        });
+      });
+    }
+
+    const gfx = this.std.get(GfxControllerIdentifier);
+    const elementsFromSurfaceSelection = selections
+      .filter(s => s instanceof SurfaceSelection)
+      .flatMap(({ elements }) => {
+        return elements
+          .map(id => gfx.getElementById<GfxModel>(id))
+          .filter(m => m !== null);
+      });
+    if (elementsFromSurfaceSelection.length !== 0) {
+      this.std.store.withoutTransact(() => {
+        elementsFromSurfaceSelection.forEach(element => {
+          const comments =
+            'comments' in element &&
+            typeof element.comments === 'object' &&
+            element.comments !== null
+              ? element.comments
+              : {};
+
+          gfx.updateElement(element, {
+            comments: { [id]: true, ...comments },
+          });
+        });
+      });
+    }
+  };
+
+  readonly handleDeleteAndResolve = (
+    id: CommentId,
+    type: 'delete' | 'resolve'
+  ) => {
+    const commentedBlocks = findCommentedBlocks(this.std.store, id);
+    this.std.store.withoutTransact(() => {
+      commentedBlocks.forEach(block => {
+        if (type === 'delete') {
+          delete block.props.comments[id];
+        } else {
+          block.props.comments[id] = false;
+        }
+      });
+    });
+
+    const commentedElements = findCommentedElements(this.std.store, id);
+    this.std.store.withoutTransact(() => {
+      commentedElements.forEach(element => {
+        if (type === 'delete') {
+          delete element.comments[id];
+        } else {
+          element.comments[id] = false;
+        }
+      });
+    });
+  };
+
+  private readonly _handleHighlightComment = (id: CommentId | null) => {
+    this._highlightedCommentId$.value = id;
+  };
+}

blocksuite/affine/shared/src/services/comment-service/index.ts

@@ -1,3 +1,3 @@
-export * from './block-comment-manager';
+export * from './block-element-comment-manager';
 export * from './comment-provider';
 export * from './utils';

blocksuite/affine/shared/src/services/comment-service/utils.ts

@@ -1,6 +1,10 @@
 import { CommentIcon } from '@blocksuite/icons/lit';
-import { BlockSelection } from '@blocksuite/std';
-import type { BlockModel, Store } from '@blocksuite/store';
+import { BlockSelection, SurfaceSelection } from '@blocksuite/std';
+import type {
+  GfxPrimitiveElementModel,
+  SurfaceBlockModel,
+} from '@blocksuite/std/gfx';
+import { BlockModel, type Store } from '@blocksuite/store';
 
 import type { ToolbarAction } from '../toolbar-service';
 import { type CommentId, CommentProviderIdentifier } from './comment-provider';
@@ -22,6 +26,31 @@ export function findCommentedBlocks(store: Store, commentId: CommentId) {
   });
 }
 
+export function findAllCommentedElements(store: Store) {
+  type CommentedElement = GfxPrimitiveElementModel & {
+    comments: Record<CommentId, boolean>;
+  };
+  const surface = store.getModelsByFlavour('affine:surface')[0] as
+    | SurfaceBlockModel
+    | undefined;
+  if (!surface) return [];
+
+  return surface.elementModels.filter(
+    (element): element is CommentedElement => {
+      return (
+        element.comments !== undefined &&
+        Object.keys(element.comments).length > 0
+      );
+    }
+  );
+}
+
+export function findCommentedElements(store: Store, commentId: CommentId) {
+  return findAllCommentedElements(store).filter(element => {
+    return element.comments[commentId];
+  });
+}
+
 export const blockCommentToolbarButton: Omit<ToolbarAction, 'id'> = {
   tooltip: 'Comment',
   when: ({ std }) => !!std.getOptional(CommentProviderIdentifier),
@@ -29,22 +58,26 @@ export const blockCommentToolbarButton: Omit<ToolbarAction, 'id'> = {
   run: ctx => {
     const commentProvider = ctx.std.getOptional(CommentProviderIdentifier);
     if (!commentProvider) return;
-    const selections = ctx.selection.value;
 
+    const selections = ctx.selection.value;
     const model = ctx.getCurrentModel();
 
-    if (selections.length > 1) {
+    // may be hover on a block or element, in this case
+    // the selection is empty, so we need to get the current model
+    if (model && selections.length === 0) {
+      if (model instanceof BlockModel) {
+        commentProvider.addComment([
+          new BlockSelection({
+            blockId: model.id,
+          }),
+        ]);
+      } else if (ctx.gfx.surface?.id) {
+        commentProvider.addComment([
+          new SurfaceSelection(ctx.gfx.surface.id, [model.id], false),
+        ]);
+      }
+    } else if (selections.length > 0) {
       commentProvider.addComment(selections);
-    } else if (model) {
-      commentProvider.addComment([
-        new BlockSelection({
-          blockId: model.id,
-        }),
-      ]);
-    } else if (selections.length === 1) {
-      commentProvider.addComment(selections);
-    } else {
-      return;
     }
   },
 };

blocksuite/affine/shared/src/services/notification-service.ts

@@ -40,7 +40,6 @@ export interface NotificationService {
     }[];
     onClose?: () => void;
   }): void;
-
   /**
    * Notify with undo action, it is a helper function to notify with undo action.
    * And the notification card will be closed when undo action is triggered by shortcut key or other ways.
@@ -55,13 +54,16 @@ export const NotificationProvider = createIdentifier<NotificationService>(
 );
 
 export function NotificationExtension(
-  notificationService: Omit<NotificationService, 'notifyWithUndoAction'>
+  notificationService: NotificationService
 ): ExtensionType {
   return {
     setup: di => {
       di.addImpl(NotificationProvider, provider => {
         return {
-          ...notificationService,
+          notify: notificationService.notify,
+          toast: notificationService.toast,
+          confirm: notificationService.confirm,
+          prompt: notificationService.prompt,
           notifyWithUndoAction: options => {
             notifyWithUndoActionImpl(
               provider,

blocksuite/affine/widgets/drag-handle/package.json

@@ -27,7 +27,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",

blocksuite/affine/widgets/edgeless-auto-connect/package.json

@@ -20,7 +20,7 @@
     "@blocksuite/icons": "^2.2.12",
     "@blocksuite/std": "workspace:*",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "lit": "^3.2.0",
     "rxjs": "^7.8.1"
   },

blocksuite/affine/widgets/edgeless-dragging-area/package.json

@@ -21,7 +21,7 @@
     "@blocksuite/std": "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",
     "rxjs": "^7.8.1",
     "yjs": "^13.6.21"