Skip to main content

Emoji

The emoji plugin is using the combobox plugin.

The Emoji plugin enables users to effortlessly insert emojis into their text, enhancing the user experience by providing a simple and convenient way to add visual expression to content.

Demo#

To use the Emoji plugin, click the emoji icon on the toolbar or use the shortcut ":", followed by the emoji name, such as 🍎 🍎. Autocomplete suggestions will appear as you type, and you can select the desired emoji from the list.

import React from 'react';
import { EmojiEmotions } from '@styled-icons/material/EmojiEmotions';
import {
  createComboboxPlugin,
  createEmojiPlugin,
  EmojiToolbarDropdown,
  KEY_EMOJI,
  Plate,
  PlateProvider,
} from '@udecode/plate';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { emojiPlugin } from './emoji/emojiPlugin';
import { emojiValue } from './emoji/emojiValue';
import { Toolbar } from './toolbar/Toolbar';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const plugins = createMyPlugins(
  [
    ...basicNodesPlugins,
    createComboboxPlugin(),
    createEmojiPlugin(emojiPlugin),
  ],
  {
    components: plateUI,
  }
);

export default () => (
  <PlateProvider<MyValue>
    plugins={plugins}
    initialValue={emojiValue}
    onChange={(e) => console.info(e)}
  >
    <Toolbar>
      <EmojiToolbarDropdown pluginKey={KEY_EMOJI} icon={<EmojiEmotions />} />
    </Toolbar>

    <Plate<MyValue> editableProps={editableProps} />
  <

Installation#

Follow these steps to integrate the emoji plugin into your Plate editor:

  1. Install the required packages:
npm install @udecode/plate
# or
npm install @udecode/plate-combobox
npm install @udecode/plate-emoji
npm install @udecode/plate-ui-combobox
npm install @udecode/plate-ui-emoji
  1. Import the plugin and add it to your plugin list:
import { createComboboxPlugin, createEmojiPlugin } from '@udecode/plate';
const plugins = createPlugins([
// ...otherPlugins,
createComboboxPlugin(),
createEmojiPlugin(),
], {
components: createPlateUI(),
});

Options#

interface EmojiPlugin<TData extends EmojiItemData = EmojiItemData> {
trigger?: string;
createEmoji?: CreateEmoji<TData>;
emojiTriggeringController?: IEmojiTriggeringController;
id?: string;
}

Source Code#

Edit this page