Markdown editor switching

src/actions/editor.js

@@ -0,0 +1,8 @@
+export const SWITCH_VISUAL_MODE = 'SWITCH_VISUAL_MODE';
+
+export function switchVisualMode(useVisualMode) {
+  return {
+    type: SWITCH_VISUAL_MODE,
+    payload: useVisualMode
+  };
+}

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
+      <div>
-          onChange={onChange}
+
-          onAddMedia={onAddMedia}
+        { this.renderEditor() }
-          getMedia={getMedia}
+      </div>
-          value={value}
-      />
     );
   }
 }
@@ -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);

src/reducers/editor.js

@@ -0,0 +1,14 @@
+import { Map } from 'immutable';
+import { SWITCH_VISUAL_MODE } from '../actions/editor';
+
+const editor = (state = Map({ useVisualMode: true }), action) => {
+  switch (action.type) {
+    case SWITCH_VISUAL_MODE:
+      return Map({ useVisualMode: action.payload });
+
+    default:
+      return state;
+  }
+};
+
+export default editor;

src/reducers/index.js

@@ -1,5 +1,6 @@
 import auth from './auth';
 import config from './config';
+import editor from './editor';
 import entries, * as fromEntries  from './entries';
 import entryDraft from './entryDraft';
 import collections from './collections';
@@ -9,6 +10,7 @@ const reducers = {
   auth,
   config,
   collections,
+  editor,
   entries,
   entryDraft,
   medias