useTextSelection
Reactively track user text selection based on Window.getSelection
.
Demo
You can select any text on the page.
Selected Text: No selected
Selected Position: {"top":0,"right":0,"bottom":0,"left":0}
Selected Size: {"width":0,"height":0}
Usage
<template>
<p>{{state.text}}</p>
</template>
<script setup lang="ts">
import { useTextSelection } from '@vueuse/core'
const state = useTextSelection()
</script>
<template>
<p>{{state.text}}</p>
</template>
<script setup lang="ts">
import { useTextSelection } from '@vueuse/core'
const state = useTextSelection()
</script>
Type Declarations
declare type Rect = Omit<DOMRectReadOnly, "x" | "y" | "toJSON">
export interface UseTextSelectionState extends Rect {
text: string
}
export declare function useTextSelection(
element?: MaybeRef<HTMLElement | Document | null | undefined>
): Ref<{
text: string
readonly left: number
readonly right: number
readonly top: number
readonly bottom: number
readonly width: number
readonly height: number
}>
export declare type UseTextSelectionReturn = ReturnType<typeof useTextSelection>
declare type Rect = Omit<DOMRectReadOnly, "x" | "y" | "toJSON">
export interface UseTextSelectionState extends Rect {
text: string
}
export declare function useTextSelection(
element?: MaybeRef<HTMLElement | Document | null | undefined>
): Ref<{
text: string
readonly left: number
readonly right: number
readonly top: number
readonly bottom: number
readonly width: number
readonly height: number
}>
export declare type UseTextSelectionReturn = ReturnType<typeof useTextSelection>
Source
Contributors
Anthony Fu
wheat
webfansplz