react-mention-input 1.0.18 → 1.0.19

package/dist/MentionInput.css

@@ -42,23 +42,21 @@
   justify-content: center;
 }
 
+
+
 .suggestion-list {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  list-style: none;
-  margin: 4px 0;
-  padding: 0;
   max-height: 150px;
   overflow-y: auto;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  z-index: 1;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  z-index: 1000;
+  width: auto;
+  white-space: nowrap;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
+
 .suggestion-item {
   padding: 8px 12px;
   cursor: pointer;
@@ -69,3 +67,17 @@
 .suggestion-item:hover {
   background-color: #f5f5f5;
 }
+
+
+.mention-highlight {
+  background-color: #e0f7fa;
+  color: #007bff;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.mention-input .placeholder {
+  color: #aaa;
+  pointer-events: none;
+  position: absolute;
+}

package/dist/MentionInput.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import './MentionInput.css';
+import React, { ReactNode } from "react";
+import "./MentionInput.css";
 interface User {
     id: number;
     name: string;

package/dist/MentionInput.js

@@ -1,48 +1,147 @@
-import React, { useState } from 'react';
-import './MentionInput.css'; // Import the SCSS file
+import React, { useState, useRef } from "react";
+import ReactDOM from "react-dom";
+import "./MentionInput.css";
 var MentionInput = function (_a) {
-    var users = _a.users, placeholder = _a.placeholder, 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 _b = useState(''), inputValue = _b[0], setInputValue = _b[1];
-    var _c = useState([]), suggestions = _c[0], setSuggestions = _c[1];
-    var _d = useState(false), showSuggestions = _d[0], setShowSuggestions = _d[1];
-    var handleInputChange = function (e) {
-        var value = e.target.value;
-        setInputValue(value);
-        var mentionMatch = value.match(/@(\w*)$/);
+    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 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 restoreCaretPosition = function (node, caretOffset) {
+        var range = document.createRange();
+        var sel = window.getSelection();
+        var charCount = 0;
+        var findCaret = function (currentNode) {
+            var _a;
+            for (var _i = 0, _b = Array.from(currentNode.childNodes); _i < _b.length; _i++) {
+                var child = _b[_i];
+                if (child.nodeType === Node.TEXT_NODE) {
+                    var textLength = ((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.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);
+        }
+    };
+    var handleInputChange = function () {
+        if (!inputRef.current)
+            return;
+        var selection = window.getSelection();
+        var range = selection === null || selection === void 0 ? void 0 : selection.getRangeAt(0);
+        var newCaretOffset = 0;
+        if (range && inputRef.current.contains(range.startContainer)) {
+            var preCaretRange = range.cloneRange();
+            preCaretRange.selectNodeContents(inputRef.current);
+            preCaretRange.setEnd(range.startContainer, range.startOffset);
+            newCaretOffset = preCaretRange.toString().length; // Calculate caret offset
+        }
+        caretOffsetRef.current = newCaretOffset; // Update ref directly
+        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();
-            var filteredUsers = users.filter(function (user) {
-                return user.name.toLowerCase().startsWith(query_1);
-            });
+            var filteredUsers = query_1 === "" ? users : users.filter(function (user) { return user.name.toLowerCase().startsWith(query_1); });
             setSuggestions(filteredUsers);
-            setShowSuggestions(true);
+            setShowSuggestions(filteredUsers.length > 0);
         }
         else {
             setShowSuggestions(false);
         }
+        var previousHTML = inputRef.current.innerHTML;
+        var htmlWithHighlights = highlightMentions(plainText);
+        if (previousHTML !== htmlWithHighlights) {
+            inputRef.current.innerHTML = htmlWithHighlights;
+        }
+        restoreCaretPosition(inputRef.current, newCaretOffset);
     };
     var handleSuggestionClick = function (user) {
-        var mentionIndex = inputValue.lastIndexOf('@');
-        var newValue = "".concat(inputValue.substring(0, mentionIndex + 1)).concat(user.name, " ");
+        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(''); // Clear input after sending
+            setInputValue("");
+            setShowSuggestions(false);
+            if (inputRef.current)
+                inputRef.current.innerText = "";
         }
     };
-    var handleKeyPress = function (e) {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            handleSendMessage();
+    var renderSuggestions = function () {
+        if (!showSuggestions || !inputRef.current)
+            return null;
+        var inputRect = inputRef.current.getBoundingClientRect();
+        var styles = {
+            position: 'absolute',
+            zIndex: 1000
+        };
+        // Adjust position based on calculated tooltip position
+        switch (tooltipPosition) {
+            case 'top':
+                styles.left = "".concat(inputRect.left, "px");
+                styles.top = "".concat(inputRect.top - 150, "px");
+                break;
+            case 'bottom':
+                styles.left = "".concat(inputRect.left, "px");
+                styles.top = "".concat(inputRect.bottom, "px");
+                break;
+            case 'left':
+                styles.left = "".concat(inputRect.left - 150, "px");
+                styles.top = "".concat(inputRect.top, "px");
+                break;
+            case 'right':
+                styles.left = "".concat(inputRect.right, "px");
+                styles.top = "".concat(inputRect.top, "px");
+                break;
+            default:
+                break;
         }
+        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)); })), document.body // Render in portal
+        );
     };
-    return (React.createElement("div", { className: "mention-container ".concat(containerClassName || '') },
-        React.createElement("div", { className: "mention-input-container ".concat(inputContainerClassName || '') },
-            React.createElement("input", { type: "text", value: inputValue, onChange: handleInputChange, onKeyPress: handleKeyPress, placeholder: placeholder || 'Type a message...', className: "mention-input ".concat(inputClassName || '') }),
-            React.createElement("button", { onClick: handleSendMessage, className: "send-button ".concat(sendBtnClassName || '') }, sendButtonIcon ? (typeof sendButtonIcon === 'string' ? (React.createElement("img", { src: sendButtonIcon, alt: "Send Icon", style: { width: '20px', height: '20px' } })) : (sendButtonIcon)) : ('➤'))),
-        showSuggestions && (React.createElement("ul", { className: "suggestion-list ".concat(suggestionListClassName || '') }, suggestions.map(function (user) { return (React.createElement("li", { key: user.id, onClick: function () { return handleSuggestionClick(user); }, className: "suggestion-item ".concat(suggestionItemClassName || '') }, user.name)); })))));
+    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("button", { onClick: handleSendMessage, className: "send-button ".concat(sendBtnClassName || "") }, sendButtonIcon || "➤")),
+        renderSuggestions()));
 };
 export default MentionInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mention-input",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/src/MentionInput.css

