fix(mention): allow mention trigger in middle of text (#166)

Fixes #88

- Improved text detection logic to check if text after cursor is separated or part of existing mention
- Fixed mention insertion to properly update existing mentions' positions when inserting in middle of text
- Mentions now trigger correctly regardless of position within input

Author: MaisonnatM

packages/mention/src/mention-input.tsx

@@ -204,11 +204,23 @@ const MentionInput = React.forwardRef<InputElement, MentionInputProps>(
         const isImmediatelyAfterTrigger =
           currentPosition === lastTriggerIndex + 1;
 
-        // Check if there's any text after the cursor position
-        const textAfterCursor = value.slice(currentPosition).trim();
-        const hasCompletedText =
-          textAfterCursor.length > 0 && !textAfterCursor.startsWith(" ");
-        if (hasCompletedText) {
+        const textAfterCursor = value.slice(currentPosition);
+        const firstCharAfterCursor = textAfterCursor[0];
+        const isTextAfterCursorSeparated =
+          !firstCharAfterCursor ||
+          firstCharAfterCursor === " " ||
+          firstCharAfterCursor === "\n" ||
+          firstCharAfterCursor === context.trigger;
+        const isTextAfterCursorPartOfMention = context.mentions.some(
+          (mention) =>
+            currentPosition >= mention.start && currentPosition < mention.end,
+        );
+        const hasInterferingText =
+          textAfterCursor.length > 0 &&
+          !isTextAfterCursorSeparated &&
+          !isTextAfterCursorPartOfMention;
+        
+        if (hasInterferingText) {
           if (context.open) {
             context.onOpenChange(false);
             context.onHighlightedItemChange(null);

packages/mention/src/mention-root.tsx

@@ -294,18 +294,31 @@ const MentionRoot = React.forwardRef<RootElement, MentionRootProps>(
             ?.label ?? payloadValue;
         const mentionText = `${trigger}${mentionLabel}`;
         const beforeTrigger = input.value.slice(0, triggerIndex);
-        const afterSearchText = input.value.slice(
-          input.selectionStart ?? triggerIndex,
-        );
+        const insertionPoint = input.selectionStart ?? triggerIndex;
+        const afterSearchText = input.value.slice(insertionPoint);
         const newValue = `${beforeTrigger}${mentionText} ${afterSearchText}`;
 
+        const insertionLength = mentionText.length + 1;
+
         const newMention: Mention = {
           value: payloadValue,
           start: triggerIndex,
           end: triggerIndex + mentionText.length,
         };
 
-        setMentions((prev) => [...prev, newMention]);
+        setMentions((prev) => {
+          const updatedMentions = prev.map((mention) => {
+            if (mention.start >= insertionPoint) {
+              return {
+                ...mention,
+                start: mention.start + insertionLength,
+                end: mention.end + insertionLength,
+              };
+            }
+            return mention;
+          });
+          return [...updatedMentions, newMention];
+        });
 
         input.value = newValue;
         setInputValue(newValue);