Features

Commands (Slash Menu)

Create a Notion-like slash menu

Pilot provides a Commands component that allows you to create a Notion-like slash menu.

It supports:

  • Keyboard navigation
  • Custom UI
  • Custom commands
  • Filtering by the current editor state
Try it
The CommandExtension will automatically be registered when using the Commands component in your app.

Usage

The Commands component accepts a commands prop, which is an array of commands. And exposes a default slot that exposes the following properties:

  • editor: the editor instance
  • commands: the commands array
  • selectedIndex: the index of the selected command
  • selectItem: the function to select an item by index

Using these, you can create your custom UI for displaying your commands, selecting them, and changing the UI for the selected command.

Commands Array

The Commands component accepts a commands prop, which is an array of commands.

Each command is an object that contains the following properties:

  • name: The name of the command.
  • label: The label of the command.
  • icon: The icon of the command.
  • command: The command to execute.

Built-in Commands

Pilot comes with a few built-in commands.

Configuration