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 });

src-web/components/core/PairEditor.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { XYCoord } from 'react-dnd';
 import { useDrag, useDrop } from 'react-dnd';
 import { v4 as uuid } from 'uuid';
@@ -24,7 +24,8 @@ export type PairEditorProps = {
   valueValidate?: InputProps['validate'];
 };
 
-type Pair = {
+export type Pair = {
+  id?: string;
   enabled?: boolean;
   name: string;
   value: string;
@@ -342,6 +343,8 @@ const FormRow = memo(function FormRow({
   );
 });
 
-const newPairContainer = (pair?: Pair): PairContainer => {
-  return { pair: pair ?? { name: '', value: '', enabled: true }, id: uuid() };
+const newPairContainer = (initialPair?: Pair): PairContainer => {
+  const id = initialPair?.id ?? uuid();
+  const pair = initialPair ?? { name: '', value: '', enabled: true };
+  return { id, pair };
 };