this repo has no description
Fix wrong exceeded chars highlighting
+8
-9
+8
-9
src/components/compose.jsx
+8
-9
src/components/compose.jsx
···
147
147
);
148
148
149
149
const segmenter = new Intl.Segmenter();
150
-
function highlightText(text, { maxCharacters = Infinity }) {
151
-
// Accept text string, return formatted HTML string
152
-
// Escape all HTML special characters
153
-
let html = text
150
+
function escapeHTML(text) {
151
+
return text
154
152
.replace(/&/g, '&')
155
153
.replace(/</g, '<')
156
154
.replace(/>/g, '>')
157
155
.replace(/"/g, '"')
158
156
.replace(/'/g, ''');
159
-
157
+
}
158
+
function highlightText(text, { maxCharacters = Infinity }) {
160
159
// Exceeded characters limit
161
160
const { composerCharacterCount } = states;
162
161
if (composerCharacterCount > maxCharacters) {
163
162
// Highlight exceeded characters
164
163
let withinLimitHTML = '',
165
164
exceedLimitHTML = '';
166
-
const htmlSegments = segmenter.segment(html);
165
+
const htmlSegments = segmenter.segment(text);
167
166
for (const { segment, index } of htmlSegments) {
168
167
if (index < maxCharacters) {
169
168
withinLimitHTML += segment;
···
174
173
if (exceedLimitHTML) {
175
174
exceedLimitHTML =
176
175
'<mark class="compose-highlight-exceeded">' +
177
-
exceedLimitHTML +
176
+
escapeHTML(exceedLimitHTML) +
178
177
'</mark>';
179
178
}
180
-
return withinLimitHTML + exceedLimitHTML;
179
+
return escapeHTML(withinLimitHTML) + exceedLimitHTML;
181
180
}
182
181
183
-
return html
182
+
return escapeHTML(text)
184
183
.replace(urlRegexObj, '$2<mark class="compose-highlight-url">$3</mark>') // URLs
185
184
.replace(MENTION_RE, '$1<mark class="compose-highlight-mention">$2</mark>') // Mentions
186
185
.replace(HASHTAG_RE, '$1<mark class="compose-highlight-hashtag">$2</mark>') // Hashtags