Skip to main content

Emoji

The emoji plugin is using the combobox plugin.

Installation#

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

Usage#

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} />
  <

Options#

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

Source Code#

Edit this page