80 Caret-anchored Floating UI. 80 of 95.
80/TEXT EDITING/80 of 95
Caret-anchored Floating UI
Menus can follow the text cursor, not only buttons.
The problem
Formatting and mention menus that only anchor to element boxes float far from where you are typing, breaking spatial continuity.
The solution
getClientRects on the selection positions UI at the active text range.
Experiment
Play with the values
8px
How it works
- Selection changes are the signal to reposition, because the caret moves without a button click.
- The caret's client rectangle is measured from the live selection.
- The floating surface is positioned from that rectangle.
- Flip and shift keep it on screen when the caret is near an edge.
- The surface updates as the caret moves, scrolls, or the selection changes.
Seen in
Inline formatting
Bold/link toolbars appear beside the selection, not the field edge.
Mention menus
@ suggestions open at the caret inside long documents.
Link editors
URL popovers anchor to the selected text range.
Code completions
Suggest widgets track the insertion point in the editor.