Docs
Combobox

Combobox

Utilities for adding comboboxes to your editor.

TriggerComboboxPluginOptions

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

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

Usage

Extend your plugin options type with TriggerComboboxPluginOptions.

type O = TriggerComboboxPluginOptions
 
const MyPlugin = createPlugin<O>({
  // ...
});

Add the withTriggerCombobox override and specify default values for the required options. (See below for the full list of options).

const MyPlugin = createPlugin<O>({
  // ...
  withOverrides: withTriggerCombobox,
  options: {
    createComboboxInput: (trigger) => ({
      children: [{ text: '' }],
      trigger,
      type: ELEMENT_MY_INPUT,
    }),
    trigger: '@',
    triggerPreviousCharPattern: /^\s?$/,
  },
});

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

const MyPlugin = createPlugin<O>({
  // ...
  plugins: [
    {
      isElement: true,
      isInline: true,
      isVoid: true,
      key: ELEMENT_MY_INPUT,
    },
  ],
});

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.

CollaborationComments