title: React Draft-js Block Insert
body: <p><strong>How it Works:</strong>
  When the user hits the spacebar the Draft-JS text content is queried for a specific word.  All instances of that word are then wrapped in  tags.  After the text is wrapped the HTML is then converted back and the Draft-JS editor state is updated:</p>
  
  <pre><code>      const convertedFromHTML= convertFromHTML(newHTML);
        const editorState = this.state.editorState;
  
        // Set Editor and Content States
        const newContentState = ContentState.createFromBlockArray(
          convertedFromHTML.contentBlocks,
          convertedFromHTML.entityMap
        );
  
        const nextEditorState = EditorState.push(
          editorState,
          newContentState,
          'insert-text'
        );
  
        this.setState({ 
          editorState: nextEditorState
        });
  </code></pre>
  
  <p><strong>Block Render Map:</strong></p>
  
  <pre><code>const blockRenderMap = Immutable.Map({
    'Atomic': {
      element: 'Atomic' ,
      wrapper: &lt;GoogleCustomBlock /&gt;
    }
  });
  
  const myBlockStyleFn = (contentBlock) =&gt; {
     const type = contentBlock.getType();
     switch (type) {
       case 'atomic': {
        return 'GoogleCustomBlock';
     }
  }
  </code></pre>
  
  <p><strong>Custom Block Component:</strong></p>
  
  <pre><code>// React Components
  import React, { Component } from 'react';
  
  class GoogleCustomBlock extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;div className='GoogleCustomBlock'&gt;
          {this.props.children}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>export default GoogleCustomBlock;</p>
  
  <p><strong>The Issue:</strong> 
  This functionality occurs when a user hits the space bar.  The text is wrapped and the correct blocks are added to the DOM.  I am having two difficulties listed below:</p>
  
  <ul>
  <li>I need to insert a space after the the end of the text.</li>
  <li>The cursor jumps back to the start of the document, but also stays within the new block that was created via the  elements.  I need it to resume editing outside of the new block and at the end of the text.</li>
  </ul>
  
  <p>I have searched online but no luck so far, any help is appreciated. </p>
  
  <p>Thanks!</p>