The documentation currently represents the 4.0.0 release.
For troubleshooting please checkout theFAQ

Undo/Redo

Supported Environment

  • Desktop: Yes
  • Mobile: Yes
  • Screen-reader: Yes

Getting Started

npm install @draft-js-plugins/editor
npm install @draft-js-plugins/undo
gettingStarted.js
// It is important to import the Editor which accepts plugins.
import Editor from '@draft-js-plugins/editor';
import createUndoPlugin from '@draft-js-plugins/undo';
import React from 'react';

// Creates an Instance. At this step, a configuration object can be passed in
// as an argument.
const undoPlugin = createUndoPlugin();
const { UndoButton, RedoButton } = undoPlugin;

// The Editor accepts an array of plugins. In this case, only the undoPlugin
// is passed in, although it is possible to pass in multiple plugins.
const MyEditor = ({ editorState, onChange }) => (
  <div>
    <Editor
      editorState={editorState}
      onChange={onChange}
      plugins={[undoPlugin]}
    />
    <UndoButton />
    <RedoButton />
  </div>
);

export default MyEditor;

Importing the default styles

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

Webpack Usage

  • 1. Install Webpack loaders:  npm i style-loader css-loader --save-dev
  • 2. Add the below section to Webpack config (if your config already has a loaders array, simply add the below loader object to your existing list.
    module.exports = {
  module: {
    loaders: [
      {
        test: /plugin\.css$/,
        loaders: ['style-loader', 'css'],
      },
    ],
  },
};
  • 3. Add the below import line to your component to tell Webpack to inject the style to your component.
    import '@draft-js-plugins/undo/lib/plugin.css';
  • 4. Restart Webpack.

Configuration Parameters

themeObject of CSS classes with the following keys.
undo: CSS class to be applied to undo button.
redo: CSS class to be applied to redo button.
undoContentContent of undo button. (Default content is ↺)
redoContentContent of redo button. (Default content is ↻)

Simple Example


SimpleUndoEditor.js
import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import Editor from '@draft-js-plugins/editor';
import createUndoPlugin from '@draft-js-plugins/undo';
import editorStyles from './editorStyles.module.css';

const undoPlugin = createUndoPlugin();
const { UndoButton, RedoButton } = undoPlugin;
const plugins = [undoPlugin];

export default class SimpleUndoEditor extends Component {
  state = {
    editorState: EditorState.createEmpty(),
  };

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

  focus = () => {
    this.editor.focus();
  };

  render() {
    return (
      <div>
        <div className={editorStyles.editor} onClick={this.focus}>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={plugins}
            ref={(element) => {
              this.editor = element;
            }}
          />
        </div>
        <div className={editorStyles.options}>
          <UndoButton />
          <RedoButton />
        </div>
      </div>
    );
  }
}
editorStyles.css
.editor {
  box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: text;
  padding: 16px;
  border-radius: 2px;
  margin-bottom: 2em;
  box-shadow: inset 0px 1px 8px -3px #ABABAB;
  background: #fefefe;
}

.editor :global(.public-DraftEditor-content) {
  min-height: 140px;
}

.options {
  margin-bottom: 20px;
}

Themed Undo/Redo Example


CustomUndoEditor.js
import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import Editor from '@draft-js-plugins/editor';
import createUndoPlugin from '@draft-js-plugins/undo';
import editorStyles from './editorStyles.module.css';
import buttonStyles from './buttonStyles.module.css';

const theme = {
  undo: buttonStyles.button,
  redo: buttonStyles.button,
};
const undoPlugin = createUndoPlugin({
  undoContent: 'Undo',
  redoContent: 'Redo',
  theme,
});
const { UndoButton, RedoButton } = undoPlugin;
const plugins = [undoPlugin];

export default class CustomUndoEditor extends Component {
  state = {
    editorState: EditorState.createEmpty(),
  };

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

  focus = () => {
    this.editor.focus();
  };

  render() {
    return (
      <div>
        <div className={editorStyles.editor} onClick={this.focus}>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={plugins}
            ref={(element) => {
              this.editor = element;
            }}
          />
        </div>
        <div className={editorStyles.options}>
          <UndoButton />
          <RedoButton />
        </div>
      </div>
    );
  }
}
buttonStyles.css
.button {
  border: 1px solid #bbb;
  height: 40px;
  color: #888;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  background-color: #fff;
  margin-right: 10px;
}

.button:focus {
  background-color: #eee;
  color: #999;
  outline: 0; /* reset for :focus */
}

.button:hover {
  background-color: #eee;
  color: #999;
}

.button:active {
  background-color: #ddd;
  color: #777;
}

.button:disabled {
  background-color: #F5F5F5;
  color: #ccc;
}
editorStyles.css
.editor {
  box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: text;
  padding: 16px;
  border-radius: 2px;
  margin-bottom: 2em;
  box-shadow: inset 0px 1px 8px -3px #ABABAB;
  background: #fefefe;
}

.editor :global(.public-DraftEditor-content) {
  min-height: 140px;
}

.options {
  margin-bottom: 20px;
}
Edit this page on GitHub
Github