added shortcut manager and allow user to customize toggle mode shortcut

Author: ZeroX-DG

browser/lib/utils.js

@@ -54,7 +54,25 @@ export function escapeHtmlCharacters (text) {
       : html
 }
 
+export function isObjectEqual (a, b) {
+  const aProps = Object.getOwnPropertyNames(a)
+  const bProps = Object.getOwnPropertyNames(b)
+
+  if (aProps.length !== bProps.length) {
+    return false
+  }
+
+  for (var i = 0; i < aProps.length; i++) {
+    const propName = aProps[i]
+    if (a[propName] !== b[propName]) {
+      return false
+    }
+  }
+  return true
+}
+
 export default {
   lastFindInArray,
-  escapeHtmlCharacters
+  escapeHtmlCharacters,
+  isObjectEqual
 }

browser/main/Main.js

@@ -16,6 +16,7 @@ import { hashHistory } from 'react-router'
 import store from 'browser/main/store'
 import i18n from 'browser/lib/i18n'
 import { getLocales } from 'browser/lib/Languages'
+import applyShortcuts from 'browser/main/lib/shortcutManager'
 const path = require('path')
 const electron = require('electron')
 const { remote } = electron
@@ -159,7 +160,7 @@ class Main extends React.Component {
     } else {
       i18n.setLocale('en')
     }
-
+    applyShortcuts()
     // Reload all data
     dataApi.init()
       .then((data) => {

browser/main/index.js

@@ -9,7 +9,6 @@ import { syncHistoryWithStore } from 'react-router-redux'
 require('./lib/ipcClient')
 require('../lib/customMeta')
 import i18n from 'browser/lib/i18n'
-import ee from 'browser/main/lib/eventEmitter'
 
 const electron = require('electron')
 
@@ -64,12 +63,6 @@ document.addEventListener('keyup', function (e) {
   }
 })
 
-document.addEventListener('keydown', function(e) {
-  if (e.key === 'm' && e.ctrlKey) {
-    ee.emit('topbar:togglemodebutton')
-  }
-});
-
 document.addEventListener('click', function (e) {
   const className = e.target.className
   if (!className && typeof (className) !== 'string') return

browser/main/lib/ConfigManager.js

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import RcParser from 'browser/lib/RcParser'
 import i18n from 'browser/lib/i18n'
+import ee from 'browser/main/lib/eventEmitter'
 
 const OSX = global.process.platform === 'darwin'
 const win = global.process.platform === 'win32'
@@ -20,7 +21,8 @@ export const DEFAULT_CONFIG = {
   listStyle: 'DEFAULT', // 'DEFAULT', 'SMALL'
   amaEnabled: true,
   hotkey: {
-    toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E'
+    toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E',
+    toggleMode: OSX ? 'Cmd + M' : 'Ctrl + M'
   },
   ui: {
     language: 'en',
@@ -166,6 +168,7 @@ function set (updates) {
   ipcRenderer.send('config-renew', {
     config: get()
   })
+  ee.emit('config-renew')
 }
 
 function assignConfigValues (originalConfig, rcConfig) {

browser/main/lib/shortcut.js

@@ -0,0 +1,7 @@
+import ee from 'browser/main/lib/eventEmitter'
+
+module.exports = {
+  'toggleMode': () => {
+    ee.emit('topbar:togglemodebutton')
+  }
+}

browser/main/lib/shortcutManager.js

@@ -0,0 +1,40 @@
+import Mousetrap from 'mousetrap'
+import CM from 'browser/main/lib/ConfigManager'
+import ee from 'browser/main/lib/eventEmitter'
+import { isObjectEqual } from 'browser/lib/utils'
+require('mousetrap-global-bind')
+const functions = require('./shortcut')
+
+let shortcuts = CM.get().hotkey
+
+ee.on('config-renew', function () {
+  // only update if hotkey changed !
+  const newHotkey = CM.get().hotkey
+  if (!isObjectEqual(newHotkey, shortcuts)) {
+    updateShortcut(newHotkey)
+  }
+})
+
+function updateShortcut (newHotkey) {
+  Mousetrap.reset()
+  shortcuts = newHotkey
+  applyShortcuts(newHotkey)
+}
+
+function formatShortcut (shortcut) {
+  return shortcut.toLowerCase().replace(/ /g, '')
+}
+
+function applyShortcuts (shortcuts) {
+  for (const shortcut in shortcuts) {
+    const toggler = formatShortcut(shortcuts[shortcut])
+    // only bind if the function for that shortcut exists
+    if (functions[shortcut]) {
+      Mousetrap.bindGlobal(toggler, functions[shortcut])
+    }
+  }
+}
+
+applyShortcuts(CM.get().hotkey)
+
+module.exports = applyShortcuts

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -67,7 +67,8 @@ class HotkeyTab extends React.Component {
   handleHotkeyChange (e) {
     const { config } = this.state
     config.hotkey = {
-      toggleMain: this.refs.toggleMain.value
+      toggleMain: this.refs.toggleMain.value,
+      toggleMode: this.refs.toggleMode.value
     }
     this.setState({
       config
@@ -115,6 +116,17 @@ class HotkeyTab extends React.Component {
               />
             </div>
           </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Toggle editor mode')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='toggleMode'
+                value={config.hotkey.toggleMode}
+                type='text'
+              />
+            </div>
+          </div>
           <div styleName='group-control'>
             <button styleName='group-control-leftButton'
               onClick={(e) => this.handleHintToggleButtonClick(e)}

package.json

@@ -79,6 +79,8 @@
     "md5": "^2.0.0",
     "mdurl": "^1.0.1",
     "moment": "^2.10.3",
+    "mousetrap": "^1.6.1",
+    "mousetrap-global-bind": "^1.1.0",
     "node-ipc": "^8.1.0",
     "raphael": "^2.2.7",
     "react": "^15.5.4",

yarn.lock

@@ -1864,14 +1864,18 @@ codemirror-mode-elixir@^1.1.1:
   dependencies:
     codemirror "^5.20.2"
 
-codemirror@^5.18.2, codemirror@^5.19.0:
+codemirror@^5.18.2:
   version "5.26.0"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.26.0.tgz#bcbee86816ed123870c260461c2b5c40b68746e5"
 
 codemirror@^5.20.2:
   version "5.33.0"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.33.0.tgz#462ad9a6fe8d38b541a9536a3997e1ef93b40c6a"
 
+codemirror@^5.37.0:
+  version "5.37.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.37.0.tgz#c349b584e158f590277f26d37c2469a6bc538036"
+
 coffee-script@^1.10.0:
   version "1.12.6"
   resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.6.tgz#285a3f7115689065064d6bf9ef4572db66695cbf"
@@ -5960,6 +5964,14 @@ moment@^2.10.3:
   version "2.18.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
 
+mousetrap-global-bind@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mousetrap-global-bind/-/mousetrap-global-bind-1.1.0.tgz#cd7de9222bd0646fa2e010d54c84a74c26a88edd"
+
+mousetrap@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.1.tgz#2a085f5c751294c75e7e81f6ec2545b29cbf42d9"
+
 [email protected]:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"