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)
This commit is contained in:
L-Sun
2025-07-04 19:55:00 +08:00
committed by GitHub
parent ee8c7616bc
commit eb9652ed4c
4 changed files with 34 additions and 13 deletions
@@ -1,8 +1,12 @@
import {
type ReferenceParams,
ReferenceParamsSchema,
} from '@blocksuite/affine-model';
import { ReferenceParamsSchema } from '@blocksuite/affine-model';
import { BaseSelection, SelectionExtension } from '@blocksuite/store';
import z from 'zod';
const HighlightSelectionParamsSchema = ReferenceParamsSchema.extend({
highlight: z.boolean().optional(),
});
type HighlightSelectionParams = z.infer<typeof HighlightSelectionParamsSchema>;
export class HighlightSelection extends BaseSelection {
static override group = 'scene';
@@ -15,16 +19,24 @@ export class HighlightSelection extends BaseSelection {
readonly mode: 'page' | 'edgeless' = 'page';
constructor({ mode, blockIds, elementIds }: ReferenceParams) {
readonly highlight: boolean = true;
constructor({
mode,
blockIds,
elementIds,
highlight = true,
}: HighlightSelectionParams) {
super({ blockId: '[scene-highlight]' });
this.mode = mode ?? 'page';
this.blockIds = blockIds ?? [];
this.elementIds = elementIds ?? [];
this.highlight = highlight;
}
static override fromJSON(json: Record<string, unknown>): HighlightSelection {
const result = ReferenceParamsSchema.parse(json);
const result = HighlightSelectionParamsSchema.parse(json);
return new HighlightSelection(result);
}