3

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]);
Theo.T
  • 8,905
  • 3
  • 24
  • 38
  • Hi, any chance you've managed to resolve this? – Marian Mar 31 '23 at 13:07
  • I created a PR that got merged (setting priority to normal): https://github.com/facebook/lexical/commit/f892c8d241b26312ca28fd125b2aa5a3900b9148 then the priority got bumped to high: https://github.com/facebook/lexical/commit/c961f0905778c73835a2deda39ff6130193cb342 then got reset to low: https://github.com/facebook/lexical/commit/0175e6ce92b2fa2661253e437987baebd3880035 If I'm not alone having this issue, let's pick it up again. In the meantime I found a hack by triggering `mergeRegister` whenever the enterkey is pressed. – Theo.T Apr 03 '23 at 12:09
  • Thanks for the update! I've actually managed to make it work when it's exactly like in your post - all 3 conditions must be met: 1. `e.preventDefault()` 2. `return true` 3. `COMMAND_PRIORITY_LOW` With any other combination it would append a linebreak. With this combination I got the submit to start without a linebreak being appended. – Marian Apr 03 '23 at 15:36
  • 1
    Another note about a little "hacky" solution I have found. When lexical typeahead menu plugin shows a menu, it will set `aria-activedescendant` attribute on the text input element. I.e. the textbox used for lexical will look something like `
    `, where the number in the attribute changes as you are selecting different menu options. My "hacky solution" is thus: `const clickedWhileMentionsMenuWasOpen = e.currentTarget.getAttribute('aria-activedescendant')?.startsWith('typeahead-item');`     – Marian Jun 27 '23 at 10:24

0 Answers0