Skip to main content

​
Command System

Tiptap provides a command system that allows you to manipulate the editor content. Commands can be executed individually, chained together, or checked for availability.

​
Single Commands

Execute commands directly: 
editor.commands.focus()
editor.commands.toggleBold()
editor.commands.insertContent('<p>Hello!</p>')

​
Chained Commands

Chain multiple commands and execute them at once: 
editor
  .chain()
  .focus()
  .toggleBold()
  .insertContent('Hello')
  .run()

​
Can Commands

Check if a command can be executed without running it: 
if (editor.can().toggleBold()) {
  // Bold can be toggled
}

// Also works with chains
if (editor.can().chain().focus().toggleBold().run()) {
  // The entire chain can be executed
}

​
Content Commands

​
setContent()

Replace the whole document with new content. 
editor.commands.setContent(content: Content, options?: SetContentOptions): boolean
​
content
Content
required
The new content (HTML, JSON, or ProseMirror node).
​
options
SetContentOptions
Example 
editor.commands.setContent('<p>Example text</p>')

editor.commands.setContent({
  type: 'doc',
  content: [{
    type: 'paragraph',
    content: [{ type: 'text', text: 'Example' }]
  }]
})

​
insertContent()

Insert content at the current position. 
editor.commands.insertContent(value: Content, options?: InsertContentOptions): boolean
​
value
Content
required
The content to insert.
​
options
InsertContentOptions
Example 
editor.commands.insertContent('<p>New paragraph</p>')
editor.commands.insertContent({ type: 'paragraph', content: [{ type: 'text', text: 'Hello' }] })

​
insertContentAt()

Insert content at a specific position. 
editor.commands.insertContentAt(
  position: number | Range,
  value: Content,
  options?: InsertContentOptions
): boolean
​
position
number | Range
required
The position or range where to insert content.
​
value
Content
required
The content to insert.
Example 
editor.commands.insertContentAt(10, '<p>Inserted at position 10</p>')
editor.commands.insertContentAt({ from: 0, to: 5 }, 'Replacement')

​
clearContent()

Clear the entire document. 
editor.commands.clearContent(emitUpdate?: boolean): boolean
​
emitUpdate
boolean
default:"true"
Whether to emit an update event.
Example 
editor.commands.clearContent()

​
Selection Commands

​
focus()

Focus the editor at a specific position. 
editor.commands.focus(
  position?: FocusPosition,
  options?: { scrollIntoView?: boolean }
): boolean
​
position
FocusPosition
Where to focus: 'start', 'end', 'all', true, false, or a number.
​
options.scrollIntoView
boolean
default:"true"
Whether to scroll the focused position into view.
Example 
editor.commands.focus()
editor.commands.focus('start')
editor.commands.focus('end')
editor.commands.focus(32)
editor.commands.focus('all')

​
blur()

Remove focus from the editor. 
editor.commands.blur(): boolean
Example 
editor.commands.blur()

​
setTextSelection()

Set the text selection. 
editor.commands.setTextSelection(position: number | Range): boolean
​
position
number | Range
required
The position or range to select.
Example 
editor.commands.setTextSelection(10)
editor.commands.setTextSelection({ from: 5, to: 15 })

​
selectAll()

Select the entire document. 
editor.commands.selectAll(): boolean
Example 
editor.commands.selectAll()

​
selectParentNode()

Select the parent node. 
editor.commands.selectParentNode(): boolean
Example 
editor.commands.selectParentNode()

​
Mark Commands

​
setMark()

Apply a mark to the selection. 
editor.commands.setMark(
  typeOrName: string | MarkType,
  attributes?: Record<string, any>
): boolean
​
typeOrName
string | MarkType
required
The mark type or name.
​
attributes
Record<string, any>
Attributes to apply to the mark.
Example 
editor.commands.setMark('bold')
editor.commands.setMark('link', { href: 'https://example.com' })

​
toggleMark()

Toggle a mark on and off. 
editor.commands.toggleMark(
  typeOrName: string | MarkType,
  attributes?: Record<string, any>,
  options?: { extendEmptyMarkRange?: boolean }
): boolean
​
typeOrName
string | MarkType
required
The mark type or name.
​
attributes
Record<string, any>
Attributes of the mark.
​
options.extendEmptyMarkRange
boolean
default:"false"
Removes the mark even across the current selection.
Example 
editor.commands.toggleMark('bold')
editor.commands.toggleMark('highlight', { color: 'yellow' })

​
unsetMark()

Remove a mark from the selection. 
editor.commands.unsetMark(
  typeOrName: string | MarkType,
  options?: { extendEmptyMarkRange?: boolean }
): boolean
​
typeOrName
string | MarkType
required
The mark type or name.
​
options.extendEmptyMarkRange
boolean
default:"false"
Removes the mark even across the current selection.
Example 
editor.commands.unsetMark('bold')
editor.commands.unsetMark('link')

​
unsetAllMarks()

Remove all marks from the selection. 
editor.commands.unsetAllMarks(): boolean
Example 
editor.commands.unsetAllMarks()

​
Node Commands

​
setNode()

Change the type of a node. 
editor.commands.setNode(
  typeOrName: string | NodeType,
  attributes?: Record<string, any>
): boolean
​
typeOrName
string | NodeType
required
The node type or name.
​
attributes
Record<string, any>
Attributes to set on the node.
Example 
editor.commands.setNode('heading', { level: 2 })
editor.commands.setNode('paragraph')

