Commands

Commands are the way to manipulate the editor content in Tiptap. They provide a fluent API for content manipulation.

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

Show properties

parseOptions · ParseOptions · default: "{}"

Options for parsing the content.

errorOnInvalidContent · boolean

Whether to throw an error if content is invalid.

emitUpdate · boolean · default: "true"

Whether to emit an update event.

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

Show properties

parseOptions · ParseOptions

Options for parsing the content.

updateSelection · boolean · default: "true"

Whether to update the selection after inserting.

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')
}