implemented so that it would chow when pressing "ctrl + /"

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

@@ -39,6 +39,9 @@ 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);
@@ -55,7 +58,7 @@ export default class Hotkeys extends React.Component {
   // activates when one of the hotkey strokes gets determined from HotkeysDetector
   onDetected(strokeDetermined) {
     let viewDetermined = this.supportClasses.filter((value) => {
-      return strokeDetermined.toString() === value.getHotkeyStroke().toString();
+      return strokeDetermined.toString() === value.getHotkeyStroke().stroke.toString();
     });
     viewDetermined = viewDetermined.map((value) => {
       return value.getComponent(this.deleteRender);

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

@@ -15,27 +15,47 @@ export default class HotkeysDetector extends React.Component {
   }
 
   check(event) {
+    this.processingCommands = this.hotkeyList;
 
-    if ((event.ctrlKey || event.metaKey) && (event.key === '/')) {
-      this.props.onDetected(['/']);
-      this.setState({
-        userCommand: [],
+    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;
+      });
+    }
+    else if (event.altKey) {
+      this.processingCommands = this.processingCommands.filter((value) => {
+        return value.altKey;
+      });
+    }
+    else if (event.shiftKey) {
+      this.processingCommands = this.processingCommands.filter((value) => {
+        return value.shiftKey;
+      });
+    }
+    else {
+      this.processingCommands = this.processingCommands.filter((value) => {
+        return ((!value.ctrlKey) && (!value.metaKey) && (!value.altKey) && (!value.shiftKey));
       });
-      return null;
     }
-
     this.setState({
       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();
+    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;
     });
 
     // 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()))) {
+    if ((this.processingCommands.length === 1) && (this.hotkeyList.find(obj => obj.stroke.toString() === this.state.userCommand.toString()))) {
       this.props.onDetected(this.processingCommands[0]);
       this.setState({
         userCommand: [],

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

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

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

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

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

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

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

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

src/client/js/legacy/crowi.js

@@ -85,12 +85,6 @@ Crowi.modifyScrollTop = function() {
   }, timeout);
 };
 
-Crowi.handleKeyCtrlSlashHandler = (event) => {
-  // show modal to create a page
-  $('#shortcuts-modal').modal('toggle');
-  event.preventDefault();
-};
-
 Crowi.initClassesByOS = function() {
   // add classes to cmd-key by OS
   const platform = navigator.platform.toLowerCase();
@@ -400,25 +394,6 @@ window.addEventListener('hashchange', (e) => {
   }
 });
 
-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;
-  }
-
-  switch (event.key) {
-    case '/':
-      if (event.ctrlKey || event.metaKey) {
-        Crowi.handleKeyCtrlSlashHandler(event);
-      }
-      break;
-    default:
-  }
-});
-
 // adjust min-height of page for print temporarily
 window.onbeforeprint = function() {
   $('#page-wrapper').css('min-height', '0px');