Add a button that triggers editor inputs

A button for triggering specific editor inputs like emoji or mentions.

Install

npx @tiptap/cli add trigger-button

Usage

import { TriggerButton } from '@/components/tiptap-ui/trigger-button'
import { useEditor, EditorContent } from '@tiptap/react'

export default function MyEditor() {
  const editor = useEditor({
    // editor configuration
  })

  return (
    <div>
      <div className="toolbar">
        <TriggerButton editor={editor} type="mention" />
        <TriggerButton editor={editor} type="emoji" />
        <TriggerButton editor={editor} type="slash" />
      </div>
      <EditorContent editor={editor} />
    </div>
  )
}

Props

Name	Type	Default	Description
editor	Editor \| null	null	The Tiptap editor instance
type	'mention' \| 'emoji' \| 'slash'	required	The type of trigger to use
text	string	-	Text to display alongside the icon

Requirements

Used reference components

use-tiptap-editor (hook)
at-sign-icon (icon)
plus-icon (icon)
smile-plus-icon (icon)
button (primitive)