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.