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

View File

@@ -56,7 +56,7 @@ export class Editor extends Entity {
const mode = get(this.mode$);
let id = selector?.blockIds?.[0];
let commentId = selector?.commentId;
let key = 'blockIds';
let key: 'blockIds' | 'elementIds' = 'blockIds';
if (mode === 'edgeless') {
const elementId = selector?.elementIds?.[0];
@@ -195,7 +195,7 @@ export class Editor extends Entity {
}
handleFocusAt(focusAt: {
key: string;
key: 'blockIds' | 'elementIds';
mode: DocMode;
id?: string;
commentId?: string;
@@ -208,6 +208,7 @@ export class Editor extends Entity {
let finalId = id;
let finalKey = key;
let highlight = true;
// If we have commentId but no blockId, find the block from the comment
if (commentId && !id && editorContainer.host?.std) {
@@ -230,6 +231,9 @@ export class Editor extends Entity {
finalKey = 'blockIds';
}
}
// Workaround: clear selection to avoid comment editor flickering
selection?.clear();
highlight = false;
}
if (mode === this.mode$.value && finalId) {
@@ -237,7 +241,8 @@ export class Editor extends Entity {
selection?.create(HighlightSelection, {
mode,
[finalKey]: [finalId],
}),
highlight,
} as const),
]);
}
}