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/components/src/toolbar/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';

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,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 +57,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 +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",
@@ -63,7 +63,8 @@
     "./theme": "./src/theme/index.ts",
     "./styles": "./src/styles/index.ts",
     "./services": "./src/services/index.ts",
-    "./adapters": "./src/adapters/index.ts"
+    "./adapters": "./src/adapters/index.ts",
+    "./test-utils": "./src/test-utils/index.ts"
   },
   "files": [
     "src",

blocksuite/affine/shared/src/__tests__/commands/block-crud/get-first-block.unit.spec.ts

@@ -4,7 +4,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { getFirstBlockCommand } from '../../../commands/block-crud/get-first-content-block';
-import { affine } from '../../helpers/affine-template';
+import { affine } from '../../../test-utils';
 
 describe('commands/block-crud', () => {
   describe('getFirstBlockCommand', () => {

blocksuite/affine/shared/src/__tests__/commands/block-crud/get-last-block.unit.spec.ts

@@ -4,7 +4,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { getLastBlockCommand } from '../../../commands/block-crud/get-last-content-block';
-import { affine } from '../../helpers/affine-template';
+import { affine } from '../../../test-utils';
 
 describe('commands/block-crud', () => {
   describe('getLastBlockCommand', () => {

blocksuite/affine/shared/src/__tests__/commands/model-crud/replace-selected-text-with-blocks.unit.spec.ts

@@ -1,13 +1,11 @@
 /**
  * @vitest-environment happy-dom
  */
-import '../../helpers/affine-test-utils';
-
 import type { TextSelection } from '@blocksuite/std';
 import { describe, expect, it } from 'vitest';
 
 import { replaceSelectedTextWithBlocksCommand } from '../../../commands/model-crud/replace-selected-text-with-blocks';
-import { affine, block } from '../../helpers/affine-template';
+import { affine, block } from '../../../test-utils';
 
 describe('commands/model-crud', () => {
   describe('replaceSelectedTextWithBlocksCommand', () => {

blocksuite/affine/shared/src/__tests__/commands/selection/is-nothing-selected.unit.spec.ts

@@ -6,7 +6,7 @@ import { describe, expect, it, vi } from 'vitest';
 
 import { isNothingSelectedCommand } from '../../../commands/selection/is-nothing-selected';
 import { ImageSelection } from '../../../selection';
-import { affine } from '../../helpers/affine-template';
+import { affine } from '../../../test-utils';
 
 describe('commands/selection', () => {
   describe('isNothingSelectedCommand', () => {

blocksuite/affine/shared/src/__tests__/helpers/affine-template.ts

@@ -1,298 +0,0 @@
-import {
-  CodeBlockSchemaExtension,
-  DatabaseBlockSchemaExtension,
-  ImageBlockSchemaExtension,
-  ListBlockSchemaExtension,
-  NoteBlockSchemaExtension,
-  ParagraphBlockSchemaExtension,
-  RootBlockSchemaExtension,
-} from '@blocksuite/affine-model';
-import { TextSelection } from '@blocksuite/std';
-import { type Block, type Store } from '@blocksuite/store';
-import { Text } from '@blocksuite/store';
-import { TestWorkspace } from '@blocksuite/store/test';
-
-import { createTestHost } from './create-test-host';
-
-// Extensions array
-const extensions = [
-  RootBlockSchemaExtension,
-  NoteBlockSchemaExtension,
-  ParagraphBlockSchemaExtension,
-  ListBlockSchemaExtension,
-  ImageBlockSchemaExtension,
-  DatabaseBlockSchemaExtension,
-  CodeBlockSchemaExtension,
-];
-
-// Mapping from tag names to flavours
-const tagToFlavour: Record<string, string> = {
-  'affine-page': 'affine:page',
-  'affine-note': 'affine:note',
-  'affine-paragraph': 'affine:paragraph',
-  'affine-list': 'affine:list',
-  'affine-image': 'affine:image',
-  'affine-database': 'affine:database',
-  'affine-code': 'affine:code',
-};
-
-interface SelectionInfo {
-  anchorBlockId?: string;
-  anchorOffset?: number;
-  focusBlockId?: string;
-  focusOffset?: number;
-  cursorBlockId?: string;
-  cursorOffset?: number;
-}
-
-/**
- * Parse template strings and build BlockSuite document structure,
- * then create a host object with the document
- *
- * Example:
- * ```
- * const host = affine`
- *   <affine-page id="page">
- *     <affine-note id="note">
- *       <affine-paragraph id="paragraph-1">Hello, world<anchor /></affine-paragraph>
- *       <affine-paragraph id="paragraph-2">Hello, world<focus /></affine-paragraph>
- *     </affine-note>
- *   </affine-page>
- * `;
- * ```
- */
-export function affine(strings: TemplateStringsArray, ...values: any[]) {
-  // Merge template strings and values
-  let htmlString = '';
-  strings.forEach((str, i) => {
-    htmlString += str;
-    if (i < values.length) {
-      htmlString += values[i];
-    }
-  });
-
-  // Create a new doc
-  const workspace = new TestWorkspace({});
-  workspace.meta.initialize();
-  const doc = workspace.createDoc('test-doc');
-  const store = doc.getStore({ extensions });
-
-  let selectionInfo: SelectionInfo = {};
-
-  // Use DOMParser to parse HTML string
-  doc.load(() => {
-    const parser = new DOMParser();
-    const dom = parser.parseFromString(htmlString.trim(), 'text/html');
-    const root = dom.body.firstElementChild;
-
-    if (!root) {
-      throw new Error('Template must contain a root element');
-    }
-
-    buildDocFromElement(store, root, null, selectionInfo);
-  });
-
-  // Create host object
-  const host = createTestHost(store);
-
-  // Set selection if needed
-  if (selectionInfo.anchorBlockId && selectionInfo.focusBlockId) {
-    const anchorBlock = store.getBlock(selectionInfo.anchorBlockId);
-    const anchorTextLength = anchorBlock?.model?.text?.length ?? 0;
-    const focusOffset = selectionInfo.focusOffset ?? 0;
-    const anchorOffset = selectionInfo.anchorOffset ?? 0;
-
-    if (selectionInfo.anchorBlockId === selectionInfo.focusBlockId) {
-      const selection = host.selection.create(TextSelection, {
-        from: {
-          blockId: selectionInfo.anchorBlockId,
-          index: anchorOffset,
-          length: focusOffset,
-        },
-        to: null,
-      });
-      host.selection.setGroup('note', [selection]);
-    } else {
-      const selection = host.selection.create(TextSelection, {
-        from: {
-          blockId: selectionInfo.anchorBlockId,
-          index: anchorOffset,
-          length: anchorTextLength - anchorOffset,
-        },
-        to: {
-          blockId: selectionInfo.focusBlockId,
-          index: 0,
-          length: focusOffset,
-        },
-      });
-      host.selection.setGroup('note', [selection]);
-    }
-  } else if (selectionInfo.cursorBlockId) {
-    const selection = host.selection.create(TextSelection, {
-      from: {
-        blockId: selectionInfo.cursorBlockId,
-        index: selectionInfo.cursorOffset ?? 0,
-        length: 0,
-      },
-      to: null,
-    });
-    host.selection.setGroup('note', [selection]);
-  }
-
-  return host;
-}
-
-/**
- * Create a single block from template string
- *
- * Example:
- * ```
- * const block = block`<affine-note />`
- * ```
- */
-export function block(
-  strings: TemplateStringsArray,
-  ...values: any[]
-): Block | null {
-  // Merge template strings and values
-  let htmlString = '';
-  strings.forEach((str, i) => {
-    htmlString += str;
-    if (i < values.length) {
-      htmlString += values[i];
-    }
-  });
-
-  // Create a temporary doc to hold the block
-  const workspace = new TestWorkspace({});
-  workspace.meta.initialize();
-  const doc = workspace.createDoc('temp-doc');
-  const store = doc.getStore({ extensions });
-
-  let blockId: string | null = null;
-  const selectionInfo: SelectionInfo = {};
-
-  // Use DOMParser to parse HTML string
-  doc.load(() => {
-    const parser = new DOMParser();
-    const dom = parser.parseFromString(htmlString.trim(), 'text/html');
-    const root = dom.body.firstElementChild;
-
-    if (!root) {
-      throw new Error('Template must contain a root element');
-    }
-
-    // Create a root block if needed
-    const flavour = tagToFlavour[root.tagName.toLowerCase()];
-    if (
-      flavour === 'affine:paragraph' ||
-      flavour === 'affine:list' ||
-      flavour === 'affine:code'
-    ) {
-      const pageId = store.addBlock('affine:page', {});
-      const noteId = store.addBlock('affine:note', {}, pageId);
-      blockId = buildDocFromElement(store, root, noteId, selectionInfo);
-    } else {
-      blockId = buildDocFromElement(store, root, null, selectionInfo);
-    }
-  });
-
-  // Return the created block
-  return blockId ? (store.getBlock(blockId) ?? null) : null;
-}
-
-/**
- * Recursively build document structure
- * @param doc
- * @param element
- * @param parentId
- * @param selectionInfo
- * @returns
- */
-function buildDocFromElement(
-  doc: Store,
-  element: Element,
-  parentId: string | null,
-  selectionInfo: SelectionInfo
-): string {
-  const tagName = element.tagName.toLowerCase();
-
-  // Handle selection tags
-  if (tagName === 'anchor') {
-    if (!parentId) return '';
-    const parentBlock = doc.getBlock(parentId);
-    if (parentBlock) {
-      const textBeforeCursor = element.previousSibling?.textContent ?? '';
-      selectionInfo.anchorBlockId = parentId;
-      selectionInfo.anchorOffset = textBeforeCursor.length;
-    }
-    return parentId;
-  } else if (tagName === 'focus') {
-    if (!parentId) return '';
-    const parentBlock = doc.getBlock(parentId);
-    if (parentBlock) {
-      const textBeforeCursor = element.previousSibling?.textContent ?? '';
-      selectionInfo.focusBlockId = parentId;
-      selectionInfo.focusOffset = textBeforeCursor.length;
-    }
-    return parentId;
-  } else if (tagName === 'cursor') {
-    if (!parentId) return '';
-    const parentBlock = doc.getBlock(parentId);
-    if (parentBlock) {
-      const textBeforeCursor = element.previousSibling?.textContent ?? '';
-      selectionInfo.cursorBlockId = parentId;
-      selectionInfo.cursorOffset = textBeforeCursor.length;
-    }
-    return parentId;
-  }
-
-  const flavour = tagToFlavour[tagName];
-
-  if (!flavour) {
-    throw new Error(`Unknown tag name: ${tagName}`);
-  }
-
-  const props: Record<string, any> = {};
-
-  const customId = element.getAttribute('id');
-
-  // If ID is specified, add it to props
-  if (customId) {
-    props.id = customId;
-  }
-
-  // Process element attributes
-  Array.from(element.attributes).forEach(attr => {
-    if (attr.name !== 'id') {
-      // Skip id attribute, we already handled it
-      props[attr.name] = attr.value;
-    }
-  });
-
-  // Special handling for different block types based on their flavours
-  switch (flavour) {
-    case 'affine:paragraph':
-    case 'affine:list':
-      if (element.textContent) {
-        props.text = new Text(element.textContent);
-      }
-      break;
-  }
-
-  // Create block
-  const blockId = doc.addBlock(flavour, props, parentId);
-
-  // Process all child nodes, including text nodes
-  Array.from(element.children).forEach(child => {
-    if (child.nodeType === Node.ELEMENT_NODE) {
-      // Handle element nodes
-      buildDocFromElement(doc, child as Element, blockId, selectionInfo);
-    } else if (child.nodeType === Node.TEXT_NODE) {
-      // Handle text nodes
-      console.log('buildDocFromElement text node:', child.textContent);
-    }
-  });
-
-  return blockId;
-}

blocksuite/affine/shared/src/__tests__/test-utils/affine-template.unit.spec.ts

@@ -1,7 +1,7 @@
 import { TextSelection } from '@blocksuite/std';
 import { describe, expect, it } from 'vitest';
 
-import { affine } from './affine-template';
+import { affine } from '../../test-utils';
 
 describe('helpers/affine-template', () => {
   it('should create a basic document structure from template', () => {

blocksuite/affine/shared/src/selection/hightlight.ts

@@ -1,8 +1,12 @@
-import {
-  type ReferenceParams,
-  ReferenceParamsSchema,
-} from '@blocksuite/affine-model';
+import { ReferenceParamsSchema } from '@blocksuite/affine-model';
 import { BaseSelection, SelectionExtension } from '@blocksuite/store';
+import z from 'zod';
+
+const HighlightSelectionParamsSchema = ReferenceParamsSchema.extend({
+  highlight: z.boolean().optional(),
+});
+
+type HighlightSelectionParams = z.infer<typeof HighlightSelectionParamsSchema>;
 
 export class HighlightSelection extends BaseSelection {
   static override group = 'scene';
@@ -15,16 +19,24 @@ export class HighlightSelection extends BaseSelection {
 
   readonly mode: 'page' | 'edgeless' = 'page';
 
-  constructor({ mode, blockIds, elementIds }: ReferenceParams) {
+  readonly highlight: boolean = true;
+
+  constructor({
+    mode,
+    blockIds,
+    elementIds,
+    highlight = true,
+  }: HighlightSelectionParams) {
     super({ blockId: '[scene-highlight]' });
 
     this.mode = mode ?? 'page';
     this.blockIds = blockIds ?? [];
     this.elementIds = elementIds ?? [];
+    this.highlight = highlight;
   }
 
   static override fromJSON(json: Record<string, unknown>): HighlightSelection {
-    const result = ReferenceParamsSchema.parse(json);
+    const result = HighlightSelectionParamsSchema.parse(json);
     return new HighlightSelection(result);
   }