text mode: navigation from error to code

meirotstein · Aug 15, 2018 · 8bae371 · 8bae371
1 parent a5f1abd
commit 8bae371
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 27 deletions.
diff --git a/src/css/jsoneditor.css b/src/css/jsoneditor.css
@@ -346,6 +346,11 @@ div.jsoneditor-tree .jsoneditor-schema-error {
   background: url('./img/jsoneditor-icons.svg')  -168px -48px;
 }
 
+.jsoneditor-text-errors tr:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 .jsoneditor-schema-error .jsoneditor-popover {
   background-color: #4c4c4c;
   border-radius: 3px;
@@ -505,6 +510,7 @@ div.jsoneditor-tree .jsoneditor-schema-error {
   height: 24px;
   padding: 0;
   margin: 0 4px 0 0;
+  cursor: pointer;
   background: url('./img/jsoneditor-icons.svg')  -168px -48px;
 }
 

diff --git a/src/js/textmode.js b/src/js/textmode.js
@@ -421,8 +421,16 @@ textmode._onMouseDown = function (event) {
  * @private
  */
 textmode._onBlur = function (event) {
-  this._updateCursorInfo();
-  this._emitSelectionChange();
+  var me = this;
+  // this allows to avoid blur when clicking inner elements (like the errors panel)
+  // just make sure to set the isFocused to true on the inner element onclick callback
+  setTimeout(function(){
+    if (!me.isFocused) {
+      me._updateCursorInfo();
+      me._emitSelectionChange();
+    }
+    me.isFocused = false;
+  });
 };
 
 /**
@@ -690,16 +698,16 @@ textmode.validate = function () {
   }
 
   if (errors.length > 0) {
+    var jsonText = this.getText();
+    var errorPaths = [];
+    errors.reduce(function(acc, curr) {
+      if(acc.indexOf(curr.dataPath) === -1) {
+        acc.push(curr.dataPath);
+      }; 
+      return acc;
+    }, errorPaths);      
+    var errorLocations = util.getPositionForPath(jsonText, errorPaths);
     if (this.aceEditor) {
-      var jsonText = this.getText();
-      var errorPaths = [];
-      errors.reduce(function(acc, curr) {
-        if(acc.indexOf(curr.dataPath) === -1) {
-          acc.push(curr.dataPath);
-        }; 
-        return acc;
-      }, errorPaths);      
-      var errorLocations = util.getPositionForPath(jsonText, errorPaths);   
       me.annotations = errorLocations.map(function (errLoc) {
         var validationErrors = errors.filter(function(err){ return err.dataPath === errLoc.path; });
         var validationError = validationErrors.reduce(function(acc, curr) { acc.message += '\n' + curr.message; return acc; });
@@ -719,22 +727,40 @@ textmode.validate = function () {
 
     } else {
       var validationErrors = document.createElement('div');
-      validationErrors.innerHTML = '<table class="jsoneditor-text-errors">' +
-          '<tbody>' +
-          errors.map(function (error) {
-            var message;
-            if (typeof error === 'string') {
-              message = '<td colspan="2"><pre>' + error + '</pre></td>';
-            }
-            else {
-              message = '<td>' + error.dataPath + '</td>' +
-                  '<td>' + error.message + '</td>';
-            }
-
-            return '<tr><td><button class="jsoneditor-schema-error"></button></td>' + message + '</tr>'
-          }).join('') +
-          '</tbody>' +
-          '</table>';
+      validationErrors.innerHTML = '<table class="jsoneditor-text-errors"><tbody></tbody></table>';
+      var tbody = validationErrors.getElementsByTagName('tbody')[0];
+
+      errors.forEach(function (error) {
+        var message;
+        if (typeof error === 'string') {
+          message = '<td colspan="2"><pre>' + error + '</pre></td>';
+        }
+        else {
+          message = 
+              '<td>' + error.dataPath + '</td>' +
+              '<td>' + error.message + '</td>';
+        }
+
+        var line;
+
+        if (error.dataPath) {
+          var errLoc = errorLocations.find(function(loc) { return loc.path === error.dataPath; });
+          if (errLoc) {
+            line = errLoc.line + 1;
+          }
+        }
+
+        var trEl = document.createElement('tr');
+        trEl.innerHTML =  ('<td><button class="jsoneditor-schema-error"></button></td><td>'+ (!isNaN(line) ? ('Ln ' + line) : '') +'</td>' + message);
+        trEl.onclick = function() {
+          me.isFocused = true;
+          if (!isNaN(line)) {
+            me.setTextSelection({row: line, column: 1}, {row: line, column: 1000});
+          }
+        };
+
+        tbody.appendChild(trEl);
+      });
 
       this.dom.validationErrors = validationErrors;
       this.dom.validationErrorsContainer.appendChild(validationErrors);