Retain changesets in StateField (#31)

src/completionDecoration.ts

@@ -26,11 +26,13 @@ export const completionDecoration = StateField.define<CompletionState>({
   update(state: CompletionState, transaction: Transaction) {
     for (const effect of transaction.effects) {
       if (effect.is(addSuggestions)) {
+        const { changeSpecs, index } = effect.value;
+
         // NOTE: here we're adjusting the decoration range
         // to refer to locations in the document _after_ we've
         // inserted the text.
         const decorations = Decoration.set(
-          effect.value.suggestions.map((suggestionRange) => {
+          changeSpecs[index]!.map((suggestionRange) => {
             const range = ghostMark.range(
               suggestionRange.absoluteStartPos,
               suggestionRange.absoluteEndPos,
@@ -39,9 +41,10 @@ export const completionDecoration = StateField.define<CompletionState>({
           }),
         );
 
-        // TODO
         return {
+          index,
           decorations,
+          changeSpecs,
           reverseChangeSet: effect.value.reverseChangeSet,
         };
       }
@@ -59,6 +62,7 @@ export const completionDecoration = StateField.define<CompletionState>({
       // of a mismatch between it and the new document and new
       // document length
       return {
+        ...state,
         decorations: state.decorations.map(transaction.changes),
         reverseChangeSet: state.reverseChangeSet.map(transaction.changes),
       };

src/completionRequester.ts

@@ -128,18 +128,18 @@ export function completionRequester() {
         // check the end of the line with the end of the completion
         const changeSpecs = completionsToChangeSpec(completionResult);
 
-        const firstSpec = changeSpecs.at(0);
+        const index = 0;
+        const firstSpec = changeSpecs.at(index);
         if (!firstSpec) return;
-
         const insertChangeSet = ChangeSet.of(firstSpec, state.doc.length);
-
         const reverseChangeSet = insertChangeSet.invert(state.doc);
 
         update.view.dispatch({
           changes: insertChangeSet,
           effects: addSuggestions.of({
+            index,
             reverseChangeSet,
-            suggestions: firstSpec,
+            changeSpecs,
           }),
           annotations: [
             copilotIgnore.of(null),

src/effects.ts

@@ -1,10 +1,7 @@
-import { type ChangeSet, StateEffect } from "@codemirror/state";
-import type { SimpleChangeSpec } from "./types.js";
+import { StateEffect } from "@codemirror/state";
+import type { AddSuggestionsState } from "./types.js";
 
 // Effects to tell StateEffect what to do with GhostText
-export const addSuggestions = StateEffect.define<{
-  reverseChangeSet: ChangeSet;
-  suggestions: SimpleChangeSpec[];
-}>();
+export const addSuggestions = StateEffect.define<AddSuggestionsState>();
 export const acceptSuggestion = StateEffect.define<null>();
 export const clearSuggestion = StateEffect.define<null>();

src/types.ts

@@ -1,11 +1,23 @@
 import type { ChangeSet } from "@codemirror/state";
 import type { DecorationSet } from "@codemirror/view";
 
+/**
+ * We dispatch an effect that updates the CompletionState.
+ * CompletionState is null if no completions are displayed.
+ */
 export type CompletionState = null | {
+  index: number;
   reverseChangeSet: ChangeSet;
+  changeSpecs: SimpleChangeSpec[][];
   decorations: DecorationSet;
 };
 
+export type AddSuggestionsState = {
+  reverseChangeSet: ChangeSet;
+  changeSpecs: SimpleChangeSpec[][];
+  index: number;
+};
+
 export interface GhostText {
   text: string;
   displayPos: number;