when select an actual (non-collapsed) range, suggestions disappear

Author: ataibarkai

packages/react-textarea/src/hooks/useAutocomplete.ts

@@ -10,6 +10,7 @@ import {
   EditorAutocompleteState,
   areEqual_autocompleteState,
 } from "../types/types";
+import { nullableCompatibleEqualityCheck } from "../lib/utils";
 
 export interface AutocompleteSuggestion {
   text: string;
@@ -25,11 +26,7 @@ export function useAutocomplete(
   autocompleteConfig: AutocompleteConfig
 ): UseAutocompleteResult {
   const [previousAutocompleteState, setPreviousAutocompleteState] =
-    useState<EditorAutocompleteState>({
-      cursorPoint: { path: [0, 0], offset: 0 },
-      textBeforeCursor: "",
-      textAfterCursor: "",
-    });
+    useState<EditorAutocompleteState | null>(null);
 
   const [currentAutocompleteSuggestion, setCurrentAutocompleteSuggestion] =
     useState<AutocompleteSuggestion | null>(null);
@@ -72,7 +69,8 @@ export function useAutocomplete(
   const onChange = useCallback(
     (editor: CustomEditor) => {
       const newEditorState = getTextAroundCursor(editor);
-      const editorStateHasChanged = !areEqual_autocompleteState(
+      const editorStateHasChanged = !nullableCompatibleEqualityCheck(
+        areEqual_autocompleteState,
         previousAutocompleteState,
         newEditorState
       );
@@ -84,9 +82,14 @@ export function useAutocomplete(
       }
 
       // if change, then first null out the current suggestion
-      // then try to get a new suggestion, debouncing to avoid too many requests while typing
       setCurrentAutocompleteSuggestion(null);
-      debouncedFunction.debounce(awaitForAndAppendSuggestion, newEditorState);
+
+      // then try to get a new suggestion, debouncing to avoid too many requests while typing
+      if (newEditorState) {
+        debouncedFunction.debounce(awaitForAndAppendSuggestion, newEditorState);
+      } else {
+        debouncedFunction.cancel();
+      }
     },
     [
       previousAutocompleteState,

packages/react-textarea/src/lib/debouncer.ts

@@ -10,14 +10,7 @@ export class Debouncer<T extends any[]> {
 
   debounce = async (func: AsyncFunction<T>, ...args: T) => {
     // Abort the previous promise immediately
-    if (this.activeAbortController) {
-      this.activeAbortController.abort();
-      this.activeAbortController = undefined;
-    }
-
-    if (this.timeoutId !== undefined) {
-      clearTimeout(this.timeoutId);
-    }
+    this.cancel();
 
     this.timeoutId = setTimeout(async () => {
       try {
@@ -30,4 +23,16 @@ export class Debouncer<T extends any[]> {
       } catch (error) {}
     }, this.wait);
   };
+
+  cancel = () => {
+    if (this.activeAbortController) {
+      this.activeAbortController.abort();
+      this.activeAbortController = undefined;
+    }
+
+    if (this.timeoutId !== undefined) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = undefined;
+    }
+  };
 }

packages/react-textarea/src/lib/getTextAroundCursor.ts

@@ -1,15 +1,13 @@
 import { Editor, Node, Path, Range, Text, Element, BasePoint } from "slate";
 import { EditorAutocompleteState } from "../types/types";
 
-export function getTextAroundCursor(editor: Editor): EditorAutocompleteState {
+export function getTextAroundCursor(
+  editor: Editor
+): EditorAutocompleteState | null {
   const { selection } = editor;
 
-  if (!selection) {
-    return {
-      cursorPoint: { path: [], offset: 0 },
-      textBeforeCursor: "",
-      textAfterCursor: "",
-    };
+  if (!selection || !Range.isCollapsed(selection)) {
+    return null;
   }
 
   // Helper function to extract text with newlines

packages/react-textarea/src/lib/utils.ts

@@ -45,3 +45,15 @@ export function formatDate(input: string | number | Date): string {
 export const arraysAreEqual = (arr1: number[], arr2: number[]): boolean =>
   arr1.length === arr2.length &&
   arr1.every((value, index) => value === arr2[index]);
+
+export function nullableCompatibleEqualityCheck<T>(
+  naiveEqualityCheck: (a: T, b: T) => boolean,
+  a: T | null | undefined,
+  b: T | null | undefined
+): boolean {
+  if (a === null || a === undefined || b === null || b === undefined) {
+    return a === b;
+  }
+
+  return naiveEqualityCheck(a, b);
+}