Add an emoji dropdown menu

Install

npx @tiptap/cli add emoji-dropdown-menu

Usage

import { EmojiDropdownMenu } from '@/components/tiptap-ui/emoji-dropdown-menu'
import { useEditor, EditorContent } from '@tiptap/react'
import { Emoji } from '@tiptap-pro/extension-emoji'

export default function MyEditor() {
  const editor = useEditor({
    extensions: [
      // other extensions
      Emoji.configure({
        // emoji configuration
      }),
    ],
  })

  return (
    <div>
      <EditorContent editor={editor} />
      <EmojiDropdownMenu editor={editor} />
    </div>
  )
}

Props

NameTypeDefaultDescription
editorEditor | nullnullThe Tiptap editor instance
floatingOptionsobject-Options for floating UI
selectorstring'tiptap-emoji-dropdown-menu'Selector for the target
charstring':'Emoji character

Requirements

Used reference components

  • suggestion-menu (ui)
  • emoji-menu (ui)

Open source feature(s)

  • @tiptap/react

Pro feature(s)

  • @tiptap-pro/extension-emoji