From d27de2337ad049e25658ffb89f60edda9114ea49 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 30 Nov 2023 23:46:55 +0800
Subject: [PATCH] Disable highlighting if slow perf

---
 src/components/compose.jsx | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 41919a3b..af2636f4 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -1485,12 +1485,30 @@ const Textarea = forwardRef((props, ref) => {
     resizeObserver.observe(textarea);
   }, []);
 
+  const slowHighlightPerf = useRef(0); // increment if slow
   const composeHighlightRef = useRef();
   const throttleHighlightText = useThrottledCallback((text) => {
+    if (!composeHighlightRef.current) return;
+    if (slowHighlightPerf.current > 3) {
+      // After 3 times of lag, disable highlighting
+      composeHighlightRef.current.innerHTML = '';
+      composeHighlightRef.current = null; // Destroy the whole thing
+      throttleHighlightText?.cancel?.();
+      return;
+    }
+    let start;
+    let end;
+    if (slowHighlightPerf.current <= 3) start = Date.now();
     composeHighlightRef.current.innerHTML =
       highlightText(text, {
         maxCharacters,
       }) + '\n';
+    if (slowHighlightPerf.current <= 3) end = Date.now();
+    console.debug('HIGHLIGHT PERF', { start, end, diff: end - start });
+    if (start && end && end - start > 50) {
+      // if slow, increment
+      slowHighlightPerf.current++;
+    }
     // Newline to prevent multiple line breaks at the end from being collapsed, no idea why
   }, 500);
 
@@ -1549,7 +1567,9 @@ const Textarea = forwardRef((props, ref) => {
               console.error(e);
             }
           }
-          composeHighlightRef.current.scrollTop = target.scrollTop;
+          if (composeHighlightRef.current) {
+            composeHighlightRef.current.scrollTop = target.scrollTop;
+          }
         }}
         onInput={(e) => {
           const { target } = e;
@@ -1565,8 +1585,10 @@ const Textarea = forwardRef((props, ref) => {
           // '--text-weight': (1 + charCount / 140).toFixed(1) || 1,
         }}
         onScroll={(e) => {
-          const { scrollTop } = e.target;
-          composeHighlightRef.current.scrollTop = scrollTop;
+          if (composeHighlightRef.current) {
+            const { scrollTop } = e.target;
+            composeHighlightRef.current.scrollTop = scrollTop;
+          }
         }}
       />
       <div