this repo has no description
Disable highlighting if slow perf
+25
-3
+25
-3
src/components/compose.jsx
+25
-3
src/components/compose.jsx
···
1485
1485
resizeObserver.observe(textarea);
1486
1486
}, []);
1487
1487
1488
+
const slowHighlightPerf = useRef(0); // increment if slow
1488
1489
const composeHighlightRef = useRef();
1489
1490
const throttleHighlightText = useThrottledCallback((text) => {
1491
+
if (!composeHighlightRef.current) return;
1492
+
if (slowHighlightPerf.current > 3) {
1493
+
// After 3 times of lag, disable highlighting
1494
+
composeHighlightRef.current.innerHTML = '';
1495
+
composeHighlightRef.current = null; // Destroy the whole thing
1496
+
throttleHighlightText?.cancel?.();
1497
+
return;
1498
+
}
1499
+
let start;
1500
+
let end;
1501
+
if (slowHighlightPerf.current <= 3) start = Date.now();
1490
1502
composeHighlightRef.current.innerHTML =
1491
1503
highlightText(text, {
1492
1504
maxCharacters,
1493
1505
}) + '\n';
1506
+
if (slowHighlightPerf.current <= 3) end = Date.now();
1507
+
console.debug('HIGHLIGHT PERF', { start, end, diff: end - start });
1508
+
if (start && end && end - start > 50) {
1509
+
// if slow, increment
1510
+
slowHighlightPerf.current++;
1511
+
}
1494
1512
// Newline to prevent multiple line breaks at the end from being collapsed, no idea why
1495
1513
}, 500);
1496
1514
···
1549
1567
console.error(e);
1550
1568
}
1551
1569
}
1552
-
composeHighlightRef.current.scrollTop = target.scrollTop;
1570
+
if (composeHighlightRef.current) {
1571
+
composeHighlightRef.current.scrollTop = target.scrollTop;
1572
+
}
1553
1573
}}
1554
1574
onInput={(e) => {
1555
1575
const { target } = e;
···
1565
1585
// '--text-weight': (1 + charCount / 140).toFixed(1) || 1,
1566
1586
}}
1567
1587
onScroll={(e) => {
1568
-
const { scrollTop } = e.target;
1569
-
composeHighlightRef.current.scrollTop = scrollTop;
1588
+
if (composeHighlightRef.current) {
1589
+
const { scrollTop } = e.target;
1590
+
composeHighlightRef.current.scrollTop = scrollTop;
1591
+
}
1570
1592
}}
1571
1593
/>
1572
1594
<div