Command palette

The command palette is a quick menu for inserting blocks and changing format without leaving the keyboard. Type a slash (/) in the content — the palette opens at the caret. Pick a command with the keyboard or mouse.

It is the same actions you get from the Add (+) menu and Format menu, collected in one searchable list.

Open the palette#

1. Click in editable content (paragraph, heading, list item, …).
2. Type / anywhere in the text.

The palette opens next to the caret. Two sections appear:

Which items appear depends on your addbar and format settings and on the current block context (same rules as the toolbar menus).

Navigate with the keyboard#

After you pick a command, Redactor removes the / and any filter text you typed, then runs the action (insert block or apply format).

Filter commands#

Keep typing after / to narrow the list. The palette matches your query against command names and titles.

/hea        → Heading, …
/todo       → Todo
/table      → Table

Filtering is case-insensitive. If nothing matches, the palette closes.

When the palette does not open#

• Inside a link — triggers are disabled when the caret is inside <a>…</a>.
• No matching items — empty filter results close the panel.
• Custom addbar/format — if an item is hidden from addbar or format, it will not appear in the palette either.

Other trigger characters#

The palette UI is reused for plugin triggers. By default:

Example: type : and start typing to filter emoji groups; type @ and a name to load mentions from your server (Mention plugin).

Plugins register their own character via app.triggers.register().

Disable or replace the slash trigger#

Unregister the default slash:

const app = Redactor('#entry');

app.triggers.unregister('/');

Register a different character for the same palette:

app.triggers.register('.', {
    target: 'commandPalette',
    panel: 'commandPalette'
});

Custom trigger (plugins and integrations)#

Plugins can open the command palette with a loader that fetches items dynamically:

this.app.triggers.register('@', {
    target: 'commandPalette',
    loader: 'mention.loadItems',
    replacer: 'mention.formatReplacement',
    onPick: 'mention.onInsert',
    panel: 'mention',
    minFilter: 1
});

Close an active trigger session programmatically:

app.triggers.deactivate();

API#

// Build palette items manually (e.g. custom UI)
const { items, size } = app.commandPalette.buildItems({ filter: 'head' });
if (size) app.commandPalette.showPanel(items);

See commandPalette and triggers.