Adding basic autocompletion

src/EditorSetup.ts

@@ -34,6 +34,12 @@ import { EditorView } from "codemirror";
 import { toposTheme } from "./themes/toposTheme";
 import { javascript } from "@codemirror/lang-javascript";
 import { inlineHoveringTips } from "./documentation/inlineHelp";
+import { toposCompletions } from "./documentation/inlineHelp";
+import { javascriptLanguage } from "@codemirror/lang-javascript"
+
+const jsCompletions = javascriptLanguage.data.of({
+  autocomplete: toposCompletions
+})
 
 export const editorSetup: Extension = (() => [
   highlightActiveLineGutter(),
@@ -47,8 +53,7 @@ export const editorSetup: Extension = (() => [
   bracketMatching(),
   closeBrackets(),
   autocompletion(),
-  // rectangularSelection(),
+  jsCompletions,
-  // crosshairCursor(),
   highlightActiveLine(),
   highlightSelectionMatches(),
   keymap.of([

src/documentation/inlineHelp.ts

@@ -1,5 +1,7 @@
 import { hoverTooltip } from "@codemirror/view";
 import { type EditorView } from "@codemirror/view";
+import { CompletionContext } from "@codemirror/autocomplete"
+
 
 interface InlineCompletion {
   name: string;
@@ -968,3 +970,21 @@ export const inlineHoveringTips = hoverTooltip(
     };
   }
 );
+
+
+export const toposCompletions = (context: CompletionContext) => {
+  let word = context.matchBefore(/\w*/)
+  if (word) {
+    if (word.from == word.to && !context.explicit)
+      return null
+    return {
+      from: word.from,
+      options: Object.keys(completionDatabase).map((key) => ({
+        label: key,
+        type: completionDatabase[key].category,
+        info: `${completionDatabase[key].description}`,
+      }))
+    }
+  }
+}
+