variables and templates

src/components/graph/ConfigNode.tsx

@@ -1,7 +1,9 @@
 import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { autocompletion } from '@codemirror/autocomplete'
 import CodeMirror from '@uiw/react-codemirror'
 import FlowContext from '../../lib/flowContext'
 import { useResizeHeight } from '../../hooks/useResizeHeight'
+import { nunjucksCompletionSource } from '../../lib/nunjucksAutocomplete'
 import { plantumlLanguage } from '../../lib/plantumlLanguage'
 import { useTheme } from '../../lib/themeContext'
 import {
@@ -116,7 +118,22 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
         [insertAt]
     )
 
-    const extensions = useMemo(() => [plantumlLanguage.extension], [])
+    const variableIds = useMemo(() => connectedVariableNodes.map((n: any) => n.id), [connectedVariableNodes])
+    const functionIds = useMemo(() => connectedFunctionNodes.map((n: any) => n.id), [connectedFunctionNodes])
+    const configTitles = useMemo(
+        () => connectedConfigNodes.map((n: any) => n.data?.title ?? n.id),
+        [connectedConfigNodes],
+    )
+    const extensions = useMemo(
+        () => [
+            plantumlLanguage.extension,
+            autocompletion({
+                override: [nunjucksCompletionSource(variableIds, configTitles, functionIds)],
+                activateOnTyping: true,
+            }),
+        ],
+        [variableIds, functionIds, configTitles],
+    )
     const [editorHeight, editorContainerRef] = useResizeHeight(180)
 
     const dimensions =