draft-js-plugins/draft-js-plugins

Name: draft-js-plugins

Owner: draft-js-plugins

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

Created: 2016-02-26 09:54:56.0

Updated: 2018-01-18 23:36:41.0

Pushed: 2018-01-14 12:36:55.0

Homepage: https://www.draft-js-plugins.com/

Size: 7064

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

DraftJS Plugins

High quality plugins with great UX on top of DraftJS.

Available Plugins (incl. Docs)

• Alignment
• Counter
• Drag and Drop
• Emoji
• Focus
• Hashtag
• Image
• Inline Toolbar
• Linkify
• Mention
• Resizeable
• Side Toolbar
• Sticker
• Undo
• Video
• or build your own ? :)

Built by the community

• Autolist by Max Wheeler/Icelab
• Block Breakout by Max Wheeler/Icelab
• Markdown Shortcuts by Atsushi Nagase
• Single Line by Max Wheeler/Icelab
• RichButtons by jasonphillips
• Katex by letranloc
• Mathjax by efloti
• Buttons by StevenIseki
• Color Picker by StevenIseki
• Embed by StevenIseki
• EmojiPicker by StevenIseki
• GifPicker by StevenIseki
• Link by StevenIseki
• Modal by StevenIseki
• Sidebar by StevenIseki
• Toolbar by StevenIseki
• Divider by simsim0709
• Code Editor by Max Stroiber/Spectrum

Live Example & Documentation

Checkout the website!

Usage

First, install the editor with npm:

m install draft-js-plugins-editor --save

Then import the editor somewhere in your code and you're ready to go!

rt 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:

rt React, { Component } from 'react';
rt Editor from 'draft-js-plugins-editor';
rt createHashtagPlugin from 'draft-js-hashtag-plugin';
rt createLinkifyPlugin from 'draft-js-linkify-plugin';
rt { EditorState } from 'draft-js';

t hashtagPlugin = createHashtagPlugin();
t linkifyPlugin = createLinkifyPlugin();

t plugins = [
shtagPlugin,
nkifyPlugin,


rt default class UnicornEditor extends Component {

ate = {
editorState: EditorState.createEmpty(),


Change = (editorState) => {
this.setState({
  editorState,
});


nder() {
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