Slash Command

PreviousNext

Slash command menu for quick insertion of various content types.

PlusComboboxSlash Nodes
Loading…

Features

  • Quick access to various editor commands
  • Triggered by / character
  • Keyboard navigation and filtering
  • Customizable command groups and options

Kit Usage

Installation

The fastest way to add slash command functionality is with the SlashKit, which includes pre-configured SlashPlugin and SlashInputPlugin along with their Plate UI components.

'use client';
 
import { SlashInputPlugin, SlashPlugin } from '@platejs/slash-command/react';
import { type SlateEditor, KEYS } from 'platejs';
 
import { SlashInputElement } from '@/components/ui/slash-node';
 
export const SlashKit = [
  SlashPlugin.configure({
    options: {
      triggerQuery: (editor: SlateEditor) =>
        !editor.api.some({
          match: { type: editor.getType(KEYS.codeBlock) },
        }),
    },
  }),
  SlashInputPlugin.withComponent(SlashInputElement),
];
'use client';
 
import { SlashInputPlugin, SlashPlugin } from '@platejs/slash-command/react';
import { type SlateEditor, KEYS } from 'platejs';
 
import { SlashInputElement } from '@/components/ui/slash-node';
 
export const SlashKit = [
  SlashPlugin.configure({
    options: {
      triggerQuery: (editor: SlateEditor) =>
        !editor.api.some({
          match: { type: editor.getType(KEYS.codeBlock) },
        }),
    },
  }),
  SlashInputPlugin.withComponent(SlashInputElement),
];

Add Kit

import { createPlateEditor } from 'platejs/react';
import { SlashKit } from '@/components/editor/plugins/slash-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...SlashKit,
  ],
});
import { createPlateEditor } from 'platejs/react';
import { SlashKit } from '@/components/editor/plugins/slash-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...SlashKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/slash-command
pnpm add @platejs/slash-command

Add Plugins

import { SlashPlugin, SlashInputPlugin } from '@platejs/slash-command/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    SlashPlugin,
    SlashInputPlugin,
  ],
});
import { SlashPlugin, SlashInputPlugin } from '@platejs/slash-command/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    SlashPlugin,
    SlashInputPlugin,
  ],
});

Configure Plugins

import { SlashPlugin, SlashInputPlugin } from '@platejs/slash-command/react';
import { createPlateEditor } from 'platejs/react';
import { SlashInputElement } from '@/components/ui/slash-node';
import { KEYS } from 'platejs';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    SlashPlugin.configure({
      options: {
        trigger: '/',
        triggerPreviousCharPattern: /^\s?$/,
        triggerQuery: (editor) =>
          !editor.api.some({
            match: { type: editor.getType(KEYS.codeBlock) },
          }),
      },
    }),
    SlashInputPlugin.withComponent(SlashInputElement),
  ],
});
import { SlashPlugin, SlashInputPlugin } from '@platejs/slash-command/react';
import { createPlateEditor } from 'platejs/react';
import { SlashInputElement } from '@/components/ui/slash-node';
import { KEYS } from 'platejs';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    SlashPlugin.configure({
      options: {
        trigger: '/',
        triggerPreviousCharPattern: /^\s?$/,
        triggerQuery: (editor) =>
          !editor.api.some({
            match: { type: editor.getType(KEYS.codeBlock) },
          }),
      },
    }),
    SlashInputPlugin.withComponent(SlashInputElement),
  ],
});
  • options.trigger: Character that triggers the slash command combobox (default: /)
  • options.triggerPreviousCharPattern: RegExp pattern for character before trigger
  • options.triggerQuery: Function to determine when slash commands should be enabled
  • withComponent: Assigns the UI component for the slash command interface

Usage

How to use slash commands:

  1. Type / anywhere in your document to open the slash menu
  2. Start typing to filter options or use arrow keys to navigate
  3. Press Enter or click to select an option
  4. Press Escape to close the menu without selecting

Available options include:

  • Text blocks (paragraphs, headings)
  • Lists (bulleted, numbered, to-do)
  • Advanced blocks (tables, code blocks, callouts)
  • Inline elements (dates, equations)

Plate Plus

  • Extended set of slash menu options like "Ask AI"
  • Trigger slash menu by click the + button on the left gutter
  • Item groups
  • Beautifully crafted UI

Plugins

SlashPlugin

Plugin for slash command functionality. Extends TriggerComboboxPluginOptions.

Options

    Character that triggers slash command combobox.

    • Default: '/'

    RegExp to match character before trigger.

    • Default: /^\s?$/

    Function to create combobox input element.

    • Default:
    () => ({
  children: [{ text: '' }],
  type: KEYS.slashInput,
});
    () => ({
  children: [{ text: '' }],
  type: KEYS.slashInput,
});

    Function to determine when slash commands should be enabled. Useful for disabling in certain contexts like code blocks.

SlashInputPlugin

Handles the input behavior for slash command insertion.