⬅️ Back to Table of Contents

📄 useTextSelection

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	7
🟢 Vue Composition API	3
📐 Interfaces	2

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useTextSelection/index.ts

📦 Imports

Name	Source
ComputedRef	vue
ShallowRef	vue
ConfigurableWindow	../_configurable
computed	vue
shallowRef	vue
defaultWindow	../_configurable
useEventListener	../useEventListener

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none
computed	computed	none	none
computed	computed	none	none

---

Functions

useTextSelection(options: UseTextSelectionOptions): UseTextSelectionReturn

Reactively track user text selection based on Window.getSelection.

See: https://vueuse.org/useTextSelection

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Reactively track user text selection based on [`Window.getSelection`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection).
 *
 * @see https://vueuse.org/useTextSelection
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

• shallowRef (from vue)
• window?.getSelection
• computed (from vue)
• selection.value?.toString
• getRangesFromSelection
• ranges.value.map
• range.getBoundingClientRect
• window.getSelection
• useEventListener (from ../useEventListener)

Code

export function useTextSelection(options: UseTextSelectionOptions = {}): UseTextSelectionReturn {
  const {
    window = defaultWindow,
  } = options

  const selection = shallowRef<Selection | null>(window?.getSelection() ?? null)
  const text = computed(() => selection.value?.toString() ?? '')
  const ranges = computed<Range[]>(() => selection.value ? getRangesFromSelection(selection.value) : [])
  const rects = computed(() => ranges.value.map(range => range.getBoundingClientRect()))

  function onSelectionChange() {
    selection.value = null // trigger computed update
    if (window)
      selection.value = window.getSelection()
  }

  if (window)
    useEventListener(window.document, 'selectionchange', onSelectionChange, { passive: true })

  return {
    text,
    rects,
    ranges,
    selection,
  }
}

getRangesFromSelection(selection: Selection): Range[]

Parameters:

• selection Selection

Returns: Range[]

Calls:

• Array.from
• selection.getRangeAt

Code

function getRangesFromSelection(selection: Selection) {
  const rangeCount = selection.rangeCount ?? 0
  return Array.from({ length: rangeCount }, (_, i) => selection.getRangeAt(i))
}

Internal helpers

Declared inside another function in this file.

onSelectionChange(): void

Returns: void

Calls:

• window.getSelection

Code

function onSelectionChange() {
    selection.value = null // trigger computed update
    if (window)
      selection.value = window.getSelection()
  }

---

Interfaces

UseTextSelectionOptions

Interface Code

export interface UseTextSelectionOptions extends ConfigurableWindow {
}

UseTextSelectionReturn

Interface Code

export interface UseTextSelectionReturn {
  text: ComputedRef<string>
  rects: ComputedRef<DOMRect[]>
  ranges: ComputedRef<Range[]>
  selection: ShallowRef<Selection | null>
}

Properties

Name	Type	Optional	Description
text	ComputedRef<string>	✗	not shown
rects	ComputedRef<DOMRect[]>	✗	not shown
ranges	ComputedRef<Range[]>	✗	not shown
selection	ShallowRef<Selection \| null>	✗	not shown

---

Generated by Syntax Scribe