react-mention-input 1.1.4 → 1.1.6

package/README.md

@@ -37,7 +37,7 @@ A customizable input component with @mention functionality.
 | `suggestionListClassName` | `string`                        | Custom class name for the suggestion list. |
 | `suggestionItemClassName` | `string`                        | Custom class name for each suggestion item. |
 | `sendButtonIcon`        | `ReactNode`                       | Custom icon for the send button (MUI icon or image path). |
-| `onSendMessage`         | `(obj: {messageText: string, messageHTML: string}) => void` | Callback function triggered on sending a message, providing both plain text and HTML. |
+| `onSendMessage`         | `(obj:{messageText: string, messageHTML: string,userSelectListWithIds:{ id: number; name: string }[],userSelectListName:string[]}) => void` | Callback function triggered on sending a message, providing both plain text, HTML and userName. |
 | `suggestionPosition`    | `'top' | 'bottom' | 'left' | 'right'` | Position of the suggestion dropdown relative to the input. Default is `bottom`. |
 
 #### Example Usage

package/dist/MentionInput.d.ts

@@ -17,6 +17,11 @@ interface MentionInputProps {
     onSendMessage?: (obj: {
         messageText: string;
         messageHTML: string;
+        userSelectListWithIds: {
+            id: number;
+            name: string;
+        }[];
+        userSelectListName: string[];
     }) => void;
     suggestionPosition?: 'top' | 'bottom' | 'left' | 'right';
 }

package/dist/MentionInput.js

