From ee525631fa6596b91e8afd5c9af4e1d4bdcf16b1 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 20 Oct 2019 11:09:20 +0100
Subject: [PATCH] Fixes for codemirror in sources modal

 - Allows for max height
 - Override GeoJSON data when changing type
---
 src/components/layers/JSONEditor.jsx        | 19 +++++++++++++------
 src/components/modals/SourcesModal.jsx      |  4 ++--
 src/components/sources/SourceTypeEditor.jsx |  1 +
 src/styles/_codemirror.scss                 |  8 ++++++++
 src/styles/index.scss                       |  1 +
 5 files changed, 25 insertions(+), 8 deletions(-)
 create mode 100644 src/styles/_codemirror.scss

diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx
index 2f01b82..5621459 100644
--- a/src/components/layers/JSONEditor.jsx
+++ b/src/components/layers/JSONEditor.jsx
@@ -69,12 +69,19 @@ class JSONEditor extends React.Component {
       scrollbarStyle: "null",
     }
 
-    return <CodeMirror
-      value={this.state.code}
-      onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
-      onFocusChange={focused => focused ? true : this.resetValue()}
-      options={codeMirrorOptions}
-    />
+    const style = {};
+    if (this.props.maxHeight) {
+      style.maxHeight = this.props.maxHeight;
+    }
+
+    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>
   }
 }
 
diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx
index 06f0aeb..2d5c8ba 100644
--- a/src/components/modals/SourcesModal.jsx
+++ b/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',
diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx
index 5c4c2ec..83672e1 100644
--- a/src/components/sources/SourceTypeEditor.jsx
+++ b/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,
diff --git a/src/styles/_codemirror.scss b/src/styles/_codemirror.scss
new file mode 100644
index 0000000..d2956c9
--- /dev/null
+++ b/src/styles/_codemirror.scss
@@ -0,0 +1,8 @@
+.CodeMirror-lint-tooltip {
+  z-index: 2000 !important;
+}
+
+.CodeMirror-wrapper {
+  position: relative;
+  overflow: auto;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b27341d..abdca0d 100644
--- a/src/styles/index.scss
+++ b/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';