v0.11.6

#2042 Debounce for details renderig added

.babelrc

@@ -5,7 +5,7 @@
       "presets": ["react-hmre"]
     },
     "test": {
-      "presets": ["react", "es2015"],
+      "presets": ["env" ,"react", "es2015"],
       "plugins": [
         [ "babel-plugin-webpack-alias", { "config": "${PWD}/webpack.config.js" } ]
       ]

.boostnoterc.sample

@@ -23,6 +23,7 @@
         "lineNumber": true
     },
     "sortBy": "UPDATED_AT",
+    "sortTagsBy": "ALPHABETICAL",
     "ui": {
         "defaultNote": "ALWAYS_ASK",
         "disableDirectWrite": false,

.eslintignore

@@ -1,3 +1,4 @@
 node_modules/
 compiled/
 dist/
+extra_scripts/

.eslintrc

@@ -3,7 +3,9 @@
   "plugins": ["react"],
   "rules": {
     "no-useless-escape": 0,
-    "prefer-const": "warn",
+    "prefer-const": ["warn", {
+      "destructuring": "all"
+    }],
     "no-unused-vars": "warn",
     "no-undef": "warn",
     "no-lone-blocks": "warn",
@@ -17,5 +19,8 @@
     "FileReader": true,
     "localStorage": true,
     "fetch": true
+  },
+  "env": {
+    "jest": true
   }
 }

.travis.yml

@@ -1,8 +1,9 @@
 language: node_js
 node_js:
-  - 6
+  - 7
 script:
   - npm run lint && npm run test
+  - yarn jest
   - 'if [[ ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} = "master" ]]; then npm install -g grunt npm@5.2 && grunt pre-build; fi'
 after_success:
   - openssl aes-256-cbc -K $encrypted_440d7f9a3c38_key -iv $encrypted_440d7f9a3c38_iv

ISSUE_TEMPLATE.md

@@ -1,9 +1,24 @@
+# Current behavior
+
 <!--
 Please paste some **screenshots** with the **developer tool** open (console tab) when you report a bug.
 
 If your issue is regarding boostnote mobile, move to https://github.com/BoostIO/boostnote-mobile.
 -->
 
+# Expected behavior
+
+# Steps to reproduce
+
+1. 
+2. 
+3. 
+
+# Environment
+
+- Version :
+- OS Version and name :
+
 <!--
 Love Boostnote? Please consider supporting us via OpenCollective:
 👉  https://opencollective.com/boostnoteio

__mocks__/electron.js

@@ -0,0 +1,7 @@
+module.exports = {
+  require: jest.genMockFunction(),
+  match: jest.genMockFunction(),
+  app: jest.genMockFunction(),
+  remote: jest.genMockFunction(),
+  dialog: jest.genMockFunction()
+}

browser/components/CodeEditor.js

@@ -3,37 +3,32 @@ import React from 'react'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
 import 'codemirror-mode-elixir'
-import path from 'path'
-import copyImage from 'browser/main/lib/dataApi/copyImage'
-import { findStorage } from 'browser/lib/findStorage'
-import fs from 'fs'
+import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'
+import convertModeName from 'browser/lib/convertModeName'
 import eventEmitter from 'browser/main/lib/eventEmitter'
+import iconv from 'iconv-lite'
+import crypto from 'crypto'
+import consts from 'browser/lib/consts'
+import fs from 'fs'
+const { ipcRenderer } = require('electron')
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
 const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
-
-function pass (name) {
-  switch (name) {
-    case 'ejs':
-      return 'Embedded Javascript'
-    case 'html_ruby':
-      return 'Embedded Ruby'
-    case 'objectivec':
-      return 'Objective C'
-    case 'text':
-      return 'Plain Text'
-    default:
-      return name
-  }
-}
+const buildCMRulers = (rulers, enableRulers) =>
+  enableRulers ? rulers.map(ruler => ({column: ruler})) : []
 
 export default class CodeEditor extends React.Component {
   constructor (props) {
     super(props)
 
+    this.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {leading: false, trailing: true})
     this.changeHandler = (e) => this.handleChange(e)
+    this.focusHandler = () => {
+      ipcRenderer.send('editor:focused', true)
+    }
     this.blurHandler = (editor, e) => {
+      ipcRenderer.send('editor:focused', false)
       if (e == null) return null
       let el = e.relatedTarget
       while (el != null) {
@@ -43,6 +38,9 @@ export default class CodeEditor extends React.Component {
         el = el.parentNode
       }
       this.props.onBlur != null && this.props.onBlur(e)
+
+      const {storageKey, noteKey} = this.props
+      attachmentManagement.deleteAttachmentsNotPresentInNote(this.editor.getValue(), storageKey, noteKey)
     }
     this.pasteHandler = (editor, e) => this.handlePaste(editor, e)
     this.loadStyleHandler = (e) => {
@@ -81,13 +79,27 @@ export default class CodeEditor extends React.Component {
         }
       }
     })
