From 5466bf42a6a0e399cfbded3d61b8e7d74f366680 Mon Sep 17 00:00:00 2001
From: suz <suziewithz@gmail.com>
Date: Mon, 5 Feb 2018 21:29:31 +0900
Subject: [PATCH] User can choose whether to initialize markdown editor with
 edit mode or preview mode

---
 Example/components/ExampleWithOnChangeContent.js |  4 +++-
 README.md                                        |  1 +
 src/MarkdownEditor.js                            | 13 ++++++++-----
 src/components/MarkdownEditorTabs.js             |  6 +++++-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/Example/components/ExampleWithOnChangeContent.js b/Example/components/ExampleWithOnChangeContent.js
index 48646a7..b1f194c 100644
--- a/Example/components/ExampleWithOnChangeContent.js
+++ b/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>
     );
   },
diff --git a/README.md b/README.md
index 57d78ed..c99788a 100644
--- a/README.md
+++ b/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```.
diff --git a/src/MarkdownEditor.js b/src/MarkdownEditor.js
index 4a62bc4..e4be75c 100644
--- a/src/MarkdownEditor.js
+++ b/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;
diff --git a/src/components/MarkdownEditorTabs.js b/src/components/MarkdownEditorTabs.js
index 294d600..b8b4c87 100644
--- a/src/components/MarkdownEditorTabs.js
+++ b/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
     };
   },