feat(editor): block comment extension (#12980)

#### PR Dependency Tree * **PR #12980** 👈 This tree was auto-generated by [Charcoal](https://github.com/danerwilliams/charcoal)
2026-02-12 04:18:54 +00:00 · 2025-07-02 17:42:16 +08:00
parent 8ce85f708d
commit d768ad4af0
47 changed files with 432 additions and 38 deletions
--- a/blocksuite/affine/blocks/attachment/src/attachment-block.ts
+++ b/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,12 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
    return this.citationService.isCitationModel(this.model);
  }

+  get isCommentHighlighted() {
+    return this.std
+      .get(BlockCommentManager)
+      .isBlockCommentHighlighted(this.model);
+  }
+
  convertTo = () => {
    return this.std
      .get(AttachmentEmbedProvider)
@@ -499,6 +506,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
        class=${classMap({
          'affine-attachment-container': true,
          focused: this.selected$.value,
+          'comment-highlighted': this.isCommentHighlighted,
        })}
        style=${this.containerStyleMap}
      >
--- a/blocksuite/affine/blocks/attachment/src/configs/toolbar.ts
+++ b/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',
--- a/blocksuite/affine/blocks/attachment/src/styles.ts
+++ b/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;
--- a/blocksuite/affine/blocks/bookmark/src/bookmark-block.ts
+++ b/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,12 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
    return this.std.get(ImageProxyService);
  }

+  get isCommentHighlighted() {
+    return this.std
+      .get(BlockCommentManager)
+      .isBlockCommentHighlighted(this.model);
+  }
+
  handleClick = (event: MouseEvent) => {
    event.stopPropagation();

--- a/blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts
+++ b/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(
--- a/blocksuite/affine/blocks/bookmark/src/configs/toolbar.ts
+++ b/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',
--- a/blocksuite/affine/blocks/bookmark/src/styles.ts
+++ b/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);
--- a/blocksuite/affine/blocks/code/src/code-block.ts
+++ b/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,12 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
      });
  }

+  get isCommentHighlighted() {
+    return this.std
+      .get(BlockCommentManager)
+      .isBlockCommentHighlighted(this.model);
+  }
+
  override async getUpdateComplete() {
    const result = await super.getUpdateComplete();
    await this._richTextElement?.updateComplete;
@@ -413,6 +420,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,
--- a/blocksuite/affine/blocks/code/src/code-toolbar/config.ts
+++ b/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>`,
+          };
+        },
+      },
    ],
  },
 ];
--- a/blocksuite/affine/blocks/code/src/styles.ts
+++ b/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 {
--- a/blocksuite/affine/blocks/database/src/components/title/index.ts
+++ b/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,
--- a/blocksuite/affine/blocks/database/src/database-block.ts
+++ b/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,12 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
    };
  }

+  get isCommentHighlighted() {
+    return this.std
+      .get(BlockCommentManager)
+      .isBlockCommentHighlighted(this.model);
+  }
+
  override get topContenteditableElement() {
    if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
      return this.closest<BlockComponent>(
--- a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/configs/toolbar.ts
@@ -11,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',
--- a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/embed-linked-doc-block.ts
+++ b/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;
--- a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts
@@ -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')};
--- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/configs/toolbar.ts
@@ -16,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',
--- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-synced-doc-block.ts
+++ b/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}
--- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts
@@ -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);
  }
--- a/blocksuite/affine/blocks/embed/src/common/embed-block-element.ts
+++ b/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,12 @@ export class EmbedBlockComponent<
   */
  protected embedContainerStyle: StyleInfo = {};

+  get isCommentHighlighted() {
+    return this.std
+      .get(BlockCommentManager)
+      .isBlockCommentHighlighted(this.model);
+  }
+
  renderEmbed = (content: () => TemplateResult) => {
    if (
      this._cardStyle === 'horizontal' ||
@@ -90,6 +99,11 @@ export class EmbedBlockComponent<
        style=${styleMap({
          height: `${this._cardHeight}px`,
          width: '100%',
+          ...(this.isCommentHighlighted
+            ? {
+                border: `2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')}`,
+              }
+            : {}),
          ...this.embedContainerStyle,
        })}
      >
