react-mention-input 1.1.30 → 1.1.31

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.1.31] - 2026-02-02
+
+### Fixed
+- **Font restriction enforcement**: Added paste event handler to strip all formatting (color, font-size, font-weight, font-family) from pasted content
+- Pasted text now uses the component's standard CSS styling instead of preserving source formatting
+- Prevents visual inconsistencies when users paste content from Word, websites, emails, or other formatted sources
+
+### Technical Details
+- Implemented `handlePaste` function using standard Clipboard API (`clipboardData.getData('text/plain')`)
+- Preserves newlines, special characters, and cursor position
+- Maintains full backward compatibility with existing features (mentions, links, images, keyboard shortcuts)
+- Uses W3C standard DOM APIs (Selection and Range)
+
+## [1.1.30] - Previous Release
+
+(Previous versions not documented)

package/dist/MentionInput.js

@@ -444,6 +444,33 @@ var MentionInput = function (_a) {
             }
         }
     };
+    var handlePaste = function (event) {
+        // Prevent default paste behavior to control formatting
+        event.preventDefault();
+        // Get plain text from clipboard (strips all HTML/formatting)
+        var text = event.clipboardData.getData('text/plain');
+        // If no text, do nothing
+        if (!text)
+            return;
+        // Get current selection
+        var selection = window.getSelection();
+        if (!selection || !selection.rangeCount)
+            return;
+        // Get the range where text will be inserted
+        var range = selection.getRangeAt(0);
+        // Delete any selected content first
+        range.deleteContents();
+        // Create a text node with the plain text (preserves newlines)
+        var textNode = document.createTextNode(text);
+        range.insertNode(textNode);
+        // Move cursor to end of inserted text
+        range.setStartAfter(textNode);
+        range.setEndAfter(textNode);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        // Trigger input change to update state and apply mention/link highlighting
+        handleInputChange();
+    };
     var handleKeyDown = function (event) {
         if (event.key === "Enter" && !event.shiftKey) {
             event.preventDefault(); // Prevent newline in content-editable
@@ -475,7 +502,7 @@ var MentionInput = function (_a) {
                 React.createElement("span", { className: "attachment-icon" }, attachmentButtonIcon || "📷")),
             React.createElement("div", { className: "mention-input-wrapper" },
                 (!inputValue || !inputRef.current || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.innerText.trim()) === "") && (React.createElement("span", { className: "placeholder" }, placeholder)),
-                React.createElement("div", { ref: inputRef, contentEditable: true, suppressContentEditableWarning: true, className: "mention-input ".concat(inputClassName || ""), onInput: handleInputChange, onKeyDown: handleKeyDown, onFocus: function () { return document.execCommand('styleWithCSS', false, 'false'); } })),
+                React.createElement("div", { ref: inputRef, contentEditable: true, suppressContentEditableWarning: true, className: "mention-input ".concat(inputClassName || ""), onInput: handleInputChange, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: function () { return document.execCommand('styleWithCSS', false, 'false'); } })),
             React.createElement("button", { onClick: handleSendMessage, className: "send-button ".concat(sendBtnClassName || ""), "aria-label": "Send message" }, sendButtonIcon || "➤"),
             React.createElement("input", { type: "file", ref: fileInputRef, accept: "image/*", onChange: handleImageSelect, style: { display: 'none' } }),
             isUploading && (React.createElement("div", { className: "upload-loading" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mention-input",
-  "version": "1.1.30",
+  "version": "1.1.31",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -42,4 +42,4 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }
-}
+}

package/src/MentionInput.tsx

@@ -65,14 +65,14 @@ const MentionInput: React.FC<MentionInputProps> = ({
   const [imageUrl, setImageUrl] = useState<string | null>(null);
   const [isUploading, setIsUploading] = useState<boolean>(false);
   const [isDraggingOver, setIsDraggingOver] = useState<boolean>(false);
-  
+
   // Use protected image hook to handle authenticated image URLs
   const displayImageUrl = useProtectedImage({
     url: imageUrl,
     isProtected: isProtectedUrl,
     getAuthHeaders,
   });
-  
+
 
 
   const inputRef = useRef<HTMLDivElement>(null);
@@ -85,13 +85,13 @@ const MentionInput: React.FC<MentionInputProps> = ({
   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");
@@ -102,7 +102,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
         }
       );
     });
-  
+
     return highlightedText;
   };
 
