From a355225a83cf3322fe1800ce3684c821cd0e1fc5 Mon Sep 17 00:00:00 2001
From: Pascal M <11357019+perzeuss@users.noreply.github.com>
Date: Sat, 13 Apr 2024 03:48:39 +0200
Subject: [PATCH] fix: node shortcuts active in input fields (#3438)

---
 .../workflow/hooks/use-nodes-interactions.ts    | 17 ++++++++++++++++-
 .../components/workflow/hooks/use-workflow.ts   | 12 ++++++++++++
 web/app/components/workflow/index.tsx           |  8 +++++++-
 web/app/components/workflow/store.ts            |  4 ++++
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/web/app/components/workflow/hooks/use-nodes-interactions.ts b/web/app/components/workflow/hooks/use-nodes-interactions.ts
index 803799ac13..ea9af3e9aa 100644
--- a/web/app/components/workflow/hooks/use-nodes-interactions.ts
+++ b/web/app/components/workflow/hooks/use-nodes-interactions.ts
@@ -721,8 +721,12 @@ export const useNodesInteractions = () => {
 
     const {
       setClipboardElements,
+      shortcutsDisabled,
     } = workflowStore.getState()
 
+    if (shortcutsDisabled)
+      return
+
     const {
       getNodes,
     } = store.getState()
@@ -741,8 +745,12 @@ export const useNodesInteractions = () => {
 
     const {
       clipboardElements,
+      shortcutsDisabled,
     } = workflowStore.getState()
 
+    if (shortcutsDisabled)
+      return
+
     const {
       getNodes,
       setNodes,
@@ -803,6 +811,13 @@ export const useNodesInteractions = () => {
     if (getNodesReadOnly())
       return
 
+    const {
+      shortcutsDisabled,
+    } = workflowStore.getState()
+
+    if (shortcutsDisabled)
+      return
+
     const {
       getNodes,
     } = store.getState()
@@ -815,7 +830,7 @@ export const useNodesInteractions = () => {
 
     for (const node of nodesToDelete)
       handleNodeDelete(node.id)
-  }, [getNodesReadOnly, handleNodeDelete, store])
+  }, [getNodesReadOnly, handleNodeDelete, store, workflowStore])
 
   return {
     handleNodeDragStart,
diff --git a/web/app/components/workflow/hooks/use-workflow.ts b/web/app/components/workflow/hooks/use-workflow.ts
index 0417b395db..6864410c8a 100644
--- a/web/app/components/workflow/hooks/use-workflow.ts
+++ b/web/app/components/workflow/hooks/use-workflow.ts
@@ -331,6 +331,16 @@ export const useWorkflow = () => {
     return nodes.find(node => node.id === nodeId) || nodes.find(node => node.data.type === BlockEnum.Start)
   }, [store])
 
+  const enableShortcuts = useCallback(() => {
+    const { setShortcutsDisabled } = workflowStore.getState()
+    setShortcutsDisabled(false)
+  }, [workflowStore])
+
+  const disableShortcuts = useCallback(() => {
+    const { setShortcutsDisabled } = workflowStore.getState()
+    setShortcutsDisabled(true)
+  }, [workflowStore])
+
   return {
     handleLayout,
     getTreeLeafNodes,
@@ -345,6 +355,8 @@ export const useWorkflow = () => {
     renderTreeFromRecord,
     getNode,
     getBeforeNodeById,
+    enableShortcuts,
+    disableShortcuts,
   }
 }
 
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 1bcc05fd93..bef08122fb 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -125,7 +125,11 @@ const Workflow: FC<WorkflowProps> = memo(({
     handleEdgeDelete,
     handleEdgesChange,
   } = useEdgesInteractions()
-  const { isValidConnection } = useWorkflow()
+  const {
+    isValidConnection,
+    enableShortcuts,
+    disableShortcuts,
+  } = useWorkflow()
 
   useOnViewportChange({
     onEnd: () => {
@@ -161,6 +165,8 @@ const Workflow: FC<WorkflowProps> = memo(({
         edgeTypes={edgeTypes}
         nodes={nodes}
         edges={edges}
+        onPointerDown={enableShortcuts}
+        onMouseLeave={disableShortcuts}
         onNodeDragStart={handleNodeDragStart}
         onNodeDrag={handleNodeDrag}
         onNodeDragStop={handleNodeDragStop}
diff --git a/web/app/components/workflow/store.ts b/web/app/components/workflow/store.ts
index 5d18bec450..f0c648fce3 100644
--- a/web/app/components/workflow/store.ts
+++ b/web/app/components/workflow/store.ts
@@ -65,6 +65,8 @@ type Shape = {
   setCustomTools: (tools: ToolWithProvider[]) => void
   clipboardElements: Node[]
   setClipboardElements: (clipboardElements: Node[]) => void
+  shortcutsDisabled: boolean
+  setShortcutsDisabled: (shortcutsDisabled: boolean) => void
 }
 
 export const createWorkflowStore = () => {
@@ -111,6 +113,8 @@ export const createWorkflowStore = () => {
     setCustomTools: customTools => set(() => ({ customTools })),
     clipboardElements: [],
     setClipboardElements: clipboardElements => set(() => ({ clipboardElements })),
+    shortcutsDisabled: false,
+    setShortcutsDisabled: shortcutsDisabled => set(() => ({ shortcutsDisabled })),
   }))
 }