โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/udecode/plate/(plugins)/(functionality)/multi-select.cn โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
title: ๅค้ docs:
ไธไผ ็ป็ๅบไบ่พๅ ฅ็ๅค้ไธๅ๏ผ่ฏฅ็ปไปถๆๅปบๅจ Plate editor ไนไธ๏ผๆไพ๏ผ
npm install @platejs/tag
import { MultiSelectPlugin } from '@platejs/tag/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
MultiSelectPlugin, // ๅ
ทๆๆ ็ญพๅ่ฝ็ๅค้็ผ่พๅจ
],
});
import { MultiSelectPlugin } from '@platejs/tag/react';
import { createPlateEditor } from 'platejs/react';
import { TagElement } from '@/components/ui/tag-node';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
MultiSelectPlugin.withComponent(TagElement),
],
});
MultiSelectPlugin๏ผๆฉๅฑ TagPlugin ๅนถๅฐ็ผ่พๅจ้ๅถไธบไป
ๅ
ๅซๆ ็ญพๅ
็ด withComponent๏ผๅ้
TagElement ๆฅๆธฒๆๆ ็ญพ็ปไปถimport { MultiSelectPlugin } from '@platejs/tag/react';
import { TagElement } from '@/components/ui/tag-node';
import {
SelectEditor,
SelectEditorContent,
SelectEditorInput,
SelectEditorCombobox,
type SelectItem,
} from '@/components/ui/select-editor';
// ๅฎไนไฝ ็้กน็ฎ
const ITEMS: SelectItem[] = [
{ value: 'React' },
{ value: 'TypeScript' },
{ value: 'JavaScript' },
];
export default function MySelectEditor() {
const [value, setValue] = React.useState<SelectItem[]>([ITEMS[0]]);
return (
<SelectEditor
value={value}
onValueChange={setValue}
items={ITEMS}
>
<SelectEditorContent>
<SelectEditorInput placeholder="้ๆฉ้กน็ฎ..." />
<SelectEditorCombobox />
</SelectEditorContent>
</SelectEditor>
);
}
็จไบๅไธชๆ ็ญพๅ่ฝ็ๅ ่ void ๅ ็ด ๆไปถใ
TagPlugin ็ๆฉๅฑ๏ผๅฐ็ผ่พๅจ้ๅถไธบไป
ๅ
ๅซๆ ็ญพๅ
็ด ๏ผๅฏ็จๅค้่กไธบ๏ผๅ
ทๆ่ชๅจๆๆฌๆธ
็ๅ้ๅค้ข้ฒๅ่ฝใ
ๅจๅฝๅ้ๆฉๅคๆๅ ฅๆฐ็ๅค้ๅ ็ด ใ
<API name="tf.insert.tag"> <APIParameters> <APIItem name="props" type="TTagProps"> ๅค้ๅ ็ด ็ๅฑๆงใ </APIItem> </APIParameters> <APIOptions type="TTagProps"> <APIItem name="value" type="string"> ๅค้ๅ ็ด ็ๅฏไธๅผใ </APIItem> </APIOptions> </API>่ทๅ็ผ่พๅจไธญ็ๆๆๆ ็ญพ้กน็ฎใ
<API name="getSelectedItems"> <APIReturns type="TTagProps[]"> ็ผ่พๅจไธญ็ๆ ็ญพ้กน็ฎๆฐ็ปใ </APIReturns> </API>ๆฏ่พไธค็ปๆ ็ญพๆฏๅฆ็ธ็ญ็ๅทฅๅ ทๅฝๆฐ๏ผๅฟฝ็ฅ้กบๅบใ
<API name="isEqualTags"> <APIParameters> <APIItem name="newTags" type="TTagProps[]" optional> ่ฆไธๅฝๅ็ผ่พๅจๆ ็ญพๆฏ่พ็ๆฐๆ ็ญพใ </APIItem> </APIParameters> <APIReturns type="boolean"> ไธค็ปๆฏๅฆๅ ๅซ็ธๅ็ๅผใ </APIReturns> </API>่ทๅ็ผ่พๅจไธญๅฝๅ้ไธญ็ๆ ็ญพ้กน็ฎ็ Hookใ
<API name="useSelectedItems"> <APIReturns type="TTagProps[]"> ๅ ทๆๅผๅๅฑๆง็้ไธญๆ ็ญพ้กน็ฎๆฐ็ปใ </APIReturns> </API>่ทๅๅฏ้ๆฉ็ๅฏ็จ้กน็ฎ็ Hook๏ผ้่ฟๆ็ดข่ฟๆปคๅนถๆ้คๅทฒ้ไธญ็้กน็ฎใ
<API name="useSelectableItems"> <APIOptions type="options"> <APIItem name="allowNew" type="boolean" optional> ๆฏๅฆๅ ่ฎธๅๅปบๆฐ้กน็ฎใ - **้ป่ฎคๅผ๏ผ** `true` </APIItem> <APIItem name="filter" type="(value: string, search: string) => boolean" optional> ้กน็ฎ็่ชๅฎไน่ฟๆปคๅฝๆฐใ </APIItem> <APIItem name="items" type="T[]" optional> ๅฏ็จ้กน็ฎๆฐ็ปใ </APIItem> <APIItem name="newItemFilter" type="(search: string) => boolean" optional> ๆฐ้กน็ฎ็่ฟๆปคๅฝๆฐใ </APIItem> <APIItem name="newItemPosition" type="'end' | 'start'" optional> ๆฐ้กน็ฎๅจๅ่กจไธญ็ไฝ็ฝฎใ - **้ป่ฎคๅผ๏ผ** `'end'` </APIItem> </APIOptions> <APIReturns type="T[]"> ่ฟๆปคๅ็ๅฏ้้กน็ฎๆฐ็ปใ </APIReturns> </API>ๅค็็ผ่พๅจไธญ็ปๅๆก่กไธบ็ Hook๏ผๅ ๆฌๆๆฌๆธ ็ๅ้กน็ฎ้ๆฉใ
<API name="useSelectEditorCombobox"> <APIOptions type="options"> <APIItem name="open" type="boolean"> ็ปๅๆกๆฏๅฆๆๅผใ </APIItem> <APIItem name="selectFirstItem" type="() => void"> ้ๆฉ็ฌฌไธไธช็ปๅๆก้กน็ฎ็ๅฝๆฐใ </APIItem> <APIItem name="onValueChange" type="(items: TTagProps[]) => void" optional> ้ไธญ้กน็ฎๆดๆนๆถ็ๅ่ฐใ </APIItem> </APIOptions> </API>type TTagElement = TElement & {
value: string;
[key: string]: unknown;
};
type TTagProps = {
value: string;
[key: string]: unknown;
};
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