I create form using react-hook-form. And I add suneditor. This is main component. Here I send control , rules, name
<FormRow label="Meseläniň şerti" isEditor={true}>
<TextEditor
name="description"
control={control}
rules={{
required:'Meseläniş şerti zerur'
}}
placeholder="Write a Description..."
/>
</FormRow>
This TextEditor component. Here I get ref and inputProps
const TextEditor = ({name , control, rules, defaultValue, ...props}) => {
const {
field: {
ref,
...inputProps
}
} = useController({
name,
control,
rules
});
return (
<div>
<Editor ref={ref} inputProps={inputProps} {...props} />
</div>
)
}
This is Editor component:
const Editor = forwardRef( (props, ref)=>{
const {inputProps} = props
return <SunEditor
setDefaultStyle='bg-dark'
{...props}
ref={ref}
{...inputProps}
setOptions={{
katex: katex,
plugins: plugins,
buttonList: [
["formatBlock"],
[
"bold",
"underline",
"italic"
],
["fontColor", "hiliteColor", 'blockquote'],
["outdent", "indent"],
["align", "horizontalRule", "list"],
["table", "link", "image"],
['math']
// ['katex']
],
formats: ["p", "div", "h1", "h2", "h3", "h4", "h5", "h6"],
font: fonts
,
}}
/>
} )
ref dont access. Because get this error:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
I try use without forwardRef but also this. How to fix it? Or my question how to connect suneditor with react-hook-form?