Getting Started

Installation

npm install tiptap-suggestmenu

Peer dependencies:

npm install @tiptap/core @tiptap/react @tiptap/suggestion @tiptap/pm fuse.js @base-ui/react

Quick Start

Add SuggestMenuExtension to your Tiptap editor, then render a <SuggestMenu> alongside it.

import { useEditor, EditorContent } from '@tiptap/react'
import { SuggestMenuExtension, SuggestMenu } from 'tiptap-suggestmenu'

const ITEMS = [
  { id: '1', label: 'Alice' },
  { id: '2', label: 'Bob' },
]

function Editor() {
  const editor = useEditor({
    extensions: [
      StarterKit,
      SuggestMenu.configure(),
    ],
  })

  return (
    <>
      <EditorContent editor={editor} />
      <SuggestMenu
        editor={editor}
        triggerCharacter="@"
        items={ITEMS}
        onSelect={({ editor, item }) => {
          editor.chain().focus().insertContent(item.label).run()
        }}
      >
        <SuggestMenu.Portal>
          <SuggestMenu.Positioner>
            <SuggestMenu.Popup>
              <SuggestMenu.List>
                <SuggestMenu.Empty>No results</SuggestMenu.Empty>
                {ITEMS.map(item => (
                  <SuggestMenu.Item key={item.id} item={item}>
                    {item.label}
                  </SuggestMenu.Item>
                ))}
              </SuggestMenu.List>
            </SuggestMenu.Popup>
          </SuggestMenu.Positioner>
        </SuggestMenu.Portal>
      </SuggestMenu>
    </>
  )
}