Merge branch 'fence-attrs' into chart-yaml

browser/components/CodeEditor.js

@@ -292,6 +292,10 @@ export default class CodeEditor extends React.Component {
       this.editor.on('cursorActivity', this.editorActivityHandler)
       this.editor.on('changes', this.editorActivityHandler)
     }
+
+    this.setState({
+      clientWidth: this.refs.root.clientWidth
+    })
   }
 
   expandSnippet (line, cursor, cm, snippets) {
@@ -441,6 +445,14 @@ export default class CodeEditor extends React.Component {
       this.editor.setOption('extraKeys', this.defaultKeyMap)
     }
 
+    if (this.state.clientWidth !== this.refs.root.clientWidth) {
+      this.setState({
+        clientWidth: this.refs.root.clientWidth
+      })
+
+      needRefresh = true
+    }
+
     if (needRefresh) {
       this.editor.refresh()
     }
@@ -604,7 +616,10 @@ export default class CodeEditor extends React.Component {
             body,
             'text/html'
           )
-          const linkWithTitle = `[${parsedBody.title}](${pastedTxt})`
+          const escapePipe = (str) => {
+            return str.replace('|', '\\|')
+          }
+          const linkWithTitle = `[${escapePipe(parsedBody.title)}](${pastedTxt})`
           resolve(linkWithTitle)
         } catch (e) {
           reject(e)

browser/components/MarkdownPreview.js

@@ -18,8 +18,11 @@ import mdurl from 'mdurl'
 import exportNote from 'browser/main/lib/dataApi/exportNote'
 import { escapeHtmlCharacters } from 'browser/lib/utils'
 import yaml from 'js-yaml'
+import context from 'browser/lib/context'
+import i18n from 'browser/lib/i18n'
+import fs from 'fs'
 
-const { remote } = require('electron')
+const { remote, shell } = require('electron')
 const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
 
 const { app } = remote
@@ -28,6 +31,8 @@ const fileUrl = require('file-url')
 
 const dialog = remote.dialog
 
+const uri2path = require('file-uri-to-path')
+
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
 const appPath = fileUrl(
   process.env.NODE_ENV === 'production' ? app.getAppPath() : path.resolve()
@@ -162,7 +167,6 @@ const scrollBarDarkStyle = `
 }
 `
 
-const { shell } = require('electron')
 const OSX = global.process.platform === 'darwin'
 
 const defaultFontFamily = ['helvetica', 'arial', 'sans-serif']
@@ -220,8 +224,32 @@ export default class MarkdownPreview extends React.Component {
     }
   }
 
-  handleContextMenu (e) {
-    this.props.onContextMenu(e)
+  handleContextMenu (event) {
+    // If a contextMenu handler was passed to us, use it instead of the self-defined one -> return
+    if (_.isFunction(this.props.onContextMenu)) {
+      this.props.onContextMenu(event)
+      return
+    }
+    // No contextMenu was passed to us -> execute our own link-opener
+    if (event.target.tagName.toLowerCase() === 'a') {
+      const href = event.target.href
+      const isLocalFile = href.startsWith('file:')
+      if (isLocalFile) {
+        const absPath = uri2path(href)
+        try {
+          if (fs.lstatSync(absPath).isFile()) {
+            context.popup([
+              {
+                label: i18n.__('Show in explorer'),
+                click: (e) => shell.showItemInFolder(absPath)
+              }
+            ])
+          }
+        } catch (e) {
+          console.log('Error while evaluating if the file is locally available', e)
+        }
+      }
+    }
   }
 
   handleDoubleClick (e) {
@@ -705,7 +733,6 @@ export default class MarkdownPreview extends React.Component {
             el.addEventListener('click', this.linkClickHandler)
           })
         } catch (e) {
-          console.error(e)
           el.className = 'flowchart-error'
           el.innerHTML = 'Flowchart parse error: ' + e.message
         }
@@ -726,7 +753,6 @@ export default class MarkdownPreview extends React.Component {
             el.addEventListener('click', this.linkClickHandler)
           })
         } catch (e) {
-          console.error(e)
           el.className = 'sequence-error'
           el.innerHTML = 'Sequence diagram parse error: ' + e.message
         }
@@ -752,7 +778,6 @@ export default class MarkdownPreview extends React.Component {
 
           const chart = new Chart(canvas, chartConfig)
         } catch (e) {
-          console.error(e)
           el.className = 'chart-error'
           el.innerHTML = 'chartjs diagram parse error: ' + e.message
         }

browser/components/NoteItem.js

