dify/web/app/components/base/prompt-editor/plugins/on-blur-or-focus-block.tsx
GuanMu 8fe376848f
fix: PromptEditor leaves a pending blur timer that triggers a Vitest unhandled error (#33253)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2026-03-11 11:09:29 +08:00

80 lines
1.9 KiB
TypeScript

import type { FC } from 'react'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { mergeRegister } from '@lexical/utils'
import {
BLUR_COMMAND,
COMMAND_PRIORITY_EDITOR,
FOCUS_COMMAND,
KEY_ESCAPE_COMMAND,
} from 'lexical'
import { useEffect, useRef } from 'react'
import { CLEAR_HIDE_MENU_TIMEOUT } from './workflow-variable-block'
type OnBlurBlockProps = {
onBlur?: () => void
onFocus?: () => void
}
const OnBlurBlock: FC<OnBlurBlockProps> = ({
onBlur,
onFocus,
}) => {
const [editor] = useLexicalComposerContext()
const ref = useRef<ReturnType<typeof setTimeout> | null>(null)
useEffect(() => {
const clearHideMenuTimeout = () => {
if (ref.current) {
clearTimeout(ref.current)
ref.current = null
}
}
const unregister = mergeRegister(
editor.registerCommand(
CLEAR_HIDE_MENU_TIMEOUT,
() => {
clearHideMenuTimeout()
return true
},
COMMAND_PRIORITY_EDITOR,
),
editor.registerCommand(
BLUR_COMMAND,
(event) => {
// Check if the clicked target element is var-search-input
const target = event?.relatedTarget as HTMLElement
if (!target?.classList?.contains('var-search-input')) {
clearHideMenuTimeout()
ref.current = setTimeout(() => {
editor.dispatchCommand(KEY_ESCAPE_COMMAND, new KeyboardEvent('keydown', { key: 'Escape' }))
}, 200)
if (onBlur)
onBlur()
}
return true
},
COMMAND_PRIORITY_EDITOR,
),
editor.registerCommand(
FOCUS_COMMAND,
() => {
if (onFocus)
onFocus()
return true
},
COMMAND_PRIORITY_EDITOR,
),
)
return () => {
clearHideMenuTimeout()
unregister()
}
}, [editor, onBlur, onFocus])
return null
}
export default OnBlurBlock