Improve collaborator awareness indicator placement to avoid obscuring text

Problem

Currently, the collaborator awareness indicator combines the caret and avatar at a single position — the collaborator's actual cursor location. When multiple collaborators are editing the same block or nearby text, the avatar obscures the underlying text, making it difficult to read what's being edited in real time.

Suggestion

Move the avatar to the top-left of the block, in the margin/gutter area outside the text content, while the caret (if retained — see open questions) stays at the precise edit position. This keeps the text fully readable regardless of block size, since the gutter is a fixed lane separate from the content column.

Benefits:

• Readability — text is never hidden behind an avatar
• Traceability — consistent top-left placement makes it easy to scan who's editing what
• Accessibility — a stable anchor point is easier to track than one that moves with every keystroke

Screenshots

Image 1: current behavior

Image 2: proposed behavior

Open questions

1. Do we need the caret at all? Notion uses avatar-only awareness (no separate caret). Given Gutenberg blocks vary widely in size (a short list item vs. a large paragraph or table), is block-level awareness precise enough, or does character-level position still matter for larger blocks?
2. If we keep the caret, how do we link it to its avatar accessibly? Relying on color alone to connect a separated caret and avatar is a problem for users with color blindness or those using high-contrast mode (raised by @t-hamano ). Options to consider: matching initials, shape/pattern distinction, or a connecting indicator on hover/focus only.
3. Multiple collaborators in the same block — do avatars stack vertically in the gutter, offset, or cap with a "+N" overflow indicator?

Next steps

Happy to draft a PR once there's rough alignment on direction — flagging as an issue first to gather design and accessibility input, per @t-hamano 's suggestion.