react-mention-input 1.1.3 → 1.1.5

package/dist/MentionInput.css

@@ -95,4 +95,13 @@
   color: #aaa;
   pointer-events: none;
   position: absolute;
+}
+
+.link-highlight {
+  color: #007bff;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.link-highlight:hover {
+  color: #0056b3;
 }

package/dist/MentionInput.js

@@ -9,8 +9,16 @@ var MentionInput = function (_a) {
     var inputRef = useRef(null);
     var suggestionListRef = useRef(null);
     var caretOffsetRef = useRef(0);
-    var highlightMentions = function (text) {
-        return text.replace(/@([^\s]+(?: [^\s]+)?)(?=\s|$)/g, '<span class="mention-highlight">@$1</span>');
+    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>');
+        return highlightedText;
     };
     var restoreCaretPosition = function (node, caretOffset) {
         var range = document.createRange();
@@ -70,7 +78,7 @@ var MentionInput = function (_a) {
             setShowSuggestions(false);
         }
         var previousHTML = inputRef.current.innerHTML;
-        var htmlWithHighlights = highlightMentions(plainText);
+        var htmlWithHighlights = highlightMentionsAndLinks(plainText); // Updated function
         if (previousHTML !== htmlWithHighlights) {
             inputRef.current.innerHTML = htmlWithHighlights;
         }
@@ -120,7 +128,7 @@ var MentionInput = function (_a) {
         var newValue = plainText.substring(0, mentionIndex + 1) + user.name + plainText.substring(caretOffset);
         setInputValue(newValue);
         inputRef.current.innerText = newValue;
-        var htmlWithHighlights = highlightMentions(newValue);
+        var htmlWithHighlights = highlightMentionsAndLinks(newValue);
         inputRef.current.innerHTML = htmlWithHighlights;
         setShowSuggestions(false);
         var mentionEnd = mentionIndex + user.name.length + 1;
@@ -138,9 +146,15 @@ var MentionInput = function (_a) {
             }
         }
     };
+    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.3",
+  "version": "1.1.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/src/MentionInput.css

@@ -95,4 +95,13 @@
   color: #aaa;
   pointer-events: none;
   position: absolute;
+}
+
+.link-highlight {
+  color: #007bff;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.link-highlight:hover {
+  color: #0056b3;
 }

package/src/MentionInput.tsx

@@ -42,11 +42,26 @@ const MentionInput: React.FC<MentionInputProps> = ({
   const suggestionListRef = useRef<HTMLUListElement>(null);
   const caretOffsetRef = useRef<number>(0);
 
-  const highlightMentions = (text: string): string => {
-    return text.replace(
-      /@([^\s]+(?: [^\s]+)?)(?=\s|$)/g,
+  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
+    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>'
+    );
+  
+    return highlightedText;
   };
 
   const restoreCaretPosition = (node: HTMLElement, caretOffset: number) => {
@@ -82,10 +97,10 @@ const MentionInput: React.FC<MentionInputProps> = ({
 
   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();
@@ -93,31 +108,32 @@ const MentionInput: React.FC<MentionInputProps> = ({
       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 = highlightMentions(plainText);
+    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;
@@ -190,7 +206,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
     setInputValue(newValue);
     inputRef.current.innerText = newValue;
 
-    const htmlWithHighlights = highlightMentions(newValue);
+    const htmlWithHighlights = highlightMentionsAndLinks(newValue);
     inputRef.current.innerHTML = htmlWithHighlights;
 
     setShowSuggestions(false);
@@ -213,6 +229,13 @@ const MentionInput: React.FC<MentionInputProps> = ({
     }
   };
 
+  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 (
@@ -224,6 +247,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
           suppressContentEditableWarning
           className={`mention-input ${inputClassName || ""}`}
           onInput={handleInputChange}
+          onKeyDown={handleKeyDown} // Add keydown listener
         ></div>
         <button
           onClick={handleSendMessage}