Slash Command

Slash command menu for quick insertion of various content types.

ComboboxSlash Input ElementSlash Input Element
Loading...

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

Get the code ->

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.

Single LineSoft Break