fix: editor choose context would blur

This commit is contained in:
Joel 2024-04-03 15:15:26 +08:00
parent c3bb541a69
commit c8db4d8a08

View File

@ -1,6 +1,6 @@
'use client' 'use client'
import type { FC } from 'react' import type { FC } from 'react'
import React, { useCallback, useRef } from 'react' import React, { useCallback, useEffect, useRef, useState } from 'react'
import cn from 'classnames' import cn from 'classnames'
import copy from 'copy-to-clipboard' import copy from 'copy-to-clipboard'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
@ -76,21 +76,24 @@ const Editor: FC<Props> = ({
const [isFocus, { const [isFocus, {
setTrue: setFocus, setTrue: setFocus,
setFalse: doSetBlur, setFalse: setBlur,
}] = useBoolean(false) }] = useBoolean(false)
const notBlur = useRef(false) const hideTooltipRunId = useRef(0)
const setBlur = () => { const [isShowInsertToolTip, setIsShowInsertTooltip] = useState(false)
// delay to avoid to not handle click event(handleInsertVariable) useEffect(() => {
setTimeout(() => { if (isFocus) {
if (!notBlur.current) clearTimeout(hideTooltipRunId.current)
doSetBlur() setIsShowInsertTooltip(true)
notBlur.current = false
}, 500)
} }
else {
hideTooltipRunId.current = setTimeout(() => {
setIsShowInsertTooltip(false)
}, 100) as any
}
}, [isFocus])
const handleInsertVariable = () => { const handleInsertVariable = () => {
notBlur.current = true
setFocus() setFocus()
eventEmitter?.emit({ type: PROMPT_EDITOR_INSERT_QUICKLY, instanceId } as any) eventEmitter?.emit({ type: PROMPT_EDITOR_INSERT_QUICKLY, instanceId } as any)
} }
@ -129,7 +132,7 @@ const Editor: FC<Props> = ({
onHeightChange={setEditorHeight} onHeightChange={setEditorHeight}
footer={( footer={(
<div className='pl-3 pb-2 flex'> <div className='pl-3 pb-2 flex'>
{isFocus {(isFocus || isShowInsertToolTip)
? ( ? (
<TooltipPlus <TooltipPlus
popupContent={`${t('workflow.common.insertVarTip')}`} popupContent={`${t('workflow.common.insertVarTip')}`}