Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

draft-js-undo-plugin-ex

Undo Plugin for DraftJS

editor, wysiwyg, draft, react, ux, components, widget, react-component

readme

DraftJS Undo Plugin

This is a plugin for the draft-js-plugins-editor.

This plugin adds undo/redo functionality to your editor!

Usage

First instantiate the plugin:

import createUndoPlugin from 'draft-js-undo-plugin';

const undoPlugin = createUndoPlugin();

Now get the UndoButton and the RedoButton components from the instance:

const { UndoButton, RedoButton } = undoPlugin;

Which take two props, onChange (a function that takes a new editor state as an argument and updates your editor's state) and editorState (the current editor state). Render them with those props and your editor now has undo/redo functionality!

<UndoButton onChange={ this.onChange } editorState={ this.state.editorState } />
<RedoButton onChange={ this.onChange } editorState={ this.state.editorState } />

Importing the default styles

The plugin ships with a default styling available at this location in the installed package: node_modules/draft-js-undo-plugin/lib/plugin.css.

Webpack Usage

Follow the steps below to import the css file by using Webpack's style-loader and css-loader.

  1. Install Webpack loaders: npm install style-loader css-loader --save-dev
  2. Add the below section to Webpack config (if your Webpack already has loaders array, simply add the below loader object({test:foo, loaders:bar[]}) as an item in the array).

     module: {
       loaders: [{
         test: /\.css$/,
         loaders: [
           'style', 'css'
         ]
       }]
     }
  3. Add the below import line to your component to tell Webpack to inject style to your component.

     import 'draft-js-undo-plugin/lib/plugin.css';
  4. Restart Webpack.

Browserify Usage

TODO: PR welcome

changelog

Change Log

All notable changes to this project will be documented in this file. This project adheres to Semantic Versioning.

To Be Released

1.0.0 - 2016-04-20

Changed

  • Moved the option theme from an Immutable Map to a JavaScript object. This is more likely to become a standard.
  • Instead of passing in the editorState and the onChange function is not necessary anymore. This is now handled by the plugin itself via a shared reference passed to the components.

0.0.5 - 2016-03-25

Released the first working version of DraftJS Undo Plugin

It's not recommended to use the version 0.0.0 - 0.0.4