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.
#
DemoTo 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} /> <
#
InstallationFollow these steps to integrate the emoji plugin into your Plate editor:
- Install the required packages:
- npm
- Yarn
- Import the plugin and add it to your plugin list: