Merge pull request #1732 from vulongphan/update/tidy-code-shortcut

Add Cmd+Shift+F as tidy code shortcut and prevent browser default behaviour

Author: catarak

client/components/Nav.jsx

@@ -422,7 +422,9 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
               >
                 {this.props.t('Nav.Edit.TidyCode')}
-                <span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
+                <span className="nav__keyboard-shortcut">
+                  {metaKeyName}+{'\u21E7'}+F
+                </span>
               </button>
             </li>
             <li className="nav__dropdown-item">

client/components/__test__/__snapshots__/Nav.test.jsx.snap

@@ -85,7 +85,7 @@ exports[`Nav renders correctly 1`] = `
                 <span
                   class="nav__keyboard-shortcut"
                 >
-                  ⇧+Tab
+                  ⌃+⇧+F
                 </span>
               </button>
             </li>

client/modules/IDE/components/Editor.jsx

@@ -62,7 +62,6 @@ const beautifyHTML = beautifyJS.html;
 window.JSHINT = JSHINT;
 window.CSSLint = CSSLint;
 window.HTMLHint = HTMLHint;
-delete CodeMirror.keyMap.sublime['Shift-Tab'];
 
 const IS_TAB_INDENT = false;
 const INDENTATION_AMOUNT = 2;
@@ -168,8 +167,14 @@ class Editor extends React.Component {
     });
 
     this._cm.on('keydown', (_cm, e) => {
-      // 9 === Tab
-      if (e.keyCode === 9 && e.shiftKey) {
+      // 70 === f
+      if (
+        ((metaKey === 'Cmd' && e.metaKey) ||
+          (metaKey === 'Ctrl' && e.ctrlKey)) &&
+        e.shiftKey &&
+        e.keyCode === 70
+      ) {
+        e.preventDefault();
         this.tidyCode();
       }
     });

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -24,7 +24,9 @@ function KeyboardShortcutModal() {
       </p>
       <ul className="keyboard-shortcuts__list">
         <li className="keyboard-shortcut-item">
-          <span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
+          <span className="keyboard-shortcut__command">
+            {metaKeyName} + {'\u21E7'} + F
+          </span>
           <span>{t('KeyboardShortcuts.CodeEditing.Tidy')}</span>
         </li>
         <li className="keyboard-shortcut-item">