No way of getting out of mention mode with mention prefix that has no matches

[zizhengtai]

Describe the bug
In apps like Slack, as the user types @foo..., as soon as the current input returns an empty result list, the editor exits "mention mode". I.e., now any further characters the user types doesn't trigger the mention search logic and is treated as plain text.

With lexical-beautiful-mentions, the editor never exits mention mode even if what the user has entered so far results in zero matches. This is especially problematic when we set allowSpaces=true and onSearch={someCustomAsyncFn}, as some user input can cause the user to get trapped in mention mode without a way to return to plain text mode.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://lexical-beautiful-mentions-docs.vercel.app/?aspace=true&async=true
2. Replace the input content with: @foo bar
3. Continuing typing any characters
4. See that the "Loading..." popup keeps coming up on each keystroke

Expected behavior
When in mention search mode, as soon as what the user has typed so far results in zero matches, lexical-beautiful-mentions should exit mention mode.

[dosubot]

Hey @zizhengtai! 👋 I'm here to assist you with any bugs, questions, or contributions you have regarding lexical-beautiful-mentions. Let's squash those bugs together!

To address the issue of exiting mention mode when there are no matches, especially with allowSpaces=true and asynchronous=true, you can modify the checkForMentionMatch function. This function should set the trigger to null when there are no matches, effectively exiting mention mode. Here's how it's handled in the code:

const checkForMentionMatch = useCallback(
  (text: string) => {
    const queryMatch = checkForMentions(
      text,
      triggers,
      preTriggerChars,
      punctuation,
      allowSpaces,
    );

    if (queryMatch) {
      const { replaceableString, matchingString } = queryMatch;
      const index = replaceableString.lastIndexOf(matchingString);
      const trigger =
        index === -1
          ? replaceableString
          : replaceableString.substring(0, index) +
            replaceableString.substring(index + matchingString.length);
      setTrigger(trigger || null);
      if (queryMatch.replaceableString) {
        return queryMatch;
      }
    } else {
      setTrigger(null);
    }

    return null;
  },
  [preTriggerChars, allowSpaces, punctuation, triggers],
);

Ensure that the setTrigger(null) line is executed correctly when there are no matches to exit mention mode ^[1].

To continue talking to Dosu, mention @dosu.

[zizhengtai]

@dosu How would the user start typing another mention now that the triggers are set to null though?

[dosubot]

When the setTrigger(null) line is executed, it effectively exits the mention mode. To start typing another mention, the user simply needs to type a trigger character again (e.g., @ or #). The handleKeyDown function in the plugin listens for these trigger characters and reinitializes the mention mode when one is detected. This function checks if the key pressed is a trigger character and, if so, it manages the initialization of mention mode by inserting a space if necessary and setting up the environment for a new mention ^[1].

To continue talking to Dosu, mention @dosu.

[zizhengtai]

Given this is the library's internal code I'll wait for a maintainer to answer.

[amirgholami]

Is there any update on this? Running into the same issue.

[sodenn]

Sorry for the late reply. I understand the problem, but developing a solution is not straightforward.

Currently, the plugin behaves as follows:

1. The user types @Jhn Doe| (cursor at |), which returns no results due to a typo.
2. The mention mode remains active, allowing the user to move the cursor back, correct the input to @John Doe, and see the correct entry appear in the menu.

The mention mode stays active as long as the text from the trigger character (@) to the cursor forms a valid mention. Moving the cursor within this range reopens the menu.

The challenge is refining this logic. If no matches are found, mention mode should remain active for corrections, but the menu shouldn’t pop up unnecessarily on each keystroke showing a loading hint.

[sodenn]

I’ve implemented a fix for this issue. Could you please test it and let me know if it solves the problem? Preview: https://lexical-beautiful-mentions-docs-git-fix-8d5159-sodenns-projects.vercel.app/?value=&aspace=true&async=true