Draft-js: Link example not creating clickable links

[candronikos]

BUG

The link example here works fine to create the <a> element. Clicking the link doesn't work though.

I rebuilt the code in the master branch and used local copies of the other javascript dependencies but that's the only difference.

I expected for the <a></a> element to redirect me to the url provided.

Used current master commit: 341a49d01a492ff5a55a3ee8056e007538e2289a and tested on Chrome and Firefox.

[CAYdenberg]

I got the same thing.

The links do work if readOnly={true}.

[CAYdenberg]

Yes, it's a prop of the Editor class. <Editor readOnly={true} editorState={editorState} /> and probably other stuff.

[ollydixon]

That link is a 404 now. Does anyone have an example? Struggling to find out how to do something that should be really basic 👎

[florianmartens]

same problem here.

I will check if this will only happen while editing the text or if the link will be rendered non-clickable.

[mrkev]

Links in contenteditable="true" contexts are not clickable— this is not a bug but rather how browsers work. Hence it works on readOnly mode, since that sets contenteditable="false".

A real editor, can do one of several things:

• Set an onClick handler on the <a /> tag. This probably would also require accessibility considerations (aria tagging).
• Make the link hover-able, and put the clickable link in a tooltip. This is what I see many editors do since it prevents accidental clicks when editing.

If someone wants to improve the example either with documentation mentioning why the links are not clickable, or by implementing one of the options above, I'd be happy to merge a PR (:

[NZY1337]

my solution:

export const Link = (props) => {
const { contentState, entityKey } = props;
const { url } = contentState.getEntity(entityKey).getData();

return (
    <a
        className='link'
        href={url}
        onClick={(e) => {
            const link = e.target.parentElement.parentElement;
            const url = link.href;
            window.open(url, "_blank");
        }}
        rel='noopener noreferrer'
        target='_blank'
        aria-label={url}>
        {props.children}
    </a>
);

};