Uncaught Error: Expected block HTML value to be non-null | Happens when an image is present in the editor

[shivekkhurana]

Hi community,

When I call convertToHtml on ContentState it works only if no <img> tag is present (or better to say that no 'IMAGE' entity is present inside the blocks).

If the IMAGE entity is present, I get the above error. A console screenshot is attached below :

I'm calling the following function to generate html.

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

How to go about this ?

I have the following versions of relavent packages.
"draft-convert": "^1.4.2",
"draft-js": "^0.10.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",

on Chrome 56 on Macbook AIR.

#30 is a similar issue but doesn't solves my problem.

Thanks.

[nik-lampe]

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?

[shivekkhurana]

@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 !

[benbriggs]

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.

[shivekkhurana]

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