title: How create a Link entity with decorators in Facebook Draft.js
body: <p>I'm using Facebook Draft.js and I need to create a LINK entity when a valid url is detected in the text.</p>
  
  <p>Currently, I'm using a decorator implementing a strategy detecting if there's a link in the text, like draft-js-linkify-plugin, but I'm having some troubles modifying that text into an immutable LINK entity.</p>
  
  <p>Indeed, I decorate with the Editor props but I can't modify state of the Editor and so, apply this new LINK entity.</p>
  
  <p>The decorator:
  </p>
  
  <pre><code>const decorator = new CompositeDecorator([{
      strategy: findLinks,
      component: decorateComponentWithProps(Link, {
          getEditorState: this.getEditorState.bind(this),
          setEditorState: this.onChange.bind(this)
      }),
  }]);
  </code></pre>
  
  <p>The strategy:
  </p>
  
  <pre><code>function findLinks(contentBlock, callback) {
      const links = linkify.match(contentBlock.getText());
      if (links) {
          links.map(link =&gt; callback(link.index, link.lastIndex))
      }
  }
  </code></pre>
  
  <p>The component:
  </p>
  
  <pre><code>const Link = (props) =&gt; {
      const editorState = props.getEditorState();
      const contentState = editorState.getCurrentContent();
      const selectionState = editorState.getSelection();
  
      const contentStateWithEntity = contentState.createEntity(
          'LINK',
          'IMMUTABLE',
          { url: props.decoratedText }
      );
      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
  
      const contentStateWithLink = Modifier.applyEntity(
          contentStateWithEntity,
          selectionState,
          entityKey
      );
  
      const entity = contentStateWithLink.getEntity(entityKey);
      const { url } = entity.getData();
      const type = entity.getType();
  
      const newEditorState = EditorState.set(editorState, {
          currentContent: contentStateWithEntity
      });
      props.setEditorState(newEditorState);
  
      return &lt;a href={url} target="_blank"&gt;{url}&lt;/a&gt;;
  };
  </code></pre>
  
  <p>I know there are issues in the slectionState or retrieving the text block and modify it instead of create a new entity, but I'm a bit lost. Am I even using the right logic for making this ?</p>
  
  <p>Thanks for your help,</p>