Docs
Combobox

Combobox

Utilities for adding comboboxes to your editor.

TriggerComboboxPlugin

The TriggerComboboxPlugin 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 TriggerComboboxPlugin to insert an ELEMENT_MENTION_INPUT whenever the user types @.

Usage

Extend your plugin options type with TriggerComboboxPlugin.

interface MyPlugin extends TriggerComboboxPlugin {}
const createMyPlugin = createPluginFactory<MyPlugin>({
  // ...
});
 
// Or simply:
const createMyPlugin = createPluginFactory<TriggerComboboxPlugin>({
  // ...
});

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

const createMyPlugin = createPluginFactory<MyPlugin>({
  // ...
  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 createMyPlugin = createPluginFactory<MyPlugin>({
  // ...
  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