How to integrate react-draft-wysiwyg with react-hook-form

[mattbaratella]

Hi guys,

I need some help. I was using react-final-form in my project but I've decided to change for react-hook-form. By the way, I love it, but I got stuck. :/

On my page, I'm using an editor to collect some info from a user. At the moment I'm using react-draft-wysiwyg.
Here the code:

parentComponent.js

/**
 * react-hook-form library
*/
const {
    register,
    handleSubmit,
    control
} = useForm({
    mode: 'onChange'
});

<form onSubmit={handleSubmit(onSubmit)}>
    <Controller
        as={<WYSIWYGEditor />}
        name='editor'
        control={control}
        onChange={([ event ]) => event.target.value}
    />
</form>

WYSIWYGEditor.js

const WYSIWYGEditor = ({ input }) => {
	const [ editorState, setEditorState ] = useState(EditorState.createEmpty());
	const onEditorStateChange = editorState => {
		setEditorState(editorState);
	};

	return (
		<React.Fragment>
			<div className={classes.root}>
				<Editor
					editorState={editorState}
					wrapperClassName='wrapper-class'
					editorClassName='editor-class'
					onEditorStateChange={onEditorStateChange}
				/>
			</div>
		</React.Fragment>
	);
};

export default WYSIWYGEditor;

PLEASE NOTE:
The input prop comes from the coding with react-final-form. The input was passing the characters I was typing. So, if I leave input as props it fails because it doesn't exist. React-hook-form doesn't pass an input.
I've changed that with props:

const WYSIWYGEditor = props=> {
    console.log(props)

and I get the following in the console.log when I type anything:

{name: "editor", value: undefined, onChange: ƒ}

As you can see, value is undefined. How can I structure the Controller in order to pass a value each time I type something in the editor?

Thanks for your help
Matt

[bluebill1049]

provide a simple codesandbox.

[khanhleemtp]

hi khanhleemtp, u can use this https://codesandbox.io/s/editor-pv9ui

i think it's woking. tks u

[ngurahyudi]

Hi @bluebill1049 I'm failed to reset the react draft WYSIWYG value using reset method of RHF, any clue? Thanks

[bluebill1049]

@ngurahyudi would you like to send a separate GitHub question with a codesandbox? I can take a look at it.

[ngurahyudi]

@ngurahyudi would you like to send a separate GitHub question with a codesandbox? I can take a look at it.

sure, im working on it.. thanks Bill

[ngurahyudi]

Hi @bluebill1049 I'm failed to reset the react draft WYSIWYG value using reset method of RHF, any clue? Thanks
vvvvvvvvvv
answered here

[SusmitaSaha12]

Also, i tried with the code below:

import React, { useState } from "react";

// Components
import { EditorState, convertToRaw } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
//import draftToHtml from "draftjs-to-html";

import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
//import "./WYSIWYG.scss";

const Summerform = props => {
console.log("props"+props);

const [editorState, setEditorState] = useState(EditorState.createEmpty());
const onEditorStateChange = editorState => {
setEditorState(editorState);
console.log("props editor", editorState);
// props.onChange(editorState);
// return input.onChange(
// draftToHtml(convertToRaw(editorState.getCurrentContent()))
// );
};

return (
<React.Fragment>

</React.Fragment>
);
};

export default Summerform;

But here on running the code above it is giving undefined.
Console log:

props editor EditorState {_immutable: Record}_immutable: Record {_map: Map, __ownerID: undefined}[[Prototype]]: Object

Please please help.

[SusmitaSaha12]

Hi Matt, Bill

Please help. earnest request.

[SusmitaSaha12]

hi mattbaratella & bluebill1049,

Please help earnest request. I am literally stuck with integrating react-draft-wysiwyg with react-hook-form and not getting any way outs.

[bluebill1049]

Is this working for you: https://codesandbox.io/s/recursing-zeh-sosjd?file=/src/WYSIWYG.js

[mattbara]

@SusmitaSaha12 you are looking in the wrong file. The file you need to look into is the one which calls the component < WYSIWYGEditor ......>. If you are saying that the props passed to < WYSIWYGEditor /> are undefined, why are you looking at this component? You need to go up 1 hierarchy and debug thep props you are passing BEFORE they get passed. Debug backwards. If you check the codesandbox, the file you are looking for is something similar to App.js. I hope it helps.

[mattbara]

@SusmitaSaha12 look @bluebill1049 codesandbox. The Code seems much better than the one I wrote. If that doesn't work I would suggest you to put everything on a github repo and provide a full installation of your app. But I won't be able to look at any for at least 2 weeks.

[SusmitaSaha12]

Thank You bluebill1049 & devolab for helping . bluebill1049 your codesand box is working on my project .
THANK YOU SO MUCH

[bluebill1049]

no worries @SusmitaSaha12 thank you @devolab for helping 🙏 ❤️

[tannvdts]

@mattbaratella You can use the library https://www.npmjs.com/package/@tonz/react-draft-wysiwyg-input
This library wapper eact-draft-wysiwyg with behaviour like input html:

import {RichTextInput} from '@tonz/react-draft-wysiwyg-input'

import '@tonz/react-draft-wysiwyg-input/style.css';

<RichTextInput disabled={disabled} {...register('desc')} />

[krismp]

I'm using this in my NextJS app, I'm using typescript, and seems it can't find any type definitions