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/header/run-and-history.tsx

@@ -38,6 +38,7 @@ const RunMode = memo(() => {
   const {
     doSyncWorkflowDraft,
   } = useNodesSyncDraft()
+  const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
   const workflowRunningData = useStore(s => s.workflowRunningData)
   const isRunning = workflowRunningData?.result.status === WorkflowRunningStatus.Running
 
@@ -55,10 +56,16 @@ const RunMode = memo(() => {
     const startVariables = startNode?.data.variables || []
     const fileSettings = featuresStore!.getState().features.file
     const {
+      showDebugAndPreviewPanel,
       setShowDebugAndPreviewPanel,
       setShowInputsPanel,
     } = workflowStore.getState()
 
+    if (showDebugAndPreviewPanel) {
+      handleCancelDebugAndPreviewPanel()
+      return
+    }
+
     if (!startVariables.length && !fileSettings?.image?.enabled) {
       await doSyncWorkflowDraft()
       handleRun({ inputs: {}, files: [] })
@@ -75,6 +82,7 @@ const RunMode = memo(() => {
     doSyncWorkflowDraft,
     store,
     featuresStore,
+    handleCancelDebugAndPreviewPanel,
   ])
 
   return (