draft-js-plugins · juliankrispel · Nov 28, 2018 · Nov 1, 2018 · Nov 3, 2018 · Nov 8, 2018
diff --git a/examples/undo-example/README.md b/examples/undo-example/README.md
diff --git a/examples/undo-example/package-lock.json b/examples/undo-example/package-lock.json
diff --git a/examples/undo-example/package.json b/examples/undo-example/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@djsp/undo-example",
+  "homepage": "https://github.com/draft-js-plugins/next#readme",
+  "version": "0.1.5",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "@djsp/core": "^0.1.5",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-scripts": "^1.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "draft-js": "^0.10.5"
+  }
+}
diff --git a/examples/undo-example/public/index.html b/examples/undo-example/public/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+
+    <title>@djsp/suggestions</title>
+  </head>
+
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/undo-example/src/Undo/components/Redo.js b/examples/undo-example/src/Undo/components/Redo.js
@@ -0,0 +1,32 @@
+// @flow
+
+import React, { Component } from 'react'
+import { EditorState } from 'draft-js'
+
+type Props = {
+  editorState: EditorState,
+  setEditorState: EditorState => void,
+}
+
+class Redo extends Component<Props> {
+  onClick = event => {
+    event.stopPropagation()
+    this.props.setEditorState(EditorState.redo(this.props.editorState))
+  }
+
+  render() {
+    return (
+      <button
+        disabled={
+          !this.props.editorState ||
+          this.props.editorState.getRedoStack().isEmpty()
+        }
+        type="button"
+        onClick={this.onClick}>
+        redo
+      </button>
+    )
+  }
+}
+
+export default Redo
diff --git a/examples/undo-example/src/Undo/components/Undo.js b/examples/undo-example/src/Undo/components/Undo.js
@@ -0,0 +1,32 @@
+// @flow
+
+import React, { Component } from 'react'
+import { EditorState } from 'draft-js'
+
+type Props = {
+  editorState: EditorState,
+  setEditorState: EditorState => void,
+}
+
+class Undo extends Component<Props> {
+  onClick = event => {
+    event.stopPropagation()
+    this.props.setEditorState(EditorState.undo(this.props.editorState))
+  }
+
+  render() {
+    return (
+      <button
+        disabled={
+          !this.props.editorState ||
+          this.props.editorState.getUndoStack().isEmpty()
+        }
+        type="button"
+        onClick={this.onClick}>
+        undo
+      </button>
+    )
+  }
+}
+
+export default Undo
diff --git a/examples/undo-example/src/Undo/index.js b/examples/undo-example/src/Undo/index.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Plugin } from '@djsp/core'
+import Redo from './components/Redo'
+import Undo from './components/Undo'
+
+const RedoButton = () => (
+  <Plugin>
+    {({ editorState, setEditorState }) => (
+      <Redo editorState={editorState} setEditorState={setEditorState} />
+    )}
+  </Plugin>
+)
+
+const UndoButton = () => (
+  <Plugin>
+    {({ editorState, setEditorState }) => (
+      <Undo editorState={editorState} setEditorState={setEditorState} />
+    )}
+  </Plugin>
+)
+
+export { RedoButton, UndoButton }
diff --git a/examples/undo-example/src/index.js b/examples/undo-example/src/index.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+
+import { EditorState, ContentState } from 'draft-js'
+import { EditorContainer, Editor } from '@djsp/core'
+import { RedoButton, UndoButton } from './Undo'
+import './styles.css'
+
+class App extends Component {
+  state = {
+    editorState: EditorState.createWithContent(
+      ContentState.createFromText(
+        'Just type something and click the undo and redo button!'
+      )
+    ),
+  }
+
+  onChange = editorState => this.setState({ editorState })
+
+  render() {
+    return (
+      <div>
+        <EditorContainer
+          editorState={this.state.editorState}
+          onChange={this.onChange}>
+          <RedoButton />
+          <UndoButton />
+          <Editor />
+        </EditorContainer>
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/examples/undo-example/src/styles.css b/examples/undo-example/src/styles.css
@@ -0,0 +1,14 @@
+body {
+  font-family: sans-serif;
+  font-size: 1.8em;
+  padding: 1em;
+  background: #12312e;
+}
+
+.public-DraftEditor-content {
+  padding: 2em;
+  border-radius: 5px;
+  color: #fff;
+  border: #555;
+  background: #244a46;
+}