Markdown editor switching

This commit is contained in:
Cássio Zen
2016-08-11 18:21:32 -03:00
parent 994d969247
commit 474abd8f78
4 changed files with 81 additions and 7 deletions

View File

@ -1,16 +1,59 @@
import React, { PropTypes } from 'react';
import RawEditor from './MarkdownControlElements/RawEditor';
import VisualEditor from './MarkdownControlElements/VisualEditor';
import { connect } from 'react-redux';
import { switchVisualMode } from '../../actions/editor';
class MarkdownControl extends React.Component {
constructor(props){
super(props);
this.useVisualEditor = this.useVisualEditor.bind(this);
this.useRawEditor = this.useRawEditor.bind(this);
}
useVisualEditor(){
this.props.switchVisualMode(true);
}
useRawEditor(){
this.props.switchVisualMode(false);
}
renderEditor() {
const { editor, onChange, onAddMedia, getMedia, value } = this.props;
if (editor.get('useVisualMode')) {
return (
<div>
<button onClick={this.useRawEditor}>Switch to Raw Editor</button>
<VisualEditor
onChange={onChange}
onAddMedia={onAddMedia}
getMedia={getMedia}
value={value}
/>
</div>
);
} else {
return (
<div>
<button onClick={this.useVisualEditor}>Switch to Visual Editor</button>
<RawEditor
onChange={onChange}
onAddMedia={onAddMedia}
getMedia={getMedia}
value={value}
/>
</div>
);
}
}
render() {
const { onChange, onAddMedia, getMedia, value } = this.props;
return (
<VisualEditor
onChange={onChange}
onAddMedia={onAddMedia}
getMedia={getMedia}
value={value}
/>
<div>
{ this.renderEditor() }
</div>
);
}
}
@ -18,8 +61,15 @@ class MarkdownControl extends React.Component {
export default MarkdownControl;
MarkdownControl.propTypes = {
editor: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
onAddMedia: PropTypes.func.isRequired,
getMedia: PropTypes.func.isRequired,
switchVisualMode: PropTypes.func.isRequired,
value: PropTypes.node,
};
export default connect(
state => ({ editor: state.editor }),
{ switchVisualMode }
)(MarkdownControl);