Feat: Support re-segmentation (#114)
Co-authored-by: John Wang <takatost@gmail.com> Co-authored-by: Jyong <718720800@qq.com> Co-authored-by: 金伟强 <iamjoel007@gmail.com>
This commit is contained in:
@@ -3,11 +3,11 @@
|
||||
import type { ChangeEvent, FC } from 'react'
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import classNames from 'classnames'
|
||||
import { checkKeys } from '@/utils/var'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Toast from '../toast'
|
||||
import { varHighlightHTML } from '../../app/configuration/base/var-highlight'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { checkKeys } from '@/utils/var'
|
||||
|
||||
// regex to match the {{}} and replace it with a span
|
||||
const regex = /\{\{([^}]+)\}\}/g
|
||||
@@ -55,9 +55,9 @@ const BlockInput: FC<IBlockInputProps> = ({
|
||||
useEffect(() => {
|
||||
if (isEditing && contentEditableRef.current) {
|
||||
// TODO: Focus at the click positon
|
||||
if (currentValue) {
|
||||
if (currentValue)
|
||||
contentEditableRef.current.setSelectionRange(currentValue.length, currentValue.length)
|
||||
}
|
||||
|
||||
contentEditableRef.current.focus()
|
||||
}
|
||||
}, [isEditing])
|
||||
@@ -72,7 +72,6 @@ const BlockInput: FC<IBlockInputProps> = ({
|
||||
.replace(/>/g, '>')
|
||||
.replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
|
||||
.replace(/\n/g, '<br />')
|
||||
|
||||
|
||||
// Not use useCallback. That will cause out callback get old data.
|
||||
const handleSubmit = () => {
|
||||
@@ -83,7 +82,7 @@ const BlockInput: FC<IBlockInputProps> = ({
|
||||
if (!isValid) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey })
|
||||
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
|
||||
})
|
||||
return
|
||||
}
|
||||
@@ -125,9 +124,9 @@ const BlockInput: FC<IBlockInputProps> = ({
|
||||
value={currentValue}
|
||||
onBlur={() => {
|
||||
blur()
|
||||
if (!isContentChanged) {
|
||||
if (!isContentChanged)
|
||||
setIsEditing(false)
|
||||
}
|
||||
|
||||
// click confirm also make blur. Then outter value is change. So below code has problem.
|
||||
// setTimeout(() => {
|
||||
// handleCancel()
|
||||
@@ -143,31 +142,33 @@ const BlockInput: FC<IBlockInputProps> = ({
|
||||
{textAreaContent}
|
||||
{/* footer */}
|
||||
<div className='flex item-center h-14 px-4'>
|
||||
{isContentChanged ? (
|
||||
<div className='flex items-center justify-between w-full'>
|
||||
<div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{currentValue.length}</div>
|
||||
<div className='flex space-x-2'>
|
||||
<Button
|
||||
onClick={handleCancel}
|
||||
className='w-20 !h-8 !text-[13px]'
|
||||
>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
type="primary"
|
||||
className='w-20 !h-8 !text-[13px]'
|
||||
>
|
||||
{t('common.operation.confirm')}
|
||||
</Button>
|
||||
</div>
|
||||
{isContentChanged
|
||||
? (
|
||||
<div className='flex items-center justify-between w-full'>
|
||||
<div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{currentValue.length}</div>
|
||||
<div className='flex space-x-2'>
|
||||
<Button
|
||||
onClick={handleCancel}
|
||||
className='w-20 !h-8 !text-[13px]'
|
||||
>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
type="primary"
|
||||
className='w-20 !h-8 !text-[13px]'
|
||||
>
|
||||
{t('common.operation.confirm')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
) : (
|
||||
<p className="leading-5 text-xs text-gray-500">
|
||||
{t('appDebug.promptTip')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<p className="leading-5 text-xs text-gray-500">
|
||||
{t('appDebug.promptTip')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user