react-mention-input 1.1.22 → 1.1.23

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/ShowMessageCard.css +9 -2
  2. package/dist/ShowMessageCard.js +39 -16
  3. package/package.json +1 -1
  4. package/src/ShowMessageCard.css +9 -2
  5. package/src/ShowMessageCard.tsx +78 -58
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.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) {
@@ -43,12 +52,25 @@ export var ShowMessageCard = function (_a) {
43
52
  };
44
53
  // Helper function to extract hashtags and mentions from text
45
54
  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) || [];
55
+ // First extract from HTML with spans
56
+ var hashtagsFromHTML = text.match(/<span[^>]*class="hashtag-highlight"[^>]*>(#[\w]+)<\/span>/g) || [];
57
+ var mentionsFromHTML = text.match(/<span[^>]*class="mention-highlight"[^>]*>(@[^<]+)<\/span>/g) || [];
58
+ // Extract the actual text content from HTML
59
+ var hashtags = hashtagsFromHTML.map(function (match) {
60
+ var textMatch = match.match(/>(#[\w]+)</);
61
+ return textMatch ? textMatch[1] : '';
62
+ }).filter(function (tag) { return tag; });
63
+ var mentions = mentionsFromHTML.map(function (match) {
64
+ var textMatch = match.match(/>(@[^<]+)</);
65
+ return textMatch ? textMatch[1].trim() : '';
66
+ }).filter(function (mention) { return mention; });
67
+ // Also check plain text for any missed items
68
+ var plainText = text.replace(/<[^>]*>/g, '');
69
+ var plainHashtags = plainText.match(/#[\w]+/g) || [];
70
+ var plainMentions = plainText.match(/@[\w\s-]+/g) || [];
49
71
  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
72
+ hashtags: Array.from(new Set(__spreadArray(__spreadArray([], hashtags, true), plainHashtags, true))), // Remove duplicates
73
+ mentions: Array.from(new Set(__spreadArray(__spreadArray([], mentions, true), plainMentions.map(function (mention) { return mention.trim(); }), true))) // Remove duplicates and trim
52
74
  };
53
75
  };
54
76
  return (React.createElement("div", { className: "message-card-container ".concat(containerClassName || ""), style: containerStyle }, data.map(function (item, index) {
@@ -59,7 +81,7 @@ export var ShowMessageCard = function (_a) {
59
81
  var showInitials = initialsState[item.id || index] || !item[imgSrcKey]; // Decide whether to show initials
60
82
  // Extract tags and mentions from the comment
61
83
  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 },
84
+ return (React.createElement("div", { key: item.id || index, className: "message-card-wrapper" },
63
85
  React.createElement("div", { className: "message-card-header ".concat(headerClassName || ""), style: headerStyle },
64
86
  React.createElement("div", { className: "message-card-header-left" },
65
87
  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); } })),
@@ -75,15 +97,16 @@ export var ShowMessageCard = function (_a) {
75
97
  item[objectTypeIconKey] && (React.createElement("span", { className: "object-type-icon", style: { marginRight: '6px' } }, item[objectTypeIconKey])),
76
98
  item[objectNameKey] && (React.createElement("span", { className: "object-name-text" }, item[objectNameKey])),
77
99
  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]))))));
100
+ React.createElement("div", { className: "message-card ".concat(cardClassName || ""), style: cardStyle },
101
+ React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
102
+ React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }),
103
+ (item === null || item === void 0 ? void 0 : item[imageUrlKey]) && (React.createElement("div", { className: "message-card-attached-image-container ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
104
+ React.createElement("img", { src: item[imageUrlKey], alt: "Attached", className: "message-card-attached-image ".concat(attachedImageClassName || ""), style: attachedImageStyle }))),
105
+ (hashtags.length > 0 || mentions.length > 0) && (React.createElement("div", { className: "message-card-tags" },
106
+ hashtags.map(function (tag, tagIndex) { return (React.createElement("span", { key: "hashtag-".concat(tagIndex), className: "tag-chip hashtag-chip" }, tag)); }),
107
+ mentions.map(function (mention, mentionIndex) { return (React.createElement("span", { key: "mention-".concat(mentionIndex), className: "tag-chip mention-chip" }, mention)); }))),
108
+ item[relatedObjectKey] && (React.createElement("div", { className: "message-card-related" },
109
+ React.createElement("span", { className: "related-label" }, "Related: "),
110
+ React.createElement("span", { className: "related-object-chip" }, item[relatedObjectKey])))))));
88
111
  })));
89
112
  };
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.23",
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
@@ -111,13 +111,29 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
111
111
 
112
112
  // Helper function to extract hashtags and mentions from text
113
113
  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) || [];