​
toggleNode()

Toggle a node with another node. 
editor.commands.toggleNode(
  typeOrName: string | NodeType,
  toggleTypeOrName: string | NodeType,
  attributes?: Record<string, any>
): boolean
​
typeOrName
string | NodeType
required
The node type or name to toggle.
​
toggleTypeOrName
string | NodeType
required
The node type to toggle with.
​
attributes
Record<string, any>
Attributes for the node.
Example 
editor.commands.toggleNode('codeBlock', 'paragraph')

​
deleteNode()

Delete a node. 
editor.commands.deleteNode(typeOrName: string | NodeType): boolean
​
typeOrName
string | NodeType
required
The node type or name to delete.
Example 
editor.commands.deleteNode('image')

​
deleteCurrentNode()

Delete the currently selected node. 
editor.commands.deleteCurrentNode(): boolean
Example 
editor.commands.deleteCurrentNode()

​
List Commands

​
toggleList()

Toggle between a list and normal paragraphs. 
editor.commands.toggleList(
  listTypeOrName: string | NodeType,
  itemTypeOrName: string | NodeType
): boolean
​
listTypeOrName
string | NodeType
required
The list type (e.g., 'bulletList', 'orderedList').
​
itemTypeOrName
string | NodeType
required
The list item type (usually 'listItem').
Example 
editor.commands.toggleList('bulletList', 'listItem')
editor.commands.toggleList('orderedList', 'listItem')

​
sinkListItem()

Sink a list item (increase indent). 
editor.commands.sinkListItem(typeOrName: string | NodeType): boolean
​
typeOrName
string | NodeType
required
The list item type.
Example 
editor.commands.sinkListItem('listItem')

​
liftListItem()

Lift a list item (decrease indent). 
editor.commands.liftListItem(typeOrName: string | NodeType): boolean
​
typeOrName
string | NodeType
required
The list item type.
Example 
editor.commands.liftListItem('listItem')

​
splitListItem()

Split a list item at the current position. 
editor.commands.splitListItem(typeOrName: string | NodeType): boolean
​
typeOrName
string | NodeType
required
The list item type.
Example 
editor.commands.splitListItem('listItem')

​
Text Transformation Commands

​
deleteSelection()

Delete the current selection. 
editor.commands.deleteSelection(): boolean
Example 
editor.commands.deleteSelection()

​
deleteRange()

Delete content in a range. 
editor.commands.deleteRange(range: Range): boolean
​
range
Range
required
The range to delete.
Example 
editor.commands.deleteRange({ from: 5, to: 10 })

​
enter()

Trigger enter key behavior. 
editor.commands.enter(): boolean
Example 
editor.commands.enter()

​
Attribute Commands

​
updateAttributes()

Update attributes of a node or mark. 
editor.commands.updateAttributes(
  typeOrName: string | NodeType | MarkType,
  attributes: Record<string, any>
): boolean
​
typeOrName
string | NodeType | MarkType
required
The node or mark type or name.
​
attributes
Record<string, any>
required
The attributes to update.
Example 
editor.commands.updateAttributes('heading', { level: 3 })
editor.commands.updateAttributes('link', { href: 'https://new-url.com' })

​
resetAttributes()

Reset node or mark attributes to defaults. 
editor.commands.resetAttributes(
  typeOrName: string | NodeType | MarkType,
  attributes: string | string[]
): boolean
​
typeOrName
string | NodeType | MarkType
required
The node or mark type or name.
​
attributes
string | string[]
required
The attribute names to reset.
Example 
editor.commands.resetAttributes('textStyle', 'color')
editor.commands.resetAttributes('heading', ['level', 'textAlign'])

​
Utility Commands

​
scrollIntoView()

Scroll the current selection into view. 
editor.commands.scrollIntoView(): boolean
Example 
editor.commands.scrollIntoView()

​
setMeta()

Set transaction metadata. 
editor.commands.setMeta(key: string, value: any): boolean
​
key
string
required
The metadata key.
​
value
any
required
The metadata value.
Example 
editor.commands.setMeta('appendedTransaction', true)

​
Creating Custom Commands

You can create custom commands in extensions: 
import { Extension } from '@tiptap/core'

const CustomExtension = Extension.create({
  name: 'customExtension',

  addCommands() {
    return {
      // Simple command
      myCommand: () => ({ commands }) => {
        return commands.insertContent('Custom content!')
      },

      // Command with parameters
      insertCustomNode: (attrs) => ({ commands }) => {
        return commands.insertContent({
          type: 'customNode',
          attrs,
        })
      },

      // Complex command with transaction access
      complexCommand: () => ({ tr, state, dispatch }) => {
        if (!dispatch) return true

        const { from, to } = state.selection
        tr.insertText('Hello', from, to)

        return true
      },
    }
  },
})

// Usage
editor.commands.myCommand()
editor.commands.insertCustomNode({ id: '123' })
editor.chain().focus().myCommand().run()

​
Command Return Values

All commands return a boolean:
  • true - Command executed successfully
  • false - Command could not be executed (e.g., invalid state, not applicable)
const success = editor.commands.toggleBold()

if (success) {
  console.log('Bold toggled successfully')
} else {
  console.log('Could not toggle bold')
}