react-mention-input 1.1.6 → 1.1.8

package/src/MentionInput.tsx

@@ -1,290 +1,300 @@
-import React, { useState, useRef, useEffect, ReactNode } from "react";
-import ReactDOM from "react-dom";
-import "./MentionInput.css";
-
-interface User {
-  id: number;
-  name: string; // Full name, e.g., "John Heart"
-}
-
-interface MentionInputProps {
-  users: User[];
-  placeholder?: string;
-  containerClassName?: string;
-  inputContainerClassName?: string;
-  inputClassName?: string;
-  sendBtnClassName?: string;
-  suggestionListClassName?: string;
-  suggestionItemClassName?: string;
-  sendButtonIcon?: ReactNode; // Button icon (MUI icon or image path)
-  onSendMessage?: (obj:{messageText: string, messageHTML: string,userSelectListWithIds:{ id: number; name: string }[],userSelectListName:string[]}) => void;
-  suggestionPosition?: 'top' | 'bottom' | 'left' | 'right'; // New prop for tooltip position
-}
-
-const MentionInput: React.FC<MentionInputProps> = ({
-  users,
-  placeholder = "Type a message...",
-  containerClassName,
-  inputContainerClassName,
-  inputClassName,
-  sendBtnClassName,
-  suggestionListClassName,
-  suggestionItemClassName,
-  sendButtonIcon,
-  onSendMessage,
-  suggestionPosition = 'bottom', // Default position is bottom
-}) => {
-  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;
-  
-    // Highlight links
-    let highlightedText = text.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();
-    const sel = window.getSelection();
-    let charCount = 0;
-
-    const findCaret = (currentNode: Node) => {
-      for (const child of Array.from(currentNode.childNodes)) {
-        if (child.nodeType === Node.TEXT_NODE) {
-          const textLength = child.textContent?.length || 0;
-          if (charCount + textLength >= caretOffset) {
-            range.setStart(child, caretOffset - charCount);
-            range.collapse(true);
-            return true;
-          } else {
-            charCount += textLength;
-          }
-        } else if (child.nodeType === Node.ELEMENT_NODE) {
-          if (findCaret(child)) return true;
-        }
-      }
-      return false;
-    };
-
-    findCaret(node);
-
-    if (sel) {
-      sel.removeAllRanges();
-      sel.addRange(range);
-    }
-  };
-
-  const handleInputChange = () => {
-    if (!inputRef.current) return;
-  
-    const selection = window.getSelection();
-    const range = selection?.getRangeAt(0);
-  
-    let newCaretOffset = 0;
-    if (range && inputRef.current.contains(range.startContainer)) {
-      const preCaretRange = range.cloneRange();
-      preCaretRange.selectNodeContents(inputRef.current);
-      preCaretRange.setEnd(range.startContainer, range.startOffset);
-      newCaretOffset = preCaretRange.toString().length;
-    }
-  
-    caretOffsetRef.current = newCaretOffset;
-  
-    const plainText = inputRef.current.innerText;
-    setInputValue(plainText);
-  
-    const mentionMatch = plainText.slice(0, newCaretOffset).match(/@(\S*)$/);
-    if (mentionMatch) {
-      const query = mentionMatch[1].toLowerCase();
-      const filteredUsers = query === "" ? users : users.filter((user) => user.name.toLowerCase().startsWith(query));
-  
-      setSuggestions(filteredUsers);
-      setShowSuggestions(filteredUsers.length > 0);
-    } else {
-      setShowSuggestions(false);
-    }
-  
-    const previousHTML = inputRef.current.innerHTML;
-    const htmlWithHighlights = highlightMentionsAndLinks(plainText); // Updated function
-    if (previousHTML !== htmlWithHighlights) {
-      inputRef.current.innerHTML = htmlWithHighlights;
-    }
-  
-    restoreCaretPosition(inputRef.current, newCaretOffset);
-  };
-  
-
-  const renderSuggestions = () => {
-    if (!showSuggestions || !inputRef.current) return null;
-
-    const inputRect = inputRef.current.getBoundingClientRect();
-    const styles: React.CSSProperties = {
-      position: 'absolute',
-      zIndex: 1000,
-    };
-
-    // Use suggestionPosition prop to adjust tooltip position
-    switch (suggestionPosition) {
-      case 'top':
-        styles.left = `${inputRect.left}px`;
-        styles.top = `${inputRect.top - 150}px`;
-        break;
-      case 'bottom':
-        styles.left = `${inputRect.left}px`;
-        styles.top = `${inputRect.bottom}px`;
-        break;
-      case 'left':
-        styles.left = `${inputRect.left - 150}px`;
-        styles.top = `${inputRect.top}px`;
-        break;
-      case 'right':
-        styles.left = `${inputRect.right}px`;
-        styles.top = `${inputRect.top}px`;
-        break;
-      default:
-        break;
-    }
-
-    return ReactDOM.createPortal(
-      <ul
-        className={`suggestion-list ${suggestionListClassName || ''}`}
-        ref={suggestionListRef}
-        style={styles}
-      >
-        {suggestions.map((user) => (
-          <li
-            key={user.id}
-            onClick={() => handleSuggestionClick(user)}
-            className={`suggestion-item ${suggestionItemClassName || ''}`}
-            role="option"
-            tabIndex={0}
-            aria-selected="false"
-          >
-            {user.name}
-          </li>
-        ))}
-      </ul>,
-      window.document.body // Render in portal
-    );
-  };
-
-  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);
-  
-    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 + 1); // +1 for the space
-  };
-
-  const handleSendMessage = () => {
-    if (inputRef.current) {
-      const messageText = inputRef.current.innerText.trim(); // Plain text
-      const messageHTML = inputRef.current.innerHTML.trim(); // HTML with <span> highlighting
-  
-      if (messageText && onSendMessage) {
-        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 (
-    <div className={`mention-container ${containerClassName || ""}`}>
-      <div className={`mention-input-container ${inputContainerClassName || ""}`}>
-        <div
-          ref={inputRef}
-          contentEditable
-          suppressContentEditableWarning
-          className={`mention-input ${inputClassName || ""}`}
-          onInput={handleInputChange}
-          onKeyDown={handleKeyDown} // Add keydown listener
-        ></div>
-        <button
-          onClick={handleSendMessage}
-          className={`send-button ${sendBtnClassName || ""}`}
-        >
-          {sendButtonIcon || "➤"}
-        </button>
-      </div>
-      {renderSuggestions()}
-    </div>
-  );
-};
-
-export default MentionInput;
+import React, { useState, useRef, useEffect, ReactNode } from "react";
+import ReactDOM from "react-dom";
+import "./MentionInput.css";
+
+interface User {
+  id: number;
+  name: string; // Full name, e.g., "John Heart"
+}
+
+interface MentionInputProps {
+  users: User[];
+  placeholder?: string;
+  containerClassName?: string;
+  inputContainerClassName?: string;
+  inputClassName?: string;
+  sendBtnClassName?: string;
+  suggestionListClassName?: string;
+  suggestionItemClassName?: string;
+  sendButtonIcon?: ReactNode; // Button icon (MUI icon or image path)
+  onSendMessage?: (obj:{messageText: string, messageHTML: string,userSelectListWithIds:{ id: number; name: string }[],userSelectListName:string[]}) => void;
+  suggestionPosition?: 'top' | 'bottom' | 'left' | 'right'; // New prop for tooltip position
+}
+
+const MentionInput: React.FC<MentionInputProps> = ({
+  users,
+  placeholder = "Type a message...",
+  containerClassName,
+  inputContainerClassName,
+  inputClassName,
+  sendBtnClassName,
+  suggestionListClassName,
+  suggestionItemClassName,
+  sendButtonIcon,
+  onSendMessage,
+  suggestionPosition = 'bottom', // Default position is bottom
+}) => {
+  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;
+  
+    // Highlight links
+    let highlightedText = text.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();
+    const sel = window.getSelection();
+    let charCount = 0;
+
+    const findCaret = (currentNode: Node) => {
+      for (const child of Array.from(currentNode.childNodes)) {
+        if (child.nodeType === Node.TEXT_NODE) {
+          const textLength = child.textContent?.length || 0;
+          if (charCount + textLength >= caretOffset) {
+            range.setStart(child, caretOffset - charCount);
+            range.collapse(true);
+            return true;
+          } else {
+            charCount += textLength;
+          }
+        } else if (child.nodeType === Node.ELEMENT_NODE) {
+          if (findCaret(child)) return true;
+        }
+      }
+      return false;
+    };
+
+    findCaret(node);
+
+    if (sel) {
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+  };
+
+  const handleInputChange = () => {
+    if (!inputRef.current) return;
+  
+    const selection = window.getSelection();
+    const range = selection?.getRangeAt(0);
+  
+    let newCaretOffset = 0;
+    if (range && inputRef.current.contains(range.startContainer)) {
+      const preCaretRange = range.cloneRange();
+      preCaretRange.selectNodeContents(inputRef.current);
+      preCaretRange.setEnd(range.startContainer, range.startOffset);
+      newCaretOffset = preCaretRange.toString().length;
+    }
+  
+    caretOffsetRef.current = newCaretOffset;
+  
+    const plainText = inputRef.current.innerText;
+    setInputValue(plainText);
+  
+    const mentionMatch = plainText.slice(0, newCaretOffset).match(/@(\S*)$/);
+    if (mentionMatch) {
+      const query = mentionMatch[1].toLowerCase();
+      const filteredUsers = query === "" ? users : users.filter((user) => user.name.toLowerCase().startsWith(query));
+  
+      setSuggestions(filteredUsers);
+      setShowSuggestions(filteredUsers.length > 0);
+    } else {
+      setShowSuggestions(false);
+    }
+  
+    const previousHTML = inputRef.current.innerHTML;
+    const htmlWithHighlights = highlightMentionsAndLinks(plainText); // Updated function
+    if (previousHTML !== htmlWithHighlights) {
+      inputRef.current.innerHTML = htmlWithHighlights;
+    }
+  
+    restoreCaretPosition(inputRef.current, newCaretOffset);
+  };
+  
+
+  const renderSuggestions = () => {
+    if (!showSuggestions || !inputRef.current) return null;
+
+    const inputRect = inputRef.current.getBoundingClientRect();
+    const styles: React.CSSProperties = {
+      position: 'absolute',
+      zIndex: 1000,
+    };
+
+    const getInitials = (name: string) => {
+      const nameParts = name.split(" ");
+      const initials = nameParts
+        .map((part) => part[0]?.toUpperCase() || "") // Take the first letter of each part
+        .slice(0, 2) // Limit to 2 letters
+        .join("");
+      return initials;
+    };
+
+    // Use suggestionPosition prop to adjust tooltip position
+    switch (suggestionPosition) {
+      case 'top':
+        styles.left = `${inputRect.left}px`;
+        styles.top = `${inputRect.top - 150}px`;
+        break;
+      case 'bottom':
+        styles.left = `${inputRect.left}px`;
+        styles.top = `${inputRect.bottom}px`;
+        break;
+      case 'left':
+        styles.left = `${inputRect.left - 150}px`;
+        styles.top = `${inputRect.top}px`;
+        break;
+      case 'right':
+        styles.left = `${inputRect.right}px`;
+        styles.top = `${inputRect.top}px`;
+        break;
+      default:
+        break;
+    }
+
+    return ReactDOM.createPortal(
+      <ul
+        className={`suggestion-list ${suggestionListClassName || ''}`}
+        ref={suggestionListRef}
+        style={styles}
+      >
+        {suggestions.map((user) => (
+          <li
+            key={user.id}
+            onClick={() => handleSuggestionClick(user)}
+            className={`suggestion-item ${suggestionItemClassName || ''}`}
+            role="option"
+            tabIndex={0}
+            aria-selected="false"
+          >
+            <div className="user-icon">{getInitials(user?.name)}</div>
+            {user.name}
+          </li>
+        ))}
+      </ul>,
+      window.document.body // Render in portal
+    );
+  };
+
+  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);
+  
+    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 + 1); // +1 for the space
+  };
+
+  const handleSendMessage = () => {
+    if (inputRef.current) {
+      const messageText = inputRef.current.innerText.trim(); // Plain text
+      const messageHTML = inputRef.current.innerHTML.trim(); // HTML with <span> highlighting
+  
+      if (messageText && onSendMessage) {
+        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 (
+    <div className={`mention-container ${containerClassName || ""}`}>
+      <div className={`mention-input-container ${inputContainerClassName || ""}`}>
+        <div
+          ref={inputRef}
+          contentEditable
+          suppressContentEditableWarning
+          className={`mention-input ${inputClassName || ""}`}
+          onInput={handleInputChange}
+          onKeyDown={handleKeyDown} // Add keydown listener
+        ></div>
+        <button
+          onClick={handleSendMessage}
+          className={`send-button ${sendBtnClassName || ""}`}
+        >
+          {sendButtonIcon || "➤"}
+        </button>
+      </div>
+      {renderSuggestions()}
+    </div>
+  );
+};
+
+export default MentionInput;