Uncaught Error: Expected block HTML value to be non-null | Happens when an image is present in the editor about draft-convert HOT 4 CLOSED

@nik-lampe

I was able to fix this by adding a blockToHtml key along with entityToHtml. I took a clue from #30 (second post). The following code is what works for me :

  getInnerHtml() {
    return convertToHTML({
      styleToHTML: (style) => {
        return (
          <span
            style={
              Object.keys(this.customStyleMap).indexOf(style) > -1 ? this.customStyleMap[style] :
              style === 'UNDERLINE' ? {textDecoration: 'underline'} :
              style === 'BOLD' ? {fontWeight: 'bold'} :
              style === 'ITALIC' ? {fontStyle: 'italic'} :
              {}
            }
          />
        );
      },
      blockToHTML: (block) => {
        const type = block.type;
        if (type === 'atomic') {
          return {start: '<span>', end: '</span>'};
        }
        if (type === 'unstyled') {
          return <p />;
        }
        return <span/>;
      },
      entityToHTML: (entity, originalText) => {
        if (entity.type === 'IMAGE') {
          return `<img src='${entity.data.src}' />`;
        }
        return originalText;
      }
    })(this.state.editorState.getCurrentContent());
  }

Notice the start and end of atomic block types. The styleToHtml is where I add my custom inline styles.

Hope it helps !

from draft-convert.

Thanks for following up - I think the built-in default HTML still uses a media block type - the previous name for atomic block types. I'll find some time to fix that.

Additionally, I'd recommend for newer versions of draft-js using block metadata instead of an entity within the atomic block to store information - it makes things a lot more straightforward. See Modifier.setBlockData and ContentBlock.getBlockData for more info on usage. For conversion when using that you can then just have a single blockToHTML function where you can inspect all parts of the block metadata and make a decision on HTML output in one place.

from draft-convert.

I'm having a similar issue.
In my ContentState I have an atomic block with an entity, which represents an icon. I want it to be rendered as <span class="icon"><i class=${name}></i></span>.

As far as I understand the documentation it should work like this:

entityToHTML: (entity, originalText) => {
      if (entity.type === 'icomoon-icon') {
        const { data } = entity
        return `<span class='icon'><i class='${data}'></i></span>`
      }
      return originalText
}

But the entity is contained in an atomic block. And that throws the same error:
Invariant Violation: Expected block HTML value to be non-null

Am I doing something wrong? Do I need a blockToHTML case for the atomic block?

from draft-convert.

@benbriggs Thanks. I'll fix my editor to use blockData instead of entity within a block.

from draft-convert.