Emoji

PreviousNext
ComboboxEmoji Input ElementEmoji Toolbar Button
Loading...

Features

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

Kit Usage

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.

Add Kit

import { createPlateEditor } from 'platejs/react';
import { EmojiKit } from '@/components/editor/plugins/emoji-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...EmojiKit,
  ],
});

Manual Usage

Installation

pnpm add @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.

Plugins

EmojiPlugin

Plugin for emoji functionality. Extends TriggerComboboxPluginOptions.

Options

  • data optional EmojiMartData

    The emoji data from @emoji-mart/data package.

    • Default: Built-in emoji library

  • createEmojiNode optional (emoji: Emoji) => Descendant

    Function to specify the node inserted when an emoji is selected.

    • Default: Inserts a text node with the emoji Unicode character

  • trigger optional string

    Character that triggers the emoji combobox.

    • Default: ':'

  • triggerPreviousCharPattern optional RegExp

    Pattern to match the character before trigger.

    • Default: /^\s?$/

  • createComboboxInput optional () => TElement

    Function to create the input element when trigger is activated.

EmojiInputPlugin

Handles the input behavior for emoji insertion.

Emoji斜杠命令