fix(editor): keyboard can not open after closing input modal (#13041)

#### PR Dependency Tree


* **PR #13041** 👈

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

* **Bug Fixes**
* Improved handling of keyboard provider fallbacks to ensure more
reliable keyboard behavior when certain features are unavailable.

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

.docker/dev/README.md

@@ -15,13 +15,7 @@ yarn affine cert --install
 
 ```bash
 # certificates will be located at `./.docker/dev/certs/${domain}`
-yarn affine cert --domain dev.affine.fail
+yarn affine cert --domain affine.localhost
 ```
 
-### 3. Enable dns and nginx service in compose.yml
-
-### 4. Add custom dns server
-
-```bash
-echo "nameserver 127.0.0.1" | sudo tee /etc/resolver/dev.affine.fail
-```
+### 3. Enable nginx service in compose.yml

.docker/dev/compose.yml.example

@@ -73,17 +73,6 @@ services:
   #     timeout: 10s
   #     retries: 120
 
-  # dns:
-  #   image: strm/dnsmasq
-  #   volumes:
-  #     - ./dnsmasq.conf:/etc/dnsmasq.d/local.conf
-  #   ports:
-  #     - "53:53/udp"
-  #   cap_add:
-  #     - NET_ADMIN
-  #   depends_on:
-  #     - nginx
-
   # nginx:
   #   image: nginx:alpine
   #   volumes:

.docker/dev/dnsmasq.conf

@@ -1,2 +0,0 @@
-log-queries
-address=/dev.affine.fail/127.0.0.1

.docker/selfhost/schema.json

@@ -565,6 +565,11 @@
           "type": "boolean",
           "description": "Only allow users with early access features to access the app\n@default false",
           "default": false
+        },
+        "allowGuestDemoWorkspace": {
+          "type": "boolean",
+          "description": "Whether allow guest users to create demo workspaces.\n@default true",
+          "default": true
         }
       }
     },
@@ -732,6 +737,11 @@
           },
           "default": {}
         },
