A slash command extension for the Tiptap editor in React applications.
- Easy integration with Tiptap editor
- Customizable command items
- Typescript support
To use it, type / and after selecting a command with the up and down keys, type / again to execute it.
Install the package using npm:
npm install tiptap-slash-react
- Import the necessary components:
For Typescript and Javascript
import { SlashSuggestion, filterCommandItems } from "tiptap-slash-react";
- Add the extension to your Tiptap editor:
For Typescript
const editor = useEditor({
extensions: [
SlashSuggestion.configure({
suggestion: {
items: ({ query }: { query: string }) => filterCommandItems(query),
},
}),
],
});
For Javascript
const editor = useEditor({
extensions: [
SlashSuggestion.configure({
suggestion: {
items: ({ query }) => filterCommandItems(query),
},
}),
],
});
You can create custom command items to tailor the slash commands to your needs:
For Javascript
const createHeadingCommand =
(level) =>
({ editor, range }) => {
editor
.chain()
.focus()
.deleteRange(range)
.setNode("heading", { level })
.run();
};
const customCommandItems = [
{ title: "Heading 1", icon: Heading1, command: createHeadingCommand(1) },
{ title: "Heading 2", icon: Heading2, command: createHeadingCommand(2) },
{ title: "Heading 3", icon: Heading3, command: createHeadingCommand(3) },
];
const editor = useEditor({
extensions: [
SlashSuggestion.configure({
commandItems: customCommandItems,
suggestion: {
items: ({ query }) => filterCommandItems(query, customCommandItems),
},
}),
],
});
For Typescript:
import {
SlashSuggestion,
filterCommandItems,
CustomCommandItem,
} from "tiptap-slash-react";
const createHeadingCommand =
(level: number) =>
({ editor, range }: { editor: Editor; range: Range }) => {
editor
.chain()
.focus()
.deleteRange(range)
.setNode("heading", { level })
.run();
};
const customCommandItems: CustomCommandItem[] = [
{ title: "Heading 1", icon: Heading1, command: createHeadingCommand(1) },
{ title: "Heading 2", icon: Heading2, command: createHeadingCommand(2) },
{ title: "Heading 3", icon: Heading3, command: createHeadingCommand(3) },
];
const editor = useEditor({
extensions: [
SlashSuggestion.configure({
commandItems: customCommandItems,
suggestion: {
items: ({ query }: { query: string }) =>
filterCommandItems(query, customCommandItems),
},
}),
],
});
To style the slash command menu, add the following CSS to your project and customize as needed:
.slash-menu {
position: relative;
border-radius: 0.5rem;
background: white;
color: #333;
overflow: hidden;
font-size: 0.9rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
max-height: 300px;
overflow-y: auto;
padding: 0.5rem;
}
.slash-menu__item {
display: flex;
align-items: center;
width: 100%;
text-align: left;
background: transparent;
border: none;
padding: 0.5rem;
border-radius: 0.25rem;
transition: background-color 0.2s ease;
}
.slash-menu__item-icon {
width: 20px;
height: 20px;
margin-right: 12px;
color: #6b7280;
}
.slash-menu__item-title {
font-size: 14px;
font-weight: 500;
}
.slash-menu__item--disabled {
opacity: 0.5;
pointer-events: none;
}
.slash-menu__item--selected,
.slash-menu__item:hover {
color: #4f46e5;
background: rgba(79, 70, 229, 0.1);
}
This project is licensed under the MIT License - see the LICENSE file for details.