MUIRichTextEditor integration

[keemor]

Hi,

I'm trying to integrate MUIRichTextEditor mui-rte with react-hook-form

codesandbox.io/s/react-hook-form-controller-c0mr0

1. Attempt, value is not passed to handleSubmit and if turn on defaultValue="RTE defaultValue"
   there's an error A cross-origin error was thrown.

<MUIRichTextEditor
  //Line below throwns error => A cross-origin error was thrown.
  //  defaultValue="RTE defaultValue"
  label="Test"
  name="RTE2"
  ref={register}
/>

2. Attempt throws the same error A cross-origin error was thrown when I start typing inside textarea

<Controller
  as={<MUIRichTextEditor label="Test" />}
  name="RTE1"
  control={control}
/>

I'm aware that it might be MUIRichTextEditor problem.

Maybe there's some other RTE which can be easily integrated with hook-form?

Cheers,

[bluebill1049]

can you leverage onChange prop at the Controller.

https://react-hook-form.com/api#Controller

[bluebill1049]

you will have to use their defaultValue prop

[zszep]

Great support. Works like a charme now.

[bluebill1049]

np

[nonoumasy]

is it possible to get an update for this with RHF version 7? Cheers

[francodgstn]

Hi, thanks for the solution. I think there's still a little issue, updating the value doesn't make the form dirty.
👉 https://codesandbox.io/s/react-hook-form-muirichtexteditor-integration-forked-vbznf7

UPDATE
Sorry, I didn't see that it can be forced by setting shouldDirty to true.
setValue("RTE1", content, { shouldDirty: true })

[wowczarczyk]

In the codesandbox provided when I type something in the RTE, the cursor is moved to the beginning (as if render occured though the render count is not incremented)

[bluebill1049]

i will take a look this issue.

[bluebill1049]

not quite familiar with this component and did some investigation. I think it would probably easier to use custom register at useEffect and update value with setValue.

[bluebill1049]

i think they are going away with controlled, i can see value is been deprecated as well. (in the doc)

[bluebill1049]

https://codesandbox.io/s/react-hook-form-muirichtexteditor-integration-4zgse?file=/src/index.js

[wowczarczyk]

Hey, yes, this works fine, thank you!

[satinder1624]

All the links taking me to the same codeSandbox. https://codesandbox.io/p/sandbox/react-hook-form-muirichtexteditor-integration-c0mr0?file=%2Fsrc%2Findex.js

I am looking to use Controller with RTF

[satinder1624]

So, let me trying to explain my problem. I am using rich text field with react hook from. I am not able to update the value correctly. I fI uncomment setValue and type abcd it will appear dcba

<Controller
render={({field: {onChange, value}}) => (
<MUIRichTextEditor
onChange={value => {
const content = stateToHTML(value.getCurrentContent())
// setValue('comment', content)
return content;
// console.log('Hey ->', content)
}}
inlineToolbar
inheritFontSize
defaultValue={htmlToDraftBlocks(value)}
controls={['bold', 'italic', 'underline']}
label={'Comment'}
id={'comment'}
/>
)}
name="comment"
label="Comment"
control={control}
/>