User can choose whether to initialize markdown editor with edit mode …

Example/components/ExampleWithOnChangeContent.js

@@ -16,7 +16,9 @@ var ExampleWithOnChangeContent = React.createClass({
         <MarkdownEditor
           initialContent='My initial content'
           iconsSet='materialize-ui'
-          onContentChange={this._onContentChange} />
+          onContentChange={this._onContentChange}
+          editMode
+        />
       </div>
     );
   },

README.md

@@ -52,6 +52,7 @@ React.render(<TestComponent />, document.getElementById('content'));
 Optional props:
 
    - ```onContentChange```, function to be called on each content change, getting the new content as an argument (as the property name says!)
+   - ```editMode```, can choose whether to initialize markdown editor with edit mode or preview mode. `true` by default
    - ```styles```, see [Styling](#styling) below
 
 You can also listen to content changes on the editor. If you are using Reflux, by listening to the changes on ```MarkdownEditorContentStore```.

src/MarkdownEditor.js

@@ -33,12 +33,13 @@ var MarkdownEditor = React.createClass({
     initialContent: React.PropTypes.string.isRequired,
     iconsSet: React.PropTypes.oneOf(['font-awesome', 'materialize-ui']).isRequired,
     onContentChange: React.PropTypes.func,
-    editorTabs: React.PropTypes.bool
+    editorTabs: React.PropTypes.bool,
+    editMode: React.PropTypes.bool
   },
 
   getInitialState: function() {
-    var uniqueInstanceRef = Math.random().toString(36).substring(7)
-    return {content: this.props.initialContent, inEditMode: true, instanceRef: uniqueInstanceRef};
+    var uniqueInstanceRef = Math.random().toString(36).substring(7);
+    return {content: this.props.initialContent, inEditMode: this.props.editMode, instanceRef: uniqueInstanceRef};
   },
 
   render: function() {
@@ -71,7 +72,8 @@ var MarkdownEditor = React.createClass({
           {editorMenu}
           <MarkdownEditorTabs styles={{ styleMarkdownEditorTabs: this.props.styles.styleMarkdownEditorTabs,
                                         styleTab: this.props.styles.styleTab,
-                                        styleActiveTab: this.props.styles.styleActiveTab}} />
+                                        styleActiveTab: this.props.styles.styleActiveTab}}
+                              editMode={this.state.inEditMode} />
         </div>
         {divContent}
       </div>
@@ -177,7 +179,8 @@ MarkdownEditor.defaultProps = {
             'right': '20px',
             'top': '10px'
         }
-      }
+      },
+  editMode: true
 }
 
 module.exports = MarkdownEditor;

src/components/MarkdownEditorTabs.js

@@ -8,9 +8,13 @@ var objectAssign = require('object-assign');
 var MarkdownEditorTabs = React.createClass({
   mixins: [Reflux.ListenerMixin],
 
+  propTypes: {
+    editMode: React.PropTypes.bool
+  },
+
   getInitialState: function() {
     return {
-      activeTab: 0
+      activeTab: this.props.editMode ? 0 : 1
     };
   },