react-mention-input 1.1.22 → 1.1.24

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 (6) hide show
  1. package/dist/ShowMessageCard.css +9 -2
  2. package/dist/ShowMessageCard.d.ts +0 -1
  3. package/dist/ShowMessageCard.js +46 -29
  4. package/package.json +1 -1
  5. package/src/ShowMessageCard.css +9 -2
  6. package/src/ShowMessageCard.tsx +64 -66
package/dist/ShowMessageCard.css CHANGED
@@ -5,6 +5,12 @@
5
5
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
6
6
  }
7
7
 
8
+ .message-card-wrapper {
9
+ display: flex;
10
+ flex-direction: column;
11
+ gap: 8px; /* Space between header and card */
12
+ }
13
+
8
14
  .message-card {
9
15
  display: flex;
10
16
  flex-direction: column;
@@ -13,6 +19,7 @@
13
19
  padding: 16px;
14
20
  background-color: #fff;
15
21
  transition: box-shadow 0.2s;
22
+ margin-left: 36px; /* Indent to align with header content */
16
23
  }
17
24
 
18
25
  .message-card:hover {
@@ -23,7 +30,7 @@
23
30
  display: flex;
24
31
  align-items: center;
25
32
  justify-content: space-between;
26
- margin-bottom: 8px; /* Space between header and body */
33
+ margin-bottom: 0; /* No margin since header is outside */
27
34
  }
28
35
 
29
36
  .message-card-header-left {
@@ -96,7 +103,7 @@
96
103
  }
97
104
 
98
105
  .message-card-body {
99
- margin-top: 8px; /* Space between header and comment */
106
+ margin-top: 0; /* No margin since body is in the card */
100
107
  }
101
108
 
102
109
  .message-card-comment {
package/dist/ShowMessageCard.d.ts CHANGED
@@ -13,7 +13,6 @@ interface ShowMessageCardProps {
13
13
  objectNameKey?: string;
14
14
  revisionKey?: string;
15
15
  objectTypeIconKey?: string;
16
- relatedObjectKey?: string;
17
16
  containerClassName?: string;
18
17
  containerStyle?: CSSProperties;
19
18
  cardClassName?: string;
package/dist/ShowMessageCard.js CHANGED
@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
13
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
14
+ if (ar || !(i in from)) {
15
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
16
+ ar[i] = from[i];
17
+ }
18
+ }
19
+ return to.concat(ar || Array.prototype.slice.call(from));
20
+ };
12
21
  import React, { useState } from "react";
13
22
  import "./ShowMessageCard.css";
