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
Name | Type | Default | Description |
---|---|---|---|
editor | Editor | null | null | The Tiptap editor instance |
floatingOptions | object | - | Options for floating UI |
selector | string | 'tiptap-emoji-dropdown-menu' | Selector for the target |
char | string | ':' | 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