Docs
Combobox

Combobox

Utilities for adding comboboxes to your editor.

The TriggerComboboxPluginOptions mixin configures your plugin to insert a combobox input element when the user types a specified trigger character.

For example, the Mention plugin uses TriggerComboboxPluginOptions to insert an MentionInputPlugin.key whenever the user types @.

Usage

Extend the editor using withTriggerCombobox and specify default values for the required options. (See below for the full list of options).

import { withTriggerCombobox } from '@udecode/plate-combobox';
 
const MyPlugin = createPlatePlugin({
  // ...
  extendEditor: withTriggerCombobox,
  options: {
    createComboboxInput: (trigger) => ({
      children: [{ text: '' }],
      trigger,
      type: 'input',
    }),
    trigger: '@',
    triggerPreviousCharPattern: /^\s?$/,
  } as TriggerComboboxPluginOptions,
});

Define your input element as an inline void element. It's often useful to do this inside a nested plugin.

const MyPlugin = createPlatePlugin({
  // ...
  plugins: [
    createPlatePlugin({
      key: 'input',
      node: {
        isElement: true,
        isInline: true,
        isVoid: true,
      },
    }),
  ],
});

The input element component can be built using Inline Combobox.

Options

Options

Collapse all

    A function to create the input node.

    The character that triggers the combobox.

    Only trigger the combobox if the char before the trigger character matches a regular expression. For example, /^\s?$/ matches beginning of the line or a space.

    A query function to enable the behavior.

ColumnComments