React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers
Clone or download
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 docs(static-toolbar): update doc and story for refactor via render prop Oct 2, 2018
draft-js-alignment-plugin updating change log on draft-js-alignment-plugin Aug 22, 2018
draft-js-anchor-plugin Add all plugins to workspaces Sep 23, 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 Add all plugins to workspaces Sep 23, 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 Add all plugins to workspaces Sep 23, 2018
draft-js-focus-plugin Bump version 2.1.0 -> 2.2.0 in focus plugin, add to xchangelog Aug 17, 2018
draft-js-hashtag-plugin bumped find-with-regex again Apr 25, 2018
draft-js-image-plugin Bump version and update CHANGELOG.md Aug 22, 2018
draft-js-inline-toolbar-plugin docs(inline-toolbar): update stories Sep 12, 2018
draft-js-linkify-plugin update to 2.0.0 Nov 9, 2017
draft-js-mention-plugin use break statement to stop the loop Sep 10, 2018
draft-js-plugins-editor Add all plugins to workspaces Sep 23, 2018
draft-js-plugins-utils update changelog and bump version Jul 16, 2018
draft-js-resizeable-plugin fix creator method, bump version Sep 5, 2018
draft-js-side-toolbar-plugin Merge branch 'master' of github.com:draft-js-plugins/draft-js-plugins Oct 2, 2018
draft-js-static-toolbar-plugin refactor(static-toolbar): refactor static-toolbar via render prop Oct 2, 2018
draft-js-sticker-plugin bumped find-with-regex again Apr 25, 2018
draft-js-undo-plugin chore(draft-js-undo-plugin): fix lint errors and bump version Aug 7, 2018
draft-js-video-plugin update to 2.0.0 Nov 9, 2017
interfaces merge stuff Apr 25, 2018
scripts update publish github pages script Sep 5, 2018
stories docs(static-toolbar): update doc and story for refactor via render prop Oct 2, 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 gitignore is back wtf Aug 27, 2018
.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 add draft-js-buttons to dev deps Oct 2, 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 add draft-js-buttons to dev deps Oct 2, 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