From f84098554a3d50ec02255603bb0a145b3aa0c6b2 Mon Sep 17 00:00:00 2001 From: Clemens Date: Wed, 13 Jul 2016 18:16:31 +0200 Subject: added code editor and file upload --- web/src/js/components/common/CodeEditor.jsx | 41 +++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 web/src/js/components/common/CodeEditor.jsx (limited to 'web/src/js/components/common/CodeEditor.jsx') diff --git a/web/src/js/components/common/CodeEditor.jsx b/web/src/js/components/common/CodeEditor.jsx new file mode 100644 index 00000000..d7e6aabb --- /dev/null +++ b/web/src/js/components/common/CodeEditor.jsx @@ -0,0 +1,41 @@ +import React, { Component, PropTypes } from 'react' +import { render } from 'react-dom'; +import brace from 'brace'; +import AceEditor from 'react-ace'; +import Button from './Button' + + +import 'brace/mode/javascript'; +import 'brace/mode/json'; +import 'brace/theme/monokai'; + + + + +export default class CodeEditor extends Component{ + constructor( props ) { + super(props) + this.state = {value: this.props.value} + } + + onChange(newValue) { + this.setState({value: newValue}) + } + + render() { + return ( +
e.stopPropagation()}> + this.onChange(e)} + mode="javascript" + theme="monokai" + value={this.state.value} + width="100%" + name="codeEditor" + editorProps={{$blockScrolling: Infinity}} + /> +
+ ) + } +} -- cgit v1.2.3 From 45349b3597f53ee08207b20eb8bff9dfc9166aa8 Mon Sep 17 00:00:00 2001 From: Clemens Date: Wed, 13 Jul 2016 20:53:05 +0200 Subject: chaged editor style --- web/src/js/components/common/CodeEditor.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'web/src/js/components/common/CodeEditor.jsx') diff --git a/web/src/js/components/common/CodeEditor.jsx b/web/src/js/components/common/CodeEditor.jsx index d7e6aabb..85da0507 100644 --- a/web/src/js/components/common/CodeEditor.jsx +++ b/web/src/js/components/common/CodeEditor.jsx @@ -7,7 +7,7 @@ import Button from './Button' import 'brace/mode/javascript'; import 'brace/mode/json'; -import 'brace/theme/monokai'; +import 'brace/theme/kuroir'; @@ -28,7 +28,7 @@ export default class CodeEditor extends Component{ this.onChange(e)} mode="javascript" - theme="monokai" + theme="kuroir" value={this.state.value} width="100%" name="codeEditor" -- cgit v1.2.3 From 5f3782dd5fb8be4c196f57cb07fd1cc2fd6b2f56 Mon Sep 17 00:00:00 2001 From: Clemens Date: Thu, 14 Jul 2016 23:01:34 +0200 Subject: change way to edit --- web/src/js/components/common/CodeEditor.jsx | 24 ++++++------------------ 1 file changed, 6 insertions(+), 18 deletions(-) (limited to 'web/src/js/components/common/CodeEditor.jsx') diff --git a/web/src/js/components/common/CodeEditor.jsx b/web/src/js/components/common/CodeEditor.jsx index 85da0507..b10b13ed 100644 --- a/web/src/js/components/common/CodeEditor.jsx +++ b/web/src/js/components/common/CodeEditor.jsx @@ -1,40 +1,28 @@ import React, { Component, PropTypes } from 'react' import { render } from 'react-dom'; -import brace from 'brace'; import AceEditor from 'react-ace'; -import Button from './Button' - import 'brace/mode/javascript'; -import 'brace/mode/json'; import 'brace/theme/kuroir'; - - - export default class CodeEditor extends Component{ - constructor( props ) { - super(props) - this.state = {value: this.props.value} - } - - onChange(newValue) { - this.setState({value: newValue}) + static propTypes = { + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, } render() { return (
e.stopPropagation()}> this.onChange(e)} mode="javascript" theme="kuroir" - value={this.state.value} + onChange={this.props.onChange} + name="rea" + value={this.props.value} width="100%" - name="codeEditor" editorProps={{$blockScrolling: Infinity}} /> -
) } -- cgit v1.2.3 From 87797d7ac07108ce5fd00902918e4900907b94b6 Mon Sep 17 00:00:00 2001 From: Clemens Date: Fri, 15 Jul 2016 14:41:30 +0200 Subject: added new btn, changed to codemirror --- web/src/js/components/common/CodeEditor.jsx | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) (limited to 'web/src/js/components/common/CodeEditor.jsx') diff --git a/web/src/js/components/common/CodeEditor.jsx b/web/src/js/components/common/CodeEditor.jsx index b10b13ed..c122cf94 100644 --- a/web/src/js/components/common/CodeEditor.jsx +++ b/web/src/js/components/common/CodeEditor.jsx @@ -1,9 +1,7 @@ import React, { Component, PropTypes } from 'react' import { render } from 'react-dom'; -import AceEditor from 'react-ace'; +import Codemirror from 'react-codemirror'; -import 'brace/mode/javascript'; -import 'brace/theme/kuroir'; export default class CodeEditor extends Component{ static propTypes = { @@ -12,17 +10,12 @@ export default class CodeEditor extends Component{ } render() { + let options = { + lineNumbers: true + }; return (
e.stopPropagation()}> - +
) } -- cgit v1.2.3 From 48728af43ad746d70ef3e251dc28b75028dea1e6 Mon Sep 17 00:00:00 2001 From: Clemens Date: Tue, 19 Jul 2016 12:23:20 +0200 Subject: moved flow editor state to redux --- web/src/js/components/common/CodeEditor.jsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'web/src/js/components/common/CodeEditor.jsx') diff --git a/web/src/js/components/common/CodeEditor.jsx b/web/src/js/components/common/CodeEditor.jsx index c122cf94..5b2305a8 100644 --- a/web/src/js/components/common/CodeEditor.jsx +++ b/web/src/js/components/common/CodeEditor.jsx @@ -5,17 +5,25 @@ import Codemirror from 'react-codemirror'; export default class CodeEditor extends Component{ static propTypes = { - value: PropTypes.string.isRequired, + content: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, } + constructor(props){ + super(props) + } + + componentWillMount(){ + this.props.onChange(this.props.content) + } + render() { let options = { lineNumbers: true }; return (
e.stopPropagation()}> - +
) } -- cgit v1.2.3