feat(editor): comment for edgeless element (#13098)

#### PR Dependency Tree


* **PR #13098** 👈

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**
* Added support for comments on graphical elements, allowing users to
comment on both blocks and graphical elements within surfaces.
* Enhanced comment previews to include graphical elements in selection
summaries.
* Improved editor navigation to focus on commented graphical elements in
addition to blocks and inline texts.

* **Bug Fixes**
* Updated comment highlighting and management to consistently use the
new comment manager across all block and element types.

* **Refactor**
* Renamed and extended the comment manager to handle both block and
element comments.
* Streamlined toolbar configurations by removing outdated comment button
entries and adding a consolidated comment button in the root toolbar.

* **Tests**
* Disabled the mock comment provider integration in the test editor
environment to refine testing setup.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/blocksuite/view-extensions/comment/comment-provider.ts

@@ -5,8 +5,18 @@ import { CommentProviderIdentifier } from '@blocksuite/affine/shared/services';
 import type { BlockStdScope } from '@blocksuite/affine/std';
 import { StdIdentifier } from '@blocksuite/affine/std';
 import type { BaseSelection, ExtensionType } from '@blocksuite/affine/store';
+import { ImageSelection } from '@blocksuite/affine-shared/selection';
 import { type Container } from '@blocksuite/global/di';
-import { BlockSelection, TextSelection } from '@blocksuite/std';
+import {
+  BlockSelection,
+  SurfaceSelection,
+  TextSelection,
+} from '@blocksuite/std';
+import {
+  GfxBlockElementModel,
+  GfxControllerIdentifier,
+  GfxPrimitiveElementModel,
+} from '@blocksuite/std/gfx';
 import type { FrameworkProvider } from '@toeverything/infra';
 
 import { DocCommentManagerService } from '../../../modules/comment/services/doc-comment-manager';
@@ -21,6 +31,8 @@ function getPreviewFromSelections(
 
   const previews: string[] = [];
 
+  const gfx = std.get(GfxControllerIdentifier);
+
   for (const selection of selections) {
     if (selection instanceof TextSelection) {
       // Extract text from TextSelection
@@ -35,9 +47,23 @@ function getPreviewFromSelections(
         const flavour = block.model.flavour.replace('affine:', '');
         previews.push(`<${flavour}>`);
       }
-    } else if (selection.type === 'image') {
+    } else if (selection instanceof ImageSelection) {
       // Return <"Image"> for ImageSelection
       previews.push('<Image>');
+    } else if (
+      selection instanceof SurfaceSelection &&
+      gfx.surface?.id === selection.blockId
+    ) {
+      selection.elements.forEach(elementId => {
+        const model = gfx.getElementById(elementId);
+        if (model instanceof GfxPrimitiveElementModel) {
+          const flavour = model.type.replace('affine:', '');
+          previews.push(`<${flavour}>`);
+        } else if (model instanceof GfxBlockElementModel) {
+          const flavour = model.flavour.replace('affine:', '');
+          previews.push(`<${flavour}>`);
+        }
+      });
     }
     // Skip other types
   }

packages/frontend/core/src/modules/editor/entities/editor.ts

@@ -9,6 +9,7 @@ import { HighlightSelection } from '@blocksuite/affine/shared/selection';
 import {
   DocModeProvider,
   findCommentedBlocks,
+  findCommentedElements,
 } from '@blocksuite/affine/shared/services';
 import { GfxControllerIdentifier } from '@blocksuite/affine/std/gfx';
 import type { InlineEditor } from '@blocksuite/std/inline';
@@ -231,6 +232,12 @@ export class Editor extends Entity {
         if (blockCommentedBlocks.length > 0) {
           finalId = blockCommentedBlocks[0].id;
           finalKey = 'blockIds';
+        } else {
+          const commentedElements = findCommentedElements(std.store, commentId);
+          if (commentedElements.length > 0) {
+            finalId = commentedElements[0].id;
+            finalKey = 'elementIds';
+          }
         }
       }
       // Workaround: clear selection to avoid comment editor flickering