Merge pull request #104 from orangemug/feature/issue-47

Added JSON linting (#47)

package.json

@@ -25,6 +25,7 @@
     "color": "^1.0.3",
     "file-saver": "^1.3.2",
     "github-api": "^3.0.0",
+    "jsonlint": "josdejong/jsonlint#85a19d7",
     "lodash.capitalize": "^4.2.1",
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.4.0",

src/codemirror-maputnik.css

@@ -4,10 +4,18 @@
 }
 
 .cm-s-maputnik.CodeMirror, .cm-s-maputnik .CodeMirror-gutters {
-  background: transparent;
   color: #8e8e8e;
   border: none;
 }
+
+.cm-s-maputnik.CodeMirror {
+  background: transparent;
+}
+
+.cm-s-maputnik .CodeMirror-gutters {
+  background: #212328;
+}
+
 .cm-s-maputnik .CodeMirror-cursor {
     border-left: solid thin #8e8e8e !important;
 }

src/components/layers/JSONEditor.jsx

@@ -6,8 +6,14 @@ import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
 
 import 'codemirror/mode/javascript/javascript'
+import 'codemirror/addon/lint/lint'
 import 'codemirror/lib/codemirror.css'
+import 'codemirror/addon/lint/lint.css'
 import '../../codemirror-maputnik.css'
+import jsonlint from 'jsonlint'
+
+// This is mainly because of this issue <https://github.com/zaach/jsonlint/issues/57> also the API has changed, see comment in file
+import '../../vendor/codemirror/addon/lint/json-lint'
 
 
 class JSONEditor extends React.Component {
@@ -66,7 +72,9 @@ class JSONEditor extends React.Component {
       tabSize: 2,
       theme: 'maputnik',
       viewportMargin: Infinity,
-      lineNumbers: false,
+      lineNumbers: true,
+      lint: true,
+      gutters: ["CodeMirror-lint-markers"],
       scrollbarStyle: "null",
     }
 

src/vendor/codemirror/addon/lint/json-lint.js

@@ -0,0 +1,31 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+// Depends on fork of jsonlint from <https://github.com/josdejong/jsonlint>
+// becuase of <https://github.com/zaach/jsonlint/issues/57>
+var jsonlint   = require("jsonlint");
+var CodeMirror = require("codemirror");
+
+CodeMirror.registerHelper("lint", "json", function(text) {
+  var found = [];
+
+  // NOTE: This was modified from the original to remove the global, also the
+  // old jsonlint API was 'jsonlint.parseError' its now
+  // 'jsonlint.parser.parseError'
+  jsonlint.parser.parseError = function(str, hash) {
+    var loc = hash.loc;
+    found.push({
+      from:    CodeMirror.Pos(loc.first_line - 1, loc.first_column),
+      to:      CodeMirror.Pos(loc.last_line  - 1, loc.last_column),
+      message: str
+    });
+  };
+
+  try {
+    jsonlint.parse(text);
+  }
+  catch(e) {
+    // Do nothing we catch the error above
+  }
+  return found;
+});