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

#### PR Dependency Tree


* **PR #12980** 👈

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

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

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,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();
 

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

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/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/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,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>(

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

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

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 {
+import type { GfxBlockElementModel } from '@blocksuite/std/gfx';
-  GfxBlockElementModel,
-  GfxCompatibleProps,
-} 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,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;

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

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

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

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

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

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

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

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 => {
+  type CommentedBlock = BlockModel<{ comments: Record<CommentId, boolean> }>;
-    return 'comment' in block.props && block.props.comment === commentId;
+  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;
+    }
+  },
+};