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
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.