The documentation currently represents the 4.0.0 release.
For troubleshooting please checkout theFAQ

Link

Supported Environment

  • Desktop: Yes
  • Mobile: No
  • Screen-reader: No

Getting Started

This plugin allows you to add link entities via the inline toolbar. It also provides a decorator that formats the created entities.

npm install @draft-js-plugins/editor
npm install @draft-js-plugins/anchor
npm install @draft-js-plugins/inline-toolbar
gettingStarted.js
// It is important to import the Editor which accepts plugins.
import Editor from '@draft-js-plugins/editor';
import createLinkPlugin from '@draft-js-plugins/anchor';
import createInlineToolbarPlugin from '@draft-js-plugins/inline-toolbar';
import {
  ItalicButton,
  BoldButton,
  UnderlineButton,
} from '@draft-js-plugins/buttons';
import React from 'react';

// Here's your chance to pass in a configuration object (see below).
const linkPlugin = createLinkPlugin();

// Pass the `linkPlugin.LinkButton` into the structure of the inline toolbar.
const inlineToolbarPlugin = createInlineToolbarPlugin({
  structure: [BoldButton, ItalicButton, UnderlineButton, linkPlugin.LinkButton],
});

const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin, linkPlugin];

const MyEditor = ({ editorState, onChange }) => (
  <div>
    <Editor editorState={editorState} onChange={onChange} plugins={plugins} />
    <InlineToolbar />
  </div>
);

export default MyEditor;

The plugin ships with a default styling available at this location:  node_modules/@draft-js-plugins/anchor/lib/plugin.css. If you want to use the default styles, you can include this stylesheet (Webpack usage). Otherwise you can supply your own styles via the `theme` config option.

Configuration Parameters

themeObject of CSS classes with the following keys:
input:CSS class for the input field in the add link form.
inputInvalid:CSS class for the input field when the URL is invalid.
link:CSS class for the link in the editor content.
placeholderThe placeholder that is shown when the input field is empty.
linkTargetThe target attribute of the link.
LinkSpecify the link component that will be rendered.
LinkButtonSpecify the button component that will be rendered to add and remove links.

Simple Link Plugin Example

Try selecting a part of this text and click on the link button in the toolbar that appears …
SimpleLinkPluginEditor.js
import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';
import createInlineToolbarPlugin from '@draft-js-plugins/inline-toolbar';
import createLinkPlugin from '@draft-js-plugins/anchor';
import {
  ItalicButton,
  BoldButton,
  UnderlineButton,
} from '@draft-js-plugins/buttons';
import editorStyles from './editorStyles.module.css';

const linkPlugin = createLinkPlugin();
const inlineToolbarPlugin = createInlineToolbarPlugin();
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin, linkPlugin];
const text =
  'Try selecting a part of this text and click on the link button in the toolbar that appears …';

export default class SimpleLinkPluginEditor extends Component {
  state = {
    editorState: createEditorStateWithText(text),
  };

  onChange = (editorState) => this.setState({ editorState });

  focus = () => this.editor.focus();

  render() {
    return (
      <div className={editorStyles.editor} onClick={this.focus}>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={plugins}
          ref={(element) => {
            this.editor = element;
          }}
        />
        <InlineToolbar>
          {
            // may be use React.Fragment instead of div to improve perfomance after React 16
            (externalProps) => (
              <div>
                <BoldButton {...externalProps} />
                <ItalicButton {...externalProps} />
                <UnderlineButton {...externalProps} />
                <linkPlugin.LinkButton {...externalProps} />
              </div>
            )
          }
        </InlineToolbar>
      </div>
    );
  }
}

Custom Link Plugin Example

Try selecting a part of this text and click on the link button in the toolbar that appears …
CustomLinkPluginEditor.js
import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';
import createInlineToolbarPlugin from '@draft-js-plugins/inline-toolbar';
import createLinkPlugin from '@draft-js-plugins/anchor';
import {
  ItalicButton,
  BoldButton,
  UnderlineButton,
} from '@draft-js-plugins/buttons';
import editorStyles from './editorStyles.module.css';
import buttonStyles from './buttonStyles.module.css';
import toolbarStyles from './toolbarStyles.module.css';
import linkStyles from './linkStyles.module.css';

const linkPlugin = createLinkPlugin({
  theme: linkStyles,
  placeholder: 'http://…',
});
const inlineToolbarPlugin = createInlineToolbarPlugin({
  theme: { buttonStyles, toolbarStyles },
});
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin, linkPlugin];
const text =
  'Try selecting a part of this text and click on the link button in the toolbar that appears …';

export default class ThemedInlineToolbarEditor extends Component {
  state = {
    editorState: createEditorStateWithText(text),
  };

  onChange = (editorState) => this.setState({ editorState });

  focus = () => this.editor.focus();

  render() {
    return (
      <div className={editorStyles.editor} onClick={this.focus}>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={plugins}
          ref={(element) => {
            this.editor = element;
          }}
        />
        <InlineToolbar>
          {
            // may be use React.Fragment instead of div to improve perfomance after React 16
            (externalProps) => (
              <div>
                <BoldButton {...externalProps} />
                <ItalicButton {...externalProps} />
                <UnderlineButton {...externalProps} />
                <linkPlugin.LinkButton {...externalProps} />
              </div>
            )
          }
        </InlineToolbar>
      </div>
    );
  }
}
linkStyles.css
.input {
  height: 34px;
  width: 220px;
  padding: 0 12px;
  font-size: 15px;
  font-family: inherit;
  background-color: transparent;
  border: none;
  color: #ddd;
}

.input:focus {
  outline: none;
}

.input::placeholder {
  color: #aaa;
}

.inputInvalid {
  color: #e65757;
}

.link {
  color: #2996da;
  text-decoration: underline;
}
Edit this page on GitHub
Github