Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { FormControl, FormLabel, Typography } from '@mui/material';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import { ClassicEditor } from 'ckeditor5';

export function FormRichEditor({
  id = '',
  label = '',
  name = '',
  disabled,
  rules,
  style = {},
  onReady = () => {}
}) {
  const { control } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      disabled={disabled}
      rules={rules}
      render={({ field: { value, onChange, disabled }, fieldState: { error } }) => (
        <FormControl variant='standard' fullWidth sx={style}>
          {label && <FormLabel htmlFor={id}>{label}</FormLabel>}
          <CKEditor
            editor={ClassicEditor}
            onReady={onReady}
            data={value}
            onChange={(event, editor) => onChange(editor.getData())}
            id={id}
            disabled={disabled}
          />

          {error && (
            <Typography sx={{ color: 'red', fontSize: '0.75rem' }}>{error.message}</Typography>
          )}
        </FormControl>
      )}
    />
  );
}