I'm using lexical (ReactJS) for an input field and need to be able to submit by hitting ENTER (SHIFT-ENTER typically creates a new line). To do so, I register a listener with the priority set to COMMAND_PRIORITY_LOW (1), otherwise the default carriage-return is triggered instead of sending. The integration worked perfectly until I added the LexicalTypeaheadPlugin (from the package) via a customised version of the MentionsPlugin.
The problem arises when selecting an item from the Typeahead drop-down and hitting ENTER. The desired effect being the current option getting selected and transformed to a node, instead my custom submit command is getting fired.
Forking the source of the TypeaheadPlugin in order to set the priority to COMMAND_PRIORITY_NORMAL (2) works, but is not a good option (could potentially submit a PR). I'm not able to bump the priority of the typeahead plugin and there doesn't seem a way to swap the order of the two plugins? I'm looking for a cleaner solution for solving this rather than trying to tweak the priority.
useEffect(() => {
return mergeRegister(
editor.registerCommand(
KEY_ENTER_COMMAND,
(event: KeyboardEvent | null) => {
// skipping if shift is pressed (defaulting to line-break)
if (event !== null && !e.shiftKey) {
event.preventDefault();
console.log("sending! this shouldn't get called if typeahead context menu is open");
return true;
}
},
// priority already at its lowest
COMMAND_PRIORITY_LOW,
),
);
}, [editor]);