React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers
High quality plugins with great UX on top of DraftJS.
Checkout the website!
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';
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-plugins/hashtag';
import createLinkifyPlugin from '@draft-js-plugins/linkify';
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}
/>
);
}
}
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!
Join the channel #draft-js-plugins after signing into the DraftJS Slack organization or check out our collection of frequently asked questions here: FAQ.
Check out our Contribution Guide.
In this talk Nik Graf explained the ContentState structure of a Draft.js Editor as well as explained how to use plugins.
MIT