| 3719 |
stevensc |
1 |
import React from 'react';
|
|
|
2 |
import { Controller, useFormContext } from 'react-hook-form';
|
|
|
3 |
import { FormControl, FormLabel, Typography } from '@mui/material';
|
|
|
4 |
import { CKEditor } from '@ckeditor/ckeditor5-react';
|
|
|
5 |
import Editor from '@components/common/ckeditor/ClassicEditor';
|
|
|
6 |
|
|
|
7 |
export function FormRichEditor({ label = '', name = '', disabled, rules, onReady = () => {} }) {
|
|
|
8 |
const { control } = useFormContext();
|
|
|
9 |
|
|
|
10 |
return (
|
|
|
11 |
<Controller
|
|
|
12 |
name={name}
|
|
|
13 |
control={control}
|
|
|
14 |
disabled={disabled}
|
|
|
15 |
rules={rules}
|
|
|
16 |
render={({ field: { value, onChange, disabled }, fieldState: { error } }) => (
|
|
|
17 |
<FormControl variant='standard' fullWidth>
|
|
|
18 |
{label && <FormLabel>{label}</FormLabel>}
|
|
|
19 |
|
|
|
20 |
<CKEditor
|
|
|
21 |
editor={Editor}
|
|
|
22 |
onReady={onReady}
|
|
|
23 |
data={value}
|
|
|
24 |
onChange={(event, editor) => onChange(editor.getData())}
|
|
|
25 |
disabled={disabled}
|
|
|
26 |
/>
|
|
|
27 |
|
|
|
28 |
{error && (
|
|
|
29 |
<Typography sx={{ color: 'red', fontSize: '0.75rem' }}>{error.message}</Typography>
|
|
|
30 |
)}
|
|
|
31 |
</FormControl>
|
|
|
32 |
)}
|
|
|
33 |
/>
|
|
|
34 |
);
|
|
|
35 |
}
|