this repo has no description
Fix highlight bugs & maybe some perf issues
+28
-13
+28
-13
src/components/compose.jsx
+28
-13
src/components/compose.jsx
···
7
7
import { useHotkeys } from 'react-hotkeys-hook';
8
8
import stringLength from 'string-length';
9
9
import { uid } from 'uid/single';
10
-
import { useDebouncedCallback } from 'use-debounce';
10
+
import { useDebouncedCallback, useThrottledCallback } from 'use-debounce';
11
11
import { useSnapshot } from 'valtio';
12
12
13
13
import supportedLanguages from '../data/status-supported-languages';
···
132
132
let leftoverHTML = '';
133
133
if (composerCharacterCount > maxCharacters) {
134
134
const leftoverCount = composerCharacterCount - maxCharacters;
135
-
leftoverHTML = html.slice(-leftoverCount);
135
+
// Highlight exceeded characters
136
+
leftoverHTML =
137
+
'<mark class="compose-highlight-exceeded">' +
138
+
html.slice(-leftoverCount) +
139
+
'</mark>';
136
140
html = html.slice(0, -leftoverCount);
137
-
// Highlight exceeded characters
138
-
leftoverHTML = leftoverHTML.replace(
139
-
new RegExp(`(.{${leftoverCount}})$`),
140
-
'<mark class="compose-highlight-exceeded">$1</mark>',
141
-
);
142
141
}
143
142
144
143
html = html
···
1270
1269
// NOTE: This check is needed because the offsetHeight return 50000 (really large number) on first render
1271
1270
// No idea why it does that, will re-investigate in far future
1272
1271
const offset = offsetHeight - clientHeight;
1273
-
textarea.style.height = value ? scrollHeight + offset + 'px' : null;
1272
+
const height = value ? scrollHeight + offset + 'px' : null;
1273
+
textarea.style.height = height;
1274
1274
}
1275
1275
}
1276
1276
···
1467
1467
};
1468
1468
}, []);
1469
1469
1470
+
useEffect(() => {
1471
+
// Resize observer for textarea
1472
+
const textarea = ref.current;
1473
+
if (!textarea) return;
1474
+
const resizeObserver = new ResizeObserver(() => {
1475
+
// Get height of textarea, set height to textExpander
1476
+
const { height } = textarea.getBoundingClientRect();
1477
+
textExpanderRef.current.style.height = height + 'px';
1478
+
});
1479
+
resizeObserver.observe(textarea);
1480
+
}, []);
1481
+
1470
1482
const composeHighlightRef = useRef();
1483
+
const throttleHighlightText = useThrottledCallback((text) => {
1484
+
composeHighlightRef.current.innerHTML =
1485
+
highlightText(text, {
1486
+
maxCharacters,
1487
+
}) + '\n';
1488
+
// Newline to prevent multiple line breaks at the end from being collapsed, no idea why
1489
+
}, 500);
1471
1490
1472
1491
return (
1473
1492
<text-expander
···
1530
1549
setText(text);
1531
1550
autoResizeTextarea(target);
1532
1551
props.onInput?.(e);
1533
-
composeHighlightRef.current.innerHTML =
1534
-
highlightText(text, {
1535
-
maxCharacters,
1536
-
}) + '\n';
1537
-
// Newline to prevent multiple line breaks at the end from being collapsed, no idea why
1552
+
throttleHighlightText(text);
1538
1553
}}
1539
1554
style={{
1540
1555
width: '100%',