autocomplete gets called on actual changes

Author: ataibarkai

packages/react-textarea/src/components/copilot-textarea/copilot-textarea.tsx

@@ -62,12 +62,6 @@ export function CopilotTextarea(props: CopilotTextareaProps): JSX.Element {
   const [editor] = useState(() => {
     const editor = withReact(createEditor());
 
-    const { onChange } = editor;
-    editor.onChange = () => {
-      // props.onChange?.(editorToText(editor));
-      onChange();
-    };
-
     const { isVoid } = editor;
     editor.isVoid = (element) => {
       switch (element.type) {
@@ -102,18 +96,35 @@ export function CopilotTextarea(props: CopilotTextareaProps): JSX.Element {
   });
 
   const renderElementMemoized = useCallback(renderElement, []);
-  const handleAutocompleteKeyDown = useCallback(
-    useAutocomplete(editor, props.autocompleteConfig),
+  const onChangeForAutocomplete = useCallback(
+    useAutocomplete(props.autocompleteConfig),
     [editor, props.autocompleteConfig]
   );
 
+  const [textValue, setTextValue] = useState(props.value || "");
+
   return (
     // Add the editable component inside the context.
-    <Slate editor={editor} initialValue={initialValue}>
+    <Slate
+      editor={editor}
+      initialValue={initialValue}
+      onChange={(value) => {
+        const isAstChange = editor.operations.some(
+          (op) => "set_selection" !== op.type
+        );
+
+        if (isAstChange) {
+          const newTextValue = editorToText(editor);
+          if (newTextValue !== textValue) {
+            onChangeForAutocomplete(editor, newTextValue);
+          }
+          setTextValue(newTextValue);
+        }
+      }}
+    >
       <Editable
         className={props.className}
         renderElement={renderElementMemoized}
-        onKeyDown={handleAutocompleteKeyDown}
       />
     </Slate>
   );

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

@@ -3,17 +3,19 @@ import {
   AutocompleteConfig,
   CustomEditor,
 } from "../components/copilot-textarea/copilot-textarea";
-import { Transforms } from "slate";
-import { editorToText } from "../lib/editorToText";
+import { Descendant, Transforms } from "slate";
 
 export function useAutocomplete(
-  editor: CustomEditor,
   autocompleteConfig: AutocompleteConfig
-) {
+): (editor: CustomEditor, newValue: string) => void {
   const [timer, setTimer] = useState<number | null>(null);
   const controllerRef = useRef<AbortController | null>(null);
 
-  const appendSuggestion = async (text: string, abortSignal: AbortSignal) => {
+  const appendSuggestion = async (
+    editor: CustomEditor,
+    text: string,
+    abortSignal: AbortSignal
+  ) => {
     const suggestion = await autocompleteConfig.autocomplete(text, abortSignal);
 
     // We'll assume for now that the autocomplete function might or might not respect the abort signal.
@@ -31,7 +33,7 @@ export function useAutocomplete(
           inline: true,
           children: [
             {
-              text: "world",
+              text: suggestion,
             },
           ],
         },
@@ -47,7 +49,7 @@ export function useAutocomplete(
     }
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
+  const onChange = (editor: CustomEditor, newValue: string) => {
     if (timer) clearTimeout(timer);
 
     // If there's an ongoing autocomplete request, abort it
@@ -62,7 +64,8 @@ export function useAutocomplete(
 
         try {
           await appendSuggestion(
-            editorToText(editor),
+            editor,
+            newValue,
             controllerRef.current.signal
           );
         } catch (error: any) {
@@ -76,7 +79,7 @@ export function useAutocomplete(
     );
   };
 
-  return handleKeyDown;
+  return onChange;
 }
 
 const defaultDebounceTime = 2;