@draft-js-plugins/undo
npm i @draft-js-plugins/undo

@draft-js-plugins/undo

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

by draft-js-plugins

4.1.2 (see all)License:MITTypeScript:Built-In
npm i @draft-js-plugins/undo
Readme

DraftJS Plugins

Draft JS Plugins Logo

High quality plugins with great UX on top of DraftJS.

Build Status

Available Plugins (incl. Docs)

Built by the community

Live Example & Documentation

Checkout the website!

Usage

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';

Documentation

@draft-js-plugins/editor

Editor

An editor component accepting plugins. see source

PropsDescriptionRequired
editorStatesee here*
onChangesee here*
pluginsan array of plugins
decoratorsan array of custom decorators
defaultKeyBindingsbool
defaultBlockRenderMapbool
all other props accepted by the DraftJS Editor except decoratorsee 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}
      />
    );
  }
}

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.

License

MIT

Downloads/wk

1.8K

GitHub Stars

4K

LAST COMMIT

2mos ago

MAINTAINERS

4

CONTRIBUTORS

219

OPEN ISSUES

5

OPEN PRs

3
VersionTagPublished
4.1.2
latest
1mo ago
No alternatives found
No tutorials found
Add a tutorial