react-mention-input 1.1.5 → 1.1.7
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/README.md +1 -1
- package/dist/MentionInput.css +106 -106
- package/dist/MentionInput.d.ts +5 -0
- package/dist/MentionInput.js +28 -9
- package/dist/ShowMessageCard.css +74 -74
- package/package.json +1 -1
- package/src/MentionInput.css +106 -106
- package/src/MentionInput.tsx +290 -264
- package/src/ShowMessageCard.css +74 -74
- package/src/ShowMessageCard.tsx +167 -167
- package/src/index.ts +2 -2
- package/tsconfig.json +14 -14
package/README.md
CHANGED
|
@@ -37,7 +37,7 @@ A customizable input component with @mention functionality.
|
|
|
37
37
|
| `suggestionListClassName` | `string` | Custom class name for the suggestion list. |
|
|
38
38
|
| `suggestionItemClassName` | `string` | Custom class name for each suggestion item. |
|
|
39
39
|
| `sendButtonIcon` | `ReactNode` | Custom icon for the send button (MUI icon or image path). |
|
|
40
|
-
| `onSendMessage` | `(obj:
|
|
40
|
+
| `onSendMessage` | `(obj:{messageText: string, messageHTML: string,userSelectListWithIds:{ id: number; name: string }[],userSelectListName:string[]}) => void` | Callback function triggered on sending a message, providing both plain text, HTML and userName. |
|
|
41
41
|
| `suggestionPosition` | `'top' | 'bottom' | 'left' | 'right'` | Position of the suggestion dropdown relative to the input. Default is `bottom`. |
|
|
42
42
|
|
|
43
43
|
#### Example Usage
|
package/dist/MentionInput.css
CHANGED
|
@@ -1,107 +1,107 @@
|
|
|
1
|
-
.mention-container {
|
|
2
|
-
position: relative;
|
|
3
|
-
display: flex;
|
|
4
|
-
align-items: center;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.mention-input-container{
|
|
8
|
-
border: 1px solid #ccc;
|
|
9
|
-
border-radius: 8px;
|
|
10
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
11
|
-
transition: border 0.2s, box-shadow 0.2s;
|
|
12
|
-
width: 100%;
|
|
13
|
-
padding: 12px 16px;
|
|
14
|
-
position: relative;
|
|
15
|
-
display: flex;
|
|
16
|
-
align-items: center;
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
.mention-input {
|
|
20
|
-
border: none;
|
|
21
|
-
outline: none;
|
|
22
|
-
font-size: 16px;
|
|
23
|
-
flex: 1;
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
.mention-input:focus {
|
|
27
|
-
border: none;
|
|
28
|
-
outline: none;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.send-button {
|
|
32
|
-
padding: 4px 10x;
|
|
33
|
-
border: 1px solid #ccc;
|
|
34
|
-
border-radius: 8px;
|
|
35
|
-
background-color: #007BFF;
|
|
36
|
-
color: #fff;
|
|
37
|
-
|
|
38
|
-
cursor: pointer;
|
|
39
|
-
font-size: 18px;
|
|
40
|
-
display: flex;
|
|
41
|
-
align-items: center;
|
|
42
|
-
justify-content: center;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
/* .suggestion-list {
|
|
46
|
-
position: absolute;
|
|
47
|
-
top: 100%;
|
|
48
|
-
left: 0;
|
|
49
|
-
right: 0;
|
|
50
|
-
background-color: #fff;
|
|
51
|
-
border: 1px solid #ddd;
|
|
52
|
-
border-radius: 4px;
|
|
53
|
-
list-style: none;
|
|
54
|
-
margin: 4px 0;
|
|
55
|
-
padding: 0;
|
|
56
|
-
max-height: 150px;
|
|
57
|
-
overflow-y: auto;
|
|
58
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
59
|
-
z-index: 1;
|
|
60
|
-
} */
|
|
61
|
-
|
|
62
|
-
.suggestion-list {
|
|
63
|
-
max-height: 150px;
|
|
64
|
-
overflow-y: auto;
|
|
65
|
-
background: #fff;
|
|
66
|
-
border: 1px solid #ddd;
|
|
67
|
-
border-radius: 4px;
|
|
68
|
-
z-index: 1000;
|
|
69
|
-
width: auto;
|
|
70
|
-
white-space: nowrap;
|
|
71
|
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
.suggestion-item {
|
|
76
|
-
padding: 8px 12px;
|
|
77
|
-
cursor: pointer;
|
|
78
|
-
border-bottom: 1px solid #ddd;
|
|
79
|
-
transition: background-color 0.2s;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.suggestion-item:hover {
|
|
83
|
-
background-color: #f5f5f5;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
.mention-highlight {
|
|
88
|
-
background-color: #e0f7fa;
|
|
89
|
-
color: #007bff;
|
|
90
|
-
padding: 2px 4px;
|
|
91
|
-
border-radius: 4px;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.mention-input .placeholder {
|
|
95
|
-
color: #aaa;
|
|
96
|
-
pointer-events: none;
|
|
97
|
-
position: absolute;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.link-highlight {
|
|
101
|
-
color: #007bff;
|
|
102
|
-
text-decoration: underline;
|
|
103
|
-
cursor: pointer;
|
|
104
|
-
}
|
|
105
|
-
.link-highlight:hover {
|
|
106
|
-
color: #0056b3;
|
|
1
|
+
.mention-container {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.mention-input-container{
|
|
8
|
+
border: 1px solid #ccc;
|
|
9
|
+
border-radius: 8px;
|
|
10
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
11
|
+
transition: border 0.2s, box-shadow 0.2s;
|
|
12
|
+
width: 100%;
|
|
13
|
+
padding: 12px 16px;
|
|
14
|
+
position: relative;
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
|
|
18
|
+
}
|
|
19
|
+
.mention-input {
|
|
20
|
+
border: none;
|
|
21
|
+
outline: none;
|
|
22
|
+
font-size: 16px;
|
|
23
|
+
flex: 1;
|
|
24
|
+
|
|
25
|
+
}
|
|
26
|
+
.mention-input:focus {
|
|
27
|
+
border: none;
|
|
28
|
+
outline: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.send-button {
|
|
32
|
+
padding: 4px 10x;
|
|
33
|
+
border: 1px solid #ccc;
|
|
34
|
+
border-radius: 8px;
|
|
35
|
+
background-color: #007BFF;
|
|
36
|
+
color: #fff;
|
|
37
|
+
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
font-size: 18px;
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* .suggestion-list {
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 100%;
|
|
48
|
+
left: 0;
|
|
49
|
+
right: 0;
|
|
50
|
+
background-color: #fff;
|
|
51
|
+
border: 1px solid #ddd;
|
|
52
|
+
border-radius: 4px;
|
|
53
|
+
list-style: none;
|
|
54
|
+
margin: 4px 0;
|
|
55
|
+
padding: 0;
|
|
56
|
+
max-height: 150px;
|
|
57
|
+
overflow-y: auto;
|
|
58
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
59
|
+
z-index: 1;
|
|
60
|
+
} */
|
|
61
|
+
|
|
62
|
+
.suggestion-list {
|
|
63
|
+
max-height: 150px;
|
|
64
|
+
overflow-y: auto;
|
|
65
|
+
background: #fff;
|
|
66
|
+
border: 1px solid #ddd;
|
|
67
|
+
border-radius: 4px;
|
|
68
|
+
z-index: 1000;
|
|
69
|
+
width: auto;
|
|
70
|
+
white-space: nowrap;
|
|
71
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
.suggestion-item {
|
|
76
|
+
padding: 8px 12px;
|
|
77
|
+
cursor: pointer;
|
|
78
|
+
border-bottom: 1px solid #ddd;
|
|
79
|
+
transition: background-color 0.2s;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.suggestion-item:hover {
|
|
83
|
+
background-color: #f5f5f5;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
.mention-highlight {
|
|
88
|
+
background-color: #e0f7fa;
|
|
89
|
+
color: #007bff;
|
|
90
|
+
padding: 2px 4px;
|
|
91
|
+
border-radius: 4px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.mention-input .placeholder {
|
|
95
|
+
color: #aaa;
|
|
96
|
+
pointer-events: none;
|
|
97
|
+
position: absolute;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.link-highlight {
|
|
101
|
+
color: #007bff;
|
|
102
|
+
text-decoration: underline;
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
}
|
|
105
|
+
.link-highlight:hover {
|
|
106
|
+
color: #0056b3;
|
|
107
107
|
}
|
package/dist/MentionInput.d.ts
CHANGED
|
@@ -17,6 +17,11 @@ interface MentionInputProps {
|
|
|
17
17
|
onSendMessage?: (obj: {
|
|
18
18
|
messageText: string;
|
|
19
19
|
messageHTML: string;
|
|
20
|
+
userSelectListWithIds: {
|
|
21
|
+
id: number;
|
|
22
|
+
name: string;
|
|
23
|
+
}[];
|
|
24
|
+
userSelectListName: string[];
|
|
20
25
|
}) => void;
|
|
21
26
|
suggestionPosition?: 'top' | 'bottom' | 'left' | 'right';
|
|
22
27
|
}
|
package/dist/MentionInput.js
CHANGED
|
@@ -9,15 +9,20 @@ var MentionInput = function (_a) {
|
|
|
9
9
|
var inputRef = useRef(null);
|
|
10
10
|
var suggestionListRef = useRef(null);
|
|
11
11
|
var caretOffsetRef = useRef(0);
|
|
12
|
+
var userSelectListRef = useRef([]); // Only unique names
|
|
13
|
+
var userSelectListWithIdsRef = useRef([]); // Unique IDs with names
|
|
12
14
|
var highlightMentionsAndLinks = function (text) {
|
|
13
15
|
// Regular expression for detecting links
|
|
14
16
|
var linkRegex = /(https?:\/\/[^\s]+)/g;
|
|
15
|
-
//
|
|
16
|
-
var
|
|
17
|
-
//
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
// Highlight links
|
|
18
|
+
var highlightedText = text.replace(linkRegex, '<a href="$1" target="_blank" rel="noopener noreferrer" class="link-highlight">$1</a>');
|
|
19
|
+
// Highlight mentions manually based on `userSelectListRef`
|
|
20
|
+
userSelectListRef === null || userSelectListRef === void 0 ? void 0 : userSelectListRef.current.forEach(function (userName) {
|
|
21
|
+
var mentionPattern = new RegExp("@".concat(userName, "(\\s|$)"), "g");
|
|
22
|
+
highlightedText = highlightedText.replace(mentionPattern, function (match, trailingSpace) {
|
|
23
|
+
return "<span class=\"mention-highlight\">".concat(match.trim(), "</span> ");
|
|
24
|
+
});
|
|
25
|
+
});
|
|
21
26
|
return highlightedText;
|
|
22
27
|
};
|
|
23
28
|
var restoreCaretPosition = function (node, caretOffset) {
|
|
@@ -122,27 +127,41 @@ var MentionInput = function (_a) {
|
|
|
122
127
|
var plainText = inputValue;
|
|
123
128
|
var caretOffset = caretOffsetRef.current;
|
|
124
129
|
var mentionMatch = plainText.slice(0, caretOffset).match(/@(\S*)$/);
|
|
130
|
+
if (!userSelectListRef.current.includes(user.name)) {
|
|
131
|
+
userSelectListRef.current.push(user.name);
|
|
132
|
+
}
|
|
133
|
+
// Check if the ID is already stored
|
|
134
|
+
var isIdExists = userSelectListWithIdsRef.current.some(function (item) { return item.id === user.id; });
|
|
135
|
+
if (!isIdExists) {
|
|
136
|
+
userSelectListWithIdsRef.current.push(user);
|
|
137
|
+
}
|
|
125
138
|
if (!mentionMatch)
|
|
126
139
|
return;
|
|
127
140
|
var mentionIndex = plainText.slice(0, caretOffset).lastIndexOf("@");
|
|
128
|
-
|
|
141
|
+
// Append space after the mention
|
|
142
|
+
var newValue = plainText.substring(0, mentionIndex + 1) + user.name + " " + plainText.substring(caretOffset);
|
|
129
143
|
setInputValue(newValue);
|
|
130
144
|
inputRef.current.innerText = newValue;
|
|
145
|
+
// Highlight mentions and links with
|
|
131
146
|
var htmlWithHighlights = highlightMentionsAndLinks(newValue);
|
|
147
|
+
// Set highlighted content
|
|
132
148
|
inputRef.current.innerHTML = htmlWithHighlights;
|
|
133
149
|
setShowSuggestions(false);
|
|
150
|
+
// Adjust caret position after adding the mention and space
|
|
134
151
|
var mentionEnd = mentionIndex + user.name.length + 1;
|
|
135
|
-
restoreCaretPosition(inputRef.current, mentionEnd);
|
|
152
|
+
restoreCaretPosition(inputRef.current, mentionEnd + 1); // +1 for the space
|
|
136
153
|
};
|
|
137
154
|
var handleSendMessage = function () {
|
|
138
155
|
if (inputRef.current) {
|
|
139
156
|
var messageText = inputRef.current.innerText.trim(); // Plain text
|
|
140
157
|
var messageHTML = inputRef.current.innerHTML.trim(); // HTML with <span> highlighting
|
|
141
158
|
if (messageText && onSendMessage) {
|
|
142
|
-
onSendMessage({ messageText: messageText, messageHTML: messageHTML }); // Pass both plain text and HTML
|
|
159
|
+
onSendMessage({ messageText: messageText, messageHTML: messageHTML, userSelectListWithIds: userSelectListWithIdsRef.current, userSelectListName: userSelectListRef.current }); // Pass both plain text and HTML
|
|
143
160
|
setInputValue(""); // Clear state
|
|
144
161
|
setShowSuggestions(false); // Hide suggestions
|
|
145
162
|
inputRef.current.innerText = ""; // Clear input field
|
|
163
|
+
userSelectListRef.current = [];
|
|
164
|
+
userSelectListWithIdsRef.current = [];
|
|
146
165
|
}
|
|
147
166
|
}
|
|
148
167
|
};
|
package/dist/ShowMessageCard.css
CHANGED
|
@@ -1,75 +1,75 @@
|
|
|
1
|
-
.message-card-container {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
gap: 16px; /* Space between cards */
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.message-card {
|
|
8
|
-
display: flex;
|
|
9
|
-
flex-direction: column;
|
|
10
|
-
border: 1px solid #ccc;
|
|
11
|
-
border-radius: 8px;
|
|
12
|
-
padding: 16px;
|
|
13
|
-
background-color: #fff;
|
|
14
|
-
transition: box-shadow 0.2s;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.message-card:hover {
|
|
18
|
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.message-card-header {
|
|
22
|
-
display: flex;
|
|
23
|
-
align-items: center;
|
|
24
|
-
margin-bottom: 8px; /* Space between header and body */
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.message-card-img,
|
|
28
|
-
.message-card-initials {
|
|
29
|
-
width: 48px;
|
|
30
|
-
height: 48px;
|
|
31
|
-
border-radius: 50%;
|
|
32
|
-
display: flex;
|
|
33
|
-
align-items: center;
|
|
34
|
-
justify-content: center;
|
|
35
|
-
font-size: 16px;
|
|
36
|
-
font-weight: bold;
|
|
37
|
-
color: #fff;
|
|
38
|
-
background-color: #007bff;
|
|
39
|
-
text-transform: uppercase;
|
|
40
|
-
margin-right: 16px;
|
|
41
|
-
}
|
|
42
|
-
.message-card-info {
|
|
43
|
-
display: flex;
|
|
44
|
-
flex-direction: column;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.message-card-name {
|
|
48
|
-
margin: 0;
|
|
49
|
-
font-size: 18px;
|
|
50
|
-
font-weight: bold;
|
|
51
|
-
line-height: 1.2; /* Adjust line height for better spacing */
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.message-card-date {
|
|
55
|
-
margin: 0;
|
|
56
|
-
font-size: 14px;
|
|
57
|
-
color: #888;
|
|
58
|
-
line-height: 1.2; /* Adjust line height for better spacing */
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.message-card-body {
|
|
62
|
-
margin-top: 8px; /* Space between header and comment */
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.message-card-comment {
|
|
66
|
-
margin: 0;
|
|
67
|
-
font-size: 16px;
|
|
68
|
-
line-height: 1.5; /* Optimal line height for readability */
|
|
69
|
-
}
|
|
70
|
-
.mention-highlight {
|
|
71
|
-
background-color: #e0f7fa;
|
|
72
|
-
color: #007bff;
|
|
73
|
-
padding: 2px 4px;
|
|
74
|
-
border-radius: 4px;
|
|
1
|
+
.message-card-container {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 16px; /* Space between cards */
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.message-card {
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
border: 1px solid #ccc;
|
|
11
|
+
border-radius: 8px;
|
|
12
|
+
padding: 16px;
|
|
13
|
+
background-color: #fff;
|
|
14
|
+
transition: box-shadow 0.2s;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.message-card:hover {
|
|
18
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.message-card-header {
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
margin-bottom: 8px; /* Space between header and body */
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.message-card-img,
|
|
28
|
+
.message-card-initials {
|
|
29
|
+
width: 48px;
|
|
30
|
+
height: 48px;
|
|
31
|
+
border-radius: 50%;
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
font-size: 16px;
|
|
36
|
+
font-weight: bold;
|
|
37
|
+
color: #fff;
|
|
38
|
+
background-color: #007bff;
|
|
39
|
+
text-transform: uppercase;
|
|
40
|
+
margin-right: 16px;
|
|
41
|
+
}
|
|
42
|
+
.message-card-info {
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-direction: column;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.message-card-name {
|
|
48
|
+
margin: 0;
|
|
49
|
+
font-size: 18px;
|
|
50
|
+
font-weight: bold;
|
|
51
|
+
line-height: 1.2; /* Adjust line height for better spacing */
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.message-card-date {
|
|
55
|
+
margin: 0;
|
|
56
|
+
font-size: 14px;
|
|
57
|
+
color: #888;
|
|
58
|
+
line-height: 1.2; /* Adjust line height for better spacing */
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.message-card-body {
|
|
62
|
+
margin-top: 8px; /* Space between header and comment */
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.message-card-comment {
|
|
66
|
+
margin: 0;
|
|
67
|
+
font-size: 16px;
|
|
68
|
+
line-height: 1.5; /* Optimal line height for readability */
|
|
69
|
+
}
|
|
70
|
+
.mention-highlight {
|
|
71
|
+
background-color: #e0f7fa;
|
|
72
|
+
color: #007bff;
|
|
73
|
+
padding: 2px 4px;
|
|
74
|
+
border-radius: 4px;
|
|
75
75
|
}
|
package/package.json
CHANGED
package/src/MentionInput.css
CHANGED
|
@@ -1,107 +1,107 @@
|
|
|
1
|
-
.mention-container {
|
|
2
|
-
position: relative;
|
|
3
|
-
display: flex;
|
|
4
|
-
align-items: center;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.mention-input-container{
|
|
8
|
-
border: 1px solid #ccc;
|
|
9
|
-
border-radius: 8px;
|
|
10
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
11
|
-
transition: border 0.2s, box-shadow 0.2s;
|
|
12
|
-
width: 100%;
|
|
13
|
-
padding: 12px 16px;
|
|
14
|
-
position: relative;
|
|
15
|
-
display: flex;
|
|
16
|
-
align-items: center;
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
.mention-input {
|
|
20
|
-
border: none;
|
|
21
|
-
outline: none;
|
|
22
|
-
font-size: 16px;
|
|
23
|
-
flex: 1;
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
.mention-input:focus {
|
|
27
|
-
border: none;
|
|
28
|
-
outline: none;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.send-button {
|
|
32
|
-
padding: 4px 10x;
|
|
33
|
-
border: 1px solid #ccc;
|
|
34
|
-
border-radius: 8px;
|
|
35
|
-
background-color: #007BFF;
|
|
36
|
-
color: #fff;
|
|
37
|
-
|
|
38
|
-
cursor: pointer;
|
|
39
|
-
font-size: 18px;
|
|
40
|
-
display: flex;
|
|
41
|
-
align-items: center;
|
|
42
|
-
justify-content: center;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
/* .suggestion-list {
|
|
46
|
-
position: absolute;
|
|
47
|
-
top: 100%;
|
|
48
|
-
left: 0;
|
|
49
|
-
right: 0;
|
|
50
|
-
background-color: #fff;
|
|
51
|
-
border: 1px solid #ddd;
|
|
52
|
-
border-radius: 4px;
|
|
53
|
-
list-style: none;
|
|
54
|
-
margin: 4px 0;
|
|
55
|
-
padding: 0;
|
|
56
|
-
max-height: 150px;
|
|
57
|
-
overflow-y: auto;
|
|
58
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
59
|
-
z-index: 1;
|
|
60
|
-
} */
|
|
61
|
-
|
|
62
|
-
.suggestion-list {
|
|
63
|
-
max-height: 150px;
|
|
64
|
-
overflow-y: auto;
|
|
65
|
-
background: #fff;
|
|
66
|
-
border: 1px solid #ddd;
|
|
67
|
-
border-radius: 4px;
|
|
68
|
-
z-index: 1000;
|
|
69
|
-
width: auto;
|
|
70
|
-
white-space: nowrap;
|
|
71
|
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
.suggestion-item {
|
|
76
|
-
padding: 8px 12px;
|
|
77
|
-
cursor: pointer;
|
|
78
|
-
border-bottom: 1px solid #ddd;
|
|
79
|
-
transition: background-color 0.2s;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.suggestion-item:hover {
|
|
83
|
-
background-color: #f5f5f5;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
.mention-highlight {
|
|
88
|
-
background-color: #e0f7fa;
|
|
89
|
-
color: #007bff;
|
|
90
|
-
padding: 2px 4px;
|
|
91
|
-
border-radius: 4px;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.mention-input .placeholder {
|
|
95
|
-
color: #aaa;
|
|
96
|
-
pointer-events: none;
|
|
97
|
-
position: absolute;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.link-highlight {
|
|
101
|
-
color: #007bff;
|
|
102
|
-
text-decoration: underline;
|
|
103
|
-
cursor: pointer;
|
|
104
|
-
}
|
|
105
|
-
.link-highlight:hover {
|
|
106
|
-
color: #0056b3;
|
|
1
|
+
.mention-container {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.mention-input-container{
|
|
8
|
+
border: 1px solid #ccc;
|
|
9
|
+
border-radius: 8px;
|
|
10
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
11
|
+
transition: border 0.2s, box-shadow 0.2s;
|
|
12
|
+
width: 100%;
|
|
13
|
+
padding: 12px 16px;
|
|
14
|
+
position: relative;
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
|
|
18
|
+
}
|
|
19
|
+
.mention-input {
|
|
20
|
+
border: none;
|
|
21
|
+
outline: none;
|
|
22
|
+
font-size: 16px;
|
|
23
|
+
flex: 1;
|
|
24
|
+
|
|
25
|
+
}
|
|
26
|
+
.mention-input:focus {
|
|
27
|
+
border: none;
|
|
28
|
+
outline: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.send-button {
|
|
32
|
+
padding: 4px 10x;
|
|
33
|
+
border: 1px solid #ccc;
|
|
34
|
+
border-radius: 8px;
|
|
35
|
+
background-color: #007BFF;
|
|
36
|
+
color: #fff;
|
|
37
|
+
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
font-size: 18px;
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* .suggestion-list {
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 100%;
|
|
48
|
+
left: 0;
|
|
49
|
+
right: 0;
|
|
50
|
+
background-color: #fff;
|
|
51
|
+
border: 1px solid #ddd;
|
|
52
|
+
border-radius: 4px;
|
|
53
|
+
list-style: none;
|
|
54
|
+
margin: 4px 0;
|
|
55
|
+
padding: 0;
|
|
56
|
+
max-height: 150px;
|
|
57
|
+
overflow-y: auto;
|
|
58
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
59
|
+
z-index: 1;
|
|
60
|
+
} */
|
|
61
|
+
|
|
62
|
+
.suggestion-list {
|
|
63
|
+
max-height: 150px;
|
|
64
|
+
overflow-y: auto;
|
|
65
|
+
background: #fff;
|
|
66
|
+
border: 1px solid #ddd;
|
|
67
|
+
border-radius: 4px;
|
|
68
|
+
z-index: 1000;
|
|
69
|
+
width: auto;
|
|
70
|
+
white-space: nowrap;
|
|
71
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
.suggestion-item {
|
|
76
|
+
padding: 8px 12px;
|
|
77
|
+
cursor: pointer;
|
|
78
|
+
border-bottom: 1px solid #ddd;
|
|
79
|
+
transition: background-color 0.2s;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.suggestion-item:hover {
|
|
83
|
+
background-color: #f5f5f5;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
.mention-highlight {
|
|
88
|
+
background-color: #e0f7fa;
|
|
89
|
+
color: #007bff;
|
|
90
|
+
padding: 2px 4px;
|
|
91
|
+
border-radius: 4px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.mention-input .placeholder {
|
|
95
|
+
color: #aaa;
|
|
96
|
+
pointer-events: none;
|
|
97
|
+
position: absolute;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.link-highlight {
|
|
101
|
+
color: #007bff;
|
|
102
|
+
text-decoration: underline;
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
}
|
|
105
|
+
.link-highlight:hover {
|
|
106
|
+
color: #0056b3;
|
|
107
107
|
}
|