React Plugin Architecture for DraftJS including Slack-Like Emojis, FB-Like Mentions and Stickers
JavaScript CSS Shell
Latest commit b5cef9c Feb 26, 2017 @nikgraf nikgraf committed on GitHub Merge pull request #659 from jameskraus/master
Reopens mentions dropdown if new suggestions are available.
Permalink
Failed to load latest commit information.
docs switch to color transparent for emoji Feb 26, 2017
draft-js-alignment-plugin Move react to `peerDependencies` Dec 13, 2016
draft-js-buttons Move react to `peerDependencies` Dec 13, 2016
draft-js-counter-plugin Move react to `peerDependencies` Dec 13, 2016
draft-js-drag-n-drop-plugin Move react to `peerDependencies` Dec 13, 2016
draft-js-drag-n-drop-upload-plugin Move react to `peerDependencies` Dec 13, 2016
draft-js-emoji-plugin Merge pull request #658 from FiftyThree/emoji-suggestions-unknown-pro… Feb 26, 2017
draft-js-focus-plugin Move react to `peerDependencies` Dec 13, 2016
draft-js-hashtag-plugin Move react to `peerDependencies` Dec 13, 2016
draft-js-image-plugin Move react to `peerDependencies` Dec 13, 2016
draft-js-inline-toolbar-plugin Fix linting error Jan 4, 2017
draft-js-linkify-plugin Move react to `peerDependencies` Dec 13, 2016
draft-js-mention-plugin Merge pull request #659 from jameskraus/master Feb 26, 2017
draft-js-plugins-editor Move react to `peerDependencies` Dec 13, 2016
draft-js-resizeable-plugin Move react to `peerDependencies` Dec 13, 2016
draft-js-side-toolbar-plugin Move react to `peerDependencies` Dec 13, 2016
draft-js-sticker-plugin Move react to `peerDependencies` Dec 13, 2016
draft-js-undo-plugin Move react to `peerDependencies` Dec 13, 2016
draft-js-video-plugin minor changes Dec 9, 2016
interfaces fix linting error Sep 10, 2016
legacy Move react to `peerDependencies` Dec 13, 2016
scripts rename draft-js-dnd-file-upload-plugin to draft-js-drag-n-drop-upload… Dec 11, 2016
.babelrc add basic setup for static docs Mar 16, 2016
.editorconfig create editorconfig according to airbnb Mar 31, 2016
.eslintignore rename draft-js-dnd-file-upload-plugin to draft-js-drag-n-drop-upload… Dec 11, 2016
.eslintrc enforce arrow parrens (in prep for adding flowtype) Sep 18, 2016
.flowconfig fix linting error Sep 10, 2016
.gitignore Add *.iml to .gitignore Oct 10, 2016
.npmignore initial setup Feb 25, 2016
.travis.yml initial setup Feb 25, 2016
CHANGELOG.md bump editor version Mar 26, 2016
CODE_OF_CONDUCT.md Contributing Apr 3, 2016
CONTRIBUTING.md switch to yarn 😼 Dec 12, 2016
FAQ.md Adds a "how to" on shimming polyfills for IE11 Nov 15, 2016
HOW_TO_CREATE_A_PLUGIN.md Merge pull request #481 from Nihaux/getRefPluginMethod Oct 19, 2016
LICENSE initial setup Feb 25, 2016
README.md Add Markdown Shortcuts Plugin to community plugins Dec 11, 2016
package.json replace all plugins immutable@~3.7.4 Dec 9, 2016
testHelper.js more eslint fixes Sep 10, 2016
yarn.lock switch to yarn Dec 12, 2016

README.md

DraftJS Plugins

Draft JS Plugins Logo

High quality plugins with great UX on top of DraftJS.

Build Status

Important Note

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-beta9 --save.

Roadmap

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

Available Plugins (incl. Docs)

Built by the community

Live Example & Documentation

Checkout the website!

Usage

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-beta9 --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 = [
  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}
      />
    );
  }
}

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.

License

MIT