react-mention-input 1.1.8 → 1.1.10

package/dist/MentionInput.js

@@ -2,10 +2,11 @@ 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, _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 _b;
+    var users = _a.users, _c = _a.placeholder, placeholder = _c === void 0 ? "Type a message..." : _c, containerClassName = _a.containerClassName, inputContainerClassName = _a.inputContainerClassName, inputClassName = _a.inputClassName, sendBtnClassName = _a.sendBtnClassName, suggestionListClassName = _a.suggestionListClassName, suggestionItemClassName = _a.suggestionItemClassName, sendButtonIcon = _a.sendButtonIcon, onSendMessage = _a.onSendMessage, _d = _a.suggestionPosition, suggestionPosition = _d === void 0 ? 'bottom' : _d;
+    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];
     var inputRef = useRef(null);
     var suggestionListRef = useRef(null);
     var caretOffsetRef = useRef(0);
@@ -92,11 +93,6 @@ var MentionInput = function (_a) {
     var renderSuggestions = function () {
         if (!showSuggestions || !inputRef.current)
             return null;
-        var inputRect = inputRef.current.getBoundingClientRect();
-        var styles = {
-            position: 'absolute',
-            zIndex: 1000,
-        };
         var getInitials = function (name) {
             var nameParts = name.split(" ");
             var initials = nameParts
@@ -105,6 +101,11 @@ var MentionInput = function (_a) {
                 .join("");
             return initials;
         };
+        var inputRect = inputRef.current.getBoundingClientRect();
+        var styles = {
+            position: 'absolute',
+            zIndex: 1000,
+        };
         // Use suggestionPosition prop to adjust tooltip position
         switch (suggestionPosition) {
             case 'top':
@@ -183,6 +184,7 @@ var MentionInput = function (_a) {
     };
     return (React.createElement("div", { className: "mention-container ".concat(containerClassName || "") },
         React.createElement("div", { className: "mention-input-container ".concat(inputContainerClassName || "") },
+            (!inputValue || !inputRef.current || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.innerText.trim()) === "") ? (React.createElement("span", { className: "placeholder" }, placeholder)) : null,
             React.createElement("div", { ref: inputRef, contentEditable: true, suppressContentEditableWarning: true, className: "mention-input ".concat(inputClassName || ""), onInput: handleInputChange, onKeyDown: handleKeyDown }),
             React.createElement("button", { onClick: handleSendMessage, className: "send-button ".concat(sendBtnClassName || "") }, sendButtonIcon || "➤")),
         renderSuggestions()));

package/package.json

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

package/src/MentionInput.tsx

@@ -145,12 +145,6 @@ const MentionInput: React.FC<MentionInputProps> = ({
   const renderSuggestions = () => {
     if (!showSuggestions || !inputRef.current) return null;
 
-    const inputRect = inputRef.current.getBoundingClientRect();
-    const styles: React.CSSProperties = {
-      position: 'absolute',
-      zIndex: 1000,
-    };
-
     const getInitials = (name: string) => {
       const nameParts = name.split(" ");
       const initials = nameParts
@@ -159,6 +153,12 @@ const MentionInput: React.FC<MentionInputProps> = ({
         .join("");
       return initials;
     };
+    
+    const inputRect = inputRef.current.getBoundingClientRect();
+    const styles: React.CSSProperties = {
+      position: 'absolute',
+      zIndex: 1000,
+    };
 
     // Use suggestionPosition prop to adjust tooltip position
     switch (suggestionPosition) {
@@ -273,10 +273,12 @@ const MentionInput: React.FC<MentionInputProps> = ({
   };
 
 
-
   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
@@ -284,7 +286,8 @@ const MentionInput: React.FC<MentionInputProps> = ({
           className={`mention-input ${inputClassName || ""}`}
           onInput={handleInputChange}
           onKeyDown={handleKeyDown} // Add keydown listener
-        ></div>
+        >
+        </div>
         <button
           onClick={handleSendMessage}
           className={`send-button ${sendBtnClassName || ""}`}