implemented so that ctrl key can be used

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

@@ -41,9 +41,6 @@ export default class Hotkeys extends React.Component {
   // this function generates keymap depending on what keys were selected in this.hotkeyCommand
   keymapSet() {
     let keymap = this.hotkeyList();
-    keymap = keymap.map((value) => {
-      return value.stroke;
-    });
     keymap = keymap.flat();
     keymap = new Set(keymap);
     return Array.from(keymap);
@@ -51,16 +48,17 @@ export default class Hotkeys extends React.Component {
 
   // this function generates list of all the hotkeys command
   hotkeyList() {
-    const hotkeyList = this.supportClasses.map((value) => {
+    let hotkeyList = this.supportClasses.map((value) => {
       return value.getHotkeyStroke();
     });
+    hotkeyList = hotkeyList.flat();
     return hotkeyList;
   }
 
   // activates when one of the hotkey strokes gets determined from HotkeysDetector
   onDetected(strokeDetermined) {
     let viewDetermined = this.supportClasses.filter((value) => {
-      return strokeDetermined.toString() === value.getHotkeyStroke().stroke.toString();
+      return value.getHotkeyStroke().find(stroke => stroke.toString() === strokeDetermined.toString());
     });
     viewDetermined = viewDetermined.map((value) => {
       return value.getComponent(this.deleteRender);

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

@@ -15,8 +15,8 @@ export default class HotkeysDetector extends React.Component {
   }
 
   check(event) {
-
     const target = event.target;
+    let eventKey = event.key;
     // ignore when target dom is input
     const inputPattern = /^input|textinput|textarea$/i;
     if (inputPattern.test(target.tagName) || target.isContentEditable) {
@@ -25,44 +25,28 @@ export default class HotkeysDetector extends React.Component {
     this.processingCommands = this.hotkeyList;
 
     if (event.ctrlKey) {
-      this.processingCommands = this.processingCommands.filter((value) => {
-        return value.ctrlKey;
-      });
-    }
-    else if (event.metaKey) {
-      this.processingCommands = this.processingCommands.filter((value) => {
-        return value.metaKey;
-      });
+      eventKey += '+ctrl';
     }
-    else if (event.altKey) {
-      this.processingCommands = this.processingCommands.filter((value) => {
-        return value.altKey;
-      });
+    if (event.metaKey) {
+      eventKey += '+meta';
     }
-    else if (event.shiftKey) {
-      this.processingCommands = this.processingCommands.filter((value) => {
-        return value.shiftKey;
-      });
+    if (event.altKey) {
+      eventKey += '+alt';
     }
-    else {
-      this.processingCommands = this.processingCommands.filter((value) => {
-        return ((!value.ctrlKey) && (!value.metaKey) && (!value.altKey) && (!value.shiftKey));
-      });
+    if (event.shiftKey) {
+      eventKey += '+shift';
     }
     this.setState({
-      userCommand: this.state.userCommand.concat(event.key),
+      userCommand: this.state.userCommand.concat(eventKey),
     });
     // filters the corresponding hotkeys(keys) that the user has pressed so far
     const tempUserCommand = this.state.userCommand;
     this.processingCommands = this.processingCommands.filter((value) => {
-      return value.stroke.slice(0, tempUserCommand.length).toString() === tempUserCommand.toString();
-    });
-    this.processingCommands = this.processingCommands.map((value) => {
-      return value.stroke;
+      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(obj => obj.stroke.toString() === this.state.userCommand.toString()))) {
+    if ((this.processingCommands.length === 1) && (this.hotkeyList.find(ary => ary.toString() === this.state.userCommand.toString()))) {
       this.props.onDetected(this.processingCommands[0]);
       this.setState({
         userCommand: [],

src/client/js/components/MirrorMode/MirrorMode.jsx

@@ -13,13 +13,7 @@ export default class MirrorMode extends React.Component {
 
   // when this is called it returns the hotkey stroke
   static getHotkeyStroke() {
-    return {
-      stroke: ['x', 'x', 'b', 'b', 'a', 'y', 'a', 'y', 'ArrowDown', 'ArrowLeft'],
-      ctrlKey: false,
-      metaKey: false,
-      altKey: false,
-      shiftKey: false,
-    };
+    return [['x', 'x', 'b', 'b', 'a', 'y', 'a', 'y', 'ArrowDown', 'ArrowLeft']];
   }
 
   static getComponent() {

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

@@ -14,13 +14,7 @@ export default class PageCreate extends React.Component {
 
   // when this is called it returns the hotkey stroke
   static getHotkeyStroke() {
-    return {
-      stroke: ['c'],
-      ctrlKey: false,
-      metaKey: false,
-      altKey: false,
-      shiftKey: false,
-    };
+    return [['c']];
   }
 
   static getComponent() {

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

@@ -10,13 +10,7 @@ export default class PageEdit extends React.Component {
 
   // when this is called it returns the hotkey stroke
   static getHotkeyStroke() {
-    return {
-      stroke: ['e'],
-      ctrlKey: false,
-      metaKey: false,
-      altKey: false,
-      shiftKey: false,
-    };
+    return [['e']];
   }
 
   static getComponent() {

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

@@ -10,13 +10,7 @@ export default class ShowHotkeys extends React.Component {
 
   // when this is called it returns the hotkey stroke
   static getHotkeyStroke() {
-    return {
-      stroke: ['/'],
-      ctrlKey: true,
-      metaKey: true,
-      altKey: false,
-      shiftKey: false,
-    };
+    return [['/+ctrl'], ['/+meta']];
   }
 
   static getComponent() {

src/client/js/components/StaffCredit/StaffCredit.jsx

@@ -29,13 +29,7 @@ export default class StaffCredit extends React.Component {
 
   // when this is called it returns the hotkey stroke
   static getHotkeyStroke() {
-    return {
-      stroke: ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'],
-      ctrlKey: false,
-      metaKey: false,
-      altKey: false,
-      shiftKey: false,
-    };
+    return [['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']];
   }
 
   static getComponent(onDeleteRender) {