Show Mentions after @ symbol

[maliuta-oleksandr]

Problem
When I enter only @ symbol - I don't understand that there are mentions, I want to show first 10 mentions from the list, so user can continue typing and filter/select available. Currently user has to enter @ and first letter to see the dropdown

Solution
Show the mentions dropdown immediately after entering @ symbol.

Context
Tried to solve it, modifying https://github.com/ianstormtaylor/slate/blob/main/site/examples/ts/mentions.tsx
But issue which I didn't get - Editor.before(editor, wordBefore) doesn't return any value without entering first letter

[maliuta-oleksandr]

if (selection && Range.isCollapsed(selection)) {
          const [start] = Range.edges(selection)

          // Get the current position and check the character before it
          const currentPos = start;

          // Check if there's a position before the current one
          if (currentPos.offset > 0 || currentPos.path[currentPos.path.length - 1] > 0) {
            let beforePos;

            if (currentPos.offset > 0) {
              // If we're not at the beginning of a node, just move back one character
              beforePos = { path: currentPos.path, offset: currentPos.offset - 1 };
            } else {
              // We're at the beginning of a node, need to check previous node
              try {
                beforePos = Editor.before(editor, currentPos);
              } catch (error) {
                beforePos = null;
              }
            }

            if (beforePos) {
              // Create a range from before position to current position
              const charRange = Editor.range(editor, beforePos, currentPos);

              // Get the character right before the cursor
              const charBefore = Editor.string(editor, charRange);

              // If the character is "@", show the dropdown
              if (charBefore === '@') {
                setTarget(charRange);
                setSearch('');
                setIndex(0);
                return;
              }

              // Check for @ followed by word characters (for filtering)
              const beforeCursor = { path: start.path, offset: 0 };
              const range = Editor.range(editor, beforeCursor, start);
              const textBeforeCursor = Editor.string(editor, range);
              const lastAtPos = textBeforeCursor.lastIndexOf('@');

              if (lastAtPos !== -1) {
                // Found an @ symbol
                const mentionRange = Editor.range(
                  editor,
                  { path: start.path, offset: lastAtPos },
                  start
                );
                const mentionText = Editor.string(editor, mentionRange);

                // Check if we have a properly formatted mention
                if (mentionText.startsWith('@')) {
                  setTarget(mentionRange);
                  setSearch(mentionText.slice(1)); // Remove the @ to get the search term
                  setIndex(0);
                  return;
                }
              }
            }
          }
        }

        setTarget(null);