Add history example (#1331)

* add history example

* optimize history example

* optimize layout and comments

examples/history/index.js

@@ -0,0 +1,133 @@
+
+import { Value } from 'slate'
+import { Editor } from 'slate-react'
+
+import React from 'react'
+import initialValue from './value.json'
+
+/**
+ * Toolbar button component.
+ *
+ * @type {Function}
+ */
+
+const ToolbarButton = props => (
+  <span className="button" onMouseDown={props.onMouseDown}>
+    <span className="material-icons">{props.icon}</span>
+  </span>
+)
+
+/**
+ * The history example.
+ *
+ * @type {Component}
+ */
+
+class History extends React.Component {
+
+  /**
+   * Deserialize the initial editor value.
+   *
+   * @type {Object}
+   */
+
+  state = {
+    value: Value.fromJSON(initialValue)
+  }
+
+  /**
+   * On change.
+   *
+   * @param {Change} change
+   */
+
+  onChange = ({ value }) => {
+    this.setState({ value })
+  }
+
+  /**
+   * On redo in history.
+   *
+   */
+
+  onClickRedo = (event) => {
+    event.preventDefault()
+    const { value } = this.state
+    const change = value.change().redo()
+    this.onChange(change)
+  }
+
+  /**
+   * On undo in history.
+   *
+   */
+
+  onClickUndo = (event) => {
+    event.preventDefault()
+    const { value } = this.state
+    const change = value.change().undo()
+    this.onChange(change)
+  }
+
+  /**
+   * Render the editor.
+   *
+   * @return {Component} component
+   */
+
+  render() {
+    return (
+      <div className="editor">
+        {this.renderToolbar()}
+        {this.renderEditor()}
+      </div>
+    )
+  }
+
+  /**
+   * Render the toolbar.
+   *
+   * @return {Element}
+   */
+
+  renderToolbar = () => {
+    const { value } = this.state
+    return (
+      <div className="menu toolbar-menu">
+        <ToolbarButton icon="undo" onMouseDown={this.onClickUndo} />
+        <ToolbarButton icon="redo" onMouseDown={this.onClickRedo} />
+        <span className="button">
+          Undos: {value.history.undos.size}
+        </span>
+        <span className="button">
+          Redos: {value.history.redos.size}
+        </span>
+      </div>
+    )
+  }
+
+  /**
+   * Render the Slate editor.
+   *
+   * @return {Element}
+   */
+
+  renderEditor = () => {
+    return (
+      <div className="editor">
+        <Editor
+          placeholder="Enter some text..."
+          value={this.state.value}
+          onChange={this.onChange}
+        />
+      </div>
+    )
+  }
+
+}
+
+/**
+ * Export.
+ */
+
+export default History

examples/history/value.json

@@ -0,0 +1,34 @@
+{
+  "document": {
+    "nodes": [
+      {
+        "kind": "block",
+        "type": "paragraph",
+        "nodes": [
+          {
+            "kind": "text",
+            "leaves": [
+              {
+                "text": "Slate editors save all changes to an internal \"history\" automatically, so you don't need to implement undo/redo yourself. And the editor automatically binds to the browser's default undo/redo keyboard shortcuts."
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "kind": "block",
+        "type": "paragraph",
+        "nodes": [
+          {
+            "kind": "text",
+            "leaves": [
+              {
+                "text": "Try it out for yourself! Make any changes you'd like then press \"cmd+z\"."
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

examples/index.js

@@ -8,6 +8,7 @@ import CodeHighlighting from './code-highlighting'
 import Embeds from './embeds'
 import Emojis from './emojis'
 import ForcedLayout from './forced-layout'
+import History from './history'
 import HoveringMenu from './hovering-menu'
 import HugeDocument from './huge-document'
 import Images from './images'
@@ -51,6 +52,7 @@ const EXAMPLES = [
   ['Plugins', Plugins, '/plugins'],
   ['Forced Layout', ForcedLayout, '/forced-layout'],
   ['Huge Document', HugeDocument, '/huge-document'],
+  ['History', History, '/history'],
 ]
 
 /**