โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/udecode/plate/(plugins)/(functionality)/(combobox)/slash-command.cn โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
title: ๆๆ ๅฝไปค docs:
/ ๅญ็ฌฆ่งฆๅๆทปๅ ๆๆ ๅฝไปคๅ่ฝๆๅฟซ็ๆนๅผๆฏไฝฟ็จ SlashKit๏ผๅฎๅ
ๅซ้ข้
็ฝฎ็ SlashPlugin ๅ SlashInputPlugin ไปฅๅๅฎไปฌ็ Plate UI ็ปไปถใ
SlashInputElement: ๆธฒๆๅธฆๆ้ขๅฎไน้้กน็ๆๆ ๅฝไปค็ปๅๆกimport { createPlateEditor } from 'platejs/react';
import { SlashKit } from '@/components/editor/plugins/slash-kit';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
...SlashKit,
],
});
npm install @platejs/slash-command
import { SlashPlugin, SlashInputPlugin } from '@platejs/slash-command/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
SlashPlugin,
SlashInputPlugin,
],
});
import { SlashPlugin, SlashInputPlugin } from '@platejs/slash-command/react';
import { createPlateEditor } from 'platejs/react';
import { SlashInputElement } from '@/components/ui/slash-node';
import { KEYS } from 'platejs';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
SlashPlugin.configure({
options: {
trigger: '/',
triggerPreviousCharPattern: /^\s?$/,
triggerQuery: (editor) =>
!editor.api.some({
match: { type: editor.getType(KEYS.codeBlock) },
}),
},
}),
SlashInputPlugin.withComponent(SlashInputElement),
],
});
options.trigger: ่งฆๅๆๆ ๅฝไปค็ปๅๆก็ๅญ็ฌฆ๏ผ้ป่ฎค: /๏ผoptions.triggerPreviousCharPattern: ๅน้
่งฆๅๅญ็ฌฆๅๅญ็ฌฆ็ๆญฃๅ่กจ่พพๅผoptions.triggerQuery: ๅคๆญไฝๆถๅฏ็จๆๆ ๅฝไปค็ๅฝๆฐwithComponent: ๆๅฎๆๆ ๅฝไปค็้ข็UI็ปไปถๅฆไฝไฝฟ็จๆๆ ๅฝไปค๏ผ
/ ๆๅผๆๆ ่ๅๅฏ็จ้้กนๅ ๆฌ๏ผ
ๅฎ็ฐๆๆ ๅฝไปคๅ่ฝ็ๆไปถใๆฉๅฑ่ช TriggerComboboxPluginOptionsใ
<API name="SlashPlugin"> <APIOptions> <APIItem name="trigger" type="string" optional> ่งฆๅๆๆ ๅฝไปค็ปๅๆก็ๅญ็ฌฆใ - **้ป่ฎคๅผ:** `'/'` </APIItem> <APIItem name="triggerPreviousCharPattern" type="RegExp" optional> ๅน้ ่งฆๅๅญ็ฌฆๅๅญ็ฌฆ็ๆญฃๅ่กจ่พพๅผใ - **้ป่ฎคๅผ:** `/^\s?$/` </APIItem> <APIItem name="createComboboxInput" type="() => TComboboxInputElement" optional> ๅๅปบ็ปๅๆก่พๅ ฅๅ ็ด ็ๅฝๆฐใ - **้ป่ฎคๅผ:** ```tsx () => ({ children: [{ text: '' }], type: KEYS.slashInput, }); ``` </APIItem> <APIItem name="triggerQuery" type="(editor: PlateEditor) => boolean" optional> ๅคๆญไฝๆถๅฏ็จๆๆ ๅฝไปค็ๅฝๆฐใๅฏ็จไบๅจไปฃ็ ๅ็ญ็นๅฎไธไธๆไธญ็ฆ็จๅ่ฝใ </APIItem> </APIOptions> </API>ๅค็ๆๆ ๅฝไปคๆๅ ฅ็่พๅ ฅ่กไธบใ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