Fixes for codemirror in sources modal

- Allows for max height
 - Override GeoJSON data when changing type

src/components/layers/JSONEditor.jsx

@@ -69,12 +69,19 @@ class JSONEditor extends React.Component {
       scrollbarStyle: "null",
     }
 
-    return <CodeMirror
+    const style = {};
-      value={this.state.code}
+    if (this.props.maxHeight) {
-      onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
+      style.maxHeight = this.props.maxHeight;
-      onFocusChange={focused => focused ? true : this.resetValue()}
+    }
-      options={codeMirrorOptions}
+
-    />
+    return <div className="CodeMirror-wrapper" style={style}>
+      <CodeMirror
+        value={this.state.code}
+        onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
+        onFocusChange={focused => focused ? true : this.resetValue()}
+        options={codeMirrorOptions}
+      />
+    </div>
   }
 }
 

src/components/modals/SourcesModal.jsx

@@ -115,11 +115,11 @@ class AddSource extends React.Component {
     switch(mode) {
       case 'geojson_url': return {
         type: 'geojson',
-        data: source.data || 'http://localhost:3000/geojson.json'
+        data: 'http://localhost:3000/geojson.json'
       }
       case 'geojson_json': return {
         type: 'geojson',
-        data: source.data || {}
+        data: {}
       }
       case 'tilejson_vector': return {
         type: 'vector',

src/components/sources/SourceTypeEditor.jsx

@@ -116,6 +116,7 @@ class GeoJSONSourceJSONEditor extends React.Component {
     return <InputBlock label={"GeoJSON"} doc={latest.source_geojson.data.doc}>
       <JSONEditor
         layer={this.props.source.data}
+        maxHeight={200}
         onChange={data => {
           this.props.onChange({
             ...this.props.source,

src/styles/_codemirror.scss

@@ -0,0 +1,8 @@
+.CodeMirror-lint-tooltip {
+  z-index: 2000 !important;
+}
+
+.CodeMirror-wrapper {
+  position: relative;
+  overflow: auto;
+}

src/styles/index.scss

@@ -37,6 +37,7 @@ $toolbar-offset: 0;
 @import 'zoomproperty';
 @import 'popup';
 @import 'map';
+@import 'codemirror';
 @import 'react-collapse';
 @import 'react-codemirror';