Emoji

PreviousNext
ComboboxEmoji Input ElementEmoji Toolbar Button
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

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.

'use client';
 
import emojiMartData from '@emoji-mart/data';
import { EmojiInputPlugin, EmojiPlugin } from '@platejs/emoji/react';
 
import { EmojiInputElement } from '@/components/ui/emoji-node';
 
export const EmojiKit = [
  EmojiPlugin.configure({
    options: { data: emojiMartData as any },
  }),
  EmojiInputPlugin.withComponent(EmojiInputElement),
];

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

Collapse all

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

    • Default: Built-in emoji library

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

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

    Character that triggers the emoji combobox.

    • Default: ':'

    Pattern to match the character before trigger.

    • Default: /^\s?$/

    Function to create the input element when trigger is activated.

EmojiInputPlugin

Handles the input behavior for emoji insertion.

CaptionMention