feat(editor): comment extension (#12948)

#### PR Dependency Tree


* **PR #12948** 👈
  * **PR #12980**

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

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Introduced inline comment functionality, allowing users to add,
resolve, and highlight comments directly within text.
  * Added a new toolbar action for inserting comments when supported.
* Inline comments are visually highlighted and can be interacted with in
the editor.

* **Enhancements**
  * Integrated a feature flag to enable or disable the comment feature.
* Improved inline manager rendering to support wrapper specs for
advanced formatting.

* **Developer Tools**
* Added mock comment provider for testing and development environments.

* **Chores**
* Updated dependencies and project references to support the new inline
comment module.

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

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

@@ -38,9 +38,13 @@ import type {
   ToolbarActionGroup,
   ToolbarModuleConfig,
 } from '@blocksuite/affine-shared/services';
-import { ActionPlacement } from '@blocksuite/affine-shared/services';
+import {
+  ActionPlacement,
+  CommentProviderIdentifier,
+} from '@blocksuite/affine-shared/services';
 import { tableViewMeta } from '@blocksuite/data-view/view-presets';
 import {
+  CommentIcon,
   CopyIcon,
   DatabaseTableViewIcon,
   DeleteIcon,
@@ -161,7 +165,7 @@ const highlightActionGroup = {
 } as const satisfies ToolbarAction;
 
 const turnIntoDatabase = {
-  id: 'd.convert-to-database',
+  id: 'e.convert-to-database',
   tooltip: 'Create Table',
   icon: DatabaseTableViewIcon(),
   when({ chain }) {
@@ -208,7 +212,7 @@ const turnIntoDatabase = {
 } as const satisfies ToolbarAction;
 
 const turnIntoLinkedDoc = {
-  id: 'e.convert-to-linked-doc',
+  id: 'f.convert-to-linked-doc',
   tooltip: 'Create Linked Doc',
   icon: LinkedPageIcon(),
   when({ chain }) {
@@ -266,11 +270,26 @@ 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,
     {