Move stuff around

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

@@ -0,0 +1,55 @@
+import type { CompletionContext } from '@codemirror/autocomplete';
+
+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 = 4;
+
+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',
+        matchLen,
+      }))
+      // Filter out exact matches
+      .filter((o) => o.label !== toMatch.text),
+  };
+}

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

@@ -0,0 +1,41 @@
+import { LanguageSupport, LRLanguage } from '@codemirror/language';
+import { parseMixed } from '@lezer/common';
+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: completions,
+  });
+  const languageSupport = new LanguageSupport(language, [completion]);
+
+  if (base) {
+    const completion2 = base.language.data.of({ autocomplete: completions });
+    const languageSupport2 = new LanguageSupport(base.language, [completion2]);
+    return [languageSupport, languageSupport2, placeholders, base.support];
+  } else {
+    return [languageSupport, placeholders];
+  }
+}
+
+function mixedOrPlainLanguage(base?: LanguageSupport): LRLanguage {
+  const name = 'twig';
+
+  if (base == null) {
+    return LRLanguage.define({ name, parser: twigParser });
+  }
+
+  const parser = twigParser.configure({
+    wrap: parseMixed((node) => {
+      if (!node.type.isTop) return null;
+      return {
+        parser: base.language.parser,
+        overlay: (node) => node.type.name === 'Text',
+      };
+    }),
+  });
+
+  return LRLanguage.define({ name, parser });
+}

src-web/components/core/Editor/twig/highlight.ts

@@ -0,0 +1,7 @@
+import { styleTags, tags as t } from '@lezer/highlight';
+
+export const highlight = styleTags({
+  'if endif': t.controlKeyword,
+  '${[ ]}': t.meta,
+  DirectiveContent: t.variableName,
+});

src-web/components/core/Editor/twig/twig.grammar

@@ -0,0 +1,19 @@
+@top Template { (directive | Text)* }
+
+directive {
+  Insert
+}
+
+@skip {space} {
+  Insert { "${[" DirectiveContent "]}" }
+}
+
+@tokens {
+  Text { ![$] Text? }
+  space { @whitespace+ }
+  DirectiveContent { ![\]}] DirectiveContent? }
+  @precedence { space DirectiveContent }
+  "${[" "]}"
+}
+
+@external propSource highlight from "./highlight"

src-web/components/core/Editor/twig/twig.terms.ts

@@ -0,0 +1,6 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const
+  Template = 1,
+  Insert = 2,
+  DirectiveContent = 4,
+  Text = 6

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

@@ -0,0 +1,18 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import {LRParser} from "@lezer/lr"
+import {highlight} from "./highlight"
+export const parser = LRParser.deserialize({
+  version: 14,
+  states: "zQVOPOOO_QQO'#C^OOOO'#Cc'#CcQVOPOOOdQQO,58xOOOO-E6a-E6aOOOO1G.d1G.d",
+  stateData: "l~OYOS~ORPOUQO~OSSO~OTUO~OYS~",
+  goto: "cWPPXPPPP]TQORQRORTR",
+  nodeNames: "⚠ Template Insert ${[ DirectiveContent ]} Text",
+  maxTerm: 10,
+  propSources: [highlight],
+  skippedNodes: [0],
+  repeatNodeCount: 1,
+  tokenData: ")gRRmOX!|X^$y^p!|pq$yqt!|tu&}u#P!|#P#Q(k#Q#q!|#q#r$[#r#y!|#y#z$y#z$f!|$f$g$y$g#BY!|#BY#BZ$y#BZ$IS!|$IS$I_$y$I_$I|!|$I|$JO$y$JO$JT!|$JT$JU$y$JU$KV!|$KV$KW$y$KW&FU!|&FU&FV$y&FV;'S!|;'S;=`$s<%lO!|R#TXUPSQOt!|tu#pu#P!|#P#Q$[#Q#q!|#q#r$[#r;'S!|;'S;=`$s<%lO!|Q#uTSQO#P#p#Q#q#p#r;'S#p;'S;=`$U<%lO#pQ$XP;=`<%l#pP$aSUPOt$[u;'S$[;'S;=`$m<%lO$[P$pP;=`<%l$[R$vP;=`<%l!|R%SmUPYQSQOX!|X^$y^p!|pq$yqt!|tu#pu#P!|#P#Q$[#Q#q!|#q#r$[#r#y!|#y#z$y#z$f!|$f$g$y$g#BY!|#BY#BZ$y#BZ$IS!|$IS$I_$y$I_$I|!|$I|$JO$y$JO$JT!|$JT$JU$y$JU$KV!|$KV$KW$y$KW&FU!|&FU&FV$y&FV;'S!|;'S;=`$s<%lO!|R'SVSQO#P#p#Q#o#p#o#p'i#p#q#p#r;'S#p;'S;=`$U<%lO#pR'nVSQO!}#p!}#O(T#O#P#p#Q#q#p#r;'S#p;'S;=`$U<%lO#pR([TRPSQO#P#p#Q#q#p#r;'S#p;'S;=`$U<%lO#pR(pUUPOt$[u#q$[#q#r)S#r;'S$[;'S;=`$m<%lO$[R)ZSTQUPOt$[u;'S$[;'S;=`$m<%lO$[",
+  tokenizers: [0, 1],
+  topRules: {"Template":[0,1]},
+  tokenPrec: 25
+})