║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Emoji docs:

• route: /docs/combobox title: Combobox
• route: /docs/components/emoji-node title: Emoji Input Element
• route: /docs/components/emoji-dropdown-menu title: Emoji Toolbar Button

---

<ComponentPreview name="emoji-demo" /> <PackageInfo>

Features

• Insert emojis inline with autocomplete suggestions
• Triggered by : character followed by emoji name (e.g., :apple: 🍎)
• Customizable emoji data source and rendering

</PackageInfo>

Kit Usage

<Steps>

Installation

The fastest way to add emoji functionality is with the EmojiKit, which includes pre-configured EmojiPlugin and EmojiInputPlugin along with their Plate UI components.

<ComponentSource name="emoji-kit" />

• EmojiInputElement: Renders the emoji input combobox

Add Kit

import { createPlateEditor } from 'platejs/react';
import { EmojiKit } from '@/components/editor/plugins/emoji-kit';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...EmojiKit,
  ],
});

</Steps>

Manual Usage

<Steps>

Installation

npm install @platejs/emoji @emoji-mart/data

Add Plugins

import { EmojiPlugin, EmojiInputPlugin } from '@platejs/emoji/react';
import { createPlateEditor } from 'platejs/react';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    EmojiPlugin,
    EmojiInputPlugin,
  ],
});

Configure Plugins

import { EmojiPlugin, EmojiInputPlugin } from '@platejs/emoji/react';
import { createPlateEditor } from 'platejs/react';
import { EmojiInputElement } from '@/components/ui/emoji-node';
import emojiMartData from '@emoji-mart/data';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    EmojiPlugin.configure({
      options: {
        data: emojiMartData,
        trigger: ':',
        triggerPreviousCharPattern: /^\s?$/,
        createEmojiNode: (emoji) => ({ text: emoji.skins[0].native }),
      },
    }),
    EmojiInputPlugin.withComponent(EmojiInputElement),
  ],
});

• options.data: Emoji data from @emoji-mart/data package
• options.trigger: Character that triggers the emoji combobox (default: :)
• options.triggerPreviousCharPattern: RegExp pattern for character before trigger
• options.createEmojiNode: Function to create the emoji node when selected. Default inserts Unicode character as text
• withComponent: Assigns the UI component for the emoji input combobox

Add Toolbar Button

You can add EmojiToolbarButton to your Toolbar to insert emojis.

</Steps>

Plugins

EmojiPlugin

Plugin for emoji functionality. Extends TriggerComboboxPluginOptions.

<API name="EmojiPlugin"> <APIOptions> <APIItem name="data" type="EmojiMartData" optional> The emoji data from @emoji-mart/data package. - **Default:** Built-in emoji library </APIItem> <APIItem name="createEmojiNode" type="(emoji: Emoji) => Descendant" optional> Function to specify the node inserted when an emoji is selected. - **Default:** Inserts a text node with the emoji Unicode character </APIItem> <APIItem name="trigger" type="string" optional> Character that triggers the emoji combobox. - **Default:** `':'` </APIItem> <APIItem name="triggerPreviousCharPattern" type="RegExp" optional> Pattern to match the character before trigger. - **Default:** `/^\s?$/` </APIItem> <APIItem name="createComboboxInput" type="() => TElement" optional> Function to create the input element when trigger is activated. </APIItem> </APIOptions> </API>

EmojiInputPlugin

Handles the input behavior for emoji insertion.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║