Loading...
Files
components/demo.tsx
'use client';
import * as React from 'react';
import { Plate, usePlateEditor } from 'platejs/react';
import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';
import { DEMO_VALUES } from './values/demo-values';
export default function Demo({ id }: { id: string }) {
const editor = usePlateEditor({
plugins: EditorKit,
value: DEMO_VALUES[id],
});
return (
<Plate editor={editor}>
<EditorContainer variant="demo">
<Editor />
</EditorContainer>
</Plate>
);
}
Kit Usage
Installation
The fastest way to add slash command functionality is with the SlashKit
, which includes pre-configured SlashPlugin
and SlashInputPlugin
along with their Plate UI components.
'use client';
import { SlashInputPlugin, SlashPlugin } from '@platejs/slash-command/react';
import { KEYS } from 'platejs';
import { SlashInputElement } from '@/components/ui/slash-node';
export const SlashKit = [
SlashPlugin.configure({
options: {
triggerQuery: (editor) =>
!editor.api.some({
match: { type: editor.getType(KEYS.codeBlock) },
}),
},
}),
SlashInputPlugin.withComponent(SlashInputElement),
];
SlashInputElement
: Renders the slash command combobox with predefined options
Add Kit
import { createPlateEditor } from 'platejs/react';
import { SlashKit } from '@/components/editor/plugins/slash-kit';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
...SlashKit,
],
});
Manual Usage
Installation
pnpm add @platejs/slash-command
Add Plugins
import { SlashPlugin, SlashInputPlugin } from '@platejs/slash-command/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
SlashPlugin,
SlashInputPlugin,
],
});
Configure Plugins
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 interface
Usage
How to use slash commands:
- Type
/
anywhere in your document to open the slash menu - Start typing to filter options or use arrow keys to navigate
- Press Enter or click to select an option
- Press Escape to close the menu without selecting
Available options include:
- Text blocks (paragraphs, headings)
- Lists (bulleted, numbered, to-do)
- Advanced blocks (tables, code blocks, callouts)
- Inline elements (dates, equations)
Use keywords to quickly find options. For example, type '/ul' for Bulleted List or '/h1' for Heading 1.
Plate Plus
- Extended set of slash menu options like "Ask AI"
- Trigger slash menu by click the + button on the left gutter
- Item groups
- Beautifully crafted UI
Plugins
SlashPlugin
Plugin for slash command functionality. Extends TriggerComboboxPluginOptions.
- Default:
'/'
- Default:
/^\s?$/
- Default:
Character that triggers slash command combobox.
RegExp to match character before trigger.
Function to create combobox input element.
() => ({
children: [{ text: '' }],
type: KEYS.slashInput,
});
Function to determine when slash commands should be enabled. Useful for disabling in certain contexts like code blocks.
SlashInputPlugin
Handles the input behavior for slash command insertion.