Fixed josdejong#154: Implemented shortcut keys to format and compact …

…JSON when in mode `text` or `code`.

HISTORY.md

@@ -3,11 +3,15 @@
 https://github.com/josdejong/jsoneditor
 
 
-## not yet released, version 3.1.3
+## not yet released, version 3.2.0
 
+- Implemented shortcut keys `Ctrl+\` to format and `Ctrl+Shift+\` to compact
+  JSON when in mode `text` or `code`.
 - Before an error is thrown because of invalid text, the editor first tries to
   sanitize the text (replace JavaScript notation with JSON notation), and only
   after that throws the error.
+- Fixed Node.path() not working for a JSON Object `""`. Thanks @tomalec.
+- Minor styling improvements.
 
 
 ## 2014-09-03, version 3.1.2

docs/shortcut_keys.md

@@ -1,5 +1,7 @@
 # Shortcut keys
 
+## Tree Editor
+
 Key                     | Description
 ----------------------- | ------------------------------------------------
 Alt+Arrows              | Move the caret up/down/left/right between fields
@@ -18,3 +20,18 @@ Alt+Home                | Move the caret to the first field
 Ctrl+M                  | Show actions menu
 Ctrl+Z                  | Undo last action
 Ctrl+Shift+Z            | Redo
+
+
+## Code Editor
+
+The code editor is powered by [Ace Editor](http://ace.c9.io/). This editor's
+shortcut keys are described here:
+
+https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts
+
+Additionally, there are shortcut keys to format/compact the code:
+
+Key                     | Description
+----------------------- | ------------------------------------------------
+Ctrl+\                  | Format JSON data, set proper indentation
+Ctrl+Shift+\            | Compact JSON data, remove all whitespace

jsoneditor.css

@@ -475,6 +475,7 @@
   background-color: #f0f2f5;
 }
 
+.jsoneditor .menu button:focus,
 .jsoneditor .menu button:active {
   background-color: #ffffff;
 }
@@ -551,6 +552,8 @@
   font-family: arial, sans-serif;
   font-size: 10pt;
   color: #1A1A1A;
+  background: transparent;
+  /* For Firefox */
 }
 
 .jsoneditor .search {

jsoneditor.js

@@ -24,7 +24,7 @@
  *
  * @author  Jos de Jong, <[email protected]>
  * @version 3.1.3-SNAPSHOT
- * @date    2014-09-13
+ * @date    2015-01-23
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -1120,6 +1120,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	      // prevent default submit action when the editor is located inside a form
 	      event.preventDefault();
 	    };
+	    this.frame.onkeydown = function (event) {
+	      me._onKeyDown(event);
+	    };
 
 	    // create menu
 	    this.menu = document.createElement('div');
@@ -1129,7 +1132,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    // create format button
 	    var buttonFormat = document.createElement('button');
 	    buttonFormat.className = 'format';
-	    buttonFormat.title = 'Format JSON data, with proper indentation and line feeds';
+	    buttonFormat.title = 'Format JSON data, with proper indentation and line feeds (Ctrl+\\)';
 	    this.menu.appendChild(buttonFormat);
 	    buttonFormat.onclick = function () {
 	      try {
@@ -1143,7 +1146,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    // create compact button
 	    var buttonCompact = document.createElement('button');
 	    buttonCompact.className = 'compact';
-	    buttonCompact.title = 'Compact JSON data, remove all whitespaces';
+	    buttonCompact.title = 'Compact JSON data, remove all whitespaces (Ctrl+Shift+\\)';
 	    this.menu.appendChild(buttonCompact);
 	    buttonCompact.onclick = function () {
 	      try {
@@ -1228,6 +1231,31 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 	  };
 
+	  /**
+	   * Event handler for keydown. Handles shortcut keys
+	   * @param {Event} event
+	   * @private
+	   */
+	  textmode._onKeyDown = function (event) {
+	    var keynum = event.which || event.keyCode;
+	    var handled = false;
+
+	    if (keynum == 220 && event.ctrlKey) {
+	      if (event.shiftKey) { // Ctrl+Shift+\
+	        this.compact();
+	      }
+	      else { // Ctrl+\
+	        this.format();
+	      }
+	      handled = true;
+	    }
+
+	    if (handled) {
+	      event.preventDefault();
+	      event.stopPropagation();
+	    }
+	  };
+
 	  /**
 	   * Detach the editor from the DOM
 	   * @private
@@ -2618,7 +2646,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var node = this;
 	    var path = [];
 	    while (node) {
-	      var field = node.field || node.index;
+	      var field = node.field != undefined ? node.field : node.index;
 	      if (field !== undefined) {
 	        path.unshift(field);
 	      }

src/css/menu.css

@@ -34,6 +34,7 @@
 .jsoneditor .menu button:hover {
   background-color: #f0f2f5;
 }
+.jsoneditor .menu button:focus,
 .jsoneditor .menu button:active {
   background-color: #ffffff;
 }

src/js/textmode.js

@@ -51,6 +51,9 @@ define(['./modeswitcher', './util'], function (modeswitcher, util) {
       // prevent default submit action when the editor is located inside a form
       event.preventDefault();
     };
+    this.frame.onkeydown = function (event) {
+      me._onKeyDown(event);
+    };
 
     // create menu
     this.menu = document.createElement('div');
@@ -60,7 +63,7 @@ define(['./modeswitcher', './util'], function (modeswitcher, util) {
     // create format button
     var buttonFormat = document.createElement('button');
     buttonFormat.className = 'format';
-    buttonFormat.title = 'Format JSON data, with proper indentation and line feeds';
+    buttonFormat.title = 'Format JSON data, with proper indentation and line feeds (Ctrl+\\)';
     this.menu.appendChild(buttonFormat);
     buttonFormat.onclick = function () {
       try {
@@ -74,7 +77,7 @@ define(['./modeswitcher', './util'], function (modeswitcher, util) {
     // create compact button
     var buttonCompact = document.createElement('button');
     buttonCompact.className = 'compact';
-    buttonCompact.title = 'Compact JSON data, remove all whitespaces';
+    buttonCompact.title = 'Compact JSON data, remove all whitespaces (Ctrl+Shift+\\)';
     this.menu.appendChild(buttonCompact);
     buttonCompact.onclick = function () {
       try {
@@ -159,6 +162,31 @@ define(['./modeswitcher', './util'], function (modeswitcher, util) {
     }
   };
 
+  /**
+   * Event handler for keydown. Handles shortcut keys
+   * @param {Event} event
+   * @private
+   */
+  textmode._onKeyDown = function (event) {
+    var keynum = event.which || event.keyCode;
+    var handled = false;
+
+    if (keynum == 220 && event.ctrlKey) {
+      if (event.shiftKey) { // Ctrl+Shift+\
+        this.compact();
+      }
+      else { // Ctrl+\
+        this.format();
+      }
+      handled = true;
+    }
+
+    if (handled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
   /**
    * Detach the editor from the DOM
    * @private