ConvertFromHTML images are converted to unstyled rather than Atomic blocks

Do you want to request a feature or report a bug? bug

What is the current behavior?

img converted with convertFromHTML are converted to unstyled div.

<div class="" data-block="true" data-editor="48f1g" data-offset-key="2g03k-0-0">
    <div data-offset-key="2g03k-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr">
        <img src="image.png" height="112" width="200">
    </div>
</div>

**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: **

This is the current behaviour on the master branch convertFromHTML example.

What is the expected behavior?

Should convert to atomic and use customRenderFn

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

Master branch of Draft.js

[ehs035]

Hi is still have the same problem like @apuntovanini. I get the following back if I run above code: My HTML: <p><img src="https://octodex.github.com/images/stormtroopocat.jpg" alt="Stormtroopocat" /></p>

return from convertFromHTML: {"contentBlocks":[{"key":"adbln","type":"unstyled","text":"📷","characterList":[{"style":[],"entity":"2"},{"style":[],"entity":"2"}],"depth":0,"data":{}}],"entityMap":{}} I’m running the latest version of draft-js 0.10.4

[xiaopow]

@RaoHai I fixed my issue my editing the contentBlock after the conversion. You can see the code below. I want to edit the mutability of the entity of the images to “IMMUTABLE” but don’t think that is possible.

const sampleMarkup =
      '<p><img src="https://hackpacific.s3.amazonaws.com/website-images/homepage-hero.png" /></p>' +
      '<p><a href="http://www.facebook.com">Example link</a><br /><br/ ><p>' +
      '<b>Bold text</b>, <i>Italic text</i><br/ ><br />';

      const blocksFromHTML = CustomConvertFromHTML(sampleMarkup);

      const defaultConvertedContentState = ContentState.createFromBlockArray(
        blocksFromHTML.contentBlocks,
        blocksFromHTML.entityMap,
      );

      const customConvertedContentState = CustomContentStateConverter(defaultConvertedContentState);

      const initialEditorState = EditorState.createWithContent(
        customConvertedContentState,
        decorator,
      );

CustomConvertFromHTML: This solves the issue of adjacent paragraphs being combined into one contentBlock.

export const CustomConvertFromHTML = (html) => {
  // Correctly seperates paragraphs into their own blocks
  const blockRenderMap = DefaultDraftBlockRenderMap.set('p', { element: 'p' });
  const blocksFromHTML = convertFromHTML(html, getSafeBodyFromHTML, blockRenderMap);
  blocksFromHTML.contentBlocks = blocksFromHTML.contentBlocks.map(block => (block.get('type') === 'p' ? block.set('type', 'unstyled') : block));

  return blocksFromHTML;
};

CustomContentStateConverter: This looks for contentBlocks with “IMAGE” entities and convert the Block type to ‘atomic’. I want to change the entity to “IMMUTABLE” but right now we can only edit entity data.

export const CustomContentStateConverter = (contentState) => {
  // Correctly assign properties to images and links
  const newBlockMap = contentState.getBlockMap().map((block) => {
    const entityKey = block.getEntityAt(0);
    if (entityKey !== null) {
      const entityBlock = contentState.getEntity(entityKey);
      const entityType = entityBlock.getType();
      switch (entityType) {
        case 'IMAGE': {
          const newBlock = block.merge({
            type: 'atomic',
            text: 'img',
          });
          // const newContentState = contentState.mergeEntityData(entityKey, { mutability: 'IMMUTABLE' });
          return newBlock;
        }
        default:
          return block;
      }
    }
    return block;
  });
  const newContentState = contentState.set('blockMap', newBlockMap);

  return newContentState;
};