+        "providers.morph": {
+          "type": "object",
+          "description": "The config for the morph provider.\n@default {}",
+          "default": {}
+        },
         "unsplash": {
           "type": "object",
           "description": "The config for the unsplash key.\n@default {\"key\":\"\"}",

.github/actions/prepare-release/action.yml

@@ -21,7 +21,7 @@ runs:
         if [ "${{ github.ref_type }}" == "tag" ]; then
           APP_VERSION=$(echo "${{ github.ref_name }}" | sed 's/^v//')
         else
-          APP_VERSION=$(date '+%Y.%-m.%-d-canary.%-H%-M')
+          APP_VERSION=$(date '+%Y.%-m.%-d-canary.%-H%M')
         fi
         if [[ "$APP_VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
           BUILD_TYPE=stable

.github/deployment/node/Dockerfile

@@ -7,7 +7,10 @@ COPY ./packages/frontend/apps/mobile/dist /app/static/mobile
 WORKDIR /app
 
 RUN apt-get update && \
-  apt-get install -y --no-install-recommends openssl && \
+  apt-get install -y --no-install-recommends openssl libjemalloc2 && \
   rm -rf /var/lib/apt/lists/*
 
+# Enable jemalloc by preloading the library
+ENV LD_PRELOAD=libjemalloc.so.2
+
 CMD ["node", "./dist/main.js"]

.github/workflows/release-mobile.yml

@@ -124,7 +124,6 @@ jobs:
           package: 'affine_mobile_native'
           no-build: 'true'
       - name: Testflight
-        if: ${{ env.BUILD_TYPE != 'stable' }}
         working-directory: packages/frontend/apps/ios/App
         run: |
           echo -n "${{ env.BUILD_PROVISION_PROFILE }}" | base64 --decode -o $PP_PATH
@@ -132,6 +131,7 @@ jobs:
           cp $PP_PATH ~/Library/MobileDevice/Provisioning\ Profiles
           fastlane beta
         env:
+          BUILD_TARGET: distribution
           BUILD_PROVISION_PROFILE: ${{ secrets.BUILD_PROVISION_PROFILE }}
           PP_PATH: ${{ runner.temp }}/build_pp.mobileprovision
           APPLE_STORE_CONNECT_API_KEY_ID: ${{ secrets.APPLE_STORE_CONNECT_API_KEY_ID }}

blocksuite/affine/all/package.json

@@ -48,6 +48,7 @@
     "@blocksuite/affine-gfx-template": "workspace:*",
     "@blocksuite/affine-gfx-text": "workspace:*",
     "@blocksuite/affine-gfx-turbo-renderer": "workspace:*",
+    "@blocksuite/affine-inline-comment": "workspace:*",
     "@blocksuite/affine-inline-footnote": "workspace:*",
     "@blocksuite/affine-inline-latex": "workspace:*",
     "@blocksuite/affine-inline-link": "workspace:*",
@@ -173,6 +174,7 @@
     "./inlines/footnote": "./src/inlines/footnote/index.ts",
     "./inlines/footnote/view": "./src/inlines/footnote/view.ts",
     "./inlines/footnote/store": "./src/inlines/footnote/store.ts",
+    "./inlines/comment": "./src/inlines/comment/index.ts",
     "./inlines/latex": "./src/inlines/latex/index.ts",
     "./inlines/latex/store": "./src/inlines/latex/store.ts",
     "./inlines/latex/view": "./src/inlines/latex/view.ts",
@@ -283,6 +285,7 @@
     "./sync": "./src/sync/index.ts",
     "./extensions/store": "./src/extensions/store.ts",
     "./extensions/view": "./src/extensions/view.ts",
+    "./foundation/clipboard": "./src/foundation/clipboard.ts",
     "./foundation/store": "./src/foundation/store.ts",
     "./foundation/view": "./src/foundation/view.ts"
   },

blocksuite/affine/all/src/extensions/view.ts

@@ -33,6 +33,7 @@ import { PointerViewExtension } from '@blocksuite/affine-gfx-pointer/view';
 import { ShapeViewExtension } from '@blocksuite/affine-gfx-shape/view';
 import { TemplateViewExtension } from '@blocksuite/affine-gfx-template/view';
 import { TextViewExtension } from '@blocksuite/affine-gfx-text/view';
+import { InlineCommentViewExtension } from '@blocksuite/affine-inline-comment/view';
 import { FootnoteViewExtension } from '@blocksuite/affine-inline-footnote/view';
 import { LatexViewExtension as InlineLatexViewExtension } from '@blocksuite/affine-inline-latex/view';
 import { LinkViewExtension } from '@blocksuite/affine-inline-link/view';
@@ -95,6 +96,7 @@ export function getInternalViewExtensions() {
     RootViewExtension,
 
     // Inline
+    InlineCommentViewExtension,
     FootnoteViewExtension,
     LinkViewExtension,
     ReferenceViewExtension,

blocksuite/affine/all/src/foundation/clipboard.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-foundation/clipboard';

blocksuite/affine/all/src/inlines/comment/index.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-inline-comment';

blocksuite/affine/all/tsconfig.json

@@ -45,6 +45,7 @@
     { "path": "../gfx/template" },
     { "path": "../gfx/text" },
     { "path": "../gfx/turbo-renderer" },
+    { "path": "../inlines/comment" },
     { "path": "../inlines/footnote" },
     { "path": "../inlines/latex" },
     { "path": "../inlines/link" },

blocksuite/affine/blocks/attachment/src/attachment-block.ts

@@ -17,6 +17,7 @@ import {
   AttachmentBlockStyles,
 } from '@blocksuite/affine-model';
 import {
+  BlockCommentManager,
   CitationProvider,
   DocModeProvider,
   FileSizeLimitProvider,
@@ -92,6 +93,14 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     return this.citationService.isCitationModel(this.model);
   }
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   convertTo = () => {
     return this.std
       .get(AttachmentEmbedProvider)
@@ -499,6 +508,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
         class=${classMap({
           'affine-attachment-container': true,
           focused: this.selected$.value,
+          'comment-highlighted': this.isCommentHighlighted,
         })}
         style=${this.containerStyleMap}
       >

blocksuite/affine/blocks/attachment/src/configs/toolbar.ts

@@ -10,6 +10,7 @@ import {
 } from '@blocksuite/affine-shared/consts';
 import {
   ActionPlacement,
+  blockCommentToolbarButton,
   type ToolbarAction,
   type ToolbarActionGroup,
   type ToolbarModuleConfig,
@@ -240,6 +241,10 @@ const builtinToolbarConfig = {
     replaceAction,
     downloadAction,
     captionAction,
+    {
+      id: 'f.comment',
+      ...blockCommentToolbarButton,
+    },
     {
       placement: ActionPlacement.More,
       id: 'a.clipboard',

blocksuite/affine/blocks/attachment/src/styles.ts

@@ -15,6 +15,10 @@ export const styles = css`
     }
   }
 
+  .affine-attachment-container.comment-highlighted {
+    outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+  }
+
   .affine-attachment-card {
     display: flex;
     gap: 12px;

blocksuite/affine/blocks/bookmark/src/bookmark-block.ts

@@ -8,6 +8,7 @@ import type {
 } from '@blocksuite/affine-model';
 import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
 import {
+  BlockCommentManager,
   CitationProvider,
   DocModeProvider,
   LinkPreviewServiceIdentifier,
@@ -128,6 +129,14 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
     return this.std.get(ImageProxyService);
   }
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   handleClick = (event: MouseEvent) => {
     event.stopPropagation();
 

blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts

@@ -45,6 +45,7 @@ export class BookmarkCard extends SignalWatcher(
       [style]: true,
       selected: this.bookmark.selected$.value,
       edgeless: isGfxBlockComponent(this.bookmark),
+      'comment-highlighted': this.bookmark.isCommentHighlighted,
     });
 
     const domainName = url.match(

blocksuite/affine/blocks/bookmark/src/configs/toolbar.ts

@@ -17,6 +17,7 @@ import {
 } from '@blocksuite/affine-shared/consts';
 import {
   ActionPlacement,
+  blockCommentToolbarButton,
   EmbedIframeService,
   EmbedOptionProvider,
   type LinkEventType,
@@ -288,6 +289,10 @@ const builtinToolbarConfig = {
       },
     } satisfies ToolbarActionGroup<ToolbarAction>,
     captionAction,
+    {
+      id: 'e.comment',
+      ...blockCommentToolbarButton,
+    },
     {
       placement: ActionPlacement.More,
       id: 'a.clipboard',

blocksuite/affine/blocks/bookmark/src/styles.ts

@@ -1,4 +1,4 @@
-import { unsafeCSSVar } from '@blocksuite/affine-shared/theme';
+import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { baseTheme } from '@toeverything/theme';
 import { css, unsafeCSS } from 'lit';
 
@@ -158,6 +158,10 @@ export const styles = css`
     border-radius: 4px;
   }
 
+  .affine-bookmark-card.comment-highlighted {
+    outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+  }
+
   .affine-bookmark-card.loading {
     .affine-bookmark-content-title-text {
       color: var(--affine-placeholder-color);

blocksuite/affine/blocks/code/package.json

@@ -13,6 +13,7 @@
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-gfx-turbo-renderer": "workspace:*",
+    "@blocksuite/affine-inline-comment": "workspace:*",
     "@blocksuite/affine-inline-latex": "workspace:*",
     "@blocksuite/affine-inline-link": "workspace:*",
     "@blocksuite/affine-inline-preset": "workspace:*",

blocksuite/affine/blocks/code/src/code-block-inline.ts

@@ -1,3 +1,4 @@
+import { CommentInlineSpecExtension } from '@blocksuite/affine-inline-comment';
 import { LatexInlineSpecExtension } from '@blocksuite/affine-inline-latex';
 import { LinkInlineSpecExtension } from '@blocksuite/affine-inline-link';
 import {
@@ -20,7 +21,9 @@ import { z } from 'zod';
 export const CodeBlockUnitSpecExtension =
   InlineSpecExtension<AffineTextAttributes>({
     name: 'code-block-unit',
-    schema: z.undefined(),
+    schema: z.object({
+      'code-block-uint': z.undefined(),
+    }),
     match: () => true,
     renderer: ({ delta }) => {
       return html`<affine-code-unit .delta=${delta}></affine-code-unit>`;
@@ -42,5 +45,6 @@ export const CodeBlockInlineManagerExtension =
       LatexInlineSpecExtension.identifier,
       LinkInlineSpecExtension.identifier,
       CodeBlockUnitSpecExtension.identifier,
+      CommentInlineSpecExtension.identifier,
     ],
   });

blocksuite/affine/blocks/code/src/code-block.ts

@@ -6,6 +6,7 @@ import {
   EDGELESS_TOP_CONTENTEDITABLE_SELECTOR,
 } from '@blocksuite/affine-shared/consts';
 import {
+  BlockCommentManager,
   DocModeProvider,
   NotificationProvider,
 } from '@blocksuite/affine-shared/services';
@@ -390,6 +391,14 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
       });
   }
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   override async getUpdateComplete() {
     const result = await super.getUpdateComplete();
     await this._richTextElement?.updateComplete;
@@ -413,6 +422,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
       <div
         class=${classMap({
           'affine-code-block-container': true,
+          'highlight-comment': this.isCommentHighlighted,
           mobile: IS_MOBILE,
           wrap: this.model.props.wrap,
           'disable-line-numbers': !showLineNumbers,

blocksuite/affine/blocks/code/src/code-toolbar/config.ts

@@ -7,9 +7,10 @@ import {
   WrapIcon,
 } from '@blocksuite/affine-components/icons';
 import type { MenuItemGroup } from '@blocksuite/affine-components/toolbar';
+import { CommentProviderIdentifier } from '@blocksuite/affine-shared/services';
 import { isInsidePageEditor } from '@blocksuite/affine-shared/utils';
 import { noop, sleep } from '@blocksuite/global/utils';
-import { NumberedListIcon } from '@blocksuite/icons/lit';
+import { CommentIcon, NumberedListIcon } from '@blocksuite/icons/lit';
 import { BlockSelection } from '@blocksuite/std';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -113,6 +114,47 @@ export const PRIMARY_GROUPS: MenuItemGroup<CodeBlockToolbarContext>[] = [
           };
         },
       },
+      {
+        type: 'comment',
+        label: 'Comment',
+        tooltip: 'Comment',
+        icon: CommentIcon({
+          width: '20',
+          height: '20',
+        }),
+        when: ({ std }) => !!std.getOptional(CommentProviderIdentifier),
+        generate: ({ blockComponent }) => {
+          return {
+            action: () => {
+              const commentProvider = blockComponent.std.getOptional(
+                CommentProviderIdentifier
+              );
+              if (!commentProvider) return;
+
+              commentProvider.addComment([
+                new BlockSelection({
+                  blockId: blockComponent.model.id,
+                }),
+              ]);
+            },
+            render: item =>
+              html`<editor-icon-button
+                class="code-toolbar-button comment"
+                aria-label=${ifDefined(item.label)}
+                .tooltip=${item.label}
+                .tooltipOffset=${4}
+                .iconSize=${'16px'}
+                .iconContainerPadding=${4}
+                @click=${(e: MouseEvent) => {
+                  e.stopPropagation();
+                  item.action();
+                }}
+              >
+                ${item.icon}
+              </editor-icon-button>`,
+          };
+        },
+      },
     ],
   },
 ];

blocksuite/affine/blocks/code/src/index.ts

@@ -2,7 +2,9 @@ export * from './adapters';
 export * from './clipboard';
 export * from './code-block';
 export * from './code-block-config';
+export * from './code-block-service';
 export * from './code-preview-extension';
 export * from './code-toolbar';
+export * from './highlight/const';
 export * from './turbo/code-layout-handler';
 export * from './turbo/code-painter.worker';

blocksuite/affine/blocks/code/src/styles.ts

@@ -1,4 +1,5 @@
 import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css } from 'lit';
 
 export const codeBlockStyles = css`
@@ -20,6 +21,10 @@ export const codeBlockStyles = css`
     padding: 12px;
   }
 
+  .affine-code-block-container.highlight-comment {
+    outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+  }
+
   ${scrollbarStyle('.affine-code-block-container rich-text')}
 
   .affine-code-block-container .inline-editor {

blocksuite/affine/blocks/code/tsconfig.json

@@ -10,6 +10,7 @@
     { "path": "../../components" },
     { "path": "../../ext-loader" },
     { "path": "../../gfx/turbo-renderer" },
+    { "path": "../../inlines/comment" },
     { "path": "../../inlines/latex" },
     { "path": "../../inlines/link" },
     { "path": "../../inlines/preset" },

blocksuite/affine/blocks/database/src/components/title/index.ts

@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import type { DataViewUILogicBase } from '@blocksuite/data-view';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
@@ -72,6 +73,12 @@ export class DatabaseTitle extends SignalWatcher(
     .affine-database-title [data-title-focus='true']::before {
       color: var(--affine-placeholder-color);
     }
+
+    .affine-database-title.comment-highlighted {
+      border-bottom: 2px solid
+        ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+      background-color: ${unsafeCSSVarV2('block/comment/highlightActive')};
+    }
   `;
 
   private readonly compositionEnd = () => {
@@ -134,6 +141,7 @@ export class DatabaseTitle extends SignalWatcher(
     const classList = classMap({
       'affine-database-title': true,
       ellipsis: !this.isFocus$.value,
+      'comment-highlighted': this.database?.isCommentHighlighted ?? false,
     });
     const untitledStyle = styleMap({
       height: isEmpty ? 'auto' : 0,

blocksuite/affine/blocks/database/src/database-block.ts

@@ -10,6 +10,8 @@ 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,
+  CommentProviderIdentifier,
   DocModeProvider,
   NotificationProvider,
   type TelemetryEventMap,
@@ -34,11 +36,12 @@ import {
 import { widgetPresets } from '@blocksuite/data-view/widget-presets';
 import { Rect } from '@blocksuite/global/gfx';
 import {
+  CommentIcon,
   CopyIcon,
   DeleteIcon,
   MoreHorizontalIcon,
 } from '@blocksuite/icons/lit';
-import { type BlockComponent } from '@blocksuite/std';
+import { type BlockComponent, BlockSelection } from '@blocksuite/std';
 import { RANGE_SYNC_EXCLUDE_ATTR } from '@blocksuite/std/inline';
 import { Slice } from '@blocksuite/store';
 import { autoUpdate } from '@floating-ui/dom';
@@ -82,6 +85,18 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
             );
           },
         }),
+        menu.action({
+          prefix: CommentIcon(),
+          name: 'Comment',
+          hide: () => !this.std.getOptional(CommentProviderIdentifier),
+          select: () => {
+            this.std.getOptional(CommentProviderIdentifier)?.addComment([
+              new BlockSelection({
+                blockId: this.blockId,
+              }),
+            ]);
+          },
+        }),
         menu.action({
           prefix: CopyIcon(),
           name: 'Copy',
@@ -297,6 +312,14 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     };
   }
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   override get topContenteditableElement() {
     if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
       return this.closest<BlockComponent>(

blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer.ts

@@ -70,7 +70,7 @@ function toggleStyle(
         return [k, v];
       }
     })
-  );
+  ) as AffineTextAttributes;
 
   inlineEditor.formatText(inlineRange, newAttributes, {
     mode: 'merge',

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/configs/toolbar.ts

@@ -11,6 +11,7 @@ import {
 } from '@blocksuite/affine-shared/consts';
 import {
   ActionPlacement,
+  blockCommentToolbarButton,
   DocDisplayMetaProvider,
   EditorSettingProvider,
   type LinkEventType,
@@ -305,6 +306,10 @@ 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/embed-linked-doc-block.ts

@@ -338,6 +338,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
       'note-empty': this.isNoteContentEmpty,
       'in-canvas': inCanvas,
       [this._cardStyle]: true,
+      'comment-highlighted': this.isCommentHighlighted,
     });
 
     const theme = this.std.get(ThemeProvider).theme;

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/index.ts

@@ -5,3 +5,4 @@ export * from './edgeless-clipboard-config';
 export * from './embed-edgeless-linked-doc-block';
 export * from './embed-linked-doc-block';
 export * from './embed-linked-doc-spec';
+export { getEmbedLinkedDocIcons } from './utils';

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts

@@ -15,6 +15,10 @@ export const styles = css`
     position: relative;
   }
 
+  .affine-embed-linked-doc-block.comment-highlighted {
+    outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+  }
+
   .affine-embed-linked-doc-block.in-canvas {
     border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
     background: ${unsafeCSSVarV2('layer/background/linkedDocOnEdgeless')};
@@ -164,6 +168,7 @@ export const styles = css`
   .affine-embed-linked-doc-banner {
     margin: 12px 12px 0px 0px;
     width: 204px;
+    min-width: 204px;
     max-width: 100%;
     height: 102px;
     pointer-events: none;

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/configs/toolbar.ts

@@ -16,6 +16,7 @@ import {
 import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
 import {
   ActionPlacement,
+  blockCommentToolbarButton,
   EditorSettingProvider,
   type LinkEventType,
   type OpenDocMode,
@@ -225,6 +226,10 @@ 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/embed-synced-doc-block.ts

@@ -232,6 +232,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
             surface: false,
             selected: this.selected$.value,
             'show-hover-border': true,
+            'comment-highlighted': this.isCommentHighlighted,
           })}
           @click=${this._handleClick}
           style=${containerStyleMap}

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts

@@ -57,6 +57,9 @@ export const blockStyles = css`
     border-radius: 8px;
     overflow: hidden;
   }
+  .affine-embed-synced-doc-container.comment-highlighted {
+    outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+  }
   .affine-embed-synced-doc-container.show-hover-border:hover {
     border-color: var(--affine-border-color);
   }

blocksuite/affine/blocks/embed/src/common/embed-block-element.ts

@@ -2,17 +2,20 @@ import {
   CaptionedBlockComponent,
   SelectedStyle,
 } from '@blocksuite/affine-components/caption';
-import type { EmbedCardStyle } from '@blocksuite/affine-model';
+import type { EmbedCardStyle, EmbedProps } from '@blocksuite/affine-model';
 import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_MIN_WIDTH,
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
-import { DocModeProvider } from '@blocksuite/affine-shared/services';
+import {
+  BlockCommentManager,
+  DocModeProvider,
+} from '@blocksuite/affine-shared/services';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { findAncestorModel } from '@blocksuite/affine-shared/utils';
 import type { BlockService } from '@blocksuite/std';
 import {
-  type GfxCompatibleProps,
   GfxViewInteractionExtension,
   type ResizeConstraint,
 } from '@blocksuite/std/gfx';
@@ -25,7 +28,7 @@ import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 export class EmbedBlockComponent<
-  Model extends BlockModel<GfxCompatibleProps> = BlockModel<GfxCompatibleProps>,
+  Model extends BlockModel<EmbedProps> = BlockModel<EmbedProps>,
   Service extends BlockService = BlockService,
   WidgetName extends string = string,
 > extends CaptionedBlockComponent<Model, Service, WidgetName> {
@@ -59,6 +62,14 @@ export class EmbedBlockComponent<
    */
   protected embedContainerStyle: StyleInfo = {};
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   renderEmbed = (content: () => TemplateResult) => {
     if (
       this._cardStyle === 'horizontal' ||
@@ -90,6 +101,11 @@ export class EmbedBlockComponent<
         style=${styleMap({
           height: `${this._cardHeight}px`,
           width: '100%',
+          ...(this.isCommentHighlighted
+            ? {
+                border: `2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')}`,
+              }
+            : {}),
           ...this.embedContainerStyle,
         })}
       >

blocksuite/affine/blocks/embed/src/common/embed-note-content-styles.ts

@@ -57,6 +57,11 @@ export const embedNoteContentStyles = css`
     font-weight: 600;
   }
 
+  .affine-embed-doc-content-note-blocks inline-comment {
+    background-color: unset !important;
+    border-bottom: unset !important;
+  }
+
   .affine-embed-linked-doc-block.horizontal {
     affine-paragraph,
     affine-list {

blocksuite/affine/blocks/embed/src/common/to-edgeless-embed-block.ts

@@ -1,4 +1,5 @@
 import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
+import type { EmbedProps } from '@blocksuite/affine-model';
 import { Bound } from '@blocksuite/global/gfx';
 import {
   blockComponentSymbol,
@@ -7,16 +8,13 @@ import {
   GfxElementSymbol,
   toGfxBlockComponent,
 } from '@blocksuite/std';
-import type {
-  GfxBlockElementModel,
-  GfxCompatibleProps,
-} from '@blocksuite/std/gfx';
+import type { GfxBlockElementModel } from '@blocksuite/std/gfx';
 import type { StyleInfo } from 'lit/directives/style-map.js';
 
 import type { EmbedBlockComponent } from './embed-block-element.js';
 
 export function toEdgelessEmbedBlock<
-  Model extends GfxBlockElementModel<GfxCompatibleProps>,
+  Model extends GfxBlockElementModel<EmbedProps>,
   Service extends BlockService,
   WidgetName extends string,
   B extends typeof EmbedBlockComponent<Model, Service, WidgetName>,

blocksuite/affine/blocks/embed/src/configs/toolbar.ts

@@ -13,6 +13,7 @@ import {
 } from '@blocksuite/affine-shared/consts';
 import {
   ActionPlacement,
+  blockCommentToolbarButton,
   EmbedOptionProvider,
   type LinkEventType,
   type ToolbarAction,
@@ -348,6 +349,10 @@ function createBuiltinToolbarConfigForExternal(
           });
         },
       },
+      {
+        id: 'e.comment',
+        ...blockCommentToolbarButton,
+      },
       {
         placement: ActionPlacement.More,
         id: 'a.clipboard',

blocksuite/affine/blocks/image/src/components/page-image-block.ts

@@ -18,6 +18,7 @@ import type { BaseSelection } from '@blocksuite/store';
 import { computed } from '@preact/signals-core';
 import { css, html, type PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 
@@ -76,6 +77,10 @@ export class ImageBlockPageComponent extends SignalWatcher(
       width: 100%;
       height: 100%;
     }
+
+    affine-page-image .comment-highlighted {
+      outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+    }
   `;
 
   resizeable$ = computed(() => this.block.resizeable$.value);
@@ -364,7 +369,13 @@ export class ImageBlockPageComponent extends SignalWatcher(
     const { loading, error, icon, description, needUpload } = this.state;
 
     return html`
-      <div class="resizable-img" style=${styleMap(imageSize)}>
+      <div
+        class=${classMap({
+          'resizable-img': true,
+          'comment-highlighted': this.block.isCommentHighlighted,
+        })}
+        style=${styleMap(imageSize)}
+      >
         <img
           class="drag-target"
           draggable="false"

blocksuite/affine/blocks/image/src/configs/toolbar.ts

@@ -1,6 +1,7 @@
 import { ImageBlockModel } from '@blocksuite/affine-model';
 import {
   ActionPlacement,
+  blockCommentToolbarButton,
   type ToolbarModuleConfig,
   ToolbarModuleExtension,
 } from '@blocksuite/affine-shared/services';
@@ -49,6 +50,10 @@ const builtinToolbarConfig = {
         });
       },
     },
+    {
+      id: 'c.comment',
+      ...blockCommentToolbarButton,
+    },
     {
       placement: ActionPlacement.More,
       id: 'a.clipboard',
@@ -141,6 +146,10 @@ const builtinSurfaceToolbarConfig = {
         });
       },
     },
+    {
+      id: 'c.comment',
+      ...blockCommentToolbarButton,
+    },
   ],
 
   when: ctx => ctx.getSurfaceModelsByType(ImageBlockModel).length === 1,

blocksuite/affine/blocks/image/src/image-block.ts

@@ -5,7 +5,10 @@ import { Peekable } from '@blocksuite/affine-components/peek';
 import { ResourceController } from '@blocksuite/affine-components/resource';
 import type { ImageBlockModel } from '@blocksuite/affine-model';
 import { ImageSelection } from '@blocksuite/affine-shared/selection';
-import { ToolbarRegistryIdentifier } from '@blocksuite/affine-shared/services';
+import {
+  BlockCommentManager,
+  ToolbarRegistryIdentifier,
+} from '@blocksuite/affine-shared/services';
 import { formatSize } from '@blocksuite/affine-shared/utils';
 import { IS_MOBILE } from '@blocksuite/global/env';
 import { BrokenImageIcon, ImageIcon } from '@blocksuite/icons/lit';
@@ -65,6 +68,14 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
     return this.pageImage?.resizeImg;
   }
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   private _handleClick(event: MouseEvent) {
     // the peek view need handle shift + click
     if (event.defaultPrevented) return;

blocksuite/affine/blocks/paragraph/src/paragraph-block.ts

@@ -8,6 +8,7 @@ import {
   EDGELESS_TOP_CONTENTEDITABLE_SELECTOR,
 } from '@blocksuite/affine-shared/consts';
 import {
+  BlockCommentManager,
   CitationProvider,
   DocModeProvider,
 } from '@blocksuite/affine-shared/services';
@@ -107,6 +108,14 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
     );
   }
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   override get topContenteditableElement() {
     if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
       return this.closest<BlockComponent>(
@@ -268,7 +277,10 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
         }
       </style>
       <div
-        class="affine-paragraph-block-container"
+        class=${classMap({
+          'affine-paragraph-block-container': true,
+          'highlight-comment': this.isCommentHighlighted,
+        })}
         data-has-collapsed-siblings="${collapsedSiblings.length > 0}"
       >
         <div

blocksuite/affine/blocks/paragraph/src/styles.ts

@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css } from 'lit';
 
 export const paragraphBlockStyles = css`
@@ -15,6 +16,11 @@ export const paragraphBlockStyles = css`
     position: relative;
   }
 
+  .affine-paragraph-block-container.highlight-comment {
+    background-color: ${unsafeCSSVarV2('block/comment/highlightActive')};
+    outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+  }
+
   affine-paragraph code {
     font-size: calc(var(--affine-font-base) - 3px);
     padding: 0px 4px 2px;

blocksuite/affine/blocks/root/src/configs/toolbar.ts

@@ -9,6 +9,7 @@ import {
   promptDocTitle,
 } from '@blocksuite/affine-block-embed';
 import { updateBlockType } from '@blocksuite/affine-block-note';
+import type { HighlightType } from '@blocksuite/affine-components/highlight-dropdown-menu';
 import { toast } from '@blocksuite/affine-components/toast';
 import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
 import {
@@ -19,6 +20,10 @@ import {
   isFormatSupported,
   textFormatConfigs,
 } from '@blocksuite/affine-inline-preset';
+import {
+  EmbedLinkedDocBlockSchema,
+  EmbedSyncedDocBlockSchema,
+} from '@blocksuite/affine-model';
 import { textConversionConfigs } from '@blocksuite/affine-rich-text';
 import {
   copySelectedModelsCommand,
@@ -37,8 +42,10 @@ import type {
   ToolbarActionGroup,
   ToolbarModuleConfig,
 } from '@blocksuite/affine-shared/services';
-import { ActionPlacement } from '@blocksuite/affine-shared/services';
-import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import {
+  ActionPlacement,
+  blockCommentToolbarButton,
+} from '@blocksuite/affine-shared/services';
 import { tableViewMeta } from '@blocksuite/data-view/view-presets';
 import {
   CopyIcon,
@@ -47,7 +54,11 @@ import {
   DuplicateIcon,
   LinkedPageIcon,
 } from '@blocksuite/icons/lit';
-import { type BlockComponent, BlockSelection } from '@blocksuite/std';
+import {
+  type BlockComponent,
+  BlockSelection,
+  BlockViewIdentifier,
+} from '@blocksuite/std';
 import { toDraftModel } from '@blocksuite/store';
 import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
@@ -140,7 +151,7 @@ const highlightActionGroup = {
   id: 'c.highlight',
   when: ({ chain }) => isFormatSupported(chain).run()[0],
   content({ chain }) {
-    const updateHighlight = (styles: AffineTextAttributes) => {
+    const updateHighlight = (styles: HighlightType) => {
       const payload = { styles };
       chain
         .try(chain => [
@@ -161,7 +172,7 @@ const highlightActionGroup = {
 } as const satisfies ToolbarAction;
 
 const turnIntoDatabase = {
-  id: 'd.convert-to-database',
+  id: 'e.convert-to-database',
   tooltip: 'Create Table',
   icon: DatabaseTableViewIcon(),
   when({ chain }) {
@@ -208,10 +219,21 @@ const turnIntoDatabase = {
 } as const satisfies ToolbarAction;
 
 const turnIntoLinkedDoc = {
-  id: 'e.convert-to-linked-doc',
+  id: 'f.convert-to-linked-doc',
   tooltip: 'Create Linked Doc',
   icon: LinkedPageIcon(),
-  when({ chain }) {
+  when({ chain, std }) {
+    const supportFlavours = [
+      EmbedLinkedDocBlockSchema,
+      EmbedSyncedDocBlockSchema,
+    ].map(schema => schema.model.flavour);
+    if (
+      supportFlavours.some(
+        flavour => !std.getOptional(BlockViewIdentifier(flavour))
+      )
+    )
+      return false;
+
     const [ok, { selectedModels }] = chain
       .pipe(getSelectedModelsCommand, {
         types: ['block', 'text'],
@@ -273,6 +295,10 @@ export const builtinToolbarConfig = {
     highlightActionGroup,
     turnIntoDatabase,
     turnIntoLinkedDoc,
+    {
+      id: 'g.comment',
+      ...blockCommentToolbarButton,
+    },
     {
       placement: ActionPlacement.More,
       id: 'a.clipboard',

blocksuite/affine/blocks/surface-ref/src/configs/toolbar.ts

@@ -5,6 +5,7 @@ import {
 } from '@blocksuite/affine-shared/commands';
 import {
   ActionPlacement,
+  blockCommentToolbarButton,
   type ToolbarModuleConfig,
 } from '@blocksuite/affine-shared/services';
 import { CaptionIcon, CopyIcon, DeleteIcon } from '@blocksuite/icons/lit';
@@ -61,6 +62,10 @@ 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,6 +13,7 @@ import {
   type SurfaceRefBlockModel,
 } from '@blocksuite/affine-model';
 import {
+  BlockCommentManager,
   DocModeProvider,
   EditPropsStore,
   type OpenDocMode,
@@ -76,6 +77,10 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
       border-color: ${unsafeCSSVarV2('edgeless/frame/border/active')};
     }
 
+    .affine-surface-ref.comment-highlighted {
+      outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+    }
+
     @media print {
       .affine-surface-ref {
         outline: none !important;
@@ -137,6 +142,14 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
     return this._referencedModel;
   }
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   private readonly _handleClick = () => {
     this.selection.update(() => {
       return [this.selection.create(BlockSelection, { blockId: this.blockId })];
@@ -456,6 +469,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
         class=${classMap({
           'affine-surface-ref': true,
           focused: this.selected$.value,
+          'comment-highlighted': this.isCommentHighlighted,
         })}
         @click=${this._handleClick}
       >

blocksuite/affine/components/src/highlight-dropdown-menu/dropdown-menu.ts

@@ -1,4 +1,4 @@
-import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import type { AffineTextStyleAttributes } from '@blocksuite/affine-shared/types';
 import { PropTypes, requiredProperties } from '@blocksuite/std';
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -20,7 +20,10 @@ const colors = [
   'grey',
 ] as const;
 
-type HighlightType = 'color' | 'background';
+export type HighlightType = Pick<
+  AffineTextStyleAttributes,
+  'color' | 'background'
+>;
 
 // TODO(@fundon): these recent settings should be added to the dropdown menu
 // tests/blocksutie/e2e/format-bar.spec.ts#253
@@ -33,13 +36,13 @@ type HighlightType = 'color' | 'background';
 })
 export class HighlightDropdownMenu extends LitElement {
   @property({ attribute: false })
-  accessor updateHighlight!: (styles: AffineTextAttributes) => void;
+  accessor updateHighlight!: (styles: HighlightType) => void;
 
-  private readonly _update = (value: string | null, type: HighlightType) => {
+  private readonly _update = (style: HighlightType) => {
     // latestHighlightColor = value;
     // latestHighlightType = type;
 
-    this.updateHighlight({ [`${type}`]: value });
+    this.updateHighlight(style);
   };
 
   override render() {
@@ -71,7 +74,7 @@ export class HighlightDropdownMenu extends LitElement {
             return html`
               <editor-menu-action
                 data-testid="foreground-${color}"
-                @click=${() => this._update(value, 'color')}
+                @click=${() => this._update({ color: value })}
               >
                 <affine-text-duotone-icon
                   style=${styleMap({
@@ -92,7 +95,7 @@ export class HighlightDropdownMenu extends LitElement {
             return html`
               <editor-menu-action
                 data-testid="background-${color}"
-                @click=${() => this._update(value, 'background')}
+                @click=${() => this._update({ background: value })}
               >
                 <affine-text-duotone-icon
                   style=${styleMap({

blocksuite/affine/components/src/peek/peekable.ts

@@ -1,7 +1,14 @@
+import { NoteBlockModel } from '@blocksuite/affine-model';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
-import { isInsideEdgelessEditor } from '@blocksuite/affine-shared/utils';
+import {
+  isInsideEdgelessEditor,
+  matchModels,
+} from '@blocksuite/affine-shared/utils';
 import type { Constructor } from '@blocksuite/global/utils';
-import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
+import {
+  GfxBlockElementModel,
+  GfxControllerIdentifier,
+} from '@blocksuite/std/gfx';
 import type { BlockModel } from '@blocksuite/store';
 import type { LitElement, TemplateResult } from 'lit';
 
@@ -72,6 +79,20 @@ export const Peekable =
         );
 
         if (hitTarget && hitTarget !== model) {
+          // Check if hitTarget is a GfxBlockElementModel (which extends BlockModel)
+          // and if it's a NoteBlockModel, then check if current model is inside it
+          if (
+            hitTarget instanceof GfxBlockElementModel &&
+            matchModels(hitTarget, [NoteBlockModel])
+          ) {
+            let curModel: BlockModel | null = model;
+            while (curModel) {
+              if (curModel === hitTarget) {
+                return true; // Model is inside the NoteBlockModel, allow peek
+              }
+              curModel = curModel.parent;
+            }
+          }
           return false;
         }
 

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/foundation/package.json

@@ -32,6 +32,7 @@
   },
   "exports": {
     ".": "./src/index.ts",
+    "./clipboard": "./src/clipboard.ts",
     "./store": "./src/store.ts",
     "./view": "./src/view.ts"
   },

blocksuite/affine/foundation/src/clipboard.ts

@@ -43,7 +43,7 @@ const imageClipboardConfigs = [
   });
 });
 
-const PlainTextClipboardConfig = ClipboardAdapterConfigExtension({
+export const PlainTextClipboardConfig = ClipboardAdapterConfigExtension({
   mimeType: 'text/plain',
   adapter: MixTextAdapter,
   priority: 70,

blocksuite/affine/foundation/src/view.ts

@@ -9,6 +9,7 @@ import {
 } from '@blocksuite/affine-ext-loader';
 import {
   AutoClearSelectionService,
+  BlockCommentManager,
   CitationService,
   DefaultOpenDocExtension,
   DNDAPIExtension,
@@ -78,6 +79,7 @@ export class FoundationViewExtension extends ViewExtensionProvider<FoundationVie
       LinkPreviewCache,
       LinkPreviewService,
       CitationService,
+      BlockCommentManager,
     ]);
     context.register(clipboardConfigs);
     if (this.isEdgeless(context.scope)) {

blocksuite/affine/inlines/comment/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@blocksuite/affine-inline-comment",
+  "description": "Inline comment for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/std": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.15",
+    "@types/lodash-es": "^4.17.12",
+    "lit": "^3.2.0",
+    "lit-html": "^3.2.1",
+    "lodash-es": "^4.17.21",
+    "rxjs": "^7.8.1",
+    "yjs": "^13.6.21",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "vitest": "3.1.3"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./view": "./src/view.ts",
+    "./store": "./src/store.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.21.0"
+}

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

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

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

@@ -0,0 +1,2 @@
+export * from './inline-spec';
+export * from './utils';

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

@@ -0,0 +1,218 @@
+import { getInlineEditorByModel } from '@blocksuite/affine-rich-text';
+import { getSelectedBlocksCommand } from '@blocksuite/affine-shared/commands';
+import {
+  BlockCommentManager,
+  type CommentId,
+  CommentProviderIdentifier,
+  findAllCommentedBlocks,
+} from '@blocksuite/affine-shared/services';
+import type { AffineInlineEditor } from '@blocksuite/affine-shared/types';
+import { DisposableGroup } from '@blocksuite/global/disposable';
+import {
+  LifeCycleWatcher,
+  type TextRangePoint,
+  TextSelection,
+} from '@blocksuite/std';
+import type { BaseSelection, BlockModel } from '@blocksuite/store';
+import { signal } from '@preact/signals-core';
+import difference from 'lodash-es/difference';
+
+import {
+  extractCommentIdFromDelta,
+  findAllCommentedTexts,
+  findCommentedTexts,
+} from './utils';
+
+export class InlineCommentManager extends LifeCycleWatcher {
+  static override key = 'inline-comment-manager';
+
+  private readonly _disposables = new DisposableGroup();
+
+  private readonly _highlightedCommentId$ = signal<CommentId | null>(null);
+
+  private get _provider() {
+    return this.std.getOptional(CommentProviderIdentifier);
+  }
+
+  override mounted() {
+    const provider = this._provider;
+    if (!provider) return;
+
+    this._init().catch(console.error);
+
+    this._disposables.add(provider.onCommentAdded(this._handleAddComment));
+    this._disposables.add(
+      provider.onCommentDeleted(this._handleDeleteAndResolve)
+    );
+    this._disposables.add(
+      provider.onCommentResolved(this._handleDeleteAndResolve)
+    );
+    this._disposables.add(
+      provider.onCommentHighlighted(this._handleHighlightComment)
+    );
+    this._disposables.add(
+      this.std.selection.slots.changed.subscribe(this._handleSelectionChanged)
+    );
+  }
+
+  override unmounted() {
+    this._disposables.dispose();
+  }
+
+  private async _init() {
+    const provider = this._provider;
+    if (!provider) return;
+
+    const commentsInProvider = await provider.getComments('unresolved');
+    const inlineComments = [...findAllCommentedTexts(this.std.store).values()];
+
+    const blockComments = findAllCommentedBlocks(this.std.store).flatMap(
+      block => Object.keys(block.props.comments)
+    );
+
+    const commentsInEditor = [
+      ...new Set([...inlineComments, ...blockComments]),
+    ];
+
+    // 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);
+    });
+  }
+
+  private readonly _handleAddComment = (
+    id: CommentId,
+    selections: BaseSelection[]
+  ) => {
+    const needCommentTexts = selections
+      .map(selection => {
+        if (!selection.is(TextSelection)) return [];
+        const [_, { selectedBlocks }] = this.std.command
+          .chain()
+          .pipe(getSelectedBlocksCommand, {
+            textSelection: selection,
+          })
+          .run();
+
+        if (!selectedBlocks) return [];
+
+        type MakeRequired<T, K extends keyof T> = T & {
+          [key in K]: NonNullable<T[key]>;
+        };
+
+        return selectedBlocks
+          .map(
+            ({ model }) =>
+              [model, getInlineEditorByModel(this.std, model)] as const
+          )
+          .filter(
+            (
+              pair
+            ): pair is [MakeRequired<BlockModel, 'text'>, AffineInlineEditor] =>
+              !!pair[0].text && !!pair[1]
+          )
+          .map(([model, inlineEditor]) => {
+            let from: TextRangePoint;
+            let to: TextRangePoint | null;
+            if (model.id === selection.from.blockId) {
+              from = selection.from;
+              to = null;
+            } else if (model.id === selection.to?.blockId) {
+              from = selection.to;
+              to = null;
+            } else {
+              from = {
+                blockId: model.id,
+                index: 0,
+                length: model.text.yText.length,
+              };
+              to = null;
+            }
+            return [new TextSelection({ from, to }), inlineEditor] as const;
+          });
+      })
+      .flat();
+
+    if (needCommentTexts.length === 0) return;
+
+    needCommentTexts.forEach(([selection, inlineEditor]) => {
+      inlineEditor.formatText(
+        selection.from,
+        {
+          [`comment-${id}`]: true,
+        },
+        {
+          withoutTransact: true,
+        }
+      );
+    });
+  };
+
+  private readonly _handleDeleteAndResolve = (id: CommentId) => {
+    const commentedTexts = findCommentedTexts(this.std.store, id);
+    if (commentedTexts.length === 0) return;
+
+    this.std.store.withoutTransact(() => {
+      commentedTexts.forEach(selection => {
+        const inlineEditor = getInlineEditorByModel(
+          this.std,
+          selection.from.blockId
+        );
+
+        inlineEditor?.formatText(
+          selection.from,
+          {
+            [`comment-${id}`]: null,
+          },
+          {
+            withoutTransact: true,
+          }
+        );
+      });
+    });
+  };
+
+  private readonly _handleHighlightComment = (id: CommentId | null) => {
+    this._highlightedCommentId$.value = id;
+  };
+
+  private readonly _handleSelectionChanged = (selections: BaseSelection[]) => {
+    const currentHighlightedCommentId = this._highlightedCommentId$.peek();
+
+    if (selections.length === 1) {
+      const selection = selections[0];
+
+      // InlineCommentManager only handle text selection
+      if (!selection.is(TextSelection)) return;
+
+      if (!selection.isCollapsed() && currentHighlightedCommentId !== null) {
+        this._provider?.highlightComment(null);
+        return;
+      }
+
+      const model = this.std.store.getModelById(selection.from.blockId);
+      if (!model) return;
+
+      const inlineEditor = getInlineEditorByModel(this.std, model);
+      if (!inlineEditor) return;
+
+      const delta = inlineEditor.getDeltaByRangeIndex(selection.from.index);
+      if (!delta) return;
+
+      const commentIds = extractCommentIdFromDelta(delta);
+      if (commentIds.length !== 0) return;
+    }
+
+    if (currentHighlightedCommentId !== null) {
+      this._provider?.highlightComment(null);
+    }
+  };
+}

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

@@ -0,0 +1,97 @@
+import {
+  type CommentId,
+  CommentProviderIdentifier,
+} from '@blocksuite/affine-shared/services';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { WithDisposable } from '@blocksuite/global/lit';
+import {
+  type BlockStdScope,
+  PropTypes,
+  requiredProperties,
+  ShadowlessElement,
+  stdContext,
+} from '@blocksuite/std';
+import { consume } from '@lit/context';
+import { css, type PropertyValues } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { html } from 'lit-html';
+import { isEqual } from 'lodash-es';
+
+@requiredProperties({
+  commentIds: PropTypes.arrayOf(id => typeof id === 'string'),
+})
+export class InlineComment extends WithDisposable(ShadowlessElement) {
+  static override styles = css`
+    inline-comment {
+      display: inline-block;
+      background-color: ${unsafeCSSVarV2('block/comment/highlightDefault')};
+      border-bottom: 2px solid
+        ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+    }
+
+    inline-comment.highlighted {
+      background-color: ${unsafeCSSVarV2('block/comment/highlightActive')};
+    }
+  `;
+
+  @property({
+    attribute: false,
+    hasChanged: (newVal: string[], oldVal: string[]) =>
+      !isEqual(newVal, oldVal),
+  })
+  accessor commentIds!: string[];
+
+  private _index: number = 0;
+
+  @consume({ context: stdContext })
+  private accessor _std!: BlockStdScope;
+
+  @state()
+  accessor highlighted = false;
+
+  private get _provider() {
+    return this._std.getOptional(CommentProviderIdentifier);
+  }
+
+  private readonly _handleClick = () => {
+    this._provider?.highlightComment(this.commentIds[this._index]);
+    this._index = (this._index + 1) % this.commentIds.length;
+  };
+
+  private readonly _handleHighlight = (id: CommentId | null) => {
+    if (this.highlighted) {
+      if (!id || !this.commentIds.includes(id)) {
+        this.highlighted = false;
+      }
+    } else {
+      if (id && this.commentIds.includes(id)) {
+        this.highlighted = true;
+      }
+    }
+  };
+
+  override connectedCallback() {
+    super.connectedCallback();
+    const provider = this._provider;
+    if (provider) {
+      this.disposables.addFromEvent(this, 'click', this._handleClick);
+      this.disposables.add(
+        provider.onCommentHighlighted(this._handleHighlight)
+      );
+    }
+  }
+
+  override willUpdate(_changedProperties: PropertyValues<this>) {
+    if (_changedProperties.has('highlighted')) {
+      if (this.highlighted) {
+        this.classList.add('highlighted');
+      } else {
+        this.classList.remove('highlighted');
+      }
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}

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

@@ -0,0 +1,38 @@
+import { type CommentId } from '@blocksuite/affine-shared/services';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { dynamicSchema, InlineSpecExtension } from '@blocksuite/std/inline';
+import { html, nothing } from 'lit-html';
+import { when } from 'lit-html/directives/when.js';
+import { z } from 'zod';
+
+import { extractCommentIdFromDelta } from './utils';
+
+type InlineCommendId = `comment-${CommentId}`;
+function isInlineCommendId(key: string): key is InlineCommendId {
+  return key.startsWith('comment-');
+}
+
+export const CommentInlineSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>({
+    name: 'comment',
+    schema: dynamicSchema(
+      isInlineCommendId,
+      z.boolean().optional().nullable().catch(undefined)
+    ),
+    match: delta => {
+      if (!delta.attributes) return false;
+      const comments = Object.entries(delta.attributes).filter(
+        ([key, value]) => isInlineCommendId(key) && value === true
+      );
+      return comments.length > 0;
+    },
+    renderer: ({ delta, children }) =>
+      html`<inline-comment .commentIds=${extractCommentIdFromDelta(delta)}
+        >${when(
+          children,
+          () => html`${children}`,
+          () => nothing
+        )}</inline-comment
+      >`,
+    wrapper: true,
+  });

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

@@ -0,0 +1,64 @@
+import type { CommentId } from '@blocksuite/affine-shared/services';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { TextSelection } from '@blocksuite/std';
+import type { DeltaInsert, Store } from '@blocksuite/store';
+
+export function findAllCommentedTexts(
+  store: Store
+): Map<TextSelection, CommentId> {
+  const result = new Map<TextSelection, CommentId>();
+
+  store.getAllModels().forEach(model => {
+    if (!model.text) return;
+
+    let index = 0;
+    model.text.toDelta().forEach(delta => {
+      if (!delta.insert) return;
+
+      const length = delta.insert.length;
+
+      if (!delta.attributes) {
+        index += length;
+        return;
+      }
+
+      Object.keys(delta.attributes)
+        .filter(key => key.startsWith('comment-'))
+        .forEach(key => {
+          const commentId = key.replace('comment-', '');
+          const selection = new TextSelection({
+            from: {
+              blockId: model.id,
+              index,
+              length,
+            },
+            to: null,
+          });
+          result.set(selection, commentId);
+        });
+
+      index += length;
+    });
+  });
+
+  return result;
+}
+
+export function findCommentedTexts(
+  store: Store,
+  commentId: CommentId
+): TextSelection[] {
+  return [...findAllCommentedTexts(store).entries()]
+    .filter(([_, id]) => id === commentId)
+    .map(([selection]) => selection);
+}
+
+export function extractCommentIdFromDelta(
+  delta: DeltaInsert<AffineTextAttributes>
+) {
+  if (!delta.attributes) return [];
+
+  return Object.keys(delta.attributes)
+    .filter(key => key.startsWith('comment-'))
+    .map(key => key.replace('comment-', ''));
+}

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

@@ -0,0 +1,22 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import { InlineCommentManager } from './inline-comment-manager';
+import { CommentInlineSpecExtension } from './inline-spec';
+
+export class InlineCommentViewExtension extends ViewExtensionProvider {
+  override name = 'affine-inline-comment';
+
+  override effect(): void {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register([CommentInlineSpecExtension, InlineCommentManager]);
+  }
+}

blocksuite/affine/inlines/comment/tsconfig.json

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

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

@@ -3,6 +3,7 @@ import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { StdIdentifier } from '@blocksuite/std';
 import { InlineSpecExtension } from '@blocksuite/std/inline';
 import { html } from 'lit';
+import z from 'zod';
 
 import { FootNoteNodeConfigIdentifier } from './footnote-node/footnote-config';
 
@@ -13,7 +14,9 @@ export const FootNoteInlineSpecExtension =
       provider.getOptional(FootNoteNodeConfigIdentifier) ?? undefined;
     return {
       name: 'footnote',
-      schema: FootNoteSchema.optional().nullable().catch(undefined),
+      schema: z.object({
+        footnote: FootNoteSchema.optional().nullable().catch(undefined),
+      }),
       match: delta => {
         return !!delta.attributes?.footnote;
       },

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

@@ -9,7 +9,9 @@ export const LatexInlineSpecExtension =
     const std = provider.get(StdIdentifier);
     return {
       name: 'latex',
-      schema: z.string().optional().nullable().catch(undefined),
+      schema: z.object({
+        latex: z.string().optional().nullable().catch(undefined),
+      }),
       match: delta => typeof delta.attributes?.latex === 'string',
       renderer: ({ delta, selected, editor, startOffset, endOffset }) => {
         return html`<affine-latex-node
@@ -28,7 +30,9 @@ export const LatexInlineSpecExtension =
 export const LatexEditorUnitSpecExtension =
   InlineSpecExtension<AffineTextAttributes>({
     name: 'latex-editor-unit',
-    schema: z.undefined(),
+    schema: z.object({
+      'latex-editor-unit': z.undefined(),
+    }),
     match: () => true,
     renderer: ({ delta }) => {
       return html`<latex-editor-unit .delta=${delta}></latex-editor-unit>`;

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

@@ -9,7 +9,9 @@ export const LinkInlineSpecExtension =
     const std = provider.get(StdIdentifier);
     return {
       name: 'link',
-      schema: z.string().optional().nullable().catch(undefined),
+      schema: z.object({
+        link: z.string().optional().nullable().catch(undefined),
+      }),
       match: delta => {
         return !!delta.attributes?.link;
       },

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

@@ -23,7 +23,7 @@ export class AffineMention extends SignalWatcher(
         'clig' off;
       /* Client/baseMedium */
       font-family: Inter;
-      font-size: 15px;
+      font-size: var(--affine-font-size-base);
       font-style: normal;
       font-weight: 500;
       line-height: 24px; /* 160% */

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

@@ -9,14 +9,16 @@ export const MentionInlineSpecExtension =
     const std = provider.get(StdIdentifier);
     return {
       name: 'mention',
-      schema: z
-        .object({
-          member: z.string(),
-          notification: z.string().optional(),
-        })
-        .optional()
-        .nullable()
-        .catch(undefined),
+      schema: z.object({
+        mention: z
+          .object({
+            member: z.string(),
+            notification: z.string().optional(),
+          })
+          .optional()
+          .nullable()
+          .catch(undefined),
+      }),
       match: delta => {
         return !!delta.attributes?.mention?.member;
       },

blocksuite/affine/inlines/preset/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-inline-comment": "workspace:*",
     "@blocksuite/affine-inline-footnote": "workspace:*",
     "@blocksuite/affine-inline-latex": "workspace:*",
     "@blocksuite/affine-inline-link": "workspace:*",

blocksuite/affine/inlines/preset/src/command/config.ts

@@ -11,7 +11,7 @@ import { type EditorHost, TextSelection } from '@blocksuite/std';
 import type { TemplateResult } from 'lit';
 
 import {
-  isTextStyleActive,
+  isTextAttributeActive,
   toggleBold,
   toggleCode,
   toggleItalic,
@@ -38,7 +38,7 @@ export const textFormatConfigs: TextFormatConfig[] = [
     activeWhen: host => {
       const [result] = host.std.command
         .chain()
-        .pipe(isTextStyleActive, { key: 'bold' })
+        .pipe(isTextAttributeActive, { key: 'bold' })
         .run();
       return result;
     },
@@ -54,7 +54,7 @@ export const textFormatConfigs: TextFormatConfig[] = [
     activeWhen: host => {
       const [result] = host.std.command
         .chain()
-        .pipe(isTextStyleActive, { key: 'italic' })
+        .pipe(isTextAttributeActive, { key: 'italic' })
         .run();
       return result;
     },
@@ -70,7 +70,7 @@ export const textFormatConfigs: TextFormatConfig[] = [
     activeWhen: host => {
       const [result] = host.std.command
         .chain()
-        .pipe(isTextStyleActive, { key: 'underline' })
+        .pipe(isTextAttributeActive, { key: 'underline' })
         .run();
       return result;
     },
@@ -86,7 +86,7 @@ export const textFormatConfigs: TextFormatConfig[] = [
     activeWhen: host => {
       const [result] = host.std.command
         .chain()
-        .pipe(isTextStyleActive, { key: 'strike' })
+        .pipe(isTextAttributeActive, { key: 'strike' })
         .run();
       return result;
     },
@@ -102,7 +102,7 @@ export const textFormatConfigs: TextFormatConfig[] = [
     activeWhen: host => {
       const [result] = host.std.command
         .chain()
-        .pipe(isTextStyleActive, { key: 'code' })
+        .pipe(isTextAttributeActive, { key: 'code' })
         .run();
       return result;
     },
@@ -118,7 +118,7 @@ export const textFormatConfigs: TextFormatConfig[] = [
     activeWhen: host => {
       const [result] = host.std.command
         .chain()
-        .pipe(isTextStyleActive, { key: 'link' })
+        .pipe(isTextAttributeActive, { key: 'link' })
         .run();
       return result;
     },

blocksuite/affine/inlines/preset/src/command/format-text.ts

@@ -1,6 +1,9 @@
 import { clearMarksOnDiscontinuousInput } from '@blocksuite/affine-rich-text';
 import { getSelectedBlocksCommand } from '@blocksuite/affine-shared/commands';
-import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import type {
+  AffineTextAttributes,
+  AffineTextStyleAttributes,
+} from '@blocksuite/affine-shared/types';
 import type { Command, TextSelection } from '@blocksuite/std';
 import {
   INLINE_ROOT_ATTR,
@@ -13,7 +16,7 @@ import { FORMAT_TEXT_SUPPORT_FLAVOURS } from './consts.js';
 export const formatTextCommand: Command<{
   currentTextSelection?: TextSelection;
   textSelection?: TextSelection;
-  styles: AffineTextAttributes;
+  styles: AffineTextStyleAttributes;
   mode?: 'replace' | 'merge';
 }> = (ctx, next) => {
   const { styles, mode = 'merge' } = ctx;

blocksuite/affine/inlines/preset/src/command/index.ts

@@ -10,8 +10,8 @@ export { formatBlockCommand } from './format-block.js';
 export { formatNativeCommand } from './format-native.js';
 export { formatTextCommand } from './format-text.js';
 export {
-  getTextStyle,
-  isTextStyleActive,
+  getTextAttributes,
+  isTextAttributeActive,
   toggleBold,
   toggleCode,
   toggleItalic,

blocksuite/affine/inlines/preset/src/command/text-style.ts

@@ -2,25 +2,31 @@ import {
   getBlockSelectionsCommand,
   getTextSelectionCommand,
 } from '@blocksuite/affine-shared/commands';
-import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import type {
+  AffineTextAttributes,
+  AffineTextStyleAttributes,
+} from '@blocksuite/affine-shared/types';
 import type { Command } from '@blocksuite/std';
 
 import { formatBlockCommand } from './format-block.js';
 import { formatNativeCommand } from './format-native.js';
 import { formatTextCommand } from './format-text.js';
-import { getCombinedTextStyle } from './utils.js';
+import { getCombinedTextAttributes } from './utils.js';
 
 export const toggleTextStyleCommand: Command<{
   key: Extract<
-    keyof AffineTextAttributes,
+    keyof AffineTextStyleAttributes,
     'bold' | 'italic' | 'underline' | 'strike' | 'code'
   >;
 }> = (ctx, next) => {
   const { std, key } = ctx;
-  const [active] = std.command.chain().pipe(isTextStyleActive, { key }).run();
+  const [active] = std.command
+    .chain()
+    .pipe(isTextAttributeActive, { key })
+    .run();
 
   const payload: {
-    styles: AffineTextAttributes;
+    styles: AffineTextStyleAttributes;
     mode?: 'replace' | 'merge';
   } = {
     styles: {
@@ -46,7 +52,7 @@ export const toggleTextStyleCommand: Command<{
 
 const toggleTextStyleCommandWrapper = (
   key: Extract<
-    keyof AffineTextAttributes,
+    keyof AffineTextStyleAttributes,
     'bold' | 'italic' | 'underline' | 'strike' | 'code'
   >
 ): Command => {
@@ -66,30 +72,29 @@ export const toggleUnderline = toggleTextStyleCommandWrapper('underline');
 export const toggleStrike = toggleTextStyleCommandWrapper('strike');
 export const toggleCode = toggleTextStyleCommandWrapper('code');
 
-export const getTextStyle: Command<{}, { textStyle: AffineTextAttributes }> = (
-  ctx,
-  next
-) => {
-  const [result, innerCtx] = getCombinedTextStyle(
+export const getTextAttributes: Command<
+  {},
+  { textAttributes: AffineTextAttributes }
+> = (ctx, next) => {
+  const [result, innerCtx] = getCombinedTextAttributes(
     ctx.std.command.chain()
   ).run();
   if (!result) {
     return false;
   }
 
-  return next({ textStyle: innerCtx.textStyle });
+  return next({ textAttributes: innerCtx.textAttributes });
 };
 
-export const isTextStyleActive: Command<{ key: keyof AffineTextAttributes }> = (
-  ctx,
-  next
-) => {
+export const isTextAttributeActive: Command<{
+  key: keyof AffineTextAttributes;
+}> = (ctx, next) => {
   const key = ctx.key;
-  const [result] = getCombinedTextStyle(ctx.std.command.chain())
+  const [result] = getCombinedTextAttributes(ctx.std.command.chain())
     .pipe((ctx, next) => {
-      const { textStyle } = ctx;
+      const { textAttributes } = ctx;
 
-      if (textStyle && key in textStyle) {
+      if (textAttributes && key in textAttributes) {
         return next();
       }
 

blocksuite/affine/inlines/preset/src/command/utils.ts

@@ -77,8 +77,8 @@ function handleCurrentSelection(
   handler: (
     type: 'text' | 'block' | 'native',
     inlineEditors: InlineEditor<AffineTextAttributes>[]
-  ) => { textStyle: AffineTextAttributes } | boolean | void
-): Chain<InitCommandCtx & { textStyle: AffineTextAttributes }> {
+  ) => { textAttributes: AffineTextAttributes } | boolean | void
+): Chain<InitCommandCtx & { textAttributes: AffineTextAttributes }> {
   return chain.try(chain => [
     // text selection, corresponding to `formatText` command
     chain
@@ -174,25 +174,25 @@ function handleCurrentSelection(
   ]);
 }
 
-export function getCombinedTextStyle(chain: Chain<InitCommandCtx>) {
+export function getCombinedTextAttributes(chain: Chain<InitCommandCtx>) {
   return handleCurrentSelection(chain, (type, inlineEditors) => {
     if (type === 'text') {
       return {
-        textStyle: getCombinedFormatFromInlineEditors(
+        textAttributes: getCombinedFormatFromInlineEditors(
           inlineEditors.map(e => [e, e.getInlineRange()])
         ),
       };
     }
     if (type === 'block') {
       return {
-        textStyle: getCombinedFormatFromInlineEditors(
+        textAttributes: getCombinedFormatFromInlineEditors(
           inlineEditors.map(e => [e, { index: 0, length: e.yTextLength }])
         ),
       };
     }
     if (type === 'native') {
       return {
-        textStyle: getCombinedFormatFromInlineEditors(
+        textAttributes: getCombinedFormatFromInlineEditors(
           inlineEditors.map(e => [e, e.getInlineRange()])
         ),
       };

blocksuite/affine/inlines/preset/src/default-inline-manager.ts

@@ -1,3 +1,4 @@
+import { CommentInlineSpecExtension } from '@blocksuite/affine-inline-comment';
 import { FootNoteInlineSpecExtension } from '@blocksuite/affine-inline-footnote';
 import { LatexInlineSpecExtension } from '@blocksuite/affine-inline-latex';
 import { LinkInlineSpecExtension } from '@blocksuite/affine-inline-link';
@@ -32,5 +33,6 @@ export const DefaultInlineManagerExtension =
       LinkInlineSpecExtension.identifier,
       FootNoteInlineSpecExtension.identifier,
       MentionInlineSpecExtension.identifier,
+      CommentInlineSpecExtension.identifier,
     ],
   });

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

@@ -12,7 +12,9 @@ export type AffineInlineRootElement = InlineRootElement<AffineTextAttributes>;
 export const BoldInlineSpecExtension =
   InlineSpecExtension<AffineTextAttributes>({
     name: 'bold',
-    schema: z.literal(true).optional().nullable().catch(undefined),
+    schema: z.object({
+      bold: z.literal(true).optional().nullable().catch(undefined),
+    }),
     match: delta => {
       return !!delta.attributes?.bold;
     },
@@ -24,7 +26,9 @@ export const BoldInlineSpecExtension =
 export const ItalicInlineSpecExtension =
   InlineSpecExtension<AffineTextAttributes>({
     name: 'italic',
-    schema: z.literal(true).optional().nullable().catch(undefined),
+    schema: z.object({
+      italic: z.literal(true).optional().nullable().catch(undefined),
+    }),
     match: delta => {
       return !!delta.attributes?.italic;
     },
@@ -36,7 +40,9 @@ export const ItalicInlineSpecExtension =
 export const UnderlineInlineSpecExtension =
   InlineSpecExtension<AffineTextAttributes>({
     name: 'underline',
-    schema: z.literal(true).optional().nullable().catch(undefined),
+    schema: z.object({
+      underline: z.literal(true).optional().nullable().catch(undefined),
+    }),
     match: delta => {
       return !!delta.attributes?.underline;
     },
@@ -48,7 +54,9 @@ export const UnderlineInlineSpecExtension =
 export const StrikeInlineSpecExtension =
   InlineSpecExtension<AffineTextAttributes>({
     name: 'strike',
-    schema: z.literal(true).optional().nullable().catch(undefined),
+    schema: z.object({
+      strike: z.literal(true).optional().nullable().catch(undefined),
+    }),
     match: delta => {
       return !!delta.attributes?.strike;
     },
@@ -60,7 +68,9 @@ export const StrikeInlineSpecExtension =
 export const CodeInlineSpecExtension =
   InlineSpecExtension<AffineTextAttributes>({
     name: 'inline-code',
-    schema: z.literal(true).optional().nullable().catch(undefined),
+    schema: z.object({
+      code: z.literal(true).optional().nullable().catch(undefined),
+    }),
     match: delta => {
       return !!delta.attributes?.code;
     },
@@ -72,7 +82,9 @@ export const CodeInlineSpecExtension =
 export const BackgroundInlineSpecExtension =
   InlineSpecExtension<AffineTextAttributes>({
     name: 'background',
-    schema: z.string().optional().nullable().catch(undefined),
+    schema: z.object({
+      background: z.string().optional().nullable().catch(undefined),
+    }),
     match: delta => {
       return !!delta.attributes?.background;
     },
@@ -84,7 +96,9 @@ export const BackgroundInlineSpecExtension =
 export const ColorInlineSpecExtension =
   InlineSpecExtension<AffineTextAttributes>({
     name: 'color',
-    schema: z.string().optional().nullable().catch(undefined),
+    schema: z.object({
+      color: z.string().optional().nullable().catch(undefined),
+    }),
     match: delta => {
       return !!delta.attributes?.color;
     },

blocksuite/affine/inlines/preset/tsconfig.json

@@ -9,6 +9,7 @@
   "references": [
     { "path": "../../components" },
     { "path": "../../ext-loader" },
+    { "path": "../comment" },
     { "path": "../footnote" },
     { "path": "../latex" },
     { "path": "../link" },

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

@@ -27,18 +27,20 @@ export const ReferenceInlineSpecExtension =
     }
     return {
       name: 'reference',
-      schema: z
-        .object({
-          type: z.enum([
-            // @deprecated Subpage is deprecated, use LinkedPage instead
-            'Subpage',
-            'LinkedPage',
-          ]),
-        })
-        .merge(ReferenceInfoSchema)
-        .optional()
-        .nullable()
-        .catch(undefined),
+      schema: z.object({
+        reference: z
+          .object({
+            type: z.enum([
+              // @deprecated Subpage is deprecated, use LinkedPage instead
+              'Subpage',
+              'LinkedPage',
+            ]),
+          })
+          .merge(ReferenceInfoSchema)
+          .optional()
+          .nullable()
+          .catch(undefined),
+      }),
       match: delta => {
         return !!delta.attributes?.reference;
       },

blocksuite/affine/model/src/blocks/attachment/attachment-model.ts

@@ -58,6 +58,8 @@ export type AttachmentBlockProps = {
   style?: (typeof AttachmentBlockStyles)[number];
 
   footnoteIdentifier: string | null;
+
+  comments?: Record<string, boolean>;
 } & Omit<GfxCommonBlockProps, 'scale'> &
   BlockMeta;
 
@@ -78,6 +80,7 @@ export const defaultAttachmentProps: AttachmentBlockProps = {
   'meta:createdBy': undefined,
   'meta:updatedBy': undefined,
   footnoteIdentifier: null,
+  comments: undefined,
 };
 
 export const AttachmentBlockSchema = defineBlockSchema({

blocksuite/affine/model/src/blocks/bookmark/bookmark-model.ts

@@ -28,6 +28,7 @@ export type BookmarkBlockProps = {
   url: string;
   caption: string | null;
   footnoteIdentifier: string | null;
+  comments?: Record<string, boolean>;
 } & LinkPreviewData &
   Omit<GfxCommonBlockProps, 'scale'> &
   BlockMeta;
@@ -52,6 +53,7 @@ const defaultBookmarkProps: BookmarkBlockProps = {
   'meta:updatedBy': undefined,
 
   footnoteIdentifier: null,
+  comments: undefined,
 };
 
 export const BookmarkBlockSchema = defineBlockSchema({

blocksuite/affine/model/src/blocks/code/code-model.ts

@@ -14,6 +14,7 @@ type CodeBlockProps = {
   caption: string;
   preview?: boolean;
   lineNumber?: boolean;
+  comments?: Record<string, boolean>;
 } & BlockMeta;
 
 export const CodeBlockSchema = defineBlockSchema({
@@ -26,6 +27,7 @@ export const CodeBlockSchema = defineBlockSchema({
       caption: '',
       preview: undefined,
       lineNumber: undefined,
+      comments: undefined,
       'meta:createdAt': undefined,
       'meta:createdBy': undefined,
       'meta:updatedAt': undefined,

blocksuite/affine/model/src/blocks/database/database-model.ts

@@ -16,6 +16,7 @@ export type DatabaseBlockProps = {
   title: Text;
   cells: SerializedCells;
   columns: Array<ColumnDataType>;
+  comments?: Record<string, boolean>;
 };
 
 export class DatabaseBlockModel extends BlockModel<DatabaseBlockProps> {}
@@ -27,6 +28,7 @@ export const DatabaseBlockSchema = defineBlockSchema({
     title: internal.Text(),
     cells: Object.create(null),
     columns: [],
+    comments: undefined,
   }),
   metadata: {
     role: 'hub',

blocksuite/affine/model/src/blocks/edgeless-text/edgeless-text-model.ts

@@ -26,6 +26,7 @@ import { DefaultTheme } from '../../themes/default';
 
 type EdgelessTextProps = {
   hasMaxWidth: boolean;
+  comments?: Record<string, boolean>;
 } & Omit<TextStyleProps, 'fontSize'> &
   GfxCommonBlockProps;
 
@@ -54,6 +55,7 @@ export const EdgelessTextBlockSchema = defineBlockSchema({
     scale: 1,
     rotate: 0,
     hasMaxWidth: false,
+    comments: undefined,
     ...EdgelessTextZodSchema.parse(undefined),
   }),
   metadata: {

blocksuite/affine/model/src/blocks/frame/frame-model.ts

@@ -30,6 +30,7 @@ export type FrameBlockProps = {
   background: Color;
   childElementIds?: Record<string, boolean>;
   presentationIndex?: string;
+  comments?: Record<string, boolean>;
 } & GfxCompatibleProps;
 
 export const FrameZodSchema = z
@@ -50,6 +51,7 @@ export const FrameBlockSchema = defineBlockSchema({
     childElementIds: Object.create(null),
     presentationIndex: generateKeyBetweenV2(null, null),
     lockedBySelf: false,
+    comments: undefined,
   }),
   metadata: {
     version: 1,

blocksuite/affine/model/src/blocks/image/image-model.ts

@@ -19,6 +19,7 @@ export type ImageBlockProps = {
   height?: number;
   rotate: number;
   size?: number;
+  comments?: Record<string, boolean>;
 } & Omit<GfxCommonBlockProps, 'scale'> &
   BlockMeta;
 
@@ -32,6 +33,7 @@ const defaultImageProps: ImageBlockProps = {
   lockedBySelf: false,
   rotate: 0,
   size: -1,
+  comments: undefined,
   'meta:createdAt': undefined,
   'meta:createdBy': undefined,
   'meta:updatedAt': undefined,

blocksuite/affine/model/src/blocks/latex/latex-model.ts

@@ -11,6 +11,7 @@ import {
 
 export type LatexProps = {
   latex: string;
+  comments?: Record<string, boolean>;
 } & GfxCommonBlockProps;
 
 export const LatexBlockSchema = defineBlockSchema({
@@ -22,6 +23,7 @@ export const LatexBlockSchema = defineBlockSchema({
     scale: 1,
     rotate: 0,
     latex: '',
+    comments: undefined,
   }),
   metadata: {
     version: 1,

blocksuite/affine/model/src/blocks/list/list-model.ts

@@ -16,6 +16,7 @@ export type ListProps = {
   checked: boolean;
   collapsed: boolean;
   order: number | null;
+  comments?: Record<string, boolean>;
 } & BlockMeta;
 
 export const ListBlockSchema = defineBlockSchema({
@@ -29,6 +30,7 @@ export const ListBlockSchema = defineBlockSchema({
 
       // number type only for numbered list
       order: null,
+      comments: undefined,
       'meta:createdAt': undefined,
       'meta:createdBy': undefined,
       'meta:updatedAt': undefined,

blocksuite/affine/model/src/blocks/note/note-model.ts

@@ -69,6 +69,7 @@ export const NoteBlockSchema = defineBlockSchema({
         shadowType: DEFAULT_NOTE_SHADOW,
       },
     },
+    comments: undefined,
   }),
   metadata: {
     version: 1,
@@ -91,6 +92,7 @@ export type NoteProps = {
   background: Color;
   displayMode: NoteDisplayMode;
   edgeless: NoteEdgelessProps;
+  comments?: Record<string, boolean>;
   /**
    * @deprecated
    * use `displayMode` instead

blocksuite/affine/model/src/blocks/paragraph/paragraph-model.ts

@@ -21,6 +21,7 @@ export type ParagraphProps = {
   type: ParagraphType;
   text: Text;
   collapsed: boolean;
+  comments?: Record<string, boolean>;
 } & BlockMeta;
 
 export const ParagraphBlockSchema = defineBlockSchema({
@@ -29,6 +30,7 @@ export const ParagraphBlockSchema = defineBlockSchema({
     type: 'text',
     text: internal.Text(),
     collapsed: false,
+    comments: undefined,
     'meta:createdAt': undefined,
     'meta:createdBy': undefined,
     'meta:updatedAt': undefined,

blocksuite/affine/model/src/blocks/surface-ref/surface-ref-model.ts

@@ -8,14 +8,16 @@ export type SurfaceRefProps = {
   reference: string;
   caption: string;
   refFlavour: string;
+  comments?: Record<string, boolean>;
 };
 
 export const SurfaceRefBlockSchema = defineBlockSchema({
   flavour: 'affine:surface-ref',
-  props: () => ({
+  props: (): SurfaceRefProps => ({
     reference: '',
     caption: '',
     refFlavour: '',
+    comments: undefined,
   }),
   metadata: {
     version: 1,

blocksuite/affine/model/src/blocks/table/table-model.ts

@@ -29,6 +29,7 @@ export interface TableBlockProps extends BlockMeta {
   columns: Record<string, TableColumn>;
   // key = `${rowId}:${columnId}`
   cells: Record<string, TableCell>;
+  comments?: Record<string, boolean>;
 }
 
 export interface TableCellSerialized {
@@ -51,6 +52,7 @@ export const TableBlockSchema = defineBlockSchema({
     rows: {},
     columns: {},
     cells: {},
+    comments: undefined,
     'meta:createdAt': undefined,
     'meta:createdBy': undefined,
     'meta:updatedAt': undefined,

blocksuite/affine/model/src/consts/doc.ts

@@ -43,6 +43,7 @@ export const ReferenceParamsSchema = z
     databaseId: z.string().optional(),
     databaseRowId: z.string().optional(),
     xywh: SerializedXYWHSchema.optional(),
+    commentId: z.string().optional(),
   })
   .partial();
 

blocksuite/affine/model/src/utils/helper.ts

@@ -10,7 +10,11 @@ import {
 
 import type { BlockMeta } from './types';
 
-export type EmbedProps<Props = object> = Props & GfxCompatibleProps & BlockMeta;
+export type EmbedProps<Props = object> = Props &
+  GfxCompatibleProps &
+  BlockMeta & {
+    comments?: Record<string, boolean>;
+  };
 
 export function defineEmbedModel<
   Props extends object,
@@ -52,6 +56,7 @@ export function createEmbedBlockSchema<
         xywh: '[0,0,0,0]',
         lockedBySelf: false,
         rotate: 0,
+        comments: undefined,
         'meta:createdAt': undefined,
         'meta:updatedAt': undefined,
         'meta:createdBy': undefined,

blocksuite/affine/shared/package.json

@@ -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', () => {