@@ -74,24 +74,22 @@ const NoteItem = ({
           ? note.title
           : <span styleName='item-title-empty'>{i18n.__('Empty note')}</span>}
       </div>
-      {['ALL', 'STORAGE'].includes(viewType) &&
-        <div styleName='item-middle'>
-          <div styleName='item-middle-time'>{dateDisplay}</div>
-          <div styleName='item-middle-app-meta'>
-            <div
-              title={
-                viewType === 'ALL'
-                  ? storageName
-                  : viewType === 'STORAGE' ? folderName : null
-              }
-              styleName='item-middle-app-meta-label'
-            >
-              {viewType === 'ALL' && storageName}
-              {viewType === 'STORAGE' && folderName}
-            </div>
+      <div styleName='item-middle'>
+        <div styleName='item-middle-time'>{dateDisplay}</div>
+        <div styleName='item-middle-app-meta'>
+          <div
+            title={
+              viewType === 'ALL'
+                ? storageName
+                : viewType === 'STORAGE' ? folderName : null
+            }
+            styleName='item-middle-app-meta-label'
+          >
+            {viewType === 'ALL' && storageName}
+            {viewType === 'STORAGE' && folderName}
           </div>
-        </div>}
-
+        </div>
+      </div>
       <div styleName='item-bottom'>
         <div styleName='item-bottom-tagList'>
           {note.tags.length > 0

browser/components/NoteItem.styl

@@ -368,13 +368,13 @@ body[data-theme="monokai"]
     .item-title
     .item-title-icon
     .item-bottom-time
-      color $ui-monokai-text-color
+      color $ui-monokai-active-color
     .item-bottom-tagList-item
       background-color alpha(white, 10%)
       color $ui-monokai-text-color
     &:hover
       // background-color alpha($ui-monokai-button--active-backgroundColor, 60%)
-      color #c0392b
+      color #f92672
       .item-bottom-tagList-item
         background-color alpha(#fff, 20%)
 

browser/components/NoteItemSimple.styl

@@ -240,7 +240,7 @@ body[data-theme="monokai"]
       .item-simple-title-icon
       .item-simple-bottom-time
         transition 0.15s
-        color $ui-solarized-dark-text-color
+        color $ui-monokai-text-color
       .item-simple-bottom-tagList-item
         transition 0.15s
         background-color alpha(#fff, 20%)

browser/components/TodoListPercentage.styl

@@ -39,7 +39,7 @@ body[data-theme="dark"]
 
   .percentageText
     color $ui-dark-text-color
-    
+
 body[data-theme="solarized-dark"]
   .percentageBar
     background-color #002b36
@@ -52,10 +52,10 @@ body[data-theme="solarized-dark"]
 
 body[data-theme="monokai"]
   .percentageBar
-    background-color #f92672
+    background-color: $ui-monokai-borderColor
 
   .progressBar
-    background-color: #373831
+    background-color $ui-monokai-active-color
 
   .percentageText
-    color #fdf6e3
+    color $ui-monokai-text-color

browser/components/markdown.styl

@@ -206,11 +206,11 @@ code
   text-decoration none
   margin-right 2px
 pre
-  padding 0.5em !important
+  padding 0.5rem !important
   border solid 1px #D1D1D1
   border-radius 5px
   overflow-x auto
-  margin 0 0 1em
+  margin 0 0 1rem
   display flex
   line-height 1.4em
   code
@@ -226,8 +226,8 @@ pre
       flex 1
       overflow-x auto
   &>span.filename
-    margin -8px 100% 8px -8px
-    padding 2px 6px
+    margin -0.5rem 100% 0.5rem -0.5rem
+    padding 0.125rem 0.375rem
     background-color #777;
     color white
     &:empty
@@ -235,8 +235,8 @@ pre
   &>span.lineNumber
     display none
     font-size 1em
-    padding 0.5em 0
-    margin -0.5em 0.5em -0.5em -0.5em
+    padding 0.5rem 0
+    margin -0.5rem 0.5rem -0.5rem -0.5rem
     border-right 1px solid
     text-align right
     border-top-left-radius 4px

browser/components/render/MermaidRender.js

@@ -35,7 +35,6 @@ function render (element, content, theme) {
       element.innerHTML = svgGraph
     })
   } catch (e) {
-    console.error(e)
     element.className = 'mermaid-error'
     element.innerHTML = 'mermaid diagram parse error: ' + e.message
   }

browser/lib/findNoteTitle.js

@@ -3,6 +3,17 @@ export function findNoteTitle (value) {
   let title = null
   let isInsideCodeBlock = false
 
+  if (splitted[0] === '---') {
+    let line = 0
+    while (++line < splitted.length) {
+      if (splitted[line] === '---') {
+        splitted.splice(0, line + 1)
+
+        break
+      }
+    }
+  }
+
   splitted.some((line, index) => {
     const trimmedLine = line.trim()
     const trimmedNextLine = splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()

browser/lib/markdown-it-fence.js

@@ -66,7 +66,7 @@ module.exports = function (md, renderers, defaultRenderer) {
     const parameters = {}
     let langType = ''
     let fileName = ''
-    let firstLineNumber = 0
+    let firstLineNumber = 1
 
     let match = paramsRE.exec(params)
     if (match) {
@@ -122,7 +122,7 @@ module.exports = function (md, renderers, defaultRenderer) {
     alt: ['paragraph', 'reference', 'blockquote', 'list']
   })
 
-  for (let name in renderers) {
+  for (const name in renderers) {
     md.renderer.rules[`${name}_fence`] = (tokens, index) => renderers[name](tokens[index])
   }
 

browser/lib/markdown-it-frontmatter.js

@@ -0,0 +1,24 @@
+'use strict'
+
+module.exports = function frontMatterPlugin (md) {
+  function frontmatter (state, startLine, endLine, silent) {
+    if (startLine !== 0 || state.src.substr(startLine, state.eMarks[0]) !== '---') {
+      return false
+    }
+
+    let line = 0
+    while (++line < state.lineMax) {
+      if (state.src.substring(state.bMarks[line], state.eMarks[line]) === '---') {
+        state.line = line + 1
+
+        return true
+      }
+    }
+
+    return false
+  }
+
+  md.block.ruler.before('table', 'frontmatter', frontmatter, {
+    alt: [ 'paragraph', 'reference', 'blockquote', 'list' ]
+  })
+}

browser/lib/markdown-it-sanitize-html.js

@@ -14,7 +14,7 @@ module.exports = function sanitizePlugin (md, options) {
           options
         )
       }
-      if (state.tokens[tokenIdx].type === 'fence') {
+      if (state.tokens[tokenIdx].type === '_fence') {
         // escapeHtmlCharacters has better performance
         state.tokens[tokenIdx].content = escapeHtmlCharacters(
           state.tokens[tokenIdx].content,

browser/lib/markdown-toc-generator.js

@@ -0,0 +1,100 @@
+/**
+ * @fileoverview Markdown table of contents generator
+ */
+
+import toc from 'markdown-toc'
+import diacritics from 'diacritics-map'
+import stripColor from 'strip-color'
+
+const EOL = require('os').EOL
+
+/**
+ * @caseSensitiveSlugify Custom slugify function
+ * Same implementation that the original used by markdown-toc (node_modules/markdown-toc/lib/utils.js),
+ * but keeps original case to properly handle https://github.com/BoostIO/Boostnote/issues/2067
+ */
+function caseSensitiveSlugify (str) {
+  function replaceDiacritics (str) {
+    return str.replace(/[À-ž]/g, function (ch) {
+      return diacritics[ch] || ch
+    })
+  }
+
+  function getTitle (str) {
+    if (/^\[[^\]]+\]\(/.test(str)) {
+      var m = /^\[([^\]]+)\]/.exec(str)
+      if (m) return m[1]
+    }
+    return str
+  }
+
+  str = getTitle(str)
+  str = stripColor(str)
+  // str = str.toLowerCase() //let's be case sensitive
+
+  // `.split()` is often (but not always) faster than `.replace()`
+  str = str.split(' ').join('-')
+  str = str.split(/\t/).join('--')
+  str = str.split(/<\/?[^>]+>/).join('')
+  str = str.split(/[|$&`~=\\\/@+*!?({[\]})<>=.,;:'"^]/).join('')
+  str = str.split(/[。？！，、；：“”【】（）〔〕［］﹃﹄“ ”‘’﹁﹂—…－～《》〈〉「」]/).join('')
+  str = replaceDiacritics(str)
+  return str
+}
+
+const TOC_MARKER_START = '<!-- toc -->'
+const TOC_MARKER_END = '<!-- tocstop -->'
+
+/**
+ * Takes care of proper updating given editor with TOC.
+ * If TOC doesn't exit in the editor, it's inserted at current caret position.
+ * Otherwise,TOC is updated in place.
+ * @param editor CodeMirror editor to be updated with TOC
+ */
+export function generateInEditor (editor) {
+  const tocRegex = new RegExp(`${TOC_MARKER_START}[\\s\\S]*?${TOC_MARKER_END}`)
+
+  function tocExistsInEditor () {
+    return tocRegex.test(editor.getValue())
+  }
+
+  function updateExistingToc () {
+    const toc = generate(editor.getValue())
+    const search = editor.getSearchCursor(tocRegex)
+    while (search.findNext()) {
+      search.replace(toc)
+    }
+  }
+
+  function addTocAtCursorPosition () {
+    const toc = generate(editor.getRange(editor.getCursor(), {line: Infinity}))
+    editor.replaceRange(wrapTocWithEol(toc, editor), editor.getCursor())
+  }
+
+  if (tocExistsInEditor()) {
+    updateExistingToc()
+  } else {
+    addTocAtCursorPosition()
+  }
+}
+
+/**
+ * Generates MD TOC based on MD document passed as string.
+ * @param markdownText MD document
+ * @returns generatedTOC String containing generated TOC
+ */
+export function generate (markdownText) {
+  const generatedToc = toc(markdownText, {slugify: caseSensitiveSlugify})
+  return TOC_MARKER_START + EOL + EOL + generatedToc.content + EOL + EOL + TOC_MARKER_END
+}
+
+function wrapTocWithEol (toc, editor) {
+  const leftWrap = editor.getCursor().ch === 0 ? '' : EOL
+  const rightWrap = editor.getLine(editor.getCursor().line).length === editor.getCursor().ch ? '' : EOL
+  return leftWrap + toc + rightWrap
+}
+
+export default {
+  generate,
+  generateInEditor
+}

browser/lib/markdown.js

@@ -122,7 +122,9 @@ class Markdown {
       }
     })
     this.md.use(require('markdown-it-kbd'))
-    this.md.use(require('markdown-it-admonition'))
+
+    this.md.use(require('markdown-it-admonition'), {types: ['note', 'hint', 'attention', 'caution', 'danger', 'error']})
+    this.md.use(require('./markdown-it-frontmatter'))
 
     this.md.use(require('./markdown-it-fence'), {
       chart: token => {
@@ -130,31 +132,31 @@ class Markdown {
           token.parameters.format = 'yaml'
         }
 
-        return `<pre class="fence">
+        return `<pre class="fence" data-line="${token.map[0]}">
           <span class="filename">${token.fileName}</span>
           <div class="chart" data-height="${token.parameters.height}" data-format="${token.parameters.format || 'json'}">${token.content}</div>
         </pre>`
       },
       flowchart: token => {
-        return `<pre class="fence">
+        return `<pre class="fence" data-line="${token.map[0]}">
           <span class="filename">${token.fileName}</span>
           <div class="flowchart" data-height="${token.parameters.height}">${token.content}</div>
         </pre>`
       },
       mermaid: token => {
-        return `<pre class="fence">
+        return `<pre class="fence" data-line="${token.map[0]}">
           <span class="filename">${token.fileName}</span>
           <div class="mermaid" data-height="${token.parameters.height}">${token.content}</div>
         </pre>`
       },
       sequence: token => {
-        return `<pre class="fence">
+        return `<pre class="fence" data-line="${token.map[0]}">
           <span class="filename">${token.fileName}</span>
           <div class="sequence" data-height="${token.parameters.height}">${token.content}</div>
         </pre>`
       }
     }, token => {
-      return `<pre class="code CodeMirror">
+      return `<pre class="code CodeMirror" data-line="${token.map[0]}">
         <span class="filename">${token.fileName}</span>
         ${createGutter(token.content, token.firstLineNumber)}
         <code class="${token.langType}">${token.content}</code>

browser/lib/newNote.js

@@ -0,0 +1,62 @@
+import { hashHistory } from 'react-router'
+import dataApi from 'browser/main/lib/dataApi'
+import ee from 'browser/main/lib/eventEmitter'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+
+export function createMarkdownNote (storage, folder, dispatch, location) {
+  AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_MARKDOWN')
+  AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
+  return dataApi
+    .createNote(storage, {
+      type: 'MARKDOWN_NOTE',
+      folder: folder,
+      title: '',
+      content: ''
+    })
+    .then(note => {
+      const noteHash = note.key
+      dispatch({
+        type: 'UPDATE_NOTE',
+        note: note
+      })
+
+      hashHistory.push({
+        pathname: location.pathname,
+        query: { key: noteHash }
+      })
+      ee.emit('list:jump', noteHash)
+      ee.emit('detail:focus')
+    })
+}
+
+export function createSnippetNote (storage, folder, dispatch, location, config) {
+  AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_SNIPPET')
+  AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
+  return dataApi
+    .createNote(storage, {
+      type: 'SNIPPET_NOTE',
+      folder: folder,
+      title: '',
+      description: '',
+      snippets: [
+        {
+          name: '',
+          mode: config.editor.snippetDefaultLanguage || 'text',
+          content: ''
+        }
+      ]
+    })
+    .then(note => {
+      const noteHash = note.key
+      dispatch({
+        type: 'UPDATE_NOTE',
+        note: note
+      })
+      hashHistory.push({
+        pathname: location.pathname,
+        query: { key: noteHash }
+      })
+      ee.emit('list:jump', noteHash)
+      ee.emit('detail:focus')
+    })
+}

browser/main/Detail/MarkdownNoteDetail.js

@@ -29,6 +29,7 @@ import { formatDate } from 'browser/lib/date-formatter'
 import { getTodoPercentageOfCompleted } from 'browser/lib/getTodoStatus'
 import striptags from 'striptags'
 import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
+import markdownToc from 'browser/lib/markdown-toc-generator'
 
 class MarkdownNoteDetail extends React.Component {
   constructor (props) {
@@ -47,6 +48,7 @@ class MarkdownNoteDetail extends React.Component {
     this.dispatchTimer = null
 
     this.toggleLockButton = this.handleToggleLockButton.bind(this)
+    this.generateToc = () => this.handleGenerateToc()
   }
 
   focus () {
@@ -59,6 +61,7 @@ class MarkdownNoteDetail extends React.Component {
       const reversedType = this.state.editorType === 'SPLIT' ? 'EDITOR_PREVIEW' : 'SPLIT'
       this.handleSwitchMode(reversedType)
     })
+    ee.on('code:generate-toc', this.generateToc)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -75,6 +78,7 @@ class MarkdownNoteDetail extends React.Component {
 
   componentWillUnmount () {
     ee.off('topbar:togglelockbutton', this.toggleLockButton)
+    ee.off('code:generate-toc', this.generateToc)
     if (this.saveQueue != null) this.saveNow()
   }
 
@@ -262,6 +266,11 @@ class MarkdownNoteDetail extends React.Component {
     }
   }
 
+  handleGenerateToc () {
+    const editor = this.refs.content.refs.code.editor
+    markdownToc.generateInEditor(editor)
+  }
+
   handleFocus (e) {
     this.focus()
   }
@@ -363,6 +372,7 @@ class MarkdownNoteDetail extends React.Component {
         <TagSelect
           ref='tags'
           value={this.state.note.tags}
+          data={data}
           onChange={this.handleUpdateTag.bind(this)}
         />
         <TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />

browser/main/Detail/NoteDetailInfo.styl

@@ -13,6 +13,7 @@ $info-margin-under-border = 30px
   display flex
   align-items center
   padding 0 20px
+  z-index 99
 
 .info-left
   padding 0 10px

browser/main/Detail/SnippetNoteDetail.js

@@ -29,6 +29,7 @@ import InfoPanelTrashed from './InfoPanelTrashed'
 import { formatDate } from 'browser/lib/date-formatter'
 import i18n from 'browser/lib/i18n'
 import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
+import markdownToc from 'browser/lib/markdown-toc-generator'
 
 const electron = require('electron')
 const { remote } = electron
@@ -52,6 +53,7 @@ class SnippetNoteDetail extends React.Component {
     }
 
     this.scrollToNextTabThreshold = 0.7
+    this.generateToc = () => this.handleGenerateToc()
   }
 
   componentDidMount () {
@@ -65,6 +67,7 @@ class SnippetNoteDetail extends React.Component {
         enableLeftArrow: allTabs.offsetLeft !== 0
       })
     }
+    ee.on('code:generate-toc', this.generateToc)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -91,6 +94,16 @@ class SnippetNoteDetail extends React.Component {
 
   componentWillUnmount () {
     if (this.saveQueue != null) this.saveNow()
+    ee.off('code:generate-toc', this.generateToc)
+  }
+
+  handleGenerateToc () {
+    const { note, snippetIndex } = this.state
+    const currentMode = note.snippets[snippetIndex].mode
+    if (currentMode.includes('Markdown')) {
+      const currentEditor = this.refs[`code-${snippetIndex}`].refs.code.editor
+      markdownToc.generateInEditor(currentEditor)
+    }
   }
 
   handleChange (e) {
@@ -441,7 +454,7 @@ class SnippetNoteDetail extends React.Component {
           const isSuper = global.process.platform === 'darwin'
             ? e.metaKey
             : e.ctrlKey
-          if (isSuper && !e.shiftKey) {
+          if (isSuper && !e.shiftKey && !e.altKey) {
             e.preventDefault()
             this.addSnippet()
           }
@@ -746,6 +759,7 @@ class SnippetNoteDetail extends React.Component {
         <TagSelect
           ref='tags'
           value={this.state.note.tags}
+          data={data}
           onChange={(e) => this.handleChange(e)}
         />
       </div>

browser/main/Detail/TagSelect.js

@@ -6,71 +6,33 @@ import _ from 'lodash'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import i18n from 'browser/lib/i18n'
 import ee from 'browser/main/lib/eventEmitter'
+import Autosuggest from 'react-autosuggest'
 
 class TagSelect extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
-      newTag: ''
+      newTag: '',
+      suggestions: []
     }
-    this.addtagHandler = this.handleAddTag.bind(this)
+
+    this.handleAddTag = this.handleAddTag.bind(this)
+    this.onInputBlur = this.onInputBlur.bind(this)
+    this.onInputChange = this.onInputChange.bind(this)
+    this.onInputKeyDown = this.onInputKeyDown.bind(this)
+    this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this)
+    this.onSuggestionsFetchRequested = this.onSuggestionsFetchRequested.bind(this)
+    this.onSuggestionSelected = this.onSuggestionSelected.bind(this)
   }
 
-  componentDidMount () {
-    this.value = this.props.value
-    ee.on('editor:add-tag', this.addtagHandler)
-  }
-
-  componentDidUpdate () {
-    this.value = this.props.value
-  }
-
-  componentWillUnmount () {
-    ee.off('editor:add-tag', this.addtagHandler)
-  }
-
-  handleAddTag () {
-    this.refs.newTag.focus()
-  }
-
-  handleNewTagInputKeyDown (e) {
-    switch (e.keyCode) {
-      case 9:
-        e.preventDefault()
-        this.submitTag()
-        break
-      case 13:
-        this.submitTag()
-        break
-      case 8:
-        if (this.refs.newTag.value.length === 0) {
-          this.removeLastTag()
-        }
-    }
-  }
-
-  handleNewTagBlur (e) {
-    this.submitTag()
-  }
-
-  removeLastTag () {
-    this.removeTagByCallback((value) => {
-      value.pop()
-    })
-  }
-
-  reset () {
-    this.setState({
-      newTag: ''
-    })
-  }
-
-  submitTag () {
+  addNewTag (newTag) {
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_TAG')
-    let { value } = this.props
-    let newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
-    newTag = newTag.charAt(0) === '#' ? newTag.substring(1) : newTag
+
+    newTag = newTag.trim().replace(/ +/g, '_')
+    if (newTag.charAt(0) === '#') {
+      newTag.substring(1)
+    }
 
     if (newTag.length <= 0) {
       this.setState({
@@ -79,6 +41,7 @@ class TagSelect extends React.Component {
       return
     }
 
+    let { value } = this.props
     value = _.isArray(value)
       ? value.slice()
       : []
@@ -93,10 +56,41 @@ class TagSelect extends React.Component {
     })
   }
 
-  handleNewTagInputChange (e) {
-    this.setState({
-      newTag: this.refs.newTag.value
-    })
+  buildSuggestions () {
+    this.suggestions = _.sortBy(this.props.data.tagNoteMap.map(
+      (tag, name) => ({
+        name,
+        nameLC: name.toLowerCase(),
+        size: tag.size
+      })
+    ).filter(
+      tag => tag.size > 0
+    ), ['name'])
+  }
+
+  componentDidMount () {
+    this.value = this.props.value
+
+    this.buildSuggestions()
+
+    ee.on('editor:add-tag', this.handleAddTag)
+  }
+
+  componentDidUpdate () {
+    this.value = this.props.value
+  }
+
+  componentWillUnmount () {
+    ee.off('editor:add-tag', this.handleAddTag)
+  }
+
+  handleAddTag () {
+    this.refs.newTag.input.focus()
+  }
+
+  handleTagLabelClick (tag) {
+    const { router } = this.context
+    router.push(`/tags/${tag}`)
   }
 
   handleTagRemoveButtonClick (tag) {
@@ -105,6 +99,60 @@ class TagSelect extends React.Component {
     }, tag)
   }
 
+  onInputBlur (e) {
+    this.submitNewTag()
+  }
+
+  onInputChange (e, { newValue, method }) {
+    this.setState({
+      newTag: newValue
+    })
+  }
+
+  onInputKeyDown (e) {
+    switch (e.keyCode) {
+      case 9:
+        e.preventDefault()
+        this.submitNewTag()
+        break
+      case 13:
+        this.submitNewTag()
+        break
+      case 8:
+        if (this.state.newTag.length === 0) {
+          this.removeLastTag()
+        }
+    }
+  }
+
+  onSuggestionsClearRequested () {
+    this.setState({
+      suggestions: []
+    })
+  }
+
+  onSuggestionsFetchRequested ({ value }) {
+    const valueLC = value.toLowerCase()
+    const suggestions = _.filter(
+      this.suggestions,
+      tag => !_.includes(this.value, tag.name) && tag.nameLC.indexOf(valueLC) !== -1
+    )
+
+    this.setState({
+      suggestions
+    })
+  }
+
+  onSuggestionSelected (event, { suggestion, suggestionValue }) {
+    this.addNewTag(suggestionValue)
+  }
+
+  removeLastTag () {
+    this.removeTagByCallback((value) => {
+      value.pop()
+    })
+  }
+
   removeTagByCallback (callback, tag = null) {
     let { value } = this.props
 
@@ -118,6 +166,18 @@ class TagSelect extends React.Component {
     this.props.onChange()
   }
 
+  reset () {
+    this.buildSuggestions()
+
+    this.setState({
+      newTag: ''
+    })
+  }
+
+  submitNewTag () {
+    this.addNewTag(this.refs.newTag.input.value)
+  }
+
   render () {
     const { value, className } = this.props
 
@@ -127,7 +187,7 @@ class TagSelect extends React.Component {
           <span styleName='tag'
             key={tag}
           >
-            <span styleName='tag-label'>#{tag}</span>
+            <span styleName='tag-label' onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)}
             >
@@ -138,6 +198,8 @@ class TagSelect extends React.Component {
       })
       : []
 
+    const { newTag, suggestions } = this.state
+
     return (
       <div className={_.isString(className)
           ? 'TagSelect ' + className
@@ -146,24 +208,39 @@ class TagSelect extends React.Component {
         styleName='root'
       >
         {tagList}
-        <input styleName='newTag'
+        <Autosuggest
           ref='newTag'
-          value={this.state.newTag}
-          placeholder={i18n.__('Add tag...')}
-          onChange={(e) => this.handleNewTagInputChange(e)}
-          onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
-          onBlur={(e) => this.handleNewTagBlur(e)}
+          suggestions={suggestions}
+          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+          onSuggestionSelected={this.onSuggestionSelected}
+          getSuggestionValue={suggestion => suggestion.name}
+          renderSuggestion={suggestion => (
+            <div>
+              {suggestion.name}
+            </div>
+          )}
+          inputProps={{
+            placeholder: i18n.__('Add tag...'),
+            value: newTag,
+            onChange: this.onInputChange,
+            onKeyDown: this.onInputKeyDown,
+            onBlur: this.onInputBlur
+          }}
         />
       </div>
     )
   }
 }
 
+TagSelect.contextTypes = {
+  router: PropTypes.shape({})
+}
+
 TagSelect.propTypes = {
   className: PropTypes.string,
   value: PropTypes.arrayOf(PropTypes.string),
   onChange: PropTypes.func
-
 }
 
 export default CSSModules(TagSelect, styles)

browser/main/Detail/TagSelect.styl

@@ -39,16 +39,9 @@
 
 .tag-label
   font-size 13px
-  color: $ui-text-color
+  color $ui-text-color
   padding 4px 16px 4px 8px
-
-.newTag
-  box-sizing border-box
-  border none
-  background-color transparent
-  outline none
-  padding 0 4px
-  font-size 13px
+  cursor pointer
 
 body[data-theme="dark"]
   .tag
@@ -62,11 +55,6 @@ body[data-theme="dark"]
   .tag-label
     color $ui-dark-text-color
 
-  .newTag
-    border-color none
-    background-color transparent
-    color $ui-dark-text-color
-    
 body[data-theme="solarized-dark"]
   .tag
     background-color $ui-solarized-dark-tag-backgroundColor
@@ -78,14 +66,9 @@ body[data-theme="solarized-dark"]
   .tag-label
     color $ui-solarized-dark-text-color
 
-  .newTag
-    border-color none
-    background-color transparent
-    color $ui-solarized-dark-text-color
-
 body[data-theme="monokai"]
   .tag
-    background-color $ui-monokai-button-backgroundColor
+    background-color $ui-monokai-tag-backgroundColor
 
   .tag-removeButton
     border-color $ui-button--focus-borderColor
@@ -93,8 +76,3 @@ body[data-theme="monokai"]
 
   .tag-label
     color $ui-monokai-text-color
-    
-  .newTag
-    border-color none
-    background-color transparent
-    color $ui-monokai-text-color

browser/main/Detail/ToggleModeButton.styl

@@ -59,7 +59,7 @@ body[data-theme="solarized-dark"]
 
 body[data-theme="monokai"]
   .control-toggleModeButton
-      background-color #272822
+      background-color #373831
     .active
-      background-color #1EC38B
+      background-color #f92672
       box-shadow 2px 0px 7px #222222

browser/main/Main.js

@@ -56,7 +56,7 @@ class Main extends React.Component {
   init () {
     dataApi
       .addStorage({
-        name: 'My Storage',
+        name: 'My Storage Location',
         path: path.join(remote.app.getPath('home'), 'Boostnote')
       })
       .then(data => {

browser/main/NewNoteButton/index.js

@@ -7,6 +7,7 @@ import modal from 'browser/main/lib/modal'
 import NewNoteModal from 'browser/main/modals/NewNoteModal'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import i18n from 'browser/lib/i18n'
+import { createMarkdownNote, createSnippetNote } from 'browser/lib/newNote'
 
 const { remote } = require('electron')
 const { dialog } = remote
@@ -37,13 +38,19 @@ class NewNoteButton extends React.Component {
     const { location, dispatch, config } = this.props
     const { storage, folder } = this.resolveTargetFolder()
 
-    modal.open(NewNoteModal, {
-      storage: storage.key,
-      folder: folder.key,
-      dispatch,
-      location,
-      config
-    })
+    if (config.ui.defaultNote === 'MARKDOWN_NOTE') {
+      createMarkdownNote(storage.key, folder.key, dispatch, location)
+    } else if (config.ui.defaultNote === 'SNIPPET_NOTE') {
+      createSnippetNote(storage.key, folder.key, dispatch, location, config)
+    } else {
+      modal.open(NewNoteModal, {
+        storage: storage.key,
+        folder: folder.key,
+        dispatch,
+        location,
+        config
+      })
+    }
   }
 
   resolveTargetFolder () {

browser/main/NoteList/index.js

@@ -80,6 +80,7 @@ class NoteList extends React.Component {
     this.getViewType = this.getViewType.bind(this)
     this.restoreNote = this.restoreNote.bind(this)
     this.copyNoteLink = this.copyNoteLink.bind(this)
+    this.navigate = this.navigate.bind(this)
 
     // TODO: not Selected noteKeys but SelectedNote(for reusing)
     this.state = {
@@ -98,6 +99,7 @@ class NoteList extends React.Component {
     ee.on('list:isMarkdownNote', this.alertIfSnippetHandler)
     ee.on('import:file', this.importFromFileHandler)
     ee.on('list:jump', this.jumpNoteByHash)
+    ee.on('list:navigate', this.navigate)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -517,7 +519,7 @@ class NoteList extends React.Component {
         click: this.cloneNote.bind(this)
       }, {
         label: copyNoteLink,
-        click: this.copyNoteLink(note)
+        click: this.copyNoteLink.bind(this, note)
       })
       if (note.type === 'MARKDOWN_NOTE') {
         if (note.blog && note.blog.blogLink && note.blog.blogId) {
@@ -687,6 +689,16 @@ class NoteList extends React.Component {
     return copy(noteLink)
   }
 
+  navigate (sender, pathname) {
+    const { router } = this.context
+    router.push({
+      pathname,
+      query: {
+        // key: noteKey
+      }
+    })
+  }
+
   save (note) {
     const { dispatch } = this.props
     dataApi

browser/main/SideNav/StorageItem.js

@@ -38,6 +38,22 @@ class StorageItem extends React.Component {
       {
         type: 'separator'
       },
+      {
+        label: i18n.__('Export Storage'),
+        submenu: [
+          {
+            label: i18n.__('Export as txt'),
+            click: (e) => this.handleExportStorageClick(e, 'txt')
+          },
+          {
+            label: i18n.__('Export as md'),
+            click: (e) => this.handleExportStorageClick(e, 'md')
+          }
+        ]
+      },
+      {
+        type: 'separator'
+      },
       {
         label: i18n.__('Unlink Storage'),
         click: (e) => this.handleUnlinkStorageClick(e)
@@ -68,6 +84,30 @@ class StorageItem extends React.Component {
     }
   }
 
+  handleExportStorageClick (e, fileType) {
+    const options = {
+      properties: ['openDirectory', 'createDirectory'],
+      buttonLabel: i18n.__('Select directory'),
+      title: i18n.__('Select a folder to export the files to'),
+      multiSelections: false
+    }
+    dialog.showOpenDialog(remote.getCurrentWindow(), options,
+      (paths) => {
+        if (paths && paths.length === 1) {
+          const { storage, dispatch } = this.props
+          dataApi
+            .exportStorage(storage.key, fileType, paths[0])
+            .then(data => {
+              dispatch({
+                type: 'EXPORT_STORAGE',
+                storage: data.storage,
+                fileType: data.fileType
+              })
+            })
+        }
+      })
+  }
+
   handleToggleButtonClick (e) {
     const { storage, dispatch } = this.props
     const isOpen = !this.state.isOpen

browser/main/SideNav/index.js

@@ -198,12 +198,12 @@ class SideNav extends React.Component {
     const tags = pathSegments[pathSegments.length - 1]
     return (tags === 'alltags')
       ? []
-      : tags.split(' ')
+      : tags.split(' ').map(tag => decodeURIComponent(tag))
   }
 
   handleClickTagListItem (name) {
     const { router } = this.context
-    router.push(`/tags/${name}`)
+    router.push(`/tags/${encodeURIComponent(name)}`)
   }
 
   handleSortTagsByChange (e) {
@@ -230,7 +230,7 @@ class SideNav extends React.Component {
     } else {
       listOfTags.push(tag)
     }
-    router.push(`/tags/${listOfTags.join(' ')}`)
+    router.push(`/tags/${listOfTags.map(tag => encodeURIComponent(tag)).join(' ')}`)
   }
 
   emptyTrash (entries) {

browser/main/global.styl

@@ -132,6 +132,15 @@ body[data-theme="dark"]
 .CodeMirror-foldgutter-folded:after
   content: "\25B8"
 
+.CodeMirror-hover
+  padding 2px 4px 0 4px
+  position absolute
+  z-index 99
+
+.CodeMirror-hyperlink
+  cursor pointer
+
+
 .sortableItemHelper
   z-index modalZIndex + 5
 
@@ -156,3 +165,5 @@ body[data-theme="monokai"]
 body[data-theme="default"]
   .SideNav ::-webkit-scrollbar-thumb
     background-color rgba(255, 255, 255, 0.3)
+
+@import '../styles/Detail/TagSelect.styl'

browser/main/lib/ConfigManager.js

@@ -24,7 +24,7 @@ export const DEFAULT_CONFIG = {
   amaEnabled: true,
   hotkey: {
     toggleMain: OSX ? 'Command + Alt + L' : 'Super + Alt + E',
-    toggleMode: OSX ? 'Command + M' : 'Ctrl + M'
+    toggleMode: OSX ? 'Command + Option + M' : 'Ctrl + M'
   },
   ui: {
     language: 'en',
@@ -195,6 +195,7 @@ function rewriteHotkey (config) {
   const keys = [...Object.keys(config.hotkey)]
   keys.forEach(key => {
     config.hotkey[key] = config.hotkey[key].replace(/Cmd/g, 'Command')
+    config.hotkey[key] = config.hotkey[key].replace(/Opt/g, 'Alt')
   })
   return config
 }

browser/main/lib/dataApi/attachmentManagement.js

@@ -11,6 +11,118 @@ import i18n from 'browser/lib/i18n'
 const STORAGE_FOLDER_PLACEHOLDER = ':storage'
 const DESTINATION_FOLDER = 'attachments'
 const PATH_SEPARATORS = escapeStringRegexp(path.posix.sep) + escapeStringRegexp(path.win32.sep)
+/**
+ * @description
+ * Create a Image element to get the real size of image.
+ * @param {File} file the File object dropped.
+ * @returns {Promise<Image>} Image element created
+ */
+function getImage (file) {
+  return new Promise((resolve) => {
+    const reader = new FileReader()
+    const img = new Image()
+    img.onload = () => resolve(img)
+    reader.onload = e => {
+      img.src = e.target.result
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
+/**
+ * @description
+ * Get the orientation info from iamges's EXIF data.
+ * case 1: The 0th row is at the visual top of the image, and the 0th column is the visual left-hand side.
+ * case 2: The 0th row is at the visual top of the image, and the 0th column is the visual right-hand side.
+ * case 3: The 0th row is at the visual bottom of the image, and the 0th column is the visual right-hand side.
+ * case 4: The 0th row is at the visual bottom of the image, and the 0th column is the visual left-hand side.
+ * case 5: The 0th row is the visual left-hand side of the image, and the 0th column is the visual top.
+ * case 6: The 0th row is the visual right-hand side of the image, and the 0th column is the visual top.
+ * case 7: The 0th row is the visual right-hand side of the image, and the 0th column is the visual bottom.
+ * case 8: The 0th row is the visual left-hand side of the image, and the 0th column is the visual bottom.
+ * Other: reserved
+ * ref: http://sylvana.net/jpegcrop/exif_orientation.html
+ * @param {File} file the File object dropped.
+ * @returns {Promise<Number>} Orientation info
+ */
+function getOrientation (file) {
+  const getData = arrayBuffer => {
+    const view = new DataView(arrayBuffer)
+
+    // Not start with SOI(Start of image) Marker return fail value
+    if (view.getUint16(0, false) !== 0xFFD8) return -2
+    const length = view.byteLength
+    let offset = 2
+    while (offset < length) {
+      const marker = view.getUint16(offset, false)
+      offset += 2
+      // Loop and seed for APP1 Marker
+      if (marker === 0xFFE1) {
+        // return fail value if it isn't EXIF data
+        if (view.getUint32(offset += 2, false) !== 0x45786966) {
+          return -1
+        }
+        // Read TIFF header,
+        // First 2bytes defines byte align of TIFF data.
+        // If it is 0x4949="II", it means "Intel" type byte align.
+        // If it is 0x4d4d="MM", it means "Motorola" type byte align
+        const little = view.getUint16(offset += 6, false) === 0x4949
+        offset += view.getUint32(offset + 4, little)
+        const tags = view.getUint16(offset, little) // Get TAG number
+        offset += 2
+        for (let i = 0; i < tags; i++) {
+          // Loop to find Orientation TAG and return the value
+          if (view.getUint16(offset + (i * 12), little) === 0x0112) {
+            return view.getUint16(offset + (i * 12) + 8, little)
+          }
+        }
+      } else if ((marker & 0xFF00) !== 0xFF00) { // If not start with 0xFF, not a Marker
+        break
+      } else {
+        offset += view.getUint16(offset, false)
+      }
+    }
+    return -1
+  }
+  return new Promise((resolve) => {
+    const reader = new FileReader()
+    reader.onload = event => resolve(getData(event.target.result))
+    reader.readAsArrayBuffer(file.slice(0, 64 * 1024))
+  })
+}
+/**
+ * @description
+ * Rotate image file to correct direction.
+ * Create a canvas and draw the image with correct direction, then export to base64 format.
+ * @param {*} file the File object dropped.
+ * @return {String} Base64 encoded image.
+ */
+function fixRotate (file) {
+  return Promise.all([getImage(file), getOrientation(file)])
+  .then(([img, orientation]) => {
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    if (orientation > 4 && orientation < 9) {
+      canvas.width = img.height
+      canvas.height = img.width
+    } else {
+      canvas.width = img.width
+      canvas.height = img.height
+    }
+    switch (orientation) {
+      case 2: ctx.transform(-1, 0, 0, 1, img.width, 0); break
+      case 3: ctx.transform(-1, 0, 0, -1, img.width, img.height); break
+      case 4: ctx.transform(1, 0, 0, -1, 0, img.height); break
+      case 5: ctx.transform(0, 1, 1, 0, 0, 0); break
+      case 6: ctx.transform(0, 1, -1, 0, img.height, 0); break
+      case 7: ctx.transform(0, -1, -1, 0, img.height, img.width); break
+      case 8: ctx.transform(0, -1, 1, 0, 0, img.width); break
+      default: break
+    }
+    ctx.drawImage(img, 0, 0)
+    return canvas.toDataURL()
+  })
+}
 
 /**
  * @description
@@ -38,26 +150,34 @@ function copyAttachment (sourceFilePath, storageKey, noteKey, useRandomName = tr
     }
 
     try {
-      if (!fs.existsSync(sourceFilePath)) {
-        reject('source file does not exist')
+      const isBase64 = typeof sourceFilePath === 'object' && sourceFilePath.type === 'base64'
+      if (!fs.existsSync(sourceFilePath) && !isBase64) {
+        return reject('source file does not exist')
       }
-
       const targetStorage = findStorage.findStorage(storageKey)
-
-      const inputFileStream = fs.createReadStream(sourceFilePath)
       let destinationName
       if (useRandomName) {
-        destinationName = `${uniqueSlug()}${path.extname(sourceFilePath)}`
+        destinationName = `${uniqueSlug()}${path.extname(sourceFilePath.sourceFilePath || sourceFilePath)}`
       } else {
-        destinationName = path.basename(sourceFilePath)
+        destinationName = path.basename(sourceFilePath.sourceFilePath || sourceFilePath)
       }
       const destinationDir = path.join(targetStorage.path, DESTINATION_FOLDER, noteKey)
       createAttachmentDestinationFolder(targetStorage.path, noteKey)
       const outputFile = fs.createWriteStream(path.join(destinationDir, destinationName))
-      inputFileStream.pipe(outputFile)
-      inputFileStream.on('end', () => {
-        resolve(destinationName)
-      })
+
+      if (isBase64) {
+        const base64Data = sourceFilePath.data.replace(/^data:image\/\w+;base64,/, '')
+        const dataBuffer = new Buffer(base64Data, 'base64')
+        outputFile.write(dataBuffer, () => {
+          resolve(destinationName)
+        })
+      } else {
+        const inputFileStream = fs.createReadStream(sourceFilePath)
+        inputFileStream.pipe(outputFile)
+        inputFileStream.on('end', () => {
+          resolve(destinationName)
+        })
+      }
     } catch (e) {
       return reject(e)
     }
@@ -137,10 +257,17 @@ function handleAttachmentDrop (codeEditor, storageKey, noteKey, dropEvent) {
   const filePath = file.path
   const originalFileName = path.basename(filePath)
   const fileType = file['type']
-
-  copyAttachment(filePath, storageKey, noteKey).then((fileName) => {
-    const showPreview = fileType.startsWith('image')
-    const imageMd = generateAttachmentMarkdown(originalFileName, path.join(STORAGE_FOLDER_PLACEHOLDER, noteKey, fileName), showPreview)
+  const isImage = fileType.startsWith('image')
+  let promise
+  if (isImage) {
+    promise = fixRotate(file).then(base64data => {
+      return copyAttachment({type: 'base64', data: base64data, sourceFilePath: filePath}, storageKey, noteKey)
+    })
+  } else {
+    promise = copyAttachment(filePath, storageKey, noteKey)
+  }
+  promise.then((fileName) => {
+    const imageMd = generateAttachmentMarkdown(originalFileName, path.join(STORAGE_FOLDER_PLACEHOLDER, noteKey, fileName), isImage)
     codeEditor.insertAttachmentMd(imageMd)
   })
 }

browser/main/lib/dataApi/exportStorage.js

@@ -0,0 +1,63 @@
+import { findStorage } from 'browser/lib/findStorage'
+import resolveStorageData from './resolveStorageData'
+import resolveStorageNotes from './resolveStorageNotes'
+import filenamify from 'filenamify'
+import * as path from 'path'
+import * as fs from 'fs'
+
+/**
+ * @param {String} storageKey
+ * @param {String} fileType
+ * @param {String} exportDir
+ *
+ * @return {Object}
+ * ```
+ * {
+ *   storage: Object,
+ *   fileType: String,
+ *   exportDir: String
+ * }
+ * ```
+ */
+
+function exportStorage (storageKey, fileType, exportDir) {
+  let targetStorage
+  try {
+    targetStorage = findStorage(storageKey)
+  } catch (e) {
+    return Promise.reject(e)
+  }
+
+  return resolveStorageData(targetStorage)
+    .then(storage => (
+      resolveStorageNotes(storage).then(notes => ({storage, notes}))
+    ))
+    .then(function exportNotes (data) {
+      const { storage, notes } = data
+      const folderNamesMapping = {}
+      storage.folders.forEach(folder => {
+        const folderExportedDir = path.join(exportDir, filenamify(folder.name, {replacement: '_'}))
+        folderNamesMapping[folder.key] = folderExportedDir
+        // make sure directory exists
+        try {
+          fs.mkdirSync(folderExportedDir)
+        } catch (e) {}
+      })
+      notes
+        .filter(note => !note.isTrashed && note.type === 'MARKDOWN_NOTE')
+        .forEach(markdownNote => {
+          const folderExportedDir = folderNamesMapping[markdownNote.folder]
+          const snippetName = `${filenamify(markdownNote.title, {replacement: '_'})}.${fileType}`
+          const notePath = path.join(folderExportedDir, snippetName)
+          fs.writeFileSync(notePath, markdownNote.content)
+        })
+
+      return {
+        storage,
+        fileType,
+        exportDir
+      }
+    })
+}
+
+module.exports = exportStorage

browser/main/lib/dataApi/index.js

@@ -9,6 +9,7 @@ const dataApi = {
   deleteFolder: require('./deleteFolder'),
   reorderFolder: require('./reorderFolder'),
   exportFolder: require('./exportFolder'),
+  exportStorage: require('./exportStorage'),
   createNote: require('./createNote'),
   updateNote: require('./updateNote'),
   deleteNote: require('./deleteNote'),

browser/main/modals/NewNoteModal.js

@@ -1,12 +1,9 @@
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NewNoteModal.styl'
-import dataApi from 'browser/main/lib/dataApi'
-import { hashHistory } from 'react-router'
-import ee from 'browser/main/lib/eventEmitter'
 import ModalEscButton from 'browser/components/ModalEscButton'
-import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import i18n from 'browser/lib/i18n'
+import { createMarkdownNote, createSnippetNote } from 'browser/lib/newNote'
 
 class NewNoteModal extends React.Component {
   constructor (props) {
@@ -24,31 +21,10 @@ class NewNoteModal extends React.Component {
   }
 
   handleMarkdownNoteButtonClick (e) {
-    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_MARKDOWN')
-    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
     const { storage, folder, dispatch, location } = this.props
-    dataApi
-      .createNote(storage, {
-        type: 'MARKDOWN_NOTE',
-        folder: folder,
-        title: '',
-        content: ''
-      })
-      .then(note => {
-        const noteHash = note.key
-        dispatch({
-          type: 'UPDATE_NOTE',
-          note: note
-        })
-
-        hashHistory.push({
-          pathname: location.pathname,
-          query: { key: noteHash }
-        })
-        ee.emit('list:jump', noteHash)
-        ee.emit('detail:focus')
-        setTimeout(this.props.close, 200)
-      })
+    createMarkdownNote(storage, folder, dispatch, location).then(() => {
+      setTimeout(this.props.close, 200)
+    })
   }
 
   handleMarkdownNoteButtonKeyDown (e) {
@@ -59,38 +35,10 @@ class NewNoteModal extends React.Component {
   }
 
   handleSnippetNoteButtonClick (e) {
-    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_SNIPPET')
-    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
     const { storage, folder, dispatch, location, config } = this.props
-
-    dataApi
-      .createNote(storage, {
-        type: 'SNIPPET_NOTE',
-        folder: folder,
-        title: '',
-        description: '',
-        snippets: [
-          {
-            name: '',
-            mode: config.editor.snippetDefaultLanguage || 'text',
-            content: ''
-          }
-        ]
-      })
-      .then(note => {
-        const noteHash = note.key
-        dispatch({
-          type: 'UPDATE_NOTE',
-          note: note
-        })
-        hashHistory.push({
-          pathname: location.pathname,
-          query: { key: noteHash }
-        })
-        ee.emit('list:jump', noteHash)
-        ee.emit('detail:focus')
-        setTimeout(this.props.close, 200)
-      })
+    createSnippetNote(storage, folder, dispatch, location, config).then(() => {
+      setTimeout(this.props.close, 200)
+    })
   }
 
   handleSnippetNoteButtonKeyDown (e) {

browser/main/modals/PreferencesModal/Blog.js

@@ -43,7 +43,7 @@ class Blog extends React.Component {
     this.handleSettingError = (err) => {
       this.setState({BlogAlert: {
         type: 'error',
-        message: err.message != null ? err.message : i18n.__('Error occurs!')
+        message: err.message != null ? err.message : i18n.__('An error occurred!')
       }})
     }
     this.oldBlog = this.state.config.blog
@@ -70,7 +70,7 @@ class Blog extends React.Component {
       this.props.haveToSave({
         tab: 'Blog',
         type: 'warning',
-        message: i18n.__('You have to save!')
+        message: i18n.__('Unsaved Changes!')
       })
     }
   }

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -68,9 +68,9 @@
   :global
     .alert
       display inline-block
-      position absolute
-      top 60px
-      right 15px
+      position fixed
+      top 130px
+      right 100px
       font-size 14px
     .success
       color #1EC38B
@@ -127,7 +127,7 @@ colorDarkControl()
   border-color $ui-dark-borderColor
   background-color $ui-dark-backgroundColor
   color $ui-dark-text-color
-  
+
 colorSolarizedDarkControl()
   border none
   background-color $ui-solarized-dark-button-backgroundColor
@@ -165,27 +165,27 @@ body[data-theme="dark"]
   .group-section-control
     select, .group-section-control-input
       colorDarkControl()
-     
-      
+
+
 body[data-theme="solarized-dark"]
   .root
     color $ui-solarized-dark-text-color
 
   .group-header
     color $ui-solarized-dark-text-color
-    border-color $ui-solarized-dark-borderColor 
+    border-color $ui-solarized-dark-borderColor
 
   .group-header2
     color $ui-solarized-dark-text-color
 
   .group-section-control-input
-    border-color $ui-solarized-dark-borderColor 
+    border-color $ui-solarized-dark-borderColor
 
   .group-control
-    border-color $ui-solarized-dark-borderColor 
+    border-color $ui-solarized-dark-borderColor
   .group-control-leftButton
     colorDarkDefaultButton()
-    border-color $ui-solarized-dark-borderColor 
+    border-color $ui-solarized-dark-borderColor
   .group-control-rightButton
     colorSolarizedDarkPrimaryButton()
   .group-hint
@@ -200,19 +200,19 @@ body[data-theme="monokai"]
 
   .group-header
     color $ui-monokai-text-color
-    border-color $ui-monokai-borderColor 
+    border-color $ui-monokai-borderColor
 
   .group-header2
     color $ui-monokai-text-color
 
   .group-section-control-input
-    border-color $ui-monokai-borderColor 
+    border-color $ui-monokai-borderColor
 
   .group-control
-    border-color $ui-monokai-borderColor 
+    border-color $ui-monokai-borderColor
   .group-control-leftButton
     colorDarkDefaultButton()
-    border-color $ui-monokai-borderColor 
+    border-color $ui-monokai-borderColor
   .group-control-rightButton
     colorMonokaiPrimaryButton()
   .group-hint

browser/main/modals/PreferencesModal/Crowdfunding.js

@@ -23,18 +23,18 @@ class Crowdfunding extends React.Component {
     return (
       <div styleName='root'>
         <div styleName='header'>{i18n.__('Crowdfunding')}</div>
-        <p>{i18n.__('Dear everyone,')}</p>
+        <p>{i18n.__('Dear Boostnote users,')}</p>
         <br />
         <p>{i18n.__('Thank you for using Boostnote!')}</p>
         <p>{i18n.__('Boostnote is used in about 200 different countries and regions by an awesome community of developers.')}</p>
         <br />
-        <p>{i18n.__('To continue supporting this growth, and to satisfy community expectations,')}</p>
+        <p>{i18n.__('To support our growing userbase, and satisfy community expectations,')}</p>
         <p>{i18n.__('we would like to invest more time and resources in this project.')}</p>
         <br />
-        <p>{i18n.__('If you like this project and see its potential, you can help by supporting us on OpenCollective!')}</p>
+        <p>{i18n.__('If you use Boostnote and see its potential, help us out by supporting the project on OpenCollective!')}</p>
         <br />
         <p>{i18n.__('Thanks,')}</p>
-        <p>{i18n.__('Boostnote maintainers')}</p>
+        <p>{i18n.__('The Boostnote Team')}</p>
         <br />
         <button styleName='cf-link'>
           <a href='https://opencollective.com/boostnoteio' onClick={(e) => this.handleLinkClick(e)}>{i18n.__('Support via OpenCollective')}</a>

browser/main/modals/PreferencesModal/FolderItem.styl

@@ -2,6 +2,7 @@
   height 35px
   box-sizing border-box
   padding 2.5px 15px
+  display flex
   &:hover
     background-color darken(white, 3%)
 
@@ -18,7 +19,10 @@
   border-left solid 2px transparent
   padding 0 10px
   line-height 30px
-  float left
+  flex 1
+  white-space nowrap
+  text-overflow ellipsis
+  overflow hidden
 .folderItem-left-danger
   color $danger-color
   font-weight bold
@@ -52,7 +56,8 @@
   outline none
 
 .folderItem-right
-  float right
+  -webkit-box-flex: 1
+  white-space nowrap
 
 .folderItem-right-button
   vertical-align middle

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -30,7 +30,7 @@ class HotkeyTab extends React.Component {
     this.handleSettingError = (err) => {
       this.setState({keymapAlert: {
         type: 'error',
-        message: err.message != null ? err.message : i18n.__('Error occurs!')
+        message: err.message != null ? err.message : i18n.__('An error occurred!')
       }})
     }
     this.oldHotkey = this.state.config.hotkey
@@ -79,7 +79,7 @@ class HotkeyTab extends React.Component {
       this.props.haveToSave({
         tab: 'Hotkey',
         type: 'warning',
-        message: i18n.__('You have to save!')
+        message: i18n.__('Unsaved Changes!')
       })
     }
   }
@@ -117,7 +117,7 @@ class HotkeyTab extends React.Component {
             </div>
           </div>
           <div styleName='group-section'>
-            <div styleName='group-section-label'>{i18n.__('Toggle editor mode')}</div>
+            <div styleName='group-section-label'>{i18n.__('Toggle Editor Mode')}</div>
             <div styleName='group-section-control'>
               <input styleName='group-section-control-input'
                 onChange={(e) => this.handleHotkeyChange(e)}

browser/main/modals/PreferencesModal/StorageItem.styl

@@ -9,13 +9,17 @@
   box-sizing border-box
   border-bottom $default-border
   margin-bottom 5px
+  display flex
 
 .header-label
-  float left
   cursor pointer
   &:hover
     .header-label-editButton
       opacity 1
+  flex 1
+  white-space nowrap
+  text-overflow ellipsis
+  overflow hidden
 
 .header-label-path
   color $ui-inactive-text-color
@@ -38,8 +42,8 @@
   outline none
 
 .header-control
-  float right
-
+  -webkit-box-flex: 1
+  white-space nowrap
 .header-control-button
   width 30px
   height 25px

browser/main/modals/PreferencesModal/StoragesTab.js

@@ -70,7 +70,7 @@ class StoragesTab extends React.Component {
     })
     return (
       <div styleName='list'>
-        <div styleName='header'>{i18n.__('Storages')}</div>
+        <div styleName='header'>{i18n.__('Storage Locations')}</div>
         {storageList.length > 0
           ? storageList
           : <div styleName='list-empty'>{i18n.__('No storage found.')}</div>

browser/main/modals/PreferencesModal/UiTab.js

@@ -40,7 +40,7 @@ class UiTab extends React.Component {
     this.handleSettingError = (err) => {
       this.setState({UiAlert: {
         type: 'error',
-        message: err.message != null ? err.message : i18n.__('Error occurs!')
+        message: err.message != null ? err.message : i18n.__('An error occurred!')
       }})
     }
     ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
@@ -67,6 +67,7 @@ class UiTab extends React.Component {
       ui: {
         theme: this.refs.uiTheme.value,
         language: this.refs.uiLanguage.value,
+        defaultNote: this.refs.defaultNote.value,
         showCopyNotification: this.refs.showCopyNotification.checked,
         confirmDeletion: this.refs.confirmDeletion.checked,
         showOnlyRelatedTags: this.refs.showOnlyRelatedTags.checked,
@@ -124,7 +125,7 @@ class UiTab extends React.Component {
         this.props.haveToSave({
           tab: 'UI',
           type: 'warning',
-          message: i18n.__('You have to save!')
+          message: i18n.__('Unsaved Changes!')
         })
       }
     })
@@ -174,7 +175,9 @@ class UiTab extends React.Component {
           <div styleName='group-header'>{i18n.__('Interface')}</div>
 
           <div styleName='group-section'>
-            {i18n.__('Interface Theme')}
+            <div styleName='group-section-label'>
+              {i18n.__('Interface Theme')}
+            </div>
             <div styleName='group-section-control'>
               <select value={config.ui.theme}
                 onChange={(e) => this.handleUIChange(e)}
@@ -190,7 +193,9 @@ class UiTab extends React.Component {
           </div>
 
           <div styleName='group-section'>
-            {i18n.__('Language')}
+            <div styleName='group-section-label'>
+              {i18n.__('Language')}
+            </div>
             <div styleName='group-section-control'>
               <select value={config.ui.language}
                 onChange={(e) => this.handleUIChange(e)}
@@ -203,6 +208,22 @@ class UiTab extends React.Component {
             </div>
           </div>
 
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Default New Note')}
+            </div>
+            <div styleName='group-section-control'>
+              <select value={config.ui.defaultNote}
+                onChange={(e) => this.handleUIChange(e)}
+                ref='defaultNote'
+              >
+                <option value='ALWAYS_ASK'>{i18n.__('Always Ask')}</option>
+                <option value='MARKDOWN_NOTE'>{i18n.__('Markdown Note')}</option>
+                <option value='SNIPPET_NOTE'>{i18n.__('Snippet Note')}</option>
+              </select>
+            </div>
+          </div>
+
           <div styleName='group-checkBoxSection'>
             <label>
               <input onChange={(e) => this.handleUIChange(e)}
@@ -477,7 +498,7 @@ class UiTab extends React.Component {
             </div>
           </div>
           <div styleName='group-section'>
-            <div styleName='group-section-label'>{i18n.__('Code block Theme')}</div>
+            <div styleName='group-section-label'>{i18n.__('Code Block Theme')}</div>
             <div styleName='group-section-control'>
               <select value={config.preview.codeBlockTheme}
                 ref='previewCodeBlockTheme'

browser/main/store.js

@@ -216,16 +216,10 @@ function data (state = defaultDataMap(), action) {
         return state
       }
     case 'UPDATE_FOLDER':
-      state = Object.assign({}, state)
-      state.storageMap = new Map(state.storageMap)
-      state.storageMap.set(action.storage.key, action.storage)
-      return state
     case 'REORDER_FOLDER':
-      state = Object.assign({}, state)
-      state.storageMap = new Map(state.storageMap)
-      state.storageMap.set(action.storage.key, action.storage)
-      return state
     case 'EXPORT_FOLDER':
+    case 'RENAME_STORAGE':
+    case 'EXPORT_STORAGE':
       state = Object.assign({}, state)
       state.storageMap = new Map(state.storageMap)
       state.storageMap.set(action.storage.key, action.storage)
@@ -355,11 +349,6 @@ function data (state = defaultDataMap(), action) {
         })
       }
       return state
-    case 'RENAME_STORAGE':
-      state = Object.assign({}, state)
-      state.storageMap = new Map(state.storageMap)
-      state.storageMap.set(action.storage.key, action.storage)
-      return state
     case 'EXPAND_STORAGE':
       state = Object.assign({}, state)
       state.storageMap = new Map(state.storageMap)

browser/styles/Detail/TagSelect.styl

@@ -0,0 +1,109 @@
+.TagSelect
+  .react-autosuggest__input
+    box-sizing border-box
+    border none
+    background-color transparent
+    outline none
+    padding 0 4px
+    font-size 13px
+
+  ul
+    position fixed
+    z-index 999
+    box-sizing border-box
+    list-style none
+    padding 0
+    margin 0
+    
+    border-radius 4px
+    margin .2em 0 0
+    background-color $ui-noteList-backgroundColor
+    border 1px solid rgba(0,0,0,.3)
+    box-shadow .05em .2em .6em rgba(0,0,0,.2)
+    text-shadow none
+    
+    &:empty,
+    &[hidden]
+      display none
+    
+    &:before
+      content ""
+      position absolute
+      top -7px
+      left 14px
+      width 0 height 0
+      padding 6px
+      background-color $ui-noteList-backgroundColor
+      border inherit
+      border-right 0
+      border-bottom 0
+      -webkit-transform rotate(45deg)
+      transform rotate(45deg)
+      
+    li
+      position relative
+      padding 6px 18px 6px 10px
+      cursor pointer
+    
+    li[aria-selected="true"]
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+      color $ui-text-color
+
+body[data-theme="dark"]
+  .TagSelect
+    .react-autosuggest__input
+      color $ui-dark-text-color
+    
+    ul
+      border-color $ui-dark-borderColor
+      background-color $ui-dark-noteList-backgroundColor
+      color $ui-dark-text-color
+      
+      &:before
+        background-color $ui-dark-noteList-backgroundColor
+      
+      li[aria-selected="true"]
+        background-color $ui-dark-button--active-backgroundColor
+        color $ui-dark-text-color
+
+body[data-theme="monokai"]
+  .TagSelect
+    .react-autosuggest__input
+      color $ui-monokai-text-color
+    
+    ul
+      border-color $ui-monokai-borderColor
+      background-color $ui-monokai-noteList-backgroundColor
+      color $ui-monokai-text-color
+      
+      &:before
+        background-color $ui-dark-noteList-backgroundColor
+      
+      li[aria-selected="true"]
+        background-color $ui-monokai-button-backgroundColor
+        color $ui-monokai-text-color
+
+body[data-theme="solarized-dark"]
+  .TagSelect
+    .react-autosuggest__input
+      color $ui-solarized-dark-text-color
+    
+    ul
+      border-color $ui-solarized-dark-borderColor
+      background-color $ui-solarized-dark-noteList-backgroundColor
+      color $ui-solarized-dark-text-color
+      
+      &:before
+        background-color $ui-solarized-dark-noteList-backgroundColor
+      
+      li[aria-selected="true"]
+        background-color $ui-dark-button--active-backgroundColor
+        color $ui-solarized-dark-text-color
+
+body[data-theme="white"]
+  .TagSelect
+    ul
+      background-color $ui-white-noteList-backgroundColor
+      
+      li[aria-selected="true"]
+        background-color $ui-button--active-backgroundColor

browser/styles/index.styl

@@ -369,7 +369,7 @@ $ui-monokai-active-color = #f92672
 
 $ui-monokai-borderColor = #373831
 
-$ui-monokai-tag-backgroundColor = #f92672
+$ui-monokai-tag-backgroundColor = #373831
 
 $ui-monokai-button-backgroundColor = #373831
 $ui-monokai-button--active-color = white