Deprecated: This project is no longer maintained. The underlying Draft.js editor was archived by Facebook in 2023 and is no longer receiving updates. This repository is archived and no further bug fixes or features will be released.

High quality plugins with great UX on top of DraftJS.

• Anchor
• Alignment
• Counter
• Drag and Drop
• Divider
• Emoji
• Focus
• Hashtag
• Image
• Inline Toolbar
• Linkify
• Mention
• Resizeable
• Side Toolbar
• Static Toolbar
• Sticker
• Text Alignment
• Undo
• Video
• or build your own … :)

• Autolist by Max Wheeler/Icelab
• Block Breakout by Max Wheeler/Icelab
• Markdown Shortcuts by Atsushi Nagase
• Single Line by Max Wheeler/Icelab
• RichButtons by jasonphillips
• Katex by letranloc
• Mathjax by efloti
• Buttons by StevenIseki
• Color Picker by StevenIseki
• Embed by StevenIseki
• EmojiPicker by StevenIseki
• GifPicker by StevenIseki
• Link by StevenIseki
• Modal by StevenIseki
• Sidebar by StevenIseki
• Toolbar by StevenIseki
• Divider by simsim0709
• Code Editor by Max Stroiber/Spectrum

Checkout the website!

First, install the editor with npm:

$ npm install @draft-js-plugins/editor --save

Then import the editor somewhere in your code and you're ready to go!

import Editor from '@draft-js-plugins/editor';

An editor component accepting plugins. see source

Usage:

import React, { Component } from 'react';
import Editor from '@draft-js-plugins/editor';
import createHashtagPlugin from '@draft-js-plugins/hashtag';
import createLinkifyPlugin from '@draft-js-plugins/linkify';
import { EditorState } from 'draft-js';

const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();

const plugins = [linkifyPlugin, hashtagPlugin];

export default class UnicornEditor extends Component {
  state = {
    editorState: EditorState.createEmpty(),
  };

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

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

Feel free to copy any of the existing plugins as a starting point.In this repository you can also find a Guide on how to create a plugin, including a description of the supported features. In addition you can contact @nikgraf directly in case you need help or simply open a Github Issue!

Join the channel #draft-js-plugins after signing into the DraftJS Slack organization or check out our collection of frequently asked questions here: FAQ.

Check out our Contribution Guide.

In this talk Nik Graf explained the ContentState structure of a Draft.js Editor as well as explained how to use plugins.

MIT