From b30511eb5146c6b678d2e4435128afbd7cb65261 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 18 Jul 2015 03:25:02 +0900
Subject: [PATCH] add Markdown

---
 bower.json                                |  3 +-
 browser/main/Components/BlueprintForm.jsx | 30 ++++++--
 browser/main/Components/LaunchModal.jsx   |  2 +-
 browser/main/Mixins/Markdown.js           | 12 ++++
 browser/main/index.html                   | 53 +++++++-------
 browser/styles/main/index.styl            |  8 ++-
 browser/styles/mixins/marked.styl         | 88 +++++++++++++++++++++++
 browser/styles/shared/modal.styl          | 37 ++++++++--
 browser/styles/vars.styl                  |  7 ++
 package.json                              |  2 +-
 webpack.config.js                         |  3 +-
 11 files changed, 202 insertions(+), 43 deletions(-)
 create mode 100644 browser/main/Mixins/Markdown.js
 create mode 100644 browser/styles/mixins/marked.styl

diff --git a/bower.json b/bower.json
index 1f801466..85708203 100644
--- a/bower.json
+++ b/bower.json
@@ -5,6 +5,7 @@
     "fontawesome": "~4.3.0",
     "react-router": "~0.13.3",
     "reflux": "~0.2.8",
-    "moment": "~2.10.3"
+    "moment": "~2.10.3",
+    "markdown-it": "~4.3.1"
   }
 }
diff --git a/browser/main/Components/BlueprintForm.jsx b/browser/main/Components/BlueprintForm.jsx
index a054b61f..85307a8e 100644
--- a/browser/main/Components/BlueprintForm.jsx
+++ b/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>
diff --git a/browser/main/Components/LaunchModal.jsx b/browser/main/Components/LaunchModal.jsx
index f3278aa6..152963dc 100644
--- a/browser/main/Components/LaunchModal.jsx
+++ b/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>
diff --git a/browser/main/Mixins/Markdown.js b/browser/main/Mixins/Markdown.js
new file mode 100644
index 00000000..f2cccf91
--- /dev/null
+++ b/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
diff --git a/browser/main/index.html b/browser/main/index.html
index 5ad8cda6..afde77d1 100644
--- a/browser/main/index.html
+++ b/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>
diff --git a/browser/styles/main/index.styl b/browser/styles/main/index.styl
index 282c5534..2de1ec8b 100644
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -16,9 +16,13 @@ h1
 h2
   font-size 1.5em
 h3
-  font-size 1.3em
+  font-size 1.17em
 h4
-  font-size 1.15em
+  font-size 1em
+h5
+  font-size 0.83em
+h6
+  font-size 0.67em
 a
   color brandColor
   &:hover
diff --git a/browser/styles/mixins/marked.styl b/browser/styles/mixins/marked.styl
new file mode 100644
index 00000000..87ddccb3
--- /dev/null
+++ b/browser/styles/mixins/marked.styl
@@ -0,0 +1,88 @@
+marked()
+  line-height 1.2em
+  h1
+    font-size 2em
+    margin 0.67em auto
+  h2
+    font-size 1.5em
+    margin 0.83em auto
+  h3
+    font-size 1.17em
+    margin 1em auto
+  h4
+    font-size 1em
+    margin 1.33em auto
+  h5
+    font-size 0.83em
+    margin 1.67em auto
+  h6
+    font-size 0.67em
+    margin 2.33em auto
+  h1, h2, h3, h4, h5, h6
+    font-weight bold
+  img
+    max-width 100%
+  strong
+    font-weight bold
+  em
+    font-style italic
+  s
+    text-decoration line-through
+  blockquote
+    border-left solid 4px brandBorderColor
+    margin 1em 0
+    padding 0 25px
+  ul
+    list-style-type disc
+    padding-left 35px
+    li
+      display list-item
+      margin 0.5em 0
+    &>li>ul
+      list-style-type circle
+      &>li>ul
+        list-style-type square
+  ol
+    list-style-type decimal
+    padding-left 35px
+    li
+      display list-item
+      margin 0.5em 0
+  code
+    font-family monospace
+    padding 2px 4px
+    border solid 1px borderColor
+    border-radius 4px
+    font-size 0.9em
+  pre
+    padding 5px
+    border solid 1px borderColor
+    border-radius 5px
+    margin 0.5em 0
+    &>code
+      padding 0
+      border none
+      border-radius 0
+  table
+    thead
+      tr
+        background-color tableHeadBgColor
+      th
+        border-style: solid;
+        padding: 5px;
+        border-width: 1px 0 2px 1px;
+        border-color borderColor
+        &:last-child
+          border-right solid 1px borderColor
+    tbody
+      tr:nth-child(2n + 1)
+        background-color tableOddBgColor
+      tr:nth-child(2n)
+        background-color tableEvenBgColor
+      td
+        border-style: solid;
+        padding: 5px;
+        border-width: 0 0 1px 1px;
+        border-color borderColor
+        &:last-child
+          border-right solid 1px borderColor
diff --git a/browser/styles/shared/modal.styl b/browser/styles/shared/modal.styl
index ad517ae9..dac18c35 100644
--- a/browser/styles/shared/modal.styl
+++ b/browser/styles/shared/modal.styl
@@ -31,7 +31,7 @@
       .modal-control
         float right
 
