getSelection

getSelection() snapshots the current document selection as a DOM Range, or null when nothing is selected. It reads window.getSelection() and returns its first range (getRangeAt(0)). Pair it with restoreSelection when you have to mutate text the user is in the middle of editing. Part of pota/use/selection.

Arguments

getSelection() takes no arguments.

Returns: the current Range, or null if nothing is selected.

How it works

const range = getSelection()
if (range) {
	// ... mutate the DOM ...
	restoreSelection(range) // put the user's selection back
}

Examples

Read what the user selected

Select any text on the page, then click the button to capture the current selection and show the selected string.

import { render, signal } from 'pota'
import { getSelection } from 'pota/use/selection'

function App() {
	const text = signal('')

	return (
		<div>
			<p>Select some of this text, then press the button.</p>
			<button
				on:click={() => {
					const range = getSelection()
					text.write(range ? range.toString() : '(nothing selected)')
				}}
			>
				capture selection
			</button>
			<pre>{text.read}</pre>
		</div>
	)
}

render(App)