add sequence diagram

browser/components/MarkdownPreview.js

@@ -5,6 +5,7 @@ import CodeMirror from 'codemirror'
 import consts from 'browser/lib/consts'
 import Raphael from 'raphael'
 import flowchart from 'flowchart'
+import SequenceDiagram from 'sequence-diagram'
 
 function decodeHTMLEntities (text) {
   var entities = [
@@ -213,12 +214,12 @@ export default class MarkdownPreview extends React.Component {
       })
     })
     let opts = {}
-    if (this.props.theme === 'dark') {
-      opts['font-color'] = '#DDD'
-      opts['line-color'] = '#DDD'
-      opts['element-color'] = '#DDD'
-      opts['fill'] = '#3A404C'
-    }
+    // if (this.props.theme === 'dark') {
+    //   opts['font-color'] = '#DDD'
+    //   opts['line-color'] = '#DDD'
+    //   opts['element-color'] = '#DDD'
+    //   opts['fill'] = '#3A404C'
+    // }
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.flowchart'), (el) => {
       Raphael.setWindow(this.getWindow())
       try {
@@ -230,6 +231,24 @@ export default class MarkdownPreview extends React.Component {
         })
       } catch (e) {
         console.error(e)
+        el.className = 'flowchart-error'
+        el.innerHTML = 'Flowchart parse error: ' + e.message
+      }
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.sequence'), (el) => {
+      Raphael.setWindow(this.getWindow())
+      try {
+        let diagram = SequenceDiagram.parse(decodeHTMLEntities(el.innerHTML))
+        el.innerHTML = ''
+        diagram.drawSVG(el, {theme: 'simple'})
+        _.forEach(el.querySelectorAll('a'), (el) => {
+          el.addEventListener('click', this.anchorClickHandler)
+        })
+      } catch (e) {
+        console.error(e)
+        el.className = 'sequence-error'
+        el.innerHTML = 'Sequence diagram parse error: ' + e.message
       }
     })
   }

browser/components/markdown.styl

@@ -68,6 +68,12 @@ body
     padding 5px
     margin -5px
     border-radius 5px
+  .flowchart-error, .sequence-error
+    background-color errorBackgroundColor
+    color errorTextColor
+    padding 5px
+    border-radius 5px
+    justify-content left
 li
   label.taskListItem
     margin-left -2em
@@ -202,9 +208,10 @@ pre
   margin 0 0 1em
   display flex
   line-height 1.4em
-  &.flowchart
+  &.flowchart, &.sequence
     display flex
     justify-content center
+    background-color white
   &.CodeMirror
     height initial
     &>code

browser/lib/markdown.js

@@ -23,6 +23,9 @@ var md = markdownit({
     if (lang === 'flowchart') {
       return `<pre class="flowchart">${str}</pre>`
     }
+    if (lang === 'sequence') {
+      return `<pre class="sequence">${str}</pre>`
+    }
     return '<pre class="code">' +
     createGutter(str) +
     '<code class="' + lang + '">' +
@@ -132,13 +135,13 @@ function strip (input) {
       .replace(/`{3}.*\n/g, '')
       .replace(/<(.*?)>/g, '$1')
       .replace(/^[=\-]{2,}\s*$/g, '')
-      .replace(/\[\^.+?\](\: .*?$)?/g, '')
+      .replace(/\[\^.+?\](: .*?$)?/g, '')
       .replace(/\s{0,2}\[.*?\]: .*?$/g, '')
-      .replace(/\!\[.*?\][\[\(].*?[\]\)]/g, '')
+      .replace(/!\[.*?\][\[\(].*?[\]\)]/g, '')
       .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
       .replace(/>/g, '')
       .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
-      .replace(/^\#{1,6}\s*([^#]*)\s*(\#{1,6})?/gm, '$1')
+      .replace(/^#{1,6}\s*([^#]*)\s*(#{1,6})?/gm, '$1')
       .replace(/([\*_]{1,3})(\S.*?\S)\1/g, '$2')
       .replace(/(`{3,})(.*?)\1/gm, '$2')
       .replace(/^-{3,}\s*$/g, '')

lib/main.html

@@ -63,6 +63,10 @@
 
   <script src="../compiled/raphael.js"></script>
   <script src="../compiled/flowchart.js"></script>
+  <script>
+    window._ = require('lodash')
+  </script>
+  <script src="../compiled/sequence-diagram.js"></script>
 
   <script src="../compiled/katex.js"></script>
   <script src="../compiled/react.js"></script>
@@ -72,8 +76,7 @@
   <script type='text/javascript'>
     const electron = require('electron')
     electron.webFrame.setZoomLevelLimits(1, 1)
-    const _ = require('lodash')
-    var scriptUrl = _.find(electron.remote.process.argv, (a) => a === '--hot')
+    var scriptUrl = window._.find(electron.remote.process.argv, (a) => a === '--hot')
       ? 'http://localhost:8080/assets/main.js'
       : '../compiled/main.js'
     var scriptEl = document.createElement('script')

oh-my-cdn.json

@@ -8,6 +8,7 @@
     "katex": "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js",
     "katex-style": "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css",
     "raphael": "https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.js",
-    "flowchart": "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.3/flowchart.js"
+    "flowchart": "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.3/flowchart.js",
+    "sequence-diagram": "https://cdn.rawgit.com/bramp/js-sequence-diagrams/master/build/sequence-diagram-min.js"
   }
 }

webpack-skeleton.js

@@ -49,7 +49,8 @@ var config = {
       'codemirror': 'var CodeMirror',
       'redux': 'var Redux',
       'raphael': 'var Raphael',
-      'flowchart': 'var flowchart'
+      'flowchart': 'var flowchart',
+      'sequence-diagram': 'var Diagram'
     }
   ]
 }