Merge pull request #587 from pathmapper/matchingbrackets_addon

Add matchbrackets addon to JSON editor

src/codemirror-maputnik.css

@@ -17,7 +17,7 @@
 }
 
 .cm-s-maputnik .CodeMirror-cursor {
-    border-left: solid thin #8e8e8e !important;
+    border-left: solid thin #f0f0f0 !important;
 }
 
 .cm-s-maputnik.CodeMirror-focused div.CodeMirror-selected {
@@ -47,5 +47,11 @@
 }
 
 .cm-s-maputnik .CodeMirror-matchingbracket {
-  text-decoration: underline; color: white !important;
+  background-color: #f0f0f0;  
+  color: #565659 !important;
+}
+
+.cm-s-maputnik .CodeMirror-nonmatchingbracket {
+  background-color: #bb0000;  
+  color: white !important;
 }

src/components/layers/JSONEditor.jsx

@@ -7,6 +7,7 @@ import CodeMirror from 'codemirror';
 
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/addon/lint/lint'
+import 'codemirror/addon/edit/matchbrackets'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/addon/lint/lint.css'
 import '../../codemirror-maputnik.css'
@@ -47,6 +48,7 @@ class JSONEditor extends React.Component {
       viewportMargin: Infinity,
       lineNumbers: true,
       lint: true,
+      matchBrackets: true,
       gutters: ["CodeMirror-lint-markers"],
       scrollbarStyle: "null",
     });