How to get the value from Text Editor in React Js? [Snippet attached]

Question

I am making a simple app that makes a JSON form and I have already included the basic details and employment details as two sections.

Basic details section has two inputs such as First Name and Last Name.

Now I am given the requirement to implement the Profile Summary control that should be a text editor and the values entered needs to be stored in JSON format.

Please look at the JSON format in the given codesandbox link.

File that forms JSON: https://codesandbox.io/s/nextjs-css-only-carousel-forked-8grpo?file=/components/form_context.js

{
    basicDetails: {
      firstName: "",
      lastName: "",
      profileSummary: "" --------> This is where I need to fetch the text editor entered values
    },
    companyDetails: [
      {
        companyName: "",
        designation: "",
        startDate: ""
      }
    ]
  }

Text Editor file: https://codesandbox.io/s/nextjs-css-only-carousel-forked-8grpo?file=/components/text_editor.js

Requirement:

The requirement is that the text editor value needs to be stored inside the JSON format.

Eg: If the the text is made bold or bullet list in the editor then the value of the key profileSummary needs to be added with respective tags.

I am trying to achieve the text editor field value like here: https://www.ippy.io/

As I am trying to build a resume like structure, Unable to get the point of how should I need to make the text editor value into JSON key profileSummary.

Complete working example:

https://codesandbox.io/s/nextjs-css-only-carousel-forked-8grpo

Any help is much appreciated.

Answer 1

Everytime editorState change, you need to get its plain HTML equivalent and pass that to your BasicDetails component.

onEditorStateChange = (editorState) => {
  // console.log(editorState);

  this.setState({ editorState }, () => {
    // state updated

    // convert editorState to plain HTML
    const contentRaw = convertToRaw(editorState.getCurrentContent());
    const contentHTML = draftToHtml(contentRaw);

    const fakeEvent = {
      target: {
        name: this.props.name,
        value: contentHTML
      }
    };

    // call onChange function from Parent passing the
    // fakeEvent object
    this.props.onChange(fakeEvent);
  });
};

On your BasicDetails you pass onChange and name prop to EditorContainer component.

...

<EditorContainer
  name="profileSummary"
  onChange={(event) => handleInputChange(event)}
/>

Unfortunately, converting DraftJS Editor content to plain HTML is not built-in on draft-js library, in fact they only support the following functions for data convertions

• convertFromRaw
• convertToRaw
• convertFromHTML

So you are required to use another library, in my code above I'm using draftjs-to-html - the same person who created react-draft-wysiwyg.

Edit We can avoid setting the profileSummary with empty p tag by checking if editorState has some text.

this.setState({ editorState }, () => {
  const currentContent = editorState.getCurrentContent();
  const contentRaw = convertToRaw(currentContent);
  const value = currentContent.hasText() ? draftToHtml(contentRaw) : "";

  const fakeEvent = {
    target: {
      name: this.props.name,
      value
    }
  };

  this.props.onChange(fakeEvent);
});

Answer 2

You need write a funtion hangleEditorChange in BasicDetails.

Then,

# basic_detail.js
  ...
 <div className="">
        <label htmlFor="lastName">Profile Summary</label>
        <EditorContainer  onChnage ={hangleEditorChange}/>
   </div>
...


```js
# text_editor.js

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    });
   this.props.onChange(editorState)
  };