Autocomplete, and more CM stuff!

src-web/components/Editor/completion/completion.ts

@@ -0,0 +1,34 @@
+import type { CompletionContext } from '@codemirror/autocomplete';
+
+const openTag = '${[ ';
+const closeTag = ' ]}';
+
+const variables = [
+  { name: 'DOMAIN' },
+  { name: 'BASE_URL' },
+  { name: 'TOKEN' },
+  { name: 'PROJECT_ID' },
+];
+
+export function myCompletions(context: CompletionContext) {
+  // console.log('COMPLETE', context);
+  const toStartOfName = context.matchBefore(/\w*/);
+  const toStartOfVariable = context.matchBefore(/\$\{.*/);
+  const toMatch = toStartOfVariable ?? toStartOfName ?? null;
+
+  if (toMatch === null) {
+    return null;
+  }
+
+  if (toMatch.from === toMatch.to && !context.explicit) {
+    return null;
+  }
+
+  return {
+    from: toMatch.from,
+    options: variables.map((v) => ({
+      label: `${openTag}${v.name}${closeTag}`,
+      type: 'variable',
+    })),
+  };
+}