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>

browser/main/Components/LaunchModal.jsx

@@ -60,7 +60,7 @@ var LaunchModal = React.createClass({
     }
 
     return (
-      <div onClick={this.stopPropagation} className='modal launch-modal'>
+      <div onClick={this.stopPropagation} className='LaunchModal modal'>
         <div className='modal-header'>
           <div className='modal-tab'>
             <button className={this.state.currentTab === 'snippet' ? 'btn-primary active' : 'btn-default'} onClick={this.selectSnippetTab}>Snippet</button><button className={this.state.currentTab === 'blueprint' ? 'btn-primary active' : 'btn-default'} onClick={this.selectBlueprintTab}>Blueprint</button>

browser/main/Mixins/Markdown.js

@@ -0,0 +1,12 @@
+var markdownit = require('markdown-it')
+var md = markdownit({
+  typographer: true
+})
+
+var Markdown = {
+  markdown: function (content) {
+    return md.render(content)
+  }
+}
+
+module.exports = Markdown

browser/main/index.html

@@ -7,39 +7,40 @@
   <link rel="shortcut icon" href="favicon.ico">
   <script>
   if (!Object.assign) {
-  Object.defineProperty(Object, 'assign', {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function(target) {
-      'use strict';
-      if (target === undefined || target === null) {
-        throw new TypeError('Cannot convert first argument to object');
-      }
-
-      var to = Object(target);
-      for (var i = 1; i < arguments.length; i++) {
-        var nextSource = arguments[i];
-        if (nextSource === undefined || nextSource === null) {
-          continue;
+    Object.defineProperty(Object, 'assign', {
+      enumerable: false,
+      configurable: true,
+      writable: true,
+      value: function(target) {
+        'use strict';
+        if (target === undefined || target === null) {
+          throw new TypeError('Cannot convert first argument to object');
         }
-        nextSource = Object(nextSource);
 
-        var keysArray = Object.keys(Object(nextSource));
-        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
-          var nextKey = keysArray[nextIndex];
-          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
-          if (desc !== undefined && desc.enumerable) {
-            to[nextKey] = nextSource[nextKey];
+        var to = Object(target);
+        for (var i = 1; i < arguments.length; i++) {
+          var nextSource = arguments[i];
+          if (nextSource === undefined || nextSource === null) {
+            continue;
+          }
+          nextSource = Object(nextSource);
+
+          var keysArray = Object.keys(Object(nextSource));
+          for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
+            var nextKey = keysArray[nextIndex];
+            var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
+            if (desc !== undefined && desc.enumerable) {
+              to[nextKey] = nextSource[nextKey];
+            }
           }
         }
+        return to;
       }
-      return to;
-    }
-  });
-}
+    });
+  }
   </script>
   <script src="../vendor/moment/min/moment.min.js"></script>
+  <script src="../vendor/markdown-it/dist/markdown-it.min.js"></script>
   <script src="../vendor/react/react-with-addons.js"></script>
   <script src="../vendor/react-router/build/umd/ReactRouter.js"></script>
   <script src="../vendor/reflux/dist/reflux.js"></script>