Using convertToHTML returning an <img> tag in blockToHTML gives error about draft-convert HOT 17 CLOSED

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());

from draft-convert.

Actually the following worked fine though using start and end and returning a string.
So that is an option for anyone experiencing this issue.

      blockToHTML: (block) => {
        const type = block.type
        if (type === 'atomic') {
          let url = block.data.src
          return { start: "<img src='" + (url) + "'", end: "</img>" }
        }
        if (type === 'unstyled') {
          return <p />
        }
      },

from draft-convert.

@wulucxy I exported blocks of the content state using getBlockMap , then I looped on each block and if the block is of the corresponding entity then I replace its text by an empty string ''. Then I transformed those blocks back into content state using createFromBlockArray (sorry I don't have the exact code with me, I no longer work on the project I used this on)

from draft-convert.

Interesting, thanks @StevenIseki. Looks like this is the set of elements we need to work around. I can see if I can find some time to push up a fix, in the meantime using a string like you mentioned would definitely work. Additionally if you're interested I'd also welcome a PR solving this issue!

from draft-convert.

I also ran into this issue, not sure if a PR has been created yet, unfortunately won't have time for awhile before I could take a shot at solving it. Other than that, seems to be working well!

from draft-convert.

I'm also getting some random insertion of the letter 'a' into my img/figure tags.

<figure><img src=''>a</img>aaaaaaaaaaaaaaaaaaaaa </figure>

Here's the code I'm using to convert:

const converted = convertToHTML({
                blockToHTML: b => {
                    if (b.type === "atomic") {
                        return {
                            start: "<figure>",
                            end: "</figure>",
                            empty: "" 
                        };
                    }

                    return;
                },
                entityToHTML: (entity, originalText) => {
                    if (entity.type === "LINK") {
                        return <a href={entity.data["url"]}>{originalText}</a>;
                    }

                    if (entity.type === "image") {
                        return { start: `<img src='${entity.data["src"]}'>`, end: "</img>", empty: "" };
                    }

                    return originalText;
                },
            })(content);

from draft-convert.

@AlexanderMattoni the 'a' appears due to a pretty hacky solution to get conversion of entities within atomic blocks to work. the gist of it is that entity data needs to be attached to some non-empty range of text within a block. due to some whitespace cleanup that happens during conversion the text couldn't be purely whitespace, so the 'a' character is used.

regardless it can be avoided by using something similar to the string solution provided above, except without using both a start and end value. You can just return an HTML string, which won't give convertToHTML the chance to insert the 'a', like so:

entityToHTML: (entity, originalText) => {
  ...
  if (entity.type === 'image') {
    return `<img src="${entity.data.src}" />`;
  }

  return originalText;
}

from draft-convert.

@benbriggs Thanks! That solved the issue. Seems to be working well now. Has a PR been made to fix the original issue of the thread?

from draft-convert.

I was able to get around this by wrapping the image in a span:

entityToHTML(entity, originalText) {
    if (entity.type === 'IMG') {
      return <span><img src={entity.data.url} /></span>
    }
    return originalText
  }

from draft-convert.

@jisaacks I did the same thing

from draft-convert.

@benbriggs why assign 'a' to an empty atomic block instead of a space?

When I inject the result of convertFromHTML into an new Editor, the plain text (editorState.getCurrentContent().getPlainText()) contains a a where the <img> was in the HTML, which is not very nice.

This is what I used somewhere else in the app

const entityKey = Entity.create('img', 'IMMUTABLE', {src: imageUrl})
const newEditorState = AtomicBlockUtils.insertAtomicBlock(
    editorState,
    entityKey,
    ' ',
)

So that the img is inserted with an ' ' as a character, which is less harmful when it is converted into plain text.

from draft-convert.

@jebarjonet as mentioned above due to some whitespace cleanup that happens during conversion the text couldn't be purely whitespace, so the 'a' character is used. I'd recommend instead using block metadata when possible on an atomic block, the original solution was meant to be replaced by it.

from draft-convert.

For this case I did a map on blocks as array and transformed the 'a' manually when needed, so I got a new contentState without 'a'. Not great but it works so...

@benbriggs what do you mean by "block metadata"? For images, is not the example you gave here the reference? (which I have seen pretty often on other people codes)

from draft-convert.

Ah I see, that was the only way in August, but since then draft-js has added the concept of block metadata that you can modify with methods like Modifier.setBlockData and can access with block.getData(). In our internal implementation of image block it's been a big improvement since no character is necessary at all in the block.

from draft-convert.

@jebarjonet i wonder how you solve this tricky aaa bug, when i remove a img, then this a is showup，it is very annoy。

@benbriggs what kind of situation is the whitespace cleanup bug happenes？what does this matter？

from draft-convert.

@jebarjonet I was having the same problem and after some fiddling around I could solve it the way you are describing. Thanks!

from draft-convert.

to restate what i mentioned here before - using entities within atomic blocks (the situation that creates the a) is no longer a recommended technique for draft-js in general. instead of using the entity to store data a more elegant solution would be to use block metadata, where the block will remain completely empty

from draft-convert.