fix: prompt editor

web/app/components/base/prompt-editor/plugins/on-blur-or-focus-block.tsx

@@ -1,12 +1,14 @@
 import type { FC } from 'react'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import {
   BLUR_COMMAND,
   COMMAND_PRIORITY_EDITOR,
   FOCUS_COMMAND,
+  KEY_ESCAPE_COMMAND,
 } from 'lexical'
 import { mergeRegister } from '@lexical/utils'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { CLEAR_HIDE_MENU_TIMEOUT } from './workflow-variable-block'
 
 type OnBlurBlockProps = {
   onBlur?: () => void
@@ -18,11 +20,28 @@ const OnBlurBlock: FC<OnBlurBlockProps> = ({
 }) => {
   const [editor] = useLexicalComposerContext()
 
+  const ref = useRef<any>(null)
+
   useEffect(() => {
     return mergeRegister(
+      editor.registerCommand(
+        CLEAR_HIDE_MENU_TIMEOUT,
+        () => {
+          if (ref.current) {
+            clearTimeout(ref.current)
+            ref.current = null
+          }
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
       editor.registerCommand(
         BLUR_COMMAND,
         () => {
+          ref.current = setTimeout(() => {
+            editor.dispatchCommand(KEY_ESCAPE_COMMAND, new KeyboardEvent('keydown', { key: 'Escape' }))
+          }, 100)
+
           if (onBlur)
             onBlur()
 

web/app/components/base/prompt-editor/plugins/update-block.tsx

@@ -2,6 +2,7 @@ import { $insertNodes } from 'lexical'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { textToEditorState } from '../utils'
 import { CustomTextNode } from './custom-text/node'
+import { CLEAR_HIDE_MENU_TIMEOUT } from './workflow-variable-block'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 
 export const PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER = 'PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER'
@@ -29,6 +30,8 @@ const UpdateBlock = ({
       editor.update(() => {
         const textNode = new CustomTextNode('/')
         $insertNodes([textNode])
+
+        editor.dispatchCommand(CLEAR_HIDE_MENU_TIMEOUT, undefined)
       })
     }
   })

web/app/components/base/prompt-editor/plugins/workflow-variable-block/index.tsx

@@ -19,6 +19,7 @@ import type { Node } from '@/app/components/workflow/types'
 
 export const INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND = createCommand('INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND')
 export const DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND = createCommand('DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND')
+export const CLEAR_HIDE_MENU_TIMEOUT = createCommand('CLEAR_HIDE_MENU_TIMEOUT')
 
 export type WorkflowVariableBlockProps = {
   getWorkflowNode: (nodeId: string) => Node
@@ -40,6 +41,7 @@ const WorkflowVariableBlock = memo(({
       editor.registerCommand(
         INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND,
         (variables: string[]) => {
+          editor.dispatchCommand(CLEAR_HIDE_MENU_TIMEOUT, undefined)
           const workflowVariableBlockNode = $createWorkflowVariableBlockNode(variables, getWorkflowNode)
 
           $insertNodes([workflowVariableBlockNode])