Draft.js cannot insert uploaded image from external form

Question

Over my simple draft.js project I try to insert an image uploaded from an external form into the editor's content. The editor I use is the react-draft-wysiwyg that internally uses the draftjs editor.

My editor is rendered from the MyEditor.js:

import React, { Component } from 'react';
import { EditorState,AtomicBlockUtils } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';

import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';


class MyEditor extends Component {
    state = {
        editorState: EditorState.createEmpty(),
    }

    onEditorStateChange: Function = (editorState) => {
      this.setState({
        editorState,
      });
    };

    uploadCallback(file,callback) {
      return new Promise( (resolve, reject) => {
        var reader = new window.FileReader();
        reader.onloadend= () => { 
          fetch('http://localhost:9090/image',{
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              name: file.name,
              data: reader.result,
            }),
          })
          .then((resp) => resp.json()) 
          .then((data)=>{
              console.log('Uploaded Data',data);
              const imageUrl='http://localhost:9090/image/'+data.name;
              resolve({data:{ link: imageUrl } });
          });
        }
        reader.readAsDataURL(file);
      });
    }

    insertImage(url) {
      console.log(this);
      const contentState = this.state.editorState.getCurrentContent();
      const contentStateWithEntity = contentState.createEntity(
        'image',
        'IMMUTABLE',
        { src: url },
      );
      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
      const newEditorState = EditorState.set(
        contentState,
        { currentContent: contentStateWithEntity },
      );
      const state=AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ');
      this.setState({editorState:state});
    };

    render() {
      const { editorState } = this.state;
      const config={
        image: { uploadCallback: this.uploadCallback }
      }
      return (
          <Editor
              editorState={editorState}
              wrapperClassName="demo-wrapper"
              editorClassName="demo-editor"
              onEditorStateChange={this.onEditorStateChange}
              toolbar={ config }
          />
      );
    }
}

export default MyEditor;

And I have the following uploader:

import React, { Component } from 'react';

class UploadForm extends Component {

    state={
      lastImgUploaded:""
    };


    onChange(event){
        event.preventDefault();
        console.log("File Changed");

        const file=event.target.files[0];

        const reader = new window.FileReader();
        reader.onloadend= () => { 
          fetch('http://localhost:9090/image',{
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              name: file.name,
              data: reader.result,
            }),
          })
          .then((resp) => resp.json()) 
          .then((data) => {
              console.log('Uploaded Data',data);
              const imageUrl='http://localhost:9090/image/'+data.name;
              if(this.props.uploadCallback){ this.props.uploadCallback(imageUrl); }
              this.setState({'lastImgUploaded':imageUrl})
          });
        }

        reader.readAsDataURL(file);
    }

    render(){
       return (
       <div>
            <h3>Upload an image and set it into the editor</h3>
            <input type="file" onChange={ this.onChange.bind(this) } name="file"/>
        </div>);
    }
}

export default UploadForm;

And I have and the App.js that contains the sources for the whole app:

import React, { Component } from 'react';
import Editor from './MyEditor';
import UploadForm from './UploadForm';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  state={
    uploadedImage:""
  };

  uploadCallback(link){
    this.setState({'uploadedImage':link});
    this.__editor.insertImage(link).bind(this.__editor);
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <div className="App-editor">
          <Editor ref={ (editor) => {this.__editor=editor; } } />
        </div>
        <div className="SideBar">
          <div className="LastUpload">
            <h3>Last Uploaded Image</h3>
            <img src={this.state.uploadedImage} />
          </div>
          <div className="sideBarUpload">
            <UploadForm  uploadCallback={ this.uploadCallback.bind(this) }/>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

What I want to achieve is when an image gets uploaded to my api from the form, when uploaded successfully to insert the uploaded image into the editor. I try to achieve that with the following method on MyEditor.js:

insertImage(url) {
          console.log(this);
          const contentState = this.state.editorState.getCurrentContent();
          const contentStateWithEntity = contentState.createEntity(
            'image',
            'IMMUTABLE',
            { src: url },
          );
          const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
          const newEditorState = EditorState.set(
            contentState,
            { currentContent: contentStateWithEntity },
          );
          const state=AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ');
          this.setState({editorState:state});
        };

But for some reason I get the error:

editorState.getImmutable is not a function

Over my browsers console. Further investigation proved that this happens in the follwing method:

  const newEditorState = EditorState.set(
        contentState,
        { currentContent: contentStateWithEntity },
      );

Do you have any idea why?

Edit 1

I managed to supress somewhat the error by changing the insertImage in MyEditor into:

insertImage: Function = (url) => {
  const editorState = this.state.editorState;
  const block = new ContentBlock({
    key: genKey(),
    type: 'unstyled',
    text: '<img src="'.concat(url).concat('"></img>'),
  });

Then on App.js i changed the uploadCallback into:

uploadCallback(link){
  this.setState({'uploadedImage':link});
  console.log(this.__editor);
  this.__editor.insertImage(link);
}

But for some reason I cannot see the image into the editor's content. Do you have any idea why?

Edit 2

I tried to use the callback onEditorStateChange and no error gets thrown but I still get no updated content into Draft.js Editor. The resulted insertImage is this one:

insertImage: Function = (url) => {
      console.log("Inserting Image");
      const editorState = this.state.editorState;
      const block = new ContentBlock({
        key: genKey(),
        type: 'unstyled',
        text: url,
      });

      const contentState = editorState.getCurrentContent();
      const blockMap = contentState.getBlockMap().set(block.key, block);                   
      const newState = EditorState.push(editorState, contentState.set('blockMap', blockMap));
      this.onEditorStateChange(newState);
    };

Answer 1

In the end by looking over the react-draft-wysiwyg's controlls (https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/controls/Image/index.js) has a method named:

 addImage: Function = (src: string, height: string, width: string, alt: string): void => {
    const { editorState, onChange, config } = this.props;
    const entityData = { src, height, width };
    if (config.alt.present) {
      entityData.alt = alt;
    }
    const entityKey = editorState
      .getCurrentContent()
      .createEntity('IMAGE', 'MUTABLE', entityData)
      .getLastCreatedEntityKey();
    const newEditorState = AtomicBlockUtils.insertAtomicBlock(
      editorState,
      entityKey,
      ' ',
    );
    onChange(newEditorState);
    this.doCollapse();
  };

So based over this one do this one:

   insertImage: Function = (url) => {
      console.log("Inserting Image",this.__editor);
      const editorState = this.state.editorState;
      const entityData = { src:url, height: 300, width: 300, };
      const contentStateWithEntity=editorState.getCurrentContent().createEntity('IMAGE', 'IMMUTABLE', entityData);

      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

      let newEditorState = EditorState.set(editorState, { currentContent: contentStateWithEntity },);
      newEditorState = AtomicBlockUtils.insertAtomicBlock(editorState,entityKey,' ',);
      this.setState({editorState:newEditorState});
    };