How to use draft-js-undo-plugin - 8 common examples

// It is important to import the Editor which accepts plugins.
import Editor from 'draft-js-plugins-editor'; // eslint-disable-line import/no-unresolved
import createUndoPlugin from 'draft-js-undo-plugin'; // eslint-disable-line import/no-unresolved
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>
    
    
    
  </div>
);

import {
  // convertToRaw,
  // convertFromRaw,
  ContentState,
  EditorState,
} from 'draft-js';
import styles from './styles.css';
import stickers from './stickers';
import mentions from './mentions';
// import initialState from './initialState';

const emojiPlugin = createEmojiPlugin();
const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();
const mentionPlugin = createMentionPlugin();
const undoPlugin = createUndoPlugin();
const stickerPlugin = createStickerPlugin({
  stickers,
});
const { MentionSuggestions } = mentionPlugin;
const { EmojiSuggestions } = emojiPlugin;
const { StickerSelect } = stickerPlugin;
const { UndoButton, RedoButton } = undoPlugin;

const plugins = [
  emojiPlugin,
  hashtagPlugin,
  stickerPlugin,
  linkifyPlugin,
  mentionPlugin,
  undoPlugin,
];

import React, { Component } from 'react'
import { EditorState } from 'draft-js'
import Editor from 'draft-js-plugins-editor'
import createUndoPlugin from 'draft-js-undo-plugin'

import 'draft-js-undo-plugin/lib/plugin.css'

/*
import styles from './Undo.css'
const undoStyles = { undo: styles.button, redo: styles.button }
*/

/* FOR CUSTOM ADD: theme: undoStyles, */
const undoPlugin = createUndoPlugin({
  undoContent: 'Undo',
  redoContent: 'Redo',
})

const { UndoButton, RedoButton } = undoPlugin
const plugins = [undoPlugin]

export default class CustomUndoEditor extends Component {

  state = {
    editorState: EditorState.createEmpty()
  }

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

BlockquoteButton,
  CodeBlockButton,
  UnorderedListButton,
  OrderedListButton,
} from 'draft-js-buttons';
import { convertFromRaw, EditorState } from 'draft-js';
import styles from './styles.css';
import stickers from './stickers';
import mentions from './mentions';
import initialState from './initialState';

const emojiPlugin = createEmojiPlugin();
const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();
const mentionPlugin = createMentionPlugin();
const undoPlugin = createUndoPlugin();
const stickerPlugin = createStickerPlugin({ stickers });
const inlineToolbarPlugin = createInlineToolbarPlugin();
const sideToolbarPlugin = createSideToolbarPlugin();
const focusPlugin = createFocusPlugin();
const blockDndPlugin = createBlockDndPlugin();
const alignmentPlugin = createAlignmentPlugin();
const decorator = composeDecorators(
  alignmentPlugin.decorator,
  focusPlugin.decorator,
  blockDndPlugin.decorator,
);
const imagePlugin = createImagePlugin({ decorator });

const { MentionSuggestions } = mentionPlugin;
const { EmojiSuggestions } = emojiPlugin;
const { StickerSelect } = stickerPlugin;

import createImagePlugin from 'draft-js-image-plugin';
import createBlockBreakoutPlugin from 'draft-js-block-breakout-plugin';
import createRichButtonsPlugin from 'draft-js-richbuttons-plugin';
import createResizeablePlugin from 'draft-js-resizeable-plugin';

import {
  InlineToolbar,
  inlineToolbarPlugin,
  SideToolbar,
  sideToolbarPlugin,
  linkPlugin,
  Counter,
  createDividerPlugin,
} from './index';

const undoPlugin = createUndoPlugin({
  undoContent: <button>undo</button>,
  redoContent: <button>redo</button>,
});
const { UndoButton, RedoButton } = undoPlugin;
const richButtonsPlugin = createRichButtonsPlugin();
const blockBreakoutPlugin = createBlockBreakoutPlugin();
const focusPlugin = createFocusPlugin();
const dividerPlugin = createDividerPlugin({ focusPlugin });
const { DividerButton } = dividerPlugin;
const resizeablePlugin = createResizeablePlugin();
const alignmentPlugin = createAlignmentPlugin();
const decorator = composeDecorators(
  alignmentPlugin.decorator,
  focusPlugin.decorator,
  resizeablePlugin.decorator
);

import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createUndoPlugin from 'draft-js-undo-plugin';
import editorStyles from './editorStyles.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 = () => {

import ImageMenu from "./ImageMenu";

import createEntityPropsPlugin from "draft-js-entity-props-plugin";
import createAutoListPlugin from "draft-js-autolist-plugin";
import createFocusPlugin from "draft-js-focus-plugin";
import createLinkifyPlugin from "draft-js-linkify-plugin";
import createImagePlugin from "draft-js-image-plugin";
import createUndoPlugin from "draft-js-undo-plugin";

import { stateToHTML } from "draft-js-export-html";

const autoListPlugin = createAutoListPlugin();
const entityPlugin = createEntityPropsPlugin();
const focusPlugin = createFocusPlugin();
const linkifyPlugin = createLinkifyPlugin();
const undoPlugin = createUndoPlugin();

const decorator = composeDecorators(focusPlugin.decorator);

const imagePlugin = createImagePlugin({ decorator });
const { UndoButton, RedoButton } = undoPlugin;
const plugins = [
  autoListPlugin,
  entityPlugin,
  focusPlugin,
  imagePlugin,
  linkifyPlugin,
  undoPlugin
];

const styles = {
  contentEditor: {

import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createUndoPlugin from 'draft-js-undo-plugin';
import editorStyles from './editorStyles.css';
import buttonStyles from './buttonStyles.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,