--- a/blocksuite/affine/blocks/embed/src/common/to-edgeless-embed-block.ts
+++ b/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>,
--- a/blocksuite/affine/blocks/embed/src/configs/toolbar.ts
+++ b/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',
--- a/blocksuite/affine/blocks/image/src/components/page-image-block.ts
+++ b/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"
--- a/blocksuite/affine/blocks/image/src/configs/toolbar.ts
+++ b/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,
--- a/blocksuite/affine/blocks/image/src/image-block.ts
+++ b/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,12 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
    return this.pageImage?.resizeImg;
  }

+  get isCommentHighlighted() {
+    return this.std
+      .get(BlockCommentManager)
+      .isBlockCommentHighlighted(this.model);
+  }
+
  private _handleClick(event: MouseEvent) {
    // the peek view need handle shift + click
    if (event.defaultPrevented) return;
--- a/blocksuite/affine/blocks/paragraph/src/paragraph-block.ts
+++ b/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,12 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
    );
  }

+  get isCommentHighlighted() {
+    return this.std
+      .get(BlockCommentManager)
+      .isBlockCommentHighlighted(this.model);
+  }
+
  override get topContenteditableElement() {
    if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
      return this.closest<BlockComponent>(
@@ -268,7 +275,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
--- a/blocksuite/affine/blocks/paragraph/src/styles.ts
+++ b/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;
--- a/blocksuite/affine/blocks/root/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/root/src/configs/toolbar.ts
@@ -40,11 +40,10 @@ import type {
 } from '@blocksuite/affine-shared/services';
 import {
  ActionPlacement,
-  CommentProviderIdentifier,
+  blockCommentToolbarButton,
 } from '@blocksuite/affine-shared/services';
 import { tableViewMeta } from '@blocksuite/data-view/view-presets';
 import {
-  CommentIcon,
  CopyIcon,
  DatabaseTableViewIcon,
  DeleteIcon,
@@ -270,28 +269,17 @@ const turnIntoLinkedDoc = {
  },
 } as const satisfies ToolbarAction;

-const commentAction = {
-  id: 'd.comment',
-  when: ({ std, chain }) =>
-    isFormatSupported(chain).run()[0] &&
-    !!std.getOptional(CommentProviderIdentifier),
-  icon: CommentIcon(),
-  run: ({ std }) => {
-    const commentProvider = std.getOptional(CommentProviderIdentifier);
-    if (!commentProvider) return;
-
-    commentProvider.addComment(std.selection.value);
-  },
-} as const satisfies ToolbarAction;
-
 export const builtinToolbarConfig = {
  actions: [
    conversionsActionGroup,
    inlineTextActionGroup,
    highlightActionGroup,
-    commentAction,
    turnIntoDatabase,
    turnIntoLinkedDoc,
+    {
+      id: 'g.comment',
+      ...blockCommentToolbarButton,
+    },
    {
      placement: ActionPlacement.More,
      id: 'a.clipboard',
--- a/blocksuite/affine/blocks/surface-ref/src/configs/toolbar.ts
+++ b/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,
--- a/blocksuite/affine/blocks/surface-ref/src/surface-ref-block.ts
+++ b/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,12 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
    return this._referencedModel;
  }

+  get isCommentHighlighted() {
+    return this.std
+      .get(BlockCommentManager)
+      .isBlockCommentHighlighted(this.model);
+  }
+
  private readonly _handleClick = () => {
    this.selection.update(() => {
      return [this.selection.create(BlockSelection, { blockId: this.blockId })];
@@ -456,6 +467,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
        class=${classMap({
          'affine-surface-ref': true,
          focused: this.selected$.value,
+          'comment-highlighted': this.isCommentHighlighted,
        })}
        @click=${this._handleClick}
      >
--- a/blocksuite/affine/foundation/src/view.ts
+++ b/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)) {
--- a/blocksuite/affine/model/src/blocks/attachment/attachment-model.ts
+++ b/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({
--- a/blocksuite/affine/model/src/blocks/bookmark/bookmark-model.ts
+++ b/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({
--- a/blocksuite/affine/model/src/blocks/code/code-model.ts
+++ b/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,
--- a/blocksuite/affine/model/src/blocks/database/database-model.ts
+++ b/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',
--- a/blocksuite/affine/model/src/blocks/edgeless-text/edgeless-text-model.ts
+++ b/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: {
--- a/blocksuite/affine/model/src/blocks/frame/frame-model.ts
+++ b/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,
--- a/blocksuite/affine/model/src/blocks/image/image-model.ts
+++ b/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,
--- a/blocksuite/affine/model/src/blocks/latex/latex-model.ts
+++ b/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,
--- a/blocksuite/affine/model/src/blocks/list/list-model.ts
+++ b/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,
--- a/blocksuite/affine/model/src/blocks/note/note-model.ts
+++ b/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
--- a/blocksuite/affine/model/src/blocks/paragraph/paragraph-model.ts
+++ b/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,
--- a/blocksuite/affine/model/src/blocks/surface-ref/surface-ref-model.ts
+++ b/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,
--- a/blocksuite/affine/model/src/blocks/table/table-model.ts
+++ b/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,
--- a/blocksuite/affine/model/src/utils/helper.ts
+++ b/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,
--- a/blocksuite/affine/shared/src/services/comment-service/block-comment-manager.ts
+++ b/blocksuite/affine/shared/src/services/comment-service/block-comment-manager.ts
@@ -0,0 +1,118 @@
+import { DividerBlockModel } from '@blocksuite/affine-model';
+import { DisposableGroup } from '@blocksuite/global/disposable';
+import {
+  BlockSelection,
+  LifeCycleWatcher,
+  TextSelection,
+} from '@blocksuite/std';
+import type { BaseSelection, BlockModel } from '@blocksuite/store';
+import { signal } from '@preact/signals-core';
+
+import { getSelectedBlocksCommand } from '../../commands';
+import { ImageSelection } from '../../selection';
+import { matchModels } from '../../utils';
+import { type CommentId, CommentProviderIdentifier } from './comment-provider';
+import { findCommentedBlocks } from './utils';
+
+export class BlockCommentManager extends LifeCycleWatcher {
+  static override key = 'block-comment-manager';
+
+  private readonly _highlightedCommentId$ = signal<CommentId | null>(null);
+
+  private readonly _disposables = new DisposableGroup();
+
+  private get _provider() {
+    return this.std.getOptional(CommentProviderIdentifier);
+  }
+
+  isBlockCommentHighlighted(
+    block: BlockModel<{ comments?: Record<CommentId, boolean> }>
+  ) {
+    const comments = block.props.comments;
+    if (!comments) return false;
+    return (
+      this._highlightedCommentId$.value !== null &&
+      Object.keys(comments).includes(this._highlightedCommentId$.value)
+    );
+  }
+
+  override mounted() {
+    const provider = this._provider;
+    if (!provider) return;
+
+    this._disposables.add(provider.onCommentAdded(this._handleAddComment));
+    this._disposables.add(
+      provider.onCommentDeleted(this._handleDeleteAndResolve)
+    );
+    this._disposables.add(
+      provider.onCommentResolved(this._handleDeleteAndResolve)
+    );
+    this._disposables.add(
+      provider.onCommentHighlighted(this._handleHighlightComment)
+    );
+  }
+
+  override unmounted() {
+    this._disposables.dispose();
+  }
+
+  private readonly _handleAddComment = (
+    id: CommentId,
+    selections: BaseSelection[]
+  ) => {
+    const blocksFromTextRange = selections
+      .filter((s): s is TextSelection => s.is(TextSelection))
+      .map(s => {
+        const [_, { selectedBlocks }] = this.std.command.exec(
+          getSelectedBlocksCommand,
+          {
+            textSelection: s,
+          }
+        );
+        if (!selectedBlocks) return [];
+        return selectedBlocks.map(b => b.model);
+      });
+
+    const needCommentBlocks = [
+      ...blocksFromTextRange.flat(),
+      ...selections
+        .filter(s => s instanceof BlockSelection || s instanceof ImageSelection)
+        .map(({ blockId }) => this.std.store.getModelById(blockId))
+        .filter(
+          (m): m is BlockModel =>
+            m !== null && !matchModels(m, [DividerBlockModel])
+        ),
+    ];
+
+    if (needCommentBlocks.length === 0) return;
+
+    this.std.store.withoutTransact(() => {
+      needCommentBlocks.forEach(block => {
+        const comments = (
+          'comments' in block.props &&
+          typeof block.props.comments === 'object' &&
+          block.props.comments !== null
+            ? block.props.comments
+            : {}
+        ) as Record<CommentId, boolean>;
+
+        this.std.store.updateBlock(block, {
+          comments: { [id]: true, ...comments },
+        });
+      });
+    });
+  };
+
+  private readonly _handleDeleteAndResolve = (id: CommentId) => {
+    const commentedBlocks = findCommentedBlocks(this.std.store, id);
+    this.std.store.withoutTransact(() => {
+      commentedBlocks.forEach(block => {
+        delete block.props.comments[id];
+      });
+    });
+  };
+
+  private readonly _handleHighlightComment = (id: CommentId | null) => {
+    this._highlightedCommentId$.value = id;
+  };
+}
--- a/blocksuite/affine/shared/src/services/comment-service/index.ts
+++ b/blocksuite/affine/shared/src/services/comment-service/index.ts
@@ -1 +1,3 @@
+export * from './block-comment-manager';
 export * from './comment-provider';
+export * from './utils';
--- a/blocksuite/affine/shared/src/services/comment-service/utils.ts
+++ b/blocksuite/affine/shared/src/services/comment-service/utils.ts
@@ -1,9 +1,45 @@
-import type { Store } from '@blocksuite/store';
+import { CommentIcon } from '@blocksuite/icons/lit';
+import { BlockSelection } from '@blocksuite/std';
+import type { BlockModel, Store } from '@blocksuite/store';

-import type { CommentId } from './comment-provider';
+import type { ToolbarAction } from '../toolbar-service';
+import { type CommentId, CommentProviderIdentifier } from './comment-provider';

 export function findCommentedBlocks(store: Store, commentId: CommentId) {
-  return store.getAllModels().filter(block => {
-    return 'comment' in block.props && block.props.comment === commentId;
+  type CommentedBlock = BlockModel<{ comments: Record<CommentId, boolean> }>;
+  return store.getAllModels().filter((block): block is CommentedBlock => {
+    return (
+      'comments' in block.props &&
+      typeof block.props.comments === 'object' &&
+      block.props.comments !== null &&
+      commentId in block.props.comments
+    );
  });
 }
+
+export const blockCommentToolbarButton: Omit<ToolbarAction, 'id'> = {
+  tooltip: 'Comment',
+  when: ({ std }) => !!std.getOptional(CommentProviderIdentifier),
+  icon: CommentIcon(),
+  run: ctx => {
+    const commentProvider = ctx.std.getOptional(CommentProviderIdentifier);
+    if (!commentProvider) return;
+    const selections = ctx.selection.value;
+
+    const model = ctx.getCurrentModel();
+
+    if (selections.length > 1) {
+      commentProvider.addComment(selections);
+    } else if (model) {
+      commentProvider.addComment([
+        new BlockSelection({
+          blockId: model.id,
+        }),
+      ]);
+    } else if (selections.length === 1) {
+      commentProvider.addComment(selections);
+    } else {
+      return;
+    }
+  },
+};