use-text-selection

1import { useRef, useState } from 'react'
2import { useEffectWithTarget } from '@/registry/hooks/use-effect-with-target'
3import { getTargetElement } from '@/registry/lib/create-effect-with-target'
4import type { BasicTarget } from '@/registry/lib/create-effect-with-target'
5 
6interface Rect {
7  top: number
8  left: number
9  bottom: number
10  right: number
11  height: number
12  width: number
13}
14export interface State extends Rect {
15  text: string
16}
17 
18const initRect: Rect = {
19  top: Number.NaN,
20  left: Number.NaN,
21  bottom: Number.NaN,
22  right: Number.NaN,
23  height: Number.NaN,
24  width: Number.NaN,
25}
26 
27const initState: State = {
28  text: '',
29  ...initRect,
30}
31 
32function getRectFromSelection(selection: Selection | null): Rect {
33  if (!selection) {
34    return initRect
35  }
36 
37  if (selection.rangeCount < 1) {
38    return initRect
39  }
40  const range = selection.getRangeAt(0)
41  const { height, width, top, left, right, bottom } =
42    range.getBoundingClientRect()
43  return {
44    height,
45    width,
46    top,
47    left,
48    right,
49    bottom,
50  }
51}
52 
53export function useTextSelection(
54  target?: BasicTarget<Document | Element>,
55): State {
56  const [state, setState] = useState(initState)
57 
58  const stateRef = useRef(state)
59  const isInRangeRef = useRef(false)
60  stateRef.current = state
61 
62  useEffectWithTarget(
63    () => {
64      const el = getTargetElement(target, document)
65      if (!el) {
66        return
67      }
68 
69      const mouseupHandler = () => {
70        let selObj: Selection | null = null
71        let text = ''
72        let rect = initRect
73        if (!window.getSelection) {
74          return
75        }
76        selObj = window.getSelection()
77        text = selObj ? selObj.toString() : ''
78        if (text && isInRangeRef.current) {
79          rect = getRectFromSelection(selObj)
80          setState({ ...state, text, ...rect })
81        }
82      }
83 
84      // clear the previous range on any click
85      const mousedownHandler = (e: MouseEvent) => {
86        // if the mouse button is right, skip it because the selection will be cleared
87        if (e.button === 2) {
88          return
89        }
90        if (!window.getSelection) {
91          return
92        }
93        if (stateRef.current.text) {
94          setState({ ...initState })
95        }
96        isInRangeRef.current = false
97        const selObj = window.getSelection()
98        if (!selObj) {
99          return
100        }
101        selObj.removeAllRanges()
102        isInRangeRef.current = el.contains(e.target as Node)
103      }
104 
105// … truncated