react-mention-input 1.1.21 → 1.1.22

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 (11) hide show
  1. package/demo.tsx +7 -3
  2. package/dist/MentionInput.css +6 -6
  3. package/dist/MentionInput.js +1 -1
  4. package/dist/ShowMessageCard.css +46 -19
  5. package/dist/ShowMessageCard.d.ts +1 -0
  6. package/dist/ShowMessageCard.js +7 -2
  7. package/package.json +1 -1
  8. package/src/MentionInput.css +6 -6
  9. package/src/MentionInput.tsx +1 -1
  10. package/src/ShowMessageCard.css +46 -19
  11. package/src/ShowMessageCard.tsx +12 -0
package/demo.tsx CHANGED
@@ -6,20 +6,22 @@ const Demo: React.FC = () => {
6
6
  {
7
7
  id: 1,
8
8
  name: 'John Doe',
9
- date: '2 hours ago',
9
+ date: '14/07/2025 04:15 PM',
10
10
  comment: 'Updated the status to Draft. Need <span class="mention-highlight">@team-leads</span> review before proceeding. <span class="hashtag-highlight">#urgent</span> <span class="hashtag-highlight">#review</span>',
11
11
  objectName: '26may_item001',
12
12
  revision: 'A',
13
13
  object_type_icon: '📄',
14
+ relatedObject: 'test_jeet_july2334 (A)',
14
15
  },
15
16
  {
16
17
  id: 2,
17
18
  name: 'Mike Johnson',
18
- date: '1 day ago',
19
+ date: '14/07/2025 04:15 PM',
19
20
  comment: 'Revision A completed successfully. Ready for next phase. <span class="hashtag-highlight">#milestone</span>',
20
21
  objectName: '26may_item001',
21
22
  revision: 'A',
22
23
  object_type_icon: '📋',
24
+ relatedObject: 'test_jeet_july2334 (A)',
23
25
  }
24
26
  ]);
25
27
 
@@ -55,6 +57,7 @@ const Demo: React.FC = () => {
55
57
  objectName: 'new_item001', // You can customize this or make it dynamic
56
58
  revision: 'A', // You can customize this or make it dynamic
57
59
  object_type_icon: '✨', // You can customize this or make it dynamic
60
+ relatedObject: 'test_jeet_july2334 (A)', // You can customize this or make it dynamic
58
61
  };
59
62
 
60
63
  setMessages([...messages, newMessage]);
