useTextSelection

v0.0.14testeddemo

Reactively track the user's text selection via Window.getSelection.

Example

const { text, rects, ranges, selection } = useTextSelection();
watch(text, (value) => console.log('selected:', value));

Loading demo…

export function useTextSelection(
  options: UseTextSelectionOptions ={ ... }

Parameter	Type	Default	Description
`options`?	`UseTextSelectionOptions`	`{}`	Options (custom `window`, `document`)

UseTextSelectionReturnReactive text, rects, ranges, and the raw selection

Property	Type	Default	Description
`text`	`ComputedRef<string>`	—	The selected text, equivalent to `Selection.toString()`.
`rects`	`ComputedRef<DOMRect[]>`	—	Bounding rectangles for every range in the current selection.
`ranges`	`ComputedRef<Range[]>`	—	The `Range` objects that make up the current selection.
`selection`	`ShallowRef<Selection \| null>`	—	The raw `Selection` object, or `null` when nothing is selected / unsupported.