Slash Commands

Type / at line start to open command menu.

Default Commands

Basic

Lists

Formatting

Advanced

Adding Custom Commands

import {
  RichTextEditor,
  type EditorPlugin,
  type SlashCommand,
} from '@/components/ui/editor'
import { Sparkles } from 'lucide-react'

const myCommand: SlashCommand = {
  name: 'Magic',
  description: 'Insert magic content',
  icon: Sparkles,
  aliases: ['magic', 'special'],
  group: 'custom',
  action: (editor) => {
    editor.chain().focus().insertContent('<p>✨ Magic!</p>').run()
  },
}

const myPlugin: EditorPlugin = {
  name: 'magic-plugin',
  slashCommands: [myCommand],
}

<RichTextEditor plugins={[myPlugin]} />

SlashCommand Interface

interface SlashCommand {
  name: string
  description: string
  icon: LucideIcon
  aliases?: string[]
  group: 'basic' | 'lists' | 'formatting' | 'advanced' | 'media' | 'custom'
  action: (editor: Editor, context?: EditorActionContext) => void
}

Command Groups (by priority)

Working with Commands

import {
  defaultSlashCommands,
  filterCommands,
  groupCommands,
  commandGroups,
} from '@/components/ui/editor'

// Get all default commands
const commands = defaultSlashCommands

// Filter by query
const filtered = filterCommands(commands, 'head')

// Group by category
const grouped = groupCommands(commands) // Map<GroupInfo, SlashCommand[]>

// Get group definitions
const groups = commandGroups // [{id, label, priority}, ...]

EditorActionContext

For commands needing UI (like link popover):

const linkCommand: SlashCommand = {
  name: 'Link',
  icon: Link,
  group: 'formatting',
  action: (editor, context) => {
    context?.openLinkPopover()
  },
}