-    this.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {leading: false, trailing: true})
   }
 
   componentDidMount () {
-    this.value = this.props.value
+    const { rulers, enableRulers } = this.props
+    const expandSnippet = this.expandSnippet.bind(this)
 
+    const defaultSnippet = [
+      {
+        id: crypto.randomBytes(16).toString('hex'),
+        name: 'Dummy text',
+        prefix: ['lorem', 'ipsum'],
+        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+      }
+    ]
+    if (!fs.existsSync(consts.SNIPPET_FILE)) {
+      fs.writeFileSync(consts.SNIPPET_FILE, JSON.stringify(defaultSnippet, null, 4), 'utf8')
+    }
+
+    this.value = this.props.value
     this.editor = CodeMirror(this.refs.root, {
+      rulers: buildCMRulers(rulers, enableRulers),
       value: this.props.value,
       lineNumbers: this.props.displayLineNumbers,
       lineWrapping: true,
@@ -99,11 +111,15 @@ export default class CodeEditor extends React.Component {
       scrollPastEnd: this.props.scrollPastEnd,
       inputStyle: 'textarea',
       dragDrop: false,
+      foldGutter: true,
+      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
       autoCloseBrackets: true,
       extraKeys: {
         Tab: function (cm) {
           const cursor = cm.getCursor()
           const line = cm.getLine(cursor.line)
+          const cursorPosition = cursor.ch
+          const charBeforeCursor = line.substr(cursorPosition - 1, 1)
           if (cm.somethingSelected()) cm.indentSelection('add')
           else {
             const tabs = cm.getOption('indentWithTabs')
@@ -115,6 +131,16 @@ export default class CodeEditor extends React.Component {
                 cm.execCommand('insertSoftTab')
               }
               cm.execCommand('goLineEnd')
+            } else if (!charBeforeCursor.match(/\t|\s|\r|\n/) && cursor.ch > 1) {
+              // text expansion on tab key if the char before is alphabet
+              const snippets = JSON.parse(fs.readFileSync(consts.SNIPPET_FILE, 'utf8'))
+              if (expandSnippet(line, cursor, cm, snippets) === false) {
+                if (tabs) {
+                  cm.execCommand('insertTab')
+                } else {
+                  cm.execCommand('insertSoftTab')
+                }
+              }
             } else {
               if (tabs) {
                 cm.execCommand('insertTab')
@@ -139,6 +165,7 @@ export default class CodeEditor extends React.Component {
 
     this.setMode(this.props.mode)
 
+    this.editor.on('focus', this.focusHandler)
     this.editor.on('blur', this.blurHandler)
     this.editor.on('change', this.changeHandler)
     this.editor.on('paste', this.pasteHandler)
@@ -157,11 +184,79 @@ export default class CodeEditor extends React.Component {
     CodeMirror.Vim.map('ZZ', ':q', 'normal')
   }
 
+  expandSnippet (line, cursor, cm, snippets) {
+    const wordBeforeCursor = this.getWordBeforeCursor(line, cursor.line, cursor.ch)
+    const templateCursorString = ':{}'
+    for (let i = 0; i < snippets.length; i++) {
+      if (snippets[i].prefix.indexOf(wordBeforeCursor.text) !== -1) {
+        if (snippets[i].content.indexOf(templateCursorString) !== -1) {
+          const snippetLines = snippets[i].content.split('\n')
+          let cursorLineNumber = 0
+          let cursorLinePosition = 0
+          for (let j = 0; j < snippetLines.length; j++) {
+            const cursorIndex = snippetLines[j].indexOf(templateCursorString)
+            if (cursorIndex !== -1) {
+              cursorLineNumber = j
+              cursorLinePosition = cursorIndex
+              cm.replaceRange(
+                snippets[i].content.replace(templateCursorString, ''),
+                wordBeforeCursor.range.from,
+                wordBeforeCursor.range.to
+              )
+              cm.setCursor({ line: cursor.line + cursorLineNumber, ch: cursorLinePosition })
+            }
+          }
+        } else {
+          cm.replaceRange(
+            snippets[i].content,
+            wordBeforeCursor.range.from,
+            wordBeforeCursor.range.to
+          )
+        }
+        return true
+      }
+    }
+
+    return false
+  }
+
+  getWordBeforeCursor (line, lineNumber, cursorPosition) {
+    let wordBeforeCursor = ''
+    const originCursorPosition = cursorPosition
+    const emptyChars = /\t|\s|\r|\n/
+
+    // to prevent the word to expand is long that will crash the whole app
+    // the safeStop is there to stop user to expand words that longer than 20 chars
+    const safeStop = 20
+
+    while (cursorPosition > 0) {
+      const currentChar = line.substr(cursorPosition - 1, 1)
+      // if char is not an empty char
+      if (!emptyChars.test(currentChar)) {
+        wordBeforeCursor = currentChar + wordBeforeCursor
+      } else if (wordBeforeCursor.length >= safeStop) {
+        throw new Error('Your snippet trigger is too long !')
+      } else {
+        break
+      }
+      cursorPosition--
+    }
+
+    return {
+      text: wordBeforeCursor,
+      range: {
+        from: {line: lineNumber, ch: originCursorPosition},
+        to: {line: lineNumber, ch: cursorPosition}
+      }
+    }
+  }
+
   quitEditor () {
     document.querySelector('textarea').blur()
   }
 
   componentWillUnmount () {
+    this.editor.off('focus', this.focusHandler)
     this.editor.off('blur', this.blurHandler)
     this.editor.off('change', this.changeHandler)
     this.editor.off('paste', this.pasteHandler)
@@ -173,6 +268,7 @@ export default class CodeEditor extends React.Component {
 
   componentDidUpdate (prevProps, prevState) {
     let needRefresh = false
+    const {rulers, enableRulers} = this.props
     if (prevProps.mode !== this.props.mode) {
       this.setMode(this.props.mode)
     }
@@ -190,6 +286,10 @@ export default class CodeEditor extends React.Component {
       needRefresh = true
     }
 
+    if (prevProps.enableRulers !== enableRulers || prevProps.rulers !== rulers) {
+      this.editor.setOption('rulers', buildCMRulers(rulers, enableRulers))
+    }
+
     if (prevProps.indentSize !== this.props.indentSize) {
       this.editor.setOption('indentUnit', this.props.indentSize)
       this.editor.setOption('tabSize', this.props.indentSize)
@@ -212,7 +312,7 @@ export default class CodeEditor extends React.Component {
   }
 
   setMode (mode) {
-    let syntax = CodeMirror.findModeByName(pass(mode))
+    let syntax = CodeMirror.findModeByName(convertModeName(mode))
     if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
 
     this.editor.setOption('mode', syntax.mime)
@@ -256,51 +356,50 @@ export default class CodeEditor extends React.Component {
     this.editor.setCursor(cursor)
   }
 
-  handleDropImage (e) {
-    e.preventDefault()
-    const imagePath = e.dataTransfer.files[0].path
-    const filename = path.basename(imagePath)
-
-    copyImage(imagePath, this.props.storageKey).then((imagePath) => {
-      const imageMd = `![${filename}](${path.join('/:storage', imagePath)})`
-      this.insertImageMd(imageMd)
-    })
+  handleDropImage (dropEvent) {
+    dropEvent.preventDefault()
+    const {storageKey, noteKey} = this.props
+    attachmentManagement.handleAttachmentDrop(this, storageKey, noteKey, dropEvent)
   }
 
-  insertImageMd (imageMd) {
+  insertAttachmentMd (imageMd) {
     this.editor.replaceSelection(imageMd)
   }
 
   handlePaste (editor, e) {
     const clipboardData = e.clipboardData
+    const {storageKey, noteKey} = this.props
     const dataTransferItem = clipboardData.items[0]
     const pastedTxt = clipboardData.getData('text')
     const isURL = (str) => {
       const matcher = /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/
       return matcher.test(str)
     }
+    const isInLinkTag = (editor) => {
+      const startCursor = editor.getCursor('start')
+      const prevChar = editor.getRange(
+        {line: startCursor.line, ch: startCursor.ch - 2},
+        {line: startCursor.line, ch: startCursor.ch}
+      )
+      const endCursor = editor.getCursor('end')
+      const nextChar = editor.getRange(
+        {line: endCursor.line, ch: endCursor.ch},
+        {line: endCursor.line, ch: endCursor.ch + 1}
+      )
+      return prevChar === '](' && nextChar === ')'
+    }
     if (dataTransferItem.type.match('image')) {
-      const blob = dataTransferItem.getAsFile()
-      const reader = new FileReader()
-      let base64data
-
-      reader.readAsDataURL(blob)
-      reader.onloadend = () => {
-        base64data = reader.result.replace(/^data:image\/png;base64,/, '')
-        base64data += base64data.replace('+', ' ')
-        const binaryData = new Buffer(base64data, 'base64').toString('binary')
-        const imageName = Math.random().toString(36).slice(-16)
-        const storagePath = findStorage(this.props.storageKey).path
-        const imageDir = path.join(storagePath, 'images')
-        if (!fs.existsSync(imageDir)) fs.mkdirSync(imageDir)
-        const imagePath = path.join(imageDir, `${imageName}.png`)
-        fs.writeFile(imagePath, binaryData, 'binary')
-        const imageMd = `![${imageName}](${path.join('/:storage', `${imageName}.png`)})`
-        this.insertImageMd(imageMd)
-      }
-    } else if (this.props.fetchUrlTitle && isURL(pastedTxt)) {
+      attachmentManagement.handlePastImageEvent(this, storageKey, noteKey, dataTransferItem)
+    } else if (this.props.fetchUrlTitle && isURL(pastedTxt) && !isInLinkTag(editor)) {
       this.handlePasteUrl(e, editor, pastedTxt)
     }
+    if (attachmentManagement.isAttachmentLink(pastedTxt)) {
+      attachmentManagement.handleAttachmentLinkPaste(storageKey, noteKey, pastedTxt)
+        .then((modifiedText) => {
+          this.editor.replaceSelection(modifiedText)
+        })
+      e.preventDefault()
+    }
   }
 
   handleScroll (e) {
@@ -314,33 +413,93 @@ export default class CodeEditor extends React.Component {
     const taggedUrl = `<${pastedTxt}>`
     editor.replaceSelection(taggedUrl)
 
+    const isImageReponse = (response) => {
+      return response.headers.has('content-type') &&
+        response.headers.get('content-type').match(/^image\/.+$/)
+    }
+    const replaceTaggedUrl = (replacement) => {
+      const value = editor.getValue()
+      const cursor = editor.getCursor()
+      const newValue = value.replace(taggedUrl, replacement)
+      const newCursor = Object.assign({}, cursor, { ch: cursor.ch + newValue.length - value.length })
+      editor.setValue(newValue)
+      editor.setCursor(newCursor)
+    }
+
     fetch(pastedTxt, {
       method: 'get'
     }).then((response) => {
-      return (response.text())
-    }).then((response) => {
-      const parsedResponse = (new window.DOMParser()).parseFromString(response, 'text/html')
-      const value = editor.getValue()
-      const cursor = editor.getCursor()
-      const LinkWithTitle = `[${parsedResponse.title}](${pastedTxt})`
-      const newValue = value.replace(taggedUrl, LinkWithTitle)
-      editor.setValue(newValue)
-      editor.setCursor(cursor)
+      if (isImageReponse(response)) {
+        return this.mapImageResponse(response, pastedTxt)
+      } else {
+        return this.mapNormalResponse(response, pastedTxt)
+      }
+    }).then((replacement) => {
+      replaceTaggedUrl(replacement)
     }).catch((e) => {
-      const value = editor.getValue()
-      const newValue = value.replace(taggedUrl, pastedTxt)
-      const cursor = editor.getCursor()
-      editor.setValue(newValue)
-      editor.setCursor(cursor)
+      replaceTaggedUrl(pastedTxt)
     })
   }
 
+  mapNormalResponse (response, pastedTxt) {
+    return this.decodeResponse(response).then((body) => {
+      return new Promise((resolve, reject) => {
+        try {
+          const parsedBody = (new window.DOMParser()).parseFromString(body, 'text/html')
+          const linkWithTitle = `[${parsedBody.title}](${pastedTxt})`
+          resolve(linkWithTitle)
+        } catch (e) {
+          reject(e)
+        }
+      })
+    })
+  }
+
+  mapImageResponse (response, pastedTxt) {
+    return new Promise((resolve, reject) => {
+      try {
+        const url = response.url
+        const name = url.substring(url.lastIndexOf('/') + 1)
+        const imageLinkWithName = `![${name}](${pastedTxt})`
+        resolve(imageLinkWithName)
+      } catch (e) {
+        reject(e)
+      }
+    })
+  }
+
+  decodeResponse (response) {
+    const headers = response.headers
+    const _charset = headers.has('content-type')
+      ? this.extractContentTypeCharset(headers.get('content-type'))
+      : undefined
+    return response.arrayBuffer().then((buff) => {
+      return new Promise((resolve, reject) => {
+        try {
+          const charset = _charset !== undefined && iconv.encodingExists(_charset) ? _charset : 'utf-8'
+          resolve(iconv.decode(new Buffer(buff), charset).toString())
+        } catch (e) {
+          reject(e)
+        }
+      })
+    })
+  }
+
+  extractContentTypeCharset (contentType) {
+    return contentType.split(';').filter((str) => {
+      return str.trim().toLowerCase().startsWith('charset')
+    }).map((str) => {
+      return str.replace(/['"]/g, '').split('=')[1]
+    })[0]
+  }
+
   render () {
-    const { className, fontSize } = this.props
+    const {className, fontSize} = this.props
     let fontFamily = this.props.fontFamily
     fontFamily = _.isString(fontFamily) && fontFamily.length > 0
       ? [fontFamily].concat(defaultEditorFontFamily)
       : defaultEditorFontFamily
+    const width = this.props.width
     return (
       <div
         className={className == null
@@ -351,7 +510,8 @@ export default class CodeEditor extends React.Component {
         tabIndex='-1'
         style={{
           fontFamily: fontFamily.join(', '),
-          fontSize: fontSize
+          fontSize: fontSize,
+          width: width
         }}
         onDrop={(e) => this.handleDropImage(e)}
       />
@@ -361,6 +521,8 @@ export default class CodeEditor extends React.Component {
 
 CodeEditor.propTypes = {
   value: PropTypes.string,
+  enableRulers: PropTypes.bool,
+  rulers: PropTypes.arrayOf(Number),
   mode: PropTypes.string,
   className: PropTypes.string,
   onBlur: PropTypes.func,

browser/components/MarkdownEditor.js

@@ -5,7 +5,7 @@ import styles from './MarkdownEditor.styl'
 import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
 import eventEmitter from 'browser/main/lib/eventEmitter'
-import {findStorage} from 'browser/lib/findStorage'
+import { findStorage } from 'browser/lib/findStorage'
 
 class MarkdownEditor extends React.Component {
   constructor (props) {
@@ -223,7 +223,7 @@ class MarkdownEditor extends React.Component {
   }
 
   render () {
-    const { className, value, config, storageKey } = this.props
+    const {className, value, config, storageKey, noteKey} = this.props
 
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
@@ -258,9 +258,12 @@ class MarkdownEditor extends React.Component {
           fontSize={editorFontSize}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
+          enableRulers={config.editor.enableRulers}
+          rulers={config.editor.rulers}
           displayLineNumbers={config.editor.displayLineNumbers}
           scrollPastEnd={config.editor.scrollPastEnd}
           storageKey={storageKey}
+          noteKey={noteKey}
           fetchUrlTitle={config.editor.fetchUrlTitle}
           onChange={(e) => this.handleChange(e)}
           onBlur={(e) => this.handleBlur(e)}
@@ -279,6 +282,10 @@ class MarkdownEditor extends React.Component {
           lineNumber={config.preview.lineNumber}
           indentSize={editorIndentSize}
           scrollPastEnd={config.preview.scrollPastEnd}
+          smartQuotes={config.preview.smartQuotes}
+          smartArrows={config.preview.smartArrows}
+          breaks={config.preview.breaks}
+          sanitize={config.preview.sanitize}
           ref='preview'
           onContextMenu={(e) => this.handleContextMenu(e)}
           onDoubleClick={(e) => this.handleDoubleClick(e)}
@@ -289,6 +296,9 @@ class MarkdownEditor extends React.Component {
           onCheckboxClick={(e) => this.handleCheckboxClick(e)}
           showCopyNotification={config.ui.showCopyNotification}
           storagePath={storage.path}
+          noteKey={noteKey}
+          customCSS={config.preview.customCSS}
+          allowCustomCSS={config.preview.allowCustomCSS}
         />
       </div>
     )

browser/components/MarkdownPreview.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import markdown from 'browser/lib/markdown'
+import Markdown from 'browser/lib/markdown'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
 import 'codemirror-mode-elixir'
@@ -10,11 +10,15 @@ import flowchart from 'flowchart'
 import SequenceDiagram from 'js-sequence-diagrams'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import htmlTextHelper from 'browser/lib/htmlTextHelper'
+import convertModeName from 'browser/lib/convertModeName'
 import copy from 'copy-to-clipboard'
 import mdurl from 'mdurl'
 import exportNote from 'browser/main/lib/dataApi/exportNote'
+import { escapeHtmlCharacters } from 'browser/lib/utils'
 
 const { remote } = require('electron')
+const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
+
 const { app } = remote
 const path = require('path')
 const dialog = remote.dialog
@@ -28,7 +32,7 @@ const CSS_FILES = [
   `${appPath}/node_modules/codemirror/lib/codemirror.css`
 ]
 
-function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd) {
+function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme, allowCustomCSS, customCSS) {
   return `
 @font-face {
   font-family: 'Lato';
@@ -48,7 +52,19 @@ function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scro
   font-weight: 700;
   text-rendering: optimizeLegibility;
 }
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url('${appPath}/resources/fonts/MaterialIcons-Regular.woff2') format('woff2'),
+       url('${appPath}/resources/fonts/MaterialIcons-Regular.woff') format('woff'),
+       url('${appPath}/resources/fonts/MaterialIcons-Regular.ttf') format('truetype');
+}
+${allowCustomCSS ? customCSS : ''}
 ${markdownStyle}
+
 body {
   font-family: '${fontFamily.join("','")}';
   font-size: ${fontSize}px;
@@ -100,6 +116,16 @@ h2 {
 body p {
   white-space: normal;
 }
+
+@media print {
+  body[data-theme="${theme}"] {
+    color: #000;
+    background-color: #fff;
+  }
+  .clipboardButton {
+    display: none
+  }
+}
 `
 }
 
@@ -112,7 +138,6 @@ if (!OSX) {
   defaultFontFamily.unshift('meiryo')
 }
 const defaultCodeBlockFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
-
 export default class MarkdownPreview extends React.Component {
   constructor (props) {
     super(props)
@@ -122,7 +147,6 @@ export default class MarkdownPreview extends React.Component {
     this.mouseUpHandler = (e) => this.handleMouseUp(e)
     this.DoubleClickHandler = (e) => this.handleDoubleClick(e)
     this.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {leading: false, trailing: true})
-    this.anchorClickHandler = (e) => this.handlePreviewAnchorClick(e)
     this.checkboxClickHandler = (e) => this.handleCheckboxClick(e)
     this.saveAsTextHandler = () => this.handleSaveAsText()
     this.saveAsMdHandler = () => this.handleSaveAsMd()
@@ -130,22 +154,17 @@ export default class MarkdownPreview extends React.Component {
     this.printHandler = () => this.handlePrint()
 
     this.linkClickHandler = this.handlelinkClick.bind(this)
+    this.initMarkdown = this.initMarkdown.bind(this)
+    this.initMarkdown()
   }
 
-  handlePreviewAnchorClick (e) {
-    e.preventDefault()
-    e.stopPropagation()
-
-    const anchor = e.target.closest('a')
-    const href = anchor.getAttribute('href')
-    if (_.isString(href) && href.match(/^#/)) {
-      const targetElement = this.refs.root.contentWindow.document.getElementById(href.substring(1, href.length))
-      if (targetElement != null) {
-        this.getWindow().scrollTo(0, targetElement.offsetTop)
-      }
-    } else {
-      shell.openExternal(href)
-    }
+  initMarkdown () {
+    const { smartQuotes, sanitize, breaks } = this.props
+    this.markdown = new Markdown({
+      typographer: smartQuotes,
+      sanitize,
+      breaks
+    })
   }
 
   handleCheckboxClick (e) {
@@ -195,11 +214,13 @@ export default class MarkdownPreview extends React.Component {
 
   handleSaveAsHtml () {
     this.exportAsDocument('html', (noteContent, exportTasks) => {
-      const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme} = this.getStyleParams()
+      const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS} = this.getStyleParams()
+
+      const inlineStyles = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme, allowCustomCSS, customCSS)
+      let body = this.markdown.render(escapeHtmlCharacters(noteContent))
 
-      const inlineStyles = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, lineNumber)
-      const body = markdown.render(noteContent)
       const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
+      const attachmentsAbsolutePaths = attachmentManagement.getAbsolutePathsOfAttachmentsInContent(noteContent, this.props.storagePath)
 
       files.forEach((file) => {
         file = file.replace('file://', '')
@@ -208,6 +229,13 @@ export default class MarkdownPreview extends React.Component {
           dst: 'css'
         })
       })
+      attachmentsAbsolutePaths.forEach((attachment) => {
+        exportTasks.push({
+          src: attachment,
+          dst: attachmentManagement.DESTINATION_FOLDER
+        })
+      })
+      body = attachmentManagement.removeStorageAndNoteReferences(body, this.props.noteKey)
 
       let styles = ''
       files.forEach((file) => {
@@ -216,6 +244,8 @@ export default class MarkdownPreview extends React.Component {
 
       return `<html>
                  <head>
+                   <meta charset="UTF-8">
+                   <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1">
                    <style id="style">${inlineStyles}</style>
                    ${styles}
                  </head>
@@ -309,6 +339,13 @@ export default class MarkdownPreview extends React.Component {
 
   componentDidUpdate (prevProps) {
     if (prevProps.value !== this.props.value) this.rewriteIframe()
+    if (prevProps.smartQuotes !== this.props.smartQuotes ||
+        prevProps.sanitize !== this.props.sanitize ||
+        prevProps.smartArrows !== this.props.smartArrows ||
+        prevProps.breaks !== this.props.breaks) {
+      this.initMarkdown()
+      this.rewriteIframe()
+    }
     if (prevProps.fontFamily !== this.props.fontFamily ||
       prevProps.fontSize !== this.props.fontSize ||
       prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
@@ -316,14 +353,16 @@ export default class MarkdownPreview extends React.Component {
       prevProps.lineNumber !== this.props.lineNumber ||
       prevProps.showCopyNotification !== this.props.showCopyNotification ||
       prevProps.theme !== this.props.theme ||
-      prevProps.scrollPastEnd !== this.props.scrollPastEnd) {
+      prevProps.scrollPastEnd !== this.props.scrollPastEnd ||
+      prevProps.allowCustomCSS !== this.props.allowCustomCSS ||
+      prevProps.customCSS !== this.props.customCSS) {
       this.applyStyle()
       this.rewriteIframe()
     }
   }
 
   getStyleParams () {
-    const { fontSize, lineNumber, codeBlockTheme, scrollPastEnd } = this.props
+    const { fontSize, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS } = this.props
     let { fontFamily, codeBlockFontFamily } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
         ? fontFamily.split(',').map(fontName => fontName.trim()).concat(defaultFontFamily)
@@ -332,14 +371,14 @@ export default class MarkdownPreview extends React.Component {
         ? codeBlockFontFamily.split(',').map(fontName => fontName.trim()).concat(defaultCodeBlockFontFamily)
         : defaultCodeBlockFontFamily
 
-    return {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd}
+    return {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS}
   }
 
   applyStyle () {
-    const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd} = this.getStyleParams()
+    const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS} = this.getStyleParams()
 
     this.getWindow().document.getElementById('codeTheme').href = this.GetCodeThemeLink(codeBlockTheme)
-    this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd)
+    this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme, allowCustomCSS, customCSS)
   }
 
   GetCodeThemeLink (theme) {
@@ -352,9 +391,6 @@ export default class MarkdownPreview extends React.Component {
   }
 
   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)
     })
@@ -363,7 +399,7 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', this.linkClickHandler)
     })
 
-    const { theme, indentSize, showCopyNotification, storagePath } = this.props
+    const { theme, indentSize, showCopyNotification, storagePath, noteKey } = this.props
     let { value, codeBlockTheme } = this.props
 
     this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
@@ -374,33 +410,25 @@ export default class MarkdownPreview extends React.Component {
         value = value.replace(codeBlock, htmlTextHelper.encodeEntities(codeBlock))
       })
     }
-    this.refs.root.contentWindow.document.body.innerHTML = markdown.render(value)
-
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
-      this.fixDecodedURI(el)
-      el.addEventListener('click', this.anchorClickHandler)
-    })
+    let renderedHTML = this.markdown.render(value)
+    attachmentManagement.migrateAttachments(renderedHTML, storagePath, noteKey)
+    this.refs.root.contentWindow.document.body.innerHTML = attachmentManagement.fixLocalURLS(renderedHTML, storagePath)
 
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
       el.addEventListener('click', this.checkboxClickHandler)
     })
 
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      this.fixDecodedURI(el)
       el.addEventListener('click', this.linkClickHandler)
     })
 
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('img'), (el) => {
-      el.src = markdown.normalizeLinkText(el.src)
-      if (!/\/:storage/.test(el.src)) return
-      el.src = `file:///${markdown.normalizeLinkText(path.join(storagePath, 'images', path.basename(el.src)))}`
-    })
-
     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)
+      let syntax = CodeMirror.findModeByName(convertModeName(el.className))
       if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
       CodeMirror.requireMode(syntax.mode, () => {
         const content = htmlTextHelper.decodeEntities(el.innerHTML)
@@ -419,9 +447,9 @@ export default class MarkdownPreview extends React.Component {
         el.innerHTML = ''
         if (codeBlockTheme.indexOf('solarized') === 0) {
           const [refThema, color] = codeBlockTheme.split(' ')
-          el.parentNode.className += ` cm-s-${refThema} cm-s-${color} CodeMirror`
+          el.parentNode.className += ` cm-s-${refThema} cm-s-${color}`
         } else {
-          el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
+          el.parentNode.className += ` cm-s-${codeBlockTheme}`
         }
         CodeMirror.runMode(content, syntax.mime, el, {
           tabSize: indentSize
@@ -442,7 +470,7 @@ export default class MarkdownPreview extends React.Component {
         el.innerHTML = ''
         diagram.drawSVG(el, opts)
         _.forEach(el.querySelectorAll('a'), (el) => {
-          el.addEventListener('click', this.anchorClickHandler)
+          el.addEventListener('click', this.linkClickHandler)
         })
       } catch (e) {
         console.error(e)
@@ -458,7 +486,7 @@ export default class MarkdownPreview extends React.Component {
         el.innerHTML = ''
         diagram.drawSVG(el, {theme: 'simple'})
         _.forEach(el.querySelectorAll('a'), (el) => {
-          el.addEventListener('click', this.anchorClickHandler)
+          el.addEventListener('click', this.linkClickHandler)
         })
       } catch (e) {
         console.error(e)
@@ -503,11 +531,44 @@ export default class MarkdownPreview extends React.Component {
   }
 
   handlelinkClick (e) {
-    const noteHash = e.target.href.split('/').pop()
-    const regexIsNoteLink = /^(.{20})-(.{20})$/
-    if (regexIsNoteLink.test(noteHash)) {
-      eventEmitter.emit('list:jump', noteHash)
+    e.preventDefault()
+    e.stopPropagation()
+
+    const href = e.target.href
+    const linkHash = href.split('/').pop()
+
+    const regexNoteInternalLink = /main.html#(.+)/
+    if (regexNoteInternalLink.test(linkHash)) {
+      const targetId = mdurl.encode(linkHash.match(regexNoteInternalLink)[1])
+      const targetElement = this.refs.root.contentWindow.document.getElementById(targetId)
+
+      if (targetElement != null) {
+        this.getWindow().scrollTo(0, targetElement.offsetTop)
+      }
+      return
     }
+
+    // this will match the new uuid v4 hash and the old hash
+    // e.g.
+    // :note:1c211eb7dcb463de6490 and
+    // :note:7dd23275-f2b4-49cb-9e93-3454daf1af9c
+    const regexIsNoteLink = /^:note:([a-zA-Z0-9-]{20,36})$/
+    if (regexIsNoteLink.test(linkHash)) {
+      eventEmitter.emit('list:jump', linkHash.replace(':note:', ''))
+      return
+    }
+
+    // this will match the old link format storage.key-note.key
+    // e.g.
+    // 877f99c3268608328037-1c211eb7dcb463de6490
+    const regexIsLegacyNoteLink = /^(.{20})-(.{20})$/
+    if (regexIsLegacyNoteLink.test(linkHash)) {
+      eventEmitter.emit('list:jump', linkHash.split('-')[1])
+      return
+    }
+
+    // other case
+    shell.openExternal(href)
   }
 
   render () {
@@ -530,8 +591,12 @@ MarkdownPreview.propTypes = {
   onDoubleClick: PropTypes.func,
   onMouseUp: PropTypes.func,
   onMouseDown: PropTypes.func,
+  onContextMenu: PropTypes.func,
   className: PropTypes.string,
   value: PropTypes.string,
   showCopyNotification: PropTypes.bool,
-  storagePath: PropTypes.string
+  storagePath: PropTypes.string,
+  smartQuotes: PropTypes.bool,
+  smartArrows: PropTypes.bool,
+  breaks: PropTypes.bool
 }

browser/components/MarkdownSplitEditor.js

@@ -14,6 +14,10 @@ class MarkdownSplitEditor extends React.Component {
     this.focus = () => this.refs.code.focus()
     this.reload = () => this.refs.code.reload()
     this.userScroll = true
+    this.state = {
+      isSliderFocused: false,
+      codeEditorWidthInPercent: 50
+    }
   }
 
   handleOnChange () {
@@ -87,20 +91,60 @@ class MarkdownSplitEditor extends React.Component {
     }
   }
 
+  handleMouseMove (e) {
+    if (this.state.isSliderFocused) {
+      const rootRect = this.refs.root.getBoundingClientRect()
+      const rootWidth = rootRect.width
+      const offset = rootRect.left
+      let newCodeEditorWidthInPercent = (e.pageX - offset) / rootWidth * 100
+
+      // limit minSize to 10%, maxSize to 90%
+      if (newCodeEditorWidthInPercent <= 10) {
+        newCodeEditorWidthInPercent = 10
+      }
+
+      if (newCodeEditorWidthInPercent >= 90) {
+        newCodeEditorWidthInPercent = 90
+      }
+
+      this.setState({
+        codeEditorWidthInPercent: newCodeEditorWidthInPercent
+      })
+    }
+  }
+
+  handleMouseUp (e) {
+    e.preventDefault()
+    this.setState({
+      isSliderFocused: false
+    })
+  }
+
+  handleMouseDown (e) {
+    e.preventDefault()
+    this.setState({
+      isSliderFocused: true
+    })
+  }
+
   render () {
-    const { config, value, storageKey } = this.props
+    const {config, value, storageKey, noteKey} = this.props
     const storage = findStorage(storageKey)
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
     let editorIndentSize = parseInt(config.editor.indentSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
     const previewStyle = {}
-    if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
+    previewStyle.width = (100 - this.state.codeEditorWidthInPercent) + '%'
+    if (this.props.ignorePreviewPointerEvents || this.state.isSliderFocused) previewStyle.pointerEvents = 'none'
     return (
-      <div styleName='root'>
+      <div styleName='root' ref='root'
+        onMouseMove={e => this.handleMouseMove(e)}
+        onMouseUp={e => this.handleMouseUp(e)}>
         <CodeEditor
           styleName='codeEditor'
           ref='code'
+          width={this.state.codeEditorWidthInPercent + '%'}
           mode='GitHub Flavored Markdown'
           value={value}
           theme={config.editor.theme}
@@ -110,12 +154,18 @@ class MarkdownSplitEditor extends React.Component {
           displayLineNumbers={config.editor.displayLineNumbers}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
+          enableRulers={config.editor.enableRulers}
+          rulers={config.editor.rulers}
           scrollPastEnd={config.editor.scrollPastEnd}
           fetchUrlTitle={config.editor.fetchUrlTitle}
           storageKey={storageKey}
+          noteKey={noteKey}
           onChange={this.handleOnChange.bind(this)}
           onScroll={this.handleScroll.bind(this)}
        />
+        <div styleName='slider' style={{left: this.state.codeEditorWidthInPercent + '%'}} onMouseDown={e => this.handleMouseDown(e)} >
+          <div styleName='slider-hitbox' />
+        </div>
         <MarkdownPreview
           style={previewStyle}
           styleName='preview'
@@ -127,6 +177,10 @@ class MarkdownSplitEditor extends React.Component {
           codeBlockFontFamily={config.editor.fontFamily}
           lineNumber={config.preview.lineNumber}
           scrollPastEnd={config.preview.scrollPastEnd}
+          smartQuotes={config.preview.smartQuotes}
+          smartArrows={config.preview.smartArrows}
+          breaks={config.preview.breaks}
+          sanitize={config.preview.sanitize}
           ref='preview'
           tabInde='0'
           value={value}
@@ -134,6 +188,9 @@ class MarkdownSplitEditor extends React.Component {
           onScroll={this.handleScroll.bind(this)}
           showCopyNotification={config.ui.showCopyNotification}
           storagePath={storage.path}
+          noteKey={noteKey}
+          customCSS={config.preview.customCSS}
+          allowCustomCSS={config.preview.allowCustomCSS}
        />
       </div>
     )

browser/components/MarkdownSplitEditor.styl

@@ -3,7 +3,14 @@
   height 100%
   font-size 30px
   display flex
-  .codeEditor
-    width 50%
-  .preview
-    width 50%
+  .slider
+    absolute top bottom
+    top -2px
+    width 0
+    z-index 0
+  .slider-hitbox
+    absolute top bottom left right
+    width 7px
+    left -3px
+    z-index 10
+    cursor col-resize

browser/components/NoteItem.js

@@ -8,6 +8,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import { getTodoStatus } from 'browser/lib/getTodoStatus'
 import styles from './NoteItem.styl'
 import TodoProcess from './TodoProcess'
+import i18n from 'browser/lib/i18n'
 
 /**
  * @description Tag element component.
@@ -62,9 +63,9 @@ const NoteItem = ({
     ? 'item--active'
     : 'item'
   }
-    key={`${note.storage}-${note.key}`}
-    onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
-    onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+    key={note.key}
+    onClick={e => handleNoteClick(e, note.key)}
+    onContextMenu={e => handleNoteContextMenu(e, note.key)}
     onDragStart={e => handleDragStart(e, note)}
     draggable='true'
   >
@@ -76,7 +77,7 @@ const NoteItem = ({
       <div styleName='item-title'>
         {note.title.trim().length > 0
           ? note.title
-          : <span styleName='item-title-empty'>Empty</span>
+          : <span styleName='item-title-empty'>{i18n.__('Empty note')}</span>
         }
       </div>
       {['ALL', 'STORAGE'].includes(viewType) && <div styleName='item-middle'>
@@ -93,14 +94,14 @@ const NoteItem = ({
         <div styleName='item-bottom-tagList'>
           {note.tags.length > 0
             ? TagElementList(note.tags)
-            : <span style={{ fontStyle: 'italic', opacity: 0.5 }} styleName='item-bottom-tagList-empty'>No tags</span>
+            : <span style={{ fontStyle: 'italic', opacity: 0.5 }} styleName='item-bottom-tagList-empty'>{i18n.__('No tags')}</span>
           }
         </div>
         <div>
           {note.isStarred
             ? <img styleName='item-star' src='../resources/icon/icon-starred.svg' /> : ''
           }
-          {note.isPinned && !pathname.match(/\/home|\/starred|\/trash/)
+          {note.isPinned && !pathname.match(/\/starred|\/trash/)
             ? <i styleName='item-pin' className='fa fa-thumb-tack' /> : ''
           }
           {note.type === 'MARKDOWN_NOTE'
@@ -123,7 +124,11 @@ NoteItem.propTypes = {
     title: PropTypes.string.isrequired,
     tags: PropTypes.array,
     isStarred: PropTypes.bool.isRequired,
-    isTrashed: PropTypes.bool.isRequired
+    isTrashed: PropTypes.bool.isRequired,
+    blog: {
+      blogLink: PropTypes.string,
+      blogId: PropTypes.number
+    }
   }),
   handleNoteClick: PropTypes.func.isRequired,
   handleNoteContextMenu: PropTypes.func.isRequired,

browser/components/NoteItem.styl

@@ -117,7 +117,7 @@ $control-height = 30px
   font-size 12px
   line-height 20px
   overflow ellipsis
-  display flex
+  display block
 
 .item-bottom-tagList
   flex 1
@@ -144,18 +144,18 @@ $control-height = 30px
   padding-bottom 2px
 
 .item-star
-  position relative
-  width 16px
-  height 16px
+  position absolute
+  right 2px
+  top 5px
   color alpha($ui-favorite-star-button-color, 60%)
   font-size 12px
   padding 0
   border-radius 17px
 
 .item-pin
-  position relative
-  width 34px
-  height 34px
+  position absolute
+  right 25px
+  top 7px
   color #E54D42
   font-size 14px
   padding 0
@@ -321,3 +321,76 @@ body[data-theme="solarized-dark"]
   .item-bottom-tagList-empty
     color $ui-inactive-text-color
     vertical-align middle
+
+body[data-theme="monokai"]
+  .root
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-noteList-backgroundColor
+
+  .item
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      // background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
+      color $ui-monokai-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-monokai-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
+        color $ui-monokai-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-monokai-noteList-backgroundColor
+      color $ui-monokai-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-monokai-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-monokai-noteList-backgroundColor, 10%)
+        color $ui-monokai-text-color
+
+  .item-wrapper
+    border-color alpha($ui-monokai-button-backgroundColor, 60%)
+
+  .item--active
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-button-backgroundColor
+    .item-wrapper
+      border-color transparent
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      color $ui-monokai-text-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
+      .item-bottom-tagList-item
+        background-color alpha(#fff, 20%)
+
+  .item-title
+    color $ui-inactive-text-color
+
+  .item-title-icon
+    color $ui-inactive-text-color
+
+  .item-title-empty
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-item
+    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-empty
+    color $ui-inactive-text-color
+    vertical-align middle

browser/components/NoteItemSimple.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NoteItemSimple.styl'
+import i18n from 'browser/lib/i18n'
 
 /**
  * @description Note item component when using simple display mode.
@@ -28,9 +29,9 @@ const NoteItemSimple = ({
     ? 'item-simple--active'
     : 'item-simple'
   }
-    key={`${note.storage}-${note.key}`}
-    onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
-    onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+    key={note.key}
+    onClick={e => handleNoteClick(e, note.key)}
+    onContextMenu={e => handleNoteContextMenu(e, note.key)}
     onDragStart={e => handleDragStart(e, note)}
     draggable='true'
   >
@@ -45,7 +46,7 @@ const NoteItemSimple = ({
       }
       {note.title.trim().length > 0
         ? note.title
-        : <span styleName='item-simple-title-empty'>Empty</span>
+        : <span styleName='item-simple-title-empty'>{i18n.__('Empty note')}</span>
       }
       {isAllNotesView && <div styleName='item-simple-right'>
         <span styleName='item-simple-right-storageName'>

browser/components/NoteItemSimple.styl

@@ -104,6 +104,7 @@ body[data-theme="dark"]
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
       color $ui-dark-text-color
       .item-simple-title
+      .item-simple-title-empty
       .item-simple-title-icon
       .item-simple-bottom-time
         transition 0.15s
@@ -117,6 +118,7 @@ body[data-theme="dark"]
       background-color $ui-dark-button--active-backgroundColor
       color $ui-dark-text-color
       .item-simple-title
+      .item-simple-title-empty
       .item-simple-title-icon
       .item-simple-bottom-time
         transition 0.15s
@@ -132,6 +134,7 @@ body[data-theme="dark"]
     .item-simple-wrapper
       border-color transparent
     .item-simple-title
+    .item-simple-title-empty
     .item-simple-title-icon
     .item-simple-bottom-time
       color $ui-dark-text-color
@@ -165,9 +168,10 @@ body[data-theme="solarized-dark"]
     background-color $ui-solarized-dark-noteList-backgroundColor
     &:hover
       transition 0.15s
-      // background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
       color $ui-solarized-dark-text-color
       .item-simple-title
+      .item-simple-title-empty
       .item-simple-title-icon
       .item-simple-bottom-time
         transition 0.15s
@@ -178,9 +182,10 @@ body[data-theme="solarized-dark"]
         color $ui-solarized-dark-text-color
     &:active
       transition 0.15s
-      background-color $ui-solarized-dark-button--active-backgroundColor
-      color $ui-solarized-dark-text-color
+      // background-color $ui-solarized-dark-button--active-backgroundColor
+      color $ui-dark-text-color
       .item-simple-title
+      .item-simple-title-empty
       .item-simple-title-icon
       .item-simple-bottom-time
         transition 0.15s
@@ -192,11 +197,13 @@ body[data-theme="solarized-dark"]
 
   .item-simple--active
     border-color $ui-solarized-dark-borderColor
-    background-color $ui-solarized-dark-button--active-backgroundColor
+    background-color $ui-solarized-dark-tag-backgroundColor
     .item-simple-wrapper
       border-color transparent
     .item-simple-title
+    .item-simple-title-empty
     .item-simple-title-icon
+       color $ui-dark-text-color
     .item-simple-bottom-time
       color $ui-solarized-dark-text-color
     .item-simple-bottom-tagList-item
@@ -207,8 +214,75 @@ body[data-theme="solarized-dark"]
       color #c0392b
       .item-simple-bottom-tagList-item
         background-color alpha(#fff, 20%)
-.item-simple-right
-  float right
-  .item-simple-right-storageName
-    padding-left 4px
-    opacity 0.4
+  .item-simple-title
+    color $ui-dark-text-color
+    border-bottom $ui-dark-borderColor
+  .item-simple-right
+    float right
+    .item-simple-right-storageName
+      padding-left 4px
+      opacity 0.4
+
+body[data-theme="monokai"]
+  .root
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-noteList-backgroundColor
+
+  .item-simple
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      background-color alpha($ui-monokai-button-backgroundColor, 60%)
+      color $ui-monokai-text-color
+      .item-simple-title
+      .item-simple-title-empty
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-solarized-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#fff, 20%)
+        color $ui-monokai-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-monokai-button--active-backgroundColor
+      color $ui-monokai-text-color
+      .item-simple-title
+      .item-simple-title-empty
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-monokai-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-monokai-text-color
+
+  .item-simple--active
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-button--active-backgroundColor
+    .item-simple-wrapper
+      border-color transparent
+    .item-simple-title
+    .item-simple-title-empty
+    .item-simple-title-icon
+    .item-simple-bottom-time
+      color $ui-monokai-text-color
+    .item-simple-bottom-tagList-item
+      background-color alpha(white, 10%)
+      color $ui-monokai-text-color
+    &:hover
+      // background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-simple-bottom-tagList-item
+        background-color alpha(#fff, 20%)
+  .item-simple-title
+    color $ui-dark-text-color
+    border-bottom $ui-dark-borderColor
+  .item-simple-right
+    float right
+    .item-simple-right-storageName
+      padding-left 4px
+      opacity 0.4

browser/components/RealtimeNotification.styl

@@ -41,3 +41,14 @@ body[data-theme="solarized-dark"]
     background-color $ui-solarized-dark-button-backgroundColor
     &:hover
       color #5CB85C
+
+body[data-theme="monokai"]
+  .notification-area
+    background-color none
+
+  .notification-link
+    color $ui-monokai-text-color
+    border none
+    background-color $ui-monokai-button-backgroundColor
+    &:hover
+      color #5CB85C

browser/components/SideNavFilter.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SideNavFilter.styl'
+import i18n from 'browser/lib/i18n'
 
 /**
  * @param {boolean} isFolded
@@ -31,7 +32,7 @@ const SideNavFilter = ({
         }
         />
       </div>
-      <span styleName='menu-button-label'>All Notes</span>
+      <span styleName='menu-button-label'>{i18n.__('All Notes')}</span>
       <span styleName='counters'>{counterTotalNote}</span>
     </button>
 
@@ -45,12 +46,12 @@ const SideNavFilter = ({
         }
         />
       </div>
-      <span styleName='menu-button-label'>Starred</span>
+      <span styleName='menu-button-label'>{i18n.__('Starred')}</span>
       <span styleName='counters'>{counterStarredNote}</span>
     </button>
 
     <button styleName={isTrashedActive ? 'menu-button-trash--active' : 'menu-button'}
-      onClick={handleTrashedButtonClick}
+      onClick={handleTrashedButtonClick} onContextMenu={handleFilterButtonContextMenu}
     >
       <div styleName='iconWrap'>
         <img src={isTrashedActive
@@ -59,7 +60,7 @@ const SideNavFilter = ({
         }
         />
       </div>
-      <span onContextMenu={handleFilterButtonContextMenu} styleName='menu-button-label'>Trash</span>
+      <span styleName='menu-button-label'>{i18n.__('Trash')}</span>
       <span styleName='counters'>{counterDelNote}</span>
     </button>
 

browser/components/SideNavFilter.styl

@@ -68,10 +68,9 @@
   .menu-button-label
     position fixed
     display inline-block
-    height 32px
+    height 36px
     left 44px
     padding 0 10px
-    margin-top -8px
     margin-left 0
     overflow ellipsis
     z-index 10
@@ -223,3 +222,45 @@ body[data-theme="solarized-dark"]
       color $ui-solarized-dark-text-color
       .menu-button-label
         color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .menu-button
+    &:active
+      background-color $ui-monokai-noteList-backgroundColor
+      color $ui-monokai-text-color
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color
+
+  .menu-button--active
+    color $ui-monokai-text-color
+    background-color $ui-monokai-button-backgroundColor
+    .menu-button-label
+      color $ui-monokai-text-color
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color
+      .menu-button-label
+        color $ui-monokai-text-color
+
+  .menu-button-star--active
+    color $ui-monokai-text-color
+    background-color $ui-monokai-button-backgroundColor
+    .menu-button-label
+      color $ui-monokai-text-color
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color
+      .menu-button-label
+        color $ui-monokai-text-color
+
+  .menu-button-trash--active
+    color $ui-monokai-text-color
+    background-color $ui-monokai-button-backgroundColor
+    .menu-button-label
+      color $ui-monokai-text-color
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color
+      .menu-button-label
+        color $ui-monokai-text-color

browser/components/SnippetTab.js

@@ -2,6 +2,7 @@ import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SnippetTab.styl'
 import context from 'browser/lib/context'
+import i18n from 'browser/lib/i18n'
 
 class SnippetTab extends React.Component {
   constructor (props) {
@@ -28,7 +29,7 @@ class SnippetTab extends React.Component {
   handleContextMenu (e) {
     context.popup([
       {
-        label: 'Rename',
+        label: i18n.__('Rename'),
         click: (e) => this.handleRenameClick(e)
       }
     ])
@@ -54,10 +55,10 @@ class SnippetTab extends React.Component {
         this.handleRename()
         break
       case 27:
-        this.setState({
-          name: this.props.snippet.name,
+        this.setState((prevState, props) => ({
+          name: props.snippet.name,
           isRenaming: false
-        })
+        }))
         break
     }
   }
@@ -114,7 +115,7 @@ class SnippetTab extends React.Component {
             {snippet.name.trim().length > 0
               ? snippet.name
               : <span styleName='button-unnamed'>
-                Unnamed
+                {i18n.__('Unnamed')}
               </span>
             }
           </button>

browser/components/SnippetTab.styl

@@ -1,6 +1,7 @@
 .root
   position relative
   flex 1
+  min-width 70px
   overflow hidden
   &:hover
     .deleteButton
@@ -21,7 +22,7 @@
   height 29px
   overflow ellipsis
   text-align left
-  padding-right 30px
+  padding-right 23px
   border none
   background-color transparent
   transition 0.15s

browser/components/StorageItem.js

@@ -6,6 +6,18 @@ import React from 'react'
 import styles from './StorageItem.styl'
 import CSSModules from 'browser/lib/CSSModules'
 import _ from 'lodash'
+import { SortableHandle } from 'react-sortable-hoc'
+
+const DraggableIcon = SortableHandle(({ className }) => (
+  <i className={`fa ${className}`} />
+))
+
+const FolderIcon = ({ className, color, isActive }) => {
+  const iconStyle = isActive ? 'fa-folder-open-o' : 'fa-folder-o'
+  return (
+    <i className={`fa ${iconStyle} ${className}`} style={{ color: color }} />
+  )
+}
 
 /**
  * @param {boolean} isActive
@@ -21,34 +33,54 @@ import _ from 'lodash'
  * @return {React.Component}
  */
 const StorageItem = ({
-  isActive, handleButtonClick, handleContextMenu, folderName,
-  folderColor, isFolded, noteCount, handleDrop, handleDragEnter, handleDragLeave
-}) => (
-  <button styleName={isActive
-      ? 'folderList-item--active'
-      : 'folderList-item'
-    }
-    onClick={handleButtonClick}
-    onContextMenu={handleContextMenu}
-    onDrop={handleDrop}
-    onDragEnter={handleDragEnter}
-    onDragLeave={handleDragLeave}
-  >
-    <span styleName={isFolded
-      ? 'folderList-item-name--folded' : 'folderList-item-name'
-    }>
-      <text style={{color: folderColor, paddingRight: '10px'}}>{isActive ? <i className='fa fa-folder-open-o' /> : <i className='fa fa-folder-o' />}</text>{isFolded ? _.truncate(folderName, {length: 1, omission: ''}) : folderName}
-    </span>
-    {(!isFolded && _.isNumber(noteCount)) &&
-      <span styleName='folderList-item-noteCount'>{noteCount}</span>
-    }
-    {isFolded &&
-      <span styleName='folderList-item-tooltip'>
-        {folderName}
+  styles,
+  isActive,
+  handleButtonClick,
+  handleContextMenu,
+  folderName,
+  folderColor,
+  isFolded,
+  noteCount,
+  handleDrop,
+  handleDragEnter,
+  handleDragLeave
+}) => {
+  return (
+    <button
+      styleName={isActive ? 'folderList-item--active' : 'folderList-item'}
+      onClick={handleButtonClick}
+      onContextMenu={handleContextMenu}
+      onDrop={handleDrop}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+    >
+      {!isFolded && (
+        <DraggableIcon className={styles['folderList-item-reorder']} />
+      )}
+      <span
+        styleName={
+          isFolded ? 'folderList-item-name--folded' : 'folderList-item-name'
+        }
+      >
+        <FolderIcon
+          styleName='folderList-item-icon'
+          color={folderColor}
+          isActive={isActive}
+        />
+        {isFolded
+          ? _.truncate(folderName, { length: 1, omission: '' })
+          : folderName}
       </span>
-    }
-  </button>
-)
+      {!isFolded &&
+        _.isNumber(noteCount) && (
+          <span styleName='folderList-item-noteCount'>{noteCount}</span>
+        )}
+      {isFolded && (
+        <span styleName='folderList-item-tooltip'>{folderName}</span>
+      )}
+    </button>
+  )
+}
 
 StorageItem.propTypes = {
   isActive: PropTypes.bool.isRequired,

browser/components/StorageItem.styl

@@ -13,6 +13,7 @@
   border none
   overflow ellipsis
   font-size 14px
+  align-items: center
   &:first-child
     margin-top 0
   &:hover
@@ -34,9 +35,7 @@
 .folderList-item-name
   display block
   flex 1
-  padding 0 12px
-  height 26px
-  line-height 26px
+  padding-right: 10px
   border-width 0 0 0 2px
   border-style solid
   border-color transparent
@@ -59,8 +58,8 @@
   opacity 0
   border-top-right-radius 2px
   border-bottom-right-radius 2px
-  height 26px
-  line-height 26px
+  height 34px
+  line-height 32px
 
 .folderList-item:hover, .folderList-item--active:hover
   .folderList-item-tooltip
@@ -69,9 +68,20 @@
 .folderList-item-name--folded
   @extend .folderList-item-name
   padding-left 7px
-  text
+  .folderList-item-icon
     font-size 9px
 
+.folderList-item-icon
+  padding-right: 10px
+
+.folderList-item-reorder
+  font-size: 9px
+  padding: 10px 8px 10px 9px;
+  color: rgba(147, 147, 149, 0.3)
+  cursor: ns-resize
+  &:before
+    content: "\f142 \f142"
+
 body[data-theme="white"]
   .folderList-item
     color $ui-inactive-text-color
@@ -128,3 +138,22 @@ body[data-theme="solarized-dark"]
     &:hover
       color $ui-solarized-dark-text-color
       background-color $ui-solarized-dark-button-backgroundColor
+
+body[data-theme="monokai"]
+  .folderList-item
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color
+    &:active
+      color $ui-monokai-text-color
+      background-color $ui-monokai-button-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-monokai-text-color
+    background-color $ui-monokai-button-backgroundColor
+    &:active
+      background-color $ui-monokai-button-backgroundColor
+    &:hover
+      color $ui-monokai-text-color
+      background-color $ui-monokai-button-backgroundColor

browser/components/StorageList.js

@@ -10,8 +10,8 @@ import CSSModules from 'browser/lib/CSSModules'
 * @param {Array} storgaeList
 */
 
-const StorageList = ({storageList}) => (
-  <div styleName='storageList'>
+const StorageList = ({storageList, isFolded}) => (
+  <div styleName={isFolded ? 'storageList-folded' : 'storageList'}>
     {storageList.length > 0 ? storageList : (
       <div styleName='storgaeList-empty'>No storage mount.</div>
     )}

browser/components/StorageList.styl

@@ -4,6 +4,10 @@
   top 180px
   overflow-y auto
 
+.storageList-folded
+  @extend .storageList
+  width 44px
+
 .storageList-empty
   padding 0 10px
   margin-top 15px

browser/components/TagListItem.js

@@ -9,16 +9,26 @@ import CSSModules from 'browser/lib/CSSModules'
 /**
 * @param {string} name
 * @param {Function} handleClickTagListItem
+* @param {Function} handleClickNarrowToTag
 * @param {bool} isActive
+* @param {bool} isRelated
 */
 
-const TagListItem = ({name, handleClickTagListItem, isActive, count}) => (
-  <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
-    <span styleName='tagList-item-name'>
-      {`# ${name}`}
-      <span styleName='tagList-item-count'> {count}</span>
-    </span>
-  </button>
+const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, isRelated, count}) => (
+  <div styleName='tagList-itemContainer'>
+    {isRelated
+      ? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
+        <i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
+      </button>
+      : <div styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} />
+    }
+    <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
+      <span styleName='tagList-item-name'>
+        {`# ${name}`}
+        <span styleName='tagList-item-count'>{count}</span>
+      </span>
+    </button>
+  </div>
 )
 
 TagListItem.propTypes = {

browser/components/TagListItem.styl

@@ -1,5 +1,9 @@
+.tagList-itemContainer
+  display flex
+
 .tagList-item
   display flex
+  flex 1
   width 100%
   height 26px
   background-color transparent
@@ -20,9 +24,16 @@
     color $ui-button-default-color
     background-color $ui-button-default--active-backgroundColor
 
+.tagList-itemNarrow
+  composes tagList-item
+  flex none
+  width 20px
+  padding 0 4px
+
 .tagList-item-active
   background-color $ui-button-default--active-backgroundColor
   display flex
+  flex 1
   width 100%
   height 26px
   padding 0
@@ -36,10 +47,16 @@
     background-color alpha($ui-button-default--active-backgroundColor, 60%)
     transition 0.2s
 
+.tagList-itemNarrow-active
+  composes tagList-item-active
+  flex none
+  width 20px
+  padding 0 4px
+
 .tagList-item-name
   display block
   flex 1
-  padding 0 15px
+  padding 0 8px 0 4px
   height 26px
   line-height 26px
   border-width 0 0 0 2px
@@ -49,7 +66,10 @@
   text-overflow ellipsis
 
 .tagList-item-count
-  padding 0 3px
+  float right
+  line-height 26px
+  padding-right 15px
+  font-size 13px
 
 body[data-theme="white"]
   .tagList-item

browser/components/TodoListPercentage.styl

@@ -49,3 +49,13 @@ body[data-theme="solarized-dark"]
 
   .percentageText
     color #fdf6e3
+
+body[data-theme="monokai"]
+  .percentageBar
+    background-color #f92672
+
+  .progressBar
+    background-color: #373831
+
+  .percentageText
+    color #fdf6e3

browser/components/markdown.styl

@@ -58,7 +58,7 @@ body
   .katex
     font 400 1.2em 'KaTeX_Main'
     line-height 1.2em
-    white-space nowrap
+    white-space initial
     text-indent 0
   .katex .mfrac>.vlist>span:nth-child(2)
     top 0 !important
@@ -199,7 +199,6 @@ ol
   &>li>ul, &>li>ol
     margin 0
 code
-  color #CC305F
   padding 0.2em 0.4em
   background-color #f7f7f7
   border-radius 3px
@@ -294,6 +293,82 @@ kbd
   line-height 1
   padding 3px 5px
 
+$admonition
+    box-shadow 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)
+    position relative
+    margin 1.5625em 0
+    padding 0 1.2rem
+    border-left .4rem solid #448aff
+    border-radius .2rem
+    overflow auto
+
+html .admonition>:last-child
+    margin-bottom 1.2rem
+
+.admonition .admonition
+    margin 1em 0
+
+.admonition p
+    margin-top: 0.5em
+
+$admonition-icon
+    position absolute
+    left 1.2rem
+    font-family: "Material Icons"
+    font-size: 24px
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+
+$admonition-title
+    margin 0 -1.2rem
+    padding .8rem 1.2rem .8rem 4rem
+    border-bottom .1rem solid rgba(68,138,255,.1)
+    background-color rgba(68,138,255,.1)
+    font-weight 700
+
+.admonition>.admonition-title:last-child
+    margin-bottom 0
+
+admonition_types = {
+    note: {border-color: #448aff, title-color: rgba(68,138,255,.1), icon: "note"},
+    hint: {border-color: #00bfa5, title-color: rgba(0,191,165,.1), icon: "info"},
+    danger: {border-color: #ff1744, title-color: rgba(255,23,68,.1), icon: "block"},
+    caution: {border-color: #ff9100, title-color: rgba(255,145,0,.1), icon: "warning"},
+    error: {border-color: #ff1744, title-color: rgba(255,23,68,.1), icon: "error"},
+    attention: {border-color: #64dd17, title-color: rgba(100,221,23,.1), icon: "priority_high"}
+}
+
+for name, val in admonition_types
+    .admonition.{name}
+        @extend $admonition
+        border-left-color: val[border-color]
+    
+    .admonition.{name}>.admonition-title
+        @extend $admonition-title
+        border-bottom-color: .1rem solid val[title-color]
+        background-color: val[title-color]
+
+    .admonition.{name}>.admonition-title:before
+        @extend $admonition-icon
+        color: val[border-color]
+        content: val[icon]
+
 themeDarkBackground = darken(#21252B, 10%)
 themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
@@ -371,3 +446,32 @@ body[data-theme="solarized-dark"]
         border-color themeSolarizedDarkTableBorder
         &:last-child
           border-right solid 1px themeSolarizedDarkTableBorder
+
+themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
+themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
+themeMonokaiTableHead = themeMonokaiTableEven
+themeMonokaiTableBorder = themeDarkBorder
+
+body[data-theme="monokai"]
+  color $ui-monokai-text-color
+  border-color themeDarkBorder
+  background-color $ui-monokai-noteDetail-backgroundColor
+  table
+    thead
+      tr
+        background-color themeMonokaiTableHead
+      th
+        border-color themeMonokaiTableBorder
+        &:last-child
+          border-right solid 1px themeMonokaiTableBorder
+    tbody
+      tr:nth-child(2n + 1)
+        background-color themeMonokaiTableOdd
+      tr:nth-child(2n)
+        background-color themeMonokaiTableEven
+      td
+        border-color themeMonokaiTableBorder
+        &:last-child
+          border-right solid 1px themeMonokaiTableBorder
+  kbd
+    background-color themeDarkBackground

browser/lib/Languages.js

@@ -0,0 +1,78 @@
+const languages = [
+  {
+    name: 'Albanian',
+    locale: 'sq'
+  },
+  {
+    name: 'Chinese (zh-CN)',
+    locale: 'zh-CN'
+  },
+  {
+    name: 'Chinese (zh-TW)',
+    locale: 'zh-TW'
+  },
+  {
+    name: 'Danish',
+    locale: 'da'
+  },
+  {
+    name: 'English',
+    locale: 'en'
+  },
+  {
+    name: 'French',
+    locale: 'fr'
+  },
+  {
+    name: 'German',
+    locale: 'de'
+  },
+  {
+    name: 'Hungarian',
+    locale: 'hu'
+  },
+  {
+    name: 'Japanese',
+    locale: 'ja'
+  },
+  {
+    name: 'Korean',
+    locale: 'ko'
+  },
+  {
+    name: 'Norwegian',
+    locale: 'no'
+  },
+  {
+    name: 'Polish',
+    locale: 'pl'
+  },
+  {
+    name: 'Portuguese',
+    locale: 'pt'
+  },
+  {
+    name: 'Russian',
+    locale: 'ru'
+  },
+  {
+    name: 'Spanish',
+    locale: 'es-ES'
+  }, {
+    name: 'Turkish',
+    locale: 'tr'
+  }
+]
+
+module.exports = {
+  getLocales () {
+    return languages.reduce(function (localeList, locale) {
+      localeList.push(locale.locale)
+      return localeList
+    }, [])
+  },
+  getLanguages () {
+    return languages
+  }
+}
+

browser/lib/confirmDeleteNote.js

@@ -0,0 +1,23 @@
+import electron from 'electron'
+import i18n from 'browser/lib/i18n'
+const { remote } = electron
+const { dialog } = remote
+
+export function confirmDeleteNote (confirmDeletion, permanent) {
+  if (confirmDeletion || permanent) {
+    const alertConfig = {
+      ype: 'warning',
+      message: i18n.__('Confirm note deletion'),
+      detail: i18n.__('This will permanently remove this note.'),
+      buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
+    }
+
+    const dialogButtonIndex = dialog.showMessageBox(
+      remote.getCurrentWindow(), alertConfig
+    )
+
+    return dialogButtonIndex === 0
+  }
+
+  return true
+}

browser/lib/consts.js

@@ -12,6 +12,10 @@ const themes = fs.readdirSync(themePath)
   })
 themes.splice(themes.indexOf('solarized'), 1, 'solarized dark', 'solarized light')
 
+const snippetFile = process.env.NODE_ENV !== 'test'
+  ? path.join(app.getPath('userData'), 'snippets.json')
+  : '' // return nothing as we specified different path to snippets.json in test
+
 const consts = {
   FOLDER_COLORS: [
     '#E10051',
@@ -31,7 +35,8 @@ const consts = {
     'Dodger Blue',
     'Violet Eggplant'
   ],
-  THEMES: ['default'].concat(themes)
+  THEMES: ['default'].concat(themes),
+  SNIPPET_FILE: snippetFile
 }
 
 module.exports = consts

browser/lib/convertModeName.js

@@ -0,0 +1,14 @@
+export default function convertModeName (name) {
+  switch (name) {
+    case 'ejs':
+      return 'Embedded Javascript'
+    case 'html_ruby':
+      return 'Embedded Ruby'
+    case 'objectivec':
+      return 'Objective C'
+    case 'text':
+      return 'Plain Text'
+    default:
+      return name
+  }
+}

browser/lib/i18n.js

@@ -0,0 +1,17 @@
+const path = require('path')
+const { remote } = require('electron')
+const { app } = remote
+const { getLocales } = require('./Languages.js')
+
+// load package for localization
+const i18n = new (require('i18n-2'))({
+  // setup some locales - other locales default to the first locale
+  locales: getLocales(),
+  extension: '.json',
+  directory: process.env.NODE_ENV === 'production'
+    ? path.join(app.getAppPath(), './locales')
+    : path.resolve('./locales'),
+  devMode: false
+})
+
+export default i18n

browser/lib/keygen.js

@@ -1,7 +1,11 @@
 const crypto = require('crypto')
 const _ = require('lodash')
+const uuidv4 = require('uuid/v4')
 
-module.exports = function (length) {
-  if (!_.isFinite(length)) length = 10
+module.exports = function (uuid) {
+  if (typeof uuid === typeof true && uuid) {
+    return uuidv4()
+  }
+  const length = 10
   return crypto.randomBytes(length).toString('hex')
 }

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

@@ -0,0 +1,23 @@
+'use strict'
+
+import sanitizeHtml from 'sanitize-html'
+
+module.exports = function sanitizePlugin (md, options) {
+  options = options || {}
+
+  md.core.ruler.after('linkify', 'sanitize_inline', state => {
+    for (let tokenIdx = 0; tokenIdx < state.tokens.length; tokenIdx++) {
+      if (state.tokens[tokenIdx].type === 'html_block') {
+        state.tokens[tokenIdx].content = sanitizeHtml(state.tokens[tokenIdx].content, options)
+      }
+      if (state.tokens[tokenIdx].type === 'inline') {
+        const inlineTokens = state.tokens[tokenIdx].children
+        for (let childIdx = 0; childIdx < inlineTokens.length; childIdx++) {
+          if (inlineTokens[childIdx].type === 'html_inline') {
+            inlineTokens[childIdx].content = sanitizeHtml(inlineTokens[childIdx].content, options)
+          }
+        }
+      }
+    }
+  })
+}

browser/lib/markdown.js

@@ -1,13 +1,12 @@
 import markdownit from 'markdown-it'
+import sanitize from './markdown-it-sanitize-html'
 import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
+import smartArrows from 'markdown-it-smartarrows'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
-import {lastFindInArray} from './utils'
-
-// FIXME We should not depend on global variable.
-const katex = window.katex
-const config = ConfigManager.get()
+import katex from 'katex'
+import { lastFindInArray } from './utils'
 
 function createGutter (str, firstLineNumber) {
   if (Number.isNaN(firstLineNumber)) firstLineNumber = 1
@@ -19,171 +18,231 @@ function createGutter (str, firstLineNumber) {
   return '<span class="lineNumber CodeMirror-gutters">' + lines.join('') + '</span>'
 }
 
-var md = markdownit({
-  typographer: true,
-  linkify: true,
-  html: true,
-  xhtmlOut: true,
-  breaks: true,
-  highlight: function (str, lang) {
-    const delimiter = ':'
-    const langInfo = lang.split(delimiter)
-    const langType = langInfo[0]
-    const fileName = langInfo[1] || ''
-    const firstLineNumber = parseInt(langInfo[2], 10)
+class Markdown {
+  constructor (options = {}) {
+    const config = ConfigManager.get()
+    const defaultOptions = {
+      typographer: config.preview.smartQuotes,
+      linkify: true,
+      html: true,
+      xhtmlOut: true,
+      breaks: config.preview.breaks,
+      highlight: function (str, lang) {
+        const delimiter = ':'
+        const langInfo = lang.split(delimiter)
+        const langType = langInfo[0]
+        const fileName = langInfo[1] || ''
+        const firstLineNumber = parseInt(langInfo[2], 10)
 
-    if (langType === 'flowchart') {
-      return `<pre class="flowchart">${str}</pre>`
-    }
-    if (langType === 'sequence') {
-      return `<pre class="sequence">${str}</pre>`
-    }
-    return '<pre class="code">' +
-      '<span class="filename">' + fileName + '</span>' +
-      createGutter(str, firstLineNumber) +
-      '<code class="' + langType + '">' +
-      str +
-      '</code></pre>'
-  }
-})
-md.use(emoji, {
-  shortcuts: {}
-})
-md.use(math, {
-  inlineOpen: config.preview.latexInlineOpen,
-  inlineClose: config.preview.latexInlineClose,
-  blockOpen: config.preview.latexBlockOpen,
-  blockClose: config.preview.latexBlockClose,
-  inlineRenderer: function (str) {
-    let output = ''
-    try {
-      output = katex.renderToString(str.trim())
-    } catch (err) {
-      output = `<span class="katex-error">${err.message}</span>`
-    }
-    return output
-  },
-  blockRenderer: function (str) {
-    let output = ''
-    try {
-      output = katex.renderToString(str.trim(), { displayMode: true })
-    } catch (err) {
-      output = `<div class="katex-error">${err.message}</div>`
-    }
-    return output
-  }
-})
-md.use(require('markdown-it-imsize'))
-md.use(require('markdown-it-footnote'))
-md.use(require('markdown-it-multimd-table'))
-md.use(require('markdown-it-named-headers'), {
-  slugify: (header) => {
-    return encodeURI(header.trim()
-      .replace(/[\]\[\!\"\#\$\%\&\'\(\)\*\+\,\.\/\:\;\<\=\>\?\@\\\^\_\{\|\}\~]/g, '')
-      .replace(/\s+/g, '-'))
-      .replace(/\-+$/, '')
-  }
-})
-md.use(require('markdown-it-kbd'))
-
-const deflate = require('markdown-it-plantuml/lib/deflate')
-md.use(require('markdown-it-plantuml'), '', {
-  generateSource: function (umlCode) {
-    const s = unescape(encodeURIComponent(umlCode))
-    const zippedCode = deflate.encode64(
-      deflate.zip_deflate(`@startuml\n${s}\n@enduml`, 9)
-    )
-    return `http://www.plantuml.com/plantuml/svg/${zippedCode}`
-  }
-})
-
-// Override task item
-md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
-  let content, terminate, i, l, token
-  let nextLine = startLine + 1
-  const terminatorRules = state.md.block.ruler.getRules('paragraph')
-  const endLine = state.lineMax
-
-  // jump line-by-line until empty one or EOF
-  for (; nextLine < endLine && !state.isEmpty(nextLine); nextLine++) {
-    // this would be a code block normally, but after paragraph
-    // it's considered a lazy continuation regardless of what's there
-    if (state.sCount[nextLine] - state.blkIndent > 3) { continue }
-
-    // quirk for blockquotes, this line should already be checked by that rule
-    if (state.sCount[nextLine] < 0) { continue }
-
-    // Some tags can terminate paragraph without empty line.
-    terminate = false
-    for (i = 0, l = terminatorRules.length; i < l; i++) {
-      if (terminatorRules[i](state, nextLine, endLine, true)) {
-        terminate = true
-        break
-      }
-    }
-    if (terminate) { break }
-  }
-
-  content = state.getLines(startLine, nextLine, state.blkIndent, false).trim()
-
-  state.line = nextLine
-
-  token = state.push('paragraph_open', 'p', 1)
-  token.map = [startLine, state.line]
-
-  if (state.parentType === 'list') {
-    const match = content.match(/^\[( |x)\] ?(.+)/i)
-    if (match) {
-      const liToken = lastFindInArray(state.tokens, token => token.type === 'list_item_open')
-      if (liToken) {
-        if (!liToken.attrs) {
-          liToken.attrs = []
+        if (langType === 'flowchart') {
+          return `<pre class="flowchart">${str}</pre>`
         }
-        liToken.attrs.push(['class', 'taskListItem'])
-      }
-      content = `<label class='taskListItem${match[1] !== ' ' ? ' checked' : ''}' for='checkbox-${startLine + 1}'><input type='checkbox'${match[1] !== ' ' ? ' checked' : ''} id='checkbox-${startLine + 1}'/> ${content.substring(4, content.length)}</label>`
+        if (langType === 'sequence') {
+          return `<pre class="sequence">${str}</pre>`
+        }
+        return '<pre class="code CodeMirror">' +
+          '<span class="filename">' + fileName + '</span>' +
+          createGutter(str, firstLineNumber) +
+          '<code class="' + langType + '">' +
+          str +
+          '</code></pre>'
+      },
+      sanitize: 'STRICT'
     }
+
+    const updatedOptions = Object.assign(defaultOptions, options)
+    this.md = markdownit(updatedOptions)
+
+    if (updatedOptions.sanitize !== 'NONE') {
+      const allowedTags = ['iframe', 'input', 'b',
+        'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7', 'h8', 'br', 'b', 'i', 'strong', 'em', 'a', 'pre', 'code', 'img', 'tt',
+        'div', 'ins', 'del', 'sup', 'sub', 'p', 'ol', 'ul', 'table', 'thead', 'tbody', 'tfoot', 'blockquote',
+        'dl', 'dt', 'dd', 'kbd', 'q', 'samp', 'var', 'hr', 'ruby', 'rt', 'rp', 'li', 'tr', 'td', 'th', 's', 'strike', 'summary', 'details'
+      ]
+      const allowedAttributes = [
+        'abbr', 'accept', 'accept-charset',
+        'accesskey', 'action', 'align', 'alt', 'axis',
+        'border', 'cellpadding', 'cellspacing', 'char',
+        'charoff', 'charset', 'checked',
+        'clear', 'cols', 'colspan', 'color',
+        'compact', 'coords', 'datetime', 'dir',
+        'disabled', 'enctype', 'for', 'frame',
+        'headers', 'height', 'hreflang',
+        'hspace', 'ismap', 'label', 'lang',
+        'maxlength', 'media', 'method',
+        'multiple', 'name', 'nohref', 'noshade',
+        'nowrap', 'open', 'prompt', 'readonly', 'rel', 'rev',
+        'rows', 'rowspan', 'rules', 'scope',
+        'selected', 'shape', 'size', 'span',
+        'start', 'summary', 'tabindex', 'target',
+        'title', 'type', 'usemap', 'valign', 'value',
+        'vspace', 'width', 'itemprop'
+      ]
+
+      if (updatedOptions.sanitize === 'ALLOW_STYLES') {
+        allowedTags.push('style')
+        allowedAttributes.push('style')
+      }
+
+      // Sanitize use rinput before other plugins
+      this.md.use(sanitize, {
+        allowedTags,
+        allowedAttributes: {
+          '*': allowedAttributes,
+          'a': ['href'],
+          'div': ['itemscope', 'itemtype'],
+          'blockquote': ['cite'],
+          'del': ['cite'],
+          'ins': ['cite'],
+          'q': ['cite'],
+          'img': ['src', 'width', 'height'],
+          'iframe': ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
+          'input': ['type', 'id', 'checked']
+        },
+        allowedIframeHostnames: ['www.youtube.com']
+      })
+    }
+
+    this.md.use(emoji, {
+      shortcuts: {}
+    })
+    this.md.use(math, {
+      inlineOpen: config.preview.latexInlineOpen,
+      inlineClose: config.preview.latexInlineClose,
+      blockOpen: config.preview.latexBlockOpen,
+      blockClose: config.preview.latexBlockClose,
+      inlineRenderer: function (str) {
+        let output = ''
+        try {
+          output = katex.renderToString(str.trim())
+        } catch (err) {
+          output = `<span class="katex-error">${err.message}</span>`
+        }
+        return output
+      },
+      blockRenderer: function (str) {
+        let output = ''
+        try {
+          output = katex.renderToString(str.trim(), { displayMode: true })
+        } catch (err) {
+          output = `<div class="katex-error">${err.message}</div>`
+        }
+        return output
+      }
+    })
+    this.md.use(require('markdown-it-imsize'))
+    this.md.use(require('markdown-it-footnote'))
+    this.md.use(require('markdown-it-multimd-table'))
+    this.md.use(require('markdown-it-named-headers'), {
+      slugify: (header) => {
+        return encodeURI(header.trim()
+          .replace(/[\]\[\!\"\#\$\%\&\'\(\)\*\+\,\.\/\:\;\<\=\>\?\@\\\^\_\{\|\}\~]/g, '')
+          .replace(/\s+/g, '-'))
+          .replace(/\-+$/, '')
+      }
+    })
+    this.md.use(require('markdown-it-kbd'))
+    this.md.use(require('markdown-it-admonition'))
+
+    const deflate = require('markdown-it-plantuml/lib/deflate')
+    this.md.use(require('markdown-it-plantuml'), '', {
+      generateSource: function (umlCode) {
+        const stripTrailingSlash = (url) => url.endsWith('/') ? url.slice(0, -1) : url
+        const serverAddress = stripTrailingSlash(config.preview.plantUMLServerAddress) + '/svg'
+        const s = unescape(encodeURIComponent(umlCode))
+        const zippedCode = deflate.encode64(
+          deflate.zip_deflate(`@startuml\n${s}\n@enduml`, 9)
+        )
+        return `${serverAddress}/${zippedCode}`
+      }
+    })
+
+    // Override task item
+    this.md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
+      let content, terminate, i, l, token
+      let nextLine = startLine + 1
+      const terminatorRules = state.md.block.ruler.getRules('paragraph')
+      const endLine = state.lineMax
+
+      // jump line-by-line until empty one or EOF
+      for (; nextLine < endLine && !state.isEmpty(nextLine); nextLine++) {
+        // this would be a code block normally, but after paragraph
+        // it's considered a lazy continuation regardless of what's there
+        if (state.sCount[nextLine] - state.blkIndent > 3) { continue }
+
+        // quirk for blockquotes, this line should already be checked by that rule
+        if (state.sCount[nextLine] < 0) { continue }
+
+        // Some tags can terminate paragraph without empty line.
+        terminate = false
+        for (i = 0, l = terminatorRules.length; i < l; i++) {
+          if (terminatorRules[i](state, nextLine, endLine, true)) {
+            terminate = true
+            break
+          }
+        }
+        if (terminate) { break }
+      }
+
+      content = state.getLines(startLine, nextLine, state.blkIndent, false).trim()
+
+      state.line = nextLine
+
+      token = state.push('paragraph_open', 'p', 1)
+      token.map = [startLine, state.line]
+
+      if (state.parentType === 'list') {
+        const match = content.match(/^\[( |x)\] ?(.+)/i)
+        if (match) {
+          const liToken = lastFindInArray(state.tokens, token => token.type === 'list_item_open')
+          if (liToken) {
+            if (!liToken.attrs) {
+              liToken.attrs = []
+            }
+            liToken.attrs.push(['class', 'taskListItem'])
+          }
+          content = `<label class='taskListItem${match[1] !== ' ' ? ' checked' : ''}' for='checkbox-${startLine + 1}'><input type='checkbox'${match[1] !== ' ' ? ' checked' : ''} id='checkbox-${startLine + 1}'/> ${content.substring(4, content.length)}</label>`
+        }
+      }
+
+      token = state.push('inline', '', 0)
+      token.content = content
+      token.map = [startLine, state.line]
+      token.children = []
+
+      token = state.push('paragraph_close', 'p', -1)
+
+      return true
+    })
+
+    if (config.preview.smartArrows) {
+      this.md.use(smartArrows)
+    }
+
+    // Add line number attribute for scrolling
+    const originalRender = this.md.renderer.render
+    this.md.renderer.render = (tokens, options, env) => {
+      tokens.forEach((token) => {
+        switch (token.type) {
+          case 'heading_open':
+          case 'paragraph_open':
+          case 'blockquote_open':
+          case 'table_open':
+            token.attrPush(['data-line', token.map[0]])
+        }
+      })
+      const result = originalRender.call(this.md.renderer, tokens, options, env)
+      return result
+    }
+    // FIXME We should not depend on global variable.
+    window.md = this.md
   }
 
-  token = state.push('inline', '', 0)
-  token.content = content
-  token.map = [startLine, state.line]
-  token.children = []
-
-  token = state.push('paragraph_close', 'p', -1)
-
-  return true
-})
-
-// Add line number attribute for scrolling
-const originalRender = md.renderer.render
-md.renderer.render = function render (tokens, options, env) {
-  tokens.forEach((token) => {
-    switch (token.type) {
-      case 'heading_open':
-      case 'paragraph_open':
-      case 'blockquote_open':
-      case 'table_open':
-        token.attrPush(['data-line', token.map[0]])
-    }
-  })
-  const result = originalRender.call(md.renderer, tokens, options, env)
-  return result
-}
-// FIXME We should not depend on global variable.
-window.md = md
-
-function normalizeLinkText (linkText) {
-  return md.normalizeLinkText(linkText)
-}
-
-const markdown = {
-  render: function markdown (content) {
+  render (content) {
     if (!_.isString(content)) content = ''
-    const renderedContent = md.render(content)
-    return renderedContent
-  },
-  normalizeLinkText
+    return this.md.render(content)
+  }
 }
 
-export default markdown
+export default Markdown
+

browser/lib/search.js

@@ -4,39 +4,28 @@ export default function searchFromNotes (notes, search) {
   if (search.trim().length === 0) return []
   const searchBlocks = search.split(' ').filter(block => { return block !== '' })
 
-  let foundNotes = findByWord(notes, searchBlocks[0])
+  let foundNotes = notes
   searchBlocks.forEach((block) => {
-    foundNotes = findByWord(foundNotes, block)
-    if (block.match(/^#.+/)) {
-      foundNotes = foundNotes.concat(findByTag(notes, block))
-    }
+    foundNotes = findByWordOrTag(foundNotes, block)
   })
   return foundNotes
 }
 
-function findByTag (notes, block) {
-  const tag = block.match(/#(.+)/)[1]
-  const regExp = new RegExp(_.escapeRegExp(tag), 'i')
+function findByWordOrTag (notes, block) {
+  let tag = block
+  if (tag.match(/^#.+/)) {
+    tag = tag.match(/#(.+)/)[1]
+  }
+  const tagRegExp = new RegExp(_.escapeRegExp(tag), 'i')
+  const wordRegExp = new RegExp(_.escapeRegExp(block), 'i')
   return notes.filter((note) => {
-    if (!_.isArray(note.tags)) return false
-    return note.tags.some((_tag) => {
-      return _tag.match(regExp)
-    })
-  })
-}
-
-function findByWord (notes, block) {
-  const regExp = new RegExp(_.escapeRegExp(block), 'i')
-  return notes.filter((note) => {
-    if (_.isArray(note.tags) && note.tags.some((_tag) => {
-      return _tag.match(regExp)
-    })) {
+    if (_.isArray(note.tags) && note.tags.some((_tag) => _tag.match(tagRegExp))) {
       return true
     }
     if (note.type === 'SNIPPET_NOTE') {
-      return note.description.match(regExp)
+      return note.description.match(wordRegExp)
     } else if (note.type === 'MARKDOWN_NOTE') {
-      return note.content.match(regExp)
+      return note.content.match(wordRegExp)
     }
     return false
   })

browser/lib/utils.js

@@ -6,6 +6,73 @@ export function lastFindInArray (array, callback) {
   }
 }
 
-export default {
-  lastFindInArray
+export function escapeHtmlCharacters (text) {
+  const matchHtmlRegExp = /["'&<>]/
+  const str = '' + text
+  const match = matchHtmlRegExp.exec(str)
+
+  if (!match) {
+    return str
+  }
+
+  let escape
+  let html = ''
+  let index = 0
+  let lastIndex = 0
+
+  for (index = match.index; index < str.length; index++) {
+    switch (str.charCodeAt(index)) {
+      case 34: // "
+        escape = '&quot;'
+        break
+      case 38: // &
+        escape = '&amp;'
+        break
+      case 39: // '
+        escape = '&#39;'
+        break
+      case 60: // <
+        escape = '&lt;'
+        break
+      case 62: // >
+        escape = '&gt;'
+        break
+      default:
+        continue
+    }
+
+    if (lastIndex !== index) {
+      html += str.substring(lastIndex, index)
+    }
+
+    lastIndex = index + 1
+    html += escape
+  }
+
+  return lastIndex !== index
+      ? html + str.substring(lastIndex, index)
+      : html
+}
+
+export function isObjectEqual (a, b) {
+  const aProps = Object.getOwnPropertyNames(a)
+  const bProps = Object.getOwnPropertyNames(b)
+
+  if (aProps.length !== bProps.length) {
+    return false
+  }
+
+  for (var i = 0; i < aProps.length; i++) {
+    const propName = aProps[i]
+    if (a[propName] !== b[propName]) {
+      return false
+    }
+  }
+  return true
+}
+
+export default {
+  lastFindInArray,
+  escapeHtmlCharacters,
+  isObjectEqual
 }

browser/main/Detail/Detail.styl

@@ -30,3 +30,10 @@ body[data-theme="solarized-dark"]
     border-left 1px solid $ui-solarized-dark-borderColor
   .empty-message
     color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .root
+    background-color $ui-monokai-noteDetail-backgroundColor
+    border-left 1px solid $ui-monokai-borderColor
+  .empty-message
+    color $ui-monokai-text-color

browser/main/Detail/FolderSelect.js

@@ -3,6 +3,7 @@ import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './FolderSelect.styl'
 import _ from 'lodash'
+import i18n from 'browser/lib/i18n'
 
 class FolderSelect extends React.Component {
   constructor (props) {
@@ -249,7 +250,7 @@ class FolderSelect extends React.Component {
             <input styleName='search-input'
               ref='search'
               value={this.state.search}
-              placeholder='Folder...'
+              placeholder={i18n.__('Folder...')}
               onChange={(e) => this.handleSearchInputChange(e)}
               onBlur={(e) => this.handleSearchInputBlur(e)}
               onKeyDown={(e) => this.handleSearchInputKeyDown(e)}

browser/main/Detail/FolderSelect.styl

@@ -133,3 +133,29 @@ body[data-theme="dark"]
       color $ui-dark-button--active-color
   .search-optionList-item-name-surfix
     color $ui-dark-inactive-text-color
+
+body[data-theme="monokai"]
+ .root
+    color $ui-dark-text-color
+    &:hover
+      color white
+      background-color $ui-monokai-button--hover-backgroundColor
+      border-color $ui-monokai-borderColor
+
+  .search-optionList
+    color white
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-button-backgroundColor
+
+  .search-optionList-item
+    &:hover
+      background-color lighten($ui-monokai-button--hover-backgroundColor, 15%)
+
+  .search-optionList-item--active
+    background-color $ui-monokai-button--active-backgroundColor
+    color $ui-monokai-button--active-color
+    &:hover
+      background-color $ui-monokai-button--active-backgroundColor
+      color $ui-monokai-button--active-color
+  .search-optionList-item-name-surfix
+    color $ui-monokai-inactive-text-color

browser/main/Detail/FullscreenButton.js

@@ -2,13 +2,14 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './FullscreenButton.styl'
+import i18n from 'browser/lib/i18n'
 
 const FullscreenButton = ({
  onClick
 }) => (
-  <button styleName='control-fullScreenButton' title='Fullscreen' onMouseDown={(e) => onClick(e)}>
+  <button styleName='control-fullScreenButton' title={i18n.__('Fullscreen')} onMouseDown={(e) => onClick(e)}>
     <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
-    <span styleName='tooltip'>Fullscreen</span>
+    <span styleName='tooltip'>{i18n.__('Fullscreen')}</span>
   </button>
 )
 

browser/main/Detail/InfoButton.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoButton.styl'
+import i18n from 'browser/lib/i18n'
 
 const InfoButton = ({
   onClick
@@ -10,7 +11,7 @@ const InfoButton = ({
     onClick={(e) => onClick(e)}
   >
     <img className='infoButton' src='../resources/icon/icon-info.svg' />
-    <span styleName='tooltip'>Info</span>
+    <span styleName='tooltip'>{i18n.__('Info')}</span>
   </button>
 )
 

browser/main/Detail/InfoPanel.js

@@ -3,6 +3,7 @@ import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
 import copy from 'copy-to-clipboard'
+import i18n from 'browser/lib/i18n'
 
 class InfoPanel extends React.Component {
   copyNoteLink () {
@@ -19,7 +20,7 @@ class InfoPanel extends React.Component {
       <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
         <div>
           <p styleName='modification-date'>{updatedAt}</p>
-          <p styleName='modification-date-desc'>MODIFICATION DATE</p>
+          <p styleName='modification-date-desc'>{i18n.__('MODIFICATION DATE')}</p>
         </div>
 
         <hr />
@@ -29,11 +30,11 @@ class InfoPanel extends React.Component {
           : <div styleName='count-wrap'>
             <div styleName='count-number'>
               <p styleName='infoPanel-defaul-count'>{wordCount}</p>
-              <p styleName='infoPanel-sub-count'>Words</p>
+              <p styleName='infoPanel-sub-count'>{i18n.__('Words')}</p>
             </div>
             <div styleName='count-number'>
               <p styleName='infoPanel-defaul-count'>{letterCount}</p>
-              <p styleName='infoPanel-sub-count'>Letters</p>
+              <p styleName='infoPanel-sub-count'>{i18n.__('Letters')}</p>
             </div>
           </div>
         }
@@ -45,17 +46,17 @@ class InfoPanel extends React.Component {
 
         <div>
           <p styleName='infoPanel-default'>{storageName}</p>
-          <p styleName='infoPanel-sub'>STORAGE</p>
+          <p styleName='infoPanel-sub'>{i18n.__('STORAGE')}</p>
         </div>
 
         <div>
           <p styleName='infoPanel-default'>{folderName}</p>
-          <p styleName='infoPanel-sub'>FOLDER</p>
+          <p styleName='infoPanel-sub'>{i18n.__('FOLDER')}</p>
         </div>
 
         <div>
           <p styleName='infoPanel-default'>{createdAt}</p>
-          <p styleName='infoPanel-sub'>CREATION DATE</p>
+          <p styleName='infoPanel-sub'>{i18n.__('CREATION DATE')}</p>
         </div>
 
         <div>
@@ -63,7 +64,7 @@ class InfoPanel extends React.Component {
           <button onClick={() => this.copyNoteLink()} styleName='infoPanel-copyButton'>
             <i className='fa fa-clipboard' />
           </button>
-          <p styleName='infoPanel-sub'>NOTE LINK</p>
+          <p styleName='infoPanel-sub'>{i18n.__('NOTE LINK')}</p>
         </div>
 
         <hr />
@@ -71,22 +72,22 @@ class InfoPanel extends React.Component {
         <div id='export-wrap'>
           <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
             <i className='fa fa-file-code-o' />
-            <p>.md</p>
+            <p>{i18n.__('.md')}</p>
           </button>
 
           <button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
             <i className='fa fa-file-text-o' />
-            <p>.txt</p>
+            <p>{i18n.__('.txt')}</p>
           </button>
 
           <button styleName='export--enable' onClick={(e) => exportAsHtml(e)}>
             <i className='fa fa-html5' />
-            <p>.html</p>
+            <p>{i18n.__('.html')}</p>
           </button>
 
           <button styleName='export--enable' onClick={(e) => print(e)}>
             <i className='fa fa-print' />
-            <p>Print</p>
+            <p>{i18n.__('Print')}</p>
           </button>
         </div>
       </div>

browser/main/Detail/InfoPanel.styl

@@ -215,3 +215,43 @@ body[data-theme="solarized-dark"]
       color $ui-dark-inactive-text-color
       &:hover
         color $ui-solarized-ark-text-color
+
+body[data-theme="monokai"]
+  .control-infoButton-panel
+    background-color $ui-monokai-noteList-backgroundColor
+
+  .control-infoButton-panel-trash
+    background-color $ui-monokai-noteList-backgroundColor
+
+  .modification-date
+    color $ui-monokai-text-color
+
+  .modification-date-desc
+    color $ui-inactive-text-color
+
+  .infoPanel-defaul-count
+    color $ui-monokai-text-color
+
+  .infoPanel-sub-count
+    color $ui-inactive-text-color
+
+  .infoPanel-default
+    color $ui-monokai-text-color
+
+  .infoPanel-sub
+    color $ui-inactive-text-color
+
+  .infoPanel-noteLink
+    background-color alpha($ui-monokai-borderColor, 20%)
+    color $ui-monokai-text-color
+
+  [id=export-wrap]
+    button
+      color $ui-dark-inactive-text-color
+      &:hover
+        background-color alpha($ui-monokai-borderColor, 20%)
+        color $ui-monokai-text-color
+    p
+      color $ui-dark-inactive-text-color
+      &:hover
+        color $ui-monokai-text-color

browser/main/Detail/InfoPanelTrashed.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
+import i18n from 'browser/lib/i18n'
 
 const InfoPanelTrashed = ({
   storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml
@@ -9,24 +10,24 @@ const InfoPanelTrashed = ({
   <div className='infoPanel' styleName='control-infoButton-panel-trash' style={{display: 'none'}}>
     <div>
       <p styleName='modification-date'>{updatedAt}</p>
-      <p styleName='modification-date-desc'>MODIFICATION DATE</p>
+      <p styleName='modification-date-desc'>{i18n.__('MODIFICATION DATE')}</p>
     </div>
 
     <hr />
 
     <div>
       <p styleName='infoPanel-default'>{storageName}</p>
-      <p styleName='infoPanel-sub'>STORAGE</p>
+      <p styleName='infoPanel-sub'>{i18n.__('STORAGE')}</p>
     </div>
 
     <div>
       <p styleName='infoPanel-default'><text styleName='infoPanel-trash'>Trash</text>{folderName}</p>
-      <p styleName='infoPanel-sub'>FOLDER</p>
+      <p styleName='infoPanel-sub'>{i18n.__('FOLDER')}</p>
     </div>
 
     <div>
       <p styleName='infoPanel-default'>{createdAt}</p>
-      <p styleName='infoPanel-sub'>CREATION DATE</p>
+      <p styleName='infoPanel-sub'>{i18n.__('CREATION DATE')}</p>
     </div>
 
     <div id='export-wrap'>

browser/main/Detail/MarkdownNoteDetail.js

@@ -28,6 +28,7 @@ import InfoPanelTrashed from './InfoPanelTrashed'
 import { formatDate } from 'browser/lib/date-formatter'
 import { getTodoPercentageOfCompleted } from 'browser/lib/getTodoStatus'
 import striptags from 'striptags'
+import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
 
 class MarkdownNoteDetail extends React.Component {
   constructor (props) {
@@ -54,10 +55,14 @@ class MarkdownNoteDetail extends React.Component {
 
   componentDidMount () {
     ee.on('topbar:togglelockbutton', this.toggleLockButton)
+    ee.on('topbar:togglemodebutton', () => {
+      const reversedType = this.state.editorType === 'SPLIT' ? 'EDITOR_PREVIEW' : 'SPLIT'
+      this.handleSwitchMode(reversedType)
+    })
   }
 
   componentWillReceiveProps (nextProps) {
-    if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
+    if (nextProps.note.key !== this.props.note.key && !this.state.isMovingNote) {
       if (this.saveQueue != null) this.saveNow()
       this.setState({
         note: Object.assign({}, nextProps.note)
@@ -139,7 +144,7 @@ class MarkdownNoteDetail extends React.Component {
           hashHistory.replace({
             pathname: location.pathname,
             query: {
-              key: newNote.storage + '-' + newNote.key
+              key: newNote.key
             }
           })
           this.setState({
@@ -181,10 +186,10 @@ class MarkdownNoteDetail extends React.Component {
   handleTrashButtonClick (e) {
     const { note } = this.state
     const { isTrashed } = note
-    const { confirmDeletion } = this.props
+    const { confirmDeletion } = this.props.config.ui
 
     if (isTrashed) {
-      if (confirmDeletion(true)) {
+      if (confirmDeleteNote(confirmDeletion, true)) {
         const {note, dispatch} = this.props
         dataApi
           .deleteNote(note.storage, note.key)
@@ -201,7 +206,7 @@ class MarkdownNoteDetail extends React.Component {
           .then(() => ee.emit('list:next'))
       }
     } else {
-      if (confirmDeletion()) {
+      if (confirmDeleteNote(confirmDeletion, false)) {
         note.isTrashed = true
 
         this.setState({
@@ -288,6 +293,7 @@ class MarkdownNoteDetail extends React.Component {
         config={config}
         value={note.content}
         storageKey={note.storage}
+        noteKey={note.key}
         onChange={this.handleUpdateContent.bind(this)}
         ignorePreviewPointerEvents={ignorePreviewPointerEvents}
       />
@@ -297,6 +303,7 @@ class MarkdownNoteDetail extends React.Component {
         config={config}
         value={note.content}
         storageKey={note.storage}
+        noteKey={note.key}
         onChange={this.handleUpdateContent.bind(this)}
         ignorePreviewPointerEvents={ignorePreviewPointerEvents}
       />
@@ -393,7 +400,7 @@ class MarkdownNoteDetail extends React.Component {
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}
-          noteLink={`[${note.title}](${location.query.key})`}
+          noteLink={`[${note.title}](:note:${location.query.key})`}
           updatedAt={formatDate(note.updatedAt)}
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.exportAsMd}
@@ -437,8 +444,7 @@ MarkdownNoteDetail.propTypes = {
   style: PropTypes.shape({
     left: PropTypes.number
   }),
-  ignorePreviewPointerEvents: PropTypes.bool,
-  confirmDeletion: PropTypes.bool.isRequired
+  ignorePreviewPointerEvents: PropTypes.bool
 }
 
 export default CSSModules(MarkdownNoteDetail, styles)

browser/main/Detail/MarkdownNoteDetail.styl

@@ -71,3 +71,8 @@ body[data-theme="solarized-dark"]
   .root
     border-left 1px solid $ui-solarized-dark-borderColor
     background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+body[data-theme="monokai"]
+  .root
+    border-left 1px solid $ui-monokai-borderColor
+    background-color $ui-monokai-noteDetail-backgroundColor

browser/main/Detail/NoteDetailInfo.styl

@@ -98,3 +98,7 @@ body[data-theme="solarized-dark"]
     border-color $ui-solarized-dark-borderColor
     background-color $ui-solarized-dark-noteDetail-backgroundColor
     
+body[data-theme="monokai"]
+  .info
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-noteDetail-backgroundColor

browser/main/Detail/PermanentDeleteButton.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TrashButton.styl'
+import i18n from 'browser/lib/i18n'
 
 const PermanentDeleteButton = ({
   onClick
@@ -10,7 +11,7 @@ const PermanentDeleteButton = ({
     onClick={(e) => onClick(e)}
   >
     <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
-    <span styleName='tooltip'>Permanent Delete</span>
+    <span styleName='tooltip'>{i18n.__('Permanent Delete')}</span>
   </button>
 )
 

browser/main/Detail/RestoreButton.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './RestoreButton.styl'
+import i18n from 'browser/lib/i18n'
 
 const RestoreButton = ({
   onClick
@@ -10,7 +11,7 @@ const RestoreButton = ({
     onClick={onClick}
   >
     <i className='fa fa-undo fa-fw' styleName='iconRestore' />
-    <span styleName='tooltip'>Restore</span>
+    <span styleName='tooltip'>{i18n.__('Restore')}</span>
   </button>
 )
 

browser/main/Detail/SnippetNoteDetail.js

@@ -8,7 +8,7 @@ import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
 import dataApi from 'browser/main/lib/dataApi'
-import { hashHistory } from 'react-router'
+import {hashHistory} from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
 import CodeMirror from 'codemirror'
 import 'codemirror-mode-elixir'
@@ -17,7 +17,8 @@ import StatusBar from '../StatusBar'
 import context from 'browser/lib/context'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import _ from 'lodash'
-import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import {findNoteTitle} from 'browser/lib/findNoteTitle'
+import convertModeName from 'browser/lib/convertModeName'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import TrashButton from './TrashButton'
 import RestoreButton from './RestoreButton'
@@ -26,21 +27,8 @@ import InfoButton from './InfoButton'
 import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
 import { formatDate } from 'browser/lib/date-formatter'
-
-function pass (name) {
-  switch (name) {
-    case 'ejs':
-      return 'Embedded Javascript'
-    case 'html_ruby':
-      return 'Embedded Ruby'
-    case 'objectivec':
-      return 'Objective C'
-    case 'text':
-      return 'Plain Text'
-    default:
-      return name
-  }
-}
+import i18n from 'browser/lib/i18n'
+import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
 
 const electron = require('electron')
 const { remote } = electron
@@ -53,16 +41,34 @@ class SnippetNoteDetail extends React.Component {
     this.state = {
       isMovingNote: false,
       snippetIndex: 0,
+      showArrows: false,
+      enableLeftArrow: false,
+      enableRightArrow: false,
       note: Object.assign({
         description: ''
       }, props.note, {
         snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet))
       })
     }
+
+    this.scrollToNextTabThreshold = 0.7
+  }
+
+  componentDidMount () {
+    const visibleTabs = this.visibleTabs
+    const allTabs = this.allTabs
+
+    if (visibleTabs.offsetWidth < allTabs.scrollWidth) {
+      this.setState({
+        showArrows: visibleTabs.offsetWidth < allTabs.scrollWidth,
+        enableRightArrow: allTabs.offsetLeft !== visibleTabs.offsetWidth - allTabs.scrollWidth,
+        enableLeftArrow: allTabs.offsetLeft !== 0
+      })
+    }
   }
 
   componentWillReceiveProps (nextProps) {
-    if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
+    if (nextProps.note.key !== this.props.note.key && !this.state.isMovingNote) {
       if (this.saveQueue != null) this.saveNow()
       const nextNote = Object.assign({
         description: ''
@@ -78,6 +84,7 @@ class SnippetNoteDetail extends React.Component {
           this.refs['code-' + index].reload()
         })
         if (this.refs.tags) this.refs.tags.reset()
+        this.setState(this.getArrowsState())
       })
     }
   }
@@ -147,7 +154,7 @@ class SnippetNoteDetail extends React.Component {
           hashHistory.replace({
             pathname: location.pathname,
             query: {
-              key: newNote.storage + '-' + newNote.key
+              key: newNote.key
             }
           })
           this.setState({
@@ -177,10 +184,10 @@ class SnippetNoteDetail extends React.Component {
   handleTrashButtonClick (e) {
     const { note } = this.state
     const { isTrashed } = note
-    const { confirmDeletion } = this.props
+    const { confirmDeletion } = this.props.config.ui
 
     if (isTrashed) {
-      if (confirmDeletion(true)) {
+      if (confirmDeleteNote(confirmDeletion, true)) {
         const {note, dispatch} = this.props
         dataApi
           .deleteNote(note.storage, note.key)
@@ -197,7 +204,7 @@ class SnippetNoteDetail extends React.Component {
           .then(() => ee.emit('list:next'))
       }
     } else {
-      if (confirmDeletion()) {
+      if (confirmDeleteNote(confirmDeletion, false)) {
         note.isTrashed = true
 
         this.setState({
@@ -228,6 +235,51 @@ class SnippetNoteDetail extends React.Component {
     ee.emit('editor:fullscreen')
   }
 
+  handleTabMoveLeftButtonClick (e) {
+    {
+      const left = this.visibleTabs.scrollLeft
+
+      const tabs = this.allTabs.querySelectorAll('div')
+      const lastVisibleTab = Array.from(tabs).find((tab) => {
+        return tab.offsetLeft + tab.offsetWidth >= left
+      })
+
+      if (lastVisibleTab) {
+        const visiblePart = lastVisibleTab.offsetWidth + lastVisibleTab.offsetLeft - left
+        const isFullyVisible = visiblePart > lastVisibleTab.offsetWidth * this.scrollToNextTabThreshold
+        const scrollToTab = (isFullyVisible && lastVisibleTab.previousSibling)
+            ? lastVisibleTab.previousSibling
+            : lastVisibleTab
+
+        // FIXME use `scrollIntoView()` instead of custom method after update to Electron2.0 (with Chrome 61 its possible animate the scroll)
+        this.moveToTab(scrollToTab)
+        // scrollToTab.scrollIntoView({behavior: 'smooth', inline: 'start', block: 'start'})
+      }
+    }
+  }
+
+  handleTabMoveRightButtonClick (e) {
+    const left = this.visibleTabs.scrollLeft
+    const width = this.visibleTabs.offsetWidth
+
+    const tabs = this.allTabs.querySelectorAll('div')
+    const lastVisibleTab = Array.from(tabs).find((tab) => {
+      return tab.offsetLeft + tab.offsetWidth >= width + left
+    })
+
+    if (lastVisibleTab) {
+      const visiblePart = width + left - lastVisibleTab.offsetLeft
+      const isFullyVisible = visiblePart > lastVisibleTab.offsetWidth * this.scrollToNextTabThreshold
+      const scrollToTab = (isFullyVisible && lastVisibleTab.nextSibling)
+          ? lastVisibleTab.nextSibling
+          : lastVisibleTab
+
+      // FIXME use `scrollIntoView()` instead of custom method after update to Electron2.0 (with Chrome 61 its possible animate the scroll)
+      this.moveToTab(scrollToTab)
+      // scrollToTab.scrollIntoView({behavior: 'smooth', inline: 'end', block: 'end'})
+    }
+  }
+
   handleTabPlusButtonClick (e) {
     this.addSnippet()
   }
@@ -264,9 +316,9 @@ class SnippetNoteDetail extends React.Component {
       if (this.state.note.snippets[index].content.trim().length > 0) {
         const dialogIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
           type: 'warning',
-          message: 'Delete a snippet',
-          detail: 'This work cannot be undone.',
-          buttons: ['Confirm', 'Cancel']
+          message: i18n.__('Delete a snippet'),
+          detail: i18n.__('This work cannot be undone.'),
+          buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
         })
         if (dialogIndex === 0) {
           this.deleteSnippetByIndex(index)
@@ -287,6 +339,21 @@ class SnippetNoteDetail extends React.Component {
     this.setState({ note, snippetIndex }, () => {
       this.save()
       this.refs['code-' + this.state.snippetIndex].reload()
+
+      if (this.visibleTabs.offsetWidth > this.allTabs.scrollWidth) {
+        console.log('no need for arrows')
+        this.moveTabBarBy(0)
+      } else {
+        const lastTab = this.allTabs.lastChild
+        if (lastTab.offsetLeft + lastTab.offsetWidth < this.visibleTabs.offsetWidth) {
+          console.log('need to scroll')
+          const width = this.visibleTabs.offsetWidth
+          const newLeft = lastTab.offsetLeft + lastTab.offsetWidth - width
+          this.moveTabBarBy(newLeft > 0 ? -newLeft : 0)
+        } else {
+          this.setState(this.getArrowsState())
+        }
+      }
     })
   }
 
@@ -301,11 +368,11 @@ class SnippetNoteDetail extends React.Component {
         name: mode
       })
     }
-    this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
+    this.setState(state => ({note: Object.assign(state.note, {snippets: snippets})}))
 
-    this.setState({
-      note: this.state.note
-    }, () => {
+    this.setState(state => ({
+      note: state.note
+    }), () => {
       this.save()
     })
   }
@@ -314,11 +381,11 @@ class SnippetNoteDetail extends React.Component {
     return (e) => {
       const snippets = this.state.note.snippets.slice()
       snippets[index].mode = name
-      this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
+      this.setState(state => ({note: Object.assign(state.note, {snippets: snippets})}))
 
-      this.setState({
-        note: this.state.note
-      }, () => {
+      this.setState(state => ({
+        note: state.note
+      }), () => {
         this.save()
       })
 
@@ -332,10 +399,10 @@ class SnippetNoteDetail extends React.Component {
     return (e) => {
       const snippets = this.state.note.snippets.slice()
       snippets[index].content = this.refs['code-' + index].value
-      this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
-      this.setState({
-        note: this.state.note
-      }, () => {
+      this.setState(state => ({note: Object.assign(state.note, {snippets: snippets})}))
+      this.setState(state => ({
+        note: state.note
+      }), () => {
         this.save()
       })
     }
@@ -343,6 +410,7 @@ class SnippetNoteDetail extends React.Component {
 
   handleKeyDown (e) {
     switch (e.keyCode) {
+      // tab key
       case 9:
         if (e.ctrlKey && !e.shiftKey) {
           e.preventDefault()
@@ -355,6 +423,7 @@ class SnippetNoteDetail extends React.Component {
           this.focusEditor()
         }
         break
+      // L key
       case 76:
         {
           const isSuper = global.process.platform === 'darwin'
@@ -366,6 +435,7 @@ class SnippetNoteDetail extends React.Component {
           }
         }
         break
+      // T key
       case 84:
         {
           const isSuper = global.process.platform === 'darwin'
@@ -457,6 +527,51 @@ class SnippetNoteDetail extends React.Component {
     this.refs.description.focus()
   }
 
+  moveToTab (tab) {
+    const easeOutCubic = t => (--t) * t * t + 1
+    const startScrollPosition = this.visibleTabs.scrollLeft
+    const animationTiming = 300
+    const scrollMoreCoeff = 1.4 // introduce coefficient, because we want to scroll a bit further to see next tab
+
+    let scrollBy = (tab.offsetLeft - startScrollPosition)
+
+    if (tab.offsetLeft > startScrollPosition) {
+      // if tab is on the right side and we want to show the whole tab in visible area,
+      // we need to include width of the tab and visible area in the formula
+      //  ___________________________________________
+      // |____|_______|________|________|_show_this_|
+      //        ↑_____________________↑
+      //            visible area
+      scrollBy += (tab.offsetWidth - this.visibleTabs.offsetWidth)
+    }
+
+    let startTime = null
+    const scrollAnimation = time => {
+      startTime = startTime || time
+      const elapsed = (time - startTime) / animationTiming
+
+      this.visibleTabs.scrollLeft = startScrollPosition + easeOutCubic(elapsed) * scrollBy * scrollMoreCoeff
+      if (elapsed < 1) {
+        window.requestAnimationFrame(scrollAnimation)
+      } else {
+        this.setState(this.getArrowsState())
+      }
+    }
+
+    window.requestAnimationFrame(scrollAnimation)
+  }
+
+  getArrowsState () {
+    const allTabs = this.allTabs
+    const visibleTabs = this.visibleTabs
+
+    const showArrows = visibleTabs.offsetWidth < allTabs.scrollWidth
+    const enableRightArrow = visibleTabs.scrollLeft !== allTabs.scrollWidth - visibleTabs.offsetWidth
+    const enableLeftArrow = visibleTabs.scrollLeft !== 0
+
+    return {showArrows, enableRightArrow, enableLeftArrow}
+  }
+
   addSnippet () {
     const { note } = this.state
 
@@ -467,26 +582,32 @@ class SnippetNoteDetail extends React.Component {
     }])
     const snippetIndex = note.snippets.length - 1
 
-    this.setState({
+    this.setState(Object.assign({
       note,
       snippetIndex
-    }, () => {
+    }, this.getArrowsState()), () => {
+      if (this.state.showArrows) {
+        const tabs = this.allTabs.querySelectorAll('div')
+        if (tabs) {
+          this.moveToTab(tabs[snippetIndex])
+        }
+      }
       this.refs['tab-' + snippetIndex].startRenaming()
     })
   }
 
   jumpNextTab () {
-    this.setState({
-      snippetIndex: (this.state.snippetIndex + 1) % this.state.note.snippets.length
-    }, () => {
+    this.setState(state => ({
+      snippetIndex: (state.snippetIndex + 1) % state.note.snippets.length
+    }), () => {
       this.focusEditor()
     })
   }
 
   jumpPrevTab () {
-    this.setState({
-      snippetIndex: (this.state.snippetIndex - 1 + this.state.note.snippets.length) % this.state.note.snippets.length
-    }, () => {
+    this.setState(state => ({
+      snippetIndex: (state.snippetIndex - 1 + state.note.snippets.length) % state.note.snippets.length
+    }), () => {
       this.focusEditor()
     })
   }
@@ -504,9 +625,9 @@ class SnippetNoteDetail extends React.Component {
   showWarning () {
     dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
-      message: 'Sorry!',
-      detail: 'md/text import is available only a markdown note.',
-      buttons: ['OK']
+      message: i18n.__('Sorry!'),
+      detail: i18n.__('md/text import is available only a markdown note.'),
+      buttons: [i18n.__('OK')]
     })
   }
 
@@ -542,7 +663,7 @@ class SnippetNoteDetail extends React.Component {
     const viewList = note.snippets.map((snippet, index) => {
       const isActive = this.state.snippetIndex === index
 
-      let syntax = CodeMirror.findModeByName(pass(snippet.mode))
+      let syntax = CodeMirror.findModeByName(convertModeName(snippet.mode))
       if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
 
       return <div styleName='tabView'
@@ -632,10 +753,10 @@ class SnippetNoteDetail extends React.Component {
           isActive={note.isStarred}
         />
 
-        <button styleName='control-fullScreenButton' title='Fullscreen'
+        <button styleName='control-fullScreenButton' title={i18n.__('Fullscreen')}
           onMouseDown={(e) => this.handleFullScreenButton(e)}>
           <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
-          <span styleName='tooltip'>Fullscreen</span>
+          <span styleName='tooltip'>{i18n.__('Fullscreen')}</span>
         </button>
 
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
@@ -647,7 +768,7 @@ class SnippetNoteDetail extends React.Component {
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}
-          noteLink={`[${note.title}](${location.query.key})`}
+          noteLink={`[${note.title}](:note:${location.query.key})`}
           updatedAt={formatDate(note.updatedAt)}
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.showWarning}
@@ -673,16 +794,32 @@ class SnippetNoteDetail extends React.Component {
                 fontSize: parseInt(config.preview.fontSize, 10)
               }}
               ref='description'
-              placeholder='Description...'
+              placeholder={i18n.__('Description...')}
               value={this.state.note.description}
               onChange={(e) => this.handleChange(e)}
             />
           </div>
           <div styleName='tabList'>
-            <div styleName='list'>
-              {tabList}
+            <button styleName='tabButton'
+              hidden={!this.state.showArrows}
+              disabled={!this.state.enableLeftArrow}
+              onClick={(e) => this.handleTabMoveLeftButtonClick(e)}
+            >
+              <i className='fa fa-chevron-left' />
+            </button>
+            <div styleName='list' onScroll={(e) => { this.setState(this.getArrowsState()) }} ref={(tabs) => { this.visibleTabs = tabs }}>
+              <div styleName='allTabs' ref={(tabs) => { this.allTabs = tabs }}>
+                {tabList}
+              </div>
             </div>
-            <button styleName='plusButton'
+            <button styleName='tabButton'
+              hidden={!this.state.showArrows}
+              disabled={!this.state.enableRightArrow}
+              onClick={(e) => this.handleTabMoveRightButtonClick(e)}
+            >
+              <i className='fa fa-chevron-right' />
+            </button>
+            <button styleName='tabButton'
               onClick={(e) => this.handleTabPlusButtonClick(e)}
             >
               <i className='fa fa-plus' />
@@ -696,7 +833,7 @@ class SnippetNoteDetail extends React.Component {
             onClick={(e) => this.handleModeButtonClick(e, this.state.snippetIndex)}
           >
             {this.state.note.snippets[this.state.snippetIndex].mode == null
-              ? 'Select Syntax...'
+              ? i18n.__('Select Syntax...')
               : this.state.note.snippets[this.state.snippetIndex].mode
             }&nbsp;
             <i className='fa fa-caret-down' />
@@ -733,8 +870,7 @@ SnippetNoteDetail.propTypes = {
   style: PropTypes.shape({
     left: PropTypes.number
   }),
-  ignorePreviewPointerEvents: PropTypes.bool,
-  confirmDeletion: PropTypes.bool.isRequired
+  ignorePreviewPointerEvents: PropTypes.bool
 }
 
 export default CSSModules(SnippetNoteDetail, styles)

browser/main/Detail/SnippetNoteDetail.styl

@@ -35,13 +35,26 @@
   height 30px
   display flex
   background-color $ui-noteDetail-backgroundColor
+  overflow hidden
 
 .tabList .list
   flex 1
-  display flex
   overflow hidden
+  overflow-x scroll
+  position relative
 
-.tabList .plusButton
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .allTabs
+    display flex
+    position relative
+    overflow visible
+    left 0
+    transition left 0.1s
+
+.tabList .tabButton
   navWhiteButtonColor()
   width 30px
 
@@ -140,3 +153,20 @@ body[data-theme="solarized-dark"]
   .tabList
     background-color $ui-solarized-dark-noteDetail-backgroundColor
     color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .root
+    border-left 1px solid $ui-monokai-borderColor
+    background-color $ui-monokai-noteDetail-backgroundColor
+
+  .body
+    background-color $ui-monokai-noteDetail-backgroundColor
+
+  .body .description textarea
+    background-color $ui-monokai-noteDetail-backgroundColor
+    color $ui-monokai-text-color
+    border 1px solid $ui-monokai-borderColor
+
+  .tabList
+    background-color $ui-monokai-noteDetail-backgroundColor
+    color $ui-monokai-text-color

browser/main/Detail/StarButton.js

@@ -3,6 +3,7 @@ import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StarButton.styl'
 import _ from 'lodash'
+import i18n from 'browser/lib/i18n'
 
 class StarButton extends React.Component {
   constructor (props) {
@@ -53,7 +54,7 @@ class StarButton extends React.Component {
             : '../resources/icon/icon-star.svg'
           }
         />
-        <span styleName='tooltip'>Star</span>
+        <span styleName='tooltip'>{i18n.__('Star')}</span>
       </button>
     )
   }

browser/main/Detail/TagSelect.js

@@ -4,6 +4,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './TagSelect.styl'
 import _ from 'lodash'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import i18n from 'browser/lib/i18n'
 
 class TagSelect extends React.Component {
   constructor (props) {
@@ -43,16 +44,9 @@ class TagSelect extends React.Component {
   }
 
   removeLastTag () {
-    let { value } = this.props
-
-    value = _.isArray(value)
-      ? value.slice()
-      : []
-    value.pop()
-    value = _.uniq(value)
-
-    this.value = value
-    this.props.onChange()
+    this.removeTagByCallback((value) => {
+      value.pop()
+    })
   }
 
   reset () {
@@ -95,15 +89,22 @@ class TagSelect extends React.Component {
   }
 
   handleTagRemoveButtonClick (tag) {
-    return (e) => {
-      let { value } = this.props
-
+    this.removeTagByCallback((value, tag) => {
       value.splice(value.indexOf(tag), 1)
-      value = _.uniq(value)
+    }, tag)
+  }
 
-      this.value = value
-      this.props.onChange()
-    }
+  removeTagByCallback (callback, tag = null) {
+    let { value } = this.props
+
+    value = _.isArray(value)
+      ? value.slice()
+      : []
+    callback(value, tag)
+    value = _.uniq(value)
+
+    this.value = value
+    this.props.onChange()
   }
 
   render () {
@@ -117,7 +118,7 @@ class TagSelect extends React.Component {
           >
             <span styleName='tag-label'>#{tag}</span>
             <button styleName='tag-removeButton'
-              onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
+              onClick={(e) => this.handleTagRemoveButtonClick(tag)}
             >
               <img className='tag-removeButton-icon' src='../resources/icon/icon-x.svg' width='8px' />
             </button>
@@ -137,7 +138,7 @@ class TagSelect extends React.Component {
         <input styleName='newTag'
           ref='newTag'
           value={this.state.newTag}
-          placeholder='Add tag...'
+          placeholder={i18n.__('Add tag...')}
           onChange={(e) => this.handleNewTagInputChange(e)}
           onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
           onBlur={(e) => this.handleNewTagBlur(e)}

browser/main/Detail/TagSelect.styl

@@ -82,3 +82,19 @@ body[data-theme="solarized-dark"]
     border-color none
     background-color transparent
     color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .tag
+    background-color $ui-monokai-button-backgroundColor
+
+  .tag-removeButton
+    border-color $ui-button--focus-borderColor
+    background-color transparent
+
+  .tag-label
+    color $ui-monokai-text-color
+    
+  .newTag
+    border-color none
+    background-color transparent
+    color $ui-monokai-text-color

browser/main/Detail/ToggleModeButton.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ToggleModeButton.styl'
+import i18n from 'browser/lib/i18n'
 
 const ToggleModeButton = ({
   onClick, editorType
@@ -13,7 +14,7 @@ const ToggleModeButton = ({
     <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
       <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
     </div>
-    <span styleName='tooltip'>Toggle Mode</span>
+    <span styleName='tooltip'>{i18n.__('Toggle Mode')}</span>
   </div>
 )
 

browser/main/Detail/ToggleModeButton.styl

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

browser/main/Detail/TrashButton.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TrashButton.styl'
+import i18n from 'browser/lib/i18n'
 
 const TrashButton = ({
   onClick
@@ -10,7 +11,7 @@ const TrashButton = ({
     onClick={(e) => onClick(e)}
   >
     <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
-    <span styleName='tooltip'>Trash</span>
+    <span styleName='tooltip'>{i18n.__('Trash')}</span>
   </button>
 )
 

browser/main/Detail/index.js

@@ -7,6 +7,8 @@ import MarkdownNoteDetail from './MarkdownNoteDetail'
 import SnippetNoteDetail from './SnippetNoteDetail'
 import ee from 'browser/main/lib/eventEmitter'
 import StatusBar from '../StatusBar'
+import i18n from 'browser/lib/i18n'
+import debounceRender from 'react-debounce-render'
 
 const OSX = global.process.platform === 'darwin'
 
@@ -32,35 +34,12 @@ class Detail extends React.Component {
     ee.off('detail:delete', this.deleteHandler)
   }
 
-  confirmDeletion (permanent) {
-    if (this.props.config.ui.confirmDeletion || permanent) {
-      const electron = require('electron')
-      const { remote } = electron
-      const { dialog } = remote
-
-      const alertConfig = {
-        type: 'warning',
-        message: 'Confirm note deletion',
-        detail: 'This will permanently remove this note.',
-        buttons: ['Confirm', 'Cancel']
-      }
-
-      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), alertConfig)
-      return dialogueButtonIndex === 0
-    }
-
-    return true
-  }
-
   render () {
     const { location, data, config } = this.props
     let note = null
     if (location.query.key != null) {
-      const splitted = location.query.key.split('-')
-      const storageKey = splitted.shift()
-      const noteKey = splitted.shift()
-
-      note = data.noteMap.get(storageKey + '-' + noteKey)
+      const noteKey = location.query.key
+      note = data.noteMap.get(noteKey)
     }
 
     if (note == null) {
@@ -70,7 +49,7 @@ class Detail extends React.Component {
           tabIndex='0'
         >
           <div styleName='empty'>
-            <div styleName='empty-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br />to create a new note</div>
+            <div styleName='empty-message'>{OSX ? i18n.__('Command(⌘)') : i18n.__('Ctrl(^)')} + N<br />{i18n.__('to create a new note')}</div>
           </div>
           <StatusBar
             {..._.pick(this.props, ['config', 'location', 'dispatch'])}
@@ -84,7 +63,6 @@ class Detail extends React.Component {
         <SnippetNoteDetail
           note={note}
           config={config}
-          confirmDeletion={(permanent) => this.confirmDeletion(permanent)}
           ref='root'
           {..._.pick(this.props, [
             'dispatch',
@@ -101,7 +79,6 @@ class Detail extends React.Component {
       <MarkdownNoteDetail
         note={note}
         config={config}
-        confirmDeletion={(permanent) => this.confirmDeletion(permanent)}
         ref='root'
         {..._.pick(this.props, [
           'dispatch',
@@ -123,4 +100,4 @@ Detail.propTypes = {
   ignorePreviewPointerEvents: PropTypes.bool
 }
 
-export default CSSModules(Detail, styles)
+export default debounceRender(CSSModules(Detail, styles))

browser/main/Main.js

@@ -14,6 +14,9 @@ import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import { hashHistory } from 'react-router'
 import store from 'browser/main/store'
+import i18n from 'browser/lib/i18n'
+import { getLocales } from 'browser/lib/Languages'
+import applyShortcuts from 'browser/main/lib/shortcutManager'
 const path = require('path')
 const electron = require('electron')
 const { remote } = electron
@@ -139,16 +142,25 @@ class Main extends React.Component {
   componentDidMount () {
     const { dispatch, config } = this.props
 
-    if (config.ui.theme === 'dark') {
-      document.body.setAttribute('data-theme', 'dark')
-    } else if (config.ui.theme === 'white') {
-      document.body.setAttribute('data-theme', 'white')
-    } else if (config.ui.theme === 'solarized-dark') {
-      document.body.setAttribute('data-theme', 'solarized-dark')
+    const supportedThemes = [
+      'dark',
+      'white',
+      'solarized-dark',
+      'monokai'
+    ]
+
+    if (supportedThemes.indexOf(config.ui.theme) !== -1) {
+      document.body.setAttribute('data-theme', config.ui.theme)
     } else {
       document.body.setAttribute('data-theme', 'default')
     }
 
+    if (getLocales().indexOf(config.ui.language) !== -1) {
+      i18n.setLocale(config.ui.language)
+    } else {
+      i18n.setLocale('en')
+    }
+    applyShortcuts()
     // Reload all data
     dataApi.init()
       .then((data) => {

browser/main/NewNoteButton/NewNoteButton.styl

@@ -75,3 +75,7 @@ body[data-theme="dark"]
 body[data-theme="solarized-dark"]
   .root, .root--expanded
     background-color $ui-solarized-dark-noteList-backgroundColor
+
+body[data-theme="monokai"]
+  .root, .root--expanded
+    background-color $ui-monokai-noteList-backgroundColor

browser/main/NewNoteButton/index.js

@@ -6,6 +6,7 @@ import _ from 'lodash'
 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'
 
 const { remote } = require('electron')
 const { dialog } = remote
@@ -56,9 +57,9 @@ class NewNoteButton extends React.Component {
       }
     }
 
-    if (storage == null) this.showMessageBox('No storage to create a note')
+    if (storage == null) this.showMessageBox(i18n.__('No storage to create a note'))
     const folder = _.find(storage.folders, {key: params.folderKey}) || storage.folders[0]
-    if (folder == null) this.showMessageBox('No folder to create a note')
+    if (folder == null) this.showMessageBox(i18n.__('No folder to create a note'))
 
     return {
       storage,
@@ -86,7 +87,7 @@ class NewNoteButton extends React.Component {
             onClick={(e) => this.handleNewNoteButtonClick(e)}>
             <img styleName='iconTag' src='../resources/icon/icon-newnote.svg' />
             <span styleName='control-newNoteButton-tooltip'>
-              Make a note {OSX ? '⌘' : 'Ctrl'} + N
+              {i18n.__('Make a note')} {OSX ? '⌘' : i18n.__('Ctrl')} + N
             </span>
           </button>
         </div>

browser/main/NoteList/NoteList.styl

@@ -114,3 +114,27 @@ body[data-theme="solarized-dark"]
     color $ui-solarized-dark-text-color
     &:active
       color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .root
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-noteList-backgroundColor
+
+  .control
+    background-color $ui-monokai-noteList-backgroundColor
+    border-color $ui-monokai-borderColor
+
+  .control-sortBy-select
+    &:hover
+      transition 0.2s
+      color $ui-monokai-text-color
+
+  .control-button
+    color $ui-monokai-inactive-text-color
+    &:hover
+      color $ui-monokai-text-color
+
+  .control-button--active
+    color $ui-monokai-text-color
+    &:active
+      color $ui-monokai-text-color

browser/main/NoteList/index.js

@@ -1,11 +1,14 @@
+/* global electron */
 import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
+import debounceRender from 'react-debounce-render'
 import styles from './NoteList.styl'
 import moment from 'moment'
 import _ from 'lodash'
 import ee from 'browser/main/lib/eventEmitter'
 import dataApi from 'browser/main/lib/dataApi'
+import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import NoteItem from 'browser/components/NoteItem'
 import NoteItemSimple from 'browser/components/NoteItemSimple'
@@ -13,10 +16,15 @@ import searchFromNotes from 'browser/lib/search'
 import fs from 'fs'
 import path from 'path'
 import { hashHistory } from 'react-router'
+import copy from 'copy-to-clipboard'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import Markdown from '../../lib/markdown'
+import i18n from 'browser/lib/i18n'
+import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
+const WP_POST_PATH = '/wp/v2/posts'
 
 function sortByCreatedAt (a, b) {
   return new Date(b.createdAt) - new Date(a.createdAt)
@@ -31,7 +39,7 @@ function sortByUpdatedAt (a, b) {
 }
 
 function findNoteByKey (notes, noteKey) {
-  return notes.find((note) => `${note.storage}-${note.key}` === noteKey)
+  return notes.find((note) => note.key === noteKey)
 }
 
 function findNotesByKeys (notes, noteKeys) {
@@ -39,7 +47,7 @@ function findNotesByKeys (notes, noteKeys) {
 }
 
 function getNoteKey (note) {
-  return `${note.storage}-${note.key}`
+  return note.key
 }
 
 class NoteList extends React.Component {
@@ -70,6 +78,7 @@ class NoteList extends React.Component {
     this.getNoteFolder = this.getNoteFolder.bind(this)
     this.getViewType = this.getViewType.bind(this)
     this.restoreNote = this.restoreNote.bind(this)
+    this.copyNoteLink = this.copyNoteLink.bind(this)
 
     // TODO: not Selected noteKeys but SelectedNote(for reusing)
     this.state = {
@@ -114,10 +123,10 @@ class NoteList extends React.Component {
   componentDidUpdate (prevProps) {
     const { location } = this.props
     const { selectedNoteKeys } = this.state
-    const visibleNoteKeys = this.notes.map(note => `${note.storage}-${note.key}`)
+    const visibleNoteKeys = this.notes.map(note => note.key)
     const note = this.notes[0]
     const prevKey = prevProps.location.query.key
-    const noteKey = visibleNoteKeys.includes(prevKey) ? prevKey : note && `${note.storage}-${note.key}`
+    const noteKey = visibleNoteKeys.includes(prevKey) ? prevKey : note && note.key
 
     if (note && location.query.key == null) {
       const { router } = this.context
@@ -257,27 +266,38 @@ class NoteList extends React.Component {
   handleNoteListKeyDown (e) {
     if (e.metaKey || e.ctrlKey) return true
 
+    // A key
     if (e.keyCode === 65 && !e.shiftKey) {
       e.preventDefault()
       ee.emit('top:new-note')
     }
 
+    // D key
     if (e.keyCode === 68) {
       e.preventDefault()
       this.deleteNote()
     }
 
+    // E key
     if (e.keyCode === 69) {
       e.preventDefault()
       ee.emit('detail:focus')
     }
 
-    if (e.keyCode === 38) {
+    // L or S key
+    if (e.keyCode === 76 || e.keyCode === 83) {
+      e.preventDefault()
+      ee.emit('top:focus-search')
+    }
+
+    // UP or K key
+    if (e.keyCode === 38 || e.keyCode === 75) {
       e.preventDefault()
       this.selectPriorNote()
     }
 
-    if (e.keyCode === 40) {
+    // DOWN or J key
+    if (e.keyCode === 40 || e.keyCode === 74) {
       e.preventDefault()
       this.selectNextNote()
     }
@@ -309,8 +329,10 @@ class NoteList extends React.Component {
     }
 
     if (location.pathname.match(/\/searched/)) {
-      const searchInputText = document.getElementsByClassName('searchInput')[0].value
-      if (searchInputText === '') {
+      const searchInputText = params.searchword
+      const allNotes = data.noteMap.map((note) => note)
+      this.contextNotes = allNotes
+      if (searchInputText === undefined || searchInputText === '') {
         return this.sortByPin(this.contextNotes)
       }
       return searchFromNotes(this.contextNotes, searchInputText)
@@ -323,11 +345,10 @@ class NoteList extends React.Component {
     }
 
     if (location.pathname.match(/\/tags/)) {
+      const listOfTags = params.tagname.split(' ')
       return data.noteMap.map(note => {
         return note
-      }).filter(note => {
-        return note.tags.includes(params.tagname)
-      })
+      }).filter(note => listOfTags.every(tag => note.tags.includes(tag)))
     }
 
     return this.getContextNotes()
@@ -428,20 +449,27 @@ class NoteList extends React.Component {
     if (this.notes[targetIndex].type === 'SNIPPET_NOTE') {
       dialog.showMessageBox(remote.getCurrentWindow(), {
         type: 'warning',
-        message: 'Sorry!',
-        detail: 'md/text import is available only a markdown note.',
-        buttons: ['OK', 'Cancel']
+        message: i18n.__('Sorry!'),
+        detail: i18n.__('md/text import is available only a markdown note.'),
+        buttons: [i18n.__('OK'), i18n.__('Cancel')]
       })
     }
   }
 
   handleDragStart (e, note) {
-    const { selectedNoteKeys } = this.state
+    let { selectedNoteKeys } = this.state
+    const noteKey = getNoteKey(note)
+
+    if (!selectedNoteKeys.includes(noteKey)) {
+      selectedNoteKeys = []
+      selectedNoteKeys.push(noteKey)
+    }
+
     const notes = this.notes.map((note) => Object.assign({}, note))
     const selectedNotes = findNotesByKeys(notes, selectedNoteKeys)
     const noteData = JSON.stringify(selectedNotes)
     e.dataTransfer.setData('note', noteData)
-    this.setState({ selectedNoteKeys: [] })
+    this.selectNextNote()
   }
 
   handleNoteContextMenu (e, uniqueKey) {
@@ -454,34 +482,63 @@ class NoteList extends React.Component {
       this.handleNoteClick(e, uniqueKey)
     }
 
-    const pinLabel = note.isPinned ? 'Remove pin' : 'Pin to Top'
-    const deleteLabel = 'Delete Note'
-    const cloneNote = 'Clone Note'
-    const restoreNote = 'Restore Note'
+    const pinLabel = note.isPinned ? i18n.__('Remove pin') : i18n.__('Pin to Top')
+    const deleteLabel = i18n.__('Delete Note')
+    const cloneNote = i18n.__('Clone Note')
+    const restoreNote = i18n.__('Restore Note')
+    const copyNoteLink = i18n.__('Copy Note Link')
+    const publishLabel = i18n.__('Publish Blog')
+    const updateLabel = i18n.__('Update Blog')
+    const openBlogLabel = i18n.__('Open Blog')
 
     const menu = new Menu()
-    if (!location.pathname.match(/\/starred|\/trash/)) {
-      menu.append(new MenuItem({
-        label: pinLabel,
-        click: this.pinToTop
-      }))
-    }
 
     if (location.pathname.match(/\/trash/)) {
       menu.append(new MenuItem({
         label: restoreNote,
         click: this.restoreNote
       }))
+      menu.append(new MenuItem({
+        label: deleteLabel,
+        click: this.deleteNote
+      }))
+    } else {
+      if (!location.pathname.match(/\/starred/)) {
+        menu.append(new MenuItem({
+          label: pinLabel,
+          click: this.pinToTop
+        }))
+      }
+      menu.append(new MenuItem({
+        label: deleteLabel,
+        click: this.deleteNote
+      }))
+      menu.append(new MenuItem({
+        label: cloneNote,
+        click: this.cloneNote.bind(this)
+      }))
+      menu.append(new MenuItem({
+        label: copyNoteLink,
+        click: this.copyNoteLink(note)
+      }))
+      if (note.type === 'MARKDOWN_NOTE') {
+        if (note.blog && note.blog.blogLink && note.blog.blogId) {
+          menu.append(new MenuItem({
+            label: updateLabel,
+            click: this.publishMarkdown.bind(this)
+          }))
+          menu.append(new MenuItem({
+            label: openBlogLabel,
+            click: () => this.openBlog.bind(this)(note)
+          }))
+        } else {
+          menu.append(new MenuItem({
+            label: publishLabel,
+            click: this.publishMarkdown.bind(this)
+          }))
+        }
+      }
     }
-
-    menu.append(new MenuItem({
-      label: deleteLabel,
-      click: this.deleteNote
-    }))
-    menu.append(new MenuItem({
-      label: cloneNote,
-      click: this.cloneNote.bind(this)
-    }))
     menu.popup()
   }
 
@@ -537,22 +594,15 @@ class NoteList extends React.Component {
     const notes = this.notes.map((note) => Object.assign({}, note))
     const selectedNotes = findNotesByKeys(notes, selectedNoteKeys)
     const firstNote = selectedNotes[0]
+    const { confirmDeletion } = this.props.config.ui
 
     if (firstNote.isTrashed) {
-      const noteExp = selectedNotes.length > 1 ? 'notes' : 'note'
-      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
-        type: 'warning',
-        message: 'Confirm note deletion',
-        detail: `This will permanently remove ${selectedNotes.length} ${noteExp}.`,
-        buttons: ['Confirm', 'Cancel']
-      })
-      if (dialogueButtonIndex === 1) return
+      if (!confirmDeleteNote(confirmDeletion, true)) return
+
       Promise.all(
-        selectedNoteKeys.map((uniqueKey) => {
-          const storageKey = uniqueKey.split('-')[0]
-          const noteKey = uniqueKey.split('-')[1]
+        selectedNotes.map((note) => {
           return dataApi
-            .deleteNote(storageKey, noteKey)
+            .deleteNote(note.storage, note.key)
         })
       )
       .then((data) => {
@@ -569,6 +619,8 @@ class NoteList extends React.Component {
       })
       console.log('Notes were all deleted')
     } else {
+      if (!confirmDeleteNote(confirmDeletion, false)) return
+
       Promise.all(
         selectedNotes.map((note) => {
           note.isTrashed = true
@@ -609,27 +661,142 @@ class NoteList extends React.Component {
       .createNote(storage.key, {
         type: firstNote.type,
         folder: folder.key,
-        title: firstNote.title + ' copy',
+        title: firstNote.title + ' ' + i18n.__('copy'),
         content: firstNote.content
       })
       .then((note) => {
-        const uniqueKey = note.storage + '-' + note.key
+        attachmentManagement.cloneAttachments(firstNote, note)
+        return note
+      })
+      .then((note) => {
         dispatch({
           type: 'UPDATE_NOTE',
           note: note
         })
 
         this.setState({
-          selectedNoteKeys: [uniqueKey]
+          selectedNoteKeys: [note.key]
         })
 
         hashHistory.push({
           pathname: location.pathname,
-          query: {key: uniqueKey}
+          query: {key: note.key}
         })
       })
   }
 
+  copyNoteLink (note) {
+    const noteLink = `[${note.title}](:note:${note.key})`
+    return copy(noteLink)
+  }
+
+  save (note) {
+    const { dispatch } = this.props
+    dataApi
+      .updateNote(note.storage, note.key, note)
+      .then((note) => {
+        dispatch({
+          type: 'UPDATE_NOTE',
+          note: note
+        })
+      })
+  }
+
+  publishMarkdown () {
+    if (this.pendingPublish) {
+      clearTimeout(this.pendingPublish)
+    }
+    this.pendingPublish = setTimeout(() => {
+      this.publishMarkdownNow()
+    }, 1000)
+  }
+
+  publishMarkdownNow () {
+    const {selectedNoteKeys} = this.state
+    const notes = this.notes.map((note) => Object.assign({}, note))
+    const selectedNotes = findNotesByKeys(notes, selectedNoteKeys)
+    const firstNote = selectedNotes[0]
+    const config = ConfigManager.get()
+    const {address, token, authMethod, username, password} = config.blog
+    let authToken = ''
+    if (authMethod === 'USER') {
+      authToken = `Basic ${window.btoa(`${username}:${password}`)}`
+    } else {
+      authToken = `Bearer ${token}`
+    }
+    const contentToRender = firstNote.content.replace(`# ${firstNote.title}`, '')
+    const markdown = new Markdown()
+    const data = {
+      title: firstNote.title,
+      content: markdown.render(contentToRender),
+      status: 'publish'
+    }
+
+    let url = ''
+    let method = ''
+    if (firstNote.blog && firstNote.blog.blogId) {
+      url = `${address}${WP_POST_PATH}/${firstNote.blog.blogId}`
+      method = 'PUT'
+    } else {
+      url = `${address}${WP_POST_PATH}`
+      method = 'POST'
+    }
+    // eslint-disable-next-line no-undef
+    fetch(url, {
+      method: method,
+      body: JSON.stringify(data),
+      headers: {
+        'Authorization': authToken,
+        'Content-Type': 'application/json'
+      }
+    }).then(res => res.json())
+      .then(response => {
+        if (_.isNil(response.link) || _.isNil(response.id)) {
+          return Promise.reject()
+        }
+        firstNote.blog = {
+          blogLink: response.link,
+          blogId: response.id
+        }
+        this.save(firstNote)
+        this.confirmPublish(firstNote)
+      })
+      .catch((error) => {
+        console.error(error)
+        this.confirmPublishError()
+      })
+  }
+
+  confirmPublishError () {
+    const { remote } = electron
+    const { dialog } = remote
+    const alertError = {
+      type: 'warning',
+      message: i18n.__('Publish Failed'),
+      detail: i18n.__('Check and update your blog setting and try again.'),
+      buttons: [i18n.__('Confirm')]
+    }
+    dialog.showMessageBox(remote.getCurrentWindow(), alertError)
+  }
+
+  confirmPublish (note) {
+    const buttonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: i18n.__('Publish Succeeded'),
+      detail: `${note.title} is published at ${note.blog.blogLink}`,
+      buttons: [i18n.__('Confirm'), i18n.__('Open Blog')]
+    })
+
+    if (buttonIndex === 1) {
+      this.openBlog(note)
+    }
+  }
+
+  openBlog (note) {
+    const { shell } = electron
+    shell.openExternal(note.blog.blogLink)
+  }
+
   importFromFile () {
     const options = {
       filters: [
@@ -722,7 +889,7 @@ class NoteList extends React.Component {
     dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
       message: message,
-      buttons: ['OK']
+      buttons: [i18n.__('OK')]
     })
   }
 
@@ -761,7 +928,7 @@ class NoteList extends React.Component {
       if (note.isTrashed !== true || location.pathname === '/trashed') return true
     })
 
-    moment.locale('en', {
+    moment.updateLocale('en', {
       relativeTime: {
         future: 'in %s',
         past: '%s ago',
@@ -782,15 +949,24 @@ class NoteList extends React.Component {
 
     const viewType = this.getViewType()
 
+    const autoSelectFirst =
+      notes.length === 1 ||
+      selectedNoteKeys.length === 0 ||
+      notes.every(note => !selectedNoteKeys.includes(note.key))
+
     const noteList = notes
-      .map(note => {
+      .map((note, index) => {
         if (note == null) {
           return null
         }
 
         const isDefault = config.listStyle === 'DEFAULT'
         const uniqueKey = getNoteKey(note)
-        const isActive = selectedNoteKeys.includes(uniqueKey)
+
+        const isActive =
+          selectedNoteKeys.includes(uniqueKey) ||
+          notes.length === 1 ||
+          (autoSelectFirst && index === 0)
         const dateDisplay = moment(
           config.sortBy === 'CREATED_AT'
             ? note.createdAt : note.updatedAt
@@ -840,17 +1016,17 @@ class NoteList extends React.Component {
           <div styleName='control-sortBy'>
             <i className='fa fa-angle-down' />
             <select styleName='control-sortBy-select'
-              title='Select filter mode'
+              title={i18n.__('Select filter mode')}
               value={config.sortBy}
               onChange={(e) => this.handleSortByChange(e)}
             >
-              <option title='Sort by update time' value='UPDATED_AT'>Updated</option>
-              <option title='Sort by create time' value='CREATED_AT'>Created</option>
-              <option title='Sort alphabetically' value='ALPHABETICAL'>Alphabetically</option>
+              <option title='Sort by update time' value='UPDATED_AT'>{i18n.__('Updated')}</option>
+              <option title='Sort by create time' value='CREATED_AT'>{i18n.__('Created')}</option>
+              <option title='Sort alphabetically' value='ALPHABETICAL'>{i18n.__('Alphabetically')}</option>
             </select>
           </div>
           <div styleName='control-button-area'>
-            <button title='Default View' styleName={config.listStyle === 'DEFAULT'
+            <button title={i18n.__('Default View')} styleName={config.listStyle === 'DEFAULT'
                 ? 'control-button--active'
                 : 'control-button'
               }
@@ -858,7 +1034,7 @@ class NoteList extends React.Component {
             >
               <img styleName='iconTag' src='../resources/icon/icon-column.svg' />
             </button>
-            <button title='Compressed View' styleName={config.listStyle === 'SMALL'
+            <button title={i18n.__('Compressed View')} styleName={config.listStyle === 'SMALL'
                 ? 'control-button--active'
                 : 'control-button'
               }
@@ -892,4 +1068,4 @@ NoteList.propTypes = {
   })
 }
 
-export default CSSModules(NoteList, styles)
+export default debounceRender(CSSModules(NoteList, styles))

browser/main/SideNav/ListButton.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SwitchButton.styl'
+import i18n from 'browser/lib/i18n'
 
 const ListButton = ({
   onClick, isTagActive
@@ -12,7 +13,7 @@ const ListButton = ({
         : '../resources/icon/icon-list-active.svg'
     }
     />
-    <span styleName='tooltip'>Notes</span>
+    <span styleName='tooltip'>{i18n.__('Notes')}</span>
   </button>
 )
 

browser/main/SideNav/PreferenceButton.js

@@ -2,13 +2,14 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './PreferenceButton.styl'
+import i18n from 'browser/lib/i18n'
 
 const PreferenceButton = ({
   onClick
 }) => (
   <button styleName='top-menu-preference' onClick={(e) => onClick(e)}>
     <img styleName='iconTag' src='../resources/icon/icon-setting.svg' />
-    <span styleName='tooltip'>Preferences</span>
+    <span styleName='tooltip'>{i18n.__('Preferences')}</span>
   </button>
 )
 

browser/main/SideNav/PreferenceButton.styl

@@ -49,3 +49,4 @@ body[data-theme="dark"]
   border-radius 2px
   opacity 0
   transition 0.1s
+  white-space nowrap

browser/main/SideNav/SideNav.styl

@@ -30,11 +30,33 @@
   display flex
   flex-direction column
 
-.tag-title
-  padding-left 15px
-  padding-bottom 13px
-  p
-    color $ui-button-default-color
+.tag-control
+  display flex
+  height 30px
+  line-height 25px
+  overflow hidden
+  .tag-control-title
+    padding-left 15px
+    padding-bottom 13px
+    flex 1
+    p
+      color $ui-button-default-color
+  .tag-control-sortTagsBy
+    user-select none
+    font-size 12px
+    color $ui-inactive-text-color
+    margin-left 12px
+    margin-right 12px
+    .tag-control-sortTagsBy-select
+      appearance: none;
+      margin-left 5px
+      color $ui-inactive-text-color
+      padding 0
+      border none
+      background-color transparent
+      outline none
+      cursor pointer
+      font-size 12px
 
 .tagList
   overflow-y auto
@@ -95,3 +117,8 @@ body[data-theme="solarized-dark"]
   .root, .root--folded
     background-color $ui-solarized-dark-backgroundColor
     border-right 1px solid $ui-solarized-dark-borderColor
+
+body[data-theme="monokai"]
+  .root, .root--folded
+    background-color $ui-monokai-backgroundColor
+    border-right 1px solid $ui-monokai-borderColor

browser/main/SideNav/StorageItem.js

@@ -9,9 +9,13 @@ import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
 import dataApi from 'browser/main/lib/dataApi'
 import StorageItemChild from 'browser/components/StorageItem'
 import _ from 'lodash'
+import { SortableElement } from 'react-sortable-hoc'
+import i18n from 'browser/lib/i18n'
 
 const { remote } = require('electron')
 const { Menu, dialog } = remote
+const escapeStringRegexp = require('escape-string-regexp')
+const path = require('path')
 
 class StorageItem extends React.Component {
   constructor (props) {
@@ -25,14 +29,14 @@ class StorageItem extends React.Component {
   handleHeaderContextMenu (e) {
     const menu = Menu.buildFromTemplate([
       {
-        label: 'Add Folder',
+        label: i18n.__('Add Folder'),
         click: (e) => this.handleAddFolderButtonClick(e)
       },
       {
         type: 'separator'
       },
       {
-        label: 'Unlink Storage',
+        label: i18n.__('Unlink Storage'),
         click: (e) => this.handleUnlinkStorageClick(e)
       }
     ])
@@ -43,9 +47,9 @@ class StorageItem extends React.Component {
   handleUnlinkStorageClick (e) {
     const index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
-      message: 'Unlink Storage',
-      detail: 'This work will just detatches a storage from Boostnote. (Any data won\'t be deleted.)',
-      buttons: ['Confirm', 'Cancel']
+      message: i18n.__('Unlink Storage'),
+      detail: i18n.__('This work will just detatches a storage from Boostnote. (Any data won\'t be deleted.)'),
+      buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
     })
 
     if (index === 0) {
@@ -92,21 +96,21 @@ class StorageItem extends React.Component {
   handleFolderButtonContextMenu (e, folder) {
     const menu = Menu.buildFromTemplate([
       {
-        label: 'Rename Folder',
+        label: i18n.__('Rename Folder'),
         click: (e) => this.handleRenameFolderClick(e, folder)
       },
       {
         type: 'separator'
       },
       {
-        label: 'Export Folder',
+        label: i18n.__('Export Folder'),
         submenu: [
           {
-            label: 'Export as txt',
+            label: i18n.__('Export as txt'),
             click: (e) => this.handleExportFolderClick(e, folder, 'txt')
           },
           {
-            label: 'Export as md',
+            label: i18n.__('Export as md'),
             click: (e) => this.handleExportFolderClick(e, folder, 'md')
           }
         ]
@@ -115,7 +119,7 @@ class StorageItem extends React.Component {
         type: 'separator'
       },
       {
-        label: 'Delete Folder',
+        label: i18n.__('Delete Folder'),
         click: (e) => this.handleFolderDeleteClick(e, folder)
       }
     ])
@@ -134,8 +138,8 @@ class StorageItem extends React.Component {
   handleExportFolderClick (e, folder, fileType) {
     const options = {
       properties: ['openDirectory', 'createDirectory'],
-      buttonLabel: 'Select directory',
-      title: 'Select a folder to export the files to',
+      buttonLabel: i18n.__('Select directory'),
+      title: i18n.__('Select a folder to export the files to'),
       multiSelections: false
     }
     dialog.showOpenDialog(remote.getCurrentWindow(), options,
@@ -159,9 +163,9 @@ class StorageItem extends React.Component {
   handleFolderDeleteClick (e, folder) {
     const index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
-      message: 'Delete Folder',
-      detail: 'This will delete all notes in the folder and can not be undone.',
-      buttons: ['Confirm', 'Cancel']
+      message: i18n.__('Delete Folder'),
+      detail: i18n.__('This will delete all notes in the folder and can not be undone.'),
+      buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
     })
 
     if (index === 0) {
@@ -191,33 +195,16 @@ class StorageItem extends React.Component {
   dropNote (storage, folder, dispatch, location, noteData) {
     noteData = noteData.filter((note) => folder.key !== note.folder)
     if (noteData.length === 0) return
-    const newNoteData = noteData.map((note) => Object.assign({}, note, {storage: storage, folder: folder.key}))
 
     Promise.all(
-      newNoteData.map((note) => dataApi.createNote(storage.key, note))
+      noteData.map((note) => dataApi.moveNote(note.storage, note.key, storage.key, folder.key))
     )
     .then((createdNoteData) => {
-      createdNoteData.forEach((note) => {
+      createdNoteData.forEach((newNote) => {
         dispatch({
-          type: 'UPDATE_NOTE',
-          note: note
-        })
-      })
-    })
-    .catch((err) => {
-      console.error(`error on create notes: ${err}`)
-    })
-    .then(() => {
-      return Promise.all(
-        noteData.map((note) => dataApi.deleteNote(note.storage, note.key))
-      )
-    })
-    .then((deletedNoteData) => {
-      deletedNoteData.forEach((note) => {
-        dispatch({
-          type: 'DELETE_NOTE',
-          storageKey: note.storageKey,
-          noteKey: note.noteKey
+          type: 'MOVE_NOTE',
+          originNote: noteData.find((note) => note.content === newNote.oldContent),
+          note: newNote
         })
       })
     })
@@ -236,8 +223,10 @@ class StorageItem extends React.Component {
   render () {
     const { storage, location, isFolded, data, dispatch } = this.props
     const { folderNoteMap, trashedSet } = data
-    const folderList = storage.folders.map((folder) => {
-      const isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
+    const SortableStorageItemChild = SortableElement(StorageItemChild)
+    const folderList = storage.folders.map((folder, index) => {
+      let folderRegex = new RegExp(escapeStringRegexp(path.sep) + 'storages' + escapeStringRegexp(path.sep) + storage.key + escapeStringRegexp(path.sep) + 'folders' + escapeStringRegexp(path.sep) + folder.key)
+      const isActive = !!(location.pathname.match(folderRegex))
       const noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
 
       let noteCount = 0
@@ -250,8 +239,9 @@ class StorageItem extends React.Component {
         noteCount = noteSet.size - trashedNoteCount
       }
       return (
-        <StorageItemChild
+        <SortableStorageItemChild
           key={folder.key}
+          index={index}
           isActive={isActive}
           handleButtonClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
           handleContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
@@ -266,16 +256,16 @@ class StorageItem extends React.Component {
       )
     })
 
-    const isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '$'))
+    const isActive = location.pathname.match(new RegExp(escapeStringRegexp(path.sep) + 'storages' + escapeStringRegexp(path.sep) + storage.key + '$'))
 
     return (
       <div styleName={isFolded ? 'root--folded' : 'root'}
         key={storage.key}
       >
         <div styleName={isActive
-            ? 'header--active'
-            : 'header'
-          }
+          ? 'header--active'
+          : 'header'
+        }
           onContextMenu={(e) => this.handleHeaderContextMenu(e)}
         >
           <button styleName='header-toggleButton'
@@ -284,7 +274,7 @@ class StorageItem extends React.Component {
             <img src={this.state.isOpen
               ? '../resources/icon/icon-down.svg'
               : '../resources/icon/icon-right.svg'
-              }
+            }
             />
           </button>
 

browser/main/SideNav/StorageItem.styl

@@ -44,7 +44,7 @@
   height 36px
   padding-left 25px
   padding-right 15px
-  line-height 22px
+  line-height 36px
   cursor pointer
   font-size 14px
   border none

browser/main/SideNav/SwitchButton.styl

@@ -29,6 +29,7 @@
   border-radius 2px
   opacity 0
   transition 0.1s
+  white-space nowrap
 
 body[data-theme="white"]
   .non-active-button

browser/main/SideNav/TagButton.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SwitchButton.styl'
+import i18n from 'browser/lib/i18n'
 
 const TagButton = ({
   onClick, isTagActive
@@ -12,7 +13,7 @@ const TagButton = ({
         : '../resources/icon/icon-tag.svg'
     }
     />
-    <span styleName='tooltip'>Tags</span>
+    <span styleName='tooltip'>{i18n.__('Tags')}</span>
   </button>
 )
 

browser/main/SideNav/index.js

@@ -17,6 +17,8 @@ import EventEmitter from 'browser/main/lib/eventEmitter'
 import PreferenceButton from './PreferenceButton'
 import ListButton from './ListButton'
 import TagButton from './TagButton'
+import {SortableContainer} from 'react-sortable-hoc'
+import i18n from 'browser/lib/i18n'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
@@ -68,8 +70,19 @@ class SideNav extends React.Component {
     router.push('/alltags')
   }
 
+  onSortEnd (storage) {
+    return ({oldIndex, newIndex}) => {
+      const { dispatch } = this.props
+      dataApi
+        .reorderFolder(storage.key, oldIndex, newIndex)
+        .then((data) => {
+          dispatch({ type: 'REORDER_FOLDER', storage: data.storage })
+        })
+    }
+  }
+
   SideNavComponent (isFolded, storageList) {
-    const { location, data } = this.props
+    const { location, data, config } = this.props
 
     const isHomeActive = !!location.pathname.match(/^\/home$/)
     const isStarredActive = !!location.pathname.match(/^\/starred$/)
@@ -95,15 +108,30 @@ class SideNav extends React.Component {
             handleFilterButtonContextMenu={this.handleFilterButtonContextMenu.bind(this)}
           />
 
-          <StorageList storageList={storageList} />
+          <StorageList storageList={storageList} isFolded={isFolded} />
           <NavToggleButton isFolded={isFolded} handleToggleButtonClick={this.handleToggleButtonClick.bind(this)} />
         </div>
       )
     } else {
       component = (
         <div styleName='tabBody'>
-          <div styleName='tag-title'>
-            <p>Tags</p>
+          <div styleName='tag-control'>
+            <div styleName='tag-control-title'>
+              <p>{i18n.__('Tags')}</p>
+            </div>
+            <div styleName='tag-control-sortTagsBy'>
+              <i className='fa fa-angle-down' />
+              <select styleName='tag-control-sortTagsBy-select'
+                title={i18n.__('Select filter mode')}
+                value={config.sortTagsBy}
+                onChange={(e) => this.handleSortTagsByChange(e)}
+              >
+                <option title='Sort alphabetically'
+                  value='ALPHABETICAL'>{i18n.__('Alphabetically')}</option>
+                <option title='Sort by update time'
+                  value='COUNTER'>{i18n.__('Counter')}</option>
+              </select>
+            </div>
           </div>
           <div styleName='tagList'>
             {this.tagListComponent(data)}
@@ -116,17 +144,30 @@ class SideNav extends React.Component {
   }
 
   tagListComponent () {
-    const { data, location } = this.props
-    const tagList = data.tagNoteMap.map((tag, name) => {
-      return { name, size: tag.size }
-    })
+    const { data, location, config } = this.props
+    const relatedTags = this.getRelatedTags(this.getActiveTags(location.pathname), data.noteMap)
+    let tagList = _.sortBy(data.tagNoteMap.map(
+      (tag, name) => ({ name, size: tag.size, related: relatedTags.has(name) })
+    ), ['name']).filter(
+      tag => tag.size > 0
+    )
+    if (config.sortTagsBy === 'COUNTER') {
+      tagList = _.sortBy(tagList, item => (0 - item.size))
+    }
+    if (config.ui.showOnlyRelatedTags && (relatedTags.size > 0)) {
+      tagList = tagList.filter(
+        tag => tag.related
+      )
+    }
     return (
       tagList.map(tag => {
         return (
           <TagListItem
             name={tag.name}
             handleClickTagListItem={this.handleClickTagListItem.bind(this)}
-            isActive={this.getTagActive(location.pathname, tag)}
+            handleClickNarrowToTag={this.handleClickNarrowToTag.bind(this)}
+            isActive={this.getTagActive(location.pathname, tag.name)}
+            isRelated={tag.related}
             key={tag.name}
             count={tag.size}
           />
@@ -135,10 +176,30 @@ class SideNav extends React.Component {
     )
   }
 
+  getRelatedTags (activeTags, noteMap) {
+    if (activeTags.length === 0) {
+      return new Set()
+    }
+    const relatedNotes = noteMap.map(
+      note => ({key: note.key, tags: note.tags})
+    ).filter(
+      note => activeTags.every(tag => note.tags.includes(tag))
+    )
+    const relatedTags = new Set()
+    relatedNotes.forEach(note => note.tags.map(tag => relatedTags.add(tag)))
+    return relatedTags
+  }
+
   getTagActive (path, tag) {
+    return this.getActiveTags(path).includes(tag)
+  }
+
+  getActiveTags (path) {
     const pathSegments = path.split('/')
-    const pathTag = pathSegments[pathSegments.length - 1]
-    return pathTag === tag
+    const tags = pathSegments[pathSegments.length - 1]
+    return (tags === 'alltags')
+      ? []
+      : tags.split(' ')
   }
 
   handleClickTagListItem (name) {
@@ -146,12 +207,37 @@ class SideNav extends React.Component {
     router.push(`/tags/${name}`)
   }
 
+  handleSortTagsByChange (e) {
+    const { dispatch } = this.props
+
+    const config = {
+      sortTagsBy: e.target.value
+    }
+
+    ConfigManager.set(config)
+    dispatch({
+      type: 'SET_CONFIG',
+      config
+    })
+  }
+
+  handleClickNarrowToTag (tag) {
+    const { router } = this.context
+    const { location } = this.props
+    const listOfTags = this.getActiveTags(location.pathname)
+    const indexOfTag = listOfTags.indexOf(tag)
+    if (indexOfTag > -1) {
+      listOfTags.splice(indexOfTag, 1)
+    } else {
+      listOfTags.push(tag)
+    }
+    router.push(`/tags/${listOfTags.join(' ')}`)
+  }
+
   emptyTrash (entries) {
     const { dispatch } = this.props
-    const deletionPromises = entries.map((storageAndNoteKey) => {
-      const storageKey = storageAndNoteKey.split('-')[0]
-      const noteKey = storageAndNoteKey.split('-')[1]
-      return dataApi.deleteNote(storageKey, noteKey)
+    const deletionPromises = entries.map((note) => {
+      return dataApi.deleteNote(note.storage, note.key)
     })
     Promise.all(deletionPromises)
     .then((arrayOfStorageAndNoteKeys) => {
@@ -167,9 +253,9 @@ class SideNav extends React.Component {
 
   handleFilterButtonContextMenu (event) {
     const { data } = this.props
-    const entries = data.trashedSet.toJS()
+    const trashedNotes = data.trashedSet.toJS().map((uniqueKey) => data.noteMap.get(uniqueKey))
     const menu = Menu.buildFromTemplate([
-      { label: 'Empty Trash', click: () => this.emptyTrash(entries) }
+      { label: i18n.__('Empty Trash'), click: () => this.emptyTrash(trashedNotes) }
     ])
     menu.popup()
   }
@@ -180,13 +266,16 @@ class SideNav extends React.Component {
     const isFolded = config.isSideNavFolded
 
     const storageList = data.storageMap.map((storage, key) => {
-      return <StorageItem
+      const SortableStorageItem = SortableContainer(StorageItem)
+      return <SortableStorageItem
         key={storage.key}
         storage={storage}
         data={data}
         location={location}
         isFolded={isFolded}
         dispatch={dispatch}
+        onSortEnd={this.onSortEnd.bind(this)(storage)}
+        useDragHandle
       />
     })
     const style = {}

browser/main/StatusBar/StatusBar.styl

@@ -21,20 +21,19 @@
     color white
 
 .zoom
-  display none
-  // navButtonColor()
-  // color rgba(0,0,0,.54)
-  // height 20px
-  // display flex
-  // padding 0
-  // align-items center
-  // background-color transparent
-  // &:hover
-  //   color $ui-active-color
-  // &:active
-  //   color $ui-active-color
-  // span
-  //   margin-left 5px
+  navButtonColor()
+  color rgba(0,0,0,.54)
+  height 20px
+  display flex
+  padding 0
+  align-items center
+  background-color transparent
+  &:hover
+    color $ui-active-color
+  &:active
+    color $ui-active-color
+  span
+    margin-left 5px
   
 .update
   navButtonColor()
@@ -70,3 +69,14 @@ body[data-theme="dark"]
     navDarkButtonColor()
     border-color $ui-dark-borderColor
     border-left 1px solid $ui-dark-borderColor
+
+body[data-theme="monokai"]
+   navButtonColor()
+  .zoom
+    border-color $ui-dark-borderColor
+    color $ui-monokai-text-color
+    &:hover
+      transition 0.15s
+      color $ui-monokai-active-color
+    &:active
+      color $ui-monokai-active-color

browser/main/StatusBar/index.js

@@ -3,6 +3,7 @@ import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
+import i18n from 'browser/lib/i18n'
 
 const electron = require('electron')
 const { remote, ipcRenderer } = electron
@@ -14,9 +15,9 @@ class StatusBar extends React.Component {
   updateApp () {
     const index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
-      message: 'Update Boostnote',
-      detail: 'New Boostnote is ready to be installed.',
-      buttons: ['Restart & Install', 'Not Now']
+      message: i18n.__('Update Boostnote'),
+      detail: i18n.__('New Boostnote is ready to be installed.'),
+      buttons: [i18n.__('Restart & Install'), i18n.__('Not Now')]
     })
 
     if (index === 0) {
@@ -62,7 +63,7 @@ class StatusBar extends React.Component {
 
         {status.updateReady
           ? <button onClick={this.updateApp} styleName='update'>
-            <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
+            <i styleName='update-icon' className='fa fa-cloud-download' /> {i18n.__('Ready to Update!')}
           </button>
           : null
         }

browser/main/TopBar/TopBar.styl

@@ -40,6 +40,32 @@ $control-height = 34px
     padding-bottom 2px
     background-color $ui-noteList-backgroundColor
 
+.control-search-input-clear
+  height 16px
+  width 16px
+  position absolute
+  right 40px
+  top 10px
+  z-index 300
+  border none
+  background-color transparent
+  color #999
+  &:hover .control-search-input-clear-tooltip
+    opacity 1
+
+.control-search-input-clear-tooltip
+  tooltip()
+  position fixed
+  pointer-events none
+  top 50px
+  left 433px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
 .control-search-optionList
   position fixed
   z-index 200
@@ -208,3 +234,25 @@ body[data-theme="solarized-dark"]
     input
       background-color $ui-solarized-dark-noteList-backgroundColor
       color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .root, .root--expanded
+    background-color $ui-monokai-noteList-backgroundColor
+
+  .control
+    border-color $ui-monokai-borderColor
+  .control-search
+    background-color $ui-monokai-noteList-backgroundColor
+
+  .control-search-icon
+    absolute top bottom left
+    line-height 32px
+    width 35px
+    color $ui-monokai-inactive-text-color
+    background-color $ui-monokai-noteList-backgroundColor
+
+  .control-search-input
+    background-color $ui-monokai-noteList-backgroundColor
+    input
+      background-color $ui-monokai-noteList-backgroundColor
+      color $ui-monokai-text-color

browser/main/TopBar/index.js

@@ -5,6 +5,7 @@ import styles from './TopBar.styl'
 import _ from 'lodash'
 import ee from 'browser/main/lib/eventEmitter'
 import NewNoteButton from 'browser/main/NewNoteButton'
+import i18n from 'browser/lib/i18n'
 
 class TopBar extends React.Component {
   constructor (props) {
@@ -27,6 +28,14 @@ class TopBar extends React.Component {
   }
 
   componentDidMount () {
+    const { params } = this.props
+    const searchWord = params.searchword
+    if (searchWord !== undefined) {
+      this.setState({
+        search: searchWord,
+        isSearching: true
+      })
+    }
     ee.on('top:focus-search', this.focusSearchHandler)
     ee.on('code:init', this.codeInitHandler)
   }
@@ -36,6 +45,17 @@ class TopBar extends React.Component {
     ee.off('code:init', this.codeInitHandler)
   }
 
+  handleSearchClearButton (e) {
+    const { router } = this.context
+    this.setState({
+      search: '',
+      isSearching: false
+    })
+    this.refs.search.childNodes[0].blur
+    router.push('/searched')
+    e.preventDefault()
+  }
+
   handleKeyDown (e) {
     // reset states
     this.setState({
@@ -43,6 +63,23 @@ class TopBar extends React.Component {
       isIME: false
     })
 
+    // Clear search on ESC
+    if (e.keyCode === 27) {
+      return this.handleSearchClearButton(e)
+    }
+
+    // Next note on DOWN key
+    if (e.keyCode === 40) {
+      ee.emit('list:next')
+      e.preventDefault()
+    }
+
+    // Prev note on UP key
+    if (e.keyCode === 38) {
+      ee.emit('list:prior')
+      e.preventDefault()
+    }
+
     // When the key is an alphabet, del, enter or ctr
     if (e.keyCode <= 90 || e.keyCode >= 186 && e.keyCode <= 222) {
       this.setState({
@@ -68,9 +105,10 @@ class TopBar extends React.Component {
       this.setState({
         isConfirmTranslation: true
       })
-      router.push('/searched')
+      const keyword = this.refs.searchInput.value
+      router.push(`/searched/${encodeURIComponent(keyword)}`)
       this.setState({
-        search: this.refs.searchInput.value
+        search: keyword
       })
     }
   }
@@ -79,7 +117,7 @@ class TopBar extends React.Component {
     const { router } = this.context
     const keyword = this.refs.searchInput.value
     if (this.state.isAlphabet || this.state.isConfirmTranslation) {
-      router.push('/searched')
+      router.push(`/searched/${encodeURIComponent(keyword)}`)
     } else {
       e.preventDefault()
     }
@@ -114,10 +152,12 @@ class TopBar extends React.Component {
   }
 
   handleOnSearchFocus () {
+    const el = this.refs.search.childNodes[0]
     if (this.state.isSearching) {
-      this.refs.search.childNodes[0].blur()
+      el.blur()
     } else {
-      this.refs.search.childNodes[0].focus()
+      el.focus()
+      el.setSelectionRange(0, el.value.length)
     }
   }
 
@@ -146,19 +186,19 @@ class TopBar extends React.Component {
                 onChange={(e) => this.handleSearchChange(e)}
                 onKeyDown={(e) => this.handleKeyDown(e)}
                 onKeyUp={(e) => this.handleKeyUp(e)}
-                placeholder='Search'
+                placeholder={i18n.__('Search')}
                 type='text'
                 className='searchInput'
               />
+              {this.state.search !== '' &&
+                <button styleName='control-search-input-clear'
+                  onClick={(e) => this.handleSearchClearButton(e)}
+                >
+                  <i className='fa fa-fw fa-times' />
+                  <span styleName='control-search-input-clear-tooltip'>{i18n.__('Clear Search')}</span>
+                </button>
+              }
             </div>
-            {this.state.search > 0 &&
-              <button styleName='left-search-clearButton'
-                onClick={(e) => this.handleSearchClearButton(e)}
-              >
-                <i className='fa fa-times' />
-              </button>
-            }
-
           </div>
         </div>
         {location.pathname === '/trashed' ? ''

browser/main/global.styl

@@ -108,6 +108,21 @@ body[data-theme="dark"]
   background #B1D7FE
 ::selection
   background #B1D7FE
+.CodeMirror-foldmarker
+  font-family: arial
+
+.CodeMirror-foldgutter
+  width: .7em
+
+.CodeMirror-foldgutter-open,
+.CodeMirror-foldgutter-folded
+  cursor: pointer
+
+.CodeMirror-foldgutter-open:after
+  content: "\25BE"
+
+.CodeMirror-foldgutter-folded:after
+  content: "\25B8"
 
 .sortableItemHelper
   z-index modalZIndex + 5
@@ -119,4 +134,10 @@ body[data-theme="solarized-dark"]
   .sortableItemHelper
     color: $ui-solarized-dark-text-color
 
+body[data-theme="monokai"]
+  .ModalBase
+    .modalBack
+      background-color $ui-monokai-backgroundColor
+  .sortableItemHelper
+    color: $ui-monokai-text-color
 

browser/main/index.js

@@ -8,6 +8,7 @@ import { Router, Route, IndexRoute, IndexRedirect, hashHistory } from 'react-rou
 import { syncHistoryWithStore } from 'react-router-redux'
 require('./lib/ipcClient')
 require('../lib/customMeta')
+import i18n from 'browser/lib/i18n'
 
 const electron = require('electron')
 
@@ -23,6 +24,45 @@ document.addEventListener('dragover', function (e) {
   e.stopPropagation()
 })
 
+// prevent menu from popup when alt pressed
+// but still able to toggle menu when only alt is pressed
+let isAltPressing = false
+let isAltWithMouse = false
+let isAltWithOtherKey = false
+let isOtherKey = false
+
+document.addEventListener('keydown', function (e) {
+  if (e.key === 'Alt') {
+    isAltPressing = true
+    if (isOtherKey) {
+      isAltWithOtherKey = true
+    }
+  } else {
+    if (isAltPressing) {
+      isAltWithOtherKey = true
+    }
+    isOtherKey = true
+  }
+})
+
+document.addEventListener('mousedown', function (e) {
+  if (isAltPressing) {
+    isAltWithMouse = true
+  }
+})
+
+document.addEventListener('keyup', function (e) {
+  if (e.key === 'Alt') {
+    if (isAltWithMouse || isAltWithOtherKey) {
+      e.preventDefault()
+    }
+    isAltWithMouse = false
+    isAltWithOtherKey = false
+    isAltPressing = false
+    isOtherKey = false
+  }
+})
+
 document.addEventListener('click', function (e) {
   const className = e.target.className
   if (!className && typeof (className) !== 'string') return
@@ -46,9 +86,9 @@ function notify (...args) {
 function updateApp () {
   const index = dialog.showMessageBox(remote.getCurrentWindow(), {
     type: 'warning',
-    message: 'Update Boostnote',
-    detail: 'New Boostnote is ready to be installed.',
-    buttons: ['Restart & Install', 'Not Now']
+    message: i18n.__('Update Boostnote'),
+    detail: i18n.__('New Boostnote is ready to be installed.'),
+    buttons: [i18n.__('Restart & Install'), i18n.__('Not Now')]
   })
 
   if (index === 0) {
@@ -63,7 +103,9 @@ ReactDOM.render((
         <IndexRedirect to='/home' />
         <Route path='home' />
         <Route path='starred' />
-        <Route path='searched' />
+        <Route path='searched'>
+          <Route path=':searchword' />
+        </Route>
         <Route path='trashed' />
         <Route path='alltags' />
         <Route path='tags'>

browser/main/lib/ConfigManager.js

@@ -1,5 +1,7 @@
 import _ from 'lodash'
 import RcParser from 'browser/lib/RcParser'
+import i18n from 'browser/lib/i18n'
+import ee from 'browser/main/lib/eventEmitter'
 
 const OSX = global.process.platform === 'darwin'
 const win = global.process.platform === 'win32'
@@ -15,12 +17,15 @@ export const DEFAULT_CONFIG = {
   listWidth: 280,
   navWidth: 200,
   sortBy: 'UPDATED_AT', // 'CREATED_AT', 'UPDATED_AT', 'APLHABETICAL'
+  sortTagsBy: 'ALPHABETICAL', // 'ALPHABETICAL', 'COUNTER'
   listStyle: 'DEFAULT', // 'DEFAULT', 'SMALL'
   amaEnabled: true,
   hotkey: {
-    toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E'
+    toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E',
+    toggleMode: OSX ? 'Cmd + M' : 'Ctrl + M'
   },
   ui: {
+    language: 'en',
     theme: 'default',
     showCopyNotification: true,
     disableDirectWrite: false,
@@ -33,6 +38,8 @@ export const DEFAULT_CONFIG = {
     fontFamily: win ? 'Segoe UI' : 'Monaco, Consolas',
     indentType: 'space',
     indentSize: '2',
+    enableRulers: false,
+    rulers: [80, 120],
     displayLineNumbers: true,
     switchPreview: 'BLUR', // Available value: RIGHTCLICK, BLUR
     scrollPastEnd: false,
@@ -48,7 +55,22 @@ export const DEFAULT_CONFIG = {
     latexInlineClose: '$',
     latexBlockOpen: '$$',
     latexBlockClose: '$$',
-    scrollPastEnd: false
+    plantUMLServerAddress: 'http://www.plantuml.com/plantuml',
+    scrollPastEnd: false,
+    smartQuotes: true,
+    breaks: true,
+    smartArrows: false,
+    allowCustomCSS: false,
+    customCSS: '',
+    sanitize: 'STRICT' // 'STRICT', 'ALLOW_STYLES', 'NONE'
+  },
+  blog: {
+    type: 'wordpress', // Available value: wordpress, add more types in the future plz
+    address: 'http://wordpress.com/wp-json',
+    authMethod: 'JWT', // Available value: JWT, USER
+    token: '',
+    username: '',
+    password: ''
   }
 }
 
@@ -120,10 +142,14 @@ function set (updates) {
     document.body.setAttribute('data-theme', 'white')
   } else if (newConfig.ui.theme === 'solarized-dark') {
     document.body.setAttribute('data-theme', 'solarized-dark')
+  } else if (newConfig.ui.theme === 'monokai') {
+    document.body.setAttribute('data-theme', 'monokai')
   } else {
     document.body.setAttribute('data-theme', 'default')
   }
 
+  i18n.setLocale(newConfig.ui.language)
+
   let editorTheme = document.getElementById('editorTheme')
   if (editorTheme == null) {
     editorTheme = document.createElement('link')
@@ -146,11 +172,13 @@ function set (updates) {
   ipcRenderer.send('config-renew', {
     config: get()
   })
+  ee.emit('config-renew')
 }
 
 function assignConfigValues (originalConfig, rcConfig) {
   const config = Object.assign({}, DEFAULT_CONFIG, originalConfig, rcConfig)
   config.hotkey = Object.assign({}, DEFAULT_CONFIG.hotkey, originalConfig.hotkey, rcConfig.hotkey)
+  config.blog = Object.assign({}, DEFAULT_CONFIG.blog, originalConfig.blog, rcConfig.blog)
   config.ui = Object.assign({}, DEFAULT_CONFIG.ui, originalConfig.ui, rcConfig.ui)
   config.editor = Object.assign({}, DEFAULT_CONFIG.editor, originalConfig.editor, rcConfig.editor)
   config.preview = Object.assign({}, DEFAULT_CONFIG.preview, originalConfig.preview, rcConfig.preview)

browser/main/lib/dataApi/attachmentManagement.js

@@ -0,0 +1,424 @@
+const uniqueSlug = require('unique-slug')
+const fs = require('fs')
+const path = require('path')
+const findStorage = require('browser/lib/findStorage')
+const mdurl = require('mdurl')
+const fse = require('fs-extra')
+const escapeStringRegexp = require('escape-string-regexp')
+const sander = require('sander')
+import i18n from 'browser/lib/i18n'
+
+const STORAGE_FOLDER_PLACEHOLDER = ':storage'
+const DESTINATION_FOLDER = 'attachments'
+
+/**
+ * @description
+ * Copies a copy of an attachment to the storage folder specified by the given key and return the generated attachment name.
+ * Renames the file to match a unique file name.
+ *
+ * @param {String} sourceFilePath The source path of the attachment to be copied
+ * @param {String} storageKey Storage key of the destination storage
+ * @param {String} noteKey Key of the current note. Will be used as subfolder in :storage
+ * @param {boolean} useRandomName determines whether a random filename for the new file is used. If false the source file name is used
+ * @return {Promise<String>} name (inclusive extension) of the generated file
+ */
+function copyAttachment (sourceFilePath, storageKey, noteKey, useRandomName = true) {
+  return new Promise((resolve, reject) => {
+    if (!sourceFilePath) {
+      reject('sourceFilePath has to be given')
+    }
+
+    if (!storageKey) {
+      reject('storageKey has to be given')
+    }
+
+    if (!noteKey) {
+      reject('noteKey has to be given')
+    }
+
+    try {
+      if (!fs.existsSync(sourceFilePath)) {
+        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)}`
+      } else {
+        destinationName = path.basename(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)
+      })
+    } catch (e) {
+      return reject(e)
+    }
+  })
+}
+
+function createAttachmentDestinationFolder (destinationStoragePath, noteKey) {
+  let destinationDir = path.join(destinationStoragePath, DESTINATION_FOLDER)
+  if (!fs.existsSync(destinationDir)) {
+    fs.mkdirSync(destinationDir)
+  }
+  destinationDir = path.join(destinationStoragePath, DESTINATION_FOLDER, noteKey)
+  if (!fs.existsSync(destinationDir)) {
+    fs.mkdirSync(destinationDir)
+  }
+}
+
+/**
+ * @description Moves attachments from the old location ('/images') to the new one ('/attachments/noteKey)
+ * @param renderedHTML HTML of the current note
+ * @param storagePath Storage path of the current note
+ * @param noteKey Key of the current note
+ */
+function migrateAttachments (renderedHTML, storagePath, noteKey) {
+  if (sander.existsSync(path.join(storagePath, 'images'))) {
+    const attachments = getAttachmentsInContent(renderedHTML) || []
+    if (attachments !== []) {
+      createAttachmentDestinationFolder(storagePath, noteKey)
+    }
+    for (const attachment of attachments) {
+      const attachmentBaseName = path.basename(attachment)
+      const possibleLegacyPath = path.join(storagePath, 'images', attachmentBaseName)
+      if (sander.existsSync(possibleLegacyPath)) {
+        const destinationPath = path.join(storagePath, DESTINATION_FOLDER, attachmentBaseName)
+        if (!sander.existsSync(destinationPath)) {
+          sander.copyFileSync(possibleLegacyPath).to(destinationPath)
+        }
+      }
+    }
+  }
+}
+
+/**
+ * @description Fixes the URLs embedded in the generated HTML so that they again refer actual local files.
+ * @param {String} renderedHTML HTML in that the links should be fixed
+ * @param {String} storagePath Path of the current storage
+ * @returns {String} postprocessed HTML in which all :storage references are mapped to the actual paths.
+ */
+function fixLocalURLS (renderedHTML, storagePath) {
+  return renderedHTML.replace(new RegExp(mdurl.encode(path.sep), 'g'), path.sep).replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER, 'g'), 'file:///' + path.join(storagePath, DESTINATION_FOLDER))
+}
+
+/**
+ * @description Generates the markdown code for a given attachment
+ * @param {String} fileName Name of the attachment
+ * @param {String} path Path of the attachment
+ * @param {Boolean} showPreview Indicator whether the generated markdown should show a preview of the image. Note that at the moment only previews for images are supported
+ * @returns {String} Generated markdown code
+ */
+function generateAttachmentMarkdown (fileName, path, showPreview) {
+  return `${showPreview ? '!' : ''}[${fileName}](${path})`
+}
+
+/**
+ * @description Handles the drop-event of a file. Includes the necessary markdown code and copies the file to the corresponding storage folder.
+ * The method calls {CodeEditor#insertAttachmentMd()} to include the generated markdown at the needed place!
+ * @param {CodeEditor} codeEditor Markdown editor. Its insertAttachmentMd() method will be called to include the markdown code
+ * @param {String} storageKey Key of the current storage
+ * @param {String} noteKey Key of the current note
+ * @param {Event} dropEvent DropEvent
+ */
+function handleAttachmentDrop (codeEditor, storageKey, noteKey, dropEvent) {
+  const file = dropEvent.dataTransfer.files[0]
+  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)
+    codeEditor.insertAttachmentMd(imageMd)
+  })
+}
+
+/**
+ * @description Creates a new file in the storage folder belonging to the current note and inserts the correct markdown code
+ * @param {CodeEditor} codeEditor Markdown editor. Its insertAttachmentMd() method will be called to include the markdown code
+ * @param {String} storageKey Key of the current storage
+ * @param {String} noteKey Key of the current note
+ * @param {DataTransferItem} dataTransferItem Part of the past-event
+ */
+function handlePastImageEvent (codeEditor, storageKey, noteKey, dataTransferItem) {
+  if (!codeEditor) {
+    throw new Error('codeEditor has to be given')
+  }
+  if (!storageKey) {
+    throw new Error('storageKey has to be given')
+  }
+
+  if (!noteKey) {
+    throw new Error('noteKey has to be given')
+  }
+  if (!dataTransferItem) {
+    throw new Error('dataTransferItem has to be given')
+  }
+
+  const blob = dataTransferItem.getAsFile()
+  const reader = new FileReader()
+  let base64data
+  const targetStorage = findStorage.findStorage(storageKey)
+  const destinationDir = path.join(targetStorage.path, DESTINATION_FOLDER, noteKey)
+  createAttachmentDestinationFolder(targetStorage.path, noteKey)
+
+  const imageName = `${uniqueSlug()}.png`
+  const imagePath = path.join(destinationDir, imageName)
+
+  reader.onloadend = function () {
+    base64data = reader.result.replace(/^data:image\/png;base64,/, '')
+    base64data += base64data.replace('+', ' ')
+    const binaryData = new Buffer(base64data, 'base64').toString('binary')
+    fs.writeFileSync(imagePath, binaryData, 'binary')
+    const imageReferencePath = path.join(STORAGE_FOLDER_PLACEHOLDER, noteKey, imageName)
+    const imageMd = generateAttachmentMarkdown(imageName, imageReferencePath, true)
+    codeEditor.insertAttachmentMd(imageMd)
+  }
+  reader.readAsDataURL(blob)
+}
+
+/**
+ * @description Returns all attachment paths of the given markdown
+ * @param {String} markdownContent content in which the attachment paths should be found
+ * @returns {String[]} Array of the relative paths (starting with :storage) of the attachments of the given markdown
+ */
+function getAttachmentsInContent (markdownContent) {
+  const preparedInput = markdownContent.replace(new RegExp(mdurl.encode(path.sep), 'g'), path.sep)
+  const regexp = new RegExp(STORAGE_FOLDER_PLACEHOLDER + escapeStringRegexp(path.sep) + '?([a-zA-Z0-9]|-)*' + escapeStringRegexp(path.sep) + '[a-zA-Z0-9]+(\\.[a-zA-Z0-9]+)?', 'g')
+  return preparedInput.match(regexp)
+}
+
+/**
+ * @description Returns an array of the absolute paths of the attachments referenced in the given markdown code
+ * @param {String} markdownContent content in which the attachment paths should be found
+ * @param {String} storagePath path of the current storage
+ * @returns {String[]} Absolute paths of the referenced attachments
+ */
+function getAbsolutePathsOfAttachmentsInContent (markdownContent, storagePath) {
+  const temp = getAttachmentsInContent(markdownContent) || []
+  const result = []
+  for (const relativePath of temp) {
+    result.push(relativePath.replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER, 'g'), path.join(storagePath, DESTINATION_FOLDER)))
+  }
+  return result
+}
+
+/**
+ * @description Moves the attachments of the current note to the new location.
+ * Returns a modified version of the given content so that the links to the attachments point to the new note key.
+ * @param {String} oldPath Source of the note to be moved
+ * @param {String} newPath Destination of the note to be moved
+ * @param {String} noteKey Old note key
+ * @param {String} newNoteKey New note key
+ * @param {String} noteContent Content of the note to be moved
+ * @returns {String} Modified version of noteContent in which the paths of the attachments are fixed
+ */
+function moveAttachments (oldPath, newPath, noteKey, newNoteKey, noteContent) {
+  const src = path.join(oldPath, DESTINATION_FOLDER, noteKey)
+  const dest = path.join(newPath, DESTINATION_FOLDER, newNoteKey)
+  if (fse.existsSync(src)) {
+    fse.moveSync(src, dest)
+  }
+  return replaceNoteKeyWithNewNoteKey(noteContent, noteKey, newNoteKey)
+}
+
+/**
+ * Modifies the given content so that in all attachment references the oldNoteKey is replaced by the new one
+ * @param noteContent content that should be modified
+ * @param oldNoteKey note key to be replaced
+ * @param newNoteKey note key serving as a replacement
+ * @returns {String} modified note content
+ */
+function replaceNoteKeyWithNewNoteKey (noteContent, oldNoteKey, newNoteKey) {
+  if (noteContent) {
+    return noteContent.replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + escapeStringRegexp(path.sep) + oldNoteKey, 'g'), path.join(STORAGE_FOLDER_PLACEHOLDER, newNoteKey))
+  }
+  return noteContent
+}
+
+/**
+ * @description Deletes all :storage and noteKey references from the given input.
+ * @param input Input in which the references should be deleted
+ * @param noteKey Key of the current note
+ * @returns {String} Input without the references
+ */
+function removeStorageAndNoteReferences (input, noteKey) {
+  return input.replace(new RegExp(mdurl.encode(path.sep), 'g'), path.sep).replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + '(' + escapeStringRegexp(path.sep) + noteKey + ')?', 'g'), DESTINATION_FOLDER)
+}
+
+/**
+ * @description Deletes the attachment folder specified by the given storageKey and noteKey
+ * @param storageKey Key of the storage of the note to be deleted
+ * @param noteKey Key of the note to be deleted
+ */
+function deleteAttachmentFolder (storageKey, noteKey) {
+  const storagePath = findStorage.findStorage(storageKey)
+  const noteAttachmentPath = path.join(storagePath.path, DESTINATION_FOLDER, noteKey)
+  sander.rimrafSync(noteAttachmentPath)
+}
+
+/**
+ * @description Deletes all attachments stored in the attachment folder of the give not that are not referenced in the markdownContent
+ * @param markdownContent Content of the note. All unreferenced notes will be deleted
+ * @param storageKey StorageKey of the current note. Is used to determine the belonging attachment folder.
+ * @param noteKey NoteKey of the current note. Is used to determine the belonging attachment folder.
+ */
+function deleteAttachmentsNotPresentInNote (markdownContent, storageKey, noteKey) {
+  if (storageKey == null || noteKey == null || markdownContent == null) {
+    return
+  }
+  const targetStorage = findStorage.findStorage(storageKey)
+  const attachmentFolder = path.join(targetStorage.path, DESTINATION_FOLDER, noteKey)
+  const attachmentsInNote = getAttachmentsInContent(markdownContent)
+  const attachmentsInNoteOnlyFileNames = []
+  if (attachmentsInNote) {
+    for (let i = 0; i < attachmentsInNote.length; i++) {
+      attachmentsInNoteOnlyFileNames.push(attachmentsInNote[i].replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + escapeStringRegexp(path.sep) + noteKey + escapeStringRegexp(path.sep), 'g'), ''))
+    }
+  }
+  if (fs.existsSync(attachmentFolder)) {
+    fs.readdir(attachmentFolder, (err, files) => {
+      if (err) {
+        console.error('Error reading directory "' + attachmentFolder + '". Error:')
+        console.error(err)
+        return
+      }
+      files.forEach(file => {
+        if (!attachmentsInNoteOnlyFileNames.includes(file)) {
+          const absolutePathOfFile = path.join(targetStorage.path, DESTINATION_FOLDER, noteKey, file)
+          fs.unlink(absolutePathOfFile, (err) => {
+            if (err) {
+              console.error('Could not delete "%s"', absolutePathOfFile)
+              console.error(err)
+              return
+            }
+            console.info('File "' + absolutePathOfFile + '" deleted because it was not included in the content of the note')
+          })
+        }
+      })
+    })
+  } else {
+    console.info('Attachment folder ("' + attachmentFolder + '") did not exist..')
+  }
+}
+
+/**
+ * Clones the attachments of a given note.
+ * Copies the attachments to their new destination and updates the content of the new note so that the attachment-links again point to the correct destination.
+ * @param oldNote Note that is being cloned
+ * @param newNote Clone of the note
+ */
+function cloneAttachments (oldNote, newNote) {
+  if (newNote.type === 'MARKDOWN_NOTE') {
+    const oldStorage = findStorage.findStorage(oldNote.storage)
+    const newStorage = findStorage.findStorage(newNote.storage)
+    const attachmentsPaths = getAbsolutePathsOfAttachmentsInContent(oldNote.content, oldStorage.path) || []
+
+    const destinationFolder = path.join(newStorage.path, DESTINATION_FOLDER, newNote.key)
+    if (!sander.existsSync(destinationFolder)) {
+      sander.mkdirSync(destinationFolder)
+    }
+
+    for (const attachment of attachmentsPaths) {
+      const destination = path.join(newStorage.path, DESTINATION_FOLDER, newNote.key, path.basename(attachment))
+      sander.copyFileSync(attachment).to(destination)
+    }
+    newNote.content = replaceNoteKeyWithNewNoteKey(newNote.content, oldNote.key, newNote.key)
+  } else {
+    console.debug('Cloning of the attachment was skipped since it only works for MARKDOWN_NOTEs')
+  }
+}
+
+function generateFileNotFoundMarkdown () {
+  return '**' + i18n.__('⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠') + '**'
+}
+
+/**
+ * Determines whether a given text is a link to an boostnote attachment
+ * @param text Text that might contain a attachment link
+ * @return {Boolean} Result of the test
+ */
+function isAttachmentLink (text) {
+  if (text) {
+    return text.match(new RegExp('.*\\[.*\\]\\( *' + escapeStringRegexp(STORAGE_FOLDER_PLACEHOLDER) + escapeStringRegexp(path.sep) + '.*\\).*', 'gi')) != null
+  }
+  return false
+}
+
+/**
+ * @description Handles the paste of an attachment link. Copies the referenced attachment to the location belonging to the new note.
+ *  Returns a modified version of the pasted text so that it matches the copied attachment (resp. the new location)
+ * @param storageKey StorageKey of the current note
+ * @param noteKey NoteKey of the currentNote
+ * @param linkText Text that was pasted
+ * @return {Promise<String>} Promise returning the modified text
+ */
+function handleAttachmentLinkPaste (storageKey, noteKey, linkText) {
+  if (storageKey != null && noteKey != null && linkText != null) {
+    const storagePath = findStorage.findStorage(storageKey).path
+    const attachments = getAttachmentsInContent(linkText) || []
+    const replaceInstructions = []
+    const copies = []
+    for (const attachment of attachments) {
+      const absPathOfAttachment = attachment.replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER, 'g'), path.join(storagePath, DESTINATION_FOLDER))
+      copies.push(
+        sander.exists(absPathOfAttachment)
+          .then((fileExists) => {
+            if (!fileExists) {
+              const fileNotFoundRegexp = new RegExp('!?' + escapeStringRegexp('[') + '[\\w|\\d|\\s|\\.]*\\]\\(\\s*' + STORAGE_FOLDER_PLACEHOLDER + '[\\w|\\d|\\-|' + escapeStringRegexp(path.sep) + ']*' + escapeStringRegexp(path.basename(absPathOfAttachment)) + escapeStringRegexp(')'))
+              replaceInstructions.push({regexp: fileNotFoundRegexp, replacement: this.generateFileNotFoundMarkdown()})
+              return Promise.resolve()
+            }
+            return this.copyAttachment(absPathOfAttachment, storageKey, noteKey)
+              .then((fileName) => {
+                const replaceLinkRegExp = new RegExp(escapeStringRegexp('(') + ' *' + STORAGE_FOLDER_PLACEHOLDER + '[\\w|\\d|\\-|' + escapeStringRegexp(path.sep) + ']*' + escapeStringRegexp(path.basename(absPathOfAttachment)) + ' *' + escapeStringRegexp(')'))
+                replaceInstructions.push({
+                  regexp: replaceLinkRegExp,
+                  replacement: '(' + path.join(STORAGE_FOLDER_PLACEHOLDER, noteKey, fileName) + ')'
+                })
+                return Promise.resolve()
+              })
+          })
+      )
+    }
+    return Promise.all(copies).then(() => {
+      let modifiedLinkText = linkText
+      for (const replaceInstruction of replaceInstructions) {
+        modifiedLinkText = modifiedLinkText.replace(replaceInstruction.regexp, replaceInstruction.replacement)
+      }
+      return modifiedLinkText
+    })
+  } else {
+    console.log('One if the parameters was null -> Do nothing..')
+    return Promise.resolve(linkText)
+  }
+}
+
+module.exports = {
+  copyAttachment,
+  fixLocalURLS,
+  generateAttachmentMarkdown,
+  handleAttachmentDrop,
+  handlePastImageEvent,
+  getAttachmentsInContent,
+  getAbsolutePathsOfAttachmentsInContent,
+  removeStorageAndNoteReferences,
+  deleteAttachmentFolder,
+  deleteAttachmentsNotPresentInNote,
+  moveAttachments,
+  cloneAttachments,
+  isAttachmentLink,
+  handleAttachmentLinkPaste,
+  generateFileNotFoundMarkdown,
+  migrateAttachments,
+  STORAGE_FOLDER_PLACEHOLDER,
+  DESTINATION_FOLDER
+}

browser/main/lib/dataApi/copyImage.js

@@ -1,31 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-const { findStorage } = require('browser/lib/findStorage')
-
-/**
- * @description To copy an image and return the path.
- * @param {String} filePath
- * @param {String} storageKey
- * @return {String} an image path
- */
-function copyImage (filePath, storageKey) {
-  return new Promise((resolve, reject) => {
-    try {
-      const targetStorage = findStorage(storageKey)
-
-      const inputImage = fs.createReadStream(filePath)
-      const imageExt = path.extname(filePath)
-      const imageName = Math.random().toString(36).slice(-16)
-      const basename = `${imageName}${imageExt}`
-      const imageDir = path.join(targetStorage.path, 'images')
-      if (!fs.existsSync(imageDir)) fs.mkdirSync(imageDir)
-      const outputImage = fs.createWriteStream(path.join(imageDir, basename))
-      inputImage.pipe(outputImage)
-      resolve(basename)
-    } catch (e) {
-      return reject(e)
-    }
-  })
-}
-
-module.exports = copyImage

browser/main/lib/dataApi/createNote.js

@@ -52,12 +52,12 @@ function createNote (storageKey, input) {
       return storage
     })
     .then(function saveNote (storage) {
-      let key = keygen()
+      let key = keygen(true)
       let isUnique = false
       while (!isUnique) {
         try {
           sander.statSync(path.join(storage.path, 'notes', key + '.cson'))
-          key = keygen()
+          key = keygen(true)
         } catch (err) {
           if (err.code === 'ENOENT') {
             isUnique = true

browser/main/lib/dataApi/createSnippet.js

@@ -0,0 +1,26 @@
+import fs from 'fs'
+import crypto from 'crypto'
+import consts from 'browser/lib/consts'
+import fetchSnippet from 'browser/main/lib/dataApi/fetchSnippet'
+
+function createSnippet (snippetFile) {
+  return new Promise((resolve, reject) => {
+    const newSnippet = {
+      id: crypto.randomBytes(16).toString('hex'),
+      name: 'Unnamed snippet',
+      prefix: [],
+      content: ''
+    }
+    fetchSnippet(null, snippetFile).then((snippets) => {
+      snippets.push(newSnippet)
+      fs.writeFile(snippetFile || consts.SNIPPET_FILE, JSON.stringify(snippets, null, 4), (err) => {
+        if (err) reject(err)
+        resolve(newSnippet)
+      })
+    }).catch((err) => {
+      reject(err)
+    })
+  })
+}
+
+module.exports = createSnippet

browser/main/lib/dataApi/deleteFolder.js

@@ -5,6 +5,7 @@ const resolveStorageNotes = require('./resolveStorageNotes')
 const CSON = require('@rokt33r/season')
 const sander = require('sander')
 const { findStorage } = require('browser/lib/findStorage')
+const deleteSingleNote = require('./deleteNote')
 
 /**
  * @param {String} storageKey
@@ -49,11 +50,7 @@ function deleteFolder (storageKey, folderKey) {
 
       const deleteAllNotes = targetNotes
         .map(function deleteNote (note) {
-          const notePath = path.join(storage.path, 'notes', note.key + '.cson')
-          return sander.unlink(notePath)
-            .catch(function (err) {
-              console.warn('Failed to delete', notePath, err)
-            })
+          return deleteSingleNote(storageKey, note.key)
         })
       return Promise.all(deleteAllNotes)
         .then(() => storage)

browser/main/lib/dataApi/deleteNote.js

@@ -1,6 +1,7 @@
 const resolveStorageData = require('./resolveStorageData')
 const path = require('path')
 const sander = require('sander')
+const attachmentManagement = require('./attachmentManagement')
 const { findStorage } = require('browser/lib/findStorage')
 
 function deleteNote (storageKey, noteKey) {
@@ -25,6 +26,10 @@ function deleteNote (storageKey, noteKey) {
         storageKey
       }
     })
+    .then(function deleteAttachments (storageInfo) {
+      attachmentManagement.deleteAttachmentFolder(storageInfo.storageKey, storageInfo.noteKey)
+      return storageInfo
+    })
 }
 
 module.exports = deleteNote

browser/main/lib/dataApi/deleteSnippet.js

@@ -0,0 +1,17 @@
+import fs from 'fs'
+import consts from 'browser/lib/consts'
+import fetchSnippet from 'browser/main/lib/dataApi/fetchSnippet'
+
+function deleteSnippet (snippet, snippetFile) {
+  return new Promise((resolve, reject) => {
+    fetchSnippet(null, snippetFile).then((snippets) => {
+      snippets = snippets.filter(currentSnippet => currentSnippet.id !== snippet.id)
+      fs.writeFile(snippetFile || consts.SNIPPET_FILE, JSON.stringify(snippets, null, 4), (err) => {
+        if (err) reject(err)
+        resolve(snippet)
+      })
+    })
+  })
+}
+
+module.exports = deleteSnippet

browser/main/lib/dataApi/exportFolder.js

@@ -1,6 +1,7 @@
 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'
 
@@ -45,7 +46,7 @@ function exportFolder (storageKey, folderKey, fileType, exportDir) {
       notes
         .filter(note => note.folder === folderKey && note.isTrashed === false && note.type === 'MARKDOWN_NOTE')
         .forEach(snippet => {
-          const notePath = path.join(exportDir, `${snippet.title}.${fileType}`)
+          const notePath = path.join(exportDir, `${filenamify(snippet.title, {replacement: '_'})}.${fileType}`)
           fs.writeFileSync(notePath, snippet.content)
         })
 

browser/main/lib/dataApi/exportNote.js

@@ -1,12 +1,9 @@
 import copyFile from 'browser/main/lib/dataApi/copyFile'
-import {findStorage} from 'browser/lib/findStorage'
+import { findStorage } from 'browser/lib/findStorage'
 
 const fs = require('fs')
 const path = require('path')
 
-const LOCAL_STORED_REGEX = /!\[(.*?)\]\(\s*?\/:storage\/(.*\.\S*?)\)/gi
-const IMAGES_FOLDER_NAME = 'images'
-
 /**
  * Export note together with images
  *
@@ -27,20 +24,7 @@ function exportNote (storageKey, noteContent, targetPath, outputFormatter) {
     throw new Error('Storage path is not found')
   }
 
-  let exportedData = noteContent.replace(LOCAL_STORED_REGEX, (match, dstFilename, srcFilename) => {
-    if (!path.extname(dstFilename)) {
-      dstFilename += path.extname(srcFilename)
-    }
-
-    const dstRelativePath = path.join(IMAGES_FOLDER_NAME, dstFilename)
-
-    exportTasks.push({
-      src: path.join(IMAGES_FOLDER_NAME, srcFilename),
-      dst: dstRelativePath
-    })
-
-    return `![${dstFilename}](${dstRelativePath})`
-  })
+  let exportedData = noteContent
 
   if (outputFormatter) {
     exportedData = outputFormatter(exportedData, exportTasks)

browser/main/lib/dataApi/fetchSnippet.js

@@ -0,0 +1,20 @@
+import fs from 'fs'
+import consts from 'browser/lib/consts'
+
+function fetchSnippet (id, snippetFile) {
+  return new Promise((resolve, reject) => {
+    fs.readFile(snippetFile || consts.SNIPPET_FILE, 'utf8', (err, data) => {
+      if (err) {
+        reject(err)
+      }
+      const snippets = JSON.parse(data)
+      if (id) {
+        const snippet = snippets.find(snippet => { return snippet.id === id })
+        resolve(snippet)
+      }
+      resolve(snippets)
+    })
+  })
+}
+
+module.exports = fetchSnippet

browser/main/lib/dataApi/index.js

@@ -13,6 +13,10 @@ const dataApi = {
   deleteNote: require('./deleteNote'),
   moveNote: require('./moveNote'),
   migrateFromV5Storage: require('./migrateFromV5Storage'),
+  createSnippet: require('./createSnippet'),
+  deleteSnippet: require('./deleteSnippet'),
+  updateSnippet: require('./updateSnippet'),
+  fetchSnippet: require('./fetchSnippet'),
 
   _migrateFromV6Storage: require('./migrateFromV6Storage'),
   _resolveStorageData: require('./resolveStorageData'),

browser/main/lib/dataApi/moveNote.js

@@ -1,10 +1,12 @@
 const resolveStorageData = require('./resolveStorageData')
 const _ = require('lodash')
 const path = require('path')
+const fs = require('fs')
 const CSON = require('@rokt33r/season')
 const keygen = require('browser/lib/keygen')
 const sander = require('sander')
 const { findStorage } = require('browser/lib/findStorage')
+const attachmentManagement = require('./attachmentManagement')
 
 function moveNote (storageKey, noteKey, newStorageKey, newFolderKey) {
   let oldStorage, newStorage
@@ -37,12 +39,12 @@ function moveNote (storageKey, noteKey, newStorageKey, newFolderKey) {
           return resolveStorageData(newStorage)
             .then(function findNewNoteKey (_newStorage) {
               newStorage = _newStorage
-              newNoteKey = keygen()
+              newNoteKey = keygen(true)
               let isUnique = false
               while (!isUnique) {
                 try {
                   sander.statSync(path.join(newStorage.path, 'notes', newNoteKey + '.cson'))
-                  newNoteKey = keygen()
+                  newNoteKey = keygen(true)
                 } catch (err) {
                   if (err.code === 'ENOENT') {
                     isUnique = true
@@ -62,11 +64,20 @@ function moveNote (storageKey, noteKey, newStorageKey, newFolderKey) {
           noteData.key = newNoteKey
           noteData.storage = newStorageKey
           noteData.updatedAt = new Date()
+          noteData.oldContent = noteData.content
 
           return noteData
         })
+        .then(function moveAttachments (noteData) {
+          if (oldStorage.path === newStorage.path) {
+            return noteData
+          }
+
+          noteData.content = attachmentManagement.moveAttachments(oldStorage.path, newStorage.path, noteKey, newNoteKey, noteData.content)
+          return noteData
+        })
         .then(function writeAndReturn (noteData) {
-          CSON.writeFileSync(path.join(newStorage.path, 'notes', noteData.key + '.cson'), _.omit(noteData, ['key', 'storage']))
+          CSON.writeFileSync(path.join(newStorage.path, 'notes', noteData.key + '.cson'), _.omit(noteData, ['key', 'storage', 'oldContent']))
           return noteData
         })
         .then(function deleteOldNote (data) {

browser/main/lib/dataApi/resolveStorageNotes.js

@@ -27,9 +27,12 @@ function resolveStorageNotes (storage) {
         data.storage = storage.key
         return data
       } catch (err) {
-        console.error(notePath)
+        console.error(`error on note path: ${notePath}, error: ${err}`)
       }
     })
+    .filter(function filterOnlyNoteObject (noteObj) {
+      return typeof noteObj === 'object'
+    })
 
   return Promise.resolve(notes)
 }

browser/main/lib/dataApi/updateNote.js

@@ -30,6 +30,9 @@ function validateInput (input) {
     validatedInput.isPinned = !!input.isPinned
   }
 
+  if (!_.isNil(input.blog)) {
+    validatedInput.blog = input.blog
+  }
   validatedInput.type = input.type
   switch (input.type) {
     case 'MARKDOWN_NOTE':

browser/main/lib/dataApi/updateSnippet.js

@@ -0,0 +1,33 @@
+import fs from 'fs'
+import consts from 'browser/lib/consts'
+
+function updateSnippet (snippet, snippetFile) {
+  return new Promise((resolve, reject) => {
+    const snippets = JSON.parse(fs.readFileSync(snippetFile || consts.SNIPPET_FILE, 'utf-8'))
+
+    for (let i = 0; i < snippets.length; i++) {
+      const currentSnippet = snippets[i]
+
+      if (currentSnippet.id === snippet.id) {
+        if (
+          currentSnippet.name === snippet.name &&
+          currentSnippet.prefix === snippet.prefix &&
+          currentSnippet.content === snippet.content
+        ) {
+          // if everything is the same then don't write to disk
+          resolve(snippets)
+        } else {
+          currentSnippet.name = snippet.name
+          currentSnippet.prefix = snippet.prefix
+          currentSnippet.content = snippet.content
+          fs.writeFile(snippetFile || consts.SNIPPET_FILE, JSON.stringify(snippets, null, 4), (err) => {
+            if (err) reject(err)
+            resolve(snippets)
+          })
+        }
+      }
+    }
+  })
+}
+
+module.exports = updateSnippet

browser/main/lib/ipcClient.js

@@ -1,5 +1,4 @@
 import ConfigManager from './ConfigManager'
-import store from 'browser/main/store'
 
 const nodeIpc = require('node-ipc')
 const { remote, ipcRenderer } = require('electron')

browser/main/lib/shortcut.js

@@ -0,0 +1,7 @@
+import ee from 'browser/main/lib/eventEmitter'
+
+module.exports = {
+  'toggleMode': () => {
+    ee.emit('topbar:togglemodebutton')
+  }
+}