Docs
Slash Command

Slash Command

Slash command menu for quick insertion of various content types.

Slash Input ElementSlash Input Element

Slash Menu

The slash menu provides quick access to various formatting options and content types.
How to use the slash menu:
  • Type '/' anywhere in your document to open the slash menu.
  • Start typing to filter options or use arrow keys to navigate.
  • Press Enter or click to select an option.
  • Press Escape to close the menu without selecting.
Available options include:
  • Headings: Heading 1, Heading 2, Heading 3
  • Lists: Bulleted list, Numbered list
  • Inline Elements: Date

Features

  • Quick access to various editor commands
  • Keyboard navigation and filtering

Installation

npm install @udecode/plate-slash-command

Usage

import { SlashPlugin, SlashInputPlugin } from '@udecode/plate-slash-command/react';
const plugins = [
  // ...otherPlugins,
  SlashPlugin,
];
const components = {
  // ...otherComponents,
  [SlashInputPlugin.key]: SlashInputElement,
};

How to use:

  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:

  • Headings
  • Lists

Examples

Plate UI

Refer to the preview above.

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

Extends TriggerComboboxPlugin

Options

Collapse all

    Function to create the combobox input element.

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

    The character that triggers the slash command combobox.

    • Default: '/'

    Regular expression to match the character before the trigger.

    • Default: /^\s?$/

SlashInputPlugin

Plugin for slash input functionality.

Media PlaceholderTable of Contents