How to use the plugins

Since npm does not support installing packages from subfolders, we need a workaround. The simplest know solution is to use gitpkg. It allows us to publish each plugin as a lightweight (containing only files needed) git tag, that can be easily installed by npm.

1. Install the gitpkg with npm:

$ npm install -g gitpkg

or with yarn:

$ yarn global add gitpkg

2. Run

$ gitpkg publish

in the directory you want to publish. You will probably need yarn to run the publish scripts.

3. If everything run smoothly, the package is now published with tag:

{name in the package.json in the current folder}-{version in package.json in the current folder}-gitpkg

and can be installed by npm:

npm install "https://stocktwits/draft-js-plugins.git#{tagname}"

or

npm install github:stocktwits/draft-js-plugins#{tagname}"

4. You can delete the tag by:

git push origin :tagname

or if you want to be certain you do not delete a branch:

git push origin :refs/tags/tagname

P.S. You can use this to publish your branches before merge, you just need to checkout to the branch before publishing. You can also customize the tag name to a degree by changing the name and version in the package.json.

DraftJS Plugins

High quality plugins with great UX on top of DraftJS.

Available Plugins (incl. Docs)

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

Built by the community

• 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

Live Example & Documentation

Checkout the website!

Usage

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';

Documentation

draft-js-plugins-editor

Editor

An editor component accepting plugins. see source

Props	Description	Required
editorState	see here	*
onChange	see here	*
plugins	an array of plugins
decorators	an array of custom decorators
defaultKeyBindings	bool
defaultBlockRenderMap	bool
all other props accepted by the DraftJS Editor except decorator	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 = [
  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}
      />
    );
  }
}

How to write a Plugin

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!

Discussion and Support

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

Development

Check out our Contribution Guide.

Learn about why Draft.js and how to use DraftJS Plugins

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

Maintainers

This project was initiated by Nik Graf and is maintained by Julian Krispel. Julian is a draft.js consultant and available for hire, you can get in touch with him on his website, react rocket

License

MIT