v0.7.5

Just fix a trivial typo.

browser/components/CodeEditor.js

@@ -37,6 +37,9 @@ export default class CodeEditor extends React.Component {
       }
       this.props.onBlur != null && this.props.onBlur(e)
     }
+    this.loadStyleHandler = (e) => {
+      this.editor.refresh()
+    }
   }
 
   componentDidMount () {
@@ -50,6 +53,7 @@ export default class CodeEditor extends React.Component {
       tabSize: this.props.indentSize,
       indentWithTabs: this.props.indentType !== 'space',
       keyMap: 'sublime',
+      inputStyle: 'textarea',
       extraKeys: {
         Tab: function (cm) {
           if (cm.somethingSelected()) cm.indentSelection('add')
@@ -71,11 +75,16 @@ export default class CodeEditor extends React.Component {
 
     this.editor.on('blur', this.blurHandler)
     this.editor.on('change', this.changeHandler)
+
+    let editorTheme = document.getElementById('editorTheme')
+    editorTheme.addEventListener('load', this.loadStyleHandler)
   }
 
   componentWillUnmount () {
     this.editor.off('blur', this.blurHandler)
     this.editor.off('change', this.changeHandler)
+    let editorTheme = document.getElementById('editorTheme')
+    editorTheme.removeEventListener('load', this.loadStyleHandler)
   }
 
   componentDidUpdate (prevProps, prevState) {
@@ -85,7 +94,7 @@ export default class CodeEditor extends React.Component {
     }
     if (prevProps.theme !== this.props.theme) {
       this.editor.setOption('theme', this.props.theme)
-      needRefresh = true
+      // editor should be refreshed after css loaded
     }
     if (prevProps.fontSize !== this.props.fontSize) {
       needRefresh = true

browser/components/MarkdownEditor.js

@@ -9,7 +9,8 @@ class MarkdownEditor extends React.Component {
     super(props)
 
     this.state = {
-      status: 'PREVIEW'
+      status: 'PREVIEW',
+      renderValue: props.value
     }
   }
 
@@ -21,6 +22,33 @@ class MarkdownEditor extends React.Component {
     this.value = this.refs.code.value
   }
 
+  componentWillReceiveProps (props) {
+    if (props.value !== this.props.value) {
+      this.queueRendering(props.value)
+    }
+  }
+
+  componentWillUnmount () {
+    this.cancelQueue()
+  }
+
+  queueRendering (value) {
+    clearTimeout(this.renderTimer)
+    this.renderTimer = setTimeout(() => {
+      this.renderPreview(value)
+    }, 500)
+  }
+
+  cancelQueue () {
+    clearTimeout(this.renderTimer)
+  }
+
+  renderPreview (value) {
+    this.setState({
+      renderValue: value
+    })
+  }
+
   handleChange (e) {
     this.value = this.refs.code.value
     this.props.onChange(e)
@@ -110,10 +138,13 @@ class MarkdownEditor extends React.Component {
 
   reload () {
     this.refs.code.reload()
+    this.cancelQueue()
+    this.renderPreview(this.props.value)
   }
 
   render () {
     let { className, value, config } = this.props
+
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
     let editorIndentSize = parseInt(config.editor.indentSize, 10)
@@ -153,10 +184,11 @@ class MarkdownEditor extends React.Component {
           codeBlockTheme={config.preview.codeBlockTheme}
           codeBlockFontFamily={config.editor.fontFamily}
           lineNumber={config.preview.lineNumber}
+          indentSize={editorIndentSize}
           ref='preview'
           onContextMenu={(e) => this.handleContextMenu(e)}
           tabIndex='0'
-          value={value}
+          value={this.state.renderValue}
           onMouseUp={(e) => this.handlePreviewMouseUp(e)}
           onMouseDown={(e) => this.handlePreviewMouseDown(e)}
           onCheckboxClick={(e) => this.handleCheckboxClick(e)}

browser/components/MarkdownPreview.js

@@ -1,11 +1,63 @@
 import React, { PropTypes } from 'react'
 import markdown from 'browser/lib/markdown'
 import _ from 'lodash'
-import hljsTheme from 'browser/lib/hljsThemes'
+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 = [
+    ['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')
 
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
-const { shell } = require('electron')
+const appPath = 'file://' + (process.env.NODE_ENV === 'production'
+  ? app.getAppPath()
+  : path.resolve())
 
+function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber) {
+  return `
+@font-face {
+  font-family: 'Lato';
+  src: url('${appPath}/resources/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Regular.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+${markdownStyle}
+body {
+  font-family: ${fontFamily.join(', ')};
+  font-size: ${fontSize}px;
+}
+code {
+  font-family: ${codeBlockFontFamily.join(', ')};
+}
+.lineNumber {
+  ${lineNumber && 'display: block !important;'}
+  font-family: ${codeBlockFontFamily.join(', ')};
+}
+`
+}
+
+const { shell } = require('electron')
 const OSX = global.process.platform === 'darwin'
 
 const defaultFontFamily = ['helvetica', 'arial', 'sans-serif']
@@ -30,14 +82,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)
     }
   }
 
@@ -68,9 +121,17 @@ export default class MarkdownPreview extends React.Component {
   }
 
   componentDidMount () {
-    this.refs.root.setAttribute('sandbox', 'allow-same-origin')
+    this.refs.root.setAttribute('sandbox', 'allow-scripts')
     this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler)
+
+    this.refs.root.contentWindow.document.head.innerHTML = `
+      <style id='style'></style>
+      <link rel="stylesheet" href="${appPath}/compiled/katex-style.css">
+      <link rel="stylesheet" href="${appPath}/node_modules/codemirror/lib/codemirror.css">
+      <link rel="stylesheet" id="codeTheme">
+    `
     this.rewriteIframe()
+    this.applyStyle()
 
     this.refs.root.contentWindow.document.addEventListener('mousedown', this.mouseDownHandler)
     this.refs.root.contentWindow.document.addEventListener('mouseup', this.mouseUpHandler)
@@ -83,71 +144,113 @@ export default class MarkdownPreview extends React.Component {
   }
 
   componentDidUpdate (prevProps) {
-    if (prevProps.value !== this.props.value ||
-      prevProps.fontFamily !== this.props.fontFamily ||
+    if (prevProps.value !== this.props.value) this.rewriteIframe()
+    if (prevProps.fontFamily !== this.props.fontFamily ||
       prevProps.fontSize !== this.props.fontSize ||
       prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
       prevProps.codeBlockTheme !== this.props.codeBlockTheme ||
       prevProps.lineNumber !== this.props.lineNumber ||
-      prevProps.theme !== this.props.theme
-    ) this.rewriteIframe()
+      prevProps.theme !== this.props.theme) {
+      this.applyStyle()
+      this.rewriteIframe()
+    }
   }
 
-  rewriteIframe () {
-    Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
-      el.removeEventListener('click', this.anchorClickHandler)
-    })
-    Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
-      el.removeEventListener('click', this.checkboxClickHandler)
-    })
-
-    let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, theme } = this.props
+  applyStyle () {
+    let { fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
       ? [fontFamily].concat(defaultFontFamily)
       : defaultFontFamily
     codeBlockFontFamily = _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
       ? [codeBlockFontFamily].concat(defaultCodeBlockFontFamily)
       : defaultCodeBlockFontFamily
-    codeBlockTheme = hljsTheme().some((theme) => theme.name === codeBlockTheme) ? codeBlockTheme : 'xcode'
 
-    this.refs.root.contentWindow.document.head.innerHTML = `
-      <style>
-        @font-face {
-          font-family: 'Lato';
-          src: url('../resources/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
-               url('../resources/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
-               url('../resources/fonts/Lato-Regular.ttf') format('truetype');
-          font-style: normal;
-          font-weight: normal;
-          text-rendering: optimizeLegibility;
+    this.setCodeTheme(codeBlockTheme)
+    this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, lineNumber)
   }
-        ${markdownStyle}
-        body {
-          font-family: ${fontFamily.join(', ')};
-          font-size: ${fontSize}px;
+
+  setCodeTheme (theme) {
+    theme = consts.THEMES.some((_theme) => _theme === theme)
+      ? theme
+      : 'default'
+    this.getWindow().document.getElementById('codeTheme').href = `${appPath}/node_modules/codemirror/theme/${theme}.css`
   }
-        code {
-          font-family: ${codeBlockFontFamily.join(', ')};
-        }
-        .lineNumber {
-          ${lineNumber && 'display: block !important;'}
-          font-family: ${codeBlockFontFamily.join(', ')};
-          opacity: 0.5;
-        }
-      </style>
-      <link rel="stylesheet" href="../node_modules/highlight.js/styles/${codeBlockTheme}.css">
-      <link rel="stylesheet" href="../compiled/katex-style.css">
-    `
+
+  rewriteIframe () {
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.removeEventListener('click', this.anchorClickHandler)
+    })
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
+      el.removeEventListener('click', this.checkboxClickHandler)
+    })
+
+    let { value, theme, indentSize, codeBlockTheme } = this.props
 
     this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
     this.refs.root.contentWindow.document.body.innerHTML = markdown.render(value)
 
-    Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
       el.addEventListener('click', this.anchorClickHandler)
     })
