โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/udecode/plate/(plugins)/(functionality)/(combobox)/emoji.cn โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
title: Emoji docs:
:ๅญ็ฌฆๅ่ท่กจๆ
ๅ็งฐ่งฆๅ๏ผไพๅฆ:apple: ๐๏ผๆๅฟซๆท็ๆทปๅ ่กจๆ
ๅ่ฝๆนๅผๆฏไฝฟ็จEmojiKit๏ผๅฎๅ
ๅซ้ข้
็ฝฎ็EmojiPluginๅEmojiInputPluginไปฅๅๅฎไปฌ็Plate UI็ปไปถใ
EmojiInputElement: ๆธฒๆ่กจๆ
่พๅ
ฅ็ปๅๆกimport { createPlateEditor } from 'platejs/react';
import { EmojiKit } from '@/components/editor/plugins/emoji-kit';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
...EmojiKit,
],
});
npm install @platejs/emoji @emoji-mart/data
import { EmojiPlugin, EmojiInputPlugin } from '@platejs/emoji/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
EmojiPlugin,
EmojiInputPlugin,
],
});
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: [
// ...ๅ
ถไปๆไปถ,
EmojiPlugin.configure({
options: {
data: emojiMartData,
trigger: ':',
triggerPreviousCharPattern: /^\s?$/,
createEmojiNode: (emoji) => ({ text: emoji.skins[0].native }),
},
}),
EmojiInputPlugin.withComponent(EmojiInputElement),
],
});
options.data: ๆฅ่ช@emoji-mart/dataๅ
็่กจๆ
ๆฐๆฎoptions.trigger: ่งฆๅ่กจๆ
็ปๅๆก็ๅญ็ฌฆ๏ผ้ป่ฎค๏ผ:๏ผoptions.triggerPreviousCharPattern: ๅน้
่งฆๅๅญ็ฌฆๅไธไธชๅญ็ฌฆ็ๆญฃๅ่กจ่พพๅผoptions.createEmojiNode: ้ๆฉ่กจๆ
ๆถๅๅปบ่กจๆ
่็น็ๅฝๆฐใ้ป่ฎคๆๅ
ฅUnicodeๅญ็ฌฆไฝไธบๆๆฌwithComponent: ไธบ่กจๆ
่พๅ
ฅ็ปๅๆกๅ้
UI็ปไปถๆจๅฏไปฅๅจๅทฅๅ
ทๆ ไธญๆทปๅ EmojiToolbarButtonๆฅๆๅ
ฅ่กจๆ
็ฌฆๅทใ
ๆไพ่กจๆ ๅ่ฝ็ๆ ธๅฟๆไปถใๆฉๅฑ่ชTriggerComboboxPluginOptionsใ
<API name="EmojiPlugin"> <APIOptions> <APIItem name="data" type="EmojiMartData" optional> ๆฅ่ช@emoji-mart/dataๅ ็่กจๆ ๆฐๆฎใ - **้ป่ฎคๅผ:** ๅ ็ฝฎ่กจๆ ๅบ </APIItem> <APIItem name="createEmojiNode" type="(emoji: Emoji) => Descendant" optional> ๆๅฎ้ๆฉ่กจๆ ๆถๆๅ ฅ่็น็ๅฝๆฐใ - **้ป่ฎค่กไธบ:** ๆๅ ฅๅ ๅซ่กจๆ Unicodeๅญ็ฌฆ็ๆๆฌ่็น </APIItem> <APIItem name="trigger" type="string" optional> ่งฆๅ่กจๆ ็ปๅๆก็ๅญ็ฌฆใ - **้ป่ฎคๅผ:** `':'` </APIItem> <APIItem name="triggerPreviousCharPattern" type="RegExp" optional> ๅน้ ่งฆๅๅญ็ฌฆๅไธไธชๅญ็ฌฆ็ๆจกๅผใ - **้ป่ฎคๅผ:** `/^\s?$/` </APIItem> <APIItem name="createComboboxInput" type="() => TElement" optional> ๅๅปบ่งฆๅๆฟๆดปๆถ่พๅ ฅๅ ็ด ็ๅฝๆฐใ </APIItem> </APIOptions> </API>ๅค็่กจๆ ๆๅ ฅ็่พๅ ฅ่กไธบใ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