Draft-js: convertFromHTML doesn't include anchor tags

[aaronshaf]

const blockArray = convertFromHTML('<div><a href="/foo">Bar</a></div>')
const editorState = EditorState.createWithContent(ContentState.createFromBlockArray(blockArray))

This seems to strip the anchor tag.

[hellendag]

Yeah, looks like the link is stripped. @CLowbrow, intentional?

[marcboeren]

It seems only http: and https: protocols are allowed (hasValidLinkText), so no relative urls or mailto: links?
My workaround was to remove the hasValidLinkText check and now any href is allowed.
(/src/model/encoding/convertFromHTMLToContentBlocks.js)

[CLowbrow]

Yep, this is pretty aggressive. I assume we did this to not let stuff like <a href="javascript:getPwned();"></a> through. We can accept more stuff, but someone has to think through the security implications.

[alexeygolev]

@marcboeren @CLowbrow it strips all the a's even If I comment out hasValidLinkText. Any workarounds? I only need it once to transform the existing html strings to draft raw format

[aaronshaf]

This is still sad-trombone. Any ideas for a workaround?

[CLowbrow]

You could try to mutate your html to have the href attributes start with "http://www.yourdomain.com" and then pass it through? Is it failing for every possible link or just certain forms?

[xarg]

Even with the protocol set the "a" tag gets stripped:

convertFromHTML('<a href="http://google.com">goog</a>') renders a text node: goog
Same for <img> tags - removed completely.

Version is 0.7.0.

[jbrozena22]

Any update on this? It appears anchor tags don't work at all with convertToHtml.

[cgreening]

Are you passing in the list of decorators when you create the EditorState?

const blocksFromHTML = convertFromHTML('<a href="http://news.bbc.co.uk">A link</a>');
const editorState = ContentState.createFromBlockArray(
  blocksFromHTML.contentBlocks,
  blocksFromHTML.entityMap
);

this.state = { editorState: EditorState.createWithContent(editorState, new CompositeDecorator(decorators)) };

[marcguidancenl]

Just an update, but removing the hasValidLinkText still works for me in the latest version.

If I look at https://github.com/facebook/draft-js/blob/master/src/model/encoding/convertFromHTMLToContentBlocks.js, lines 460-465, they now say:

while (child) {
        if (
          child instanceof HTMLAnchorElement &&
          child.href &&
          hasValidLinkText(child)
        ) {

changing this helped me:

while (child) {
        if (
          child instanceof HTMLAnchorElement &&
          child.href
        ) {

All hrefs, such as /foo, https://foo.bar/, #anchor, relative-foo, they are all accepted. Yes, javascript: too probably, so use with caution.

[afhole]

Any fix for this?

[aliceriot]

I solved this issue by adding a client-side validation that uses a regular expression to check for anchor tags with non http|https urls in them. The user has to clear the validation error (by fixing the URL) before the request to save the HTML to the server will be issued. This works out well for the product requirements for us, maybe you can implement something similar.

[afhole]

Thanks for such a quick reply :)
I'll probably just switch back to https://github.com/sstur/draft-js-import-html to be honest.
convertFromHTML is also adding spaces after new lines for me (https://github.com/facebook/draft-js/issues/1217).

[mitermayer]

Closing this thread for now, but if there is still interest in this discussion please feel free to reopen/comment or create a new issue around it.