Skip to content
React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers
JavaScript CSS Shell
Branch: master
Clone or download

Latest commit

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github update issue and pr template Sep 25, 2017
.storybook Upgrade storybook (#1323) Aug 27, 2019
docs Update webpackImport.js (#1399) May 23, 2020
draft-js-alignment-plugin Add esm support (#1334) Sep 5, 2019
draft-js-anchor-plugin Add esm support (#1334) Sep 5, 2019
draft-js-buttons Add esm support (#1334) Sep 5, 2019
draft-js-counter-plugin Add esm support (#1334) Sep 5, 2019
draft-js-divider-plugin Add esm support (#1334) Sep 5, 2019
draft-js-drag-n-drop-plugin Add esm support (#1334) Sep 5, 2019
draft-js-drag-n-drop-upload-plugin Add esm support (#1334) Sep 5, 2019
draft-js-emoji-plugin Use lodash-es in esm bundle (#1335) Sep 5, 2019
draft-js-focus-plugin Add esm support (#1334) Sep 5, 2019
draft-js-hashtag-plugin fix warning (#1395) May 17, 2020
draft-js-image-plugin Add esm support (#1334) Sep 5, 2019
draft-js-inline-toolbar-plugin Add esm support (#1334) Sep 5, 2019
draft-js-linkify-plugin Add esm support (#1334) Sep 5, 2019
draft-js-mention-plugin [mention-plugin] make open state controlled (#1336) Sep 17, 2019
draft-js-plugins-editor Update index.d.ts (#1396) May 23, 2020
draft-js-plugins-utils Add esm support (#1334) Sep 5, 2019
draft-js-resizeable-plugin Add esm support (#1334) Sep 5, 2019
draft-js-side-toolbar-plugin Add esm support (#1334) Sep 5, 2019
draft-js-static-toolbar-plugin Add Static Toolbar Typing (#1408) May 23, 2020
draft-js-sticker-plugin Add esm support (#1334) Sep 5, 2019
draft-js-undo-plugin Add esm support (#1334) Sep 5, 2019
draft-js-video-plugin Add esm support (#1334) Sep 5, 2019
interfaces merge stuff Apr 25, 2018
scripts Fix linaria classnames (#1322) Aug 27, 2019
stories [mention-plugin] make open state controlled (#1336) Sep 17, 2019
.editorconfig create editorconfig according to airbnb Mar 31, 2016
.eslintignore Add some typescript typings Jul 19, 2019
.eslintrc Upgrade storybook (#1323) Aug 27, 2019
.flowconfig Upgrade storybook (#1323) Aug 27, 2019
.gitignore Upgrade storybook (#1323) Aug 27, 2019
.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 Fixed grammatical error (#1389) May 23, 2020
LICENSE initial setup Feb 25, 2016
README.md Make clear that we're looking for maintainers (#1410) May 17, 2020
babel.config.js Upgrade storybook (#1323) Aug 27, 2019
package.json Use lodash-es in esm bundle (#1335) Sep 5, 2019
publish.sh Merge pull request #1069 from simsim0709/feature-draft-js-divider-plugin May 4, 2018
rollup.config.js Use lodash-es in esm bundle (#1335) Sep 5, 2019
testHelper.js Upgrade react (#1319) Aug 27, 2019
yarn.lock Use lodash-es in esm bundle (#1335) Sep 5, 2019

README.md

Looking for maintainers

Unfortunately draft-js-plugins is currently without a maintainer. In fact - we're actively looking or maintainers. If you're interested in becoming a maintainer please go to this thread and read the instructions, we'll update this further.

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 = [
  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.

History

This project was initiated by Nik Graf but is currently going un-maintained. If you'd like to become a maintainer, please get involved by contributing, if you have any questions please feel free to [reach out in this https://github.com/draft-js-plugins/draft-js-plugins/issues/1407#issuecomment-629710454).

License

MIT

You can’t perform that action at this time.