paullecam / draft-js-plugins

React Plugin Architecture for DraftJS including Slack-Like Emojis, FB-Like Mentions and Stickers

DraftJS Plugins

High quality plugins with great UX on top of DraftJS.

Available Plugins

• Emoji
• Stickers
• Hashtags
• Linkify
• Mentions
• Counter
• Undo
• or build your own … :)

Live Example & Documentation

Checkout the website!

Usage

First, install the editor with npm:

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

and then import it somewhere in your code and you're ready to go!

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

Documentation

draft-js-plugins-editor

Editor

An editor component accepting plugins.

Props	Description	Required
editorState	see here	*
onChange	see here	*
plugins	an array of plugins
all other props accepted by the DraftJS Editor	see here

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}
        ref="editor"
      />
    );
  }
}

How to write a Plugin

Feel free to copy any of the existing plugins as a starting point. Feel free to directly contact @nikgraf in case you need help or open a Github Issue!

More documentation is coming soon…

Discussion and Support

Join the channel #draft-js-plugins after signing into the DraftJS Slack organization!

Development

Check out our Contribution Guide.

License

MIT