@nish1896/rhf-mui-components/misc/rich-text-editor/index.js

A suite of 20+ reusable Material UI components for React Hook Form to minimize your time and effort in creating and styling forms

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Controller } from 'react-hook-form';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import { ClassicEditor } from 'ckeditor5';
import { FormControl, FormLabel, FormHelperText } from '../../mui/common';
import { fieldNameToLabel } from '../../utils';
import { DefaultEditorConfig } from './config';
import 'ckeditor5/ckeditor5.css';
const RHFRichTextEditor = ({ fieldName, control, registerOptions, required, id, editorConfig, onReady, onFocus, onBlur, onValueChange, disabled, label, showLabelAboveFormField, formLabelProps, helperText, onError, errorMessage, hideErrorMessage, formHelperTextProps, }) => {
    const fieldLabel = label ?? fieldNameToLabel(fieldName);
    const isError = Boolean(errorMessage);
    return (_jsxs(FormControl, { error: isError, children: [_jsx(FormLabel, { label: fieldLabel, isVisible: showLabelAboveFormField ?? true, required: required, error: isError, formLabelProps: formLabelProps }), _jsx(Controller, { name: fieldName, control: control, rules: registerOptions, render: ({ field: { onChange, onBlur: fieldOnBlur, value } }) => (_jsx(CKEditor, { id: id ?? fieldName, editor: ClassicEditor, config: editorConfig ?? DefaultEditorConfig, data: value, onChange: (event, editor) => {
                        const content = editor.getData();
                        onChange(content);
                        if (onValueChange) {
                            onValueChange(content, event, editor);
                        }
                    }, onReady: onReady, onBlur: (event, editor) => {
                        fieldOnBlur();
                        onBlur?.(event, editor);
                    }, onFocus: onFocus, onError: onError, disabled: disabled })) }), _jsx(FormHelperText, { error: isError, errorMessage: errorMessage, hideErrorMessage: hideErrorMessage, helperText: helperText, formHelperTextProps: formHelperTextProps })] }));
};
export { DefaultEditorConfig };
export default RHFRichTextEditor;