Slash Command

ComboboxSlash Input ElementSlash Input Element
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

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

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.