call props.onChange when text changes

Author: ataibarkai

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

@@ -14,6 +14,7 @@ import {
   defaultAutosuggestionsConfig,
 } from "../../types/autosuggestions-config";
 import { makeRenderPlaceholderFunction } from "./render-placeholder";
+import { getFullEditorTextWithNewlines, getTextAroundCursor } from "../../lib/get-text-around-cursor";
 
 export interface CopilotTextareaProps {
   className?: string;
@@ -102,7 +103,15 @@ export function CopilotTextarea(props: CopilotTextareaProps): JSX.Element {
       editor={editor}
       initialValue={initialValue}
       onChange={(value) => {
-        onChangeHandlerForAutocomplete(editor);
+        const newEditorState = getTextAroundCursor(editor)
+
+        const fullEditorText = newEditorState
+        ? newEditorState.textBeforeCursor + newEditorState.textAfterCursor
+        : getFullEditorTextWithNewlines(editor); // we don't double-parse the editor. When `newEditorState` is null, we didn't parse the editor yet.
+
+        setLastKnownFullEditorText(fullEditorText);
+        onChangeHandlerForAutocomplete(newEditorState);
+        props.onChange?.(fullEditorText);
       }}
     >
       <Editable

packages/react-textarea/src/hooks/use-autosuggestions.ts

@@ -13,7 +13,7 @@ import { AutosuggestionState } from "../types/autosuggestion-state";
 
 export interface UseAutosuggestionsResult {
   currentAutocompleteSuggestion: AutosuggestionState | null;
-  onChangeHandler: (editor: CustomEditor) => void;
+  onChangeHandler: (newEditorState: EditorAutocompleteState | null) => void;
   onKeyDownHandler: (event: React.KeyboardEvent<HTMLDivElement>) => void;
 }
 
@@ -71,8 +71,7 @@ export function useAutosuggestions(
   );
 
   const onChange = useCallback(
-    (editor: CustomEditor) => {
-      const newEditorState = getTextAroundCursor(editor);
+    (newEditorState: EditorAutocompleteState | null) => {
       const editorStateHasChanged = !nullableCompatibleEqualityCheck(
         areEqual_autocompleteState,
         previousAutocompleteState,

packages/react-textarea/src/lib/get-text-around-cursor.ts

@@ -30,6 +30,14 @@ export function getTextAroundCursor(
   };
 }
 
+export function getFullEditorTextWithNewlines(editor: Editor): string {
+  const fullDocumentRange: Range = {
+    anchor: Editor.start(editor, []),
+    focus: Editor.end(editor, []),
+  };
+  return extractTextWithNewlines(editor, fullDocumentRange);
+}
+
 // Helper function to extract text with newlines
 export function extractTextWithNewlines(editor: Editor, range: Range): string {
   const voids = false;