Pair checkboxes and fix twig indent

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

@@ -33,7 +33,6 @@ import {
 } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
 import { graphqlLanguageSupport } from 'cm6-graphql';
-import type { GenericCompletionOption } from './genericCompletion';
 import type { EditorProps } from './index';
 import { text } from './text/extension';
 import { twig } from './twig/extension';

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

@@ -1,8 +1,10 @@
 import { LanguageSupport, LRLanguage } from '@codemirror/language';
 import { parser } from './text';
 
+export const textLanguageName = 'text';
+
 const textLanguage = LRLanguage.define({
-  name: 'text',
+  name: textLanguageName,
   parser,
   languageData: {},
 });

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

@@ -1,47 +1,53 @@
-import { LanguageSupport, LRLanguage } from '@codemirror/language';
+import type { LanguageSupport } from '@codemirror/language';
+import { LRLanguage } from '@codemirror/language';
 import { parseMixed } from '@lezer/common';
 import type { GenericCompletionConfig } from '../genericCompletion';
 import { genericCompletion } from '../genericCompletion';
+import { textLanguageName } from '../text/extension';
 import { placeholders } from '../widgets';
 import { completions } from './completion';
 import { parser as twigParser } from './twig';
 
-export function twig(base?: LanguageSupport, autocomplete?: GenericCompletionConfig) {
-  const language = mixedOrPlainLanguage(base);
-  const additionalCompletion =
-    autocomplete && base
-      ? [language.data.of({ autocomplete: genericCompletion(autocomplete) })]
-      : [];
+export function twig(base: LanguageSupport, autocomplete?: GenericCompletionConfig) {
+  const language = mixLanguage(base);
+  const additionalCompletion = autocomplete
+    ? [language.data.of({ autocomplete: genericCompletion(autocomplete) })]
+    : [];
   const completion = language.data.of({
     autocomplete: completions,
   });
-  const languageSupport = new LanguageSupport(language, [completion, ...additionalCompletion]);
 
   if (base) {
-    const completion2 = base.language.data.of({ autocomplete: completions });
-    const languageSupport2 = new LanguageSupport(base.language, [completion2]);
-    return [languageSupport, languageSupport2, base.support];
+    const completionBase = base.language.data.of({
+      autocomplete: completions,
+    });
+    return [
+      language,
+      completion,
+      completionBase,
+      base.support,
+      // placeholders,
+      ...additionalCompletion,
+    ];
   } else {
-    return [languageSupport];
+    return [language, completion, placeholders];
   }
 }
 
-function mixedOrPlainLanguage(base?: LanguageSupport): LRLanguage {
+function mixLanguage(base: LanguageSupport): LRLanguage {
   const name = 'twig';
 
-  if (!base) {
-    return LRLanguage.define({ name, parser: twigParser });
-  }
-
   const parser = twigParser.configure({
     wrap: parseMixed((node) => {
+      console.log('HELLO', node.type.name, node.type.isTop);
       // If the base language is text, we can overwrite at the top
-      if (base.language.name !== 'text' && !node.type.isTop) {
+      if (base.language.name !== textLanguageName && !node.type.isTop) {
         return null;
       }
+
       return {
         parser: base.language.parser,
-        overlay: (node) => node.type.name === 'Text' || node.type.name === 'Template',
+        overlay: (node) => node.type.name === 'Text',
       };
     }),
   });

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

@@ -1,8 +1,7 @@
 import { styleTags, tags as t } from '@lezer/highlight';
 
 export const highlight = styleTags({
-  Open: t.meta,
-  Close: t.meta,
-  Content: t.comment,
-  Template: t.comment,
+  Open: t.tagName,
+  Close: t.tagName,
+  Content: t.keyword,
 });

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

@@ -1,17 +1,17 @@
-@top Template { Tag | Text }
+@top Template { (Tag | Text)* }
 
 @local tokens {
   Close { "]}" }
   @else Content
 }
 
-@skip {} {
+@skip { } {
   Open { "${[" }
   Tag { Open (Content)+ Close }
 }
 
 @tokens {
-  Text { _ }
+  Text { ![$] Text? }
 }
 
 @external propSource highlight from "./highlight"

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

@@ -3,15 +3,15 @@ import {LRParser, LocalTokenGroup} from "@lezer/lr"
 import {highlight} from "./highlight"
 export const parser = LRParser.deserialize({
   version: 14,
-  states: "!QOQOPOOOOOO'#C_'#C_OYOQO'#C^QOOOOOOOOO'#Cc'#CcO_OQO,58xOOOO-E6a-E6aOOOO1G.d1G.d",
-  stateData: "g~OUROXPO~OSSO~OSSOTVO~O",
-  goto: "eWPPX[PPP_RRORQOQTQRUT",
+  states: "!^QQOPOOOOOO'#C_'#C_OYOQO'#C^OOOO'#Cc'#CcQQOPOOOOOO'#Cd'#CdO_OQO,58xOOOO-E6a-E6aOOOO-E6b-E6bOOOO1G.d1G.d",
+  stateData: "g~OUROYPO~OSTO~OSTOTXO~O",
+  goto: "nXPPY^PPPbhTROSTQOSQSORVSQUQRWU",
   nodeNames: "⚠ Template Tag Open Content Close Text",
-  maxTerm: 9,
+  maxTerm: 10,
   propSources: [highlight],
   skippedNodes: [0],
-  repeatNodeCount: 1,
-  tokenData: "!S~RTOtbtugu;'Sb;'S;=`z;=`Ob~gOU~~lPU~#o#po~rP!}#Ou~zOX~~!PPU~;=`<%lb",
+  repeatNodeCount: 2,
+  tokenData: "![~RTOtbtuyu;'Sb;'S;=`s<%lOb~gSU~Otbu;'Sb;'S;=`s<%lOb~vP;=`<%lb~|P#o#p!P~!SP!}#O!V~![OY~",
   tokenizers: [1, new LocalTokenGroup("b~RP#P#QU~XP#q#r[~aOT~~", 17, 4)],
   topRules: {"Template":[0,1]},
   tokenPrec: 0