Improved autocompletion!

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

@@ -0,0 +1,55 @@
+import type { CompletionContext } from '@codemirror/autocomplete';
+import { match } from 'assert';
+
+const openTag = '${[ ';
+const closeTag = ' ]}';
+
+const variables = [
+  { name: 'DOMAIN' },
+  { name: 'BASE_URL' },
+  { name: 'TOKEN' },
+  { name: 'PROJECT_ID' },
+  { name: 'DUMMY' },
+  { name: 'DUMMY_2' },
+  { name: 'STRIPE_PUB_KEY' },
+  { name: 'RAILWAY_TOKEN' },
+  { name: 'SECRET' },
+  { name: 'PORT' },
+];
+
+const MIN_MATCH_VAR = 2;
+const MIN_MATCH_NAME = 2;
+
+export function completions(context: CompletionContext) {
+  const toStartOfName = context.matchBefore(/\w*/);
+  const toStartOfVariable = context.matchBefore(/\$\{?\[?\s*\w*/);
+  const toMatch = toStartOfVariable ?? toStartOfName ?? null;
+
+  if (toMatch === null) return null;
+
+  const matchLen = toMatch.to - toMatch.from;
+
+  const failedVarLen = toStartOfVariable !== null && matchLen < MIN_MATCH_VAR;
+  if (failedVarLen && !context.explicit) {
+    return null;
+  }
+
+  const failedNameLen = toStartOfVariable === null && matchLen < MIN_MATCH_NAME;
+  if (failedNameLen && !context.explicit) {
+    return null;
+  }
+
+  // TODO: Figure out how to make autocomplete stay open if opened explicitly. It sucks when you explicitly
+  //  open it, then it closes when you type the next character.
+  return {
+    from: toMatch.from,
+    options: variables
+      .map((v) => ({
+        label: toStartOfVariable ? `${openTag}${v.name}${closeTag}` : v.name,
+        apply: `${openTag}${v.name}${closeTag}`,
+        type: 'variable',
+      }))
+      // Filter out exact matches
+      .filter((o) => o.label !== toMatch.text),
+  };
+}

src-web/components/Editor/twig/extension.ts

@@ -1,18 +1,18 @@
 import { LanguageSupport, LRLanguage } from '@codemirror/language';
 import { parseMixed } from '@lezer/common';
-import { myCompletions } from '../completion/completion';
+import { completions } from './completion';
 import { placeholders } from '../widgets';
 import { parser as twigParser } from './twig';
 
 export function twig(base?: LanguageSupport) {
   const language = mixedOrPlainLanguage(base);
   const completion = language.data.of({
-    autocomplete: myCompletions,
+    autocomplete: completions,
   });
   const languageSupport = new LanguageSupport(language, [completion]);
 
   if (base) {
-    const completion2 = base.language.data.of({ autocomplete: myCompletions });
+    const completion2 = base.language.data.of({ autocomplete: completions });
     const languageSupport2 = new LanguageSupport(base.language, [completion2]);
     return [languageSupport, languageSupport2, placeholders, base.support];
   } else {