Markdown editor switching
This commit is contained in:
@ -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);
|
||||
|
Reference in New Issue
Block a user