How to add ref Suneditor react

156 Views Asked by At

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?

0

There are 0 best solutions below