From ad8fa7563ace4e764d51078fc8e5504ccbdeed14 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 8 Mar 2017 21:35:19 +0000
Subject: [PATCH] Added JSON linting (fixes #47)

---
 package.json                                  |  1 +
 src/codemirror-maputnik.css                   | 10 +++++-
 src/components/layers/JSONEditor.jsx          | 10 +++++-
 src/vendor/codemirror/addon/lint/json-lint.js | 31 +++++++++++++++++++
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 src/vendor/codemirror/addon/lint/json-lint.js

diff --git a/package.json b/package.json
index 4fb265ca..273c22d0 100644
--- a/package.json
+++ b/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",
diff --git a/src/codemirror-maputnik.css b/src/codemirror-maputnik.css
index beab9e1a..83b653b2 100644
--- a/src/codemirror-maputnik.css
+++ b/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;
 }
diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx
index d323a242..5f27055f 100644
--- a/src/components/layers/JSONEditor.jsx
+++ b/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",
     }
 
diff --git a/src/vendor/codemirror/addon/lint/json-lint.js b/src/vendor/codemirror/addon/lint/json-lint.js
new file mode 100644
index 00000000..5c80a840
--- /dev/null
+++ b/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;
+});