Overview
Selection commands allow you to programmatically control and manipulate the editor’s selection and cursor position.
selectAll()
Selects the entire document.
Function Signature
function selectAll(): Command
Return Value
A ProseMirror command that selects the entire document content. Always returns true.
Examples
Basic Usage
import { selectAll } from 'prosekit/core'
const command = selectAll()
editor.exec(command)
With Keyboard Shortcut
import { defineKeymap } from 'prosekit/core'
import { selectAll } from 'prosekit/core'
const keymap = defineKeymap({
'Mod-a': selectAll
})
Programmatic Selection
import { selectAll } from 'prosekit/core'
// Select all and apply formatting
function formatEntireDocument(editor) {
const selectCmd = selectAll()
editor.exec(selectCmd)
// Now apply formatting to selection
editor.commands.toggleBold?.()
}
selectBlock()
Selects the entire current block node.
Function Signature
function selectBlock(): Command
Return Value
A ProseMirror command that selects the current block node. Returns true if successful, false otherwise.
Examples
Select Current Paragraph
import { selectBlock } from 'prosekit/core'
const command = selectBlock()
editor.exec(command)
Select and Delete Block
import { selectBlock } from 'prosekit/core'
function deleteCurrentBlock(editor) {
const selectCmd = selectBlock()
if (editor.exec(selectCmd)) {
// Delete the selected block
const { tr } = editor.state
tr.deleteSelection()
editor.view.dispatch(tr)
}
}
Keyboard Shortcut
import { defineKeymap } from 'prosekit/core'
import { selectBlock } from 'prosekit/core'
const keymap = defineKeymap({
'Mod-Shift-l': selectBlock // Select line/block
})
insertText()
Inserts text at the current selection.
Function Signature
function insertText(options: InsertTextOptions): Command
Parameters
options
InsertTextOptions
required
The position to insert at. Defaults to current selection start.
The end position (for replacing text). Defaults to current selection end.
Return Value
A ProseMirror command that returns true if the text was successfully inserted, false otherwise.
Examples
Insert Text at Cursor
import { insertText } from 'prosekit/core'
const command = insertText({ text: 'Hello, world!' })
editor.exec(command)
Replace Selection with Text
import { insertText } from 'prosekit/core'
// Replaces current selection
const command = insertText({ text: 'Replacement text' })
editor.exec(command)
Insert at Specific Position
import { insertText } from 'prosekit/core'
// Insert at position 10
const command = insertText({
text: 'Inserted text',
from: 10,
to: 10
})
editor.exec(command)
setSelectionAround()
Sets the selection around a specific position in the document.
Function Signature
function setSelectionAround(options: { pos: number }): Command
Parameters
The position to set selection around
Return Value
A ProseMirror command that returns true if the selection was successfully set, false otherwise.
Example
import { setSelectionAround } from 'prosekit/core'
// Set selection around position 42
const command = setSelectionAround({ pos: 42 })
editor.exec(command)
Working with Editor State
function getSelectionInfo(editor) {
const { state } = editor
const { selection } = state
return {
from: selection.from,
to: selection.to,
empty: selection.empty,
anchor: selection.anchor,
head: selection.head
}
}
Custom Selection Manipulation
import { TextSelection } from '@prosekit/pm/state'
function selectRange(editor, from: number, to: number) {
const { state, view } = editor
const { tr } = state
// Create a text selection
const selection = TextSelection.create(state.doc, from, to)
tr.setSelection(selection)
view.dispatch(tr)
}
Programmatic Selection Updates
function selectWord(editor) {
const { state } = editor
const { selection } = state
const { $from } = selection
// Find word boundaries
let from = $from.pos
let to = $from.pos
const text = $from.parent.textContent
const offset = $from.parentOffset
// Expand to word boundaries
while (from > 0 && /\w/.test(text[offset - (from - $from.pos) - 1])) {
from--
}
while (to < $from.parent.nodeSize - 2 && /\w/.test(text[offset + (to - $from.pos)])) {
to++
}
// Apply selection
const { tr } = state
tr.setSelection(TextSelection.create(state.doc, from, to))
editor.view.dispatch(tr)
}
Common Patterns
Select All Shortcut
import { defineKeymap } from 'prosekit/core'
import { selectAll } from 'prosekit/core'
const keymap = defineKeymap({
'Mod-a': selectAll
})
Smart Selection Extension
import { selectBlock } from 'prosekit/core'
function SmartSelectButton({ editor }) {
const handleClick = () => {
const { selection } = editor.state
if (selection.empty) {
// If nothing selected, select the block
editor.exec(selectBlock())
} else {
// If something selected, expand to all
editor.exec(selectAll())
}
}
return <button onClick={handleClick}>Smart Select</button>
}
Navigate and Select
import { defineKeymap } from 'prosekit/core'
const navigationKeymap = defineKeymap({
'Mod-Shift-ArrowUp': () => {
return (state, dispatch) => {
const { selection } = state
const { $from } = selection
// Extend selection upward
const pos = $from.before($from.depth)
const newSelection = TextSelection.create(state.doc, pos, selection.to)
if (dispatch) {
dispatch(state.tr.setSelection(newSelection))
}
return true
}
}
})
import { selectAll } from 'prosekit/core'
import { toggleMark } from 'prosekit/core'
function formatAllText(editor, markType: string) {
// Select all
editor.exec(selectAll())
// Apply formatting
editor.exec(toggleMark({ type: markType }))
// Collapse selection to end
const { state } = editor
const { tr } = state
const endPos = state.doc.content.size
tr.setSelection(TextSelection.create(state.doc, endPos))
editor.view.dispatch(tr)
}
Selection State Tracking
import { useEffect, useState } from 'react'
function SelectionInfo({ editor }) {
const [info, setInfo] = useState({ from: 0, to: 0 })
useEffect(() => {
const updateInfo = () => {
const { selection } = editor.state
setInfo({
from: selection.from,
to: selection.to
})
}
// Update on every transaction
const handler = defineUpdateHandler(updateInfo)
const remove = editor.use(handler)
return remove
}, [editor])
return (
<div>
Selection: {info.from} - {info.to}
</div>
)
}
Advanced Selection Techniques
Node Selection
import { NodeSelection } from '@prosekit/pm/state'
function selectNode(editor, pos: number) {
const { state } = editor
const node = state.doc.nodeAt(pos)
if (node) {
const { tr } = state
const nodeSelection = NodeSelection.create(state.doc, pos)
tr.setSelection(nodeSelection)
editor.view.dispatch(tr)
}
}
All Selection
import { AllSelection } from '@prosekit/pm/state'
function selectEverything(editor) {
const { state } = editor
const { tr } = state
const allSelection = new AllSelection(state.doc)
tr.setSelection(allSelection)
editor.view.dispatch(tr)
}
See Also