Skip to content

React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers

License

Notifications You must be signed in to change notification settings

csKangGdcomm/draft-js-plugins

This branch is 1600 commits behind draft-js-plugins/draft-js-plugins:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

9975f41 · Oct 2, 2018
Sep 25, 2017
May 4, 2018
Oct 2, 2018
Aug 22, 2018
Sep 23, 2018
Nov 9, 2017
May 4, 2018
Sep 23, 2018
Apr 25, 2018
Apr 25, 2018
Sep 23, 2018
Aug 17, 2018
Apr 25, 2018
Aug 22, 2018
Sep 12, 2018
Nov 9, 2017
Sep 10, 2018
Sep 23, 2018
Jul 16, 2018
Sep 5, 2018
Oct 2, 2018
Oct 2, 2018
Apr 25, 2018
Aug 7, 2018
Nov 9, 2017
Apr 25, 2018
Sep 5, 2018
Oct 2, 2018
Mar 16, 2016
Mar 31, 2016
Sep 15, 2017
May 4, 2018
Apr 25, 2018
Nov 10, 2017
Feb 25, 2016
Nov 10, 2017
Nov 10, 2017
Mar 26, 2016
Apr 3, 2016
Nov 9, 2017
Nov 10, 2017
Jul 27, 2018
Feb 25, 2016
Nov 10, 2017
Oct 2, 2018
May 4, 2018
Nov 10, 2017
Oct 2, 2018

Repository files navigation

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

About

React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 79.8%
  • HTML 11.5%
  • CSS 7.6%
  • Shell 1.1%