feat(SlateAsInputEditor): add ability to pass onUndoOrRedo handler

Signed-off-by: Diana Lease <[email protected]>

package.json

@@ -103,6 +103,7 @@
     "@accordproject/markdown-slate": "^0.9.0",
     "css-loader": "^3.2.0",
     "immutable": "^3.8.2",
+    "is-hotkey": "^0.1.6",
     "prop-types": "^15.7.2",
     "react-immutable-proptypes": "^2.1.0",
     "react-textarea-autosize": "^7.1.2",
@@ -112,4 +113,4 @@
     "slate-plain-serializer": "^0.7.10",
     "style-loader": "^0.23.1"
   }
-}
+}

src/FormattingToolbar/index.js

@@ -164,10 +164,11 @@ export default class FormatToolbar extends React.Component {
   /**
    * When a mark button is clicked, toggle undo or redo.
    */
-  onClickHistory(event, action) {
+  async onClickHistory(event, action) {
     const { editor } = this.props;
     event.preventDefault();
-    ((action === 'undo') ? editor.undo() : editor.redo());
+    ((action === 'undo') ? await editor.undo() : await editor.redo());
+    if (editor.props.editorProps.onUndoOrRedo) editor.props.editorProps.onUndoOrRedo(editor);
   }
 
   /**

src/SlateAsInputEditor/index.js

@@ -23,6 +23,8 @@ import { Editor, getEventTransfer } from 'slate-react';
 import { Value } from 'slate';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import isHotKey from 'is-hotkey';
+
 import baseSchema from '../schema';
 import PluginManager from '../PluginManager';
 import { FromHTML } from '../html/fromHTML';
@@ -333,7 +335,19 @@ const SlateAsInputEditor = React.forwardRef((props, ref) => {
   * @param {*} editor
   * @param {*} next
   */
-  const onKeyDown = (event, editor, next) => {
+  const onKeyDown = async (event, editor, next) => {
+    if (isHotKey('mod+z', event)) {
+      if (editor.props.editorProps.onUndoOrRedo) {
+        await editor.undo();
+        return editor.props.editorProps.onUndoOrRedo(editor);
+      }
+    }
+    if (isHotKey('mod+shift+z', event)) {
+      if (editor.props.editorProps.onUndoOrRedo) {
+        await editor.redo();
+        return editor.props.editorProps.onUndoOrRedo(editor);
+      }
+    }
     switch (event.key) {
       case 'Enter':
         return handleEnter(event, editor, next);