mirror of
https://github.com/status-im/embark-area-51.git
synced 2025-01-21 12:49:11 +00:00
Added monaco editor via react-monaco-editor
Needs to pull version from package.json
This commit is contained in:
emizzle
parent
19be254e48
commit
bb95c16750
@ -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>
|
||||
|
||||
5
embark-ui/public/monaco-editor-worker-loader-proxy.js
Normal file
5
embark-ui/public/monaco-editor-worker-loader-proxy.js
Normal file
@ -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
|
||||
@ -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
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,11 +1,26 @@
|
||||
import React from 'react';
|
||||
import MonacoEditor from 'react-monaco-editor';
|
||||
|
||||
const Fiddle = () => (
|
||||
<React.Fragment>
|
||||
<h1>Fiddle</h1>
|
||||
<p>Play around with contract code and deploy against your running node.</p>
|
||||
<div id="fiddle-container"/>
|
||||
const Fiddle = ({code, options, editorDidMount, onChange}) => {
|
||||
options = options || {
|
||||
selectOnLineNumbers: true
|
||||
};
|
||||
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;
|
||||
|
||||
@ -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 (
|
||||
<h1>
|
||||
<i>Loading accounts...</i>
|
||||
</h1>
|
||||
)
|
||||
}
|
||||
// const { accounts } = this.props;
|
||||
// if (!accounts.data) {
|
||||
// return (
|
||||
// <h1>
|
||||
// <i>Loading accounts...</i>
|
||||
// </h1>
|
||||
// )
|
||||
// }
|
||||
|
||||
if (accounts.error) {
|
||||
return (
|
||||
<h1>
|
||||
<i>Error API...</i>
|
||||
</h1>
|
||||
)
|
||||
}
|
||||
// if (accounts.error) {
|
||||
// return (
|
||||
// <h1>
|
||||
// <i>Error API...</i>
|
||||
// </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);
|
||||
|
||||
32
package-lock.json
generated
32
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user