Re-add keyboard shortcuts

Implements "Keyboard shortcuts" part of #33

Author: zastrowm

v3/package.json

@@ -11,6 +11,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "hotkeys-js": "^3.8.1",
     "mobx": "^5.15.4",
     "mobx-react": "^6.2.2",
     "react": "^16.13.1",

v3/src/views/EditorApp.tsx

@@ -1,21 +1,44 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import './App.css';
-import { DesignCanvas } from "./DesignCanvas";
-import { observer } from "mobx-react"
-import { EditorAppViewModel } from "../viewmodels/EditorAppViewModel";
-import { PropertiesPanel } from "./PropertiesPanel";
+import { DesignCanvas } from './DesignCanvas';
+import { observer } from 'mobx-react';
+import { EditorAppViewModel } from '../viewmodels/EditorAppViewModel';
+import { PropertiesPanel } from './PropertiesPanel';
+import hotkeys from 'hotkeys-js';
 
 let editorVm = new EditorAppViewModel();
 
 let EditorApp = observer(function EditorApp() {
+  useEffect(() => {
+    const scopeName = 'app';
+
+    const add = function (shortcut: string, callback: () => void) {
+      hotkeys(shortcut, scopeName, (evt) => {
+        callback();
+        evt.preventDefault();
+      });
+    };
+
+    add('ctrl+z', () => editorVm.undo());
+    add('ctrl+y', () => editorVm.redo());
+    add('delete', () => editorVm.removeSelected());
+    add('ctrl+n', () => editorVm.clearLayout());
+
+    hotkeys.setScope(scopeName);
+
+    return () => hotkeys.deleteScope(scopeName);
+  }, []);
+
   return (
     <div className="design-app">
       <header>
         <h1>Web App Builder</h1>
         {/* Render each control as a button that inserts it */}
-        { editorVm.controls.descriptors.map(d =>
-          <button key={d.id} onClick={() => editorVm.addControl(d)}>Add {d.displayName}</button>
-        ) }
+        {editorVm.controls.descriptors.map((d) => (
+          <button key={d.id} onClick={() => editorVm.addControl(d)}>
+            Add {d.displayName}
+          </button>
+        ))}
         <button onClick={() => editorVm.removeSelected()}>Delete</button>
         <button onClick={() => editorVm.undo()}>Undo</button>
         <button onClick={() => editorVm.redo()}>Redo</button>
@@ -33,6 +56,6 @@ let EditorApp = observer(function EditorApp() {
       </aside>
     </div>
   );
-})
+});
 
 export default EditorApp;