feat: update debounced spellcheck hook to toggle decorations instead of the real spellcheck

Author: Aerilym

ts/hooks/useDebuncedSpellcheck.ts

@@ -6,14 +6,72 @@ interface DebouncedSpellcheckProps {
   delay?: number;
 }
 
+// Global reference counter for the hook
+let hookUsageCount = 0;
+const STYLE_ID = 'debounced-spellcheck-styles';
+
+const cssStyles = `
+  .spellcheck-hidden::-webkit-spelling-error {
+    text-decoration: none !important;
+  }
+
+  .spellcheck-hidden::-webkit-grammar-error {
+    text-decoration: none !important;
+  }
+
+  .spellcheck-hidden::-moz-spelling-error {
+    text-decoration: none !important;
+  }
+
+  .spellcheck-hidden::-moz-grammar-error {
+    text-decoration: none !important;
+  }
+
+  .spellcheck-hidden::spelling-error {
+    text-decoration: none !important;
+  }
+
+  .spellcheck-hidden::grammar-error {
+    text-decoration: none !important;
+  }
+`;
+
 export const useDebouncedSpellcheck = ({ delay = 300, elementRef }: DebouncedSpellcheckProps) => {
-  const enableSpellcheck = useCallback(() => {
-    elementRef.current?.setAttribute('spellcheck', 'true');
+  // Inject CSS styles if they don't exist
+  useEffect(() => {
+    hookUsageCount++;
+
+    // Only inject styles on first usage
+    if (hookUsageCount === 1 && !document.getElementById(STYLE_ID)) {
+      const style = document.createElement('style');
+      style.id = STYLE_ID;
+      style.textContent = cssStyles;
+      document.head.appendChild(style);
+    }
+
+    // Remove styles only when no components are using the hook
+    return () => {
+      hookUsageCount--;
+      if (hookUsageCount === 0) {
+        const existingStyle = document.getElementById(STYLE_ID);
+        if (existingStyle) {
+          existingStyle.remove();
+        }
+      }
+    };
+  }, []);
+
+  const hideSpellcheckLines = useCallback(() => {
+    elementRef.current?.classList.add('spellcheck-hidden');
+  }, [elementRef]);
+
+  const showSpellcheckLines = useCallback(() => {
+    elementRef.current?.classList.remove('spellcheck-hidden');
   }, [elementRef]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: see if we can create our own useDebounce hook
-  const debouncedSpellcheck = useCallback(debounce(enableSpellcheck, delay), [
-    enableSpellcheck,
+  const debouncedShowSpellcheck = useCallback(debounce(showSpellcheckLines, delay), [
+    showSpellcheckLines,
     delay,
   ]);
 
@@ -24,15 +82,24 @@ export const useDebouncedSpellcheck = ({ delay = 300, elementRef }: DebouncedSpe
     }
 
     const handleInput = () => {
-      el.setAttribute('spellcheck', 'false');
-      debouncedSpellcheck();
+      // Hide spellcheck lines immediately while typing
+      hideSpellcheckLines();
+      // Show them again after user stops typing
+      debouncedShowSpellcheck();
     };
 
     el.addEventListener('input', handleInput);
 
     // eslint-disable-next-line consistent-return -- This return is the destructor
     return () => {
       el.removeEventListener('input', handleInput);
+      // Clean up: show spellcheck lines when component unmounts
+      showSpellcheckLines();
     };
-  }, [debouncedSpellcheck, elementRef]);
+  }, [debouncedShowSpellcheck, hideSpellcheckLines, showSpellcheckLines, elementRef]);
+
+  return {
+    hideSpellcheckLines,
+    showSpellcheckLines,
+  };
 };