Merge branch 'support/hotkeys' into imprv/gw3081

# Conflicts:
#	src/client/js/components/Hotkeys/Hotkeys.jsx
#	src/client/js/components/HotkeysDetector/HotkeysDetector.jsx

src/client/js/components/Hotkeys/Hotkeys.jsx

@@ -3,6 +3,7 @@ import HotkeysDetector from '../HotkeysDetector/HotkeysDetector';
 import StaffCredit from '../StaffCredit/StaffCredit';
 import MirrorMode from '../MirrorMode/MirrorMode';
 import ShowHotkeys from '../PageHotkeys/ShowHotkeys';
+import PageCreate from '../PageHotkeys/PageCreate';
 import PageEdit from '../PageHotkeys/PageEdit';
 
 export default class Hotkeys extends React.Component {
@@ -16,6 +17,7 @@ export default class Hotkeys extends React.Component {
       StaffCredit,
       MirrorMode,
       ShowHotkeys,
+      PageCreate,
       PageEdit,
     ];
     this.keymap = this.keymapSet();

src/client/js/components/HotkeysDetector/HotkeysDetector.jsx

@@ -15,6 +15,13 @@ export default class HotkeysDetector extends React.Component {
   }
 
   check(event) {
+
+    const target = event.target;
+    // ignore when target dom is input
+    const inputPattern = /^input|textinput|textarea$/i;
+    if (inputPattern.test(target.tagName) || target.isContentEditable) {
+      return;
+    }
     this.processingCommands = this.hotkeyList;
 
     if (event.ctrlKey) {
@@ -60,11 +67,32 @@ export default class HotkeysDetector extends React.Component {
       this.setState({
         userCommand: [],
       });
-    }
-    else if (this.processingCommands.toString() === [].toString()) {
+
+    // don't fire when not needed
+    if (!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
+      console.log(event.key);
       this.setState({
-        userCommand: [],
+        userCommand: this.state.userCommand.concat(event.key),
+      });
+
+      // filters the corresponding hotkeys(keys) that the user has pressed so far
+      const tempUserCommand = this.state.userCommand;
+      this.processingCommands = this.hotkeyList.filter((value) => {
+        return value.slice(0, tempUserCommand.length).toString() === tempUserCommand.toString();
       });
+
+      // executes if there were keymap that matches what the user pressed fully.
+      if ((this.processingCommands.length === 1) && (this.hotkeyList.find(ary => ary.toString() === this.state.userCommand.toString()))) {
+        this.props.onDetected(this.processingCommands[0]);
+        this.setState({
+          userCommand: [],
+        });
+      }
+      else if (this.processingCommands.toString() === [].toString()) {
+        this.setState({
+          userCommand: [],
+        });
+      }
     }
     return null;
 

src/client/js/components/PageHotkeys/PageCreate.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import NavigationContainer from '../../services/NavigationContainer';
+import { withUnstatedContainers } from '../UnstatedUtils';
+
+
+/**
+ *
+ * @export
+ * @extends {React.Component}
+ */
+
+export default class PageCreate extends React.Component {
+
+  // when this is called it returns the hotkey stroke
+  static getHotkeyStroke() {
+    return ['c'];
+  }
+
+  static getComponent() {
+    const PageCreateWrapper = withUnstatedContainers(PageCreate, [NavigationContainer]);
+    return <PageCreateWrapper />;
+  }
+
+  componentDidMount() {
+    this.props.navigationContainer.openPageCreateModal();
+    return null;
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+      </React.Fragment>
+    );
+  }
+
+}
+
+
+PageCreate.propTypes = {
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+};

src/client/js/services/NavigationContainer.js

@@ -36,8 +36,6 @@ export default class NavigationContainer extends Container {
 
     this.openPageCreateModal = this.openPageCreateModal.bind(this);
     this.closePageCreateModal = this.closePageCreateModal.bind(this);
-
-    this.initHotkeys();
     this.initDeviceSize();
     this.initScrollEvent();
   }
@@ -49,24 +47,6 @@ export default class NavigationContainer extends Container {
     return 'NavigationContainer';
   }
 
-  initHotkeys() {
-    window.addEventListener('keydown', (event) => {
-      const target = event.target;
-
-      // ignore when target dom is input
-      const inputPattern = /^input|textinput|textarea$/i;
-      if (inputPattern.test(target.tagName) || target.isContentEditable) {
-        return;
-      }
-
-      if (event.key === 'c') {
-        // don't fire when not needed
-        if (!event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
-          this.setState({ isPageCreateModalShown: true });
-        }
-      }
-    });
-  }
 
   initDeviceSize() {
     const mdOrAvobeHandler = async(mql) => {