Selection overlay

A separate DOM layer that owns the caret and selection highlight.

@spine-editor/dom uses a dedicated overlay layer for the caret and the selection highlight. The document subtree sets user-select: none; the overlay draws the visible caret and per-line highlight rects on top.

Entry point

renderSelectionOverlay(params: { ... }): void

Lives in packages/dom/src/selection-overlay/selection-overlay.ts. Supporting modules: caret-measurement.ts, caret-overlay.ts, and text-selection geometry helpers.

Caret

  • Rendered as a positioned <div> with transform: translate3d(...) and a CSS blink animation.
  • Width is 1px.
  • Runs on the GPU compositor, so movement is smooth across arrow-key navigation.

Selection highlight

On non-collapsed text selections the overlay computes per-line rects from the DOM Range returned by selection mapping, then positions each rect absolutely inside the overlay container.

Caret at the frontier

When the caret sits between an inline paragraph and an atomic block on the same visual row, measureFrontierCaretPosition resolves geometry at the visual frontier rather than at the paragraph's last text run. See frontier.