Draft JS recognize img from HTML

Question

I'm using Facebook's draft-js to create a WYSIWYG. I'm trying to convert HTML to editorState using the native convertFromHtml. But it's not recognizing the img tag.

import draftJs from 'draft-js'
const blocksFromHTML = convertFromHTML("<img src='some/img.png' />", draftJs.getSafeBodyFromHTML, draftJs.DefaultDraftBlockRenderMap);
const contentState = draftJs.ContentState.createFromBlockArray(blocksFromHTML);
editorState = draftJs.EditorState.createWithContent(contentState);

Doing so completely removes the image. Any ideas?

Dwightdwindle

Answer 1

Example of using convertFromHTML in draft-js 0.10.0 should work (the code was a bit simplified by me):

      const sampleMarkup = '<img src="image.png" />';

      const blocksFromHTML = convertFromHTML(sampleMarkup);
      const state = ContentState.createFromBlockArray(
        blocksFromHTML.contentBlocks,
        blocksFromHTML.entityMap,
      );

      this.state = {
        editorState: EditorState.createWithContent(state),
      };

Wenona

Answer 2

the Mikhail Khazov solution is partially correct, I had to add the img tag into the figure tag, that should solve the problem

Patroclus