How to use the draft-js.ContentState.createFromBlockArray function in draft-js

if (options.stripEntities) {
            characterList = characterList.map(stripEntityFromCharacterMetadata)
          }

          // Create a new content block based on the old one
          contentBlock = new ContentBlock({
            key: genKey(),
            text: text,
            type: 'unstyled',
            characterList: characterList,
            depth: 0,
          })

          // Update the editor state with the compressed version
          // const selection = editorState.getSelection()
          const newContentState = ContentState.createFromBlockArray([contentBlock])

          // Create the new state as an undoable action
          editorState = EditorState.push(editorState, newContentState, 'insert-characters')
          editorState = EditorState.moveFocusToEnd(editorState)
        }
      }

      return editorState
    },

hasFollowButton
) => {
  const blockArray = editorState.getCurrentContent().getBlocksAsArray()
  let beforeBlocks
  let afterBlocks

  blockArray.map((block, index) => {
    if (block.getKey() === anchorKey) {
      // split blocks from end of selected block
      beforeBlocks = blockArray.splice(0, index)
      afterBlocks = cloneDeep(blockArray)
    }
  })

  if (beforeBlocks) {
    const beforeContent = ContentState.createFromBlockArray(beforeBlocks)
    const afterContent = ContentState.createFromBlockArray(afterBlocks)

    const beforeHtml = convertDraftToHtml(
      beforeContent,
      allowedBlocks,
      allowedStyles,
      hasFollowButton
    )
    const afterHtml = convertDraftToHtml(
      afterContent,
      allowedBlocks,
      allowedStyles,
      hasFollowButton
    )

    return {

});
    // selector block
    this.mentionPluginSelector = createMentionPlugin({
      mentionTrigger: "[[",
      mentionComponent: mentionProps =>
        <span>
          {mentionProps.children}
        </span>
    });

    let editorState = EditorState.createEmpty();

    if (this.props.defaultValue &amp;&amp; this.props.defaultValue !== "") {
      const blocks = convertFromHTML(this.props.defaultValue);
      editorState = EditorState.createWithContent(ContentState.createFromBlockArray(blocks.contentBlocks, blocks.entityMap));
    }

    const {_genStatus, _matStatus, ...variables} = this.props.variables;

    const suggestions = Object.keys(variables).map(k =&gt; ({
      name: `{{${k}}}`,
      value: this.props.variables[k]
    }));

    const suggestionsFormatter = this.props.formatters.map(f =&gt; ({name: f.name}));
    const suggestionsSelector = this.props.selectors.map(s =&gt; ({name: `[[${s.name}]]`}));

    this.state = {
      editorState,
      suggestions,
      suggestionsFormatter,

this.categoryDropdownOption = await this.spService.getChoiceFieldOptions(this.props.siteUrl, this.props.listId, 'Category');
    // Edit Mode ?
    if (this.props.panelMode == IPanelModelEnum.edit && event) {

      // Get hours of event
      const startHour = moment(event.EventDate).format('HH').toString();
      const startMin = moment(event.EventDate).format('mm').toString();
      const endHour = moment(event.EndDate).format('HH').toString();
      const endMin = moment(event.EndDate).format('mm').toString();

      // Get Descript and covert to RichText Control
      const html = event.Description;
      const contentBlock = htmlToDraft(html);

      if (contentBlock) {
        const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
        editorState = EditorState.createWithContent(contentState);
      }

      // testa  attendees
      const attendees = event.attendes;
      let selectedUsers: string[] = [];
      if (attendees && attendees.length > 0) {
        for (const userId of attendees) {
          let user: any = await this.spService.getUserById(userId, this.props.siteUrl);
          if (user) {
            selectedUsers.push(user.UserPrincipalName);
          }
        }
      }
      // Has geolocation ?
      this.latitude = event.geolocation && event.geolocation.Latitude ? event.geolocation.Latitude : this.latitude;

return block
    }
    
    // new block
    return block.merge({
      type: "image",
      text: "",
      data: {
        url: json.imgSrc,
        forceUpload: true
      }
    })
  })

  tempDoc = null
  return ContentState.createFromBlockArray(contentBlocks)
}

let this_checked_bold = this.props.element.hasOwnProperty('bold') ? this.props.element.bold : false;
    let this_checked_italic = this.props.element.hasOwnProperty('italic') ? this.props.element.italic : false;
    let this_checked_center = this.props.element.hasOwnProperty('center') ? this.props.element.center : false;
    let this_checked_page_break = this.props.element.hasOwnProperty('pageBreakBefore') ? this.props.element.pageBreakBefore : false;
    let this_checked_alternate_form = this.props.element.hasOwnProperty('alternateForm') ? this.props.element.alternateForm : false;

    let this_files = this.props.files.length ? this.props.files : [];
    if (this_files.length < 1 || this_files.length > 0 && this_files[0].id !== "")
      this_files.unshift({id: '', file_name: ''});

    if(this.props.element.hasOwnProperty('content')) {
      var contentState = ContentState.createFromBlockArray(convertFromHTML(this.props.element.content));
      var editorState = EditorState.createWithContent(contentState);
    }
    if(this.props.element.hasOwnProperty('label')) {
      var contentState = ContentState.createFromBlockArray(convertFromHTML(this.props.element.label));
      var editorState = EditorState.createWithContent(contentState);
    }

    return (
      <div>
        <div>
          <h4>{this.props.element.text}</h4>
          <i></i>
        </div>
        { this.props.element.hasOwnProperty('content') &amp;&amp;
          <div>
            <label>Text to display:</label>

            </div></div>

function addNewEntitiy(editorState, entityKey) {
  let newEditorState = AtomicBlockUtils.insertAtomicBlock(
    editorState,
    entityKey,
    ' '
  );
  const content = newEditorState.getCurrentContent();
  const selection = content.getSelectionBefore();
  const blockMap = content.blockMap.remove(selection.anchorKey);
  const newContent = ContentState.createFromBlockArray(blockMap.toArray());
  const nextKey = newContent.getBlockAfter(newContent.getSelectionAfter().anchorKey).key;
  const selectionState = SelectionState.createEmpty(nextKey);
  newEditorState = EditorState.push(editorState, newContent, 'insert');

  return EditorState.forceSelection(
    newEditorState,
    selectionState
  );
}

async getDetail (id) {
    const {code, data} = await api.get('/article/item', {id})
    if (code !== 1000) return false
    const { title, author, summary, category, tag, content } = data
    this.props.form.setFieldsValue({title, author, summary, category, tag})
    const contentBlock = htmlToDraft(content)
    const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks)
    const editorState = EditorState.createWithContent(contentState)
    this.setState({ editorState })
  }

async getDetail (id) {
    const {data} = await api.get('/article/detail', {id})
    this.setState({data})
    const { content } = data
    const contentBlock = htmlToDraft(content)
    const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks)
    const editorState = EditorState.createWithContent(contentState)
    this.setState({ editorState })
  }
  render () {

const convertHTMLToEditorState = (html: string): Object => {
  const blocksFromHTML = convertFromHTML(html)
  if (blocksFromHTML.contentBlocks) {
    const contentState = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    )
    return EditorState.createWithContent(contentState)
  } else {
    return EditorState.createEmpty()
  }
}