fix(editor): adjust highlght style of comment and comment editor flickering (#13040)

### Before


https://github.com/user-attachments/assets/6b98946b-d53c-42fb-b341-e09ba5204523

### After


https://github.com/user-attachments/assets/274341de-33c4-4fd3-b01b-a8f7c25bf2fe



#### PR Dependency Tree


* **PR #13040** 👈

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**
* Improved comment highlighting: Clicking now cycles through and
highlights individual comments one at a time instead of highlighting all
at once.
* Highlighting behavior is now more flexible, allowing highlighting to
be toggled on or off in certain scenarios.

* **Bug Fixes**
* Prevented flickering in the comment editor when focusing on comments.

* **Refactor**
* Enhanced selection and anchoring logic to support the new highlight
flag and updated types for improved clarity and control.

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


#### PR Dependency Tree


* **PR #13040** 👈

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

blocksuite/affine/inlines/comment/src/inline-comment.ts

@@ -41,6 +41,8 @@ export class InlineComment extends WithDisposable(ShadowlessElement) {
   })
   accessor commentIds!: string[];
 
+  private _index: number = 0;
+
   @consume({ context: stdContext })
   private accessor _std!: BlockStdScope;
 
@@ -52,8 +54,8 @@ export class InlineComment extends WithDisposable(ShadowlessElement) {
   }
 
   private readonly _handleClick = () => {
-    const provider = this._provider;
-    provider && this.commentIds.forEach(id => provider.highlightComment(id));
+    this._provider?.highlightComment(this.commentIds[this._index]);
+    this._index = (this._index + 1) % this.commentIds.length;
   };
 
   private readonly _handleHighlight = (id: CommentId | null) => {