From 422bbf93786e31caba126dd38b5df8d69823591b Mon Sep 17 00:00:00 2001
From: Jo Jordens <jo@appsaloon.be>
Date: Fri, 2 Mar 2018 13:06:48 +0100
Subject: [PATCH] replaced react-codemirror with react-codemirror2

---
 package-lock.json                             | 23 ++++---------------
 package.json                                  |  4 ++--
 .../column/messageSender/MessageSenderView.js | 13 +++++------
 3 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 10a8af9..79d59f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1282,11 +1282,6 @@
         "safe-buffer": "5.1.1"
       }
     },
-    "classnames": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
-      "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
-    },
     "cliui": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@@ -4616,11 +4611,6 @@
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
-    "lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
-    },
     "lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
@@ -5883,15 +5873,10 @@
         "section-iterator": "2.0.0"
       }
     },
-    "react-codemirror": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/react-codemirror/-/react-codemirror-0.3.0.tgz",
-      "integrity": "sha1-zWvW70WOweA1z9iz/nswyMeIPGw=",
-      "requires": {
-        "classnames": "2.2.5",
-        "codemirror": "5.35.0",
-        "lodash.debounce": "4.0.8"
-      }
+    "react-codemirror2": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-4.0.1.tgz",
+      "integrity": "sha512-qreOzCDelTgkUKSw5QP/tx2jT1MltwSaznDucaWyw5ZX567zmehuIT9eyUCvMtKJ0BlGbHfhTp6rT+ee08HEBg=="
     },
     "react-color": {
       "version": "2.14.0",
diff --git a/package.json b/package.json
index c2a8511..ff26b17 100644
--- a/package.json
+++ b/package.json
@@ -28,10 +28,10 @@
     "watchify": "^3.9.0"
   },
   "dependencies": {
-    "codemirror": "^5.23.0",
+    "codemirror": "^5.35.0",
     "react": "^15.4.2",
     "react-autosuggest": "^9.0.1",
-    "react-codemirror": "^0.3.0",
+    "react-codemirror2": "^4.0.1",
     "react-color": "^2.11.1",
     "react-dom": "^15.4.2",
     "react-inspector": "^1.1.2",
diff --git a/src/app/js/components/column/messageSender/MessageSenderView.js b/src/app/js/components/column/messageSender/MessageSenderView.js
index 93b383d..c732318 100644
--- a/src/app/js/components/column/messageSender/MessageSenderView.js
+++ b/src/app/js/components/column/messageSender/MessageSenderView.js
@@ -5,7 +5,7 @@
  */
 
 import React, { Component } from 'react'
-import CodeMirror from 'react-codemirror'
+import { Controlled as CodeMirror } from 'react-codemirror2'
 import 'codemirror/mode/javascript/javascript'
 import Autosuggest from 'react-autosuggest'
 
@@ -27,7 +27,7 @@ class MessageSender extends Component {
 
         this.handleMessageSend = this.handleMessageSend.bind(this)
         this.handleEventNameChange = this.handleEventNameChange.bind(this)
-        this.handleMessageChange = this.handleMessageChange.bind(this)
+        this.handleMessageBeforeChange = this.handleMessageBeforeChange.bind(this)
         this.handleClearClick = this.handleClearClick.bind(this)
         this.onSuggestionsFetchRequested = this.onSuggestionsFetchRequested.bind(this)
         this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this)
@@ -63,14 +63,13 @@ class MessageSender extends Component {
         })
     }
 
-    handleMessageChange (newValue) {
+    handleMessageBeforeChange (editor, data, value) {
         const state = this.state
         const messageCollection = state.messageCollection.slice()
-        messageCollection[state.messageInEditor] = newValue
+        messageCollection[state.messageInEditor] = value
         this.setState({
             messageCollection,
-            // message: newValue,
-            messageIsJson: this.jsonOrText(newValue)
+            messageIsJson: this.jsonOrText(value)
         })
     }
 
@@ -271,7 +270,7 @@ class MessageSender extends Component {
                     <CodeMirror
                         className="column-editor"
                         value={state.messageCollection[state.messageInEditor]}
-                        onChange={this.handleMessageChange}
+                        onBeforeChange={this.handleMessageBeforeChange}
                         options={{mode: {name: 'javascript', json: true}}}
                     />