-    Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
       el.addEventListener('click', this.checkboxClickHandler)
     })
+
+    codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme)
+      ? codeBlockTheme
+      : 'default'
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.code code'), (el) => {
+      let syntax = CodeMirror.findModeByName(el.className)
+      if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
+      CodeMirror.requireMode(syntax.mode, () => {
+        let content = el.innerHTML
+        el.innerHTML = ''
+        el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
+        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'
+    // }
+    _.forEach(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)
+        _.forEach(el.querySelectorAll('a'), (el) => {
+          el.addEventListener('click', this.anchorClickHandler)
+        })
+      } 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
+      }
+    })
   }
 
   focus () {

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
@@ -191,7 +197,7 @@ code
   padding 0.2em 0.4em
   background-color #f7f7f7
   border-radius 3px
-  font-size 0.85em
+  font-size 1em
   text-decoration none
   margin-right 2px
 pre
@@ -200,26 +206,40 @@ pre
   border-radius 5px
   overflow-x auto
   margin 0 0 1em
-  line-height 1.35
+  display flex
+  line-height 1.4em
+  &.flowchart, &.sequence
+    display flex
+    justify-content center
+    background-color white
+  &.CodeMirror
+    height initial
+    &>code
+      flex 1
+      overflow-x auto
   code
-    margin 0
     background-color inherit
+    margin 0
     padding 0
     border none
     border-radius 0
-    pre
-      border none
-      margin -5px
   &>span.lineNumber
     display none
-    float left
-    font-size 0.85em
-    margin 0 0.5em 0 -0.5em
+    font-size 1em
+    padding 0.5em 0
+    margin -0.5em 0.5em -0.5em -0.5em
     border-right 1px solid
     text-align right
+    border-top-left-radius 4px
+    border-bottom-left-radius 4px
+    &.CodeMirror-gutters
+      position initial
+      top initial
+      left initial
+      min-height 0 !important
     &>span
       display block
-      padding 0 .5em 0 1em
+      padding 0 .5em 0
 table
   display block
   width 100%
@@ -269,7 +289,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/finder/NoteDetail.js

@@ -185,11 +185,13 @@ class NoteDetail extends React.Component {
 
     return (
       <MarkdownPreview styleName='root'
+        theme={config.ui.theme}
         fontSize={config.preview.fontSize}
         fontFamily={config.preview.fontFamily}
         codeBlockTheme={config.preview.codeBlockTheme}
         codeBlockFontFamily={config.editor.fontFamily}
         lineNumber={config.preview.lineNumber}
+        indentSize={editorIndentSize}
         value={note.content}
       />
     )

browser/lib/customMeta.js

@@ -1,4 +1,4 @@
 import CodeMirror from 'codemirror'
 import _ from 'lodash'
 
-CodeMirror.modeInfo.push({name: 'Stylus', mime: 'text/x-styl', mode: 'stylus', ext: ['styl']})
+CodeMirror.modeInfo.push({name: 'Stylus', mime: 'text/x-styl', mode: 'stylus', ext: ['styl'], alias: ['styl']})

browser/lib/hljsThemes.js

@@ -1,78 +0,0 @@
-const hljsThemeList = [
-  {caption: 'Default', name: 'default'},
-  {caption: 'Agate', name: 'agate'},
-  {caption: 'Androidstudio', name: 'androidstudio'},
-  {caption: 'Arduino Light', name: 'arduino-light'},
-  {caption: 'Arta', name: 'arta'},
-  {caption: 'Ascetic', name: 'ascetic'},
-  {caption: 'Atelier Cave Dark', name: 'atelier-cave-dark'},
-  {caption: 'Atelier Cave Light', name: 'atelier-cave-light'},
-  {caption: 'Atelier Dune Dark', name: 'atelier-dune-dark'},
-  {caption: 'Atelier Dune Light', name: 'atelier-dune-light'},
-  {caption: 'Atelier Estuary Dark', name: 'atelier-estuary-dark'},
-  {caption: 'Atelier Estuary Light', name: 'atelier-estuary-light'},
-  {caption: 'Atelier Forest Dark', name: 'atelier-forest-dark'},
-  {caption: 'Atelier Forest Light', name: 'atelier-forest-light'},
-  {caption: 'Atelier Heath Dark', name: 'atelier-heath-dark'},
-  {caption: 'Atelier Heath Light', name: 'atelier-heath-light'},
-  {caption: 'Atelier Lakeside Dark', name: 'atelier-lakeside-dark'},
-  {caption: 'Atelier Lakeside Light', name: 'atelier-lakeside-light'},
-  {caption: 'Atelier Plateau Dark', name: 'atelier-plateau-dark'},
-  {caption: 'Atelier Plateau Light', name: 'atelier-plateau-light'},
-  {caption: 'Atelier Savanna Dark', name: 'atelier-savanna-dark'},
-  {caption: 'Atelier Savanna Light', name: 'atelier-savanna-light'},
-  {caption: 'Atelier Seaside Dark', name: 'atelier-seaside-dark'},
-  {caption: 'Atelier Seaside Light', name: 'atelier-seaside-light'},
-  {caption: 'Atelier Sulphurpool Dark', name: 'atelier-sulphurpool-dark'},
-  {caption: 'Atelier Sulphurpool Light', name: 'atelier-sulphurpool-light'},
-  {caption: 'Brown Paper', name: 'brown-paper'},
-  {caption: 'Codepen Embed', name: 'codepen-embed'},
-  {caption: 'Color Brewer', name: 'color-brewer'},
-  {caption: 'Dark', name: 'dark'},
-  {caption: 'Darkula', name: 'darkula'},
-  {caption: 'Docco', name: 'docco'},
-  {caption: 'Dracula', name: 'dracula'},
-  {caption: 'Far', name: 'far'},
-  {caption: 'Foundation', name: 'foundation'},
-  {caption: 'Github Gist', name: 'github-gist'},
-  {caption: 'Github', name: 'github'},
-  {caption: 'Googlecode', name: 'googlecode'},
-  {caption: 'Grayscale', name: 'grayscale'},
-  {caption: 'Gruvbox Dark', name: 'gruvbox.dark'},
-  {caption: 'Gruvbox Light', name: 'gruvbox.light'},
-  {caption: 'Hopscotch', name: 'hopscotch'},
-  {caption: 'Hybrid', name: 'hybrid'},
-  {caption: 'Idea', name: 'idea'},
-  {caption: 'Ir Black', name: 'ir-black'},
-  {caption: 'Kimbie Dark', name: 'kimbie.dark'},
-  {caption: 'Kimbie Light', name: 'kimbie.light'},
-  {caption: 'Magula', name: 'magula'},
-  {caption: 'Mono Blue', name: 'mono-blue'},
-  {caption: 'Monokai Sublime', name: 'monokai-sublime'},
-  {caption: 'Monokai', name: 'monokai'},
-  {caption: 'Obsidian', name: 'obsidian'},
-  {caption: 'Paraiso Dark', name: 'paraiso-dark'},
-  {caption: 'Paraiso Light', name: 'paraiso-light'},
-  {caption: 'Pojoaque', name: 'pojoaque'},
-  {caption: 'Qtcreator Dark', name: 'qtcreator_dark'},
-  {caption: 'Qtcreator Light', name: 'qtcreator_light'},
-  {caption: 'Railscasts', name: 'railscasts'},
-  {caption: 'Rainbow', name: 'rainbow'},
-  {caption: 'School Book', name: 'school-book'},
-  {caption: 'Solarized Dark', name: 'solarized-dark'},
-  {caption: 'Solarized Light', name: 'solarized-light'},
-  {caption: 'Sunburst', name: 'sunburst'},
-  {caption: 'Tomorrow Night Blue', name: 'tomorrow-night-blue'},
-  {caption: 'Tomorrow Night Bright', name: 'tomorrow-night-bright'},
-  {caption: 'Tomorrow Night Eighties', name: 'tomorrow-night-eighties'},
-  {caption: 'Tomorrow Night', name: 'tomorrow-night'},
-  {caption: 'Tomorrow', name: 'tomorrow'},
-  {caption: 'Vs', name: 'vs'},
-  {caption: 'Xcode', name: 'xcode'},
-  {caption: 'Xt 256', name: 'xt256'},
-  {caption: 'Zenburn', name: 'zenburn'}
-]
-
-export default function hljsTheme () {
-  return hljsThemeList
-}

browser/lib/markdown.js

@@ -1,7 +1,6 @@
 import markdownit from 'markdown-it'
 import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
-import hljs from 'highlight.js'
 import _ from 'lodash'
 
 const katex = window.katex
@@ -10,9 +9,9 @@ function createGutter (str) {
   let lc = (str.match(/\n/g) || []).length
   let lines = []
   for (let i = 1; i <= lc; i++) {
-    lines.push('<span>' + i + '</span>')
+    lines.push('<span class="CodeMirror-linenumber">' + i + '</span>')
   }
-  return '<span class="lineNumber">' + lines.join('') + '</span>'
+  return '<span class="lineNumber CodeMirror-gutters">' + lines.join('') + '</span>'
 }
 
 var md = markdownit({
@@ -21,19 +20,16 @@ var md = markdownit({
   html: true,
   xhtmlOut: true,
   highlight: function (str, lang) {
-    if (lang && hljs.getLanguage(lang)) {
-      try {
-        return '<pre class="hljs">' +
-        createGutter(str) +
-        '<code>' +
-        hljs.highlight(lang, str).value +
-        '</code></pre>'
-      } catch (e) {}
+    if (lang === 'flowchart') {
+      return `<pre class="flowchart">${str}</pre>`
     }
-    return '<pre class="hljs">' +
+    if (lang === 'sequence') {
+      return `<pre class="sequence">${str}</pre>`
+    }
+    return '<pre class="code">' +
     createGutter(str) +
-    '<code>' +
-    str.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\"/g, '&quot;') +
+    '<code class="' + lang + '">' +
+    str +
     '</code></pre>'
   }
 })
@@ -139,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, '')

browser/main/Detail/SnippetNoteDetail.js

@@ -507,7 +507,7 @@ class SnippetNoteDetail extends React.Component {
         key={index}
         style={{zIndex: isActive ? 5 : 4}}
       >
-        {snippet.mode === 'markdown'
+        {snippet.mode === 'Markdown' || snippet.mode === 'GitHub Flavored Markdown'
           ? <MarkdownEditor styleName='tabView-content'
             value={snippet.content}
             config={config}

browser/main/Detail/SnippetNoteDetail.styl

@@ -165,3 +165,6 @@ body[data-theme="dark"]
 
   .tabList .plusButton
     navDarkButtonColor()
+  .override
+    button
+      border-color $ui-dark-borderColor

browser/main/SideNav/StorageItem.styl

@@ -133,7 +133,6 @@
   border-top-right-radius 2px
   border-bottom-right-radius 2px
   height 26px
-  margin-top -26px
   line-height 26px
 
 .root--folded

browser/main/StatusBar/StatusBar.styl

@@ -1,6 +1,6 @@
 .root
   absolute bottom left right
-  height $statusBar-height - 1
+  height $statusBar-height
   background-color $ui-backgroundColor
   border-top $ui-border
   display flex
@@ -40,6 +40,7 @@
 body[data-theme="dark"]
   .root
     background-color $ui-dark-backgroundColor
+    border-color $ui-dark-borderColor
 
   .zoom
     border-color $ui-dark-borderColor

browser/main/TopBar/index.js

@@ -71,10 +71,10 @@ class TopBar extends React.Component {
         break
       }
     }
-    if (storage == null) throw new Error('No storage to create a note')
+    if (storage == null) alert('No storage to create a note')
     let folder = _.find(storage.folders, {key: params.folderKey})
     if (folder == null) folder = storage.folders[0]
-    if (folder == null) throw new Error('No folder to craete a note')
+    if (folder == null) alert('No folder to create a note')
 
     return {
       storage,

browser/main/global.styl

@@ -92,6 +92,8 @@ body[data-theme="dark"]
   font-family inherit !important
   line-height 1.4em
   height 100%
+.CodeMirror > div > textarea
+  margin-bottom -1em
 .CodeMirror-focused .CodeMirror-selected
   background #B1D7FE
 .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection

browser/main/modals/PreferencesModal/ConfigTab.js

@@ -1,7 +1,6 @@
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ConfigTab.styl'
-import hljsTheme from 'browser/lib/hljsThemes'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
 import consts from 'browser/lib/consts'
@@ -154,7 +153,6 @@ class ConfigTab extends React.Component {
       </p>
       : null
     let themes = consts.THEMES
-    let hljsThemeList = hljsTheme()
     let { config } = this.state
 
     return (
@@ -369,8 +367,8 @@ class ConfigTab extends React.Component {
                 onChange={(e) => this.handleUIChange(e)}
               >
                 {
-                  hljsThemeList.map((theme) => {
-                    return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
+                  themes.map((theme) => {
+                    return (<option value={theme} key={theme}>{theme}</option>)
                   })
                 }
               </select>

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -86,6 +86,10 @@
   p
     line-height 1.2
 
+colorDarkControl()
+  border-color $ui-dark-borderColor
+  background-color $ui-dark-backgroundColor
+  color $ui-dark-text-color
 body[data-theme="dark"]
   .root
     color $ui-dark-text-color
@@ -108,6 +112,7 @@ body[data-theme="dark"]
   .group-control-rightButton
     colorDarkPrimaryButton()
   .group-hint
-    border-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
-    color $ui-dark-text-color
+    colorDarkControl()
+  .group-section-control
+    select, .group-section-control-input
+      colorDarkControl()

browser/main/modals/PreferencesModal/StorageItem.js

@@ -300,10 +300,10 @@ class StorageItem extends React.Component {
     })
 
     if (index === 0) {
-      let { storage, dispatch } = this.props
+      let { storage } = this.props
       dataApi.removeStorage(storage.key)
         .then(() => {
-          dispatch({
+          store.dispatch({
             type: 'REMOVE_STORAGE',
             storageKey: storage.key
           })

docs/build.md

@@ -29,6 +29,11 @@ $ npm run hot
 ```
 > Actually the app can be start with `npm start`. However, the app will use the compiled script.
 
+If the app gets stuck on load, you may need to run the following.
+```
+$ npm run vendor
+```
+
 By this, webpack will watch the code changes and apply it automatically.
 
 > ### Notice
@@ -41,7 +46,7 @@ By this, webpack will watch the code changes and apply it automatically.
 We use Grunt.
 Acutal deploy can be run by `grunt`. However, you shouldn't use because the default task is including codesign and authenticode.
 
-So, we prepare a script which just make an excutable file.
+So, we prepare a script which just make an executable file.
 
 ```
 grunt pre-build

lib/finder.html

@@ -8,7 +8,6 @@
 
 
   <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
-  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
   <link rel="shortcut icon" href="favicon.ico">
   <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
 
@@ -34,21 +33,28 @@
   <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>
   <script src="../compiled/redux.js"></script>
   <script src="../compiled/react-redux.js"></script>
+  <script>
+    window._ = require('lodash');
+  </script>
+  <script src="../compiled/sequence-diagram.js"></script>
   <script>
     const electron = require('electron')
     electron.webFrame.setZoomLevelLimits(1, 1)
     const _ = require('lodash')
-    var scriptUrl = _.find(electron.remote.process.argv, a => a === '--hot')
+    var scriptUrl = _.find(electron.remote.process.argv, (a) => a === '--hot')
       ? 'http://localhost:8080/assets/finder.js'
       : '../compiled/finder.js'
     var scriptEl = document.createElement('script')
-    scriptEl.setAttribute("type","text/javascript")
-    scriptEl.setAttribute("src", scriptUrl)
+    scriptEl.setAttribute('type', 'text/javascript')
+    scriptEl.setAttribute('src', scriptUrl)
     document.body.appendChild(scriptEl)
   </script>
 </body>

lib/main-menu.js

@@ -54,7 +54,7 @@ var file = {
   submenu: [
     {
       label: 'New Note',
-      accelerator: OSX ? 'Command + N' : 'Control + N',
+      accelerator: 'CmdOrCtrl + N',
       click: function () {
         mainWindow.webContents.send('top:new-note')
       }
@@ -125,20 +125,14 @@ var view = {
   submenu: [
     {
       label: 'Reload',
-      accelerator: (function () {
-        if (process.platform === 'darwin') return 'Command+R'
-        else return 'Ctrl+R'
-      })(),
+      accelerator: 'CmdOrCtrl+R',
       click: function () {
         BrowserWindow.getFocusedWindow().reload()
       }
     },
     {
       label: 'Toggle Developer Tools',
-      accelerator: (function () {
-        if (process.platform === 'darwin') return 'Command+Alt+I'
-        else return 'Ctrl+Shift+I'
-      })(),
+      accelerator: OSX ? 'Command+Alt+I' : 'Ctrl+Shift+I',
       click: function () {
         BrowserWindow.getFocusedWindow().toggleDevTools()
       }

lib/main-window.js

@@ -3,11 +3,14 @@ const app = electron.app
 const BrowserWindow = electron.BrowserWindow
 const path = require('path')
 
+var showMenu = process.platform !== 'win32'
+
 var mainWindow = new BrowserWindow({
   width: 1080,
   height: 720,
   minWidth: 420,
   minHeight: 320,
+  autoHideMenuBar: showMenu,
   webPreferences: {
     zoomFactor: 1.0,
     blinkFeatures: 'OverlayScrollbars'

lib/main.html

@@ -5,7 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
 
   <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
-  <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
   <link rel="shortcut icon" href="../resources/favicon.ico">
   <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
   <title>Boostnote</title>
@@ -62,6 +61,13 @@
 
   <script src="../node_modules/codemirror/addon/edit/continuelist.js"></script>
 
+  <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>
   <script src="../compiled/react-dom.js"></script>
@@ -70,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

@@ -6,6 +6,9 @@
     "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",
+    "sequence-diagram": "https://cdn.rawgit.com/bramp/js-sequence-diagrams/master/build/sequence-diagram-min.js"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boost",
-  "version": "0.7.0",
+  "version": "0.7.5",
   "description": "Boostnote",
   "main": "index.js",
   "license": "GPL-3.0",
@@ -36,7 +36,10 @@
     "Romain Bazile (https://github.com/gromain)",
     "Bruno Paz (https://github.com/brpaz)",
     "Fabian Mueller (https://github.com/dotcs)",
-    "Yoshihisa Mochihara (https://github.com/yosmoc)"
+    "Yoshihisa Mochihara (https://github.com/yosmoc)",
+    "Mike Resoli (https://github.com/mikeres0)",
+    "tjado (https://github.com/tejado)",
+    "Sota Sugiura (https://github.com/sota1235)"
   ],
   "bugs": {
     "url": "https://github.com/BoostIO/Boostnote/issues"
@@ -48,7 +51,6 @@
     "codemirror": "^5.19.0",
     "electron-gh-releases": "^2.0.2",
     "font-awesome": "^4.3.0",
-    "highlight.js": "^9.3.0",
     "immutable": "^3.8.1",
     "lodash": "^4.11.1",
     "markdown-it": "^6.0.1",

readme-ja.md

@@ -1,6 +1,6 @@
 # Boostnote
 
-> [Boostnote store](#goods)をはじめました!! :tada: そして、[Pateron](https://www.patreon.com/boostnote)からも私達を支援することができます!
+> [Boostnote store](https://boostnote.paintory.com/)をはじめました!! :tada: そして、[Pateron](https://www.patreon.com/boostnote)からも私達を支援することができます!
 
 ![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662404/3aa42396-7f55-11e6-88bf-f4ec6505ee8f.png)
 ![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662139/f491adac-7f53-11e6-8631-2a447af9f36a.png)
@@ -73,6 +73,10 @@
 - [Romain Bazile](https://github.com/gromain)
 - [Bruno Paz](https://github.com/brpaz)
 - [Fabian Mueller](https://github.com/dotcs)
+- [Yoshihisa Mochihara](https://github.com/yosmoc)
+- [Mike Resoli](https://github.com/mikeres0)
+- [tjado](https://github.com/tejado)
+- [sota1235](https://github.com/sota1235)
 
 ## Copyright & License
 

readme-ko.md

@@ -1,6 +1,6 @@
 # Boostnote
 
-> [Boostnote store](#goods)가 생겼습니다!! :tada: 그리고,[Pateron](https://www.patreon.com/boostnote)에서도 저희를 지원 하실 수 있습니다.!
+> [Boostnote store](https://boostnote.paintory.com/)가 생겼습니다!! :tada: 그리고,[Pateron](https://www.patreon.com/boostnote)에서도 저희를 지원 하실 수 있습니다.!
 
 ![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662404/3aa42396-7f55-11e6-88bf-f4ec6505ee8f.png)
 ![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662139/f491adac-7f53-11e6-8631-2a447af9f36a.png)
@@ -74,6 +74,10 @@
 - [Romain Bazile](https://github.com/gromain)
 - [Bruno Paz](https://github.com/brpaz)
 - [Fabian Mueller](https://github.com/dotcs)
+- [Yoshihisa Mochihara](https://github.com/yosmoc)
+- [Mike Resoli](https://github.com/mikeres0)
+- [tjado](https://github.com/tejado)
+- [sota1235](https://github.com/sota1235)
 
 ## Copyright & License
 

readme.md

@@ -1,35 +1,37 @@
-# Boostnote
+<h1 align="center">
+  <a href="https://github.com/BoostIO/Boostnote"><img src="http://b00st.io/assets/img/logo.png" alt="Boostnote" width="180"></a>
+  <br>
+  Boostnote
+  <br>
+  <br>
+</h1>
+<h4 align="center">Note app built for developers. </h4>
+<h5 align="center">macOS, Windows and Linux</h5>
+<h5 align="center">Built with Electron, React + Redux, Webpack and CSSModules</h5>
+<h1> </h1>
 
-> We launched [Boostnote store](#goods)!! :tada: Also, you can support us from [Patreon](https://www.patreon.com/boostnote)!
+> We launched our [Boostnote store](https://boostnote.paintory.com/)!! :tada: Also, you can support us via [Patreon](https://www.patreon.com/boostnote) and [Open collective](https://opencollective.com/boostnote)!
 
 ![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662404/3aa42396-7f55-11e6-88bf-f4ec6505ee8f.png)
 ![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662139/f491adac-7f53-11e6-8631-2a447af9f36a.png)
 
-Simple opensource note app for developer.
+[日本語](./readme-ja.md) - [한국어](./readme-ko.md)
 
-You can use the issue tracker of this repository for
-- asking a question about Boostnote
-- giving a feedback about Boostnote and its future plan
-- reporting a bug of Boostnote
-- wanting to contribute Boostnote
+## Goals
+* We want our users to enjoying writing _anything_. :grinning:
+* Open sourced forever!
 
-We have a slack if you want to engage us deeply, ask @rokt33r to join.
+See upcoming features and bug fixes [here](https://github.com/BoostIO/Boostnote/issues/68)
+## Feedback
+Please use the [issue tracker](https://github.com/BoostIO/Boostnote/issues) for questions, bug reporting and contribution information.
 
-- [日本語](./readme-ja.md)
-- [한국어](./readme-ko.md)
+## Development
+If you want to join our dev Slack group ask @rokt33r.
+**[Build instructions](docs/build.md)**
 
-## Goal
-
-We just want you to enjoying writing anything. :grinning:
-
-- Target OS : OSX, Windows, Linux(also mobile somewhen!)
-- Cloud : Google drive, Dropbox, One drive, iCloud...
-- Remaining opensource forever!
-
-Check planned features [here](https://github.com/BoostIO/Boostnote/issues/68)!
-
-## Inspired by
+[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
 
+## Inspirations
 - Atom
 - Quiver
 - Evernote
@@ -39,50 +41,33 @@ Check planned features [here](https://github.com/BoostIO/Boostnote/issues/68)!
 - Gistbox
 - Snippets Lab
 
-## Using stack
-
-- Electron
-- React
-- Webpack
-- Redux
-- CSSModules
-
-## Codestyle
-
-[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
-
-## Development
-
-- [Build](docs/build.md)
-
-## Goods
-
+## Store
 <img src="https://b00st.io/images/t3.png" width="250"/>
 <img src="https://b00st.io/images/t1.png" width="250"/>
 
-We're currently selling some goods from [Boostnote store](https://boostnote.paintory.com/).
+We're selling Boostnote goods on the [Boostnote store](https://boostnote.paintory.com/).
 
-The product can be sent anywhere in the world. This store is powered by [Paintory](https://paintory.com/)
+Products are shipped worldwide. Powered by [Paintory](https://paintory.com/)
 
 ## Donation
-
-We launched a [Patreon page](https://www.patreon.com/boostnote).
+* [Patreon](https://www.patreon.com/boostnote)
+* [Open collective](https://opencollective.com/boostnote)
 
 ## Author & Maintainer
-
 [Rokt33r(Dick Choi of MAISIN&CO.)](https://github.com/rokt33r)
 
 ## Contributors
-
 - [Kazu Yokomizo](https://github.com/kazup01)
 - [dojineko](https://github.com/dojineko)
 - [Romain Bazile](https://github.com/gromain)
 - [Bruno Paz](https://github.com/brpaz)
 - [Fabian Mueller](https://github.com/dotcs)
 - [Yoshihisa Mochihara](https://github.com/yosmoc)
+- [Mike Resoli](https://github.com/mikeres0)
+- [tjado](https://github.com/tejado)
+- [sota1235](https://github.com/sota1235)
 
 ## Copyright & License
-
 Copyright (C) 2016 MAISIN&CO.
 
 [GPL v3](./LICENSE).

webpack-skeleton.js

@@ -35,7 +35,6 @@ var config = {
     'lodash',
     'markdown-it',
     'moment',
-    'highlight.js',
     'markdown-it-emoji',
     'fs-jetpack',
     '@rokt33r/markdown-it-math',
@@ -48,7 +47,10 @@ 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',
+      'sequence-diagram': 'var Diagram'
     }
   ]
 }