Skip to content
ProseKit

Commands

A command is a function that may modify the editor state. ProseKit exposes them in two flavors: low-level ProseMirror commands, and high-level "command actions" that the editor wraps around them.

Two ways to call a command

Section titled “Two ways to call a command”
// 1. The named action exposed on the editor.
editorconst editor: Editor<BasicExtension>.commands
Editor<BasicExtension>.commands: ToCommandAction<{
    setParagraph: [];
    setHeading: [attrs?: HeadingAttrs | undefined];
    insertHeading: [attrs?: HeadingAttrs | undefined];
    toggleHeading: [attrs?: HeadingAttrs | undefined];
    dedentList: [options?: DedentListOptions];
    indentList: [options?: IndentListOptions];
    moveList: [direction: "up" | "down"];
    splitList: [];
    toggleCollapsed: [options?: ToggleCollapsedOptions];
    ... 58 more ...;
    redo: [];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.toggleBold
toggleBold: CommandAction
() => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
()
editorconst editor: Editor<BasicExtension>.commands
Editor<BasicExtension>.commands: ToCommandAction<{
    setParagraph: [];
    setHeading: [attrs?: HeadingAttrs | undefined];
    insertHeading: [attrs?: HeadingAttrs | undefined];
    toggleHeading: [attrs?: HeadingAttrs | undefined];
    dedentList: [options?: DedentListOptions];
    indentList: [options?: IndentListOptions];
    moveList: [direction: "up" | "down"];
    splitList: [];
    toggleCollapsed: [options?: ToggleCollapsedOptions];
    ... 58 more ...;
    redo: [];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.setHeading
setHeading: CommandAction
(attrs?: HeadingAttrs | undefined) => boolean
Execute the current command. Return `true` if the command was successfully
executed, otherwise `false`.
({ levelHeadingAttrs.level: number: 2 })

// 2. A raw ProseMirror command, executed via editor.exec.
import { toggleMarkfunction toggleMark({ type, attrs, removeWhenPresent, enterInlineAtoms, }: ToggleMarkOptions): Command
Returns a command that toggles the given mark with the given attributes.
@paramoptions@public
 } from 'prosekit/core'
editorconst editor: Editor<BasicExtension>.execEditor<BasicExtension>.exec: (command: Command) => boolean
Execute the given command. Return `true` if the command was successfully
executed, otherwise `false`.
(toggleMarkfunction toggleMark({ type, attrs, removeWhenPresent, enterInlineAtoms, }: ToggleMarkOptions): Command
Returns a command that toggles the given mark with the given attributes.
@paramoptions@public
({ typeToggleMarkOptions.type: string | MarkType
The mark type to toggle.
: 'bold' }))

The action form is what you'll use 95% of the time. It's typed (you get autocomplete for every command your extensions registered) and it exposes .canExec() for "is this currently applicable?":

const enabledconst enabled: boolean = editorconst editor: Editor<BasicExtension>.commands
Editor<BasicExtension>.commands: ToCommandAction<{
    setParagraph: [];
    setHeading: [attrs?: HeadingAttrs | undefined];
    insertHeading: [attrs?: HeadingAttrs | undefined];
    toggleHeading: [attrs?: HeadingAttrs | undefined];
    dedentList: [options?: DedentListOptions];
    indentList: [options?: IndentListOptions];
    moveList: [direction: "up" | "down"];
    splitList: [];
    toggleCollapsed: [options?: ToggleCollapsedOptions];
    ... 58 more ...;
    redo: [];
}>
All 
{@link 
CommandAction
}
s defined by the editor.
.toggleBoldtoggleBold: CommandAction<[]>.canExecCommandAction<[]>.canExec(): boolean
Check if the current command can be executed. Return `true` if the command
can be executed, otherwise `false`.
()

Built-in commands

Section titled “Built-in commands”

Most extensions ship a command pair like toggleBold / setHeading on editor.commands.

Useful low-level commands also live on prosekit/core:

CommandNotes
addMarkApply a mark to a range.
removeMarkRemove a mark from a range.
toggleMarkToggle a mark on the current selection.
unsetMarkDrop stored marks (affects newly typed text).
expandMarkExpand the selection to cover an existing mark.
setBlockTypeChange the current block to a specific type.
unsetBlockTypeReset the current block to the default.
toggleNodeToggle the current block between two types.
toggleWrapToggle a wrapping node (e.g. blockquote).
wrapWrap the selection in a node.
insertNodeInsert a node at the selection.
removeNodeRemove the nearest node of a type.
setNodeAttrsUpdate attributes on the current node.
selectAllMove selection to the whole document.
selectBlockSelect the current block node.
insertDefaultBlockInsert the default block (usually a paragraph).

See the prosekit/core reference for full signatures.

Defining your own command

Section titled “Defining your own command”

Use defineCommands (note the plural; the singular defineCommand does not exist). The keys become the action names; each value is a function that returns a ProseMirror Command.

import { defineCommands
function defineCommands<T extends Record<string, CommandCreator> = Record<string, CommandCreator>>(commands: T): Extension<{
    Commands: { [K in keyof T]: Parameters<T[K]>; };
}>
 } from 'prosekit/core'

const myCommands
const myCommands: Extension<{
    Commands: {
        insertHello: [];
        insertNTimes: [text: string, n: number];
    };
}>
 = defineCommands
defineCommands<{
    insertHello: () => (state: EditorState, dispatch: ((tr: Transaction) => void) | undefined) => true;
    insertNTimes: (text: string, n: number) => (state: EditorState, dispatch: ((tr: Transaction) => void) | undefined) => true;
}>(commands: {
    insertHello: () => (state: EditorState, dispatch: ((tr: Transaction) => void) | undefined) => true;
    insertNTimes: (text: string, n: number) => (state: EditorState, dispatch: ((tr: Transaction) => void) | undefined) => true;
}): Extension<...>
({
  insertHelloinsertHello: () => (state: EditorState, dispatch: ((tr: Transaction) => void) | undefined) => true: () => (statestate: EditorState, dispatchdispatch: ((tr: Transaction) => void) | undefined) => {
    if (dispatchdispatch: ((tr: Transaction) => void) | undefined) {
      dispatchdispatch: (tr: Transaction) => void(statestate: EditorState.trEditorState.tr: Transaction
Accessor that constructs and returns a new [transaction](https://prosemirror.net/docs/ref/#state.Transaction) from this state.
.insertTextTransaction.insertText(text: string, from?: number, to?: number): Transaction
Replace the given range, or the selection if no range is given,
with a text node containing the given string.
('Hello!'))
    }
    return true
  },
  insertNTimesinsertNTimes: (text: string, n: number) => (state: EditorState, dispatch: ((tr: Transaction) => void) | undefined) => true: (texttext: string: string, nn: number: number) => (statestate: EditorState, dispatchdispatch: ((tr: Transaction) => void) | undefined) => {
    if (dispatchdispatch: ((tr: Transaction) => void) | undefined) {
      dispatchdispatch: (tr: Transaction) => void(statestate: EditorState.trEditorState.tr: Transaction
Accessor that constructs and returns a new [transaction](https://prosemirror.net/docs/ref/#state.Transaction) from this state.
.insertTextTransaction.insertText(text: string, from?: number, to?: number): Transaction
Replace the given range, or the selection if no range is given,
with a text node containing the given string.
(texttext: string.repeatString.repeat(count: number): string
Returns a String value that is made from count copies appended together. If count is 0,
the empty string is returned.
@paramcount number of copies to append
(nn: number)))
    }
    return true
  },
})

Later, you can call editor.commands.insertHello() and editor.commands.insertNTimes('Hey', 3), with their argument types inferred from the function signatures.

Keymaps

Section titled “Keymaps”

defineKeymap maps a key string to a Command. See Keyboard Shortcuts for the full key syntax (Mod, Shift, Alt, Meta, etc.).

import { defineKeymapfunction defineKeymap(keymap: Keymap): PlainExtension
Adds a set of keybindings to the editor. Please read the
[documentation](https://prosemirror.net/docs/ref/#keymap) for more details.
@public
, toggleMarkfunction toggleMark({ type, attrs, removeWhenPresent, enterInlineAtoms, }: ToggleMarkOptions): Command
Returns a command that toggles the given mark with the given attributes.
@paramoptions@public
 } from 'prosekit/core'

const keymapconst keymap: PlainExtension = defineKeymapfunction defineKeymap(keymap: Keymap): PlainExtension
Adds a set of keybindings to the editor. Please read the
[documentation](https://prosemirror.net/docs/ref/#keymap) for more details.
@public
({
  'Mod-b': toggleMarkfunction toggleMark({ type, attrs, removeWhenPresent, enterInlineAtoms, }: ToggleMarkOptions): Command
Returns a command that toggles the given mark with the given attributes.
@paramoptions@public
({ typeToggleMarkOptions.type: string | MarkType
The mark type to toggle.
: 'bold' }),
  'Mod-i': toggleMarkfunction toggleMark({ type, attrs, removeWhenPresent, enterInlineAtoms, }: ToggleMarkOptions): Command
Returns a command that toggles the given mark with the given attributes.
@paramoptions@public
({ typeToggleMarkOptions.type: string | MarkType
The mark type to toggle.
: 'italic' }),
  'Mod-u': toggleMarkfunction toggleMark({ type, attrs, removeWhenPresent, enterInlineAtoms, }: ToggleMarkOptions): Command
Returns a command that toggles the given mark with the given attributes.
@paramoptions@public
({ typeToggleMarkOptions.type: string | MarkType
The mark type to toggle.
: 'underline' }),
})

Every framework integration also exposes a useKeymap hook for binding keys conditionally (see the React page).

See also

Section titled “See also”