14
23
  export var ShowMessageCard = function (_a) {
@@ -19,12 +28,10 @@ export var ShowMessageCard = function (_a) {
19
28
  revisionKey = _h === void 0 ? "revision" : _h, // Default key for revision
20
29
  _j = _a.objectTypeIconKey, // Default key for revision
21
30
  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
24
31
  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
25
32
  renderItem = _a.renderItem;
26
33
  // State to manage initials for images that fail to load
27
- var _l = useState({}), initialsState = _l[0], setInitialsState = _l[1];
34
+ var _k = useState({}), initialsState = _k[0], setInitialsState = _k[1];
28
35
  // Handle image load failure
29
36
  var handleImageError = function (id) {
30
37
  setInitialsState(function (prevState) {
@@ -43,12 +50,25 @@ export var ShowMessageCard = function (_a) {
43
50
  };
44
51
  // Helper function to extract hashtags and mentions from text
45
52
  var extractTagsAndMentions = function (text) {
46
- var plainText = text.replace(/<[^>]*>/g, ''); // Remove HTML tags to get plain text
47
- var hashtags = plainText.match(/#[\w]+/g) || [];
48
- var mentions = plainText.match(/@[\w\s-]+/g) || [];
53
+ // First extract from HTML with spans
54
+ var hashtagsFromHTML = text.match(/<span[^>]*class="hashtag-highlight"[^>]*>(#[\w]+)<\/span>/g) || [];
55
+ var mentionsFromHTML = text.match(/<span[^>]*class="mention-highlight"[^>]*>(@[^<]+)<\/span>/g) || [];
56
+ // Extract the actual text content from HTML
57
+ var hashtags = hashtagsFromHTML.map(function (match) {
58
+ var textMatch = match.match(/>(#[\w]+)</);
59
+ return textMatch ? textMatch[1] : '';
60
+ }).filter(function (tag) { return tag; });
61
+ var mentions = mentionsFromHTML.map(function (match) {
62
+ var textMatch = match.match(/>(@[^<]+)</);
63
+ return textMatch ? textMatch[1].trim() : '';
64
+ }).filter(function (mention) { return mention; });
65
+ // Also check plain text for any missed items
66
+ var plainText = text.replace(/<[^>]*>/g, '');
67
+ var plainHashtags = plainText.match(/#[\w]+/g) || [];
68
+ var plainMentions = plainText.match(/@[\w\s-]+/g) || [];
49
69
  return {
50
- hashtags: Array.from(new Set(hashtags)), // Remove duplicates
51
- mentions: Array.from(new Set(mentions.map(function (mention) { return mention.trim(); }))) // Remove duplicates and trim
70
+ hashtags: Array.from(new Set(__spreadArray(__spreadArray([], hashtags, true), plainHashtags, true))), // Remove duplicates
71
+ mentions: Array.from(new Set(__spreadArray(__spreadArray([], mentions, true), plainMentions.map(function (mention) { return mention.trim(); }), true))) // Remove duplicates and trim
52
72
  };
53
73
  };
54
74
  return (React.createElement("div", { className: "message-card-container ".concat(containerClassName || ""), style: containerStyle }, data.map(function (item, index) {
@@ -59,31 +79,28 @@ export var ShowMessageCard = function (_a) {
59
79
  var showInitials = initialsState[item.id || index] || !item[imgSrcKey]; // Decide whether to show initials
60
80
  // Extract tags and mentions from the comment
61
81
  var _a = extractTagsAndMentions(item[commentKey] || ''), hashtags = _a.hashtags, mentions = _a.mentions;
62
- return (React.createElement("div", { key: item.id || index, className: "message-card ".concat(cardClassName || ""), style: cardStyle },
82
+ return (React.createElement("div", { key: item.id || index, className: "message-card-wrapper" },
63
83
  React.createElement("div", { className: "message-card-header ".concat(headerClassName || ""), style: headerStyle },
64
84
  React.createElement("div", { className: "message-card-header-left" },
65
85
  showInitials ? (React.createElement("div", { className: "message-card-initials ".concat(imgClassName || ""), style: imgStyle }, getInitials(item[nameKey]))) : (React.createElement("img", { src: item[imgSrcKey], alt: item[nameKey], className: "message-card-img ".concat(imgClassName || ""), style: imgStyle, onError: function () { return handleImageError(item.id || index); } })),
66
86
  React.createElement("div", { className: "message-card-info ".concat(infoClassName || ""), style: infoStyle },
67
87
  React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
68
- React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
69
- (item[objectNameKey] || item[revisionKey] || item[objectTypeIconKey]) && (React.createElement(React.Fragment, null, objectChipRender ? (objectChipRender({
70
- objectName: item[objectNameKey],
71
- revision: item[revisionKey],
72
- objectTypeIcon: item[objectTypeIconKey],
73
- item: item
74
- })) : (React.createElement("div", { className: "message-card-item-name ".concat(objectNameClassName || ""), style: objectNameStyle },
75
- item[objectTypeIconKey] && (React.createElement("span", { className: "object-type-icon", style: { marginRight: '6px' } }, item[objectTypeIconKey])),
76
- item[objectNameKey] && (React.createElement("span", { className: "object-name-text" }, item[objectNameKey])),
77
- item[revisionKey] && (React.createElement("span", { className: "revision-text ".concat(revisionClassName || ""), style: revisionStyle }, item[objectNameKey] ? " (".concat(item[revisionKey], ")") : "(".concat(item[revisionKey], ")")))))))),
78
- React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
79
- React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }),
80
- (item === null || item === void 0 ? void 0 : item[imageUrlKey]) && (React.createElement("div", { className: "message-card-attached-image-container ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
81
- React.createElement("img", { src: item[imageUrlKey], alt: "Attached", className: "message-card-attached-image ".concat(attachedImageClassName || ""), style: attachedImageStyle }))),
82
- (hashtags.length > 0 || mentions.length > 0) && (React.createElement("div", { className: "message-card-tags" },
83
- hashtags.map(function (tag, tagIndex) { return (React.createElement("span", { key: "hashtag-".concat(tagIndex), className: "tag-chip hashtag-chip" }, tag)); }),
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]))))));
88
+ React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey])))),
89
+ React.createElement("div", { className: "message-card ".concat(cardClassName || ""), style: cardStyle },
90
+ React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
91
+ React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }),
92
+ (item === null || item === void 0 ? void 0 : item[imageUrlKey]) && (React.createElement("div", { className: "message-card-attached-image-container ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
93
+ React.createElement("img", { src: item[imageUrlKey], alt: "Attached", className: "message-card-attached-image ".concat(attachedImageClassName || ""), style: attachedImageStyle }))),
94
+ item[objectNameKey] && (React.createElement("div", { className: "message-card-related" },
95
+ React.createElement("span", { className: "related-label" }, "Related: "),
96
+ (item[objectNameKey] || item[revisionKey] || item[objectTypeIconKey]) && (React.createElement(React.Fragment, null, objectChipRender ? (objectChipRender({
97
+ objectName: item[objectNameKey],
98
+ revision: item[revisionKey],
99
+ objectTypeIcon: item[objectTypeIconKey],
100
+ item: item
101
+ })) : (React.createElement("div", { className: "message-card-item-name ".concat(objectNameClassName || ""), style: objectNameStyle },
102
+ item[objectTypeIconKey] && (React.createElement("span", { className: "object-type-icon", style: { marginRight: '6px' } }, item[objectTypeIconKey])),
103
+ item[objectNameKey] && (React.createElement("span", { className: "object-name-text" }, item[objectNameKey])),
104
+ item[revisionKey] && (React.createElement("span", { className: "revision-text ".concat(revisionClassName || ""), style: revisionStyle }, item[objectNameKey] ? " (".concat(item[revisionKey], ")") : "(".concat(item[revisionKey], ")")))))))))))));
88
105
  })));
89
106
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-mention-input",
3
- "version": "1.1.22",
3
+ "version": "1.1.24",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
package/src/ShowMessageCard.css CHANGED
@@ -5,6 +5,12 @@
5
5
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
6
6
  }
7
7
 
8
+ .message-card-wrapper {
9
+ display: flex;
10
+ flex-direction: column;
11
+ gap: 8px; /* Space between header and card */
12
+ }
13
+
8
14
  .message-card {
9
15
  display: flex;
10
16
  flex-direction: column;
@@ -13,6 +19,7 @@
13
19
  padding: 16px;
14
20
  background-color: #fff;
15
21
  transition: box-shadow 0.2s;
22
+ margin-left: 36px; /* Indent to align with header content */
16
23
  }
17
24
 
18
25
  .message-card:hover {
@@ -23,7 +30,7 @@
23
30
  display: flex;
24
31
  align-items: center;
25
32
  justify-content: space-between;
26
- margin-bottom: 8px; /* Space between header and body */
33
+ margin-bottom: 0; /* No margin since header is outside */
27
34
  }
28
35
 
29
36
  .message-card-header-left {
@@ -96,7 +103,7 @@
96
103
  }
97
104
 
98
105
  .message-card-body {
99
- margin-top: 8px; /* Space between header and comment */
106
+ margin-top: 0; /* No margin since body is in the card */
100
107
  }
101
108
 
102
109
  .message-card-comment {
package/src/ShowMessageCard.tsx CHANGED
@@ -15,7 +15,6 @@ 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)
19
18
  containerClassName?: string; // Class for the outermost container
20
19
  containerStyle?: CSSProperties; // Style for the outermost container
21
20
  cardClassName?: string; // Class for the card
@@ -56,7 +55,6 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
56
55
  objectNameKey = "objectName", // Default key for object identifier
57
56
  revisionKey = "revision", // Default key for revision
58
57
  objectTypeIconKey = "object_type_icon", // Default key for object type icon
59
- relatedObjectKey = "relatedObject", // Default key for related object
60
58
  containerClassName,
61
59
  containerStyle,
62
60
  cardClassName,
@@ -111,13 +109,29 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
111
109
 
112
110
  // Helper function to extract hashtags and mentions from text
113
111
  const extractTagsAndMentions = (text: string) => {
114
- const plainText = text.replace(/<[^>]*>/g, ''); // Remove HTML tags to get plain text
115
- const hashtags = plainText.match(/#[\w]+/g) || [];
116
- const mentions = plainText.match(/@[\w\s-]+/g) || [];
112
+ // First extract from HTML with spans
113
+ const hashtagsFromHTML = text.match(/<span[^>]*class="hashtag-highlight"[^>]*>(#[\w]+)<\/span>/g) || [];
114
+ const mentionsFromHTML = text.match(/<span[^>]*class="mention-highlight"[^>]*>(@[^<]+)<\/span>/g) || [];
115
+
116
+ // Extract the actual text content from HTML
117
+ const hashtags = hashtagsFromHTML.map(match => {
118
+ const textMatch = match.match(/>(#[\w]+)</);
119
+ return textMatch ? textMatch[1] : '';
120
+ }).filter(tag => tag);
121
+
122
+ const mentions = mentionsFromHTML.map(match => {
123
+ const textMatch = match.match(/>(@[^<]+)</);
124
+ return textMatch ? textMatch[1].trim() : '';
125
+ }).filter(mention => mention);
126
+
127
+ // Also check plain text for any missed items
128
+ const plainText = text.replace(/<[^>]*>/g, '');
129
+ const plainHashtags = plainText.match(/#[\w]+/g) || [];
130
+ const plainMentions = plainText.match(/@[\w\s-]+/g) || [];
117
131
 
118
132
  return {
119
- hashtags: Array.from(new Set(hashtags)), // Remove duplicates
120
- mentions: Array.from(new Set(mentions.map(mention => mention.trim()))) // Remove duplicates and trim
133
+ hashtags: Array.from(new Set([...hashtags, ...plainHashtags])), // Remove duplicates
134
+ mentions: Array.from(new Set([...mentions, ...plainMentions.map(mention => mention.trim())])) // Remove duplicates and trim
121
135
  };
122
136
  };
123
137
 
@@ -142,11 +156,8 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
142
156
  const { hashtags, mentions } = extractTagsAndMentions(item[commentKey] || '');
143
157
 
144
158
  return (
145
- <div
146
- key={item.id || index}
147
- className={`message-card ${cardClassName || ""}`}
148
- style={cardStyle}
149
- >
159
+ <div key={item.id || index} className="message-card-wrapper">
160
+ {/* Header outside the card bubble */}
150
161
  <div
151
162
  className={`message-card-header ${headerClassName || ""}`}
152
163
  style={headerStyle}
@@ -165,7 +176,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
165
176
  alt={item[nameKey]}
166
177
  className={`message-card-img ${imgClassName || ""}`}
167
178
  style={imgStyle}
168
- onError={() => handleImageError(item.id || index)} // Pass card id or index
179
+ onError={() => handleImageError(item.id || index)}
169
180
  />
170
181
  )}
171
182
  <div
@@ -186,8 +197,43 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
186
197
  </p>
187
198
  </div>
188
199
  </div>
189
-
190
- {/* Object identifier with revision in top-right corner */}
200
+ </div>
201
+
202
+ {/* Card bubble */}
203
+ <div
204
+ className={`message-card ${cardClassName || ""}`}
205
+ style={cardStyle}
206
+ >
207
+ <div
208
+ className={`message-card-body ${bodyClassName || ""}`}
209
+ style={bodyStyle}
210
+ >
211
+ <p
212
+ className={`message-card-comment ${commentClassName || ""}`}
213
+ style={commentStyle}
214
+ dangerouslySetInnerHTML={{ __html: item[commentKey] }}
215
+ ></p>
216
+
217
+ {/* Display attached image if available */}
218
+ {item?.[imageUrlKey] && (
219
+ <div
220
+ className={`message-card-attached-image-container ${attachedImageContainerClassName || ""}`}
221
+ style={attachedImageContainerStyle}
222
+ >
223
+ <img
224
+ src={item[imageUrlKey]}
225
+ alt="Attached"
226
+ className={`message-card-attached-image ${attachedImageClassName || ""}`}
227
+ style={attachedImageStyle}
228
+ />
229
+ </div>
230
+ )}
231
+
232
+ {/* Display related object at bottom-left */}
233
+ {item[objectNameKey] && (
234
+ <div className="message-card-related">
235
+ <span className="related-label">Related: </span>
236
+ {/* Object identifier with revision in top-right corner */}
191
237
  {(item[objectNameKey] || item[revisionKey] || item[objectTypeIconKey]) && (
192
238
  <>
193
239
  {objectChipRender ? (
@@ -219,57 +265,9 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
219
265
  )}
220
266
  </>
221
267
  )}
222
- </div>
223
- <div
224
- className={`message-card-body ${bodyClassName || ""}`}
225
- style={bodyStyle}
226
- >
227
- <p
228
- className={`message-card-comment ${commentClassName || ""}`}
229
- style={commentStyle}
230
- dangerouslySetInnerHTML={{ __html: item[commentKey] }}
231
- ></p>
232
-
233
- {/* Display attached image if available */}
234
- {item?.[imageUrlKey] && (
235
- <div
236
- className={`message-card-attached-image-container ${attachedImageContainerClassName || ""}`}
237
- style={attachedImageContainerStyle}
238
- >
239
- <img
240
- src={item[imageUrlKey]}
241
- alt="Attached"
242
- className={`message-card-attached-image ${attachedImageClassName || ""}`}
243
- style={attachedImageStyle}
244
- />
245
- </div>
246
- )}
247
-
248
- {/* Display hashtags and mentions as chips */}
249
- {(hashtags.length > 0 || mentions.length > 0) && (
250
- <div className="message-card-tags">
251
- {hashtags.map((tag, tagIndex) => (
252
- <span key={`hashtag-${tagIndex}`} className="tag-chip hashtag-chip">
253
- {tag}
254
- </span>
255
- ))}
256
- {mentions.map((mention, mentionIndex) => (
257
- <span key={`mention-${mentionIndex}`} className="tag-chip mention-chip">
258
- {mention}
259
- </span>
260
- ))}
261
- </div>
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
- )}
268
+ </div>
269
+ )}
270
+ </div>
273
271
  </div>
274
272
  </div>
275
273
  );