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

#### PR Dependency Tree * **PR #12980** 👈 This tree was auto-generated by [Charcoal](https://github.com/danerwilliams/charcoal)
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}
      >