-  .launch-modal
+  .LaunchModal
     .modal-tab
       text-align center
       margin-bottom 15px
@@ -40,14 +40,15 @@
         border-radius 0
         border-width 1px
         width 150px
+        border-radius 0
         &:nth-child(1)
-          border-top-left-radius 10px
-          border-bottom-left-radius 10px
           border-right solid 1px borderColor
+          border-top-left-radius 5px
+          border-bottom-left-radius 5px
         &:nth-child(2)
           border-left none
-          border-top-right-radius 10px
-          border-bottom-right-radius 10px
+          border-top-right-radius 5px
+          border-bottom-right-radius 5px
   textarea.snippetDescription
     height 75px
     font-size 0.9em
@@ -60,6 +61,30 @@
     .Select-menu-outer
       border-color borderColor
   .ace_editor
-    height 250px
     border-radius 5px
     border solid 1px borderColor
+  .SnippetForm
+    .ace_editor
+      height 258px
+  .BlueprintForm
+    .ace_editor
+      height 358px
+    .previewMode
+      position absolute
+      right 15px
+      font-size 0.8em
+      line-height 24px
+      padding 0 10px
+      top 139px
+      background-color transparentify(invBackgroundColor, 0.2)
+      color invTextColor
+      border-top-right-radius 5px
+  .marked
+    height 360px
+    overflow-x hidden
+    overflow-y auto
+    box-sizing border-box
+    padding 5px
+    border solid 1px borderColor
+    border-radius 5px
+    marked()
diff --git a/browser/styles/vars.styl b/browser/styles/vars.styl
index 78c60e2b..813b5199 100644
--- a/browser/styles/vars.styl
+++ b/browser/styles/vars.styl
@@ -15,6 +15,9 @@ textColor = #4D4D4D
 backgroundColor= white
 fontSize= 16px
 
+invBackgroundColor = #4C4C4C
+invTextColor = white
+
 btnColor = #888
 btnHighlightenColor = #000
 
@@ -29,5 +32,9 @@ planetAnchorActiveBgColor = white
 popupShadow = 0 0 5px 0 #888
 modalBaseColor = transparentify(white, 65%)
 
+tableHeadBgColor = white
+tableOddBgColor = #F9F9F9
+tableEvenBgColor = white
+
 facebookColor= #3b5998
 githubBtn= #201F1F
diff --git a/package.json b/package.json
index 1addcff6..9d2b661e 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   "dependencies": {
     "dotenv": "^1.1.0",
     "halogen": "^0.1.10",
-    "marked": "^0.3.3",
+    "markdown-it": "^4.3.1",
     "moment": "^2.10.3",
     "node-jsx": "^0.13.3",
     "node-notifier": "^4.2.1",
diff --git a/webpack.config.js b/webpack.config.js
index 578856d0..f821a5d3 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -29,7 +29,8 @@ module.exports = {
     'react-router': 'ReactRouter',
     'ace': 'ace',
     'reflux': 'Reflux',
-    'moment': 'moment'
+    'moment': 'moment',
+    'markdown-it': 'markdownit'
   },
   resolve: {
     extensions: ['', '.js', '.jsx']