feat: code transform node editor support insert var by add slash or left brace (#3946)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

web/app/components/workflow/nodes/template-transform/panel.tsx

@@ -8,7 +8,7 @@ import VarList from '@/app/components/workflow/nodes/_base/components/variable/v
 import AddButton from '@/app/components/base/button/add-button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
-import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import type { NodePanelProps } from '@/app/components/workflow/types'
@@ -28,6 +28,7 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
     inputs,
     handleVarListChange,
     handleAddVariable,
+    handleAddEmptyVariable,
     handleCodeChange,
     filterVar,
     // single run
@@ -49,7 +50,7 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
         <Field
           title={t(`${i18nPrefix}.inputVars`)}
           operations={
-            !readOnly ? <AddButton onClick={handleAddVariable} /> : undefined
+            !readOnly ? <AddButton onClick={handleAddEmptyVariable} /> : undefined
           }
         >
           <VarList
@@ -62,6 +63,9 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
         </Field>
         <Split />
         <CodeEditor
+          nodeId={id}
+          varList={inputs.variables}
+          onAddVar={handleAddVariable}
           isInNode
           readOnly={readOnly}
           language={CodeLanguage.python3}

web/app/components/workflow/nodes/template-transform/use-config.ts

@@ -1,7 +1,7 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import produce from 'immer'
 import useVarList from '../_base/hooks/use-var-list'
-import type { Var } from '../../types'
+import type { Var, Variable } from '../../types'
 import { VarType } from '../../types'
 import { useStore } from '../../store'
 import type { TemplateTransformNodeType } from './types'
@@ -15,12 +15,25 @@ const useConfig = (id: string, payload: TemplateTransformNodeType) => {
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const defaultConfig = useStore(s => s.nodesDefaultConfigs)[payload.type]
 
-  const { inputs, setInputs } = useNodeCrud<TemplateTransformNodeType>(id, payload)
-  const { handleVarListChange, handleAddVariable } = useVarList<TemplateTransformNodeType>({
+  const { inputs, setInputs: doSetInputs } = useNodeCrud<TemplateTransformNodeType>(id, payload)
+  const inputsRef = useRef(inputs)
+  const setInputs = useCallback((newPayload: TemplateTransformNodeType) => {
+    doSetInputs(newPayload)
+    inputsRef.current = newPayload
+  }, [doSetInputs])
+
+  const { handleVarListChange, handleAddVariable: handleAddEmptyVariable } = useVarList<TemplateTransformNodeType>({
     inputs,
     setInputs,
   })
 
+  const handleAddVariable = useCallback((payload: Variable) => {
+    const newInputs = produce(inputsRef.current, (draft: any) => {
+      draft.variables.push(payload)
+    })
+    setInputs(newInputs)
+  }, [setInputs])
+
   useEffect(() => {
     if (inputs.template)
       return
@@ -36,11 +49,11 @@ const useConfig = (id: string, payload: TemplateTransformNodeType) => {
   }, [defaultConfig])
 
   const handleCodeChange = useCallback((template: string) => {
-    const newInputs = produce(inputs, (draft: any) => {
+    const newInputs = produce(inputsRef.current, (draft: any) => {
       draft.template = template
     })
     setInputs(newInputs)
-  }, [inputs, setInputs])
+  }, [setInputs])
 
   // single run
   const {
@@ -82,6 +95,7 @@ const useConfig = (id: string, payload: TemplateTransformNodeType) => {
     inputs,
     handleVarListChange,
     handleAddVariable,
+    handleAddEmptyVariable,
     handleCodeChange,
     filterVar,
     // single run