Merge pull request #12 from val-town/accept-suggestions-clicking

Accept suggestions by clicking

README.md

@@ -30,3 +30,21 @@ import { copilotPlugin } from "@val-town/codemirror-codeium";
 // This is a CodeMirror extension
 copilotPlugin();
 ```
+
+### CSS
+
+This adds a `.ghostText` class to CodeMirror decorations for the AI-written
+text. You can add your own style for this class. The demo uses this style:
+
+```css
+.cm-ghostText,
+.cm-ghostText * {
+  opacity: 0.6;
+  filter: grayscale(20%);
+  cursor: pointer;
+}
+
+.cm-ghostText:hover {
+  background: #eee;
+}
+```

demo/demo.css

@@ -46,7 +46,11 @@ main {
 
 .cm-ghostText,
 .cm-ghostText * {
-  /* color: rgb(120, 120, 120, 0.8) !important; */
   opacity: 0.6;
   filter: grayscale(20%);
+  cursor: pointer;
+}
+
+.cm-ghostText:hover {
+  background: #eee;
 }

src/completionDecoration.ts

@@ -16,8 +16,6 @@ export const completionDecoration = StateField.define<CompletionState>({
   update(state: CompletionState, transaction: Transaction) {
     for (const effect of transaction.effects) {
       if (effect.is(addSuggestions)) {
-        // When adding a suggestion, we set th ghostText
-
         // NOTE: here we're adjusting the decoration range
         // to refer to locations in the document _after_ we've
         // inserted the text.

src/plugin.ts

@@ -2,10 +2,28 @@ import { EditorView } from "@codemirror/view";
 import { Extension, Prec } from "@codemirror/state";
 import { completionDecoration } from "./completionDecoration.js";
 import { completionRequester } from "./completionRequester.js";
-import { sameKeyCommand, rejectSuggestionCommand } from "./commands.js";
+import {
+  sameKeyCommand,
+  rejectSuggestionCommand,
+  acceptSuggestionCommand,
+} from "./commands.js";
 import { CodeiumConfig, codeiumConfig } from "./config.js";
 import { Language } from "./api/proto/exa/codeium_common_pb/codeium_common_pb.js";
 
+function isDecorationClicked(view: EditorView) {
+  let inRange = false;
+  const head = view.state.selection.asSingle().ranges.at(0)?.head;
+  if (head !== undefined) {
+    view.state
+      .field(completionDecoration)
+      .decorations?.between(head, head, () => {
+        inRange = true;
+      });
+    return inRange;
+  }
+  return false;
+}
+
 function completionPlugin() {
   return EditorView.domEventHandlers({
     keydown(event, view) {
@@ -20,8 +38,12 @@ function completionPlugin() {
         return false;
       }
     },
-    mousedown(_event, view) {
-      return rejectSuggestionCommand(view);
+    mouseup(_event, view) {
+      if (isDecorationClicked(view)) {
+        return acceptSuggestionCommand(view);
+      } else {
+        return rejectSuggestionCommand(view);
+      }
     },
   });
 }