Links not showing

[riccardolorenzon]

When i add a link to any piece of text i don't see any style effects applied on that text. The link is saved correctly btw.

And more, is it possible to set the target attribute of the link?

[brijeshb42]

Could this in any way be related to the issue with CSS for placeholder? Because the default CSS that comes with medium-draft works great without any extra work.

Do you want to set your own value of target or do you have problem with the current target=_blank ?

If you want to use your own link component -

import { CompositeDecorator, Entity } from 'draft-js';
import { findLinkEntities, createEditorState } from 'medium-draft';

// create your link component however you like
const MyLinkComponent = (props) => {
    const { url } = Entity.get(props.entityKey).getData();
    return (
      <a
        href={url}
        target="whatever"
      >{props.children}</a>
    );
};

const decorators = new CompositeDecorator([{
  strategy: findLinkEntities,
  component: MyLinkComponent,
}]);

// set editorState in your component like this -

// if you have initial empty data
const editorState = createEditorState(null, decorators);

// if you have some initial data in `initialData`
const editorState = createEditorState(initialData, decorators);

[riccardolorenzon]

I have definitely some CSS issues that i'm trying to solve, but i don't understand what is going on when i add a link.

This is what i see:

• I add a link on the editor
• I don't see any style applied to the linked text
• I don't see the a tag if i inspect the html element, i see only a collection of nodes like this:

  <span data-offset-key="fpe2b-0-1">
    <span data-text="true">this should look like a link
    </span>
  </span>

• If i look in the database, i see the link added correctly but without the target=_blank parameter.

[riccardolorenzon]

I don't know if it can help, but the other inline buttons work correctly.

[brijeshb42]

What about the parent of the span above. Normally, it should look like this -

Also, the target value is not stored in the data. Its just in the UI. You can use whatever value of target you want when rendering the HTML.

[riccardolorenzon]

This is what i get, as you can see there is no anchor element..

<div class="md-block md-block-paragraph" data-block="true" data-editor="acaon" data-offset-key="9d79s-0-0">
<div data-offset-key="9d79s-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr">
<span data-offset-key="9d79s-0-5"><span data-text="true">thi is a link</span>
</span></span></div></div>

[brijeshb42]

What version are you using? Can you try the latest version if its not ?

[riccardolorenzon]

I'm using the latest version (0.3.12).

[brijeshb42]

Is the code the same that you referenced in placeholder issue ?

If it is, its working with my setup -

[riccardolorenzon]

I think i found something interesting: the issue occurs only when i retrieve data from the database.

Unfortunately right now i'm still persisting the html markup instead of the JSON.
To recreate the EditorState from the markup i use this:

import {stateFromHTML} from 'draft-js-import-html';
import {EditorState} from 'draft-js';

editorState = EditorState.createWithContent(stateFromHTML(markup))

It works perfectly for everything but the links.

[brijeshb42]

With the way you are creating editorState, you will also have to pass 2nd argument in EditorState.createWithContent, that is a list of decorators through which draft knows how to render custom entities like Link in this case. createEditorState in medium-draft takes care of this internally. But if you are using EditorState from draft-js directly, you will have to modify it like this -

import {stateFromHTML} from 'draft-js-import-html';
import {EditorState, CompositeDecorator} from 'draft-js';
import { findLinkEntities, Link } from 'medium-draft';

const decorators = new CompositeDecorator([{
  strategy: findLinkEntities,
  component: Link,
}]);

editorState = EditorState.createWithContent(stateFromHTML(markup), decorators);

[riccardolorenzon]

It works!