Add variable highlighting widgets

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

@@ -0,0 +1,28 @@
+// Very crude grammar for a subset of Twig templating syntax
+
+@top Template { (directive | Text)* }
+
+directive {
+  // Insert |
+  // Conditional { ConditionalOpen (directive | Text)* ConditionalClose }
+  Insert
+}
+
+@skip {space} {
+  Insert { "{{" DirectiveContent "}}" }
+  // ConditionalOpen { "{%" kw<"if"> DirectiveContent "%}" }
+  // ConditionalClose { "{%" kw<"endif"> "%}" }
+}
+
+kw<word> { @specialize[@name={word}]<Identifier, word> }
+
+@tokens {
+  Identifier { @asciiLetter+ }
+  Text { ![{] Text? | "{" (@eof | ![%{] Text?) }
+  space { @whitespace+ }
+  DirectiveContent { ![%}] DirectiveContent? | $[%}] (@eof | ![}] DirectiveContent?) }
+  @precedence { space DirectiveContent }
+  "{{" "}}" // "{%" "%}"
+}
+
+@external propSource twigHighlight from "./twig-highlight.ts"