Draft JS Plugins Logo

High quality plugins with great UX on top of DraftJS.

Build Status

We are currently preparing for a 2.0 release. The master branch contains these features. All the packages are already published with a beta tag. Install it via $ npm install <plugin>@2.0.0-rc2 --save.

In case you are interested in helping Issue #329 contains a roadmap of what's coming in 2.0 and beyond.

• Emoji
• Stickers
• Hashtags
• Linkify
• Mentions
• Counter
• Undo
• 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

Checkout the website!

First, install the editor with npm:

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

To try out the beta version of 2.0.0 run

$ npm install draft-js-plugins-editor@2.0.0-rc2 --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-hashtag-plugin';
import createLinkifyPlugin from 'draft-js-linkify-plugin';
import { EditorState } from 'draft-js';
const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();
const plugins = [
 hashtagPlugin,
 linkifyPlugin,
];
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