react-mention-input 1.1.9 → 1.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/MentionInput.css +1 -2
  2. package/dist/MentionInput.js +7 -6
  3. package/package.json +1 -1
  4. package/src/MentionInput.css +1 -2
  5. package/src/MentionInput.tsx +9 -10
package/dist/MentionInput.css CHANGED
@@ -71,7 +71,6 @@
71
71
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
72
72
  }
73
73
 
74
-
75
74
  .user-icon {
76
75
  width: 25px;
77
76
  height: 25px;
@@ -109,7 +108,7 @@
109
108
  border-radius: 4px;
110
109
  }
111
110
 
112
- .mention-input .placeholder {
111
+ .placeholder {
113
112
  color: #aaa;
114
113
  pointer-events: none;
115
114
  position: absolute;
package/dist/MentionInput.js CHANGED
@@ -93,11 +93,6 @@ var MentionInput = function (_a) {
93
93
  var renderSuggestions = function () {
94
94
  if (!showSuggestions || !inputRef.current)
95
95
  return null;
96
- var inputRect = inputRef.current.getBoundingClientRect();
97
- var styles = {
98
- position: 'absolute',
99
- zIndex: 1000,
100
- };
101
96
  var getInitials = function (name) {
102
97
  var nameParts = name.split(" ");
103
98
  var initials = nameParts
@@ -106,6 +101,11 @@ var MentionInput = function (_a) {
106
101
  .join("");
107
102
  return initials;
108
103
  };
104
+ var inputRect = inputRef.current.getBoundingClientRect();
105
+ var styles = {
106
+ position: 'absolute',
107
+ zIndex: 1000,
108
+ };
109
109
  // Use suggestionPosition prop to adjust tooltip position
110
110
  switch (suggestionPosition) {
111
111
  case 'top':
@@ -184,7 +184,8 @@ var MentionInput = function (_a) {
184
184
  };
185
185
  return (React.createElement("div", { className: "mention-container ".concat(containerClassName || "") },
186
186
  React.createElement("div", { className: "mention-input-container ".concat(inputContainerClassName || "") },
187
- 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),
187
+ (!inputValue || !inputRef.current || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.innerText.trim()) === "") ? (React.createElement("span", { className: "placeholder" }, placeholder)) : null,
188
+ React.createElement("div", { ref: inputRef, contentEditable: true, suppressContentEditableWarning: true, className: "mention-input ".concat(inputClassName || ""), onInput: handleInputChange, onKeyDown: handleKeyDown }),
188
189
  React.createElement("button", { onClick: handleSendMessage, className: "send-button ".concat(sendBtnClassName || "") }, sendButtonIcon || "➤")),
189
190
  renderSuggestions()));
190
191
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-mention-input",
3
- "version": "1.1.9",
3
+ "version": "1.1.11",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
package/src/MentionInput.css CHANGED
@@ -71,7 +71,6 @@
71
71
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
72
72
  }
73
73
 
74
-
75
74
  .user-icon {
76
75
  width: 25px;
77
76
  height: 25px;
@@ -109,7 +108,7 @@
109
108
  border-radius: 4px;
110
109
  }
111
110
 
112
- .mention-input .placeholder {
111
+ .placeholder {
113
112
  color: #aaa;
114
113
  pointer-events: none;
115
114
  position: absolute;
package/src/MentionInput.tsx CHANGED
@@ -145,12 +145,6 @@ const MentionInput: React.FC<MentionInputProps> = ({
145
145
  const renderSuggestions = () => {
146
146
  if (!showSuggestions || !inputRef.current) return null;
147
147
 
148
- const inputRect = inputRef.current.getBoundingClientRect();
149
- const styles: React.CSSProperties = {
150
- position: 'absolute',
151
- zIndex: 1000,
152
- };
153
-
154
148
  const getInitials = (name: string) => {
155
149
  const nameParts = name.split(" ");
156
150
  const initials = nameParts
@@ -159,6 +153,12 @@ const MentionInput: React.FC<MentionInputProps> = ({
159
153
  .join("");
160
154
  return initials;
161
155
  };
156
+
157
+ const inputRect = inputRef.current.getBoundingClientRect();
158
+ const styles: React.CSSProperties = {
159
+ position: 'absolute',
160
+ zIndex: 1000,
161
+ };
162
162
 
163
163
  // Use suggestionPosition prop to adjust tooltip position
164
164
  switch (suggestionPosition) {
@@ -273,10 +273,12 @@ const MentionInput: React.FC<MentionInputProps> = ({
273
273
  };
274
274
 
275
275
 
276
-
277
276
  return (
278
277
  <div className={`mention-container ${containerClassName || ""}`}>
279
278
  <div className={`mention-input-container ${inputContainerClassName || ""}`}>
279
+ {(!inputValue || !inputRef.current || inputRef.current?.innerText.trim() === "") ? (
280
+ <span className="placeholder">{placeholder}</span>
281
+ ) : null}
280
282
  <div
281
283
  ref={inputRef}
282
284
  contentEditable
@@ -285,9 +287,6 @@ const MentionInput: React.FC<MentionInputProps> = ({
285
287
  onInput={handleInputChange}
286
288
  onKeyDown={handleKeyDown} // Add keydown listener
287
289
  >
288
- {(!inputValue || !inputRef.current || inputRef.current?.innerText.trim() === "") ? (
289
- <span className="placeholder">{placeholder}</span>
290
- ) : null}
291
290
  </div>
292
291
  <button
293
292
  onClick={handleSendMessage}