Use monaco for playground (#1374)

* feat: use monaco for playground

* fix: don't automatically indent code added to playground

* fix: automatic resizing

package.json

@@ -85,13 +85,16 @@
     "jsdom": "^8.3.0",
     "json-loader": "^0.5.7",
     "lint-staged": "^3.3.1",
+    "loader-utils": "^1.2.3",
     "mini-css-extract-plugin": "^0.4.3",
     "mocha": "^5.2.0",
+    "monaco-editor-webpack-plugin": "^1.7.0",
     "nyc": "^13.2.0",
     "prettier": "^1.15.1",
     "react": "^15.5.0",
     "react-codemirror2": "^4.1.0",
     "react-dom": "^15.3.2",
+    "react-monaco-editor": "^0.26.2",
     "react-portal": "^4.2.0",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",

playground/app.js

@@ -1,25 +1,12 @@
 import React, { Component } from "react";
 import { render } from "react-dom";
-import { UnControlled as CodeMirror } from "react-codemirror2";
-import "codemirror/mode/javascript/javascript";
+import MonacoEditor from "react-monaco-editor";
 
 import { shouldRender } from "../src/utils";
 import { samples } from "./samples";
 import Form from "../src";
 
-// Import a few CodeMirror themes; these are used to match alternative
-// bootstrap ones.
-import "codemirror/lib/codemirror.css";
-import "codemirror/theme/dracula.css";
-import "codemirror/theme/blackboard.css";
-import "codemirror/theme/mbo.css";
-import "codemirror/theme/ttcn.css";
-import "codemirror/theme/solarized.css";
-import "codemirror/theme/monokai.css";
-import "codemirror/theme/eclipse.css";
-
 const log = type => console.log.bind(console, type);
-const fromJson = json => JSON.parse(json);
 const toJson = val => JSON.stringify(val, null, 2);
 const liveSettingsSchema = {
   type: "object",
@@ -30,20 +17,6 @@ const liveSettingsSchema = {
     liveOmit: { type: "boolean", title: "Live omit" },
   },
 };
-const cmOptions = {
-  theme: "default",
-  height: "auto",
-  viewportMargin: Infinity,
-  mode: {
-    name: "javascript",
-    json: true,
-    statementIndent: 2,
-  },
-  lineNumbers: true,
-  lineWrapping: true,
-  indentWithTabs: false,
-  tabSize: 2,
-};
 const themes = {
   default: {
     stylesheet:
@@ -133,6 +106,13 @@ const themes = {
   },
 };
 
+const monacoEditorOptions = {
+  minimap: {
+    enabled: false,
+  },
+  automaticLayout: true,
+};
+
 class GeoPosition extends Component {
   constructor(props) {
     super(props);
@@ -194,22 +174,28 @@ class Editor extends Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    return shouldRender(this, nextProps, nextState);
+    if (this.state.valid) {
+      return (
+        JSON.stringify(JSON.parse(nextProps.code)) !==
+        JSON.stringify(JSON.parse(this.state.code))
+      );
+    }
+    return false;
   }
 
-  onCodeChange = (editor, metadata, code) => {
-    this.setState({ valid: true, code });
-    setImmediate(() => {
-      try {
-        this.props.onChange(fromJson(this.state.code));
-      } catch (err) {
-        this.setState({ valid: false, code });
-      }
-    });
+  onCodeChange = code => {
+    try {
+      const parsedCode = JSON.parse(code);
+      this.setState({ valid: true, code }, () =>
+        this.props.onChange(parsedCode)
+      );
+    } catch (err) {
+      this.setState({ valid: false, code });
+    }
   };
 
   render() {
-    const { title, theme } = this.props;
+    const { title } = this.props;
     const icon = this.state.valid ? "ok" : "remove";
     const cls = this.state.valid ? "valid" : "invalid";
     return (
@@ -218,11 +204,13 @@ class Editor extends Component {
           <span className={`${cls} glyphicon glyphicon-${icon}`} />
           {" " + title}
         </div>
-        <CodeMirror
+        <MonacoEditor
+          language="json"
           value={this.state.code}
+          theme="vs-light"
           onChange={this.onCodeChange}
-          autoCursor={false}
-          options={Object.assign({}, cmOptions, { theme })}
+          height={400}
+          options={monacoEditorOptions}
         />
       </div>
     );