Update dapp

package.json

@@ -26,6 +26,7 @@
     "mobx-react": "^4.3.5",
     "react": "16.1.1",
     "react-codemirror": "1.0.0",
+    "react-codemirror2": "3.0.7",
     "react-dom": "16.1.1",
     "react-element-to-jsx-string": "13.1.0",
     "react-event-listener": "^0.5.1",

src/Application/application.css

@@ -44,6 +44,7 @@ pre {
   display: flex;
   flex: 1;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .eval {

src/Snippets/snippets.css

@@ -19,6 +19,7 @@
   display: flex;
   flex: 1;
   flex-direction: row;
+  overflow: hidden;
 }
 
 .panel {
@@ -57,6 +58,7 @@
   display: flex;
   flex: 1;
   flex-direction: column;
+  overflow: hidden;
 
   > * {
     flex: 1;

src/Snippets/snippets.js

@@ -17,7 +17,8 @@
 import keycode from 'keycode';
 import { observer } from 'mobx-react';
 import React, { Component } from 'react';
-import CodeMirror from 'react-codemirror';
+// import CodeMirror from 'react-codemirror';
+import { Controlled as CodeMirror } from 'react-codemirror2';
 import EventListener from 'react-event-listener';
 
 import Console from '../Console';
@@ -51,24 +52,26 @@ export default class Snippets extends Component {
           </div>
         </div>
         <div className={ styles.code }>
-          <CodeMirror
-            ref={ this.setRef }
-            onChange={ this.handleChange }
-            options={ {
-              autofocus: true,
-              extraKeys: {
-                'Ctrl-Space': 'autocomplete'
-              },
-              keyMap: 'sublime',
-              highlightSelectionMatches: {
-                delay: 0,
-                showToken: false
-              },
-              lineNumbers: true,
-              mode: 'javascript'
-            } }
-            value={ code }
-          />
+          <div>
+            <CodeMirror
+              ref={ this.setRef }
+              onChange={ this.handleChange }
+              options={ {
+                autofocus: true,
+                extraKeys: {
+                  'Ctrl-Space': 'autocomplete'
+                },
+                keyMap: 'sublime',
+                highlightSelectionMatches: {
+                  delay: 0,
+                  showToken: false
+                },
+                lineNumbers: true,
+                mode: 'javascript'
+              } }
+              value={ code }
+            />
+          </div>
           <div className={ styles.console }>
             <Console />
           </div>
@@ -207,12 +210,12 @@ export default class Snippets extends Component {
     this.snippetsStore.select(id);
   };
 
-  setRef = (node) => {
-    const codeMirror = node
-      ? node.getCodeMirror()
-      : null;
+  setRef = () => {
+    // const codeMirror = node
+    //   ? node.getCodeMirror()
+    //   : null;
 
-    this.snippetsStore.setCodeMirror(codeMirror);
+    // this.snippetsStore.setCodeMirror(codeMirror);
   };
 
   stopPropagation = (event) => {

src/Snippets/snippets.store.js

@@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import keycode from 'keycode';
-import { action, computed, map, observable, transaction } from 'mobx';
+import { action, computed, observable, transaction } from 'mobx';
 import store from 'store';
 
 import { evaluate } from '../utils';
@@ -25,7 +25,7 @@ const LS_SNIPPETS_KEY = '_console::snippets';
 let instance;
 
 export default class SnippetsStore {
-  @observable files = map();
+  @observable files = observable.map();
   @observable nextName = null;
   @observable renaming = null;
   @observable selected = null;

src/index.js

@@ -14,6 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import 'codemirror/lib/codemirror.css';
 import 'codemirror/addon/dialog/dialog';
 import 'codemirror/addon/dialog/dialog.css';
 import 'codemirror/addon/hint/javascript-hint';
@@ -23,7 +24,6 @@ import 'codemirror/addon/search/match-highlighter';
 import 'codemirror/addon/search/search';
 import 'codemirror/addon/search/searchcursor';
 import 'codemirror/keymap/sublime';
-import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/javascript/javascript';
 
 // Custom codemirror style