42 lines
1010 B
TypeScript
42 lines
1010 B
TypeScript
import React, {useMemo, useRef} from 'react'
|
|
import { FormControl, FormLabel } from '@chakra-ui/react'
|
|
import { Data } from '../../models/game'
|
|
import JoditEditor from "jodit-react";
|
|
|
|
interface Props {
|
|
label: string
|
|
textField: string
|
|
field: string
|
|
bg: string
|
|
handleInputChange: <G extends keyof Data>(name: string, value: Data[G]) => void
|
|
rows: number
|
|
}
|
|
|
|
const TextareaInput = ({ label, textField, field, handleInputChange }: Props) => {
|
|
const editor = useRef(null);
|
|
|
|
const config = useMemo( () =>
|
|
({
|
|
readonly: false, // all options from https://xdsoft.net/jodit/doc/,
|
|
theme: 'dark',
|
|
}),
|
|
[]
|
|
);
|
|
|
|
|
|
return (
|
|
<FormControl mb="3">
|
|
<FormLabel>{label}</FormLabel>
|
|
<JoditEditor
|
|
ref={editor}
|
|
value={field}
|
|
config={config}
|
|
onChange={(value) => {
|
|
handleInputChange(textField, value)
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
)
|
|
}
|
|
|
|
export default TextareaInput |