@@ -9,15 +9,20 @@ var MentionInput = function (_a) {
     var inputRef = useRef(null);
     var suggestionListRef = useRef(null);
     var caretOffsetRef = useRef(0);
+    var userSelectListRef = useRef([]); // Only unique names
+    var userSelectListWithIdsRef = useRef([]); // Unique IDs with names
     var highlightMentionsAndLinks = function (text) {
         // Regular expression for detecting links
         var linkRegex = /(https?:\/\/[^\s]+)/g;
-        // Regular expression for mentions
-        var mentionRegex = /@([^\s]+(?: [^\s]+)?)(?=\s|$)/g;
-        // First, highlight mentions
-        var highlightedText = text.replace(mentionRegex, '<span class="mention-highlight">@$1</span>');
-        // Then, highlight links
-        highlightedText = highlightedText.replace(linkRegex, '<a href="$1" target="_blank" rel="noopener noreferrer" class="link-highlight">$1</a>');
+        // Highlight links
+        var highlightedText = text.replace(linkRegex, '<a href="$1" target="_blank" rel="noopener noreferrer" class="link-highlight">$1</a>');
+        // Highlight mentions manually based on `userSelectListRef`
+        userSelectListRef === null || userSelectListRef === void 0 ? void 0 : userSelectListRef.current.forEach(function (userName) {
+            var mentionPattern = new RegExp("@".concat(userName, "(\\s|$)"), "g");
+            highlightedText = highlightedText.replace(mentionPattern, function (match, trailingSpace) {
+                return "<span class=\"mention-highlight\">".concat(match.trim(), "</span>&nbsp;");
+            });
+        });
         return highlightedText;
     };
     var restoreCaretPosition = function (node, caretOffset) {
@@ -122,33 +127,53 @@ var MentionInput = function (_a) {
         var plainText = inputValue;
         var caretOffset = caretOffsetRef.current;
         var mentionMatch = plainText.slice(0, caretOffset).match(/@(\S*)$/);
+        if (!userSelectListRef.current.includes(user.name)) {
+            userSelectListRef.current.push(user.name);
+        }
+        // Check if the ID is already stored
+        var isIdExists = userSelectListWithIdsRef.current.some(function (item) { return item.id === user.id; });
+        if (!isIdExists) {
+            userSelectListWithIdsRef.current.push(user);
+        }
         if (!mentionMatch)
             return;
         var mentionIndex = plainText.slice(0, caretOffset).lastIndexOf("@");
-        var newValue = plainText.substring(0, mentionIndex + 1) + user.name + plainText.substring(caretOffset);
+        // Append space after the mention
+        var newValue = plainText.substring(0, mentionIndex + 1) + user.name + " " + plainText.substring(caretOffset);
         setInputValue(newValue);
         inputRef.current.innerText = newValue;
+        // Highlight mentions and links with &nbsp;
         var htmlWithHighlights = highlightMentionsAndLinks(newValue);
+        // Set highlighted content
         inputRef.current.innerHTML = htmlWithHighlights;
         setShowSuggestions(false);
+        // Adjust caret position after adding the mention and space
         var mentionEnd = mentionIndex + user.name.length + 1;
-        restoreCaretPosition(inputRef.current, mentionEnd);
+        restoreCaretPosition(inputRef.current, mentionEnd + 1); // +1 for the space
     };
     var handleSendMessage = function () {
         if (inputRef.current) {
             var messageText = inputRef.current.innerText.trim(); // Plain text
             var messageHTML = inputRef.current.innerHTML.trim(); // HTML with <span> highlighting
             if (messageText && onSendMessage) {
-                onSendMessage({ messageText: messageText, messageHTML: messageHTML }); // Pass both plain text and HTML
+                onSendMessage({ messageText: messageText, messageHTML: messageHTML, userSelectListWithIds: userSelectListWithIdsRef.current, userSelectListName: userSelectListRef.current }); // Pass both plain text and HTML
                 setInputValue(""); // Clear state
                 setShowSuggestions(false); // Hide suggestions
                 inputRef.current.innerText = ""; // Clear input field
+                userSelectListRef.current = [];
+                userSelectListWithIdsRef.current = [];
             }
         }
     };
+    var handleKeyDown = function (event) {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault(); // Prevent newline in content-editable
+            handleSendMessage(); // Trigger the same function as the Send button
+        }
+    };
     return (React.createElement("div", { className: "mention-container ".concat(containerClassName || "") },
         React.createElement("div", { className: "mention-input-container ".concat(inputContainerClassName || "") },
-            React.createElement("div", { ref: inputRef, contentEditable: true, suppressContentEditableWarning: true, className: "mention-input ".concat(inputClassName || ""), onInput: handleInputChange }),
+            React.createElement("div", { ref: inputRef, contentEditable: true, suppressContentEditableWarning: true, className: "mention-input ".concat(inputClassName || ""), onInput: handleInputChange, onKeyDown: handleKeyDown }),
             React.createElement("button", { onClick: handleSendMessage, className: "send-button ".concat(sendBtnClassName || "") }, sendButtonIcon || "➤")),
         renderSuggestions()));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mention-input",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/src/MentionInput.tsx

@@ -17,7 +17,7 @@ interface MentionInputProps {
   suggestionListClassName?: string;
   suggestionItemClassName?: string;
   sendButtonIcon?: ReactNode; // Button icon (MUI icon or image path)
-  onSendMessage?: (obj:{messageText: string, messageHTML: string}) => void;
+  onSendMessage?: (obj:{messageText: string, messageHTML: string,userSelectListWithIds:{ id: number; name: string }[],userSelectListName:string[]}) => void;
   suggestionPosition?: 'top' | 'bottom' | 'left' | 'right'; // New prop for tooltip position
 }
 
@@ -37,32 +37,39 @@ const MentionInput: React.FC<MentionInputProps> = ({
   const [inputValue, setInputValue] = useState<string>(""); // Plain text
   const [suggestions, setSuggestions] = useState<User[]>([]);
   const [showSuggestions, setShowSuggestions] = useState<boolean>(false);
+  
+
 
   const inputRef = useRef<HTMLDivElement>(null);
   const suggestionListRef = useRef<HTMLUListElement>(null);
   const caretOffsetRef = useRef<number>(0);
+  const userSelectListRef = useRef<string[]>([]); // Only unique names
+  const userSelectListWithIdsRef = useRef<{ id: number; name: string }[]>([]); // Unique IDs with names
 
   const highlightMentionsAndLinks = (text: string): string => {
     // Regular expression for detecting links
     const linkRegex = /(https?:\/\/[^\s]+)/g;
   
-    // Regular expression for mentions
-    const mentionRegex = /@([^\s]+(?: [^\s]+)?)(?=\s|$)/g;
-  
-    // First, highlight mentions
+    // Highlight links
     let highlightedText = text.replace(
-      mentionRegex,
-      '<span class="mention-highlight">@$1</span>'
-    );
-  
-    // Then, highlight links
-    highlightedText = highlightedText.replace(
       linkRegex,
       '<a href="$1" target="_blank" rel="noopener noreferrer" class="link-highlight">$1</a>'
     );
   
+    // Highlight mentions manually based on `userSelectListRef`
+    userSelectListRef?.current.forEach((userName) => {
+      const mentionPattern = new RegExp(`@${userName}(\\s|$)`, "g");
+      highlightedText = highlightedText.replace(
+        mentionPattern,
+        (match, trailingSpace) => {
+          return `<span class="mention-highlight">${match.trim()}</span>&nbsp;`;
+        }
+      );
+    });
+  
     return highlightedText;
   };
+  
 
   const restoreCaretPosition = (node: HTMLElement, caretOffset: number) => {
     const range = document.createRange();
@@ -191,28 +198,45 @@ const MentionInput: React.FC<MentionInputProps> = ({
 
   const handleSuggestionClick = (user: User) => {
     if (!inputRef.current) return;
-
+  
     const plainText = inputValue;
     const caretOffset = caretOffsetRef.current;
     const mentionMatch = plainText.slice(0, caretOffset).match(/@(\S*)$/);
-
+  
+    if (!userSelectListRef.current.includes(user.name)) {
+      userSelectListRef.current.push(user.name);
+    }
+  
+    // Check if the ID is already stored
+    const isIdExists = userSelectListWithIdsRef.current.some(
+      (item) => item.id === user.id
+    );
+    if (!isIdExists) {
+      userSelectListWithIdsRef.current.push(user);
+    }
+  
     if (!mentionMatch) return;
-
+  
     const mentionIndex = plainText.slice(0, caretOffset).lastIndexOf("@");
-
+  
+    // Append space after the mention
     const newValue =
-      plainText.substring(0, mentionIndex + 1) + user.name + plainText.substring(caretOffset);
-
+      plainText.substring(0, mentionIndex + 1) + user.name + " " + plainText.substring(caretOffset);
+  
     setInputValue(newValue);
     inputRef.current.innerText = newValue;
-
+  
+    // Highlight mentions and links with &nbsp;
     const htmlWithHighlights = highlightMentionsAndLinks(newValue);
+  
+    // Set highlighted content
     inputRef.current.innerHTML = htmlWithHighlights;
-
+  
     setShowSuggestions(false);
-
+  
+    // Adjust caret position after adding the mention and space
     const mentionEnd = mentionIndex + user.name.length + 1;
-    restoreCaretPosition(inputRef.current, mentionEnd);
+    restoreCaretPosition(inputRef.current, mentionEnd + 1); // +1 for the space
   };
 
   const handleSendMessage = () => {
@@ -221,14 +245,23 @@ const MentionInput: React.FC<MentionInputProps> = ({
       const messageHTML = inputRef.current.innerHTML.trim(); // HTML with <span> highlighting
   
       if (messageText && onSendMessage) {
-        onSendMessage({messageText, messageHTML}); // Pass both plain text and HTML
+        onSendMessage({messageText, messageHTML,userSelectListWithIds:userSelectListWithIdsRef.current,userSelectListName:userSelectListRef.current }); // Pass both plain text and HTML
         setInputValue(""); // Clear state
         setShowSuggestions(false); // Hide suggestions
         inputRef.current.innerText = ""; // Clear input field
+        userSelectListRef.current = []
+        userSelectListWithIdsRef.current = []
       }
     }
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault(); // Prevent newline in content-editable
+      handleSendMessage(); // Trigger the same function as the Send button
+    }
+  };
+
 
 
   return (
@@ -240,6 +273,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
           suppressContentEditableWarning
           className={`mention-input ${inputClassName || ""}`}
           onInput={handleInputChange}
+          onKeyDown={handleKeyDown} // Add keydown listener
         ></div>
         <button
           onClick={handleSendMessage}