From 563a78ed42d2909838953fb1e528263517b6bf4e Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 15 Oct 2019 17:34:36 +0100 Subject: [PATCH 1/3] Moved away from react-codemirror2 to interacting with codemirror directly. --- src/components/layers/JSONEditor.jsx | 97 ++++++++++++++++++++-------- 1 file changed, 69 insertions(+), 28 deletions(-) diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx index 2f01b82..466c865 100644 --- a/src/components/layers/JSONEditor.jsx +++ b/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) { - this.setState({ - code: JSON.stringify(this.props.layer, null, 2) - }) + if (!this.state.isEditing && prevProps.layer !== this.props.layer) { + this._cancelNextChange = true; + this._doc.setValue( + this.getValue(), + ) } } - onCodeUpdate(newCode) { - try { - const parsedLayer = JSON.parse(newCode) - this.props.onChange(parsedLayer) - } catch(err) { - console.warn(err) - } finally { - this.setState({ - code: 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) + } } - } - resetValue() { - console.log('reset') this.setState({ - code: JSON.stringify(this.props.layer, null, 2) - }) + prevValue: newCode, + }); } render() { @@ -69,12 +115,7 @@ class JSONEditor extends React.Component { scrollbarStyle: "null", } - return this.onCodeUpdate(value)} - onFocusChange={focused => focused ? true : this.resetValue()} - options={codeMirrorOptions} - /> + return
this._el = el} /> } } From 22b6a4a2bfec1985ceee1e262dd95e34439bb13d Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 06:46:30 +0100 Subject: [PATCH 2/3] Added max-width to allow overfow scroll on JSONEditor --- src/components/layers/JSONEditor.jsx | 5 ++++- src/styles/_codemirror.scss | 3 +++ src/styles/_react-codemirror.scss | 3 --- src/styles/index.scss | 2 +- 4 files changed, 8 insertions(+), 5 deletions(-) create mode 100644 src/styles/_codemirror.scss delete mode 100644 src/styles/_react-codemirror.scss diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx index 466c865..310ed13 100644 --- a/src/components/layers/JSONEditor.jsx +++ b/src/components/layers/JSONEditor.jsx @@ -115,7 +115,10 @@ class JSONEditor extends React.Component { scrollbarStyle: "null", } - return
this._el = el} /> + return
this._el = el} + /> } } diff --git a/src/styles/_codemirror.scss b/src/styles/_codemirror.scss new file mode 100644 index 0000000..85d7aa8 --- /dev/null +++ b/src/styles/_codemirror.scss @@ -0,0 +1,3 @@ +.codemirror-container { + max-width: 100%; +} diff --git a/src/styles/_react-codemirror.scss b/src/styles/_react-codemirror.scss deleted file mode 100644 index c054ca2..0000000 --- a/src/styles/_react-codemirror.scss +++ /dev/null @@ -1,3 +0,0 @@ -.react-codemirror2 { - max-width: 100%; -} diff --git a/src/styles/index.scss b/src/styles/index.scss index b27341d..bfef57f 100644 --- a/src/styles/index.scss +++ b/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 From ef23f01e676f74bbac691ba76a9405c8c353040f Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 06:49:11 +0100 Subject: [PATCH 3/3] Removed react-codemirror2 as we no longer use it --- package-lock.json | 5 ----- package.json | 1 - 2 files changed, 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4599d8c..ecc57ec 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b7d9a6b..4a9f54f 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,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",