Merge pull request #562 from orangemug/feature/json-editor-perf-improvements

react-codemirror2 -> codemirror directly

package-lock.json

@@ -9069,11 +9069,6 @@
         "prop-types": "^15.5.10"
       }
     },
-    "react-codemirror2": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-6.0.0.tgz",
-      "integrity": "sha512-D7y9qZ05FbUh9blqECaJMdDwKluQiO3A9xB+fssd5jKM7YAXucRuEOlX32mJQumUvHUkHRHqXIPBjm6g0FW0Ag=="
-    },
     "react-collapse": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-4.0.3.tgz",

package.json

@@ -48,7 +48,6 @@
     "react-aria-modal": "^4.0.0",
     "react-autobind": "^1.0.6",
     "react-autocomplete": "^1.8.1",
-    "react-codemirror2": "^6.0.0",
     "react-collapse": "^4.0.3",
     "react-color": "^2.17.3",
     "react-dom": "^16.10.2",

src/components/layers/JSONEditor.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {Controlled as CodeMirror} from 'react-codemirror2'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
+import CodeMirror from 'codemirror';
 
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/addon/lint/lint'
@@ -25,36 +25,82 @@ class JSONEditor extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      code: JSON.stringify(props.layer, null, 2)
+      isEditing: false,
+      prevValue: this.getValue(),
+    };
   }
+
+  getValue () {
+    return JSON.stringify(this.props.layer, null, 2);
+  }
+
+  componentDidMount () {
+    this._doc = CodeMirror(this._el, {
+      value: this.getValue(),
+      mode: {
+        name: "javascript",
+        json: true
+      },
+      tabSize: 2,
+      theme: 'maputnik',
+      viewportMargin: Infinity,
+      lineNumbers: true,
+      lint: true,
+      gutters: ["CodeMirror-lint-markers"],
+      scrollbarStyle: "null",
+    });
+
+    this._doc.on('change', this.onChange);
+    this._doc.on('focus', this.onFocus);
+    this._doc.on('blur', this.onBlur);
+  }
+
+  onFocus = () => {
+    this.setState({
+      isEditing: true
+    });
+  }
+
+  onBlur = () => {
+    this.setState({
+      isEditing: false
+    });
+  }
+
+  componentWillUnMount () {
+    this._doc.off('change', this.onChange);
+    this._doc.off('focus', this.onFocus);
+    this._doc.off('blur', this.onBlur);
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.layer !== this.props.layer) {
+    if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
-      this.setState({
+      this._cancelNextChange = true;
-        code: JSON.stringify(this.props.layer, null, 2)
+      this._doc.setValue(
-      })
+        this.getValue(),
+      )
     }
   }
 
-  onCodeUpdate(newCode) {
+  onChange = (e) => {
+    if (this._cancelNextChange) {
+      this._cancelNextChange = false;
+      return;
+    }
+    const newCode = this._doc.getValue();
+
+    if (this.state.prevValue !== newCode) {
       try {
         const parsedLayer = JSON.parse(newCode)
         this.props.onChange(parsedLayer)
       } catch(err) {
         console.warn(err)
-    } finally {
-      this.setState({
-        code: newCode
-      })
       }
     }
 
-  resetValue() {
-    console.log('reset')
     this.setState({
-      code: JSON.stringify(this.props.layer, null, 2)
+      prevValue: newCode,
-    })
+    });
   }
 
   render() {
@@ -69,11 +115,9 @@ class JSONEditor extends React.Component {
       scrollbarStyle: "null",
     }
 
-    return <CodeMirror
+    return <div
-      value={this.state.code}
+      className="codemirror-container"
-      onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
+      ref={(el) => this._el = el}
-      onFocusChange={focused => focused ? true : this.resetValue()}
-      options={codeMirrorOptions}
     />
   }
 }

src/styles/_codemirror.scss

@@ -0,0 +1,3 @@
+.codemirror-container {
+  max-width: 100%;
+}

src/styles/_react-codemirror.scss

@@ -1,3 +0,0 @@
-.react-codemirror2 {
-  max-width: 100%;
-}

src/styles/index.scss

@@ -38,7 +38,7 @@ $toolbar-offset: 0;
 @import 'popup';
 @import 'map';
 @import 'react-collapse';
-@import 'react-codemirror';
+@import 'codemirror';
 
 /**
  * Hacks for webdriverio isVisibleWithinViewport