Skip to content

draft-js-plugins/draft-js-plugins-v1

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DraftJS Plugins

Draft JS Plugins Logo

High quality plugins with great UX on top of DraftJS.

Build Status

Important Note

We currently prepare for a 2.0 beta. The master branch already contains unpublished features & plugins.

Available Plugins

Built by the community

Live Example & Documentation

Checkout the website!

Usage

First, install the editor with npm:

$ npm install draft-js-plugins-editor --save

and then import it 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.

Props Description Required
editorState see here *
onChange see here *
plugins an array of plugins
all other props accepted by the DraftJS Editor 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}
        ref="editor"
      />
    );
  }
}

How to write a Plugin

Feel free to copy any of the existing plugins as a starting point. Feel free to directly contact @nikgraf in case you need help or open a Github Issue!

More documentation is coming soon…

Discussion and Support

Join the channel #draft-js-plugins after signing into the DraftJS Slack organization or check out or collection of frequently asked questions here: FAQ.

Development

Check out our Contribution Guide.

License

MIT