react-mention-input 1.1.2 → 1.1.4

package/README.md

@@ -37,7 +37,8 @@ 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`         | `(message: string) => void`       | Callback function triggered on sending a message. |
+| `onSendMessage`         | `(obj: {messageText: string, messageHTML: string}) => void` | Callback function triggered on sending a message, providing both plain text and HTML. |
+| `suggestionPosition`    | `'top' | 'bottom' | 'left' | 'right'` | Position of the suggestion dropdown relative to the input. Default is `bottom`. |
 
 #### Example Usage
 
@@ -51,8 +52,9 @@ const users = [
 ];
 
 function App() {
-  const handleSendMessage = (message: string) => {
-    console.log('Message sent:', message);
+  const handleSendMessage = ({messageText, messageHTML}) => {
+    console.log('Message Text:', messageText);
+    console.log('Message HTML:', messageHTML);
   };
 
   return (
@@ -61,6 +63,7 @@ function App() {
       placeholder="Type @ to mention someone..."
       sendButtonIcon={<SendIcon />} // Optional MUI icon or image path
       onSendMessage={handleSendMessage}
+      suggestionPosition="top" // Customize suggestion position (top, bottom, left, right)
     />
   );
 }

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.d.ts

@@ -14,7 +14,11 @@ interface MentionInputProps {
     suggestionListClassName?: string;
     suggestionItemClassName?: string;
     sendButtonIcon?: ReactNode;
-    onSendMessage?: (message: string) => void;
+    onSendMessage?: (obj: {
+        messageText: string;
+        messageHTML: string;
+    }) => void;
+    suggestionPosition?: 'top' | 'bottom' | 'left' | 'right';
 }
 declare const MentionInput: React.FC<MentionInputProps>;
 export default MentionInput;

package/dist/MentionInput.js

@@ -2,17 +2,23 @@ import React, { useState, useRef } from "react";
 import ReactDOM from "react-dom";
 import "./MentionInput.css";
 var MentionInput = function (_a) {
-    var users = _a.users, _b = _a.placeholder, placeholder = _b === void 0 ? "Type a message..." : _b, containerClassName = _a.containerClassName, inputContainerClassName = _a.inputContainerClassName, inputClassName = _a.inputClassName, sendBtnClassName = _a.sendBtnClassName, suggestionListClassName = _a.suggestionListClassName, suggestionItemClassName = _a.suggestionItemClassName, sendButtonIcon = _a.sendButtonIcon, onSendMessage = _a.onSendMessage;
-    var _c = useState(""), inputValue = _c[0], setInputValue = _c[1]; // Plain text
-    var _d = useState([]), suggestions = _d[0], setSuggestions = _d[1];
-    var _e = useState(false), showSuggestions = _e[0], setShowSuggestions = _e[1];
-    var _f = useState('bottom'), tooltipPosition = _f[0], setTooltipPosition = _f[1];
+    var users = _a.users, _b = _a.placeholder, placeholder = _b === void 0 ? "Type a message..." : _b, containerClassName = _a.containerClassName, inputContainerClassName = _a.inputContainerClassName, inputClassName = _a.inputClassName, sendBtnClassName = _a.sendBtnClassName, suggestionListClassName = _a.suggestionListClassName, suggestionItemClassName = _a.suggestionItemClassName, sendButtonIcon = _a.sendButtonIcon, onSendMessage = _a.onSendMessage, _c = _a.suggestionPosition, suggestionPosition = _c === void 0 ? 'bottom' : _c;
+    var _d = useState(""), inputValue = _d[0], setInputValue = _d[1]; // Plain text
+    var _e = useState([]), suggestions = _e[0], setSuggestions = _e[1];
+    var _f = useState(false), showSuggestions = _f[0], setShowSuggestions = _f[1];
     var inputRef = useRef(null);
     var suggestionListRef = useRef(null);
     var caretOffsetRef = useRef(0);
-    var highlightMentions = function (text) {
-        return text.replace(/@([^\s]+(?: [^\s]+)?)(?=\s|$)/g, // Match @ followed by one or two words, ending with a space or end of string
-        '<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();
@@ -56,12 +62,11 @@ var MentionInput = function (_a) {
             var preCaretRange = range.cloneRange();
             preCaretRange.selectNodeContents(inputRef.current);
             preCaretRange.setEnd(range.startContainer, range.startOffset);
-            newCaretOffset = preCaretRange.toString().length; // Calculate caret offset
+            newCaretOffset = preCaretRange.toString().length;
         }
-        caretOffsetRef.current = newCaretOffset; // Update ref directly
+        caretOffsetRef.current = newCaretOffset;
         var plainText = inputRef.current.innerText;
         setInputValue(plainText);
-        // Handle mentions and suggestions
         var mentionMatch = plainText.slice(0, newCaretOffset).match(/@(\S*)$/);
         if (mentionMatch) {
             var query_1 = mentionMatch[1].toLowerCase();
@@ -73,49 +78,22 @@ 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;
         }
         restoreCaretPosition(inputRef.current, newCaretOffset);
     };
-    var handleSuggestionClick = function (user) {
-        if (!inputRef.current)
-            return;
-        var plainText = inputValue; // Current input value
-        var caretOffset = caretOffsetRef.current; // Use ref value for caret offset
-        var mentionMatch = plainText.slice(0, caretOffset).match(/@(\S*)$/);
-        if (!mentionMatch)
-            return;
-        var mentionIndex = plainText.slice(0, caretOffset).lastIndexOf("@");
-        var newValue = plainText.substring(0, mentionIndex + 1) + user.name + plainText.substring(caretOffset);
-        setInputValue(newValue);
-        inputRef.current.innerText = newValue;
-        var htmlWithHighlights = highlightMentions(newValue);
-        inputRef.current.innerHTML = htmlWithHighlights;
-        setShowSuggestions(false);
-        var mentionEnd = mentionIndex + user.name.length + 1;
-        restoreCaretPosition(inputRef.current, mentionEnd);
-    };
-    var handleSendMessage = function () {
-        if (inputValue.trim() && onSendMessage) {
-            onSendMessage(inputValue.trim());
-            setInputValue("");
-            setShowSuggestions(false);
-            if (inputRef.current)
-                inputRef.current.innerText = "";
-        }
-    };
     var renderSuggestions = function () {
         if (!showSuggestions || !inputRef.current)
             return null;
         var inputRect = inputRef.current.getBoundingClientRect();
         var styles = {
             position: 'absolute',
-            zIndex: 1000
+            zIndex: 1000,
         };
-        // Adjust position based on calculated tooltip position
-        switch (tooltipPosition) {
+        // Use suggestionPosition prop to adjust tooltip position
+        switch (suggestionPosition) {
             case 'top':
                 styles.left = "".concat(inputRect.left, "px");
                 styles.top = "".concat(inputRect.top - 150, "px");
@@ -135,10 +113,39 @@ var MentionInput = function (_a) {
             default:
                 break;
         }
-        console.log("document.body", document.body);
         return ReactDOM.createPortal(React.createElement("ul", { className: "suggestion-list ".concat(suggestionListClassName || ''), ref: suggestionListRef, style: styles }, suggestions.map(function (user) { return (React.createElement("li", { key: user.id, onClick: function () { return handleSuggestionClick(user); }, className: "suggestion-item ".concat(suggestionItemClassName || ''), role: "option", tabIndex: 0, "aria-selected": "false" }, user.name)); })), window.document.body // Render in portal
         );
     };
+    var handleSuggestionClick = function (user) {
+        if (!inputRef.current)
+            return;
+        var plainText = inputValue;
+        var caretOffset = caretOffsetRef.current;
+        var mentionMatch = plainText.slice(0, caretOffset).match(/@(\S*)$/);
+        if (!mentionMatch)
+            return;
+        var mentionIndex = plainText.slice(0, caretOffset).lastIndexOf("@");
+        var newValue = plainText.substring(0, mentionIndex + 1) + user.name + plainText.substring(caretOffset);
+        setInputValue(newValue);
+        inputRef.current.innerText = newValue;
+        var htmlWithHighlights = highlightMentionsAndLinks(newValue);
+        inputRef.current.innerHTML = htmlWithHighlights;
+        setShowSuggestions(false);
+        var mentionEnd = mentionIndex + user.name.length + 1;
+        restoreCaretPosition(inputRef.current, mentionEnd);
+    };
+    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
+                setInputValue(""); // Clear state
+                setShowSuggestions(false); // Hide suggestions
+                inputRef.current.innerText = ""; // Clear input field
+            }
+        }
+    };
     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 }),

package/dist/ShowMessageCard.css

@@ -67,3 +67,9 @@
   font-size: 16px;
   line-height: 1.5; /* Optimal line height for readability */
 }
+.mention-highlight {
+  background-color: #e0f7fa;
+  color: #007bff;
+  padding: 2px 4px;
+  border-radius: 4px;
+}

package/dist/ShowMessageCard.js

@@ -44,6 +44,6 @@ export var ShowMessageCard = function (_a) {
                     React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
                     React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
             React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
-                React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle }, item[commentKey]))));
+                React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }))));
     })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mention-input",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "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

@@ -16,8 +16,9 @@ interface MentionInputProps {
   sendBtnClassName?: string;
   suggestionListClassName?: string;
   suggestionItemClassName?: string;
-  sendButtonIcon?: ReactNode; // New prop for button icon (MUI icon or image path)
-  onSendMessage?: (message: string) => void;
+  sendButtonIcon?: ReactNode; // Button icon (MUI icon or image path)
+  onSendMessage?: (obj:{messageText: string, messageHTML: string}) => void;
+  suggestionPosition?: 'top' | 'bottom' | 'left' | 'right'; // New prop for tooltip position
 }
 
 const MentionInput: React.FC<MentionInputProps> = ({
@@ -31,24 +32,36 @@ const MentionInput: React.FC<MentionInputProps> = ({
   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 [tooltipPosition, setTooltipPosition] = useState<'top' | 'bottom' | 'left' | 'right'>(
-    'bottom'
-  );
 
   const inputRef = useRef<HTMLDivElement>(null);
   const suggestionListRef = useRef<HTMLUListElement>(null);
   const caretOffsetRef = useRef<number>(0);
-  
 
-  const highlightMentions = (text: string): string => {
-    return text.replace(
-      /@([^\s]+(?: [^\s]+)?)(?=\s|$)/g, // Match @ followed by one or two words, ending with a space or end of string
+  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) => {
@@ -93,15 +106,14 @@ const MentionInput: React.FC<MentionInputProps> = ({
       const preCaretRange = range.cloneRange();
       preCaretRange.selectNodeContents(inputRef.current);
       preCaretRange.setEnd(range.startContainer, range.startOffset);
-      newCaretOffset = preCaretRange.toString().length; // Calculate caret offset
+      newCaretOffset = preCaretRange.toString().length;
     }
   
-    caretOffsetRef.current = newCaretOffset; // Update ref directly
+    caretOffsetRef.current = newCaretOffset;
   
     const plainText = inputRef.current.innerText;
     setInputValue(plainText);
   
-    // Handle mentions and suggestions
     const mentionMatch = plainText.slice(0, newCaretOffset).match(/@(\S*)$/);
     if (mentionMatch) {
       const query = mentionMatch[1].toLowerCase();
@@ -114,47 +126,14 @@ const MentionInput: React.FC<MentionInputProps> = ({
     }
   
     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 handleSuggestionClick = (user: User) => {
-    if (!inputRef.current) return;
-  
-    const plainText = inputValue; // Current input value
-    const caretOffset = caretOffsetRef.current; // Use ref value for caret offset
-    const mentionMatch = plainText.slice(0, caretOffset).match(/@(\S*)$/);
-  
-    if (!mentionMatch) return;
-  
-    const mentionIndex = plainText.slice(0, caretOffset).lastIndexOf("@");
   
-    const newValue =
-      plainText.substring(0, mentionIndex + 1) + user.name + plainText.substring(caretOffset);
-  
-    setInputValue(newValue);
-    inputRef.current.innerText = newValue;
-  
-    const htmlWithHighlights = highlightMentions(newValue);
-    inputRef.current.innerHTML = htmlWithHighlights;
-  
-    setShowSuggestions(false);
-  
-    const mentionEnd = mentionIndex + user.name.length + 1;
-    restoreCaretPosition(inputRef.current, mentionEnd);
-  };
-  const handleSendMessage = () => {
-    if (inputValue.trim() && onSendMessage) {
-      onSendMessage(inputValue.trim());
-      setInputValue("");
-      setShowSuggestions(false);
-      if (inputRef.current) inputRef.current.innerText = "";
-    }
-  };
 
   const renderSuggestions = () => {
     if (!showSuggestions || !inputRef.current) return null;
@@ -162,11 +141,11 @@ const MentionInput: React.FC<MentionInputProps> = ({
     const inputRect = inputRef.current.getBoundingClientRect();
     const styles: React.CSSProperties = {
       position: 'absolute',
-      zIndex: 1000
+      zIndex: 1000,
     };
 
-    // Adjust position based on calculated tooltip position
-    switch (tooltipPosition) {
+    // Use suggestionPosition prop to adjust tooltip position
+    switch (suggestionPosition) {
       case 'top':
         styles.left = `${inputRect.left}px`;
         styles.top = `${inputRect.top - 150}px`;
@@ -187,7 +166,6 @@ const MentionInput: React.FC<MentionInputProps> = ({
         break;
     }
 
-    console.log("document.body",document.body);
     return ReactDOM.createPortal(
       <ul
         className={`suggestion-list ${suggestionListClassName || ''}`}
@@ -211,6 +189,48 @@ 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 (!mentionMatch) return;
+
+    const mentionIndex = plainText.slice(0, caretOffset).lastIndexOf("@");
+
+    const newValue =
+      plainText.substring(0, mentionIndex + 1) + user.name + plainText.substring(caretOffset);
+
+    setInputValue(newValue);
+    inputRef.current.innerText = newValue;
+
+    const htmlWithHighlights = highlightMentionsAndLinks(newValue);
+    inputRef.current.innerHTML = htmlWithHighlights;
+
+    setShowSuggestions(false);
+
+    const mentionEnd = mentionIndex + user.name.length + 1;
+    restoreCaretPosition(inputRef.current, mentionEnd);
+  };
+
+  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}); // Pass both plain text and HTML
+        setInputValue(""); // Clear state
+        setShowSuggestions(false); // Hide suggestions
+        inputRef.current.innerText = ""; // Clear input field
+      }
+    }
+  };
+
+
+
   return (
     <div className={`mention-container ${containerClassName || ""}`}>
       <div className={`mention-input-container ${inputContainerClassName || ""}`}>

package/src/ShowMessageCard.css

@@ -67,3 +67,9 @@
   font-size: 16px;
   line-height: 1.5; /* Optimal line height for readability */
 }
+.mention-highlight {
+  background-color: #e0f7fa;
+  color: #007bff;
+  padding: 2px 4px;
+  border-radius: 4px;
+}

package/src/ShowMessageCard.tsx

@@ -146,12 +146,17 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
               className={`message-card-body ${bodyClassName || ""}`}
               style={bodyStyle}
             >
-              <p
+              {/* <p
                 className={`message-card-comment ${commentClassName || ""}`}
                 style={commentStyle}
               >
                 {item[commentKey]}
-              </p>
+              </p> */}
+              <p
+  className={`message-card-comment ${commentClassName || ""}`}
+  style={commentStyle}
+  dangerouslySetInnerHTML={{ __html: item[commentKey] }}
+></p>
             </div>
           </div>
         );
@@ -160,4 +165,3 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
   );
 };
 
-