@@ -79,7 +82,7 @@ const Demo: React.FC = () => {
79
82
  <div style={{ marginBottom: '20px' }}>
80
83
  <MentionInput
81
84
  users={users}
82
- placeholder="Type a message with @mentions and #hashtags..."
85
+ placeholder="Type @ to mention and inform someone"
83
86
  onSendMessage={handleSendMessage}
84
87
  suggestionPosition="bottom"
85
88
  />
@@ -152,6 +155,7 @@ const Demo: React.FC = () => {
152
155
  objectName: '26may_item001',
153
156
  revision: 'A',
154
157
  object_type_icon: '📄', // Document icon
158
+ relatedObject: 'test_jeet_july2334 (A)', // Related object
155
159
  comment: 'Message content...'
156
160
  };`}
157
161
  </pre>
package/dist/MentionInput.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .mention-container {
2
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
2
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
3
3
  line-height: 1.5;
4
4
  color: #333;
5
5
  width: 100%;
@@ -56,7 +56,7 @@
56
56
  .placeholder {
57
57
  position: absolute;
58
58
  color: #999;
59
- font-size: 14px;
59
+ font-size: 13px;
60
60
  pointer-events: none;
61
61
  left: 0;
62
62
  top: 50%;
@@ -70,7 +70,7 @@
70
70
  .mention-input {
71
71
  outline: none;
72
72
  padding: 6px 0;
73
- font-size: 14px;
73
+ font-size: 13px;
74
74
  min-height: 24px;
75
75
  max-height: 120px;
76
76
  overflow-y: auto;
@@ -112,16 +112,16 @@
112
112
  width: 36px;
113
113
  height: 36px;
114
114
  border-radius: 50%;
115
- background-color: #1a1a1a;
115
+ background-color: #23488C;
116
116
  color: white;
117
117
  border: none;
118
118
  cursor: pointer;
119
- font-size: 14px;
119
+ font-size: 24px;
120
120
  transition: background-color 0.2s;
121
121
  }
122
122
 
123
123
  .send-button:hover {
124
- background-color: #333;
124
+ background-color: #1a3a7a;
125
125
  }
126
126
 
127
127
  /* Suggestion list with proper columnar layout */
package/dist/MentionInput.js CHANGED
@@ -367,7 +367,7 @@ var MentionInput = function (_a) {
367
367
  React.createElement("div", { className: "mention-input-wrapper" },
368
368
  (!inputValue || !inputRef.current || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.innerText.trim()) === "") && (React.createElement("span", { className: "placeholder" }, placeholder)),
369
369
  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'); } })),
370
- React.createElement("button", { onClick: handleSendMessage, className: "send-button ".concat(sendBtnClassName || ""), "aria-label": "Send message" }, sendButtonIcon || "➤"),
370
+ React.createElement("button", { onClick: handleSendMessage, className: "send-button ".concat(sendBtnClassName || ""), "aria-label": "Send message" }, sendButtonIcon || "↑"),
371
371
  React.createElement("input", { type: "file", ref: fileInputRef, accept: "image/*", onChange: handleImageSelect, style: { display: 'none' } }),
372
372
  isUploading && (React.createElement("div", { className: "upload-loading" },
373
373
  React.createElement("span", null, "Uploading...")))),
package/dist/ShowMessageCard.css CHANGED
@@ -2,6 +2,7 @@
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  gap: 16px; /* Space between cards */
5
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
5
6
  }
6
7
 
7
8
  .message-card {
@@ -61,36 +62,37 @@
61
62
 
62
63
  .message-card-img,
63
64
  .message-card-initials {
64
- width: 48px;
65
- height: 48px;
65
+ width: 28px;
66
+ height: 28px;
66
67
  border-radius: 50%;
67
68
  display: flex;
68
69
  align-items: center;
69
70
  justify-content: center;
70
- font-size: 16px;
71
+ font-size: 12px;
71
72
  font-weight: bold;
72
73
  color: #fff;
73
74
  background-color: #007bff;
74
75
  text-transform: uppercase;
75
- margin-right: 16px;
76
+ margin-right: 8px;
76
77
  }
77
78
  .message-card-info {
78
79
  display: flex;
79
- flex-direction: column;
80
+ align-items: center;
80
81
  }
81
82
 
82
83
  .message-card-name {
83
84
  margin: 0;
84
- font-size: 18px;
85
- font-weight: bold;
86
- line-height: 1.2; /* Adjust line height for better spacing */
85
+ font-size: 14px;
86
+ font-weight: 600;
87
+ line-height: 1.2;
88
+ margin-right: 8px;
87
89
  }
88
90
 
89
91
  .message-card-date {
90
92
  margin: 0;
91
- font-size: 14px;
92
- color: #888;
93
- line-height: 1.2; /* Adjust line height for better spacing */
93
+ font-size: 12px;
94
+ color: #888888;
95
+ line-height: 1.2;
94
96
  }
95
97
 
96
98
  .message-card-body {
@@ -99,8 +101,8 @@
99
101
 
100
102
  .message-card-comment {
101
103
  margin: 0;
102
- font-size: 16px;
103
- line-height: 1.5; /* Optimal line height for readability */
104
+ font-size: 13px;
105
+ line-height: 1.5;
104
106
  }
105
107
  .mention-highlight {
106
108
  background-color: #e0f7fa;
@@ -126,8 +128,8 @@
126
128
  }
127
129
 
128
130
  .tag-chip {
129
- padding: 6px 12px;
130
- border-radius: 16px;
131
+ padding: 4px 8px;
132
+ border-radius: 4px;
131
133
  font-size: 12px;
132
134
  font-weight: 500;
133
135
  border: none;
@@ -136,11 +138,36 @@
136
138
  }
137
139
 
138
140
  .hashtag-chip {
139
- background-color: #D4A574;
140
- color: #FFFFFF;
141
+ background-color: rgba(255, 165, 0, 0.15);
142
+ color: #FF8C00;
141
143
  }
142
144
 
143
145
  .mention-chip {
144
- background-color: #2684FF;
145
- color: #FFFFFF;
146
+ background-color: #E0F7FA;
147
+ color: #007BFF;
148
+ }
149
+
150
+ /* Related object styling */
151
+ .message-card-related {
152
+ display: flex;
153
+ align-items: center;
154
+ margin-top: 8px;
155
+ }
156
+
157
+ .related-label {
158
+ font-size: 13px;
159
+ color: #333;
160
+ margin-right: 8px;
161
+ }
162
+
163
+ .related-object-chip {
164
+ background-color: #f0f0f0;
165
+ color: #666;
166
+ padding: 2px 6px;
167
+ border-radius: 4px;
168
+ font-size: 12px;
169
+ height: 20px;
170
+ display: flex;
171
+ align-items: center;
172
+ border: 1px solid #ddd;
146
173
  }
package/dist/ShowMessageCard.d.ts CHANGED
@@ -13,6 +13,7 @@ interface ShowMessageCardProps {
13
13
  objectNameKey?: string;
14
14
  revisionKey?: string;
15
15
  objectTypeIconKey?: string;
16
+ relatedObjectKey?: string;
16
17
  containerClassName?: string;
17
18
  containerStyle?: CSSProperties;
18
19
  cardClassName?: string;
package/dist/ShowMessageCard.js CHANGED
@@ -19,10 +19,12 @@ export var ShowMessageCard = function (_a) {
19
19
  revisionKey = _h === void 0 ? "revision" : _h, // Default key for revision
20
20
  _j = _a.objectTypeIconKey, // Default key for revision
21
21
  objectTypeIconKey = _j === void 0 ? "object_type_icon" : _j, // Default key for object type icon
22
+ _k = _a.relatedObjectKey, // Default key for object type icon
23
+ relatedObjectKey = _k === void 0 ? "relatedObject" : _k, // Default key for related object
22
24
  containerClassName = _a.containerClassName, containerStyle = _a.containerStyle, cardClassName = _a.cardClassName, cardStyle = _a.cardStyle, headerClassName = _a.headerClassName, headerStyle = _a.headerStyle, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, infoClassName = _a.infoClassName, infoStyle = _a.infoStyle, nameClassName = _a.nameClassName, nameStyle = _a.nameStyle, dateClassName = _a.dateClassName, dateStyle = _a.dateStyle, bodyClassName = _a.bodyClassName, bodyStyle = _a.bodyStyle, commentClassName = _a.commentClassName, commentStyle = _a.commentStyle, attachedImageClassName = _a.attachedImageClassName, attachedImageStyle = _a.attachedImageStyle, attachedImageContainerClassName = _a.attachedImageContainerClassName, attachedImageContainerStyle = _a.attachedImageContainerStyle, objectNameClassName = _a.objectNameClassName, objectNameStyle = _a.objectNameStyle, revisionClassName = _a.revisionClassName, revisionStyle = _a.revisionStyle, objectChipRender = _a.objectChipRender, // Custom render function for object chip
23
25
  renderItem = _a.renderItem;
24
26
  // State to manage initials for images that fail to load
25
- var _k = useState({}), initialsState = _k[0], setInitialsState = _k[1];
27
+ var _l = useState({}), initialsState = _l[0], setInitialsState = _l[1];
26
28
  // Handle image load failure
27
29
  var handleImageError = function (id) {
28
30
  setInitialsState(function (prevState) {
@@ -79,6 +81,9 @@ export var ShowMessageCard = function (_a) {
79
81
  React.createElement("img", { src: item[imageUrlKey], alt: "Attached", className: "message-card-attached-image ".concat(attachedImageClassName || ""), style: attachedImageStyle }))),
80
82
  (hashtags.length > 0 || mentions.length > 0) && (React.createElement("div", { className: "message-card-tags" },
81
83
  hashtags.map(function (tag, tagIndex) { return (React.createElement("span", { key: "hashtag-".concat(tagIndex), className: "tag-chip hashtag-chip" }, tag)); }),
82
- mentions.map(function (mention, mentionIndex) { return (React.createElement("span", { key: "mention-".concat(mentionIndex), className: "tag-chip mention-chip" }, mention)); }))))));
84
+ mentions.map(function (mention, mentionIndex) { return (React.createElement("span", { key: "mention-".concat(mentionIndex), className: "tag-chip mention-chip" }, mention)); }))),
85
+ item[relatedObjectKey] && (React.createElement("div", { className: "message-card-related" },
86
+ React.createElement("span", { className: "related-label" }, "Related: "),
87
+ React.createElement("span", { className: "related-object-chip" }, item[relatedObjectKey]))))));
83
88
  })));
84
89
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-mention-input",
3
- "version": "1.1.21",
3
+ "version": "1.1.22",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
package/src/MentionInput.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .mention-container {
2
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
2
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
3
3
  line-height: 1.5;
4
4
  color: #333;
5
5
  width: 100%;
@@ -56,7 +56,7 @@
56
56
  .placeholder {
57
57
  position: absolute;
58
58
  color: #999;
59
- font-size: 14px;
59
+ font-size: 13px;
60
60
  pointer-events: none;
61
61
  left: 0;
62
62
  top: 50%;
@@ -70,7 +70,7 @@
70
70
  .mention-input {
71
71
  outline: none;
72
72
  padding: 6px 0;
73
- font-size: 14px;
73
+ font-size: 13px;
74
74
  min-height: 24px;
75
75
  max-height: 120px;
76
76
  overflow-y: auto;
@@ -112,16 +112,16 @@
112
112
  width: 36px;
113
113
  height: 36px;
114
114
  border-radius: 50%;
115
- background-color: #1a1a1a;
115
+ background-color: #23488C;
116
116
  color: white;
117
117
  border: none;
118
118
  cursor: pointer;
119
- font-size: 14px;
119
+ font-size: 24px;
120
120
  transition: background-color 0.2s;
121
121
  }
122
122
 
123
123
  .send-button:hover {
124
- background-color: #333;
124
+ background-color: #1a3a7a;
125
125
  }
126
126
 
127
127
  /* Suggestion list with proper columnar layout */
package/src/MentionInput.tsx CHANGED
@@ -478,7 +478,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
478
478
  className={`send-button ${sendBtnClassName || ""}`}
479
479
  aria-label="Send message"
480
480
  >
481
- {sendButtonIcon || "➤"}
481
+ {sendButtonIcon || "↑"}
482
482
  </button>
483
483
 
484
484
  <input
package/src/ShowMessageCard.css CHANGED
@@ -2,6 +2,7 @@
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  gap: 16px; /* Space between cards */
5
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
5
6
  }
6
7
 
7
8
  .message-card {
@@ -61,36 +62,37 @@
61
62
 
62
63
  .message-card-img,
63
64
  .message-card-initials {
64
- width: 48px;
65
- height: 48px;
65
+ width: 28px;
66
+ height: 28px;
66
67
  border-radius: 50%;
67
68
  display: flex;
68
69
  align-items: center;
69
70
  justify-content: center;
70
- font-size: 16px;
71
+ font-size: 12px;
71
72
  font-weight: bold;
72
73
  color: #fff;
73
74
  background-color: #007bff;
74
75
  text-transform: uppercase;
75
- margin-right: 16px;
76
+ margin-right: 8px;
76
77
  }
77
78
  .message-card-info {
78
79
  display: flex;
79
- flex-direction: column;
80
+ align-items: center;
80
81
  }
81
82
 
82
83
  .message-card-name {
83
84
  margin: 0;
84
- font-size: 18px;
85
- font-weight: bold;
86
- line-height: 1.2; /* Adjust line height for better spacing */
85
+ font-size: 14px;
86
+ font-weight: 600;
87
+ line-height: 1.2;
88
+ margin-right: 8px;
87
89
  }
88
90
 
89
91
  .message-card-date {
90
92
  margin: 0;
91
- font-size: 14px;
92
- color: #888;
93
- line-height: 1.2; /* Adjust line height for better spacing */
93
+ font-size: 12px;
94
+ color: #888888;
95
+ line-height: 1.2;
94
96
  }
95
97
 
96
98
  .message-card-body {
@@ -99,8 +101,8 @@
99
101
 
100
102
  .message-card-comment {
101
103
  margin: 0;
102
- font-size: 16px;
103
- line-height: 1.5; /* Optimal line height for readability */
104
+ font-size: 13px;
105
+ line-height: 1.5;
104
106
  }
105
107
  .mention-highlight {
106
108
  background-color: #e0f7fa;
@@ -126,8 +128,8 @@
126
128
  }
127
129
 
128
130
  .tag-chip {
129
- padding: 6px 12px;
130
- border-radius: 16px;
131
+ padding: 4px 8px;
132
+ border-radius: 4px;
131
133
  font-size: 12px;
132
134
  font-weight: 500;
133
135
  border: none;
@@ -136,11 +138,36 @@
136
138
  }
137
139
 
138
140
  .hashtag-chip {
139
- background-color: #D4A574;
140
- color: #FFFFFF;
141
+ background-color: rgba(255, 165, 0, 0.15);
142
+ color: #FF8C00;
141
143
  }
142
144
 
143
145
  .mention-chip {
144
- background-color: #2684FF;
145
- color: #FFFFFF;
146
+ background-color: #E0F7FA;
147
+ color: #007BFF;
148
+ }
149
+
150
+ /* Related object styling */
151
+ .message-card-related {
152
+ display: flex;
153
+ align-items: center;
154
+ margin-top: 8px;
155
+ }
156
+
157
+ .related-label {
158
+ font-size: 13px;
159
+ color: #333;
160
+ margin-right: 8px;
161
+ }
162
+
163
+ .related-object-chip {
164
+ background-color: #f0f0f0;
165
+ color: #666;
166
+ padding: 2px 6px;
167
+ border-radius: 4px;
168
+ font-size: 12px;
169
+ height: 20px;
170
+ display: flex;
171
+ align-items: center;
172
+ border: 1px solid #ddd;
146
173
  }
package/src/ShowMessageCard.tsx CHANGED
@@ -15,6 +15,7 @@ interface ShowMessageCardProps {
15
15
  objectNameKey?: string; // Custom key for object identifier (top-right)
16
16
  revisionKey?: string; // Custom key for revision (top-right)
17
17
  objectTypeIconKey?: string; // Custom key for object type icon (top-right)
18
+ relatedObjectKey?: string; // Custom key for related object (bottom-left)
18
19
  containerClassName?: string; // Class for the outermost container
19
20
  containerStyle?: CSSProperties; // Style for the outermost container
20
21
  cardClassName?: string; // Class for the card
@@ -55,6 +56,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
55
56
  objectNameKey = "objectName", // Default key for object identifier
56
57
  revisionKey = "revision", // Default key for revision
57
58
  objectTypeIconKey = "object_type_icon", // Default key for object type icon
59
+ relatedObjectKey = "relatedObject", // Default key for related object
58
60
  containerClassName,
59
61
  containerStyle,
60
62
  cardClassName,
@@ -258,6 +260,16 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
258
260
  ))}
259
261
  </div>
260
262
  )}
263
+
264
+ {/* Display related object at bottom-left */}
265
+ {item[relatedObjectKey] && (
266
+ <div className="message-card-related">
267
+ <span className="related-label">Related: </span>
268
+ <span className="related-object-chip">
269
+ {item[relatedObjectKey]}
270
+ </span>
271
+ </div>
272
+ )}
261
273
  </div>
262
274
  </div>
263
275
  );