Placeholder error and fix env nav

src-web/components/core/Editor/Editor.css

@@ -50,12 +50,16 @@
       @apply text-xs text-gray-800 dark:text-gray-900 px-1 rounded cursor-default dark:shadow;
 
       /* NOTE: Background and border are translucent so we can see text selection through it */
-      @apply bg-gray-300/40 border border-gray-300 border-opacity-40 hover:border-opacity-80;
+      @apply bg-gray-300/40 border border-gray-300 border-opacity-40;
 
       /* Bring above on hover */
       @apply hover:z-10 relative;
 
       -webkit-text-security: none;
+
+      &.placeholder-widget-error {
+        @apply bg-red-300/40 border-red-300 border-opacity-40;
+      }
     }
   }
 

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

@@ -148,6 +148,7 @@ export const multiLineExtensions = [
     },
   }),
   EditorState.allowMultipleSelections.of(true),
+  drawSelection(),
   indentOnInput(),
   closeBrackets(),
   rectangularSelection(),

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

@@ -1,78 +0,0 @@
-import type { DecorationSet, ViewUpdate } from '@codemirror/view';
-import { Decoration, EditorView, MatchDecorator, ViewPlugin, WidgetType } from '@codemirror/view';
-
-class PlaceholderWidget extends WidgetType {
-  constructor(readonly name: string) {
-    super();
-  }
-  eq(other: PlaceholderWidget) {
-    return this.name == other.name;
-  }
-  toDOM() {
-    const elt = document.createElement('span');
-    elt.className = 'placeholder-widget';
-    elt.textContent = this.name;
-    return elt;
-  }
-  ignoreEvent() {
-    return false;
-  }
-}
-
-/**
- * This is a custom MatchDecorator that will not decorate a match if the selection is inside it
- */
-class BetterMatchDecorator extends MatchDecorator {
-  updateDeco(update: ViewUpdate, deco: DecorationSet): DecorationSet {
-    if (!update.startState.selection.eq(update.state.selection)) {
-      return super.createDeco(update.view);
-    } else {
-      return super.updateDeco(update, deco);
-    }
-  }
-}
-
-const placeholderMatcher = new BetterMatchDecorator({
-  regexp: /\$\{\[\s*([^\]\s]+)\s*]}/g,
-  decoration(match, view, matchStartPos) {
-    const matchEndPos = matchStartPos + match[0].length - 1;
-
-    // Don't decorate if the cursor is inside the match
-    for (const r of view.state.selection.ranges) {
-      if (r.from > matchStartPos && r.to <= matchEndPos) {
-        return Decoration.replace({});
-      }
-    }
-
-    const groupMatch = match[1];
-    if (groupMatch == null) {
-      // Should never happen, but make TS happy
-      console.warn('Group match was empty', match);
-      return Decoration.replace({});
-    }
-
-    return Decoration.replace({
-      inclusive: true,
-      widget: new PlaceholderWidget(groupMatch),
-    });
-  },
-});
-
-export const placeholders = ViewPlugin.fromClass(
-  class {
-    placeholders: DecorationSet;
-    constructor(view: EditorView) {
-      this.placeholders = placeholderMatcher.createDeco(view);
-    }
-    update(update: ViewUpdate) {
-      this.placeholders = placeholderMatcher.updateDeco(update, this.placeholders);
-    }
-  },
-  {
-    decorations: (instance) => instance.placeholders,
-    provide: (plugin) =>
-      EditorView.atomicRanges.of((view) => {
-        return view.plugin(plugin)?.placeholders || Decoration.none;
-      }),
-  },
-);

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

@@ -4,7 +4,7 @@ import { w } from '@tauri-apps/api/clipboard-79413165';
 const openTag = '${[ ';
 const closeTag = ' ]}';
 
-interface TwigCompletionOption {
+export interface TwigCompletionOption {
   name: string;
 }
 

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

@@ -3,7 +3,7 @@ import { LRLanguage } from '@codemirror/language';
 import { parseMixed } from '@lezer/common';
 import type { GenericCompletionConfig } from '../genericCompletion';
 import { genericCompletion } from '../genericCompletion';
-import { placeholders } from '../placeholder';
+import { placeholders } from './placeholder';
 import { textLanguageName } from '../text/extension';
 import { twigCompletion } from './completion';
 import { parser as twigParser } from './twig';
@@ -29,7 +29,7 @@ export function twig(
     completion,
     completionBase,
     base.support,
-    placeholders,
+    placeholders(variables),
     ...additionalCompletion,
   ];
 }

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

@@ -0,0 +1,86 @@
+import type { DecorationSet, ViewUpdate } from '@codemirror/view';
+import { Decoration, EditorView, MatchDecorator, ViewPlugin, WidgetType } from '@codemirror/view';
+
+class PlaceholderWidget extends WidgetType {
+  constructor(
+    readonly name: string,
+    readonly isExistingVariable: boolean,
+  ) {
+    super();
+  }
+  eq(other: PlaceholderWidget) {
+    return this.name == other.name;
+  }
+  toDOM() {
+    const elt = document.createElement('span');
+    elt.className = `placeholder-widget ${!this.isExistingVariable ? 'placeholder-widget-error' : ''}`;
+    elt.textContent = this.name;
+    return elt;
+  }
+  ignoreEvent() {
+    return false;
+  }
+}
+
+/**
+ * This is a custom MatchDecorator that will not decorate a match if the selection is inside it
+ */
+class BetterMatchDecorator extends MatchDecorator {
+  updateDeco(update: ViewUpdate, deco: DecorationSet): DecorationSet {
+    if (!update.startState.selection.eq(update.state.selection)) {
+      return super.createDeco(update.view);
+    } else {
+      return super.updateDeco(update, deco);
+    }
+  }
+}
+
+export const placeholders = function (variables: { name: string }[]) {
+  const placeholderMatcher = new BetterMatchDecorator({
+    regexp: /\$\{\[\s*([^\]\s]+)\s*]}/g,
+    decoration(match, view, matchStartPos) {
+      const matchEndPos = matchStartPos + match[0].length - 1;
+
+      // Don't decorate if the cursor is inside the match
+      for (const r of view.state.selection.ranges) {
+        if (r.from > matchStartPos && r.to <= matchEndPos) {
+          return Decoration.replace({});
+        }
+      }
+
+      const groupMatch = match[1];
+      if (groupMatch == null) {
+        // Should never happen, but make TS happy
+        console.warn('Group match was empty', match);
+        return Decoration.replace({});
+      }
+
+      return Decoration.replace({
+        inclusive: true,
+        widget: new PlaceholderWidget(
+          groupMatch,
+          variables.some((v) => v.name === groupMatch),
+        ),
+      });
+    },
+  });
+
+  return ViewPlugin.fromClass(
+    class {
+      placeholders: DecorationSet;
+      constructor(view: EditorView) {
+        this.placeholders = placeholderMatcher.createDeco(view);
+      }
+      update(update: ViewUpdate) {
+        this.placeholders = placeholderMatcher.updateDeco(update, this.placeholders);
+      }
+    },
+    {
+      decorations: (instance) => instance.placeholders,
+      provide: (plugin) =>
+        EditorView.atomicRanges.of((view) => {
+          return view.plugin(plugin)?.placeholders || Decoration.none;
+        }),
+    },
+  );
+};