Added monaco editor via react-monaco-editor

Needs to pull version from package.json

embark-ui/public/index.html

@@ -37,5 +37,20 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.13.1/min/vs/loader.js"></script>
+    <script>
+      require.config({
+        paths: {
+          'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.13.1/min/vs'
+        }
+      });
+      window.MonacoEnvironment = {
+        getWorkerUrl: function (workerId, label) {
+          return '/monaco-editor-worker-loader-proxy.js';
+        }
+      };
+      require(["vs/editor/editor.main"], function () { })
+    </script>
   </body>
+
 </html>

embark-ui/public/monaco-editor-worker-loader-proxy.js

@@ -0,0 +1,5 @@
+self.MonacoEnvironment = {
+  baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.13.1/min/'
+};
+
+importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.13.1/min/vs/base/worker/workerMain.js'); // eslint-disable-line

embark-ui/src/actions/index.js

@@ -20,6 +20,8 @@ export const accounts = {
   failure: (error) => action(ACCOUNTS[FAILURE], {error})
 };
 
+// Fiddle
+export const FIDDLE_CODE_CHANGE = 'FIDDLE_CODE_CHANGE';
 export const ACCOUNT = createRequestTypes('ACCOUNT');
 export const account = {
   request: (address) => action(ACCOUNT[REQUEST], {address}),
@@ -143,8 +145,8 @@ export function listenToContractLogs() {
   };
 }
 
-export function initBlockHeader(){
+export function fiddleCodeChange(){
   return {
-    type: INIT_BLOCK_HEADER
+    type: FIDDLE_CODE_CHANGE
   };
 }

embark-ui/src/components/Fiddle.js

@@ -1,11 +1,26 @@
 import React from 'react';
+import MonacoEditor from 'react-monaco-editor';
 
-const Fiddle = () => (
+const Fiddle = ({code, options, editorDidMount, onChange}) => {
-  <React.Fragment>
+  options = options || {
-    <h1>Fiddle</h1>
+    selectOnLineNumbers: true
-    <p>Play around with contract code and deploy against your running node.</p>
+  };
-    <div id="fiddle-container"/>
+  return (
+    <React.Fragment>
+      <h1>Fiddle</h1>
+      <p>Play around with contract code and deploy against your running node.</p>
+      <MonacoEditor
+        height="1200"
+        language="sol"
+        theme="vs-dark"
+        value={code}
+        options={options}
+        onChange={onChange}
+        editorDidMount={editorDidMount}
+/>
   </React.Fragment>
-);
+  );
+};
+
 
 export default Fiddle;

embark-ui/src/containers/FiddleContainer.js

@@ -1,44 +1,54 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
-import { connect } from 'react-redux';
+import {connect} from 'react-redux';
-import { fetchAccounts } from '../actions';
+import {fiddleCodeChange} from '../actions';
 import Fiddle from '../components/Fiddle';
 
 class FiddleContainer extends Component {
   componentWillMount() {
-    this.props.fetchAccounts();
+    //this.props.fetchAccounts();
   }
 
   render() {
-    const { accounts } = this.props;
+    // const { accounts } = this.props;
-    if (!accounts.data) {
+    // if (!accounts.data) {
-      return (
+    //   return (
-        <h1>
+    //     <h1>
-          <i>Loading accounts...</i>
+    //       <i>Loading accounts...</i>
-        </h1>
+    //     </h1>
-      )
+    //   )
-    }
+    // }
 
-    if (accounts.error) {
+    // if (accounts.error) {
-      return (
+    //   return (
-        <h1>
+    //     <h1>
-          <i>Error API...</i>
+    //       <i>Error API...</i>
-        </h1>
+    //     </h1>
-      )
+    //   )
-    }
+    // }
+    const options = {
+      selectOnLineNumbers: true,
+      roundedSelection: false,
+      readOnly: false,
+      cursorStyle: 'line',
+      automaticLayout: false,
+    };
+    const code = 'hello world';
 
     return (
-      <Fiddle />
+      <Fiddle options={options} code={code} />
     );
   }
-};
+}
-
 function mapStateToProps(state) {
-  return { accounts: state.accounts }
+  return { 
+    code: state.code,
+    options: state.options
+  };
 }
 
 export default connect(
   mapStateToProps,
   {
-    fetchAccounts
+    fiddleCodeChange
   },
-)(FiddleContainer)
+)(FiddleContainer);

package-lock.json

@@ -989,6 +989,15 @@
         "@types/node": "*"
       }
     },
+    "@types/react": {
+      "version": "16.4.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.7.tgz",
+      "integrity": "sha512-tHpSs7HMyjnpyfzka1G0pYh7rBNdpwGgcIDT4vfV6jUaR69yOHo/vNH2H+d9iYHo9xnX4qDe7UalPe9HiGRkLw==",
+      "dev": true,
+      "requires": {
+        "csstype": "^2.2.0"
+      }
+    },
     "@types/semver": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-5.5.0.tgz",
@@ -3514,6 +3523,12 @@
         "source-map": "^0.5.3"
       }
     },
+    "csstype": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.6.tgz",
+      "integrity": "sha512-tKPyhy0FmfYD2KQYXD5GzkvAYLYj96cMLXr648CKGd3wBe0QqoPipImjGiLze9c8leJK8J3n7ap90tpk3E6HGQ==",
+      "dev": true
+    },
     "cyclist": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@@ -7897,6 +7912,12 @@
       "resolved": "https://registry.npmjs.org/mock-fs/-/mock-fs-4.5.0.tgz",
       "integrity": "sha512-qqudNfOX7ZmX9vm1WIAU+gWlmxVNAnwY6UG3RkFutNywmRCUGP83tujP6IxX2DS1TmcaEZBOhYwDuYEmJYE+3w=="
     },
+    "monaco-editor": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.13.1.tgz",
+      "integrity": "sha512-0Kssg/O3cl1tXP0qAIxhrtMbRnzusFUEvFyt5/fpUbmuVeY3z+TnUx13+3kW16pgacFPXGUTEO/hOPlDeFU/dw==",
+      "dev": true
+    },
     "mout": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/mout/-/mout-0.11.1.tgz",
@@ -9893,6 +9914,17 @@
         }
       }
     },
+    "react-monaco-editor": {
+      "version": "0.17.2",
+      "resolved": "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.17.2.tgz",
+      "integrity": "sha512-/Zm0xJRxu66pCdz6Pth3oUq6g4rE/RD7bFh4rKywS8wLl2uzsKdftK5GqlCPepx0sRR2BXPN+EG/Nl0Pr+BpjA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "monaco-editor": "^0.13.1",
+        "prop-types": "^15.6.1"
+      }
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",

package.json

@@ -73,6 +73,7 @@
     "parse-json": "^4.0.0",
     "promptly": "^2.1.0",
     "propose": "0.0.5",
+    "react-scripts": "^1.1.4",
     "request": "^2.85.0",
     "serve-static": "^1.11.1",
     "shelljs": "^0.5.0",
@@ -107,6 +108,7 @@
     "eslint": "4.13.1",
     "eslint-plugin-react": "^7.10.0",
     "mocha-sinon": "^1.1.4",
+    "react-monaco-editor": "^0.17.2",
     "sinon": "^4.5.0"
   }
 }