114
+ // First extract from HTML with spans
115
+ const hashtagsFromHTML = text.match(/<span[^>]*class="hashtag-highlight"[^>]*>(#[\w]+)<\/span>/g) || [];
116
+ const mentionsFromHTML = text.match(/<span[^>]*class="mention-highlight"[^>]*>(@[^<]+)<\/span>/g) || [];
117
+
118
+ // Extract the actual text content from HTML
119
+ const hashtags = hashtagsFromHTML.map(match => {
120
+ const textMatch = match.match(/>(#[\w]+)</);
121
+ return textMatch ? textMatch[1] : '';
122
+ }).filter(tag => tag);
123
+
124
+ const mentions = mentionsFromHTML.map(match => {
125
+ const textMatch = match.match(/>(@[^<]+)</);
126
+ return textMatch ? textMatch[1].trim() : '';
127
+ }).filter(mention => mention);
128
+
129
+ // Also check plain text for any missed items
130
+ const plainText = text.replace(/<[^>]*>/g, '');
131
+ const plainHashtags = plainText.match(/#[\w]+/g) || [];
132
+ const plainMentions = plainText.match(/@[\w\s-]+/g) || [];
117
133
 
118
134
  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
135
+ hashtags: Array.from(new Set([...hashtags, ...plainHashtags])), // Remove duplicates
136
+ mentions: Array.from(new Set([...mentions, ...plainMentions.map(mention => mention.trim())])) // Remove duplicates and trim
121
137
  };
122
138
  };
123
139
 
@@ -142,11 +158,8 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
142
158
  const { hashtags, mentions } = extractTagsAndMentions(item[commentKey] || '');
143
159
 
144
160
  return (
145
- <div
146
- key={item.id || index}
147
- className={`message-card ${cardClassName || ""}`}
148
- style={cardStyle}
149
- >
161
+ <div key={item.id || index} className="message-card-wrapper">
162
+ {/* Header outside the card bubble */}
150
163
  <div
151
164
  className={`message-card-header ${headerClassName || ""}`}
152
165
  style={headerStyle}
@@ -165,7 +178,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
165
178
  alt={item[nameKey]}
166
179
  className={`message-card-img ${imgClassName || ""}`}
167
180
  style={imgStyle}
168
- onError={() => handleImageError(item.id || index)} // Pass card id or index
181
+ onError={() => handleImageError(item.id || index)}
169
182
  />
170
183
  )}
171
184
  <div
@@ -220,56 +233,63 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
220
233
  </>
221
234
  )}
222
235
  </div>
236
+
237
+ {/* Card bubble */}
223
238
  <div
224
- className={`message-card-body ${bodyClassName || ""}`}
225
- style={bodyStyle}
239
+ className={`message-card ${cardClassName || ""}`}
240
+ style={cardStyle}
226
241
  >
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}
242
+ <div
243
+ className={`message-card-body ${bodyClassName || ""}`}
244
+ style={bodyStyle}
245
+ >
246
+ <p
247
+ className={`message-card-comment ${commentClassName || ""}`}
248
+ style={commentStyle}
249
+ dangerouslySetInnerHTML={{ __html: item[commentKey] }}
250
+ ></p>
251
+
252
+ {/* Display attached image if available */}
253
+ {item?.[imageUrlKey] && (
254
+ <div
255
+ className={`message-card-attached-image-container ${attachedImageContainerClassName || ""}`}
256
+ style={attachedImageContainerStyle}
257
+ >
258
+ <img
259
+ src={item[imageUrlKey]}
260
+ alt="Attached"
261
+ className={`message-card-attached-image ${attachedImageClassName || ""}`}
262
+ style={attachedImageStyle}
263
+ />
264
+ </div>
265
+ )}
266
+
267
+ {/* Display hashtags and mentions as chips */}
268
+ {(hashtags.length > 0 || mentions.length > 0) && (
269
+ <div className="message-card-tags">
270
+ {hashtags.map((tag, tagIndex) => (
271
+ <span key={`hashtag-${tagIndex}`} className="tag-chip hashtag-chip">
272
+ {tag}
273
+ </span>
274
+ ))}
275
+ {mentions.map((mention, mentionIndex) => (
276
+ <span key={`mention-${mentionIndex}`} className="tag-chip mention-chip">
277
+ {mention}
278
+ </span>
279
+ ))}
280
+ </div>
281
+ )}
282
+
283
+ {/* Display related object at bottom-left */}
284
+ {item[relatedObjectKey] && (
285
+ <div className="message-card-related">
286
+ <span className="related-label">Related: </span>
287
+ <span className="related-object-chip">
288
+ {item[relatedObjectKey]}
259
289
  </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
- )}
290
+ </div>
291
+ )}
292
+ </div>
273
293
  </div>
274
294
  </div>
275
295
  );