text: import React, { Component } from 'react';
  import { EditorState, convertToRaw, ContentState } from "draft-js";
  import { Editor } from 'react-draft-wysiwyg';
  import draftToHtml from 'draftjs-to-html';
  import htmlToDraft from 'html-to-draftjs';
  
  export default class RichTextEditor extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              editorState: EditorState.createEmpty()
          }
  
          this.onEditorStateChange = this.onEditorStateChange.bind(this);
          this.getBase64 = this.getBase64.bind(this);
          this.uploadFile = this.uploadFile.bind(this);
      }
  
      componentDidMount() {
          if(this.props.editMode && this.props.contentToEdit) {
              const blocksFromHtml = htmlToDraft(this.props.contentToEdit);
              const{ contentBlocks, entityMap } = blocksFromHtml;
              const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
              const editorState = EditorState.createWithContent(contentState);
              this.setState({ editorState })
          }
      }
  
      onEditorStateChange(editorState) {
          this.setState(
              { editorState }, 
              this.props.handleRichTextEditorChange(
                  draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
              )
          );
      }
  
      getBase64(file, callback) {
          let reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => callback(reader.result);
          reader.onerror = error => {};
      }
  
      uploadFile(file) {
          return new Promise((resolve, reject) => {
              this.getBase64(file, data => resolve({data: { link: data } }));
          })
      }
  
      render() {
          return (
              <div>
                  <Editor
                      editorState = {this.state.editorState}
                      wrapperClassName="demo-wrapper"
                      editorClassName="demo-editor"
                      onEditorStateChange = {this.onEditorStateChange}
                      toolbar={{
                          inline: { inDropdown: true },
                          list: { inDropdown: true},
                          textAlign: { inDropdown: true},
                          link: { inDropdown: true},
                          history: { inDropdown: true},
                          image: {
                              uploadCallback: this.uploadFile,
                              alt: { present: true, mandatory: false },
                              previewImage: true,
                              inputAccept: "image/gif,image/jpeg,image/jpg,image/png,image/svg"
                          }
                      }}
                  />
              </div>
          )
      }
  }