@@ -128,7 +128,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showSuggestions]);
-  
+
 
   const restoreCaretPosition = (node: HTMLElement, caretOffset: number) => {
     const range = document.createRange();
@@ -268,29 +268,29 @@ const MentionInput: React.FC<MentionInputProps> = ({
     const newCaretOffset = getCurrentCaretOffset();
 
     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) => 
+      const filteredUsers = query === "" ? users : users.filter((user) =>
         user.name.toLowerCase().includes(query)
       );
-      
+
       setSuggestions(filteredUsers);
       setShowSuggestions(filteredUsers.length > 0);
     } else {
       setShowSuggestions(false);
     }
-    
+
     // 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;
@@ -299,7 +299,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
       }
     }
   };
-  
+
 
   const renderSuggestions = () => {
     if (!showSuggestions || !inputRef.current) return null;
@@ -312,7 +312,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
         .join("");
       return initials;
     };
-    
+
     const inputRect = inputRef.current.getBoundingClientRect();
     const scrollLeft =
       window.scrollX ?? window.pageXOffset ?? document.documentElement.scrollLeft ?? 0;
@@ -349,7 +349,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
     }
 
     return ReactDOM.createPortal(
-      <div 
+      <div
         className={`suggestion-container ${suggestionListClassName || ''}`}
         style={styles}
       >
@@ -378,15 +378,15 @@ 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
@@ -394,26 +394,26 @@ const MentionInput: React.FC<MentionInputProps> = ({
     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
@@ -449,7 +449,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
     const rect = e.currentTarget.getBoundingClientRect();
     const x = e.clientX;
     const y = e.clientY;
-    
+
     if (
       x <= rect.left ||
       x >= rect.right ||
@@ -532,6 +532,40 @@ const MentionInput: React.FC<MentionInputProps> = ({
     }
   };
 
+  const handlePaste = (event: React.ClipboardEvent<HTMLDivElement>) => {
+    // Prevent default paste behavior to control formatting
+    event.preventDefault();
+
+    // Get plain text from clipboard (strips all HTML/formatting)
+    const text = event.clipboardData.getData('text/plain');
+
+    // If no text, do nothing
+    if (!text) return;
+
+    // Get current selection
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return;
+
+    // Get the range where text will be inserted
+    const range = selection.getRangeAt(0);
+
+    // Delete any selected content first
+    range.deleteContents();
+
+    // Create a text node with the plain text (preserves newlines)
+    const textNode = document.createTextNode(text);
+    range.insertNode(textNode);
+
+    // Move cursor to end of inserted text
+    range.setStartAfter(textNode);
+    range.setEndAfter(textNode);
+    selection.removeAllRanges();
+    selection.addRange(range);
+
+    // Trigger input change to update state and apply mention/link highlighting
+    handleInputChange();
+  };
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault(); // Prevent newline in content-editable
@@ -558,9 +592,9 @@ const MentionInput: React.FC<MentionInputProps> = ({
     <div className={`mention-container ${containerClassName || ""}`}>
       {displayImageUrl && selectedImage && (
         <div className={`image-preview-card ${attachedImageContainerClassName || ""}`} style={attachedImageContainerStyle}>
-          <img 
-            src={displayImageUrl} 
-            alt="Preview" 
+          <img
+            src={displayImageUrl}
+            alt="Preview"
             className={imgClassName || ""}
             style={imgStyle}
           />
@@ -569,8 +603,8 @@ const MentionInput: React.FC<MentionInputProps> = ({
           </button>
         </div>
       )}
-      
-      <div 
+
+      <div
         className={`mention-input-container ${inputContainerClassName || ""} ${isDraggingOver ? 'dragging-over' : ''}`}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -584,7 +618,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
             </div>
           </div>
         )}
-        
+
         <button
           onClick={() => fileInputRef.current?.click()}
           className="attachment-button"
@@ -593,7 +627,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
         >
           <span className="attachment-icon">{attachmentButtonIcon || "📷"}</span>
         </button>
-        
+
         <div className="mention-input-wrapper">
           {(!inputValue || !inputRef.current || inputRef.current?.innerText.trim() === "") && (
             <span className="placeholder">{placeholder}</span>
@@ -605,10 +639,11 @@ const MentionInput: React.FC<MentionInputProps> = ({
             className={`mention-input ${inputClassName || ""}`}
             onInput={handleInputChange}
             onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
             onFocus={() => document.execCommand('styleWithCSS', false, 'false')}
           />
         </div>
-        
+
         <button
           onClick={handleSendMessage}
           className={`send-button ${sendBtnClassName || ""}`}
@@ -616,7 +651,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
         >
           {sendButtonIcon || "➤"}
         </button>
-        
+
         <input
           type="file"
           ref={fileInputRef}
@@ -624,7 +659,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
           onChange={handleImageSelect}
           style={{ display: 'none' }}
         />
-        
+
         {isUploading && (
           <div className="upload-loading">
             <span>Uploading...</span>