tiptap-slash-react

A slash command extension for the Tiptap editor in React applications.

Features

• 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.

Installation

Install the package using npm:

npm install tiptap-slash-react

Usage

Basic Setup

1. Import the necessary components:

For Typescript and Javascript

import { SlashSuggestion, filterCommandItems } from "tiptap-slash-react";

2. 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),
      },
    }),
  ],
});

Customizing Command Items

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),
      },
    }),
  ],
});

Styling

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);
}

License

This project is licensed under the MIT License - see the LICENSE file for details.