example/link.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>draft-extend</title>
    <link rel="stylesheet" href="../node_modules/draft-js/dist/Draft.css" />
    <link rel="stylesheet" href="../dist/draft-extend.css" />
    <style>
      #target {
        font-family: sans-serif;
        margin: 20px;
        border: solid 1px #ccc;
      }
    </style>
  </head>
  <body>
    <div id="target"></div>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
    <script src="../node_modules/immutable/dist/immutable.min.js"></script>
    <script src="../node_modules/es6-shim/es6-shim.js"></script>
    <script src="../node_modules/@babel/standalone/babel.min.js"></script>
    <script src="../node_modules/draft-js/dist/Draft.js"></script>
    <script src="../dist/draft-extend.js"></script>
    <script src="../node_modules/draft-convert/dist/draft-convert.js"></script>
    <script src="./ToolbarButton.js"></script>
    <script type="text/babel">
      const { EditorState, Modifier, Entity } = Draft;

      const { Editor, createPlugin, pluginUtils } = window.DraftExtend;

      const { convertToHTML, convertFromHTML } = window.DraftConvert;

      const ENTITY_TYPE = 'LINK';

      // Button component to add below the editor
      const LinkButton = ({ editorState, onChange }) => {
        const addLink = () => {
          const contentState = Modifier.applyEntity(
            editorState.getCurrentContent(),
            editorState.getSelection(),
            Entity.create(ENTITY_TYPE, 'MUTABLE', {
              href: 'http://draftjs.org',
              target: '_blank',
            })
          );
          onChange(EditorState.push(editorState, contentState, 'apply-entity'));
        };

        return <button onClick={addLink}>Add Draft Link</button>;
      };

      // Decorator to render links while editing
      const LinkDecorator = {
        strategy: pluginUtils.entityStrategy(ENTITY_TYPE),
        component: props => {
          const entity = Entity.get(props.entityKey);
          const { href, target } = entity.getData();

          return (
            <a href={href} target={target}>
              {props.children}
            </a>
          );
        },
      };

      // Convert links in input HTML to entities
      const htmlToEntity = (nodeName, node) => {
        if (nodeName === 'a') {
          return Entity.create(ENTITY_TYPE, 'MUTABLE', {
            href: node.getAttribute('href'),
            target: node.getAttribute('target'),
          });
        }
      };

      // Convert entities to HTML for output
      const entityToHTML = (entity, originalText) => {
        if (entity.type === ENTITY_TYPE) {
          return `<a href="${entity.data.href}" target="${
            entity.data.target
          }">${originalText}</a>`;
        }
        return originalText;
      };

      const LinkPlugin = createPlugin({
        displayName: 'LinkPlugin',
        buttons: LinkButton,
        decorators: LinkDecorator,
        htmlToEntity,
        entityToHTML,
      });

      const WithPlugin = LinkPlugin(Editor);
      const toHTML = LinkPlugin(convertToHTML);
      const fromHTML = LinkPlugin(convertFromHTML);

      class LinkExample extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
            editorState: EditorState.createWithContent(
              fromHTML(
                '<div>Link example <a href="http://draftjs.org">Draft</a></div>'
              )
            ),
          };

          this.onChange = this.onChange.bind(this);
        }

        onChange(editorState) {
          console.log(toHTML(editorState.getCurrentContent()));
          this.setState({ editorState });
        }

        render() {
          return (
            <WithPlugin
              editorState={this.state.editorState}
              onChange={this.onChange}
            />
          );
        }
      }

      ReactDOM.render(<LinkExample />, document.getElementById('target'));
    </script>
    <script>
      eval(
        Babel.transform(
          document.querySelector('script[type="text/babel"]').innerText,
          { presets: ['es2015', 'react'] }
        ).code
      );
    </script>
  </body>
</html>