improvements

src/components/graph/ConfigNode.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import React, { memo, useCallback, useContext, useMemo, useRef } from 'react'
 import { autocompletion } from '@codemirror/autocomplete'
 import CodeMirror from '@uiw/react-codemirror'
 import FlowContext from '../../lib/flowContext'
@@ -21,6 +21,7 @@ import {
     MenubarSubTrigger,
 } from '../ui/menubar'
 import { InputHandle, OutputHandle } from './NodeHandles'
+import { NodeHeaderTitle } from './NodeHeaderTitle'
 import { NodeMenubar } from './NodeMenubar'
 
 type Props = {
@@ -30,12 +31,13 @@ type Props = {
     height?: number
 }
 
+const DEFAULT_PLANTUML = '@startuml\n\n@enduml\n'
+
 export const ConfigNode = memo(function ConfigNode({ id, data, width, height }: Props) {
-    const [value, setValue] = useState<string>(data?.plantuml ?? '@startuml\n\n@enduml\n')
+    const plantumlValue = data?.plantuml ?? DEFAULT_PLANTUML
     const { theme } = useTheme()
     const ctx = useContext(FlowContext)
     const setNodes = ctx?.setNodes
-    const storedPlantuml = ctx?.nodes?.find((n: any) => n.id === id)?.data?.plantuml ?? ''
 
     const editorRef = useRef<unknown>(null)
 
@@ -46,16 +48,8 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
     const connectedFunctionNodes = (ctx?.nodes ?? []).filter((n: any) => incomingIds.includes(n.id) && n.type === 'function')
     const hasDependencies = connectedConfigNodes.length > 0 || connectedVariableNodes.length > 0 || connectedFunctionNodes.length > 0
 
-    useEffect(() => {
-        if (setNodes) {
-            setNodes((nds: any[]) => nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, plantuml: value } } : n)))
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
-
     const onChange = useCallback(
         (val: string) => {
-            setValue(val)
             if (setNodes) {
                 setNodes((nds: any[]) => nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, plantuml: val } } : n)))
             }
@@ -85,12 +79,12 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
                 return
             }
             if (mode === 'prepend') {
-                onChange(insertText + value)
+                onChange(insertText + plantumlValue)
             } else {
-                onChange(value + insertText)
+                onChange(plantumlValue + insertText)
             }
         },
-        [onChange, value]
+        [onChange, plantumlValue]
     )
 
     const insertExtendsFromNode = useCallback(
@@ -146,6 +140,21 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
     )
     const [editorHeight, editorContainerRef] = useResizeHeight(180)
 
+    const nunjucksTagSnippets = useMemo(
+        () => [
+            { label: 'Variable {{ }}', snippet: '{{  }}' },
+            { label: 'if / endif', snippet: '{% if  %}\n  \n{% endif %}' },
+            { label: 'for / endfor', snippet: '{% for  in  %}\n  \n{% endfor %}' },
+            { label: 'set', snippet: '{% set  =  %}' },
+            { label: 'block / endblock', snippet: '{% block  %}\n  \n{% endblock %}' },
+            { label: 'extends', snippet: '{% extends "" %}' },
+            { label: 'include', snippet: '{% include "" %}' },
+            { label: 'import', snippet: '{% import "" as  %}' },
+            { label: 'raw / endraw', snippet: '{% raw %}\n  \n{% endraw %}' },
+        ],
+        []
+    )
+
     const dimensions =
         width != null && height != null && width > 0 && height > 0
             ? { width, height }
@@ -153,7 +162,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
 
     return (
         <BaseNode className="min-w-80 min-h-[280px]" dimensions={dimensions} resizable nodeId={id} handles={<><InputHandle id="ain" /><OutputHandle id="out" /></>}>
-            <BaseNodeHeaderRow icon={<ScrollText className="size-4" />} title={`${id}.puml`} />
+            <BaseNodeHeaderRow icon={<ScrollText className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={`${id}.puml`} />} />
 
             <BaseNodeContent>
                 <div className="shrink-0 w-full">
@@ -223,6 +232,19 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
                                 </>
                             ) : undefined
                         }
+                        insertTagsContent={
+                            <>
+                                {nunjucksTagSnippets.map(({ label, snippet }) => (
+                                    <MenubarItem
+                                        key={label}
+                                        className="text-xs"
+                                        onClick={() => insertAt(snippet, 'cursor')}
+                                    >
+                                        {label}
+                                    </MenubarItem>
+                                ))}
+                            </>
+                        }
                     />
                 </div>
 
@@ -230,7 +252,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
                     <CodeMirror
                         // @ts-expect-error ref is { view, state, editor }; package ref type not in our node_modules
                         ref={editorRef}
-                        value={value}
+                        value={plantumlValue}
                         height={`${editorHeight}px`}
                         theme={theme}
                         extensions={extensions}
@@ -242,7 +264,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
             </BaseNodeContent>
 
             <BaseNodeFooter>
-                <BaseNodeFooterText>{storedPlantuml ? `${storedPlantuml.length} chars` : 'none'}</BaseNodeFooterText>
+                <BaseNodeFooterText>{plantumlValue ? `${plantumlValue.length} chars` : 'none'}</BaseNodeFooterText>
             </BaseNodeFooter>
         </BaseNode>
     )