react-mention-input 1.1.24 → 1.1.26

package/dist/MentionInput.d.ts

@@ -27,7 +27,6 @@ interface MentionInputProps {
             name: string;
         }[];
         userSelectListName: string[];
-        tags: string[];
         images?: File[];
         imageUrl?: string | null;
     }) => void;

package/dist/MentionInput.js

@@ -34,12 +34,21 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import React, { useState, useRef } from "react";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useState, useRef, useEffect } from "react";
 import ReactDOM from "react-dom";
 import "./MentionInput.css";
 var MentionInput = function (_a) {
     var _b;
-    var users = _a.users, _c = _a.placeholder, placeholder = _c === void 0 ? "Type a message... (or drag & drop an image)" : _c, containerClassName = _a.containerClassName, inputContainerClassName = _a.inputContainerClassName, inputClassName = _a.inputClassName, sendBtnClassName = _a.sendBtnClassName, suggestionListClassName = _a.suggestionListClassName, suggestionItemClassName = _a.suggestionItemClassName, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, attachedImageContainerClassName = _a.attachedImageContainerClassName, attachedImageContainerStyle = _a.attachedImageContainerStyle, sendButtonIcon = _a.sendButtonIcon, attachmentButtonIcon = _a.attachmentButtonIcon, onSendMessage = _a.onSendMessage, _d = _a.suggestionPosition, suggestionPosition = _d === void 0 ? 'bottom' : _d, onImageUpload = _a.onImageUpload;
+    var users = _a.users, _c = _a.placeholder, placeholder = _c === void 0 ? "Type a message... (or drag & drop an image)" : _c, containerClassName = _a.containerClassName, inputContainerClassName = _a.inputContainerClassName, inputClassName = _a.inputClassName, sendBtnClassName = _a.sendBtnClassName, suggestionListClassName = _a.suggestionListClassName, suggestionItemClassName = _a.suggestionItemClassName, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, attachedImageContainerClassName = _a.attachedImageContainerClassName, attachedImageContainerStyle = _a.attachedImageContainerStyle, sendButtonIcon = _a.sendButtonIcon, attachmentButtonIcon = _a.attachmentButtonIcon, onSendMessage = _a.onSendMessage, _d = _a.suggestionPosition, suggestionPosition = _d === void 0 ? 'top' : _d, onImageUpload = _a.onImageUpload;
     var _e = useState(""), inputValue = _e[0], setInputValue = _e[1]; // Plain text
     var _f = useState([]), suggestions = _f[0], setSuggestions = _f[1];
     var _g = useState(false), showSuggestions = _g[0], setShowSuggestions = _g[1];
@@ -52,19 +61,12 @@ var MentionInput = function (_a) {
     var caretOffsetRef = useRef(0);
     var userSelectListRef = useRef([]); // Only unique names
     var userSelectListWithIdsRef = useRef([]); // Unique IDs with names
-    var tagsListRef = useRef([]); // Store hashtags
     var fileInputRef = useRef(null);
     var highlightMentionsAndLinks = function (text) {
         // Regular expression for detecting links
         var linkRegex = /(https?:\/\/[^\s]+)/g;
-        // Regular expression for detecting hashtags
-        var hashtagRegex = /#[\w]+/g;
         // Highlight links
         var highlightedText = text.replace(linkRegex, '<a href="$1" target="_blank" rel="noopener noreferrer" class="link-highlight">$1</a>');
-        // Highlight hashtags
-        highlightedText = highlightedText.replace(hashtagRegex, function (match) {
-            return "<span class=\"hashtag-highlight\">".concat(match, "</span>");
-        });
         // Highlight mentions manually based on `userSelectListRef`
         userSelectListRef === null || userSelectListRef === void 0 ? void 0 : userSelectListRef.current.forEach(function (userName) {
             var mentionPattern = new RegExp("@".concat(userName, "(\\s|$)"), "g");
@@ -74,6 +76,24 @@ var MentionInput = function (_a) {
         });
         return highlightedText;
     };
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            var target = event.target;
+            if (showSuggestions &&
+                inputRef.current &&
+                !inputRef.current.contains(target) &&
+                suggestionListRef.current &&
+                !suggestionListRef.current.contains(target)) {
+                setShowSuggestions(false);
+            }
+        };
+        if (showSuggestions) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [showSuggestions]);
     var restoreCaretPosition = function (node, caretOffset) {
         var range = document.createRange();
         var sel = window.getSelection();
@@ -106,19 +126,80 @@ var MentionInput = function (_a) {
             sel.addRange(range);
         }
     };
-    var handleInputChange = function () {
+    var getCurrentCaretOffset = function () {
         if (!inputRef.current)
-            return;
-        // Store current selection before modifications
+            return 0;
         var selection = window.getSelection();
-        var range = selection === null || selection === void 0 ? void 0 : selection.getRangeAt(0);
-        var newCaretOffset = 0;
+        var range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
         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;
+            return preCaretRange.toString().length;
+        }
+        return caretOffsetRef.current;
+    };
+    var findMentionAtOffset = function (plainText, caretOffset, direction) {
+        if (!userSelectListRef.current.length)
+            return null;
+        var names = __spreadArray([], userSelectListRef.current, true).sort(function (a, b) { return b.length - a.length; });
+        for (var _i = 0, names_1 = names; _i < names_1.length; _i++) {
+            var name_1 = names_1[_i];
+            var pattern = "@".concat(name_1);
+            var searchIndex = plainText.indexOf(pattern);
+            while (searchIndex !== -1) {
+                var endIndex = searchIndex + pattern.length;
+                if (plainText[endIndex] === " " ||
+                    plainText[endIndex] === "\u00a0") {
+                    endIndex += 1;
+                }
+                var isCaretInsideMention = direction === "backward"
+                    ? caretOffset > searchIndex && caretOffset <= endIndex
+                    : caretOffset >= searchIndex && caretOffset < endIndex;
+                if (isCaretInsideMention) {
+                    return { name: name_1, start: searchIndex, end: endIndex };
+                }
+                searchIndex = plainText.indexOf(pattern, searchIndex + 1);
+            }
+        }
+        return null;
+    };
+    var removeMentionToken = function (direction) {
+        if (!inputRef.current)
+            return false;
+        var plainText = inputRef.current.innerText;
+        var caretOffset = getCurrentCaretOffset();
+        var mentionInfo = findMentionAtOffset(plainText, caretOffset, direction);
+        if (!mentionInfo)
+            return false;
+        var newText = plainText.slice(0, mentionInfo.start) + plainText.slice(mentionInfo.end);
+        var hasLinks = !!newText.match(/(https?:\/\/[^\s]+)/g);
+        if (userSelectListRef.current.length > 0 || hasLinks) {
+            var htmlWithHighlights = highlightMentionsAndLinks(newText);
+            inputRef.current.innerHTML = htmlWithHighlights;
+        }
+        else {
+            inputRef.current.innerText = newText;
         }
+        setInputValue(newText);
+        setShowSuggestions(false);
+        var newCaretOffset = mentionInfo.start;
+        caretOffsetRef.current = newCaretOffset;
+        if (inputRef.current) {
+            restoreCaretPosition(inputRef.current, newCaretOffset);
+        }
+        if (!newText.includes("@".concat(mentionInfo.name))) {
+            userSelectListRef.current = userSelectListRef.current.filter(function (storedName) { return storedName !== mentionInfo.name; });
+            userSelectListWithIdsRef.current =
+                userSelectListWithIdsRef.current.filter(function (user) { return user.name !== mentionInfo.name; });
+        }
+        return true;
+    };
+    var handleInputChange = function () {
+        if (!inputRef.current)
+            return;
+        // Store current selection before modifications
+        var newCaretOffset = getCurrentCaretOffset();
         caretOffsetRef.current = newCaretOffset;
         var plainText = inputRef.current.innerText;
         setInputValue(plainText);
@@ -135,17 +216,8 @@ var MentionInput = function (_a) {
         else {
             setShowSuggestions(false);
         }
-        // Extract and store hashtags
-        var hashtagMatches = plainText.match(/#[\w]+/g);
-        if (hashtagMatches) {
-            var uniqueTags = Array.from(new Set(hashtagMatches));
-            tagsListRef.current = uniqueTags;
-        }
-        else {
-            tagsListRef.current = [];
-        }
-        // Only apply highlighting if we have mentions, hashtags, or links to highlight
-        if (userSelectListRef.current.length > 0 || plainText.match(/(https?:\/\/[^\s]+)/g) || plainText.match(/#[\w]+/g)) {
+        // Only apply highlighting if we have mentions or links to highlight
+        if (userSelectListRef.current.length > 0 || plainText.match(/(https?:\/\/[^\s]+)/g)) {
             var currentHTML = inputRef.current.innerHTML;
             var htmlWithHighlights = highlightMentionsAndLinks(plainText);
             // Only update if the highlighted HTML is different to avoid cursor jumping
@@ -157,6 +229,7 @@ var MentionInput = function (_a) {
         }
     };
     var renderSuggestions = function () {
+        var _a, _b, _c, _d, _e, _f;
         if (!showSuggestions || !inputRef.current)
             return null;
         var getInitials = function (name) {
@@ -168,27 +241,32 @@ var MentionInput = function (_a) {
             return initials;
         };
         var inputRect = inputRef.current.getBoundingClientRect();
+        var scrollLeft = (_c = (_b = (_a = window.scrollX) !== null && _a !== void 0 ? _a : window.pageXOffset) !== null && _b !== void 0 ? _b : document.documentElement.scrollLeft) !== null && _c !== void 0 ? _c : 0;
+        var scrollTop = (_f = (_e = (_d = window.scrollY) !== null && _d !== void 0 ? _d : window.pageYOffset) !== null && _e !== void 0 ? _e : document.documentElement.scrollTop) !== null && _f !== void 0 ? _f : 0;
         var styles = {
             position: 'absolute',
             zIndex: 1000,
+            minWidth: inputRect.width,
         };
         // Use suggestionPosition prop to adjust tooltip position
         switch (suggestionPosition) {
             case 'top':
-                styles.left = "".concat(inputRect.left, "px");
-                styles.top = "".concat(inputRect.top - 150, "px");
+                styles.left = "".concat(inputRect.left + scrollLeft, "px");
+                styles.top = "".concat(inputRect.top + scrollTop - 8, "px");
+                styles.transform = 'translateY(-100%)';
                 break;
             case 'bottom':
-                styles.left = "".concat(inputRect.left, "px");
-                styles.top = "".concat(inputRect.bottom, "px");
+                styles.left = "".concat(inputRect.left + scrollLeft, "px");
+                styles.top = "".concat(inputRect.bottom + scrollTop + 8, "px");
                 break;
             case 'left':
-                styles.left = "".concat(inputRect.left - 150, "px");
-                styles.top = "".concat(inputRect.top, "px");
+                styles.left = "".concat(inputRect.left + scrollLeft - 8, "px");
+                styles.top = "".concat(inputRect.top + scrollTop, "px");
+                styles.transform = "".concat(styles.transform ? "".concat(styles.transform, " ") : '', "translateX(-100%)");
                 break;
             case 'right':
-                styles.left = "".concat(inputRect.right, "px");
-                styles.top = "".concat(inputRect.top, "px");
+                styles.left = "".concat(inputRect.right + scrollLeft + 8, "px");
+                styles.top = "".concat(inputRect.top + scrollTop, "px");
                 break;
             default:
                 break;
@@ -333,7 +411,6 @@ var MentionInput = function (_a) {
                     messageHTML: messageHTML,
                     userSelectListWithIds: userSelectListWithIdsRef.current,
                     userSelectListName: userSelectListRef.current,
-                    tags: tagsListRef.current,
                     images: selectedImage ? [selectedImage] : [],
                     imageUrl: imageUrl
                 });
@@ -344,7 +421,6 @@ var MentionInput = function (_a) {
                 setImageUrl(null);
                 userSelectListRef.current = [];
                 userSelectListWithIdsRef.current = [];
-                tagsListRef.current = [];
             }
         }
     };
@@ -352,6 +428,19 @@ var MentionInput = function (_a) {
         if (event.key === "Enter" && !event.shiftKey) {
             event.preventDefault(); // Prevent newline in content-editable
             handleSendMessage(); // Trigger the same function as the Send button
+            return;
+        }
+        if (event.key === "Backspace") {
+            var removed = removeMentionToken("backward");
+            if (removed) {
+                event.preventDefault();
+            }
+        }
+        if (event.key === "Delete") {
+            var removed = removeMentionToken("forward");
+            if (removed) {
+                event.preventDefault();
+            }
         }
     };
     return (React.createElement("div", { className: "mention-container ".concat(containerClassName || "") },
@@ -367,7 +456,7 @@ var MentionInput = function (_a) {
             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("button", { onClick: handleSendMessage, className: "send-button ".concat(sendBtnClassName || ""), "aria-label": "Send message" }, sendButtonIcon || "↑"),
+            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" },
                 React.createElement("span", null, "Uploading...")))),

package/package.json

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

package/src/MentionInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, ReactNode } from "react";
+import React, { useState, useRef, ReactNode, useEffect } from "react";
 import ReactDOM from "react-dom";
 import "./MentionInput.css";
 
@@ -27,7 +27,6 @@ interface MentionInputProps {
     messageHTML: string;
     userSelectListWithIds: { id: number; name: string }[];
     userSelectListName: string[];
-    tags: string[];
     images?: File[];
     imageUrl?: string | null;
   }) => void;
@@ -51,7 +50,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
   sendButtonIcon,
   attachmentButtonIcon,
   onSendMessage,
-  suggestionPosition = 'bottom',
+  suggestionPosition = 'top',
   onImageUpload,
 }) => {
   const [inputValue, setInputValue] = useState<string>(""); // Plain text
@@ -69,29 +68,17 @@ 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 tagsListRef = useRef<string[]>([]); // Store hashtags
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const highlightMentionsAndLinks = (text: string): string => {
     // Regular expression for detecting links
     const linkRegex = /(https?:\/\/[^\s]+)/g;
-    
-    // Regular expression for detecting hashtags
-    const hashtagRegex = /#[\w]+/g;
   
     // Highlight links
     let highlightedText = text.replace(
       linkRegex,
       '<a href="$1" target="_blank" rel="noopener noreferrer" class="link-highlight">$1</a>'
     );
-    
-    // Highlight hashtags
-    highlightedText = highlightedText.replace(
-      hashtagRegex,
-      (match) => {
-        return `<span class="hashtag-highlight">${match}</span>`;
-      }
-    );
   
     // Highlight mentions manually based on `userSelectListRef`
     userSelectListRef?.current.forEach((userName) => {
@@ -106,6 +93,29 @@ const MentionInput: React.FC<MentionInputProps> = ({
   
     return highlightedText;
   };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (
+        showSuggestions &&
+        inputRef.current &&
+        !inputRef.current.contains(target) &&
+        suggestionListRef.current &&
+        !suggestionListRef.current.contains(target)
+      ) {
+        setShowSuggestions(false);
+      }
+    };
+
+    if (showSuggestions) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showSuggestions]);
   
 
   const restoreCaretPosition = (node: HTMLElement, caretOffset: number) => {
@@ -139,21 +149,112 @@ const MentionInput: React.FC<MentionInputProps> = ({
     }
   };
 
-  const handleInputChange = () => {
-    if (!inputRef.current) return;
-
-    // Store current selection before modifications
+  const getCurrentCaretOffset = (): number => {
+    if (!inputRef.current) return 0;
     const selection = window.getSelection();
-    const range = selection?.getRangeAt(0);
-    
-    let newCaretOffset = 0;
+    const range =
+      selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+
     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;
+      return preCaretRange.toString().length;
     }
-    
+
+    return caretOffsetRef.current;
+  };
+
+  const findMentionAtOffset = (
+    plainText: string,
+    caretOffset: number,
+    direction: "backward" | "forward"
+  ): { name: string; start: number; end: number } | null => {
+    if (!userSelectListRef.current.length) return null;
+
+    const names = [...userSelectListRef.current].sort(
+      (a, b) => b.length - a.length
+    );
+
+    for (const name of names) {
+      const pattern = `@${name}`;
+      let searchIndex = plainText.indexOf(pattern);
+
+      while (searchIndex !== -1) {
+        let endIndex = searchIndex + pattern.length;
+        if (
+          plainText[endIndex] === " " ||
+          plainText[endIndex] === "\u00a0"
+        ) {
+          endIndex += 1;
+        }
+
+        const isCaretInsideMention =
+          direction === "backward"
+            ? caretOffset > searchIndex && caretOffset <= endIndex
+            : caretOffset >= searchIndex && caretOffset < endIndex;
+
+        if (isCaretInsideMention) {
+          return { name, start: searchIndex, end: endIndex };
+        }
+
+        searchIndex = plainText.indexOf(pattern, searchIndex + 1);
+      }
+    }
+
+    return null;
+  };
+
+  const removeMentionToken = (direction: "backward" | "forward"): boolean => {
+    if (!inputRef.current) return false;
+
+    const plainText = inputRef.current.innerText;
+    const caretOffset = getCurrentCaretOffset();
+    const mentionInfo = findMentionAtOffset(plainText, caretOffset, direction);
+
+    if (!mentionInfo) return false;
+
+    const newText =
+      plainText.slice(0, mentionInfo.start) + plainText.slice(mentionInfo.end);
+
+    const hasLinks = !!newText.match(/(https?:\/\/[^\s]+)/g);
+
+    if (userSelectListRef.current.length > 0 || hasLinks) {
+      const htmlWithHighlights = highlightMentionsAndLinks(newText);
+      inputRef.current.innerHTML = htmlWithHighlights;
+    } else {
+      inputRef.current.innerText = newText;
+    }
+
+    setInputValue(newText);
+    setShowSuggestions(false);
+
+    const newCaretOffset = mentionInfo.start;
+    caretOffsetRef.current = newCaretOffset;
+
+    if (inputRef.current) {
+      restoreCaretPosition(inputRef.current, newCaretOffset);
+    }
+
+    if (!newText.includes(`@${mentionInfo.name}`)) {
+      userSelectListRef.current = userSelectListRef.current.filter(
+        (storedName) => storedName !== mentionInfo.name
+      );
+      userSelectListWithIdsRef.current =
+        userSelectListWithIdsRef.current.filter(
+          (user) => user.name !== mentionInfo.name
+        );
+    }
+
+    return true;
+  };
+
+  const handleInputChange = () => {
+    if (!inputRef.current) return;
+
+    // Store current selection before modifications
+    const newCaretOffset = getCurrentCaretOffset();
+
     caretOffsetRef.current = newCaretOffset;
     
     const plainText = inputRef.current.innerText;
@@ -173,17 +274,8 @@ const MentionInput: React.FC<MentionInputProps> = ({
       setShowSuggestions(false);
     }
     
-    // Extract and store hashtags
-    const hashtagMatches = plainText.match(/#[\w]+/g);
-    if (hashtagMatches) {
-      const uniqueTags = Array.from(new Set(hashtagMatches));
-      tagsListRef.current = uniqueTags;
-    } else {
-      tagsListRef.current = [];
-    }
-    
-    // Only apply highlighting if we have mentions, hashtags, or links to highlight
-    if (userSelectListRef.current.length > 0 || plainText.match(/(https?:\/\/[^\s]+)/g) || plainText.match(/#[\w]+/g)) {
+    // 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);
       
@@ -210,28 +302,35 @@ const MentionInput: React.FC<MentionInputProps> = ({
     };
     
     const inputRect = inputRef.current.getBoundingClientRect();
+    const scrollLeft =
+      window.scrollX ?? window.pageXOffset ?? document.documentElement.scrollLeft ?? 0;
+    const scrollTop =
+      window.scrollY ?? window.pageYOffset ?? document.documentElement.scrollTop ?? 0;
     const styles: React.CSSProperties = {
       position: 'absolute',
       zIndex: 1000,
+      minWidth: inputRect.width,
     };
 
     // Use suggestionPosition prop to adjust tooltip position
     switch (suggestionPosition) {
       case 'top':
-        styles.left = `${inputRect.left}px`;
-        styles.top = `${inputRect.top - 150}px`;
+        styles.left = `${inputRect.left + scrollLeft}px`;
+        styles.top = `${inputRect.top + scrollTop - 8}px`;
+        styles.transform = 'translateY(-100%)';
         break;
       case 'bottom':
-        styles.left = `${inputRect.left}px`;
-        styles.top = `${inputRect.bottom}px`;
+        styles.left = `${inputRect.left + scrollLeft}px`;
+        styles.top = `${inputRect.bottom + scrollTop + 8}px`;
         break;
       case 'left':
-        styles.left = `${inputRect.left - 150}px`;
-        styles.top = `${inputRect.top}px`;
+        styles.left = `${inputRect.left + scrollLeft - 8}px`;
+        styles.top = `${inputRect.top + scrollTop}px`;
+        styles.transform = `${styles.transform ? `${styles.transform} ` : ''}translateX(-100%)`;
         break;
       case 'right':
-        styles.left = `${inputRect.right}px`;
-        styles.top = `${inputRect.top}px`;
+        styles.left = `${inputRect.right + scrollLeft + 8}px`;
+        styles.top = `${inputRect.top + scrollTop}px`;
         break;
       default:
         break;
@@ -395,7 +494,6 @@ const MentionInput: React.FC<MentionInputProps> = ({
           messageHTML,
           userSelectListWithIds: userSelectListWithIdsRef.current,
           userSelectListName: userSelectListRef.current,
-          tags: tagsListRef.current,
           images: selectedImage ? [selectedImage] : [],
           imageUrl: imageUrl
         });
@@ -406,7 +504,6 @@ const MentionInput: React.FC<MentionInputProps> = ({
         setImageUrl(null);
         userSelectListRef.current = [];
         userSelectListWithIdsRef.current = [];
-        tagsListRef.current = [];
       }
     }
   };
@@ -415,6 +512,21 @@ const MentionInput: React.FC<MentionInputProps> = ({
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault(); // Prevent newline in content-editable
       handleSendMessage(); // Trigger the same function as the Send button
+      return;
+    }
+
+    if (event.key === "Backspace") {
+      const removed = removeMentionToken("backward");
+      if (removed) {
+        event.preventDefault();
+      }
+    }
+
+    if (event.key === "Delete") {
+      const removed = removeMentionToken("forward");
+      if (removed) {
+        event.preventDefault();
+      }
     }
   };
 
@@ -478,7 +590,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
           className={`send-button ${sendBtnClassName || ""}`}
           aria-label="Send message"
         >
-          {sendButtonIcon || "↑"}
+          {sendButtonIcon || "➤"}
         </button>
         
         <input