react-mention-input 1.1.8 → 1.1.9

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);
@@ -183,7 +184,7 @@ var MentionInput = function (_a) {
     };
     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, onKeyDown: handleKeyDown }),
+            React.createElement("div", { ref: inputRef, contentEditable: true, suppressContentEditableWarning: true, className: "mention-input ".concat(inputClassName || ""), onInput: handleInputChange, onKeyDown: handleKeyDown }, (!inputValue || !inputRef.current || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.innerText.trim()) === "") ? (React.createElement("span", { className: "placeholder" }, placeholder)) : null),
             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.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/src/MentionInput.tsx

@@ -284,7 +284,11 @@ const MentionInput: React.FC<MentionInputProps> = ({
           className={`mention-input ${inputClassName || ""}`}
           onInput={handleInputChange}
           onKeyDown={handleKeyDown} // Add keydown listener
-        ></div>
+        >
+          {(!inputValue || !inputRef.current || inputRef.current?.innerText.trim() === "") ? (
+          <span className="placeholder">{placeholder}</span>
+            ) : null}
+        </div>
         <button
           onClick={handleSendMessage}
           className={`send-button ${sendBtnClassName || ""}`}