Emoji Dropdown Menu

A fully accessible emoji dropdown menu for Tiptap editors. Provides intelligent emoji suggestions as you type with the : trigger character, offering seamless emoji insertion with keyboard navigation support.

Installation

Add the component via the Tiptap CLI:

npx @tiptap/cli@latest add emoji-dropdown-menu

Components

`<EmojiDropdownMenu />`

A prebuilt React component that provides emoji suggestions triggered by typing :.

Usage

import * as React from 'react'
import { EditorContent, EditorContext, useEditor } from '@tiptap/react'

// --- Tiptap Core Extensions ---
import { StarterKit } from '@tiptap/starter-kit'
import { Emoji, gitHubEmojis } from '@tiptap/extension-emoji'

// --- Tiptap UI ---
import { EmojiDropdownMenu } from '@/components/tiptap-ui/emoji-dropdown-menu'

// --- Tiptap Node ---
import '@/components/tiptap-node/code-block-node/code-block-node.scss'
import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export const EmojiDropdownMenuExample = () => {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [
      StarterKit,
      Emoji.configure({
        emojis: gitHubEmojis,
        forceFallbackImages: true,
      }),
    ],
    content: `
        <p>Try typing <code>:</code> to open the emoji dropdown menu.</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <EmojiDropdownMenu char=":" />
      <EditorContent editor={editor} />
    </EditorContext.Provider>
  )
}

Props

The EmojiDropdownMenu inherits all props from SuggestionMenuProps.