Variables under Environment, and render all props

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

@@ -54,6 +54,8 @@
 
       /* Bring above on hover */
       @apply hover:z-10 relative;
+
+      -webkit-text-security: none;
     }
   }
 

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

@@ -12,7 +12,6 @@ import './Editor.css';
 import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
 import type { GenericCompletionConfig } from './genericCompletion';
 import { singleLineExt } from './singleLine';
-import { useEnvironments } from '../../../hooks/useEnvironments';
 import { useActiveEnvironment } from '../../../hooks/useActiveEnvironment';
 
 // Export some things so all the code-split parts are in this file

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

@@ -48,7 +48,7 @@ const placeholderMatcher = new BetterMatchDecorator({
     if (groupMatch == null) {
       // Should never happen, but make TS happy
       console.warn('Group match was empty', match);
-      return Decoration.replace({});;
+      return Decoration.replace({});
     }
 
     return Decoration.replace({

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

@@ -9,11 +9,13 @@ import { twigCompletion } from './completion';
 import { parser as twigParser } from './twig';
 import type { Environment } from '../../../../lib/models';
 
-export function twig(base: LanguageSupport, environment: Environment | null, autocomplete?: GenericCompletionConfig) {
-  // TODO: fill variables here
-  const data = environment?.data ?? {};
-  const options = Object.keys(data).map(key => ({ name: key }));
-  const completions = twigCompletion({ options });
+export function twig(
+  base: LanguageSupport,
+  environment: Environment | null,
+  autocomplete?: GenericCompletionConfig,
+) {
+  const variables = environment?.variables ?? [];
+  const completions = twigCompletion({ options: variables });
 
   const language = mixLanguage(base);
   const completion = language.data.of({ autocomplete: completions });