Rewrote twig grammar

src-web/components/DropMarker.tsx

@@ -0,0 +1,12 @@
+import React, { memo } from 'react';
+
+export const DropMarker = memo(
+  function DropMarker() {
+    return (
+      <div className="relative w-full h-0 overflow-visible pointer-events-none">
+        <div className="absolute z-50 left-2 right-2 bottom-[1px] h-[0.2em] bg-blue-500/50 rounded-full" />
+      </div>
+    );
+  },
+  () => true,
+);

src-web/components/RequestPane.tsx

@@ -80,7 +80,7 @@ export function RequestPane({ fullHeight, className }: Props) {
         <TabContent value="params">
           <ParametersEditor key={activeRequestId} parameters={[]} onChange={() => null} />
         </TabContent>
-        <TabContent value="body" className="mt-1">
+        <TabContent value="body" className="pl-3 mt-1">
           {activeRequest.bodyType === 'json' ? (
             <Editor
               key={activeRequest.id}

src-web/components/Sidebar.tsx

@@ -25,6 +25,7 @@ import { IconButton } from './core/IconButton';
 import { ScrollArea } from './core/ScrollArea';
 import { HStack, VStack } from './core/Stacks';
 import { WindowDragRegion } from './core/WindowDragRegion';
+import { DropMarker } from './DropMarker';
 import { ToggleThemeButton } from './ToggleThemeButton';
 
 interface Props {
@@ -458,14 +459,3 @@ function CustomDragLayer({ sidebarWidth }: { sidebarWidth: number }) {
     </div>
   );
 }
-
-const DropMarker = memo(
-  function DropMarker() {
-    return (
-      <div className="relative w-full h-0 overflow-visible pointer-events-none">
-        <div className="absolute z-50 left-2 right-2 bottom-[1px] h-[0.2em] bg-blue-500/50 rounded-full" />
-      </div>
-    );
-  },
-  () => true,
-);

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

@@ -20,9 +20,9 @@ export function twig(base?: LanguageSupport, autocomplete?: GenericCompletionCon
   if (base) {
     const completion2 = base.language.data.of({ autocomplete: completions });
     const languageSupport2 = new LanguageSupport(base.language, [completion2]);
-    return [languageSupport, languageSupport2, placeholders, base.support];
+    return [languageSupport, languageSupport2, base.support];
   } else {
-    return [languageSupport, placeholders];
+    return [languageSupport];
   }
 }
 

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

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

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

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

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

@@ -1,6 +1,8 @@
 // This file was generated by lezer-generator. You probably shouldn't edit it.
 export const
   Template = 1,
-  Insert = 2,
-  DirectiveContent = 4,
+  Tag = 2,
+  Open = 3,
+  Content = 4,
+  Close = 5,
   Text = 6

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

@@ -1,18 +1,18 @@
 // This file was generated by lezer-generator. You probably shouldn't edit it.
-import {LRParser} from "@lezer/lr"
+import {LRParser, LocalTokenGroup} 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,
+  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",
+  nodeNames: "⚠ Template Tag Open Content Close Text",
+  maxTerm: 9,
   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],
+  tokenData: "!S~RTOtbtugu;'Sb;'S;=`z;=`Ob~gOU~~lPU~#o#po~rP!}#Ou~zOX~~!PPU~;=`<%lb",
+  tokenizers: [1, new LocalTokenGroup("b~RP#P#QU~XP#q#r[~aOT~~", 17, 4)],
   topRules: {"Template":[0,1]},
-  tokenPrec: 25
+  tokenPrec: 0
 })

src-web/components/core/PairEditor.tsx

@@ -3,6 +3,7 @@ import React, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useStat
 import type { XYCoord } from 'react-dnd';
 import { useDrag, useDrop } from 'react-dnd';
 import { v4 as uuid } from 'uuid';
+import { DropMarker } from '../DropMarker';
 import type { GenericCompletionConfig } from './Editor/genericCompletion';
 import { Icon } from './Icon';
 import { IconButton } from './IconButton';
@@ -284,14 +285,3 @@ const FormRow = memo(function FormRow({
 const newPairContainer = (pair?: Pair): PairContainer => {
   return { pair: pair ?? { name: '', value: '' }, id: uuid() };
 };
-
-const DropMarker = memo(
-  function DropMarker() {
-    return (
-      <div className="relative w-full h-0 overflow-visible pointer-events-none">
-        <div className="absolute z-50 left-0 right-0 bottom-[1px] h-[0.2em] bg-blue-500/50 rounded-full" />
-      </div>
-    );
-  },
-  () => true,
-);