convertFromHTML tag <img /> problem

Hi! In convertFromHTML for links i can do this:

    htmlToEntity: (nodeName, node) => {
        if (nodeName === 'a') {
            return Entity.create(
                'LINK',
                'MUTABLE',
                {url: node.href}
            )
        }
    }

For images ( tag) I trying:

    htmlToEntity: (nodeName, node) => {
        if (nodeName === 'img') {
            return Entity.create(
                'IMAGE',
                'MUTABLE',
                {src: node.src}
            )
        }
    }

But it doesn’t work. In draft-js editor img not showed.

[benbriggs]

Images get a bit more complicated because they’re not strict decorations of text. An additional atomic block type is used to have a custom block renderer, then the entity can be used to store metadata within that block. In our internal image plugin our conversion options look something like this:

const ENTITY_TYPE = 'IMAGE';
const BLOCK_TYPE = 'atomic';

export default createPlugin({
  htmlToBlock: (nodeName, node) => {
    if (nodeName === 'figure') {
      return BLOCK_TYPE;
    }
  },
  htmlToEntity: (nodeName, node) => {
    if (nodeName === 'img') {
      return Entity.create(ENTITY_TYPE, ...)
    }
  },
  blockRendererFn: (block) => {
    if (block.getType() === 'atomic' && block.length > 0 && Entity.get(block.getEntityAt(0)).getType() === ENTITY_TYPE) {
      return {
        component: ({block}) => {
          const {src} = Entity.get(block.getEntityAt(0)).getData();
          return <img src={src} />;
        },
        editable: false
      };
    }
  },
  blockToHTML: {
    'atomic': {
      start: '<figure>',
      end: '</figure>'
    }
  },
  entityToHTML: (entity, originalText) => {
    if (entity.type === ENTITY_TYPE) {
      return `<img src="${entity.data.src}" />`;
    }
  }
 });

This way your HTML output looking like this:

<figure>
  <img src="..." />
</figure>

If you need to deal with any incoming <img> tags that don’t have wrapping <figures> you can add the block type by changing htmlToBlock to add the atomic block type around any tags without it:

htmlToBlock: (nodeName, node, lastList, inBlock) => {
  if (nodeName === 'figure' && node.firstChild.nodeName === 'IMG' || (nodeName === 'img' && inBlock !== BLOCK_TYPE) {
  return BLOCK_TYPE;
  }
}

Let me know if this works @Zhurbin!

[racmathafidz]

i know its too late but i’m just trying to help those who have this issue in the future. just have this issue today for showing <img> tag and im using ‘entityToHTML’ and its fix the problem for me.

const currentContentAsHTML = convertToHTML({
      entityToHTML: (entity, originalText) => {
        if (entity.type === 'IMAGE') {          
          return `<img src="${entity.data.src}" />`;
        }
        return originalText;
      },
    })(editorState.getCurrentContent());