@nish1896/rhf-mui-components
Version:
A suite of 25+ production-ready react-hook-form components built with material-ui. Fully typed, tree-shakable, and optimized for enterprise-grade forms.
129 lines (128 loc) • 5.03 kB
JavaScript
"use client";
import { RHFMuiConfigContext } from "../../config/ConfigProvider.js";
import { mergeRefs, resolveLabelAboveControl } from "../../utils/control.js";
import FormControl from "../../common/FormControl.js";
import FormHelperText from "../../common/FormHelperText.js";
import FormLabel from "../../common/FormLabel.js";
import { fieldNameToLabel } from "../../utils/text-transform.js";
import { useFieldIds } from "../../utils/useFieldIds.js";
import { DefaultEditorConfig } from "./config.js";
import { forwardRef, useContext, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Controller } from "react-hook-form";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import { ClassicEditor } from "ckeditor5";
import "ckeditor5/ckeditor5.css";
//#region src/misc/rich-text-editor/index.tsx
const RHFRichTextEditor = forwardRef(function RHFRichTextEditorInner({ fieldName, control, registerOptions, required, id, editorConfig, onReady, onFocus, onBlur, onValueChange, customOnChange, disabled: muiDisabled, label, showLabelAboveFormField, formLabelProps, hideLabel, helperText, onError, errorMessage, hideErrorMessage, formHelperTextProps, customIds }, ref) {
const skipNextEditorChangeRef = useRef(false);
const { allLabelsAboveFields } = useContext(RHFMuiConfigContext);
const { fieldId, labelId, helperTextId, errorId } = useFieldIds(fieldName, customIds);
const defaultFieldLabel = fieldNameToLabel(fieldName);
const fieldLabel = label ?? defaultFieldLabel;
const accessibleFieldLabel = typeof fieldLabel === "string" ? fieldLabel : defaultFieldLabel;
const isLabelAboveControl = resolveLabelAboveControl(showLabelAboveFormField, allLabelsAboveFields);
return /* @__PURE__ */ jsx(Controller, {
name: fieldName,
control,
rules: registerOptions,
render: ({ field: { value: rhfValue, onChange: rhfOnChange, onBlur: rhfOnBlur, ref: rhfRef, disabled: rhfDisabled }, fieldState: { error: fieldStateError } }) => {
const isDisabled = muiDisabled || rhfDisabled;
const fieldErrorMessage = fieldStateError?.message?.toString() ?? errorMessage;
const isError = !!fieldErrorMessage;
const showHelperTextElement = !!(helperText || isError && !hideErrorMessage);
return /* @__PURE__ */ jsxs(FormControl, {
error: isError,
disabled: isDisabled,
children: [
!hideLabel && /* @__PURE__ */ jsx(FormLabel, {
label: fieldLabel,
isVisible: isLabelAboveControl,
required,
error: isError,
disabled: isDisabled,
formLabelProps: {
...formLabelProps,
id: labelId,
htmlFor: fieldId
}
}),
/* @__PURE__ */ jsx(CKEditor, {
id: id ?? fieldId,
editor: ClassicEditor,
config: editorConfig ?? DefaultEditorConfig,
data: rhfValue ?? "",
onChange: (event, editor) => {
if (skipNextEditorChangeRef.current) {
skipNextEditorChangeRef.current = false;
return;
}
const content = editor.getData();
/**
* Directly calling the early return in customChange won't work in
* this scenario because the editor is not yet updated with the new value.
* So we need to wrap the rhfOnChange function and call it after the customOnChange
* function is called.
*
* This is a workaround to ensure that the editor is updated with the new value.
*/
if (customOnChange) {
let rhfChangeCalled = false;
let committedValue = "";
const wrappedRhfOnChange = (newValue) => {
rhfChangeCalled = true;
committedValue = newValue;
rhfOnChange(newValue);
};
customOnChange({
rhfOnChange: wrappedRhfOnChange,
newValue: content,
event,
editor
});
const target = rhfChangeCalled ? committedValue : String(rhfValue ?? "");
if (editor.getData() !== target) {
skipNextEditorChangeRef.current = true;
editor.setData(target);
}
return;
}
rhfOnChange(content);
onValueChange?.({
newValue: content,
event,
editor
});
},
ref: mergeRefs(rhfRef, ref),
onReady,
onBlur: (event, editor) => {
rhfOnBlur();
onBlur?.(event, editor);
},
"aria-labelledby": !hideLabel && isLabelAboveControl ? labelId : void 0,
"aria-label": hideLabel ? accessibleFieldLabel : void 0,
"aria-describedby": showHelperTextElement ? isError ? errorId : helperTextId : void 0,
"aria-required": required,
onFocus,
onError,
disabled: isDisabled
}),
/* @__PURE__ */ jsx(FormHelperText, {
error: isError,
errorMessage: fieldErrorMessage,
hideErrorMessage,
helperText,
showHelperTextElement,
formHelperTextProps: {
...formHelperTextProps,
id: isError ? errorId : helperTextId
}
})
]
});
}
});
});
//#endregion
export { DefaultEditorConfig, RHFRichTextEditor as default };