react-mention-input 1.1.19 → 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.
- package/demo.tsx +70 -4
- package/dist/MentionInput.css +6 -6
- package/dist/MentionInput.js +1 -1
- package/dist/ShowMessageCard.css +52 -19
- package/dist/ShowMessageCard.d.ts +8 -0
- package/dist/ShowMessageCard.js +19 -5
- package/package.json +1 -1
- package/src/MentionInput.css +6 -6
- package/src/MentionInput.tsx +1 -1
- package/src/ShowMessageCard.css +52 -19
- package/src/ShowMessageCard.tsx +45 -13
package/demo.tsx
CHANGED
|
@@ -6,18 +6,22 @@ const Demo: React.FC = () => {
|
|
|
6
6
|
{
|
|
7
7
|
id: 1,
|
|
8
8
|
name: 'John Doe',
|
|
9
|
-
date: '
|
|
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
|
+
object_type_icon: '📄',
|
|
14
|
+
relatedObject: 'test_jeet_july2334 (A)',
|
|
13
15
|
},
|
|
14
16
|
{
|
|
15
17
|
id: 2,
|
|
16
18
|
name: 'Mike Johnson',
|
|
17
|
-
date: '
|
|
19
|
+
date: '14/07/2025 04:15 PM',
|
|
18
20
|
comment: 'Revision A completed successfully. Ready for next phase. <span class="hashtag-highlight">#milestone</span>',
|
|
19
21
|
objectName: '26may_item001',
|
|
20
22
|
revision: 'A',
|
|
23
|
+
object_type_icon: '📋',
|
|
24
|
+
relatedObject: 'test_jeet_july2334 (A)',
|
|
21
25
|
}
|
|
22
26
|
]);
|
|
23
27
|
|
|
@@ -52,6 +56,8 @@ const Demo: React.FC = () => {
|
|
|
52
56
|
mentions: messageData.userSelectListName,
|
|
53
57
|
objectName: 'new_item001', // You can customize this or make it dynamic
|
|
54
58
|
revision: 'A', // You can customize this or make it dynamic
|
|
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
|
|
55
61
|
};
|
|
56
62
|
|
|
57
63
|
setMessages([...messages, newMessage]);
|
|
@@ -68,23 +74,50 @@ const Demo: React.FC = () => {
|
|
|
68
74
|
<li>Type <strong>#</strong> to create hashtags (e.g., #urgent #review #milestone)</li>
|
|
69
75
|
<li>Links are automatically detected and highlighted</li>
|
|
70
76
|
<li>Hashtags are extracted and returned in the tags array</li>
|
|
77
|
+
<li><strong>Custom Object Chip</strong> rendering with objectChipRender prop</li>
|
|
78
|
+
<li><strong>Object Type Icons</strong> for visual identification</li>
|
|
71
79
|
</ul>
|
|
72
80
|
</div>
|
|
73
81
|
|
|
74
82
|
<div style={{ marginBottom: '20px' }}>
|
|
75
83
|
<MentionInput
|
|
76
84
|
users={users}
|
|
77
|
-
placeholder="Type
|
|
85
|
+
placeholder="Type @ to mention and inform someone"
|
|
78
86
|
onSendMessage={handleSendMessage}
|
|
79
87
|
suggestionPosition="bottom"
|
|
80
88
|
/>
|
|
81
89
|
</div>
|
|
82
90
|
|
|
83
91
|
<div>
|
|
84
|
-
<h3>Messages:</h3>
|
|
92
|
+
<h3>Messages (Default Object Chip):</h3>
|
|
85
93
|
<ShowMessageCard data={messages} />
|
|
86
94
|
</div>
|
|
87
95
|
|
|
96
|
+
<div style={{ marginTop: '30px' }}>
|
|
97
|
+
<h3>Messages (Custom Object Chip):</h3>
|
|
98
|
+
<ShowMessageCard
|
|
99
|
+
data={messages}
|
|
100
|
+
objectChipRender={({ objectName, revision, objectTypeIcon, item }) => (
|
|
101
|
+
<div style={{
|
|
102
|
+
backgroundColor: '#007bff',
|
|
103
|
+
color: 'white',
|
|
104
|
+
padding: '6px 12px',
|
|
105
|
+
borderRadius: '20px',
|
|
106
|
+
fontSize: '12px',
|
|
107
|
+
fontWeight: '600',
|
|
108
|
+
boxShadow: '0 2px 4px rgba(0,123,255,0.3)',
|
|
109
|
+
display: 'flex',
|
|
110
|
+
alignItems: 'center',
|
|
111
|
+
gap: '4px'
|
|
112
|
+
}}>
|
|
113
|
+
{objectTypeIcon && <span>{objectTypeIcon}</span>}
|
|
114
|
+
{objectName && <span>{objectName}</span>}
|
|
115
|
+
{revision && <span style={{ opacity: 0.8 }}> v{revision}</span>}
|
|
116
|
+
</div>
|
|
117
|
+
)}
|
|
118
|
+
/>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
88
121
|
<div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
|
|
89
122
|
<h4>Example Usage:</h4>
|
|
90
123
|
<p>Try typing these examples:</p>
|
|
@@ -93,6 +126,39 @@ const Demo: React.FC = () => {
|
|
|
93
126
|
<li>"Need urgent help with deployment @Jane Smith @Mike Johnson #urgent #deployment #help"</li>
|
|
94
127
|
<li>"Meeting scheduled for tomorrow #meeting #planning"</li>
|
|
95
128
|
</ul>
|
|
129
|
+
|
|
130
|
+
<h4 style={{ marginTop: '20px' }}>objectChipRender Example:</h4>
|
|
131
|
+
<pre style={{ backgroundColor: '#2d3748', color: '#e2e8f0', padding: '12px', borderRadius: '6px', fontSize: '12px', overflow: 'auto' }}>
|
|
132
|
+
{`<ShowMessageCard
|
|
133
|
+
data={messages}
|
|
134
|
+
objectChipRender={({ objectName, revision, objectTypeIcon, item }) => (
|
|
135
|
+
<div style={{
|
|
136
|
+
backgroundColor: '#007bff',
|
|
137
|
+
color: 'white',
|
|
138
|
+
padding: '6px 12px',
|
|
139
|
+
borderRadius: '20px',
|
|
140
|
+
display: 'flex',
|
|
141
|
+
alignItems: 'center',
|
|
142
|
+
gap: '4px'
|
|
143
|
+
}}>
|
|
144
|
+
{objectTypeIcon && <span>{objectTypeIcon}</span>}
|
|
145
|
+
{objectName} v{revision}
|
|
146
|
+
</div>
|
|
147
|
+
)}
|
|
148
|
+
/>`}
|
|
149
|
+
</pre>
|
|
150
|
+
|
|
151
|
+
<h4 style={{ marginTop: '20px' }}>Data Structure with Icon:</h4>
|
|
152
|
+
<pre style={{ backgroundColor: '#2d3748', color: '#e2e8f0', padding: '12px', borderRadius: '6px', fontSize: '12px', overflow: 'auto' }}>
|
|
153
|
+
{`const messageData = {
|
|
154
|
+
name: 'John Doe',
|
|
155
|
+
objectName: '26may_item001',
|
|
156
|
+
revision: 'A',
|
|
157
|
+
object_type_icon: '📄', // Document icon
|
|
158
|
+
relatedObject: 'test_jeet_july2334 (A)', // Related object
|
|
159
|
+
comment: 'Message content...'
|
|
160
|
+
};`}
|
|
161
|
+
</pre>
|
|
96
162
|
</div>
|
|
97
163
|
</div>
|
|
98
164
|
);
|
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:
|
|
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:
|
|
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: #
|
|
115
|
+
background-color: #23488C;
|
|
116
116
|
color: white;
|
|
117
117
|
border: none;
|
|
118
118
|
cursor: pointer;
|
|
119
|
-
font-size:
|
|
119
|
+
font-size: 24px;
|
|
120
120
|
transition: background-color 0.2s;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
.send-button:hover {
|
|
124
|
-
background-color: #
|
|
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 {
|
|
@@ -43,6 +44,12 @@
|
|
|
43
44
|
white-space: nowrap;
|
|
44
45
|
}
|
|
45
46
|
|
|
47
|
+
.object-type-icon {
|
|
48
|
+
font-size: 14px;
|
|
49
|
+
display: inline-flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
}
|
|
52
|
+
|
|
46
53
|
.object-name-text {
|
|
47
54
|
font-weight: 600;
|
|
48
55
|
}
|
|
@@ -55,36 +62,37 @@
|
|
|
55
62
|
|
|
56
63
|
.message-card-img,
|
|
57
64
|
.message-card-initials {
|
|
58
|
-
width:
|
|
59
|
-
height:
|
|
65
|
+
width: 28px;
|
|
66
|
+
height: 28px;
|
|
60
67
|
border-radius: 50%;
|
|
61
68
|
display: flex;
|
|
62
69
|
align-items: center;
|
|
63
70
|
justify-content: center;
|
|
64
|
-
font-size:
|
|
71
|
+
font-size: 12px;
|
|
65
72
|
font-weight: bold;
|
|
66
73
|
color: #fff;
|
|
67
74
|
background-color: #007bff;
|
|
68
75
|
text-transform: uppercase;
|
|
69
|
-
margin-right:
|
|
76
|
+
margin-right: 8px;
|
|
70
77
|
}
|
|
71
78
|
.message-card-info {
|
|
72
79
|
display: flex;
|
|
73
|
-
|
|
80
|
+
align-items: center;
|
|
74
81
|
}
|
|
75
82
|
|
|
76
83
|
.message-card-name {
|
|
77
84
|
margin: 0;
|
|
78
|
-
font-size:
|
|
79
|
-
font-weight:
|
|
80
|
-
line-height: 1.2;
|
|
85
|
+
font-size: 14px;
|
|
86
|
+
font-weight: 600;
|
|
87
|
+
line-height: 1.2;
|
|
88
|
+
margin-right: 8px;
|
|
81
89
|
}
|
|
82
90
|
|
|
83
91
|
.message-card-date {
|
|
84
92
|
margin: 0;
|
|
85
|
-
font-size:
|
|
86
|
-
color: #
|
|
87
|
-
line-height: 1.2;
|
|
93
|
+
font-size: 12px;
|
|
94
|
+
color: #888888;
|
|
95
|
+
line-height: 1.2;
|
|
88
96
|
}
|
|
89
97
|
|
|
90
98
|
.message-card-body {
|
|
@@ -93,8 +101,8 @@
|
|
|
93
101
|
|
|
94
102
|
.message-card-comment {
|
|
95
103
|
margin: 0;
|
|
96
|
-
font-size:
|
|
97
|
-
line-height: 1.5;
|
|
104
|
+
font-size: 13px;
|
|
105
|
+
line-height: 1.5;
|
|
98
106
|
}
|
|
99
107
|
.mention-highlight {
|
|
100
108
|
background-color: #e0f7fa;
|
|
@@ -120,8 +128,8 @@
|
|
|
120
128
|
}
|
|
121
129
|
|
|
122
130
|
.tag-chip {
|
|
123
|
-
padding:
|
|
124
|
-
border-radius:
|
|
131
|
+
padding: 4px 8px;
|
|
132
|
+
border-radius: 4px;
|
|
125
133
|
font-size: 12px;
|
|
126
134
|
font-weight: 500;
|
|
127
135
|
border: none;
|
|
@@ -130,11 +138,36 @@
|
|
|
130
138
|
}
|
|
131
139
|
|
|
132
140
|
.hashtag-chip {
|
|
133
|
-
background-color:
|
|
134
|
-
color: #
|
|
141
|
+
background-color: rgba(255, 165, 0, 0.15);
|
|
142
|
+
color: #FF8C00;
|
|
135
143
|
}
|
|
136
144
|
|
|
137
145
|
.mention-chip {
|
|
138
|
-
background-color: #
|
|
139
|
-
color: #
|
|
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;
|
|
140
173
|
}
|
|
@@ -12,6 +12,8 @@ interface ShowMessageCardProps {
|
|
|
12
12
|
imageUrlKey?: string;
|
|
13
13
|
objectNameKey?: string;
|
|
14
14
|
revisionKey?: string;
|
|
15
|
+
objectTypeIconKey?: string;
|
|
16
|
+
relatedObjectKey?: string;
|
|
15
17
|
containerClassName?: string;
|
|
16
18
|
containerStyle?: CSSProperties;
|
|
17
19
|
cardClassName?: string;
|
|
@@ -38,6 +40,12 @@ interface ShowMessageCardProps {
|
|
|
38
40
|
objectNameStyle?: CSSProperties;
|
|
39
41
|
revisionClassName?: string;
|
|
40
42
|
revisionStyle?: CSSProperties;
|
|
43
|
+
objectChipRender?: (objectData: {
|
|
44
|
+
objectName?: string;
|
|
45
|
+
revision?: string;
|
|
46
|
+
objectTypeIcon?: string;
|
|
47
|
+
item: MessageCardProps;
|
|
48
|
+
}) => ReactNode;
|
|
41
49
|
renderItem?: (element: MessageCardProps) => ReactNode;
|
|
42
50
|
}
|
|
43
51
|
export declare const ShowMessageCard: React.FC<ShowMessageCardProps>;
|
package/dist/ShowMessageCard.js
CHANGED
|
@@ -17,9 +17,14 @@ export var ShowMessageCard = function (_a) {
|
|
|
17
17
|
objectNameKey = _g === void 0 ? "objectName" : _g, // Default key for object identifier
|
|
18
18
|
_h = _a.revisionKey, // Default key for object identifier
|
|
19
19
|
revisionKey = _h === void 0 ? "revision" : _h, // Default key for revision
|
|
20
|
-
|
|
20
|
+
_j = _a.objectTypeIconKey, // Default key for revision
|
|
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
|
|
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
|
|
25
|
+
renderItem = _a.renderItem;
|
|
21
26
|
// State to manage initials for images that fail to load
|
|
22
|
-
var
|
|
27
|
+
var _l = useState({}), initialsState = _l[0], setInitialsState = _l[1];
|
|
23
28
|
// Handle image load failure
|
|
24
29
|
var handleImageError = function (id) {
|
|
25
30
|
setInitialsState(function (prevState) {
|
|
@@ -61,15 +66,24 @@ export var ShowMessageCard = function (_a) {
|
|
|
61
66
|
React.createElement("div", { className: "message-card-info ".concat(infoClassName || ""), style: infoStyle },
|
|
62
67
|
React.createElement("h3", { className: "message-card-name ".concat(nameClassName || ""), style: nameStyle }, item[nameKey]),
|
|
63
68
|
React.createElement("p", { className: "message-card-date ".concat(dateClassName || ""), style: dateStyle }, item[dateKey]))),
|
|
64
|
-
(item[objectNameKey] || item[revisionKey]) && (React.createElement(
|
|
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])),
|
|
65
76
|
item[objectNameKey] && (React.createElement("span", { className: "object-name-text" }, item[objectNameKey])),
|
|
66
|
-
item[revisionKey] && (React.createElement("span", { className: "revision-text ".concat(revisionClassName || ""), style: revisionStyle }, item[objectNameKey] ? " (".concat(item[revisionKey], ")") : "(".concat(item[revisionKey], ")")))))),
|
|
77
|
+
item[revisionKey] && (React.createElement("span", { className: "revision-text ".concat(revisionClassName || ""), style: revisionStyle }, item[objectNameKey] ? " (".concat(item[revisionKey], ")") : "(".concat(item[revisionKey], ")")))))))),
|
|
67
78
|
React.createElement("div", { className: "message-card-body ".concat(bodyClassName || ""), style: bodyStyle },
|
|
68
79
|
React.createElement("p", { className: "message-card-comment ".concat(commentClassName || ""), style: commentStyle, dangerouslySetInnerHTML: { __html: item[commentKey] } }),
|
|
69
80
|
(item === null || item === void 0 ? void 0 : item[imageUrlKey]) && (React.createElement("div", { className: "message-card-attached-image-container ".concat(attachedImageContainerClassName || ""), style: attachedImageContainerStyle },
|
|
70
81
|
React.createElement("img", { src: item[imageUrlKey], alt: "Attached", className: "message-card-attached-image ".concat(attachedImageClassName || ""), style: attachedImageStyle }))),
|
|
71
82
|
(hashtags.length > 0 || mentions.length > 0) && (React.createElement("div", { className: "message-card-tags" },
|
|
72
83
|
hashtags.map(function (tag, tagIndex) { return (React.createElement("span", { key: "hashtag-".concat(tagIndex), className: "tag-chip hashtag-chip" }, tag)); }),
|
|
73
|
-
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]))))));
|
|
74
88
|
})));
|
|
75
89
|
};
|
package/package.json
CHANGED
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:
|
|
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:
|
|
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: #
|
|
115
|
+
background-color: #23488C;
|
|
116
116
|
color: white;
|
|
117
117
|
border: none;
|
|
118
118
|
cursor: pointer;
|
|
119
|
-
font-size:
|
|
119
|
+
font-size: 24px;
|
|
120
120
|
transition: background-color 0.2s;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
.send-button:hover {
|
|
124
|
-
background-color: #
|
|
124
|
+
background-color: #1a3a7a;
|
|
125
125
|
}
|
|
126
126
|
|
|
127
127
|
/* Suggestion list with proper columnar layout */
|
package/src/MentionInput.tsx
CHANGED
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 {
|
|
@@ -43,6 +44,12 @@
|
|
|
43
44
|
white-space: nowrap;
|
|
44
45
|
}
|
|
45
46
|
|
|
47
|
+
.object-type-icon {
|
|
48
|
+
font-size: 14px;
|
|
49
|
+
display: inline-flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
}
|
|
52
|
+
|
|
46
53
|
.object-name-text {
|
|
47
54
|
font-weight: 600;
|
|
48
55
|
}
|
|
@@ -55,36 +62,37 @@
|
|
|
55
62
|
|
|
56
63
|
.message-card-img,
|
|
57
64
|
.message-card-initials {
|
|
58
|
-
width:
|
|
59
|
-
height:
|
|
65
|
+
width: 28px;
|
|
66
|
+
height: 28px;
|
|
60
67
|
border-radius: 50%;
|
|
61
68
|
display: flex;
|
|
62
69
|
align-items: center;
|
|
63
70
|
justify-content: center;
|
|
64
|
-
font-size:
|
|
71
|
+
font-size: 12px;
|
|
65
72
|
font-weight: bold;
|
|
66
73
|
color: #fff;
|
|
67
74
|
background-color: #007bff;
|
|
68
75
|
text-transform: uppercase;
|
|
69
|
-
margin-right:
|
|
76
|
+
margin-right: 8px;
|
|
70
77
|
}
|
|
71
78
|
.message-card-info {
|
|
72
79
|
display: flex;
|
|
73
|
-
|
|
80
|
+
align-items: center;
|
|
74
81
|
}
|
|
75
82
|
|
|
76
83
|
.message-card-name {
|
|
77
84
|
margin: 0;
|
|
78
|
-
font-size:
|
|
79
|
-
font-weight:
|
|
80
|
-
line-height: 1.2;
|
|
85
|
+
font-size: 14px;
|
|
86
|
+
font-weight: 600;
|
|
87
|
+
line-height: 1.2;
|
|
88
|
+
margin-right: 8px;
|
|
81
89
|
}
|
|
82
90
|
|
|
83
91
|
.message-card-date {
|
|
84
92
|
margin: 0;
|
|
85
|
-
font-size:
|
|
86
|
-
color: #
|
|
87
|
-
line-height: 1.2;
|
|
93
|
+
font-size: 12px;
|
|
94
|
+
color: #888888;
|
|
95
|
+
line-height: 1.2;
|
|
88
96
|
}
|
|
89
97
|
|
|
90
98
|
.message-card-body {
|
|
@@ -93,8 +101,8 @@
|
|
|
93
101
|
|
|
94
102
|
.message-card-comment {
|
|
95
103
|
margin: 0;
|
|
96
|
-
font-size:
|
|
97
|
-
line-height: 1.5;
|
|
104
|
+
font-size: 13px;
|
|
105
|
+
line-height: 1.5;
|
|
98
106
|
}
|
|
99
107
|
.mention-highlight {
|
|
100
108
|
background-color: #e0f7fa;
|
|
@@ -120,8 +128,8 @@
|
|
|
120
128
|
}
|
|
121
129
|
|
|
122
130
|
.tag-chip {
|
|
123
|
-
padding:
|
|
124
|
-
border-radius:
|
|
131
|
+
padding: 4px 8px;
|
|
132
|
+
border-radius: 4px;
|
|
125
133
|
font-size: 12px;
|
|
126
134
|
font-weight: 500;
|
|
127
135
|
border: none;
|
|
@@ -130,11 +138,36 @@
|
|
|
130
138
|
}
|
|
131
139
|
|
|
132
140
|
.hashtag-chip {
|
|
133
|
-
background-color:
|
|
134
|
-
color: #
|
|
141
|
+
background-color: rgba(255, 165, 0, 0.15);
|
|
142
|
+
color: #FF8C00;
|
|
135
143
|
}
|
|
136
144
|
|
|
137
145
|
.mention-chip {
|
|
138
|
-
background-color: #
|
|
139
|
-
color: #
|
|
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;
|
|
140
173
|
}
|
package/src/ShowMessageCard.tsx
CHANGED
|
@@ -14,6 +14,8 @@ interface ShowMessageCardProps {
|
|
|
14
14
|
imageUrlKey?: string; // Custom key for attached image URL
|
|
15
15
|
objectNameKey?: string; // Custom key for object identifier (top-right)
|
|
16
16
|
revisionKey?: string; // Custom key for revision (top-right)
|
|
17
|
+
objectTypeIconKey?: string; // Custom key for object type icon (top-right)
|
|
18
|
+
relatedObjectKey?: string; // Custom key for related object (bottom-left)
|
|
17
19
|
containerClassName?: string; // Class for the outermost container
|
|
18
20
|
containerStyle?: CSSProperties; // Style for the outermost container
|
|
19
21
|
cardClassName?: string; // Class for the card
|
|
@@ -40,6 +42,7 @@ interface ShowMessageCardProps {
|
|
|
40
42
|
objectNameStyle?: CSSProperties; // Style for the object name (top-right)
|
|
41
43
|
revisionClassName?: string; // Class for the revision (top-right)
|
|
42
44
|
revisionStyle?: CSSProperties; // Style for the revision (top-right)
|
|
45
|
+
objectChipRender?: (objectData: { objectName?: string; revision?: string; objectTypeIcon?: string; item: MessageCardProps }) => ReactNode; // Custom render function for object chip
|
|
43
46
|
renderItem?: (element: MessageCardProps) => ReactNode; // Custom render function
|
|
44
47
|
}
|
|
45
48
|
|
|
@@ -52,6 +55,8 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
|
52
55
|
imageUrlKey = "imageUrl", // Default key for attached image
|
|
53
56
|
objectNameKey = "objectName", // Default key for object identifier
|
|
54
57
|
revisionKey = "revision", // Default key for revision
|
|
58
|
+
objectTypeIconKey = "object_type_icon", // Default key for object type icon
|
|
59
|
+
relatedObjectKey = "relatedObject", // Default key for related object
|
|
55
60
|
containerClassName,
|
|
56
61
|
containerStyle,
|
|
57
62
|
cardClassName,
|
|
@@ -78,6 +83,7 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
|
78
83
|
objectNameStyle,
|
|
79
84
|
revisionClassName,
|
|
80
85
|
revisionStyle,
|
|
86
|
+
objectChipRender, // Custom render function for object chip
|
|
81
87
|
renderItem, // Custom render function
|
|
82
88
|
}) => {
|
|
83
89
|
// State to manage initials for images that fail to load
|
|
@@ -182,20 +188,36 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
|
182
188
|
</div>
|
|
183
189
|
|
|
184
190
|
{/* Object identifier with revision in top-right corner */}
|
|
185
|
-
{(item[objectNameKey] || item[revisionKey]) && (
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
191
|
+
{(item[objectNameKey] || item[revisionKey] || item[objectTypeIconKey]) && (
|
|
192
|
+
<>
|
|
193
|
+
{objectChipRender ? (
|
|
194
|
+
objectChipRender({
|
|
195
|
+
objectName: item[objectNameKey],
|
|
196
|
+
revision: item[revisionKey],
|
|
197
|
+
objectTypeIcon: item[objectTypeIconKey],
|
|
198
|
+
item: item
|
|
199
|
+
})
|
|
200
|
+
) : (
|
|
201
|
+
<div
|
|
202
|
+
className={`message-card-item-name ${objectNameClassName || ""}`}
|
|
203
|
+
style={objectNameStyle}
|
|
204
|
+
>
|
|
205
|
+
{item[objectTypeIconKey] && (
|
|
206
|
+
<span className="object-type-icon" style={{ marginRight: '6px' }}>
|
|
207
|
+
{item[objectTypeIconKey]}
|
|
208
|
+
</span>
|
|
209
|
+
)}
|
|
210
|
+
{item[objectNameKey] && (
|
|
211
|
+
<span className="object-name-text">{item[objectNameKey]}</span>
|
|
212
|
+
)}
|
|
213
|
+
{item[revisionKey] && (
|
|
214
|
+
<span className={`revision-text ${revisionClassName || ""}`} style={revisionStyle}>
|
|
215
|
+
{item[objectNameKey] ? ` (${item[revisionKey]})` : `(${item[revisionKey]})`}
|
|
216
|
+
</span>
|
|
217
|
+
)}
|
|
218
|
+
</div>
|
|
197
219
|
)}
|
|
198
|
-
|
|
220
|
+
</>
|
|
199
221
|
)}
|
|
200
222
|
</div>
|
|
201
223
|
<div
|
|
@@ -238,6 +260,16 @@ export const ShowMessageCard: React.FC<ShowMessageCardProps> = ({
|
|
|
238
260
|
))}
|
|
239
261
|
</div>
|
|
240
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
|
+
)}
|
|
241
273
|
</div>
|
|
242
274
|
</div>
|
|
243
275
|
);
|