react-mention-input 1.1.11 → 1.1.13

package/src/MentionInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, ReactNode } from "react";
+import React, { useState, useRef, ReactNode } from "react";
 import ReactDOM from "react-dom";
 import "./MentionInput.css";
 
@@ -16,27 +16,46 @@ interface MentionInputProps {
   sendBtnClassName?: string;
   suggestionListClassName?: string;
   suggestionItemClassName?: string;
+  imgClassName?: string; // New prop for image CSS class
+  imgStyle?: React.CSSProperties; // New prop for inline image styles
   sendButtonIcon?: ReactNode; // Button icon (MUI icon or image path)
-  onSendMessage?: (obj:{messageText: string, messageHTML: string,userSelectListWithIds:{ id: number; name: string }[],userSelectListName:string[]}) => void;
+  attachmentButtonIcon?: ReactNode; // New prop for attachment button icon
+  onSendMessage?: (obj: {
+    messageText: string;
+    messageHTML: string;
+    userSelectListWithIds: { id: number; name: string }[];
+    userSelectListName: string[];
+    images?: File[];
+    imageUrl?: string | null;
+  }) => void;
   suggestionPosition?: 'top' | 'bottom' | 'left' | 'right'; // New prop for tooltip position
+  onImageUpload?: (file: File) => Promise<string>; // New prop for image upload
 }
 
 const MentionInput: React.FC<MentionInputProps> = ({
   users,
-  placeholder = "Type a message...",
+  placeholder = "Type a message... (or drag & drop an image)",
   containerClassName,
   inputContainerClassName,
   inputClassName,
   sendBtnClassName,
   suggestionListClassName,
   suggestionItemClassName,
+  imgClassName,
+  imgStyle,
   sendButtonIcon,
+  attachmentButtonIcon,
   onSendMessage,
-  suggestionPosition = 'bottom', // Default position is bottom
+  suggestionPosition = 'bottom',
+  onImageUpload,
 }) => {
   const [inputValue, setInputValue] = useState<string>(""); // Plain text
   const [suggestions, setSuggestions] = useState<User[]>([]);
   const [showSuggestions, setShowSuggestions] = useState<boolean>(false);
+  const [selectedImage, setSelectedImage] = useState<File | null>(null);
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+  const [isDraggingOver, setIsDraggingOver] = useState<boolean>(false);
   
 
 
@@ -45,6 +64,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
   const caretOffsetRef = useRef<number>(0);
   const userSelectListRef = useRef<string[]>([]); // Only unique names
   const userSelectListWithIdsRef = useRef<{ id: number; name: string }[]>([]); // Unique IDs with names
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const highlightMentionsAndLinks = (text: string): string => {
     // Regular expression for detecting links
@@ -61,7 +81,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
       const mentionPattern = new RegExp(`@${userName}(\\s|$)`, "g");
       highlightedText = highlightedText.replace(
         mentionPattern,
-        (match, trailingSpace) => {
+        (match) => {
           return `<span class="mention-highlight">${match.trim()}</span>&nbsp;`;
         }
       );
@@ -104,10 +124,11 @@ const MentionInput: React.FC<MentionInputProps> = ({
 
   const handleInputChange = () => {
     if (!inputRef.current) return;
-  
+
+    // Store current selection before modifications
     const selection = window.getSelection();
     const range = selection?.getRangeAt(0);
-  
+    
     let newCaretOffset = 0;
     if (range && inputRef.current.contains(range.startContainer)) {
       const preCaretRange = range.cloneRange();
@@ -115,30 +136,38 @@ 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);
-  
+    
+    // Process for mention suggestions
     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));
-  
+      const filteredUsers = query === "" ? users : users.filter((user) => 
+        user.name.toLowerCase().includes(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;
+    
+    // Only apply highlighting if we have mentions or links to highlight
+    if (userSelectListRef.current.length > 0 || plainText.match(/(https?:\/\/[^\s]+)/g)) {
+      const currentHTML = inputRef.current.innerHTML;
+      const htmlWithHighlights = highlightMentionsAndLinks(plainText);
+      
+      // Only update if the highlighted HTML is different to avoid cursor jumping
+      if (currentHTML !== htmlWithHighlights) {
+        inputRef.current.innerHTML = htmlWithHighlights;
+        // Restore cursor position after changing innerHTML
+        restoreCaretPosition(inputRef.current, newCaretOffset);
+      }
     }
-  
-    restoreCaretPosition(inputRef.current, newCaretOffset);
   };
   
 
@@ -148,8 +177,8 @@ const MentionInput: React.FC<MentionInputProps> = ({
     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
+        .map((part) => part[0]?.toUpperCase() || "")
+        .slice(0, 2)
         .join("");
       return initials;
     };
@@ -183,26 +212,30 @@ const MentionInput: React.FC<MentionInputProps> = ({
     }
 
     return ReactDOM.createPortal(
-      <ul
-        className={`suggestion-list ${suggestionListClassName || ''}`}
-        ref={suggestionListRef}
+      <div 
+        className={`suggestion-container ${suggestionListClassName || ''}`}
         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
+        <ul
+          className="suggestion-list"
+          ref={suggestionListRef}
+        >
+          {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>
+              <span className="user-name">{user.name}</span>
+            </li>
+          ))}
+        </ul>
+      </div>,
+      window.document.body
     );
   };
 
@@ -249,18 +282,103 @@ const MentionInput: React.FC<MentionInputProps> = ({
     restoreCaretPosition(inputRef.current, mentionEnd + 1); // +1 for the space
   };
 
+  const handleImageSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files || []);
+    if (files.length > 0) {
+      const file = files[0];
+      if (file.type.startsWith('image/')) {
+        await uploadImage(file);
+      }
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // Only set dragging if files are being dragged
+    if (e.dataTransfer.types.includes('Files')) {
+      setIsDraggingOver(true);
+    }
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // Check if we're leaving the container, not just moving between children
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX;
+    const y = e.clientY;
+    
+    if (
+      x <= rect.left ||
+      x >= rect.right ||
+      y <= rect.top ||
+      y >= rect.bottom
+    ) {
+      setIsDraggingOver(false);
+    }
+  };
+
+  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDraggingOver(false);
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      const imageFiles = files.filter(file => file.type.startsWith('image/'));
+      if (imageFiles.length > 0) {
+        await uploadImage(imageFiles[0]);
+      }
+    }
+  };
+
+  const uploadImage = async (file: File) => {
+    if (!onImageUpload) {
+      // If no upload function provided, store the file directly
+      setSelectedImage(file);
+      setImageUrl(URL.createObjectURL(file));
+      return;
+    }
+
+    try {
+      setIsUploading(true);
+      const url = await onImageUpload(file);
+      setSelectedImage(file);
+      setImageUrl(url);
+    } catch (error) {
+      console.error('Error uploading image:', error);
+      // You might want to show an error message to the user
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const removeImage = () => {
+    setSelectedImage(null);
+    setImageUrl(null);
+  };
+
   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 messageText = inputRef.current.innerText.trim();
+      const messageHTML = inputRef.current.innerHTML.trim();
+
+      if ((messageText || selectedImage) && onSendMessage) {
+        onSendMessage({
+          messageText,
+          messageHTML,
+          userSelectListWithIds: userSelectListWithIdsRef.current,
+          userSelectListName: userSelectListRef.current,
+          images: selectedImage ? [selectedImage] : [],
+          imageUrl: imageUrl
+        });
+        setInputValue("");
+        setShowSuggestions(false);
+        inputRef.current.innerText = "";
+        setSelectedImage(null);
+        setImageUrl(null);
+        userSelectListRef.current = [];
+        userSelectListWithIdsRef.current = [];
       }
     }
   };
@@ -272,28 +390,84 @@ const MentionInput: React.FC<MentionInputProps> = ({
     }
   };
 
+  console.log(inputValue, inputRef.current?.innerText.trim(), "inputValue====")
 
   return (
     <div className={`mention-container ${containerClassName || ""}`}>
-      <div className={`mention-input-container ${inputContainerClassName || ""}`}>
-        {(!inputValue || !inputRef.current || inputRef.current?.innerText.trim() === "") ? (
-          <span className="placeholder">{placeholder}</span>
-        ) : null}
-        <div
-          ref={inputRef}
-          contentEditable
-          suppressContentEditableWarning
-          className={`mention-input ${inputClassName || ""}`}
-          onInput={handleInputChange}
-          onKeyDown={handleKeyDown} // Add keydown listener
+      {imageUrl && selectedImage && (
+        <div className="image-preview-card">
+          <img 
+            src={imageUrl} 
+            alt="Preview" 
+            className={imgClassName || ""}
+            style={imgStyle}
+          />
+          <button onClick={removeImage} className="remove-image-btn" aria-label="Remove image">
+            ×
+          </button>
+        </div>
+      )}
+      
+      <div 
+        className={`mention-input-container ${inputContainerClassName || ""} ${isDraggingOver ? 'dragging-over' : ''}`}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDragEnd={() => setIsDraggingOver(false)}
+        onDrop={handleDrop}
+      >
+        {isDraggingOver && (
+          <div className="drag-overlay">
+            <div className="drag-message">
+              <span>Drop to upload</span>
+            </div>
+          </div>
+        )}
+        
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          className="attachment-button"
+          type="button"
+          aria-label="Attach image"
         >
+          <span className="attachment-icon">{attachmentButtonIcon || "📷"}</span>
+        </button>
+        
+        <div className="mention-input-wrapper">
+          {(!inputValue || !inputRef.current || inputRef.current?.innerText.trim() === "") && (
+            <span className="placeholder">{placeholder}</span>
+          )}
+          <div
+            ref={inputRef}
+            contentEditable
+            suppressContentEditableWarning
+            className={`mention-input ${inputClassName || ""}`}
+            onInput={handleInputChange}
+            onKeyDown={handleKeyDown}
+            onFocus={() => document.execCommand('styleWithCSS', false, 'false')}
+          />
         </div>
+        
         <button
           onClick={handleSendMessage}
           className={`send-button ${sendBtnClassName || ""}`}
+          aria-label="Send message"
         >
           {sendButtonIcon || "➤"}
         </button>
+        
+        <input
+          type="file"
+          ref={fileInputRef}
+          accept="image/*"
+          onChange={handleImageSelect}
+          style={{ display: 'none' }}
+        />
+        
+        {isUploading && (
+          <div className="upload-loading">
+            <span>Uploading...</span>
+          </div>
+        )}
       </div>
       {renderSuggestions()}
     </div>