Markdown editor switching

src/components/Widgets/MarkdownControl.js

@@ -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);