Response streaming

src-web/components/Editor/Editor.tsx

@@ -1,4 +1,3 @@
-import { autocompletion } from '@codemirror/autocomplete';
 import type { Transaction, TransactionSpec } from '@codemirror/state';
 import { Compartment, EditorSelection, EditorState, Prec } from '@codemirror/state';
 import classnames from 'classnames';

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

@@ -11,7 +11,6 @@ const variables = [
 ];
 
 export function myCompletions(context: CompletionContext) {
-  // console.log('COMPLETE', context);
   const toStartOfName = context.matchBefore(/\w*/);
   const toStartOfVariable = context.matchBefore(/\$\{.*/);
   const toMatch = toStartOfVariable ?? toStartOfName ?? null;

src-web/components/Editor/extensions.ts

@@ -9,14 +9,13 @@ import { html } from '@codemirror/lang-html';
 import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
 import { xml } from '@codemirror/lang-xml';
+import type { LanguageSupport } from '@codemirror/language';
 import {
   bracketMatching,
   foldGutter,
   foldKeymap,
   HighlightStyle,
   indentOnInput,
-  LanguageSupport,
-  LRLanguage,
   syntaxHighlighting,
 } from '@codemirror/language';
 import { lintKeymap } from '@codemirror/lint';
@@ -33,12 +32,9 @@ import {
   lineNumbers,
   rectangularSelection,
 } from '@codemirror/view';
-import { parseMixed } from '@lezer/common';
 import { tags as t } from '@lezer/highlight';
-import { myCompletions } from './completion/completion';
-import { parser as twigParser } from './twig/twig';
+import { twig } from './twig/extension';
 import { url } from './url/extension';
-import { placeholders } from './widgets';
 
 export const myHighlightStyle = HighlightStyle.define([
   {
@@ -102,35 +98,7 @@ export function getLanguageExtension({
     return [base];
   }
 
-  const mixedTwigParser = twigParser.configure({
-    props: [
-      // Add basic folding/indent metadata
-      // foldNodeProp.add({ Conditional: foldInside }),
-      // indentNodeProp.add({
-      //   Conditional: (cx) => {
-      //     const closed = /^\s*\{% endif/.test(cx.textAfter);
-      //     return cx.lineIndent(cx.node.from) + (closed ? 0 : cx.unit);
-      //   },
-      // }),
-    ],
-    wrap: parseMixed((node) => {
-      return node.type.isTop
-        ? {
-            parser: base.language.parser,
-            overlay: (node) => node.type.name === 'Text',
-          }
-        : null;
-    }),
-  });
-
-  const twigLanguage = LRLanguage.define({ parser: mixedTwigParser, languageData: {} });
-  const completion = twigLanguage.data.of({
-    autocomplete: myCompletions,
-  });
-  const languageSupport = new LanguageSupport(twigLanguage, [completion]);
-  const completion2 = base.language.data.of({ autocomplete: myCompletions });
-  const languageSupport2 = new LanguageSupport(base.language, [completion2]);
-  return [languageSupport, languageSupport2, placeholders, base.support];
+  return twig(base);
 }
 
 export const baseExtensions = [

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

@@ -0,0 +1,51 @@
+import { LRLanguage, LanguageSupport } from '@codemirror/language';
+import { parseMixed } from '@lezer/common';
+import { myCompletions } from '../completion/completion';
+import { placeholders } from '../widgets';
+import { parser as twigParser } from './twig';
+
+export function twig(base?: LanguageSupport) {
+  const parser = mixedOrPlainParser(base);
+  const twigLanguage = LRLanguage.define({ name: 'twig', parser, languageData: {} });
+  const completion = twigLanguage.data.of({
+    autocomplete: myCompletions,
+  });
+  const languageSupport = new LanguageSupport(twigLanguage, [completion]);
+
+  if (base) {
+    const completion2 = base.language.data.of({ autocomplete: myCompletions });
+    const languageSupport2 = new LanguageSupport(base.language, [completion2]);
+    return [languageSupport, languageSupport2, placeholders, base.support];
+  } else {
+    return [languageSupport, placeholders];
+  }
+}
+
+function mixedOrPlainParser(base?: LanguageSupport) {
+  if (base === undefined) {
+    return twigParser;
+  }
+
+  const mixedParser = twigParser.configure({
+    props: [
+      // Add basic folding/indent metadata
+      // foldNodeProp.add({ Conditional: foldInside }),
+      // indentNodeProp.add({
+      //   Conditional: (cx) => {
+      //     const closed = /^\s*\{% endif/.test(cx.textAfter);
+      //     return cx.lineIndent(cx.node.from) + (closed ? 0 : cx.unit);
+      //   },
+      // }),
+    ],
+    wrap: parseMixed((node) => {
+      return node.type.isTop
+        ? {
+            parser: base.language.parser,
+            overlay: (node) => node.type.name === 'Text',
+          }
+        : null;
+    }),
+  });
+
+  return mixedParser;
+}