1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| 'use client'
| import type { FC } from 'react'
| import React, { useCallback } from 'react'
| import { useBoolean } from 'ahooks'
| import Base from './base'
|
| type Props = {
| value: string
| onChange: (value: string) => void
| title: JSX.Element | string
| headerRight?: JSX.Element
| minHeight?: number
| onBlur?: () => void
| placeholder?: string
| readonly?: boolean
| isInNode?: boolean
| }
|
| const TextEditor: FC<Props> = ({
| value,
| onChange,
| title,
| headerRight,
| minHeight,
| onBlur,
| placeholder,
| readonly,
| isInNode,
| }) => {
| const [isFocus, {
| setTrue: setIsFocus,
| setFalse: setIsNotFocus,
| }] = useBoolean(false)
|
| const handleBlur = useCallback(() => {
| setIsNotFocus()
| onBlur?.()
| }, [setIsNotFocus, onBlur])
|
| return (
| <div>
| <Base
| title={title}
| value={value}
| headerRight={headerRight}
| isFocus={isFocus}
| minHeight={minHeight}
| isInNode={isInNode}
| >
| <textarea
| value={value}
| onChange={e => onChange(e.target.value)}
| onFocus={setIsFocus}
| onBlur={handleBlur}
| className='w-full h-full px-3 resize-none bg-transparent border-none focus:outline-none leading-[18px] text-[13px] font-normal text-gray-900 placeholder:text-gray-300'
| placeholder={placeholder}
| readOnly={readonly}
| />
| </Base>
| </div>
| )
| }
| export default React.memo(TextEditor)
|
|
