From 518111132b96084adb9935828e4d720b167edf85 Mon Sep 17 00:00:00 2001 From: emizzle Date: Fri, 3 Aug 2018 11:49:07 +1000 Subject: [PATCH] Added monaco editor via react-monaco-editor Needs to pull version from package.json --- embark-ui/public/index.html | 15 +++++ .../monaco-editor-worker-loader-proxy.js | 5 ++ embark-ui/src/actions/index.js | 6 +- embark-ui/src/components/Fiddle.js | 27 +++++++-- embark-ui/src/containers/FiddleContainer.js | 60 +++++++++++-------- package-lock.json | 15 +++++ package.json | 3 +- 7 files changed, 97 insertions(+), 34 deletions(-) create mode 100644 embark-ui/public/monaco-editor-worker-loader-proxy.js diff --git a/embark-ui/public/index.html b/embark-ui/public/index.html index 4a59b05c2..b4e9f3a86 100644 --- a/embark-ui/public/index.html +++ b/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`. --> + + + diff --git a/embark-ui/public/monaco-editor-worker-loader-proxy.js b/embark-ui/public/monaco-editor-worker-loader-proxy.js new file mode 100644 index 000000000..0585b5c06 --- /dev/null +++ b/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 diff --git a/embark-ui/src/actions/index.js b/embark-ui/src/actions/index.js index 2836ce338..130e7a13f 100644 --- a/embark-ui/src/actions/index.js +++ b/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 }; } diff --git a/embark-ui/src/components/Fiddle.js b/embark-ui/src/components/Fiddle.js index f57fcdcc6..b364b4168 100644 --- a/embark-ui/src/components/Fiddle.js +++ b/embark-ui/src/components/Fiddle.js @@ -1,11 +1,26 @@ import React from 'react'; +import MonacoEditor from 'react-monaco-editor'; -const Fiddle = () => ( - -

Fiddle

-

Play around with contract code and deploy against your running node.

-
+const Fiddle = ({code, options, editorDidMount, onChange}) => { + options = options || { + selectOnLineNumbers: true + }; + return ( + +

Fiddle

+

Play around with contract code and deploy against your running node.

+ -); + ); +}; + export default Fiddle; diff --git a/embark-ui/src/containers/FiddleContainer.js b/embark-ui/src/containers/FiddleContainer.js index 8ab5a6e7f..d3fb17b31 100644 --- a/embark-ui/src/containers/FiddleContainer.js +++ b/embark-ui/src/containers/FiddleContainer.js @@ -1,44 +1,54 @@ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; -import { fetchAccounts } from '../actions'; +import React, {Component} from 'react'; +import {connect} from 'react-redux'; +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; - if (!accounts.data) { - return ( -

- Loading accounts... -

- ) - } + // const { accounts } = this.props; + // if (!accounts.data) { + // return ( + //

+ // Loading accounts... + //

+ // ) + // } - if (accounts.error) { - return ( -

- Error API... -

- ) - } + // if (accounts.error) { + // return ( + //

+ // Error API... + //

+ // ) + // } + const options = { + selectOnLineNumbers: true, + roundedSelection: false, + readOnly: false, + cursorStyle: 'line', + automaticLayout: false, + }; + const code = 'hello world'; return ( - + ); } -}; - +} function mapStateToProps(state) { - return { accounts: state.accounts } + return { + code: state.code, + options: state.options + }; } export default connect( mapStateToProps, { - fetchAccounts + fiddleCodeChange }, -)(FiddleContainer) +)(FiddleContainer); diff --git a/package-lock.json b/package-lock.json index 6c195ff78..52fda827b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -756,6 +756,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", @@ -6735,6 +6744,12 @@ "resolved": "https://registry.npmjs.org/mock-fs/-/mock-fs-4.7.0.tgz", "integrity": "sha512-WlQNtUlzMRpvLHf8dqeUmNqfdPjGY29KrJF50Ldb4AcL+vQeR8QH3wQcFMgrhTwb1gHjZn9xggho+84tBskLgA==" }, + "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": "1.1.0", "resolved": "https://registry.npmjs.org/mout/-/mout-1.1.0.tgz", diff --git a/package.json b/package.json index 5b483ed6c..034057cab 100644 --- a/package.json +++ b/package.json @@ -119,7 +119,8 @@ "webpack": "4.19.0", "websocket": "1.0.28", "window-size": "1.1.1", - "webpack-bundle-analyzer": "^2.13.1" + "webpack-bundle-analyzer": "^2.13.1", + "react-scripts": "^1.1.4" }, "author": "Iuri Matias ", "contributors": [],