From 97dcb8977ac0eef0e0eafedd0480ca1be77f5d58 Mon Sep 17 00:00:00 2001
From: Whitewater <me@waterwater.moe>
Date: Tue, 7 May 2024 21:00:43 +0800
Subject: [PATCH] fix: stop event propagation when deleting selected workflow
 var node (#4158)

---
 web/app/components/base/prompt-editor/hooks.ts        |  1 +
 .../plugins/workflow-variable-block/component.tsx     | 11 ++++++-----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/app/components/base/prompt-editor/hooks.ts b/web/app/components/base/prompt-editor/hooks.ts
index 79fe07f0c2..03074b9b17 100644
--- a/web/app/components/base/prompt-editor/hooks.ts
+++ b/web/app/components/base/prompt-editor/hooks.ts
@@ -64,6 +64,7 @@ export const useSelectOrDelete: UseSelectOrDeleteHanlder = (nodeKey: string, com
             editor.dispatchCommand(command, undefined)
 
           node.remove()
+          return true
         }
       }
 
diff --git a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
index 779c601a54..eb2aa0be6c 100644
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
@@ -9,6 +9,7 @@ import {
 } from 'lexical'
 import { mergeRegister } from '@lexical/utils'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import cn from 'classnames'
 import { useSelectOrDelete } from '../../hooks'
 import type { WorkflowNodesMap } from './node'
 import { WorkflowVariableBlockNode } from './node'
@@ -61,11 +62,11 @@ const WorkflowVariableBlockComponent = ({
 
   const Item = (
     <div
-      className={`
-        mx-0.5 relative group/wrap flex items-center h-[18px] pl-0.5 pr-[3px] rounded-[5px] border
-        ${isSelected ? ' border-[#84ADFF] bg-[#F5F8FF]' : ' border-black/5 bg-white'}
-        ${!node && '!border-[#F04438] !bg-[#FEF3F2]'}
-      `}
+      className={cn(
+        'mx-0.5 relative group/wrap flex items-center h-[18px] pl-0.5 pr-[3px] rounded-[5px] border select-none',
+        isSelected ? ' border-[#84ADFF] bg-[#F5F8FF]' : ' border-black/5 bg-white',
+        !node && '!border-[#F04438] !bg-[#FEF3F2]',
+      )}
       ref={ref}
     >
       <div className='flex items-center'>