Blocks encoding in entityToHTML

I was wondering why a ENTITY_MAP is used to convert text in entities, here https://github.com/HubSpot/draft-convert/blob/master/src/encodeBlock.js#L4 ?

Because this is what is happening when using a entityToHTML function to transform links into real <a>:

Editor:

Result after convertToHTML:

Only because it’s in a entity (a link).

Why?

Do I have to use a decoder on originalText to display the original text?

[benbriggs]

Ahh I see. Interesting, thanks for bearing with me @jebarjonet. Are you using the same code that you posted above when converting to HTML? The first thing that came to mind as the culprit was using ReactElements to render out the HTML like this:

entityToHTML: (entity, originalText) => {
        if (entity.type === 'link') {
            return <a href={entity.data.url}>{originalText}</a>; // originalText is double-escaped
        }
        return originalText;
    }

Since React automatically escapes text nodes. However the example you posted above uses a string to convert, which I cannot reproduce the issue with. Additionally returning an empty ReactElement avoids the problem:

entityToHTML: (entity, originalText) => {
        if (entity.type === 'link') {
            return <a href={entity.data.url} />; // originalText is escaped once
        }
        return originalText;
    }

The first example I can fix, but there should be some already available workarounds in the meanwhile.

[jebarjonet]

You are right. It works well with

return <a href={entity.data.url} />

and

return {
    start: `<a href="${entity.data.url}">`,
    end: '</a>',
}

Thank you!

I just does not work well with

return <a href={entity.data.url}>{originalText}</a>