Notion-style UX (v2.1)

Three opt-in features turn the editor into a Notion-class writing surface — slash commands, markdown shortcuts, and a floating bubble toolbar. No plugins, no extra setup.

Quick enable

<RichTextEditor
  value={html}
  onChange={setHtml}
  slashMenu
  markdownShortcuts
  bubbleToolbar
  placeholder="Type / for commands, or **bold**, # heading…"
/>

1. Slash command menu

Type / anywhere and a filterable command popup appears. Arrow keys to navigate, Enter or Tab to insert, Esc to dismiss.

Defaults included

• Heading 1 / 2 / 3
• Paragraph, blockquote, divider
• Bullet list, numbered list, task list
• Code block, table

Custom commands

import { DEFAULT_SLASH_COMMANDS, type SlashCommand } from "@tolipovjs/rich-text"
import { Sparkles } from "lucide-react"

const aiCommand: SlashCommand = {
  id: "ai",
  label: "AI sparkle",
  description: "Insert a sparkly placeholder",
  icon: <Sparkles size={16} />,
  keywords: ["ai", "magic"],
  run: () => editorRef.current?.insertHTML("<p><em>✨ AI ✨</em></p>"),
}

<RichTextEditor
  slashMenu={[aiCommand, ...DEFAULT_SLASH_COMMANDS]}
/>

Disable defaults entirely

<RichTextEditor slashMenu={[myOnlyCommand]} />
<RichTextEditor slashMenu={false} />   // turn off completely

2. Markdown shortcuts

Type the shortcut, press space (or enter for blocks), and the editor transforms it in-place. Caret stays where you’d expect.

Inline patterns

Block patterns (start of line)

3. Bubble (floating) toolbar

Select any text and a compact toolbar floats above the selection — like Medium, Notion, or Linear. Hidden otherwise; never gets in your way.

Default items

Bold · Italic · Underline · | · Link · Quote

Custom items

<RichTextEditor
  bubbleToolbar={["bold", "italic", "code", "|", "link"]}
/>

Allowed IDs: bold, italic, underline, strike, code, link, quote, and | as a separator.

Disable

<RichTextEditor bubbleToolbar={false} />

Try it live

Toggle each feature in the playground or open the full Notion-style example.

Next steps

• API reference — all props in one place
• Toolbar — built-in IDs and custom buttons
• Examples — copy-paste recipes for blogs, comments, email, notes