โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/udecode/plate/(plugins)/(elements)/mention.cn โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
title: ๆๅๅ่ฝ docs:
@๏ผๆๅฟซๆท็ๆทปๅ ๆๅๅ่ฝๆนๅผๆฏไฝฟ็จ MentionKit๏ผๅฎๅ
ๅซ้ข้
็ฝฎ็ MentionPlugin ๅ MentionInputPlugin ไปฅๅๅฎไปฌ็ Plate UI ็ปไปถใ
MentionElement: ๆธฒๆๆๅๅ
็ด MentionInputElement: ๆธฒๆๆๅ่พๅ
ฅ็ปๅๆกimport { createPlateEditor } from 'platejs/react';
import { MentionKit } from '@/components/editor/plugins/mention-kit';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
...MentionKit,
],
});
npm install @platejs/mention
import { MentionPlugin, MentionInputPlugin } from '@platejs/mention/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
MentionPlugin,
MentionInputPlugin,
],
});
import { MentionPlugin, MentionInputPlugin } from '@platejs/mention/react';
import { createPlateEditor } from 'platejs/react';
import { MentionElement, MentionInputElement } from '@/components/ui/mention-node';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
MentionPlugin.configure({
options: {
trigger: '@',
triggerPreviousCharPattern: /^$|^[\s"']$/,
insertSpaceAfterMention: false,
},
}).withComponent(MentionElement),
MentionInputPlugin.withComponent(MentionInputElement),
],
});
options.trigger: ่งฆๅๆๅ็ปๅๆก็ๅญ็ฌฆoptions.triggerPreviousCharPattern: ่งฆๅๅญ็ฌฆๅไธไธชๅญ็ฌฆ็ๆญฃๅ่กจ่พพๅผๆจกๅผใๅฅไปถไฝฟ็จ /^$|^[\s"']$/ ๅ
่ฎธๅจ่ก้ฆใ็ฉบ็ฝ็ฌฆๅๆๅผๅทๅ่งฆๅๆๅoptions.insertSpaceAfterMention: ๆฏๅฆๅจๆๅ
ฅๆๅๅ่ชๅจๆทปๅ ็ฉบๆ ผwithComponent: ๅ้
็จไบๆธฒๆๆๅๅๆๅ่พๅ
ฅ็UI็ปไปถๆไพๆๅๅ่ฝ็ๆไปถใๆฉๅฑ่ช TriggerComboboxPluginOptionsใ
<API name="MentionPlugin"> <APIOptions> <APIItem name="insertSpaceAfterMention" type="boolean" optional> ๆฏๅฆๅจๆๅๅๆๅ ฅ็ฉบๆ ผใ - **้ป่ฎคๅผ:** `false` </APIItem> <APIItem name="trigger" type="string" optional> ่งฆๅๆๅ็ปๅๆก็ๅญ็ฌฆใ - **้ป่ฎคๅผ:** `'@'` </APIItem> <APIItem name="triggerPreviousCharPattern" type="RegExp" optional> ๅน้ ่งฆๅๅญ็ฌฆๅไธไธชๅญ็ฌฆ็ๆจกๅผใ - **้ป่ฎคๅผ:** `/^\s?$/` </APIItem> <APIItem name="createComboboxInput" type="(trigger: string) => TElement" optional> ๅฝ่งฆๅๅญ็ฌฆๆฟๆดปๆถๅๅปบ่พๅ ฅๅ ็ด ็ๅฝๆฐใ </APIItem> </APIOptions> </API>ๆไพๆๅ่พๅ ฅๅ่ฝ็ๆไปถใ
ๅจๅฝๅ้ๅบๆๅ ฅๆๅๅ ็ด ใ
<API name="api.insert.mention"> <APIParameters> <APIItem name="options" type="object"> <APISubList> <APISubListItem parent="options" name="search" type="string"> ่งฆๅๆๅ็ๆ็ดขๆๆฌใ </APISubListItem> <APISubListItem parent="options" name="value" type="any"> ๅญๅจๅจๆๅๅ ็ด ไธญ็ๅผใ </APISubListItem> <APISubListItem parent="options" name="key" type="any" optional> ๆๅๅ ็ด ็ๅฏ้้ฎๅผใ </APISubListItem> </APISubList> </APIItem> </APIParameters> </API>่ทๅๅค็ๆๅ็ปๅๆก้กน้ๆฉ็ๅค็ๅจใ
<API name="getMentionOnSelectItem"> <APIOptions> <APIItem name="key" type="string" optional> ๆๅๆไปถ็ๆไปถ้ฎใ - **้ป่ฎคๅผ:** `MentionPlugin.key` </APIItem> </APIOptions> <APIReturns> ๅค็ๆๅ้กน้ๆฉ็ๅฝๆฐใ </APIReturns> </API>โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