Lexical key command conflict and priority

Viewed 65

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]);

0 Answers
Related