@@ -42,23 +42,21 @@
   justify-content: center;
 }
 
+
+
 .suggestion-list {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  list-style: none;
-  margin: 4px 0;
-  padding: 0;
   max-height: 150px;
   overflow-y: auto;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  z-index: 1;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  z-index: 1000;
+  width: auto;
+  white-space: nowrap;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
+
 .suggestion-item {
   padding: 8px 12px;
   cursor: pointer;
@@ -69,3 +67,17 @@
 .suggestion-item:hover {
   background-color: #f5f5f5;
 }
+
+
+.mention-highlight {
+  background-color: #e0f7fa;
+  color: #007bff;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.mention-input .placeholder {
+  color: #aaa;
+  pointer-events: none;
+  position: absolute;
+}

package/src/MentionInput.tsx

@@ -1,9 +1,10 @@
-import React, { useState, ChangeEvent, KeyboardEvent, ReactNode } from 'react';
-import './MentionInput.css'; // Import the SCSS file
+import React, { useState, useRef, useEffect, ReactNode } from "react";
+import ReactDOM from "react-dom";
+import "./MentionInput.css";
 
 interface User {
   id: number;
-  name: string;
+  name: string; // Full name, e.g., "John Heart"
 }
 
 interface MentionInputProps {
@@ -19,9 +20,9 @@ interface MentionInputProps {
   onSendMessage?: (message: string) => void;
 }
 
- const MentionInput: React.FC<MentionInputProps> = ({
+const MentionInput: React.FC<MentionInputProps> = ({
   users,
-  placeholder,
+  placeholder = "Type a message...",
   containerClassName,
   inputContainerClassName,
   inputClassName,
@@ -31,92 +32,204 @@ interface MentionInputProps {
   sendButtonIcon,
   onSendMessage,
 }) => {
-  const [inputValue, setInputValue] = useState<string>('');
+  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
+      '<span class="mention-highlight">@$1</span>'
+    );
+  };
+
+  const restoreCaretPosition = (node: HTMLElement, caretOffset: number) => {
+    const range = document.createRange();
+    const sel = window.getSelection();
+    let charCount = 0;
 
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setInputValue(value);
+    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;
+    };
 
-    const mentionMatch = value.match(/@(\w*)$/);
+    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; // Calculate caret offset
+    }
+  
+    caretOffsetRef.current = newCaretOffset; // Update ref directly
+  
+    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();
-      const filteredUsers = users.filter((user) =>
-        user.name.toLowerCase().startsWith(query)
-      );
+      const filteredUsers = query === "" ? users : users.filter((user) => user.name.toLowerCase().startsWith(query));
+  
       setSuggestions(filteredUsers);
-      setShowSuggestions(true);
+      setShowSuggestions(filteredUsers.length > 0);
     } else {
       setShowSuggestions(false);
     }
+  
+    const previousHTML = inputRef.current.innerHTML;
+    const htmlWithHighlights = highlightMentions(plainText);
+    if (previousHTML !== htmlWithHighlights) {
+      inputRef.current.innerHTML = htmlWithHighlights;
+    }
+  
+    restoreCaretPosition(inputRef.current, newCaretOffset);
   };
 
   const handleSuggestionClick = (user: User) => {
-    const mentionIndex = inputValue.lastIndexOf('@');
-    const newValue = `${inputValue.substring(0, mentionIndex + 1)}${user.name} `;
+    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(''); // Clear input after sending
+      setInputValue("");
+      setShowSuggestions(false);
+      if (inputRef.current) inputRef.current.innerText = "";
     }
   };
 
-  const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      handleSendMessage();
+  const renderSuggestions = () => {
+    if (!showSuggestions || !inputRef.current) return null;
+
+    const inputRect = inputRef.current.getBoundingClientRect();
+    const styles: React.CSSProperties = {
+      position: 'absolute',
+      zIndex: 1000
+    };
+
+    // Adjust position based on calculated tooltip position
+    switch (tooltipPosition) {
+      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 (
-    <div className={`mention-container ${containerClassName || ''}`}>
-
-      <div className={`mention-input-container ${inputContainerClassName || ''}`}>
-      <input
-        type="text"
-        value={inputValue}
-        onChange={handleInputChange}
-        onKeyPress={handleKeyPress}
-        placeholder={placeholder || 'Type a message...'}
-        className={`mention-input ${inputClassName || ''}`}
-      />
-      <button
-        onClick={handleSendMessage}
-        className={`send-button ${sendBtnClassName || ''}`}
+    return ReactDOM.createPortal(
+      <ul
+        className={`suggestion-list ${suggestionListClassName || ''}`}
+        ref={suggestionListRef}
+        style={styles}
       >
-        {sendButtonIcon ? (
-          typeof sendButtonIcon === 'string' ? (
-            <img src={sendButtonIcon} alt="Send Icon" style={{ width: '20px', height: '20px' }} />
-          ) : (
-            sendButtonIcon
-          )
-        ) : (
-          '➤'
-        )}
-      </button>
+        {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>,
+      document.body // Render in portal
+    );
+  };
 
+  return (
+    <div className={`mention-container ${containerClassName || ""}`}>
+      <div className={`mention-input-container ${inputContainerClassName || ""}`}>
+        <div
+          ref={inputRef}
+          contentEditable
+          suppressContentEditableWarning
+          className={`mention-input ${inputClassName || ""}`}
+          onInput={handleInputChange}
+        ></div>
+        <button
+          onClick={handleSendMessage}
+          className={`send-button ${sendBtnClassName || ""}`}
+        >
+          {sendButtonIcon || "➤"}
+        </button>
       </div>
-      {showSuggestions && (
-        <ul className={`suggestion-list ${suggestionListClassName || ''}`}>
-          {suggestions.map((user) => (
-            <li
-              key={user.id}
-              onClick={() => handleSuggestionClick(user)}
-              className={`suggestion-item ${suggestionItemClassName || ''}`}
-            >
-              {user.name}
-            </li>
-          ))}
-        </ul>
-      )}
+      {renderSuggestions()}
     </div>
   );
 };
 
- 
-export default MentionInput
+export default MentionInput;