add Markdown

browser/main/Components/BlueprintForm.jsx

@@ -2,6 +2,7 @@ var React = require('react/addons')
 var ReactRouter = require('react-router')
 var CodeEditor = require('./CodeEditor')
 var Catalyst = require('../Mixins/Catalyst')
+var Markdown = require('../Mixins/Markdown')
 var Select = require('react-select')
 var request = require('superagent')
 
@@ -28,7 +29,11 @@ var getOptions = function (input, callback) {
 }
 
 var BlueprintForm = React.createClass({
-  mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
+  mixins: [Catalyst.LinkedStateMixin, ReactRouter.State, Markdown],
+  statics: {
+    EDIT_MODE: 0,
+    PREVIEW_MODE: 1
+  },
   propTypes: {
     close: React.PropTypes.func
   },
@@ -38,7 +43,8 @@ var BlueprintForm = React.createClass({
         title: '',
         content: '',
         Tags: []
-      }
+      },
+      mode: BlueprintForm.EDIT_MODE
     }
   },
   componentDidMount: function () {
@@ -54,19 +60,31 @@ var BlueprintForm = React.createClass({
     blueprint.content = value
     this.setState({blueprint: blueprint})
   },
+  togglePreview: function () {
+    this.setState({mode: this.state.mode === BlueprintForm.EDIT_MODE ? BlueprintForm.PREVIEW_MODE : BlueprintForm.EDIT_MODE})
+  },
   submit: function () {
     console.log(this.state.blueprint)
   },
   render: function () {
+    var content = this.state.mode === BlueprintForm.EDIT_MODE ? (
+      <div className='form-group'>
+        <CodeEditor onChange={this.handleContentChange} code={this.state.blueprint.content} mode={'markdown'}/>
+      </div>
+    ) : (
+      <div className='form-group'>
+        <div className='previewMode'>Preview mode</div>
+        <div className='marked' dangerouslySetInnerHTML={{__html: ' ' + this.markdown(this.state.blueprint.content)}}></div>
+      </div>
+    )
+
     return (
       <div className='BlueprintForm'>
         <div className='modal-body'>
           <div className='form-group'>
             <input ref='title' className='block-input' valueLink={this.linkState('blueprint.title')} placeholder='Title'/>
           </div>
-          <div className='form-group'>
-            <CodeEditor onChange={this.handleContentChange} code={this.state.blueprint.content} mode={'markdown'}/>
-          </div>
+          {content}
           <div className='form-group'>
             <Select
                 name='Tags'
@@ -79,7 +97,9 @@ var BlueprintForm = React.createClass({
             />
           </div>
         </div>
+
         <div className='modal-footer'>
+            <button onClick={this.togglePreview} className='btn-default'>Toggle Preview</button>
           <div className='modal-control'>
             <button onClick={this.props.close} className='btn-default'>Cancle</button>
             <button onClick={this.submit} className='btn-primary'>Launch</button>