{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "combobox-docs",
"title": "Combobox",
"description": "Documentation for Combobox",
"files": [
{
"path": "../../content/docs/(plugins)/(functionality)/(combobox)/combobox.mdx",
"content": "---\ntitle: Combobox\ndocs:\n - route: /docs/components/inline-combobox\n title: Inline Combobox\n---\n\n\n\n\nInsert mentions for users, pages, or any reference with `@`\n\n\n\nQuick access to editor commands and blocks with `/`\n\n\n\nInsert emojis with autocomplete using `:`\n\n\n\n\n\n\n## Features\n\n- Utilities for creating trigger-based combobox functionality\n- Configurable trigger characters and patterns\n- Keyboard navigation and selection handling\n\n\n\n## Create a Combobox Plugin\n\n\n\n### Installation\n\n```bash\nnpm install @platejs/combobox\n```\n\n### Create Input Plugin\n\nFirst, create an input plugin that will be inserted when the trigger is activated:\n\n```tsx\nimport { createSlatePlugin } from 'platejs';\n\nconst TagInputPlugin = createSlatePlugin({\n key: 'tag_input',\n editOnly: true,\n node: {\n isElement: true,\n isInline: true,\n isVoid: true,\n },\n});\n```\n\n### Create Main Plugin\n\nCreate your main plugin using `withTriggerCombobox`:\n\n```tsx\nimport { createTSlatePlugin, type PluginConfig } from 'platejs';\nimport { \n type TriggerComboboxPluginOptions, \n withTriggerCombobox \n} from '@platejs/combobox';\n\ntype TagConfig = PluginConfig<'tag', TriggerComboboxPluginOptions>;\n\nexport const TagPlugin = createTSlatePlugin({\n key: 'tag',\n node: { isElement: true, isInline: true, isVoid: true },\n options: {\n trigger: '#',\n triggerPreviousCharPattern: /^\\s?$/,\n createComboboxInput: () => ({\n children: [{ text: '' }],\n type: 'tag_input',\n }),\n },\n plugins: [TagInputPlugin],\n}).overrideEditor(withTriggerCombobox);\n```\n\n- `node.isElement`: Defines this as an element node (not text)\n- `node.isInline`: Makes the tag element inline (not block)\n- `node.isVoid`: Prevents editing inside the tag element\n- `options.trigger`: Character that triggers the combobox (in this case `#`)\n- `options.triggerPreviousCharPattern`: RegExp pattern that must match the character before the trigger. `/^\\s?$/` allows the trigger at the start of a line or after whitespace\n- `options.createComboboxInput`: Function that creates the input element node when the trigger is activated\n\n### Create Component\n\nCreate the input element component using `InlineCombobox`:\n\n```tsx\nimport { PlateElement, useFocused, useReadOnly, useSelected } from 'platejs/react';\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from '@/components/ui/inline-combobox';\nimport { cn } from '@/lib/utils';\n\nconst tags = [\n { id: 'frontend', name: 'Frontend', color: 'blue' },\n { id: 'backend', name: 'Backend', color: 'green' },\n { id: 'design', name: 'Design', color: 'purple' },\n { id: 'urgent', name: 'Urgent', color: 'red' },\n];\n\nexport function TagInputElement({ element, ...props }) {\n return (\n \n \n \n \n \n No tags found\n \n {tags.map((tag) => (\n {\n // Insert actual tag element\n editor.tf.insertNodes({\n type: 'tag',\n tagId: tag.id,\n children: [{ text: tag.name }],\n });\n }}\n >\n \n #{tag.name}\n \n ))}\n \n \n \n {props.children}\n \n );\n}\n\nexport function TagElement({ element, ...props }) {\n const selected = useSelected();\n const focused = useFocused();\n const readOnly = useReadOnly();\n\n return (\n \n #{element.value}\n {props.children}\n \n );\n}\n```\n\n### Add to Editor\n\n```tsx\nimport { createPlateEditor } from 'platejs/react';\nimport { TagPlugin, TagInputPlugin } from './tag-plugin';\nimport { TagElement, TagInputElement } from './tag-components';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n TagPlugin.configure({\n options: {\n triggerQuery: (editor) => {\n // Disable in code blocks\n return !editor.api.some({ match: { type: 'code_block' } });\n },\n },\n }).withComponent(TagElement),\n TagInputPlugin.withComponent(TagInputElement),\n ],\n});\n```\n\n- `options.triggerQuery`: Optional function to conditionally enable/disable the trigger based on editor state\n\n\n\n## Examples\n\n\n\n\n\n## Options\n\n### TriggerComboboxPluginOptions\n\nConfiguration options for trigger-based combobox plugins.\n\n\n\n TElement\">\n Function to create the input node when trigger is activated.\n \n \n Character(s) that trigger the combobox. Can be:\n - A single character (e.g. '@')\n - An array of characters\n - A regular expression\n \n \n Pattern to match the character before trigger.\n - **Example:** `/^\\s?$/` matches start of line or space\n \n boolean\" optional>\n Custom query function to control when trigger is active.\n \n\n\n\n## Hooks\n\n### useComboboxInput\n\nHook for managing combobox input behavior and keyboard interactions.\n\n\n\n \">\n Reference to the input element.\n \n \n Auto focus the input when mounted.\n - **Default:** `true`\n \n \n Cancel on arrow keys.\n - **Default:** `true`\n \n \n Cancel on backspace at start.\n - **Default:** `true`\n \n \n Cancel on blur.\n - **Default:** `true`\n \n \n Cancel when deselected.\n - **Default:** `true`\n \n \n Cancel on escape key.\n - **Default:** `true`\n \n \n Current cursor position state.\n \n \n Forward undo/redo to editor.\n - **Default:** `true`\n \n void\" optional>\n Callback when input is cancelled.\n \n\n\n\n void\">\n Function to cancel the input.\n \n \n Props for the input element.\n \n void\">\n Function to remove the input node.\n \n\n\n\n### useHTMLInputCursorState\n\nHook for tracking cursor position in an HTML input element.\n\n\n\n \">\n Reference to the input element to track.\n \n\n\n\n \n Whether cursor is at the start of input.\n \n \n Whether cursor is at the end of input.\n \n\n",
"type": "registry:file",
"target": "content/docs/plate/(plugins)/(functionality)/(combobox)/combobox.mdx"
}
],
"type": "registry:file"
}