Rewrite trigger UI to use a ViewPlugin instead of a Widget

demo/index.html

@@ -24,7 +24,7 @@ <h1 class="text-4xl font-bold mb-4">
         AI features like inline Cmd+L to edit code.
       </p>
       <div class="border rounded-lg bg-white shadow-sm">
-        <div id="editor" class="min-h-[400px] h-full"></div>
+        <div id="editor" class="h-[400px] overflow-y-auto"></div>
       </div>
     </main>
     <script type="module" src="./index.ts"></script>

demo/index.ts

@@ -8,7 +8,7 @@ const logger = console;
 (async () => {
   const extensions = [
     basicSetup,
-    EditorView.lineWrapping,
+    // EditorView.lineWrapping,
     python(),
     aiExtension({
       onAcceptEdit: (opts) => {
@@ -27,7 +27,7 @@ const logger = console;
   ];
 
   const editor = new EditorView({
-    doc: `
+    doc: `# A very long comment that can be a selection start point that will stretch off screen of this demo and should still work
 class DataProcessor:
     def __init__(self, data: list[int]):
         self.data = data

src/__tests__/index.test.ts

@@ -12,6 +12,7 @@ describe("index.ts exports", () => {
         "closeAiEditInput",
         "completionState",
         "defaultKeymaps",
+        "defaultTriggerRenderer",
         "inputPromptDecoration",
         "inputState",
         "inputValueState",
@@ -27,9 +28,9 @@ describe("index.ts exports", () => {
         "showAiEditInput",
         "showCompletion",
         "showInput",
-        "showTooltip",
-        "tooltipState",
-        "tooltipVisibilityListener",
+        "triggerOptions",
+        "triggerPlugin",
+        "triggerViewPlugin",
       ]
     `);
   });

src/commands.ts

@@ -0,0 +1,108 @@
+import { EditorSelection } from "@codemirror/state";
+import type { Command, EditorView } from "@codemirror/view";
+import {
+  showInput,
+  setInputFocus,
+  setInputValue,
+  setLoading,
+  completionState,
+  showCompletion,
+} from "./state.js";
+
+// Validation constants
+const MIN_SELECTION_LENGTH = 1;
+
+/**
+ * Command to show the input prompt
+ */
+export const showAiEditInput: Command = (view: EditorView) => {
+  const { state } = view;
+  const selection = state.selection.main;
+
+  // If the selection is empty, hide the tooltip.
+  if (selection.empty) {
+    return false;
+  }
+
+  const doc = state.doc;
+  const fromLine = doc.lineAt(selection.from);
+  const toLine = doc.lineAt(selection.to);
+
+  // Get the full line content by using line boundaries
+  const selectionText = state.sliceDoc(fromLine.from, toLine.to);
+  if (selectionText.trim().length < MIN_SELECTION_LENGTH) {
+    return false;
+  }
+
+  // Ensure line numbers are within document bounds
+  const safeLineFrom = Math.max(1, Math.min(fromLine.number, doc.lines));
+  const safeLineTo = Math.max(1, Math.min(toLine.number, doc.lines));
+
+  view.dispatch({
+    effects: [
+      showInput.of({
+        show: true,
+        lineFrom: safeLineFrom,
+        lineTo: safeLineTo,
+      }),
+      setInputFocus.of(true),
+      setInputValue.of(""),
+    ],
+    selection: EditorSelection.cursor(fromLine.from),
+  });
+  return true;
+};
+
+/** Command to close the input prompt */
+export const closeAiEditInput: Command = (view: EditorView) => {
+  view.dispatch({
+    effects: [
+      showInput.of({ show: false, lineFrom: 0, lineTo: 0 }),
+      setInputFocus.of(false),
+      setInputValue.of(""),
+      setLoading.of(false),
+    ],
+  });
+  return true;
+};
+
+/** Command to accept the completion */
+export const acceptAiEdit: Command = (view: EditorView) => {
+  const completionStateValue = view.state.field(completionState);
+  if (completionStateValue) {
+    view.dispatch({
+      effects: [
+        showCompletion.of(null),
+        showInput.of({ show: false, lineFrom: 0, lineTo: 0 }),
+        setInputFocus.of(false),
+        setInputValue.of(""),
+        setLoading.of(false),
+      ],
+    });
+    return true;
+  }
+  return false;
+};
+
+/** Command to reject the completion */
+export const rejectAiEdit: Command = (view: EditorView) => {
+  const completionStateValue = view.state.field(completionState);
+  if (completionStateValue) {
+    view.dispatch({
+      changes: {
+        from: completionStateValue.from,
+        to: completionStateValue.to,
+        insert: completionStateValue.oldCode,
+      },
+      effects: [
+        showCompletion.of(null),
+        showInput.of({ show: false, lineFrom: 0, lineTo: 0 }),
+        setInputFocus.of(false),
+        setInputValue.of(""),
+        setLoading.of(false),
+      ],
+    });
+    return true;
+  }
+  return false;
+};

src/index.ts

@@ -1,3 +1,5 @@
 export * from "./inline-edit.js";
 export * from "./state.js";
 export * from "./theme.js";
+export * from "./trigger.js";
+export * from "./commands.js";