Undo Redo error - not working in draft-js-plugins-editor version 2.0.0-beta5

I am working off the rich-editor example in draft-js. I incorporated the code as suggested by Simple Undo Example. But undo and redo don’t work.

My package json look likes this:

{
  "name": "draft",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "draft-js": "^0.9.1",
    "draft-js-plugins-editor": "^2.0.0-beta5",
    "draft-js-undo-plugin": "^2.0.0-beta5",
    "meteor-node-stubs": "~0.2.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-router": "^3.0.0"
  }
}

And my code is here: Please note that when I remove the this.focus method from program, undo/redo works. But removing this.focus brings its own set of “focus” issues.

import React from 'react';
import ReactDOM from 'react-dom';
import Editor from 'draft-js-plugins-editor';
import {EditorState, RichUtils,convertFromRaw, convertToRaw } from 'draft-js';
import createUndoPlugin from 'draft-js-undo-plugin';


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

class Markdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};

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

    this.onChange = (editorState) => this.setState({editorState});
    this.handleKeyCommand = (command) => this._handleKeyCommand(command);
    this.onTab = (e) => this._onTab(e);
    this.toggleBlockType = (type) => this._toggleBlockType(type);
    this.toggleInlineStyle = (style) => this._toggleInlineStyle(style);
  }

  _handleKeyCommand(command) {
    const {editorState} = this.state;
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      this.onChange(newState);
      return true;
    }
    return false;
  }

  _onTab(e) {
    const maxDepth = 4;
    this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth));
  }

  _toggleBlockType(blockType) {
    this.onChange(
      RichUtils.toggleBlockType(
        this.state.editorState,
        blockType
      )
    );
  }

  _toggleInlineStyle(inlineStyle) {
    this.onChange(
      RichUtils.toggleInlineStyle(
        this.state.editorState,
        inlineStyle
      )
    );
  }

  render() {
    const {editorState} = this.state
    const {readOnly} = this.props

    // If the user changes block type before entering any text, we can
    // either style the placeholder or hide it. Let's just hide it now.
    let className = 'Editor-editor';
    var contentState = editorState.getCurrentContent();
    if (!contentState.hasText()) {
      if (contentState.getBlockMap().first().getType() !== 'unstyled') {
        className += ' editor-hidePlaceholder';
      }
    }

    return (
      <div className="editor-root">
      <BlockStyleControls editorState={editorState} onToggle={this.toggleBlockType}/>
      <InlineStyleControls editorState={editorState} onToggle={this.toggleInlineStyle}/>

        <div className={className} style={this.props.editorRootStyle} onClick={this.focus}>

          <Editor
            blockStyleFn={getBlockStyle}
            customStyleMap={styleMap}
            editorState={editorState}
            handleKeyCommand={this.handleKeyCommand}
            onChange={this.onChange}
            onTab={this.onTab}
            placeholder="Tell a story..."
            spellCheck={true}
            plugins={plugins}
            ref={(element) => { this.editor = element; }}

          />
          {/* ref="editor" */}
          <div style={{margin:'20px'}}>
          <UndoButton className="Undo_button"/>
          <RedoButton className="Undo_button"/>
          </div>
        </div>
      </div>
    );
  }
}

Markdown.defaultProps = {
  editorRootStyle: {borderTop: '1px solid #ddd',height:'500px',overflowY: 'auto'},
}

// Custom overrides for "code" style.
const styleMap = {
  CODE: {
    backgroundColor: 'rgba(0, 0, 0, 0.05)',
    fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
    fontSize: 16,
    padding: 2,
  },
};

function getBlockStyle(block) {
  switch (block.getType()) {
    case 'blockquote': return 'editor-blockquote';
    default: return null;
  }
}

class StyleButton extends React.Component {
  constructor() {
    super();
    this.onToggle = (e) => {
      e.preventDefault();
      this.props.onToggle(this.props.style);
    };
  }

  render() {
    let className = 'editor-styleButton';
    if (this.props.active) {
      className += ' editor-activeButton';
    }

    return (
      <span className={className} onMouseDown={this.onToggle}>
        {this.props.label}
      </span>
    );
  }
}

const BLOCK_TYPES = [
  {label: 'H1', style: 'header-one'},
  {label: 'H2', style: 'header-two'},
  {label: 'H3', style: 'header-three'},
  {label: 'H4', style: 'header-four'},
  {label: 'H5', style: 'header-five'},
  {label: 'H6', style: 'header-six'},
  {label: 'Blockquote', style: 'blockquote'},
  {label: 'UL', style: 'unordered-list-item'},
  {label: 'OL', style: 'ordered-list-item'},
  {label: 'Code Block', style: 'code-block'},
];


const BlockStyleControls = (props) => {
  const {editorState} = props;
  const selection = editorState.getSelection();
  const blockType = editorState
    .getCurrentContent()
    .getBlockForKey(selection.getStartKey())
    .getType();

  return (
    <div className="editor-controls">
      {BLOCK_TYPES.map((type) =>
        <StyleButton
          key={type.label}
          active={type.style === blockType}
          label={type.label}
          onToggle={props.onToggle}
          style={type.style}
        />
      )}
    </div>
  );
};

var INLINE_STYLES = [
  {label: 'Bold', style: 'BOLD'},
  {label: 'Italic', style: 'ITALIC'},
  {label: 'Underline', style: 'UNDERLINE'},
  {label: 'Monospace', style: 'CODE'},
];

const InlineStyleControls = (props) => {
  var currentStyle = props.editorState.getCurrentInlineStyle();
  return (
    <div className="editor-controls">
      {INLINE_STYLES.map(type =>
        <StyleButton
          key={type.label}
          active={currentStyle.has(type.style)}
          label={type.label}
          onToggle={props.onToggle}
          style={type.style}
        />
      )}
    </div>
  );
};


Meteor.startup(
  () => { ReactDOM.render(<Markdown />,document.getElementById('App'))}
);

[rnarayan]

Beta 5 was the latest when I was trying this code. I will retry it with the latest and post the results here. Thanks for the wonderful plug-in by the way.

[juliankrispel]

Closing this issue as part of a clean out. If you think this should remain open please let me know. Cheers