Skip to content

coderberry/draft-js-plugins

 
 

Repository files navigation

DraftJS Plugins

High quality plugins with great UX on to of DraftJS.

Available Plugins

  • Stickers
  • Hashtags
  • Linkify
  • Mentions

Build Status

Live Example

Checkout the website!

Usage

First, install the editor with npm:

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

and then import it somewhere in your code and you're ready to go!

import Editor from 'draft-js-plugin-editor';

Documentation

draft-js-plugin-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-plugin-editor';
import hashtagPlugin from 'draft-js-hashtag-plugin';
import linkifyPlugin from 'draft-js-linkify-plugin';
import { EditorState } from 'draft-js';

const hashtagPluginInstance = hashtagPlugin();
const linkifyPluginInstance = linkifyPlugin();

const plugins = [
  hashtagPluginInstance,
  linkifyPluginInstance,
];

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}
        spellCheck
        readOnly={ this.state.readOnly }
        ref="editor"
      />
    );
  }
}

createWithText

Function to creates an EditorState with some text.

Usage:

import { createWithText } from 'draft-js-plugin-editor';

const editorState = createWithText('Hello World!', plugins);

Plugins

  • draft-js-sticker-plugin
  • draft-js-hastag-plugin
  • draft-js-linkify-plugin

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!

You can also join the development team at #plugin-editor channel in the draftJS Slack. Sign up here: https://draftjs.herokuapp.com/.

More documentation is coming soon…

Development

npm install
cd site
npm install
npm start

License

MIT

About

React Plugin Architecture for DraftJS 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 94.4%
  • CSS 4.4%
  • Shell 1.2%