pasteText

pasteText() is a ref factory from pota/use/clipboard. With no handler it intercepts paste on <input>, <textarea>, and contenteditable hosts and inserts only the clipboard's text/plain portion at the caret — no rich-text styles, fonts, colors, or embedded images leak in. A synthetic input event is dispatched so bind and other input listeners pick up the programmatic edit. Pass a (text, event, node) handler to massage the text first; the default insertion is then skipped.

Examples

Strip formatting on paste

The first field uses the default insertion; the second passes a handler that uppercases the plain text before inserting it.

import { render } from 'pota'
import { pasteText } from 'pota/use/clipboard'

function App() {
	return (
		<main>
			<section>
				<p>
					paste rich text from anywhere — formatting, fonts, and
					colors are stripped to plain text
				</p>
				<input
					placeholder="paste here"
					use:ref={pasteText()}
					style={{ width: '100%' }}
				/>
			</section>

			<section>
				<p>
					with a handler, the default insertion is skipped — uppercase
					the pasted text first
				</p>
				<textarea
					rows={4}
					style={{ width: '100%' }}
					use:ref={pasteText((text, e, node) => {
						const start = node.selectionStart ?? node.value.length
						const end = node.selectionEnd ?? node.value.length
						node.setRangeText(text.toUpperCase(), start, end, 'end')
						node.dispatchEvent(new Event('input', { bubbles: true }))
					})}
				/>
			</section>
		</main>
	)
}

render(App)