added shortcut manager and allow user to customize toggle mode shortcut

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)}