โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/udecode/plate/(plugins)/(functionality)/(combobox)/combobox.cn โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
title: ็ปๅๆก(Combobox) docs:
npm install @platejs/combobox
้ฆๅ ๅๅปบไธไธช่พๅ ฅๆไปถ๏ผๅฝ่งฆๅๅจๆฟๆดปๆถๅฐ่ขซๆๅ ฅ๏ผ
import { createSlatePlugin } from 'platejs';
const TagInputPlugin = createSlatePlugin({
key: 'tag_input',
editOnly: true,
node: {
isElement: true,
isInline: true,
isVoid: true,
},
});
ไฝฟ็จwithTriggerComboboxๅๅปบไธปๆไปถ๏ผ
import { createTSlatePlugin, type PluginConfig } from 'platejs';
import {
type TriggerComboboxPluginOptions,
withTriggerCombobox
} from '@platejs/combobox';
type TagConfig = PluginConfig<'tag', TriggerComboboxPluginOptions>;
export const TagPlugin = createTSlatePlugin<TagConfig>({
key: 'tag',
node: { isElement: true, isInline: true, isVoid: true },
options: {
trigger: '#',
triggerPreviousCharPattern: /^\s?$/,
createComboboxInput: () => ({
children: [{ text: '' }],
type: 'tag_input',
}),
},
plugins: [TagInputPlugin],
}).overrideEditor(withTriggerCombobox);
node.isElement: ๅฎไนๆญคไธบๅ
็ด ่็น(้ๆๆฌ)node.isInline: ไฝฟๆ ็ญพๅ
็ด ๅ
่(้ๅ็บง)node.isVoid: ้ฒๆญขๅจๆ ็ญพๅ
็ด ๅ
็ผ่พoptions.trigger: ่งฆๅ็ปๅๆก็ๅญ็ฌฆ(ๆฌไพไธบ#)options.triggerPreviousCharPattern: ๅฟ
้กปๅน้
่งฆๅๅจๅๅญ็ฌฆ็ๆญฃๅ่กจ่พพๅผใ/^\s?$/ๅ
่ฎธๅจ่ก้ฆๆ็ฉบ็ฝๅ่งฆๅoptions.createComboboxInput: ่งฆๅๅจๆฟๆดปๆถๅๅปบ่พๅ
ฅๅ
็ด ่็น็ๅฝๆฐไฝฟ็จInlineComboboxๅๅปบ่พๅ
ฅๅ
็ด ็ปไปถ๏ผ
import { PlateElement, useFocused, useReadOnly, useSelected } from 'platejs/react';
import {
InlineCombobox,
InlineComboboxContent,
InlineComboboxEmpty,
InlineComboboxInput,
InlineComboboxItem,
} from '@/components/ui/inline-combobox';
import { cn } from '@/lib/utils';
const tags = [
{ id: 'frontend', name: 'ๅ็ซฏ', color: 'blue' },
{ id: 'backend', name: 'ๅ็ซฏ', color: 'green' },
{ id: 'design', name: '่ฎพ่ฎก', color: 'purple' },
{ id: 'urgent', name: '็ดงๆฅ', color: 'red' },
];
export function TagInputElement({ element, ...props }) {
return (
<PlateElement as="span" {...props}>
<InlineCombobox element={element} trigger="#">
<InlineComboboxInput />
<InlineComboboxContent>
<InlineComboboxEmpty>ๆชๆพๅฐๆ ็ญพ</InlineComboboxEmpty>
{tags.map((tag) => (
<InlineComboboxItem
key={tag.id}
value={tag.name}
onClick={() => {
// ๆๅ
ฅๅฎ้
ๆ ็ญพๅ
็ด
editor.tf.insertNodes({
type: 'tag',
tagId: tag.id,
children: [{ text: tag.name }],
});
}}
>
<span
className={`w-3 h-3 rounded-full bg-${tag.color}-500 mr-2`}
/>
#{tag.name}
</InlineComboboxItem>
))}
</InlineComboboxContent>
</InlineCombobox>
{props.children}
</PlateElement>
);
}
export function TagElement({ element, ...props }) {
const selected = useSelected();
const focused = useFocused();
const readOnly = useReadOnly();
return (
<PlateElement
{...props}
className={cn(
'inline-block rounded-md bg-primary/10 px-1.5 py-0.5 align-baseline text-sm font-medium text-primary',
!readOnly && 'cursor-pointer',
selected && focused && 'ring-2 ring-ring'
)}
attributes={{
...props.attributes,
contentEditable: false,
'data-slate-value': element.value,
}}
>
#{element.value}
{props.children}
</PlateElement>
);
}
import { createPlateEditor } from 'platejs/react';
import { TagPlugin, TagInputPlugin } from './tag-plugin';
import { TagElement, TagInputElement } from './tag-components';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
TagPlugin.configure({
options: {
triggerQuery: (editor) => {
// ๅจไปฃ็ ๅไธญ็ฆ็จ
return !editor.api.some({ match: { type: 'code_block' } });
},
},
}).withComponent(TagElement),
TagInputPlugin.withComponent(TagInputElement),
],
});
options.triggerQuery: ๆ นๆฎ็ผ่พๅจ็ถๆๆๆกไปถๅฏ็จ/็ฆ็จ่งฆๅๅจ็ๅฏ้ๅฝๆฐๅบไบ่งฆๅๅจ็็ปๅๆกๆไปถ็้ ็ฝฎ้้กนใ
<API name="TriggerComboboxPluginOptions"> <APIOptions> <APIItem name="createComboboxInput" type="(trigger: string) => TElement"> ่งฆๅๅจๆฟๆดปๆถๅๅปบ่พๅ ฅ่็น็ๅฝๆฐใ </APIItem> <APIItem name="trigger" type="RegExp | string[] | string"> ่งฆๅ็ปๅๆก็ๅญ็ฌฆใๅฏไปฅๆฏ๏ผ - ๅไธชๅญ็ฌฆ(ๅฆ'@') - ๅญ็ฌฆๆฐ็ป - ๆญฃๅ่กจ่พพๅผ </APIItem> <APIItem name="triggerPreviousCharPattern" type="RegExp" optional> ๅน้ ่งฆๅๅจๅๅญ็ฌฆ็ๆจกๅผใ - **็คบไพ:** `/^\s?$/` ๅน้ ่ก้ฆๆ็ฉบๆ ผ </APIItem> <APIItem name="triggerQuery" type="(editor: SlateEditor) => boolean" optional> ๆงๅถ่งฆๅๅจไฝๆถๆฟๆดป็่ชๅฎไนๆฅ่ฏขๅฝๆฐใ </APIItem> </APIOptions> </API>็ฎก็็ปๅๆก่พๅ ฅ่กไธบๅ้ฎ็ไบคไบ็้ฉๅญใ
<API name="useComboboxInput"> <APIOptions> <APIItem name="ref" type="RefObject<HTMLElement>"> ่พๅ ฅๅ ็ด ็ๅผ็จใ </APIItem> <APIItem name="autoFocus" type="boolean" optional> ๆ่ฝฝๆถ่ชๅจ่็ฆ่พๅ ฅใ - **้ป่ฎค:** `true` </APIItem> <APIItem name="cancelInputOnArrowLeftRight" type="boolean" optional> ๆนๅ้ฎๅๆถ่พๅ ฅใ - **้ป่ฎค:** `true` </APIItem> <APIItem name="cancelInputOnBackspace" type="boolean" optional> ่ตทๅงไฝ็ฝฎ้ๆ ผ้ฎๅๆถ่พๅ ฅใ - **้ป่ฎค:** `true` </APIItem> <APIItem name="cancelInputOnBlur" type="boolean" optional> ๅคฑๅป็ฆ็นๆถๅๆถ่พๅ ฅใ - **้ป่ฎค:** `true` </APIItem> <APIItem name="cancelInputOnDeselect" type="boolean" optional> ๅๆถ้ๆฉๆถๅๆถ่พๅ ฅใ - **้ป่ฎค:** `true` </APIItem> <APIItem name="cancelInputOnEscape" type="boolean" optional> Escape้ฎๅๆถ่พๅ ฅใ - **้ป่ฎค:** `true` </APIItem> <APIItem name="cursorState" type="ComboboxInputCursorState" optional> ๅฝๅๅ ๆ ไฝ็ฝฎ็ถๆใ </APIItem> <APIItem name="forwardUndoRedoToEditor" type="boolean" optional> ๅฐๆค้/้ๅ่ฝฌๅ็ป็ผ่พๅจใ - **้ป่ฎค:** `true` </APIItem> <APIItem name="onCancelInput" type="(cause: CancelComboboxInputCause) => void" optional> ่พๅ ฅๅๆถๆถ็ๅ่ฐๅฝๆฐใ </APIItem> </APIOptions> <APIReturns> <APIItem name="cancelInput" type="(cause?: CancelComboboxInputCause, focusEditor?: boolean) => void"> ๅๆถ่พๅ ฅ็ๅฝๆฐใ </APIItem> <APIItem name="props" type="object"> ่พๅ ฅๅ ็ด ็ๅฑๆงใ </APIItem> <APIItem name="removeInput" type="(focusEditor?: boolean) => void"> ็งป้ค่พๅ ฅ่็น็ๅฝๆฐใ </APIItem> </APIReturns> </API>่ท่ธชHTML่พๅ ฅๅ ็ด ไธญๅ ๆ ไฝ็ฝฎ็้ฉๅญใ
<API name="useHTMLInputCursorState"> <APIParameters> <APIItem name="ref" type="RefObject<HTMLInputElement>"> ่ฆ่ท่ธช็่พๅ ฅๅ ็ด ็ๅผ็จใ </APIItem> </APIParameters> <APIReturns> <APIItem name="atStart" type="boolean"> ๅ ๆ ๆฏๅฆๅจ่พๅ ฅ่ตทๅงไฝ็ฝฎใ </APIItem> <APIItem name="atEnd" type="boolean"> ๅ ๆ ๆฏๅฆๅจ่พๅ ฅ็ปๆไฝ็ฝฎใ </APIItem> </APIReturns> </API>โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