React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers
JavaScript CSS Shell
Clone or download
juliankrispel Merge pull request #1155 from nakawankuma/patch-1
[doc] wrong style file in focus's document
Latest commit 2038377 Aug 7, 2018
Permalink
Failed to load latest commit information.
.github update issue and pr template Sep 25, 2017
.storybook Merge pull request #1069 from simsim0709/feature-draft-js-divider-plugin May 4, 2018
docs image plugin is incorrect Jul 26, 2018
draft-js-alignment-plugin bumped find-with-regex again Apr 25, 2018
draft-js-anchor-plugin merge stuff Apr 25, 2018
draft-js-buttons update to 2.0.0 Nov 9, 2017
draft-js-counter-plugin adjust version for divider plugin, add CHANGELOG for divider plugin May 4, 2018
draft-js-divider-plugin adjust version for divider plugin, add CHANGELOG for divider plugin May 4, 2018
draft-js-drag-n-drop-plugin bumped find-with-regex again Apr 25, 2018
draft-js-drag-n-drop-upload-plugin bumped find-with-regex again Apr 25, 2018
draft-js-emoji-plugin bump emoji and mention version Apr 26, 2018
draft-js-focus-plugin fix lint errors Jun 11, 2018
draft-js-hashtag-plugin bumped find-with-regex again Apr 25, 2018
draft-js-image-plugin bumped find-with-regex again Apr 25, 2018
draft-js-inline-toolbar-plugin gitignore updates Apr 25, 2018
draft-js-linkify-plugin update to 2.0.0 Nov 9, 2017
draft-js-mention-plugin bump emoji and mention version Apr 26, 2018
draft-js-plugins-editor fix specs Jun 11, 2018
draft-js-plugins-utils fix build script Apr 25, 2018
draft-js-resizeable-plugin bumped find-with-regex again Apr 25, 2018
draft-js-side-toolbar-plugin bumped find-with-regex again Apr 25, 2018
draft-js-static-toolbar-plugin gitignore updates Apr 25, 2018
draft-js-sticker-plugin bumped find-with-regex again Apr 25, 2018
draft-js-undo-plugin update to 2.0.0 Nov 9, 2017
draft-js-video-plugin update to 2.0.0 Nov 9, 2017
interfaces merge stuff Apr 25, 2018
scripts Merge pull request #1069 from simsim0709/feature-draft-js-divider-plugin May 4, 2018
stories Merge pull request #1069 from simsim0709/feature-draft-js-divider-plugin May 4, 2018
.babelrc add basic setup for static docs Mar 16, 2016
.editorconfig create editorconfig according to airbnb Mar 31, 2016
.eslintignore update config Sep 15, 2017
.eslintrc Merge pull request #1069 from simsim0709/feature-draft-js-divider-plugin May 4, 2018
.flowconfig upgrade flow Apr 25, 2018
.gitignore ignore package-lock files Nov 10, 2017
.npmignore initial setup Feb 25, 2016
.nvmrc update version Nov 10, 2017
.travis.yml update version Nov 10, 2017
CHANGELOG.md bump editor version Mar 26, 2016
CODE_OF_CONDUCT.md Contributing Apr 3, 2016
CONTRIBUTING.md update to 2.0.0 Nov 9, 2017
FAQ.md remove points from faq that don't apply anymore Nov 10, 2017
HOW_TO_CREATE_A_PLUGIN.md Update HOW_TO_CREATE_A_PLUGIN.md Jul 27, 2018
LICENSE initial setup Feb 25, 2016
README.md Merge branch 'master' of github.com:draft-js-plugins/draft-js-plugins Nov 10, 2017
package.json bumped find-with-regex again Apr 25, 2018
publish.sh Merge pull request #1069 from simsim0709/feature-draft-js-divider-plugin May 4, 2018
testHelper.js update version Nov 10, 2017
yarn.lock update yarn.lock Jun 11, 2018

README.md

DraftJS Plugins

Draft JS Plugins Logo

High quality plugins with great UX on top of DraftJS.

Build Status

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

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.

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