High quality plugins with great UX on top of DraftJS.

Fork foi criado para ajustar alguns pontos no draft-js-resizeable-plugin:

• remover a limitação do tamanho maximo baseado no tamanho do editor (nosso editor possui scroll, então não tem problema a imagem ser maior que o editor)
• remove o tamanho default de 40px quando o tamanho não é setado na entity (assim, ele pega o tamanho todo da imagem, ao invés dos 40px/40% que hoje é atribuido por padrão). Para adicionar essa versão do plugin: yarn add git://github.com/exactsales/draft-js-plugins.git#draft-js-resizeable-plugin@v<VERSÃO DO PLUGIN>

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

• 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

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

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}
      />
    );
  }
}

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.

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

MIT