Slash commands

Configure the "/" command menu and add your own commands.

SlashCommand opens a searchable command menu when you type / at the start of an empty paragraph (also inside columns). Use ↑ ↓ to navigate, Enter to run and Esc to close.

Preset groups

GroupCommands (when the extension is registered)
formatParagraph, headings 1–3, bullet and numbered lists, code block, blockquote, horizontal rule, link
insertImage, table, video, task list, two / three / four columns
othersEmbed services (requires Iframe)

Customising

SlashCommand.configure({
  getCommandGroups: ({ presetGroups, editor, lang }) => {
    // Hide a group
    const groups = presetGroups.filter(group => group.name !== 'others')

    // Add commands to an existing group
    groups.find(group => group.name === 'insert')?.commands.push({
      name: 'callout',
      label: lang === 'fr' ? 'Encadré' : 'Callout',
      aliases: ['note', 'info'],
      iconName: 'Quote',
      description: 'Highlighted note',
      action: ({ editor, range }) =>
        editor.chain().focus().deleteRange(range).insertContent('<blockquote><p>💡 </p></blockquote>').run(),
    })

    return groups
  },
})

Command shape

interface Command {
  name: string
  label: string
  description?: string
  aliases?: string[]                         // extra search terms
  iconName?: IconName                        // built-in icon
  iconUrl?: string                           // or an image
  shouldBeHidden?: (editor: Editor) => boolean
  action: ({ editor, range }) => void        // delete `range` to remove the "/query" text
}

Search matches the label and every alias, case-insensitively.

From plugins

Plugins can add commands without configuring SlashCommand — see slashCommands.

Custom extensions
Write your own extension with a toolbar button, or extend a built-in one.
Editor instance
Working with the underlying Tiptap editor — commands, content and events.