āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/udecode/plate/(plugins)/(functionality)/(combobox)/slash-command ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
title: Slash Command docs:
/ characterThe fastest way to add slash command functionality is with the SlashKit, which includes pre-configured SlashPlugin and SlashInputPlugin along with their Plate UI components.
SlashInputElement: Renders the slash command combobox with predefined optionsimport { createPlateEditor } from 'platejs/react';
import { SlashKit } from '@/components/editor/plugins/slash-kit';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
...SlashKit,
],
});
npm install @platejs/slash-command
import { SlashPlugin, SlashInputPlugin } from '@platejs/slash-command/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
SlashPlugin,
SlashInputPlugin,
],
});
import { SlashPlugin, SlashInputPlugin } from '@platejs/slash-command/react';
import { createPlateEditor } from 'platejs/react';
import { SlashInputElement } from '@/components/ui/slash-node';
import { KEYS } from 'platejs';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
SlashPlugin.configure({
options: {
trigger: '/',
triggerPreviousCharPattern: /^\s?$/,
triggerQuery: (editor) =>
!editor.api.some({
match: { type: editor.getType(KEYS.codeBlock) },
}),
},
}),
SlashInputPlugin.withComponent(SlashInputElement),
],
});
options.trigger: Character that triggers the slash command combobox (default: /)options.triggerPreviousCharPattern: RegExp pattern for character before triggeroptions.triggerQuery: Function to determine when slash commands should be enabledwithComponent: Assigns the UI component for the slash command interfaceHow to use slash commands:
/ anywhere in your document to open the slash menuAvailable options include:
Plugin for slash command functionality. Extends TriggerComboboxPluginOptions.
<API name="SlashPlugin"> <APIOptions> <APIItem name="trigger" type="string" optional> Character that triggers slash command combobox. - **Default:** `'/'` </APIItem> <APIItem name="triggerPreviousCharPattern" type="RegExp" optional> RegExp to match character before trigger. - **Default:** `/^\s?$/` </APIItem> <APIItem name="createComboboxInput" type="() => TComboboxInputElement" optional> Function to create combobox input element. - **Default:** ```tsx () => ({ children: [{ text: '' }], type: KEYS.slashInput, }); ``` </APIItem> <APIItem name="triggerQuery" type="(editor: PlateEditor) => boolean" optional> Function to determine when slash commands should be enabled. Useful for disabling in certain contexts like code blocks. </APIItem> </APIOptions> </API>Handles the input behavior for slash command insertion.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā