flowchart

browser/components/MarkdownPreview.js

@@ -3,7 +3,23 @@ import markdown from 'browser/lib/markdown'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
 import consts from 'browser/lib/consts'
+import Raphael from 'raphael'
+import flowchart from 'flowchart'
 
+function decodeHTMLEntities (text) {
+  var entities = [
+    ['apos', '\''],
+    ['amp', '&'],
+    ['lt', '<'],
+    ['gt', '>']
+  ]
+
+  for (var i = 0, max = entities.length; i < max; ++i) {
+    text = text.replace(new RegExp('&' + entities[i][0] + ';', 'g'), entities[i][1])
+  }
+
+  return text
+}
 const { remote } = require('electron')
 const { app } = remote
 const path = require('path')
@@ -64,14 +80,15 @@ export default class MarkdownPreview extends React.Component {
     e.preventDefault()
     e.stopPropagation()
 
-    let href = e.target.getAttribute('href')
+    let anchor = e.target.closest('a')
+    let href = anchor.getAttribute('href')
     if (_.isString(href) && href.match(/^#/)) {
       let targetElement = this.refs.root.contentWindow.document.getElementById(href.substring(1, href.length))
       if (targetElement != null) {
         this.getWindow().scrollTo(0, targetElement.offsetTop)
       }
     } else {
-      shell.openExternal(e.target.href)
+      shell.openExternal(href)
     }
   }
 
@@ -182,18 +199,40 @@ export default class MarkdownPreview extends React.Component {
       ? codeBlockTheme
       : 'default'
 
-    Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('.code code'), (el) => {
+    Array.prototype.forEach
-      let syntax = CodeMirror.findModeByName(el.className)
+      .call(this.refs.root.contentWindow.document.querySelectorAll('.code code'), (el) => {
-      if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
+        let syntax = CodeMirror.findModeByName(el.className)
-      CodeMirror.requireMode(syntax.mode, () => {
+        if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
-        let content = el.innerHTML
+        CodeMirror.requireMode(syntax.mode, () => {
-        el.innerHTML = ''
+          let content = el.innerHTML
-        el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
+          el.innerHTML = ''
-        CodeMirror.runMode(content, syntax.mime, el, {
+          el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
-          tabSize: indentSize
+          CodeMirror.runMode(content, syntax.mime, el, {
+            tabSize: indentSize
+          })
         })
       })
-    })
+    let opts = {}
+    if (this.props.theme === 'dark') {
+      opts['font-color'] = '#DDD'
+      opts['line-color'] = '#DDD'
+      opts['element-color'] = '#DDD'
+      opts['fill'] = '#3A404C'
+    }
+    Array.prototype.forEach
+      .call(this.refs.root.contentWindow.document.querySelectorAll('.flowchart'), (el) => {
+        Raphael.setWindow(this.getWindow())
+        try {
+          let diagram = flowchart.parse(decodeHTMLEntities(el.innerHTML))
+          el.innerHTML = ''
+          diagram.drawSVG(el, opts)
+          Array.prototype.forEach.call(el.querySelectorAll('a'), (el) => {
+            el.addEventListener('click', this.anchorClickHandler)
+          })
+        } catch (e) {
+          console.error(e)
+        }
+      })
   }
 
   focus () {

browser/components/markdown.styl

@@ -202,6 +202,9 @@ pre
   margin 0 0 1em
   display flex
   line-height 1.4em
+  &.flowchart
+    display flex
+    justify-content center
   &.CodeMirror
     height initial
     &>code
@@ -279,7 +282,7 @@ body[data-theme="dark"]
 
   code
     border-color darken(themeDarkBorder, 10%)
-    background-color lighten(themeDarkPreview, 5%)
+    background-color lighten(themeDarkPreview, 10%)
 
   pre
     border-color lighten(#21252B, 20%)

browser/lib/markdown.js

@@ -20,6 +20,9 @@ var md = markdownit({
   html: true,
   xhtmlOut: true,
   highlight: function (str, lang) {
+    if (lang === 'flowchart') {
+      return `<pre class="flowchart">${str}</pre>`
+    }
     return '<pre class="code">' +
     createGutter(str) +
     '<code class="' + lang + '">' +

lib/finder.html

@@ -33,6 +33,9 @@
   <script src="../node_modules/codemirror/keymap/sublime.js"></script>
   <script src="../node_modules/codemirror/addon/runmode/runmode.js"></script>
 
+  <script src="../compiled/raphael.js"></script>
+  <script src="../compiled/flowchart.js"></script>
+
   <script src="../compiled/katex.js"></script>
   <script src="../compiled/react.js"></script>
   <script src="../compiled/react-dom.js"></script>

lib/main.html

@@ -61,6 +61,9 @@
 
   <script src="../node_modules/codemirror/addon/edit/continuelist.js"></script>
 
+  <script src="../compiled/raphael.js"></script>
+  <script src="../compiled/flowchart.js"></script>
+
   <script src="../compiled/katex.js"></script>
   <script src="../compiled/react.js"></script>
   <script src="../compiled/react-dom.js"></script>

oh-my-cdn.json

@@ -6,6 +6,8 @@
     "redux": "https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js",
     "react-redux": "https://unpkg.com/react-redux@4.4.5/dist/react-redux.min.js",
     "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"
+    "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"
   }
 }

webpack-skeleton.js

@@ -47,7 +47,9 @@ var config = {
       'react-dom': 'var ReactDOM',
       'react-redux': 'var ReactRedux',
       'codemirror': 'var CodeMirror',
-      'redux': 'var Redux'
+      'redux': 'var Redux',
+      'raphael': 'var Raphael',
+      'flowchart': 'var flowchart'
     }
   ]
 }