shortcut

shortcut(combo, fn) is a use:ref factory for an element-scoped keyboard chord — it only fires when the element (or one of its descendants) has focus. Use it for editor commands inside a contenteditable, or form-local submit shortcuts. The handler receives the KeyboardEvent and the element; preventDefault is applied when the chord matches. See pota/use/keyboard for chord syntax; for a document-wide chord use globalShortcut.

Arguments

Argument	Type	Description
combo	string	+-separated modifiers (ctrl/meta/alt/shift/mod) + key.
handler	(e: KeyboardEvent, node: Element) => void	Called when the chord is pressed while the element has focus.

Returns: a ref function (node: Element) => void for use:ref.

Examples

Element-scoped shortcut

A textarea with a local formatting shortcut and submit-on-Ctrl+Enter — both only fire while the textarea has focus.

import { render, signal } from 'pota'
import { shortcut, submitOnCtrlEnter } from 'pota/use/keyboard'

function App() {
	const draft = signal('')
	const last = signal('')

	return (
		<form on:submit={e => e.preventDefault()}>
			<textarea
				rows="4"
				prop:value={draft.read}
				on:input={e => draft.write(e.currentTarget.value)}
				use:ref={[
					shortcut('mod+b', () => draft.update(d => d + '**bold**')),
					submitOnCtrlEnter(() => last.write(draft.read())),
				]}
			/>
			<p>
				last submitted: <mark>{last.read}</mark>
			</p>
			<p>
				try <kbd>Ctrl/Cmd</kbd>+<kbd>B</kbd>, then <kbd>Ctrl/Cmd</kbd>
				+<kbd>Enter</kbd>
			</p>
		</form>
	)
}

render(App)