v0.11.11

Update electron framework to version 3.0.8

.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

@@ -22,7 +22,10 @@
         "fontSize": "14",
         "lineNumber": true
     },
-    "sortBy": "UPDATED_AT",
+    "sortBy": {
+        "default": "UPDATED_AT"
+    },
+    "sortTagsBy": "ALPHABETICAL",
     "ui": {
         "defaultNote": "ALWAYS_ASK",
         "disableDirectWrite": false,

.editorconfig

@@ -0,0 +1,16 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Space indentation
+[*]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+
+# The indent size used in the `package.json` file cannot be changed
+# https://github.com/npm/npm/pull/3180#issuecomment-16336516
+[{*.yml,*.yaml,package.json}]
+indent_style = space
+indent_size = 2

.eslintrc

@@ -19,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

.vscode/launch.json

@@ -0,0 +1,41 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "BoostNote Main",
+      "protocol": "inspector",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+      "runtimeArgs": [
+        "--remote-debugging-port=9223",
+        "--hot",
+        "${workspaceFolder}/index.js"
+      ],
+      "windows": {
+        "runtimeExecutable": "${workspaceFolder}/node_modeules/.bin/electron.cmd"
+      }
+    },
+    {
+      "type": "chrome",
+      "request": "attach",
+      "name": "BoostNote Renderer",
+      "port": 9223,
+      "webRoot": "${workspaceFolder}",
+      "sourceMapPathOverrides": {
+        "webpack:///./~/*": "${webRoot}/node_modules/*",
+        "webpack:///*": "${webRoot}/*"
+      }
+    }
+  ],
+  "compounds": [
+    {
+      "name": "BostNote All",
+      "configurations": ["BoostNote Main", "BoostNote Renderer"]
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,27 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Build Boostnote",
+      "group": "build",
+      "type": "npm",
+      "script": "watch",
+      "isBackground": true,
+      "presentation": {
+        "reveal": "always",
+      },
+      "problemMatcher": {
+        "pattern":[
+          {
+            "regexp": "^([^\\\\s].*)\\\\((\\\\d+,\\\\d+)\\\\):\\\\s*(.*)$",
+            "file": 1,
+            "location": 2,
+            "message": 3
+          }
+        ]
+      }
+    }
+  ]
+}

ISSUE_TEMPLATE.md

@@ -1,10 +1,35 @@
-<!--
-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.
--->
+# Current behavior
 
 <!--
-Love Boostnote? Please consider supporting us via OpenCollective:
-👉  https://opencollective.com/boostnoteio
+Let us know what is currently happening.
+
+Please include some **screenshots** with the **developer tools** open (console tab) when you report a bug.
+
+If your issue is regarding Boostnote mobile, please open an issue in the Boostnote Mobile repo 👉 https://github.com/BoostIO/boostnote-mobile.
+-->
+
+# Expected behavior
+
+<!--
+Let us know what you think should happen!
+-->
+
+# Steps to reproduce
+
+<!-- 
+Please be thorough, issues we can reproduce are easier to fix!
+-->
+
+1. 
+2. 
+3. 
+
+# Environment
+
+- Version :
+- OS Version and name :
+
+<!--
+Love Boostnote? Please consider supporting us on IssueHunt:
+👉  https://issuehunt.io/repos/53266139
 -->

__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,41 +3,34 @@ 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 { options, TableEditor, Alignment } from '@susisu/mte-kernel'
+import TextEditorInterface from 'browser/lib/TextEditorInterface'
 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')
+import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
+import TurndownService from 'turndown'
+import { gfm } from 'turndown-plugin-gfm'
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
-const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
 const buildCMRulers = (rulers, enableRulers) =>
-  enableRulers ? rulers.map(ruler => ({ column: ruler })) : []
-
-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
-  }
-}
+  (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.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {
+      leading: false,
+      trailing: true
+    })
+    this.changeHandler = e => this.handleChange(e)
     this.focusHandler = () => {
       ipcRenderer.send('editor:focused', true)
     }
@@ -52,13 +45,26 @@ 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) => {
+    this.loadStyleHandler = e => {
       this.editor.refresh()
     }
     this.searchHandler = (e, msg) => this.handleSearch(msg)
     this.searchState = null
+    this.scrollToLineHandeler = this.scrollToLine.bind(this)
+
+    this.formatTable = () => this.handleFormatTable()
+    this.editorActivityHandler = () => this.handleEditorActivity()
+
+    this.turndownService = new TurndownService()
   }
 
   handleSearch (msg) {
@@ -73,7 +79,10 @@ export default class CodeEditor extends React.Component {
       cm.addOverlay(component.searchState)
 
       function makeOverlay (query, style) {
-        query = new RegExp(query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'), 'gi')
+        query = new RegExp(
+          query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'),
+          'gi'
+        )
         return {
           token: function (stream) {
             query.lastIndex = stream.pos
@@ -92,10 +101,107 @@ export default class CodeEditor extends React.Component {
     })
   }
 
+  handleFormatTable () {
+    this.tableEditor.formatAll(options({textWidthOptions: {}}))
+  }
+
+  handleEditorActivity () {
+    if (!this.textEditorInterface.transaction) {
+      this.updateTableEditorState()
+    }
+  }
+
+  updateTableEditorState () {
+    const active = this.tableEditor.cursorIsInTable(this.tableEditorOptions)
+    if (active) {
+      if (this.extraKeysMode !== 'editor') {
+        this.extraKeysMode = 'editor'
+        this.editor.setOption('extraKeys', this.editorKeyMap)
+      }
+    } else {
+      if (this.extraKeysMode !== 'default') {
+        this.extraKeysMode = 'default'
+        this.editor.setOption('extraKeys', this.defaultKeyMap)
+        this.tableEditor.resetSmartCursor()
+      }
+    }
+  }
+
   componentDidMount () {
     const { rulers, enableRulers } = this.props
-    this.value = this.props.value
+    const expandSnippet = this.expandSnippet.bind(this)
+    eventEmitter.on('line:jump', this.scrollToLineHandeler)
 
+    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.defaultKeyMap = CodeMirror.normalizeKeyMap({
+      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')
+          if (line.trimLeft().match(/^(-|\*|\+) (\[( |x)] )?$/)) {
+            cm.execCommand('goLineStart')
+            if (tabs) {
+              cm.execCommand('insertTab')
+            } else {
+              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')
+            } else {
+              cm.execCommand('insertSoftTab')
+            }
+          }
+        }
+      },
+      'Cmd-T': function (cm) {
+        // Do nothing
+      },
+      Enter: 'boostNewLineAndIndentContinueMarkdownList',
+      'Ctrl-C': cm => {
+        if (cm.getOption('keyMap').substr(0, 3) === 'vim') {
+          document.execCommand('copy')
+        }
+        return CodeMirror.Pass
+      }
+    })
+
+    this.value = this.props.value
     this.editor = CodeMirror(this.refs.root, {
       rulers: buildCMRulers(rulers, enableRulers),
       value: this.props.value,
@@ -109,42 +215,15 @@ export default class CodeEditor extends React.Component {
       scrollPastEnd: this.props.scrollPastEnd,
       inputStyle: 'textarea',
       dragDrop: false,
-      autoCloseBrackets: true,
-      extraKeys: {
-        Tab: function (cm) {
-          const cursor = cm.getCursor()
-          const line = cm.getLine(cursor.line)
-          if (cm.somethingSelected()) cm.indentSelection('add')
-          else {
-            const tabs = cm.getOption('indentWithTabs')
-            if (line.trimLeft().match(/^(-|\*|\+) (\[( |x)] )?$/)) {
-              cm.execCommand('goLineStart')
-              if (tabs) {
-                cm.execCommand('insertTab')
-              } else {
-                cm.execCommand('insertSoftTab')
-              }
-              cm.execCommand('goLineEnd')
-            } else {
-              if (tabs) {
-                cm.execCommand('insertTab')
-              } else {
-                cm.execCommand('insertSoftTab')
-              }
-            }
-          }
-        },
-        'Cmd-T': function (cm) {
-          // Do nothing
-        },
-        Enter: 'boostNewLineAndIndentContinueMarkdownList',
-        'Ctrl-C': (cm) => {
-          if (cm.getOption('keyMap').substr(0, 3) === 'vim') {
-            document.execCommand('copy')
-          }
-          return CodeMirror.Pass
-        }
-      }
+      foldGutter: true,
+      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+      autoCloseBrackets: {
+        pairs: '()[]{}\'\'""$$**``',
+        triples: '```"""\'\'\'',
+        explode: '[]{}``$$',
+        override: true
+      },
+      extraKeys: this.defaultKeyMap
     })
 
     this.setMode(this.props.mode)
@@ -166,6 +245,143 @@ export default class CodeEditor extends React.Component {
     CodeMirror.Vim.defineEx('wq', 'wq', this.quitEditor)
     CodeMirror.Vim.defineEx('qw', 'qw', this.quitEditor)
     CodeMirror.Vim.map('ZZ', ':q', 'normal')
+
+    this.textEditorInterface = new TextEditorInterface(this.editor)
+    this.tableEditor = new TableEditor(this.textEditorInterface)
+    eventEmitter.on('code:format-table', this.formatTable)
+
+    this.tableEditorOptions = options({
+      smartCursor: true
+    })
+
+    this.editorKeyMap = CodeMirror.normalizeKeyMap({
+      'Tab': () => { this.tableEditor.nextCell(this.tableEditorOptions) },
+      'Shift-Tab': () => { this.tableEditor.previousCell(this.tableEditorOptions) },
+      'Enter': () => { this.tableEditor.nextRow(this.tableEditorOptions) },
+      'Ctrl-Enter': () => { this.tableEditor.escape(this.tableEditorOptions) },
+      'Cmd-Enter': () => { this.tableEditor.escape(this.tableEditorOptions) },
+      'Shift-Ctrl-Left': () => { this.tableEditor.alignColumn(Alignment.LEFT, this.tableEditorOptions) },
+      'Shift-Cmd-Left': () => { this.tableEditor.alignColumn(Alignment.LEFT, this.tableEditorOptions) },
+      'Shift-Ctrl-Right': () => { this.tableEditor.alignColumn(Alignment.RIGHT, this.tableEditorOptions) },
+      'Shift-Cmd-Right': () => { this.tableEditor.alignColumn(Alignment.RIGHT, this.tableEditorOptions) },
+      'Shift-Ctrl-Up': () => { this.tableEditor.alignColumn(Alignment.CENTER, this.tableEditorOptions) },
+      'Shift-Cmd-Up': () => { this.tableEditor.alignColumn(Alignment.CENTER, this.tableEditorOptions) },
+      'Shift-Ctrl-Down': () => { this.tableEditor.alignColumn(Alignment.NONE, this.tableEditorOptions) },
+      'Shift-Cmd-Down': () => { this.tableEditor.alignColumn(Alignment.NONE, this.tableEditorOptions) },
+      'Ctrl-Left': () => { this.tableEditor.moveFocus(0, -1, this.tableEditorOptions) },
+      'Cmd-Left': () => { this.tableEditor.moveFocus(0, -1, this.tableEditorOptions) },
+      'Ctrl-Right': () => { this.tableEditor.moveFocus(0, 1, this.tableEditorOptions) },
+      'Cmd-Right': () => { this.tableEditor.moveFocus(0, 1, this.tableEditorOptions) },
+      'Ctrl-Up': () => { this.tableEditor.moveFocus(-1, 0, this.tableEditorOptions) },
+      'Cmd-Up': () => { this.tableEditor.moveFocus(-1, 0, this.tableEditorOptions) },
+      'Ctrl-Down': () => { this.tableEditor.moveFocus(1, 0, this.tableEditorOptions) },
+      'Cmd-Down': () => { this.tableEditor.moveFocus(1, 0, this.tableEditorOptions) },
+      'Ctrl-K Ctrl-I': () => { this.tableEditor.insertRow(this.tableEditorOptions) },
+      'Cmd-K Cmd-I': () => { this.tableEditor.insertRow(this.tableEditorOptions) },
+      'Ctrl-L Ctrl-I': () => { this.tableEditor.deleteRow(this.tableEditorOptions) },
+      'Cmd-L Cmd-I': () => { this.tableEditor.deleteRow(this.tableEditorOptions) },
+      'Ctrl-K Ctrl-J': () => { this.tableEditor.insertColumn(this.tableEditorOptions) },
+      'Cmd-K Cmd-J': () => { this.tableEditor.insertColumn(this.tableEditorOptions) },
+      'Ctrl-L Ctrl-J': () => { this.tableEditor.deleteColumn(this.tableEditorOptions) },
+      'Cmd-L Cmd-J': () => { this.tableEditor.deleteColumn(this.tableEditorOptions) },
+      'Alt-Shift-Ctrl-Left': () => { this.tableEditor.moveColumn(-1, this.tableEditorOptions) },
+      'Alt-Shift-Cmd-Left': () => { this.tableEditor.moveColumn(-1, this.tableEditorOptions) },
+      'Alt-Shift-Ctrl-Right': () => { this.tableEditor.moveColumn(1, this.tableEditorOptions) },
+      'Alt-Shift-Cmd-Right': () => { this.tableEditor.moveColumn(1, this.tableEditorOptions) },
+      'Alt-Shift-Ctrl-Up': () => { this.tableEditor.moveRow(-1, this.tableEditorOptions) },
+      'Alt-Shift-Cmd-Up': () => { this.tableEditor.moveRow(-1, this.tableEditorOptions) },
+      'Alt-Shift-Ctrl-Down': () => { this.tableEditor.moveRow(1, this.tableEditorOptions) },
+      'Alt-Shift-Cmd-Down': () => { this.tableEditor.moveRow(1, this.tableEditorOptions) }
+    })
+
+    if (this.props.enableTableEditor) {
+      this.editor.on('cursorActivity', this.editorActivityHandler)
+      this.editor.on('changes', this.editorActivityHandler)
+    }
+
+    this.setState({
+      clientWidth: this.refs.root.clientWidth
+    })
+  }
+
+  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
+
+          let cursorIndex
+          for (let j = 0; j < snippetLines.length; j++) {
+            cursorIndex = snippetLines[j].indexOf(templateCursorString)
+
+            if (cursorIndex !== -1) {
+              cursorLineNumber = j
+              cursorLinePosition = cursorIndex
+
+              break
+            }
+          }
+
+          cm.replaceRange(
+            snippets[i].content.replace(templateCursorString, ''),
+            wordBeforeCursor.range.from,
+            wordBeforeCursor.range.to
+          )
+          cm.setCursor({
+            line: cursor.line + cursorLineNumber,
+            ch: cursorLinePosition + cursor.ch - wordBeforeCursor.text.length
+          })
+        } 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 () {
@@ -181,6 +397,8 @@ export default class CodeEditor extends React.Component {
     this.editor.off('scroll', this.scrollHandler)
     const editorTheme = document.getElementById('editorTheme')
     editorTheme.removeEventListener('load', this.loadStyleHandler)
+
+    eventEmitter.off('code:format-table', this.formatTable)
   }
 
   componentDidUpdate (prevProps, prevState) {
@@ -203,7 +421,10 @@ export default class CodeEditor extends React.Component {
       needRefresh = true
     }
 
-    if (prevProps.enableRulers !== enableRulers || prevProps.rulers !== rulers) {
+    if (
+      prevProps.enableRulers !== enableRulers ||
+      prevProps.rulers !== rulers
+    ) {
       this.editor.setOption('rulers', buildCMRulers(rulers, enableRulers))
     }
 
@@ -223,13 +444,34 @@ export default class CodeEditor extends React.Component {
       this.editor.setOption('scrollPastEnd', this.props.scrollPastEnd)
     }
 
+    if (prevProps.enableTableEditor !== this.props.enableTableEditor) {
+      if (this.props.enableTableEditor) {
+        this.editor.on('cursorActivity', this.editorActivityHandler)
+        this.editor.on('changes', this.editorActivityHandler)
+      } else {
+        this.editor.off('cursorActivity', this.editorActivityHandler)
+        this.editor.off('changes', this.editorActivityHandler)
+      }
+
+      this.extraKeysMode = 'default'
+      this.editor.setOption('extraKeys', this.defaultKeyMap)
+    }
+
+    if (this.state.clientWidth !== this.refs.root.clientWidth) {
+      this.setState({
+        clientWidth: this.refs.root.clientWidth
+      })
+
+      needRefresh = true
+    }
+
     if (needRefresh) {
       this.editor.refresh()
     }
   }
 
   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)
@@ -243,10 +485,14 @@ export default class CodeEditor extends React.Component {
     }
   }
 
-  moveCursorTo (row, col) {
-  }
+  moveCursorTo (row, col) {}
 
-  scrollToLine (num) {
+  scrollToLine (event, num) {
+    const cursor = {
+      line: num,
+      ch: 1
+    }
+    this.editor.setCursor(cursor)
   }
 
   focus () {
@@ -273,30 +519,31 @@ 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 isURL = str => {
       const matcher = /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/
       return matcher.test(str)
     }
-    const isInLinkTag = (editor) => {
+    const isInLinkTag = editor => {
       const startCursor = editor.getCursor('start')
       const prevChar = editor.getRange(
         { line: startCursor.line, ch: startCursor.ch - 2 },
@@ -309,28 +556,32 @@ export default class CodeEditor extends React.Component {
       )
       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) && !isInLinkTag(editor)) {
+    const pastedHtml = clipboardData.getData('text/html')
+    if (pastedHtml !== '') {
+      this.handlePasteHtml(e, editor, pastedHtml)
+    } else if (dataTransferItem.type.match('image')) {
+      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) {
@@ -344,24 +595,77 @@ 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 this.decodeResponse(response)
-    }).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)
-    }).catch((e) => {
-      const value = editor.getValue()
-      const newValue = value.replace(taggedUrl, pastedTxt)
-      const cursor = editor.getCursor()
-      editor.setValue(newValue)
-      editor.setCursor(cursor)
+    })
+      .then(response => {
+        if (isImageReponse(response)) {
+          return this.mapImageResponse(response, pastedTxt)
+        } else {
+          return this.mapNormalResponse(response, pastedTxt)
+        }
+      })
+      .then(replacement => {
+        replaceTaggedUrl(replacement)
+      })
+      .catch(e => {
+        replaceTaggedUrl(pastedTxt)
+      })
+  }
+
+  handlePasteHtml (e, editor, pastedHtml) {
+    e.preventDefault()
+    const markdown = this.turndownService.turndown(pastedHtml)
+    editor.replaceSelection(markdown)
+  }
+
+  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 escapePipe = (str) => {
+            return str.replace('|', '\\|')
+          }
+          const linkWithTitle = `[${escapePipe(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)
+      }
     })
   }
 
@@ -370,10 +674,13 @@ export default class CodeEditor extends React.Component {
     const _charset = headers.has('content-type')
       ? this.extractContentTypeCharset(headers.get('content-type'))
       : undefined
-    return response.arrayBuffer().then((buff) => {
+    return response.arrayBuffer().then(buff => {
       return new Promise((resolve, reject) => {
         try {
-          const charset = _charset !== undefined && iconv.encodingExists(_charset) ? _charset : 'utf-8'
+          const charset = _charset !== undefined &&
+            iconv.encodingExists(_charset)
+            ? _charset
+            : 'utf-8'
           resolve(iconv.decode(new Buffer(buff), charset).toString())
         } catch (e) {
           reject(e)
@@ -383,32 +690,31 @@ export default class CodeEditor extends React.Component {
   }
 
   extractContentTypeCharset (contentType) {
-    return contentType.split(';').filter((str) => {
-      return str.trim().toLowerCase().startsWith('charset')
-    }).map((str) => {
-      return str.replace(/['"]/g, '').split('=')[1]
-    })[0]
+    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
-    let fontFamily = this.props.fontFamily
-    fontFamily = _.isString(fontFamily) && fontFamily.length > 0
-      ? [fontFamily].concat(defaultEditorFontFamily)
-      : defaultEditorFontFamily
+    const {className, fontSize} = this.props
+    const fontFamily = normalizeEditorFontFamily(this.props.fontFamily)
+    const width = this.props.width
     return (
       <div
-        className={className == null
-          ? 'CodeEditor'
-          : `CodeEditor ${className}`
-        }
+        className={className == null ? 'CodeEditor' : `CodeEditor ${className}`}
         ref='root'
         tabIndex='-1'
         style={{
-          fontFamily: fontFamily.join(', '),
-          fontSize: fontSize
+          fontFamily,
+          fontSize: fontSize,
+          width: width
         }}
-        onDrop={(e) => this.handleDropImage(e)}
+        onDrop={e => this.handleDropImage(e)}
       />
     )
   }

browser/components/MarkdownEditor.js

@@ -5,7 +5,8 @@ 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'
+import ConfigManager from 'browser/main/lib/ConfigManager'
 
 class MarkdownEditor extends React.Component {
   constructor (props) {
@@ -18,7 +19,7 @@ class MarkdownEditor extends React.Component {
     this.supportMdSelectionBold = [16, 17, 186]
 
     this.state = {
-      status: 'PREVIEW',
+      status: props.config.editor.switchPreview === 'RIGHTCLICK' ? props.config.editor.delfaultStatus : 'PREVIEW',
       renderValue: props.value,
       keyPressed: new Set(),
       isLocked: false
@@ -64,6 +65,10 @@ class MarkdownEditor extends React.Component {
     })
   }
 
+  setValue (value) {
+    this.refs.code.setValue(value)
+  }
+
   handleChange (e) {
     this.value = this.refs.code.value
     this.props.onChange(e)
@@ -72,9 +77,7 @@ class MarkdownEditor extends React.Component {
   handleContextMenu (e) {
     const { config } = this.props
     if (config.editor.switchPreview === 'RIGHTCLICK') {
-      const newStatus = this.state.status === 'PREVIEW'
-        ? 'CODE'
-        : 'PREVIEW'
+      const newStatus = this.state.status === 'PREVIEW' ? 'CODE' : 'PREVIEW'
       this.setState({
         status: newStatus
       }, () => {
@@ -84,6 +87,10 @@ class MarkdownEditor extends React.Component {
           this.refs.preview.focus()
         }
         eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+
+        const newConfig = Object.assign({}, config)
+        newConfig.editor.delfaultStatus = newStatus
+        ConfigManager.set(newConfig)
       })
     }
   }
@@ -140,8 +147,8 @@ class MarkdownEditor extends React.Component {
     e.preventDefault()
     e.stopPropagation()
     const idMatch = /checkbox-([0-9]+)/
-    const checkedMatch = /\[x\]/i
-    const uncheckedMatch = /\[ \]/
+    const checkedMatch = /^\s*[\+\-\*] \[x\]/i
+    const uncheckedMatch = /^\s*[\+\-\*] \[ \]/
     if (idMatch.test(e.target.getAttribute('id'))) {
       const lineIndex = parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
       const lines = this.refs.code.value
@@ -150,10 +157,10 @@ class MarkdownEditor extends React.Component {
       const targetLine = lines[lineIndex]
 
       if (targetLine.match(checkedMatch)) {
-        lines[lineIndex] = targetLine.replace(checkedMatch, '[ ]')
+        lines[lineIndex] = targetLine.replace(checkedMatch, '- [ ]')
       }
       if (targetLine.match(uncheckedMatch)) {
-        lines[lineIndex] = targetLine.replace(uncheckedMatch, '[x]')
+        lines[lineIndex] = targetLine.replace(uncheckedMatch, '- [x]')
       }
       this.refs.code.setValue(lines.join('\n'))
     }
@@ -223,7 +230,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
@@ -250,7 +257,7 @@ class MarkdownEditor extends React.Component {
             : 'codeEditor--hide'
           }
           ref='code'
-          mode='GitHub Flavored Markdown'
+          mode='Boost Flavored Markdown'
           value={value}
           theme={config.editor.theme}
           keyMap={config.editor.keyMap}
@@ -263,7 +270,9 @@ class MarkdownEditor extends React.Component {
           displayLineNumbers={config.editor.displayLineNumbers}
           scrollPastEnd={config.editor.scrollPastEnd}
           storageKey={storageKey}
+          noteKey={noteKey}
           fetchUrlTitle={config.editor.fetchUrlTitle}
+          enableTableEditor={config.editor.enableTableEditor}
           onChange={(e) => this.handleChange(e)}
           onBlur={(e) => this.handleBlur(e)}
         />
@@ -282,6 +291,8 @@ class MarkdownEditor extends React.Component {
           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)}
@@ -293,6 +304,10 @@ 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}
+          lineThroughCheckbox={config.preview.lineThroughCheckbox}
         />
       </div>
     )

browser/components/MarkdownEditor.styl

@@ -16,7 +16,6 @@
 .preview
   display block
   absolute top bottom left right
-  z-index 100
   background-color white
   height 100%
   width 100%

browser/components/MarkdownPreview.js

@@ -7,28 +7,51 @@ import 'codemirror-mode-elixir'
 import consts from 'browser/lib/consts'
 import Raphael from 'raphael'
 import flowchart from 'flowchart'
+import mermaidRender from './render/MermaidRender'
 import SequenceDiagram from 'js-sequence-diagrams'
+import Chart from 'chart.js'
 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'
+import yaml from 'js-yaml'
+import context from 'browser/lib/context'
+import i18n from 'browser/lib/i18n'
+import fs from 'fs'
+
+const { remote, shell } = require('electron')
+const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
 
-const { remote } = require('electron')
 const { app } = remote
 const path = require('path')
+const fileUrl = require('file-url')
+
 const dialog = remote.dialog
 
+const uri2path = require('file-uri-to-path')
+
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
-const appPath = 'file://' + (process.env.NODE_ENV === 'production'
-  ? app.getAppPath()
-  : path.resolve())
+const appPath = fileUrl(
+  process.env.NODE_ENV === 'production' ? app.getAppPath() : path.resolve()
+)
 const CSS_FILES = [
   `${appPath}/node_modules/katex/dist/katex.min.css`,
   `${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,12 +71,28 @@ 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');
+}
 ${markdownStyle}
+
 body {
   font-family: '${fontFamily.join("','")}';
   font-size: ${fontSize}px;
   ${scrollPastEnd && 'padding-bottom: 90vh;'}
 }
+@media print {
+  body {
+    padding-bottom: initial;
+  }
+}
 code {
   font-family: '${codeBlockFontFamily.join("','")}';
   background-color: rgba(0,0,0,0.04);
@@ -100,10 +139,40 @@ h2 {
 body p {
   white-space: normal;
 }
+
+@media print {
+  body[data-theme="${theme}"] {
+    color: #000;
+    background-color: #fff;
+  }
+  .clipboardButton {
+    display: none
+  }
+}
+
+${allowCustomCSS ? customCSS : ''}
 `
 }
 
-const { shell } = require('electron')
+const scrollBarStyle = `
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+`
+const scrollBarDarkStyle = `
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+`
+
 const OSX = global.process.platform === 'darwin'
 
 const defaultFontFamily = ['helvetica', 'arial', 'sans-serif']
@@ -111,19 +180,27 @@ if (!OSX) {
   defaultFontFamily.unshift('Microsoft YaHei')
   defaultFontFamily.unshift('meiryo')
 }
-const defaultCodeBlockFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
-
+const defaultCodeBlockFontFamily = [
+  'Monaco',
+  'Menlo',
+  'Ubuntu Mono',
+  'Consolas',
+  'source-code-pro',
+  'monospace'
+]
 export default class MarkdownPreview extends React.Component {
   constructor (props) {
     super(props)
 
-    this.contextMenuHandler = (e) => this.handleContextMenu(e)
-    this.mouseDownHandler = (e) => this.handleMouseDown(e)
-    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.contextMenuHandler = e => this.handleContextMenu(e)
+    this.mouseDownHandler = e => this.handleMouseDown(e)
+    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.checkboxClickHandler = e => this.handleCheckboxClick(e)
     this.saveAsTextHandler = () => this.handleSaveAsText()
     this.saveAsMdHandler = () => this.handleSaveAsMd()
     this.saveAsHtmlHandler = () => this.handleSaveAsHtml()
@@ -135,29 +212,14 @@ export default class MarkdownPreview extends React.Component {
   }
 
   initMarkdown () {
-    const { smartQuotes, sanitize } = this.props
+    const { smartQuotes, sanitize, breaks } = this.props
     this.markdown = new Markdown({
       typographer: smartQuotes,
-      sanitize
+      sanitize,
+      breaks
     })
   }
 
-  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)
-    }
-  }
-
   handleCheckboxClick (e) {
     this.props.onCheckboxClick(e)
   }
@@ -168,8 +230,32 @@ export default class MarkdownPreview extends React.Component {
     }
   }
 
-  handleContextMenu (e) {
-    this.props.onContextMenu(e)
+  handleContextMenu (event) {
+    // If a contextMenu handler was passed to us, use it instead of the self-defined one -> return
+    if (_.isFunction(this.props.onContextMenu)) {
+      this.props.onContextMenu(event)
+      return
+    }
+    // No contextMenu was passed to us -> execute our own link-opener
+    if (event.target.tagName.toLowerCase() === 'a') {
+      const href = event.target.href
+      const isLocalFile = href.startsWith('file:')
+      if (isLocalFile) {
+        const absPath = uri2path(href)
+        try {
+          if (fs.lstatSync(absPath).isFile()) {
+            context.popup([
+              {
+                label: i18n.__('Show in explorer'),
+                click: (e) => shell.showItemInFolder(absPath)
+              }
+            ])
+          }
+        } catch (e) {
+          console.log('Error while evaluating if the file is locally available', e)
+        }
+      }
+    }
   }
 
   handleDoubleClick (e) {
@@ -200,27 +286,83 @@ export default class MarkdownPreview extends React.Component {
   }
 
   handleSaveAsMd () {
-    this.exportAsDocument('md')
+    this.exportAsDocument('md', (noteContent, exportTasks) => {
+      let result = noteContent
+      if (this.props && this.props.storagePath && this.props.noteKey) {
+        const attachmentsAbsolutePaths = attachmentManagement.getAbsolutePathsOfAttachmentsInContent(
+          noteContent,
+          this.props.storagePath
+        )
+        attachmentsAbsolutePaths.forEach(attachment => {
+          exportTasks.push({
+            src: attachment,
+            dst: attachmentManagement.DESTINATION_FOLDER
+          })
+        })
+        result = attachmentManagement.removeStorageAndNoteReferences(
+          noteContent,
+          this.props.noteKey
+        )
+      }
+      return result
+    })
   }
 
   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, codeBlockTheme, lineNumber)
-      const body = this.markdown.render(noteContent)
+      const inlineStyles = buildStyle(
+        fontFamily,
+        fontSize,
+        codeBlockFontFamily,
+        lineNumber,
+        scrollPastEnd,
+        theme,
+        allowCustomCSS,
+        customCSS
+      )
+      let body = this.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://', '')
+      files.forEach(file => {
+        if (global.process.platform === 'win32') {
+          file = file.replace('file:///', '')
+        } else {
+          file = file.replace('file://', '')
+        }
         exportTasks.push({
           src: file,
           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) => {
+      files.forEach(file => {
         styles += `<link rel="stylesheet" href="css/${path.basename(file)}">`
       })
 
@@ -242,50 +384,76 @@ export default class MarkdownPreview extends React.Component {
 
   exportAsDocument (fileType, contentFormatter) {
     const options = {
-      filters: [
-        {name: 'Documents', extensions: [fileType]}
-      ],
+      filters: [{ name: 'Documents', extensions: [fileType] }],
       properties: ['openFile', 'createDirectory']
     }
 
-    dialog.showSaveDialog(remote.getCurrentWindow(), options,
-        (filename) => {
-          if (filename) {
-            const content = this.props.value
-            const storage = this.props.storagePath
+    dialog.showSaveDialog(remote.getCurrentWindow(), options, filename => {
+      if (filename) {
+        const content = this.props.value
+        const storage = this.props.storagePath
 
-            exportNote(storage, content, filename, contentFormatter)
-                .then((res) => {
-                  dialog.showMessageBox(remote.getCurrentWindow(), {type: 'info', message: `Exported to ${filename}`})
-                }).catch((err) => {
-                  dialog.showErrorBox('Export error', err ? err.message || err : 'Unexpected error during export')
-                  throw err
-                })
-          }
-        })
+        exportNote(storage, content, filename, contentFormatter)
+          .then(res => {
+            dialog.showMessageBox(remote.getCurrentWindow(), {
+              type: 'info',
+              message: `Exported to ${filename}`
+            })
+          })
+          .catch(err => {
+            dialog.showErrorBox(
+              'Export error',
+              err ? err.message || err : 'Unexpected error during export'
+            )
+            throw err
+          })
+      }
+    })
   }
 
   fixDecodedURI (node) {
-    if (node && node.children.length === 1 && typeof node.children[0] === 'string') {
+    if (
+      node &&
+      node.children.length === 1 &&
+      typeof node.children[0] === 'string'
+    ) {
       const { innerText, href } = node
 
-      node.innerText = mdurl.decode(href) === innerText
-        ? href
-        : innerText
+      node.innerText = mdurl.decode(href) === innerText ? href : innerText
+    }
+  }
+
+  getScrollBarStyle () {
+    const { theme } = this.props
+
+    switch (theme) {
+      case 'dark':
+      case 'solarized-dark':
+      case 'monokai':
+      case 'dracula':
+        return scrollBarDarkStyle
+      default:
+        return scrollBarStyle
     }
   }
 
   componentDidMount () {
     this.refs.root.setAttribute('sandbox', 'allow-scripts')
-    this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler)
+    this.refs.root.contentWindow.document.body.addEventListener(
+      'contextmenu',
+      this.contextMenuHandler
+    )
 
     let styles = `
       <style id='style'></style>
       <link rel="stylesheet" id="codeTheme">
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+      <style>
+        ${this.getScrollBarStyle()}
+      </style>
     `
 
-    CSS_FILES.forEach((file) => {
+    CSS_FILES.forEach(file => {
       styles += `<link rel="stylesheet" href="${file}">`
     })
 
@@ -293,12 +461,30 @@ export default class MarkdownPreview extends React.Component {
     this.rewriteIframe()
     this.applyStyle()
 
-    this.refs.root.contentWindow.document.addEventListener('mousedown', this.mouseDownHandler)
-    this.refs.root.contentWindow.document.addEventListener('mouseup', this.mouseUpHandler)
-    this.refs.root.contentWindow.document.addEventListener('dblclick', this.DoubleClickHandler)
-    this.refs.root.contentWindow.document.addEventListener('drop', this.preventImageDroppedHandler)
-    this.refs.root.contentWindow.document.addEventListener('dragover', this.preventImageDroppedHandler)
-    this.refs.root.contentWindow.document.addEventListener('scroll', this.scrollHandler)
+    this.refs.root.contentWindow.document.addEventListener(
+      'mousedown',
+      this.mouseDownHandler
+    )
+    this.refs.root.contentWindow.document.addEventListener(
+      'mouseup',
+      this.mouseUpHandler
+    )
+    this.refs.root.contentWindow.document.addEventListener(
+      'dblclick',
+      this.DoubleClickHandler
+    )
+    this.refs.root.contentWindow.document.addEventListener(
+      'drop',
+      this.preventImageDroppedHandler
+    )
+    this.refs.root.contentWindow.document.addEventListener(
+      'dragover',
+      this.preventImageDroppedHandler
+    )
+    this.refs.root.contentWindow.document.addEventListener(
+      'scroll',
+      this.scrollHandler
+    )
     eventEmitter.on('export:save-text', this.saveAsTextHandler)
     eventEmitter.on('export:save-md', this.saveAsMdHandler)
     eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
@@ -306,13 +492,34 @@ export default class MarkdownPreview extends React.Component {
   }
 
   componentWillUnmount () {
-    this.refs.root.contentWindow.document.body.removeEventListener('contextmenu', this.contextMenuHandler)
-    this.refs.root.contentWindow.document.removeEventListener('mousedown', this.mouseDownHandler)
-    this.refs.root.contentWindow.document.removeEventListener('mouseup', this.mouseUpHandler)
-    this.refs.root.contentWindow.document.removeEventListener('dblclick', this.DoubleClickHandler)
-    this.refs.root.contentWindow.document.removeEventListener('drop', this.preventImageDroppedHandler)
-    this.refs.root.contentWindow.document.removeEventListener('dragover', this.preventImageDroppedHandler)
-    this.refs.root.contentWindow.document.removeEventListener('scroll', this.scrollHandler)
+    this.refs.root.contentWindow.document.body.removeEventListener(
+      'contextmenu',
+      this.contextMenuHandler
+    )
+    this.refs.root.contentWindow.document.removeEventListener(
+      'mousedown',
+      this.mouseDownHandler
+    )
+    this.refs.root.contentWindow.document.removeEventListener(
+      'mouseup',
+      this.mouseUpHandler
+    )
+    this.refs.root.contentWindow.document.removeEventListener(
+      'dblclick',
+      this.DoubleClickHandler
+    )
+    this.refs.root.contentWindow.document.removeEventListener(
+      'drop',
+      this.preventImageDroppedHandler
+    )
+    this.refs.root.contentWindow.document.removeEventListener(
+      'dragover',
+      this.preventImageDroppedHandler
+    )
+    this.refs.root.contentWindow.document.removeEventListener(
+      'scroll',
+      this.scrollHandler
+    )
     eventEmitter.off('export:save-text', this.saveAsTextHandler)
     eventEmitter.off('export:save-md', this.saveAsMdHandler)
     eventEmitter.off('export:save-html', this.saveAsHtmlHandler)
@@ -321,45 +528,102 @@ 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) {
+    if (
+      prevProps.smartQuotes !== this.props.smartQuotes ||
+      prevProps.sanitize !== this.props.sanitize ||
+      prevProps.smartArrows !== this.props.smartArrows ||
+      prevProps.breaks !== this.props.breaks ||
+      prevProps.lineThroughCheckbox !== this.props.lineThroughCheckbox
+    ) {
       this.initMarkdown()
       this.rewriteIframe()
     }
-    if (prevProps.fontFamily !== this.props.fontFamily ||
+    if (
+      prevProps.fontFamily !== this.props.fontFamily ||
       prevProps.fontSize !== this.props.fontSize ||
       prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
       prevProps.codeBlockTheme !== this.props.codeBlockTheme ||
       prevProps.lineNumber !== this.props.lineNumber ||
       prevProps.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)
-        : defaultFontFamily
-    codeBlockFontFamily = _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
-        ? codeBlockFontFamily.split(',').map(fontName => fontName.trim()).concat(defaultCodeBlockFontFamily)
-        : defaultCodeBlockFontFamily
+      ? fontFamily
+          .split(',')
+          .map(fontName => fontName.trim())
+          .concat(defaultFontFamily)
+      : defaultFontFamily
+    codeBlockFontFamily = _.isString(codeBlockFontFamily) &&
+      codeBlockFontFamily.trim().length > 0
+      ? 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(
+      'codeTheme'
+    ).href = this.GetCodeThemeLink(codeBlockTheme)
+    this.getWindow().document.getElementById('style').innerHTML = buildStyle(
+      fontFamily,
+      fontSize,
+      codeBlockFontFamily,
+      lineNumber,
+      scrollPastEnd,
+      theme,
+      allowCustomCSS,
+      customCSS
+    )
   }
 
   GetCodeThemeLink (theme) {
-    theme = consts.THEMES.some((_theme) => _theme === theme) && theme !== 'default'
+    theme = consts.THEMES.some(_theme => _theme === theme) &&
+      theme !== 'default'
       ? theme
       : 'elegant'
     return theme.startsWith('solarized')
@@ -368,82 +632,92 @@ 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)
-    })
+    _.forEach(
+      this.refs.root.contentWindow.document.querySelectorAll(
+        'input[type="checkbox"]'
+      ),
+      el => {
+        el.removeEventListener('click', this.checkboxClickHandler)
+      }
+    )
 
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
-      el.removeEventListener('click', this.linkClickHandler)
-    })
+    _.forEach(
+      this.refs.root.contentWindow.document.querySelectorAll('a'),
+      el => {
+        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)
+    const renderedHTML = this.markdown.render(value)
+    attachmentManagement.migrateAttachments(value, 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)
+      }
+    )
 
-    const codeBlocks = value.match(/(```)(.|[\n])*?(```)/g)
-    if (codeBlocks !== null) {
-      codeBlocks.forEach((codeBlock) => {
-        value = value.replace(codeBlock, htmlTextHelper.encodeEntities(codeBlock))
-      })
-    }
-    this.refs.root.contentWindow.document.body.innerHTML = this.markdown.render(value)
+    _.forEach(
+      this.refs.root.contentWindow.document.querySelectorAll('a'),
+      el => {
+        this.fixDecodedURI(el)
+        el.addEventListener('click', this.linkClickHandler)
+      }
+    )
 
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
-      this.fixDecodedURI(el)
-      el.addEventListener('click', this.anchorClickHandler)
-    })
-
-    _.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) => {
-      el.addEventListener('click', this.linkClickHandler)
-    })
-
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('img'), (el) => {
-      el.src = this.markdown.normalizeLinkText(el.src)
-      if (!/\/:storage/.test(el.src)) return
-      el.src = `file:///${this.markdown.normalizeLinkText(path.join(storagePath, 'images', path.basename(el.src)))}`
-    })
-
-    codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme)
+    codeBlockTheme = consts.THEMES.some(_theme => _theme === codeBlockTheme)
       ? codeBlockTheme
       : 'default'
 
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.code code'), (el) => {
-      let syntax = CodeMirror.findModeByName(el.className)
-      if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
-      CodeMirror.requireMode(syntax.mode, () => {
-        const content = htmlTextHelper.decodeEntities(el.innerHTML)
-        const copyIcon = document.createElement('i')
-        copyIcon.innerHTML = '<button class="clipboardButton"><svg width="13" height="13" viewBox="0 0 1792 1792" ><path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/></svg></button>'
-        copyIcon.onclick = (e) => {
-          copy(content)
-          if (showCopyNotification) {
-            this.notify('Saved to Clipboard!', {
-              body: 'Paste it wherever you want!',
-              silent: true
-            })
+    _.forEach(
+      this.refs.root.contentWindow.document.querySelectorAll('.code code'),
+      el => {
+        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)
+          const copyIcon = document.createElement('i')
+          copyIcon.innerHTML =
+            '<button class="clipboardButton"><svg width="13" height="13" viewBox="0 0 1792 1792" ><path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/></svg></button>'
+          copyIcon.onclick = e => {
+            copy(content)
+            if (showCopyNotification) {
+              this.notify('Saved to Clipboard!', {
+                body: 'Paste it wherever you want!',
+                silent: true
+              })
+            }
           }
-        }
-        el.parentNode.appendChild(copyIcon)
-        el.innerHTML = ''
-        if (codeBlockTheme.indexOf('solarized') === 0) {
-          const [refThema, color] = codeBlockTheme.split(' ')
-          el.parentNode.className += ` cm-s-${refThema} cm-s-${color}`
-        } else {
-          el.parentNode.className += ` cm-s-${codeBlockTheme}`
-        }
-        CodeMirror.runMode(content, syntax.mime, el, {
-          tabSize: indentSize
+          el.parentNode.appendChild(copyIcon)
+          el.innerHTML = ''
+          if (codeBlockTheme.indexOf('solarized') === 0) {
+            const [refThema, color] = codeBlockTheme.split(' ')
+            el.parentNode.className += ` cm-s-${refThema} cm-s-${color}`
+          } else {
+            el.parentNode.className += ` cm-s-${codeBlockTheme}`
+          }
+          CodeMirror.runMode(content, syntax.mime, el, {
+            tabSize: indentSize
+          })
         })
-      })
-    })
+      }
+    )
     const opts = {}
     // if (this.props.theme === 'dark') {
     //   opts['font-color'] = '#DDD'
@@ -451,37 +725,76 @@ export default class MarkdownPreview extends React.Component {
     //   opts['element-color'] = '#DDD'
     //   opts['fill'] = '#3A404C'
     // }
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.flowchart'), (el) => {
-      Raphael.setWindow(this.getWindow())
-      try {
-        const diagram = flowchart.parse(htmlTextHelper.decodeEntities(el.innerHTML))
-        el.innerHTML = ''
-        diagram.drawSVG(el, opts)
-        _.forEach(el.querySelectorAll('a'), (el) => {
-          el.addEventListener('click', this.anchorClickHandler)
-        })
-      } catch (e) {
-        console.error(e)
-        el.className = 'flowchart-error'
-        el.innerHTML = 'Flowchart parse error: ' + e.message
+    _.forEach(
+      this.refs.root.contentWindow.document.querySelectorAll('.flowchart'),
+      el => {
+        Raphael.setWindow(this.getWindow())
+        try {
+          const diagram = flowchart.parse(
+            htmlTextHelper.decodeEntities(el.innerHTML)
+          )
+          el.innerHTML = ''
+          diagram.drawSVG(el, opts)
+          _.forEach(el.querySelectorAll('a'), el => {
+            el.addEventListener('click', this.linkClickHandler)
+          })
+        } catch (e) {
+          el.className = 'flowchart-error'
+          el.innerHTML = 'Flowchart parse error: ' + e.message
+        }
       }
-    })
+    )
 
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.sequence'), (el) => {
-      Raphael.setWindow(this.getWindow())
-      try {
-        const diagram = SequenceDiagram.parse(htmlTextHelper.decodeEntities(el.innerHTML))
-        el.innerHTML = ''
-        diagram.drawSVG(el, {theme: 'simple'})
-        _.forEach(el.querySelectorAll('a'), (el) => {
-          el.addEventListener('click', this.anchorClickHandler)
-        })
-      } catch (e) {
-        console.error(e)
-        el.className = 'sequence-error'
-        el.innerHTML = 'Sequence diagram parse error: ' + e.message
+    _.forEach(
+      this.refs.root.contentWindow.document.querySelectorAll('.sequence'),
+      el => {
+        Raphael.setWindow(this.getWindow())
+        try {
+          const diagram = SequenceDiagram.parse(
+            htmlTextHelper.decodeEntities(el.innerHTML)
+          )
+          el.innerHTML = ''
+          diagram.drawSVG(el, { theme: 'simple' })
+          _.forEach(el.querySelectorAll('a'), el => {
+            el.addEventListener('click', this.linkClickHandler)
+          })
+        } catch (e) {
+          el.className = 'sequence-error'
+          el.innerHTML = 'Sequence diagram parse error: ' + e.message
+        }
       }
-    })
+    )
+
+    _.forEach(
+      this.refs.root.contentWindow.document.querySelectorAll('.chart'),
+      el => {
+        try {
+          const format = el.attributes.getNamedItem('data-format').value
+          const chartConfig = format === 'yaml' ? yaml.load(el.innerHTML) : JSON.parse(el.innerHTML)
+          el.innerHTML = ''
+
+          const canvas = document.createElement('canvas')
+          el.appendChild(canvas)
+
+          const height = el.attributes.getNamedItem('data-height')
+          if (height && height.value !== 'undefined') {
+            el.style.height = height.value + 'vh'
+            canvas.height = height.value + 'vh'
+          }
+
+          const chart = new Chart(canvas, chartConfig)
+        } catch (e) {
+          el.className = 'chart-error'
+          el.innerHTML = 'chartjs diagram parse error: ' + e.message
+        }
+      }
+    )
+    _.forEach(
+      this.refs.root.contentWindow.document.querySelectorAll('.mermaid'),
+      el => {
+        mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme)
+      }
+    )
   }
 
   focus () {
@@ -493,7 +806,9 @@ export default class MarkdownPreview extends React.Component {
   }
 
   scrollTo (targetRow) {
-    const blocks = this.getWindow().document.querySelectorAll('body>[data-line]')
+    const blocks = this.getWindow().document.querySelectorAll(
+      'body>[data-line]'
+    )
 
     for (let index = 0; index < blocks.length; index++) {
       let block = blocks[index]
@@ -513,36 +828,73 @@ export default class MarkdownPreview extends React.Component {
 
   notify (title, options) {
     if (global.process.platform === 'win32') {
-      options.icon = path.join('file://', global.__dirname, '../../resources/app.png')
+      options.icon = path.join(
+        'file://',
+        global.__dirname,
+        '../../resources/app.png'
+      )
     }
     return new window.Notification(title, options)
   }
 
   handlelinkClick (e) {
-    const noteHash = e.target.href.split('/').pop()
+    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(noteHash)) {
-      eventEmitter.emit('list:jump', noteHash.replace(':note:', ''))
+    if (regexIsNoteLink.test(linkHash)) {
+      eventEmitter.emit('list:jump', linkHash.replace(':note:', ''))
+      return
     }
+
+    const regexIsLine = /^:line:[0-9]/
+    if (regexIsLine.test(linkHash)) {
+      const numberPattern = /\d+/g
+
+      const lineNumber = parseInt(linkHash.match(numberPattern)[0])
+      eventEmitter.emit('line:jump', lineNumber)
+      return
+    }
+
     // this will match the old link format storage.key-note.key
     // e.g.
     // 877f99c3268608328037-1c211eb7dcb463de6490
     const regexIsLegacyNoteLink = /^(.{20})-(.{20})$/
-    if (regexIsLegacyNoteLink.test(noteHash)) {
-      eventEmitter.emit('list:jump', noteHash.split('-')[1])
+    if (regexIsLegacyNoteLink.test(linkHash)) {
+      eventEmitter.emit('list:jump', linkHash.split('-')[1])
+      return
     }
+
+    // other case
+    shell.openExternal(href)
   }
 
   render () {
     const { className, style, tabIndex } = this.props
     return (
-      <iframe className={className != null
-          ? 'MarkdownPreview ' + className
-          : 'MarkdownPreview'
+      <iframe
+        className={
+          className != null ? 'MarkdownPreview ' + className : 'MarkdownPreview'
         }
         style={style}
         tabIndex={tabIndex}
@@ -557,9 +909,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,
-  smartQuotes: PropTypes.bool
+  smartQuotes: PropTypes.bool,
+  smartArrows: PropTypes.bool,
+  breaks: PropTypes.bool
 }

browser/components/MarkdownSplitEditor.js

@@ -14,6 +14,14 @@ 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
+    }
+  }
+
+  setValue (value) {
+    this.refs.code.setValue(value)
   }
 
   handleOnChange () {
@@ -22,6 +30,8 @@ class MarkdownSplitEditor extends React.Component {
   }
 
   handleScroll (e) {
+    if (!this.props.config.preview.scrollSync) return
+
     const previewDoc = _.get(this, 'refs.preview.refs.root.contentWindow.document')
     const codeDoc = _.get(this, 'refs.code.editor.doc')
     let srcTop, srcHeight, targetTop, targetHeight
@@ -68,8 +78,8 @@ class MarkdownSplitEditor extends React.Component {
     e.preventDefault()
     e.stopPropagation()
     const idMatch = /checkbox-([0-9]+)/
-    const checkedMatch = /\[x\]/i
-    const uncheckedMatch = /\[ \]/
+    const checkedMatch = /^\s*[\+\-\*] \[x\]/i
+    const uncheckedMatch = /^\s*[\+\-\*] \[ \]/
     if (idMatch.test(e.target.getAttribute('id'))) {
       const lineIndex = parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
       const lines = this.refs.code.value
@@ -78,30 +88,70 @@ class MarkdownSplitEditor extends React.Component {
       const targetLine = lines[lineIndex]
 
       if (targetLine.match(checkedMatch)) {
-        lines[lineIndex] = targetLine.replace(checkedMatch, '[ ]')
+        lines[lineIndex] = targetLine.replace(checkedMatch, '- [ ]')
       }
       if (targetLine.match(uncheckedMatch)) {
-        lines[lineIndex] = targetLine.replace(uncheckedMatch, '[x]')
+        lines[lineIndex] = targetLine.replace(uncheckedMatch, '- [x]')
       }
       this.refs.code.setValue(lines.join('\n'))
     }
   }
 
+  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'
-          mode='GitHub Flavored Markdown'
+          width={this.state.codeEditorWidthInPercent + '%'}
+          mode='Boost Flavored Markdown'
           value={value}
           theme={config.editor.theme}
           keyMap={config.editor.keyMap}
@@ -114,10 +164,15 @@ class MarkdownSplitEditor extends React.Component {
           rulers={config.editor.rulers}
           scrollPastEnd={config.editor.scrollPastEnd}
           fetchUrlTitle={config.editor.fetchUrlTitle}
+          enableTableEditor={config.editor.enableTableEditor}
           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'
@@ -130,6 +185,8 @@ class MarkdownSplitEditor extends React.Component {
           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'
@@ -138,6 +195,10 @@ 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}
+          lineThroughCheckbox={config.preview.lineThroughCheckbox}
        />
       </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.
@@ -23,18 +24,19 @@ const TagElement = ({ tagName }) => (
 /**
  * @description Tag element list component.
  * @param {Array|null} tags
+ * @param {boolean} showTagsAlphabetically
  * @return {React.Component}
  */
-const TagElementList = (tags) => {
+const TagElementList = (tags, showTagsAlphabetically) => {
   if (!isArray(tags)) {
     return []
   }
 
-  const tagElements = tags.map(tag => (
-    TagElement({tagName: tag})
-  ))
-
-  return tagElements
+  if (showTagsAlphabetically) {
+    return _.sortBy(tags).map(tag => TagElement({ tagName: tag }))
+  } else {
+    return tags.map(tag => TagElement({ tagName: tag }))
+  }
 }
 
 /**
@@ -56,12 +58,11 @@ const NoteItem = ({
   pathname,
   storageName,
   folderName,
-  viewType
+  viewType,
+  showTagsAlphabetically
 }) => (
-  <div styleName={isActive
-    ? 'item--active'
-    : 'item'
-  }
+  <div
+    styleName={isActive ? 'item--active' : 'item'}
     key={note.key}
     onClick={e => handleNoteClick(e, note.key)}
     onContextMenu={e => handleNoteContextMenu(e, note.key)}
@@ -71,42 +72,52 @@ const NoteItem = ({
     <div styleName='item-wrapper'>
       {note.type === 'SNIPPET_NOTE'
         ? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
-        : <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
-      }
+        : <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />}
       <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'>
+      <div styleName='item-middle'>
         <div styleName='item-middle-time'>{dateDisplay}</div>
         <div styleName='item-middle-app-meta'>
-          <div title={viewType === 'ALL' ? storageName : viewType === 'STORAGE' ? folderName : null} styleName='item-middle-app-meta-label'>
+          <div
+            title={
+              viewType === 'ALL'
+                ? storageName
+                : viewType === 'STORAGE' ? folderName : null
+            }
+            styleName='item-middle-app-meta-label'
+          >
             {viewType === 'ALL' && storageName}
             {viewType === 'STORAGE' && folderName}
           </div>
         </div>
-      </div>}
-
+      </div>
       <div styleName='item-bottom'>
         <div styleName='item-bottom-tagList'>
           {note.tags.length > 0
-            ? TagElementList(note.tags)
-            : <span style={{ fontStyle: 'italic', opacity: 0.5 }} styleName='item-bottom-tagList-empty'>No tags</span>
-          }
+            ? TagElementList(note.tags, showTagsAlphabetically)
+            : <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' /> : ''
-          }
+            ? <img
+              styleName='item-star'
+              src='../resources/icon/icon-starred.svg'
+              />
+            : ''}
           {note.isPinned && !pathname.match(/\/starred|\/trash/)
-            ? <i styleName='item-pin' className='fa fa-thumb-tack' /> : ''
-          }
+            ? <i styleName='item-pin' className='fa fa-thumb-tack' />
+            : ''}
           {note.type === 'MARKDOWN_NOTE'
             ? <TodoProcess todoStatus={getTodoStatus(note.content)} />
-            : ''
-          }
+            : ''}
         </div>
       </div>
     </div>

browser/components/NoteItem.styl

@@ -321,3 +321,149 @@ 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-active-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 10%)
+      color $ui-monokai-text-color
+    &:hover
+      // background-color alpha($ui-monokai-button--active-backgroundColor, 60%)
+      color #f92672
+      .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
+
+body[data-theme="dracula"]
+  .root
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .item
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      // background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
+      color $ui-dracula-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dracula-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
+        color $ui-dracula-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dracula-noteList-backgroundColor
+      color $ui-dracula-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dracula-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-dracula-noteList-backgroundColor, 10%)
+        color $ui-dracula-text-color
+
+  .item-wrapper
+    border-color alpha($ui-dracula-button-backgroundColor, 60%)
+
+  .item--active
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-button-backgroundColor
+    .item-wrapper
+      border-color transparent
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      color $ui-dracula-active-color
+    .item-bottom-tagList-item
+      background-color alpha(#f8f8f2, 10%)
+      color $ui-dracula-text-color
+    &:hover
+      // background-color alpha($ui-dracula-button--active-backgroundColor, 60%)
+      color #ff79c6
+      .item-bottom-tagList-item
+        background-color alpha(#f8f8f2, 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.
@@ -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,139 @@ 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-monokai-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
+
+body[data-theme="dracula"]
+  .root
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .item-simple
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      background-color alpha($ui-dracula-button-backgroundColor, 60%)
+      color $ui-dracula-text-color
+      .item-simple-title
+      .item-simple-title-empty
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-dracula-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#f8f8f2, 20%)
+        color $ui-dracula-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dracula-button--active-backgroundColor
+      color $ui-dracula-text-color
+      .item-simple-title
+      .item-simple-title-empty
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-dracula-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#f8f8f2, 10%)
+        color $ui-dracula-text-color
+
+  .item-simple--active
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-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-dracula-text-color
+    .item-simple-bottom-tagList-item
+      background-color alpha(#f8f8f2, 10%)
+      color $ui-dracula-text-color
+    &:hover
+      // background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-simple-bottom-tagList-item
+        background-color alpha(#f8f8f2, 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,25 @@ 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
+
+body[data-theme="dracula"]
+  .notification-area
+    background-color none
+
+  .notification-link
+    color $ui-dracula-text-color
+    border none
+    background-color $ui-dracula-button-backgroundColor
+    &:hover
+      color #ff79c6

browser/components/SideNavFilter.js

@@ -51,7 +51,7 @@ const SideNavFilter = ({
     </button>
 
     <button styleName={isTrashedActive ? 'menu-button-trash--active' : 'menu-button'}
-      onClick={handleTrashedButtonClick}
+      onClick={handleTrashedButtonClick} onContextMenu={handleFilterButtonContextMenu}
     >
       <div styleName='iconWrap'>
         <img src={isTrashedActive
@@ -60,7 +60,7 @@ const SideNavFilter = ({
         }
         />
       </div>
-      <span onContextMenu={handleFilterButtonContextMenu} styleName='menu-button-label'>{i18n.__('Trash')}</span>
+      <span styleName='menu-button-label'>{i18n.__('Trash')}</span>
       <span styleName='counters'>{counterDelNote}</span>
     </button>
 

browser/components/SideNavFilter.styl

@@ -18,7 +18,7 @@
 .iconWrap
   width 20px
   text-align center
-  
+
 .counters
   float right
   color $ui-inactive-text-color
@@ -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
@@ -222,4 +221,88 @@ body[data-theme="solarized-dark"]
       background-color $ui-solarized-dark-button-backgroundColor
       color $ui-solarized-dark-text-color
       .menu-button-label
-        color $ui-solarized-dark-text-color
+        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
+
+body[data-theme="dracula"]
+  .menu-button
+    &:active
+      background-color $ui-dracula-noteList-backgroundColor
+      color $ui-dracula-text-color
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+
+  .menu-button--active
+    color $ui-dracula-text-color
+    background-color $ui-dracula-button-backgroundColor
+    .menu-button-label
+      color $ui-dracula-text-color
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+      .menu-button-label
+        color $ui-dracula-text-color
+
+  .menu-button-star--active
+    color $ui-dracula-text-color
+    background-color $ui-dracula-button-backgroundColor
+    .menu-button-label
+      color $ui-dracula-text-color
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+      .menu-button-label
+        color $ui-dracula-text-color
+
+  .menu-button-trash--active
+    color $ui-dracula-text-color
+    background-color $ui-dracula-button-backgroundColor
+    .menu-button-label
+      color $ui-dracula-text-color
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+      .menu-button-label
+        color $ui-dracula-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

@@ -136,4 +136,92 @@ body[data-theme="solarized-dark"]
     color $ui-solarized-dark-text-color
 
   .deleteButton
-    color alpha($ui-solarized-dark-text-color, 30%)
+    color alpha($ui-solarized-dark-text-color, 30%)
+
+body[data-theme="monokai"]
+  .root
+    color $ui-monokai-text-color
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-monokai-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-monokai-text-color
+        &:hover
+          background-color darken($ui-monokai-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-monokai-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .root--active
+    color $ui-monokai-text-color
+    border-color $ui-monokai-borderColor
+    &:hover
+      background-color $ui-monokai-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-monokai-text-color
+        &:hover
+          background-color darken($ui-monokai-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-monokai-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .button
+    border none
+    color $ui-monokai-text-color
+    background-color transparent
+    transition color background-color 0.15s
+    border-left 4px solid transparent
+    &:hover
+      color $ui-monokai-text-color
+      background-color $ui-monokai-noteDetail-backgroundColor
+
+  .input
+    background-color $ui-monokai-noteDetail-backgroundColor
+    color $ui-monokai-text-color
+
+  .deleteButton
+    color alpha($ui-monokai-text-color, 30%)
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-dracula-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-dracula-text-color
+        &:hover
+          background-color darken($ui-dracula-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-dracula-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .root--active
+    color $ui-dracula-text-color
+    border-color $ui-dracula-borderColor
+    &:hover
+      background-color $ui-dracula-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-dracula-text-color
+        &:hover
+          background-color darken($ui-dracula-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-dracula-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .button
+    border none
+    color $ui-dracula-text-color
+    background-color transparent
+    transition color background-color 0.15s
+    border-left 4px solid transparent
+    &:hover
+      color $ui-dracula-text-color
+      background-color $ui-dracula-noteDetail-backgroundColor
+
+  .input
+    background-color $ui-dracula-noteDetail-backgroundColor
+    color $ui-dracula-text-color
+
+  .deleteButton
+    color alpha($ui-dracula-text-color, 30%)

browser/components/StorageItem.js

@@ -54,9 +54,8 @@ const StorageItem = ({
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
     >
-      {!isFolded && (
-        <DraggableIcon className={styles['folderList-item-reorder']} />
-      )}
+      {!isFolded &&
+        <DraggableIcon className={styles['folderList-item-reorder']} />}
       <span
         styleName={
           isFolded ? 'folderList-item-name--folded' : 'folderList-item-name'
@@ -72,12 +71,10 @@ const StorageItem = ({
           : folderName}
       </span>
       {!isFolded &&
-        _.isNumber(noteCount) && (
-          <span styleName='folderList-item-noteCount'>{noteCount}</span>
-        )}
-      {isFolded && (
-        <span styleName='folderList-item-tooltip'>{folderName}</span>
-      )}
+        _.isNumber(noteCount) &&
+        <span styleName='folderList-item-noteCount'>{noteCount}</span>}
+      {isFolded &&
+        <span styleName='folderList-item-tooltip'>{folderName}</span>}
     </button>
   )
 }

browser/components/StorageItem.styl

@@ -58,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
@@ -138,3 +138,41 @@ 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
+
+body[data-theme="dracula"]
+  .folderList-item
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+      color $ui-dracula-text-color
+    &:active
+      color $ui-dracula-text-color
+      background-color $ui-dracula-button-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-dracula-text-color
+    background-color $ui-dracula-button-backgroundColor
+    &:active
+      background-color $ui-dracula-button-backgroundColor
+    &:hover
+      color $ui-dracula-text-color
+      background-color $ui-dracula-button-backgroundColor

browser/components/StorageList.js

@@ -7,18 +7,18 @@ import styles from './StorageList.styl'
 import CSSModules from 'browser/lib/CSSModules'
 
 /**
-* @param {Array} storgaeList
+* @param {Array} storageList
 */
 
-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>
+      <div styleName='storageList-empty'>No storage mount.</div>
     )}
   </div>
 )
 
 StorageList.propTypes = {
-  storgaeList: PropTypes.arrayOf(PropTypes.element).isRequired
+  storageList: PropTypes.arrayOf(PropTypes.element).isRequired
 }
 export default CSSModules(StorageList, styles)

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, handleContextMenu, isActive, isRelated, count}) => (
+  <div styleName='tagList-itemContainer' onContextMenu={e => handleContextMenu(e, name)}>
+    {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 !== 0 ? 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.js

@@ -12,7 +12,7 @@ import styles from './TodoListPercentage.styl'
  */
 
 const TodoListPercentage = ({
-  percentageOfTodo
+  percentageOfTodo, onClearCheckboxClick
 }) => (
   <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
     <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
@@ -20,11 +20,15 @@ const TodoListPercentage = ({
         <p styleName='percentageText'>{percentageOfTodo}%</p>
       </div>
     </div>
+    <div styleName='todoClear'>
+      <p styleName='todoClearText' onClick={(e) => onClearCheckboxClick(e)}>clear</p>
+    </div>
   </div>
 )
 
 TodoListPercentage.propTypes = {
-  percentageOfTodo: PropTypes.number.isRequired
+  percentageOfTodo: PropTypes.number.isRequired,
+  onClearCheckboxClick: PropTypes.func.isRequired
 }
 
 export default CSSModules(TodoListPercentage, styles)

browser/components/TodoListPercentage.styl

@@ -1,4 +1,5 @@
 .percentageBar
+  display: flex
   position absolute
   top 72px
   right 0px
@@ -30,6 +31,20 @@
   color #f4f4f4
   font-weight 600
 
+.todoClear
+  display flex
+  justify-content: flex-end
+  position absolute
+  z-index 120
+  width 100%
+  height 100%
+  padding 2px 10px
+
+.todoClearText
+  color #f4f4f4
+  cursor pointer
+  font-weight 500
+
 body[data-theme="dark"]
   .percentageBar
     background-color #444444
@@ -39,7 +54,10 @@ body[data-theme="dark"]
 
   .percentageText
     color $ui-dark-text-color
-    
+  
+  .todoClearText
+    color $ui-dark-text-color
+
 body[data-theme="solarized-dark"]
   .percentageBar
     background-color #002b36
@@ -48,4 +66,30 @@ body[data-theme="solarized-dark"]
     background-color: #2aa198
 
   .percentageText
-    color #fdf6e3
+    color #fdf6e3
+
+  .todoClearText
+    color #fdf6e3
+
+body[data-theme="monokai"]
+  .percentageBar
+    background-color: $ui-monokai-borderColor
+
+  .progressBar
+    background-color $ui-monokai-active-color
+
+  .percentageText
+    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .percentageBar
+    background-color $ui-dracula-borderColor
+
+  .progressBar
+    background-color: $ui-dracula-active-color
+
+  .percentageText
+    color $ui-dracula-text-color
+
+  .percentageText
+    color $ui-dracula-text-color

browser/components/markdown.styl

@@ -68,7 +68,7 @@ body
     padding 5px
     margin -5px
     border-radius 5px
-  .flowchart-error, .sequence-error
+  .flowchart-error, .sequence-error .chart-error
     background-color errorBackgroundColor
     color errorTextColor
     padding 5px
@@ -80,6 +80,9 @@ li
     &.checked
       text-decoration line-through
       opacity 0.5
+  &.taskListItem.checked
+    text-decoration line-through
+    opacity 0.5
 div.math-rendered
   text-align center
 .math-failed
@@ -199,7 +202,6 @@ ol
   &>li>ul, &>li>ol
     margin 0
 code
-  color #CC305F
   padding 0.2em 0.4em
   background-color #f7f7f7
   border-radius 3px
@@ -207,41 +209,39 @@ code
   text-decoration none
   margin-right 2px
 pre
-  padding 0.5em !important
+  padding 0.5rem !important
   border solid 1px #D1D1D1
   border-radius 5px
   overflow-x auto
-  margin 0 0 1em
+  margin 0 0 1rem
   display flex
   line-height 1.4em
-  &.flowchart, &.sequence
-    display flex
-    justify-content center
-    background-color white
-  &.CodeMirror
-    height initial
-    flex-wrap wrap
-    &>code
-      flex 1
-      overflow-x auto
   code
     background-color inherit
     margin 0
     padding 0
     border none
     border-radius 0
+  &.CodeMirror
+    height initial
+    flex-wrap wrap
+    &>code
+      flex 1
+      overflow-x auto
+  &.mermaid svg
+    max-width 100% !important
   &>span.filename
-    width 100%
-    border-radius: 5px 0px 0px 0px
-    margin -8px 100% 8px -8px
-    padding 0px 6px
+    margin -0.5rem 100% 0.5rem -0.5rem
+    padding 0.125rem 0.375rem
     background-color #777;
     color white
+    &:empty
+      display none
   &>span.lineNumber
     display none
     font-size 1em
-    padding 0.5em 0
-    margin -0.5em 0.5em -0.5em -0.5em
+    padding 0.5rem 0
+    margin -0.5rem 0.5rem -0.5rem -0.5rem
     border-right 1px solid
     text-align right
     border-top-left-radius 4px
@@ -258,6 +258,7 @@ table
   display block
   width 100%
   margin 0 0 1em
+  overflow-x auto
   thead
     tr
       background-color tableHeadBgColor
@@ -294,6 +295,127 @@ 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-weight: normal;
+    font-style: normal;
+    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: {color: #0288D1, icon: "note"},
+    hint: {color: #009688, icon: "info_outline"},
+    danger: {color: #c2185b, icon: "block"},
+    caution: {color: #ffa726, icon: "warning"},
+    error: {color: #d32f2f, icon: "error_outline"},
+    attention: {color: #455a64, icon: "priority_high"}
+}
+
+for name, val in admonition_types
+    .admonition.{name}
+        @extend $admonition
+        border-left-color: val[color]
+
+    .admonition.{name}>.admonition-title
+        @extend $admonition-title
+        border-bottom-color: .1rem solid rgba(val[color], 0.2)
+        background-color: rgba(val[color], 0.2)
+
+    .admonition.{name}>.admonition-title:before
+        @extend $admonition-icon
+        color: val[color]
+        content: val[icon]
+
+dl
+  margin 2rem 0
+  padding 0
+  display flex
+  width 100%
+  flex-wrap wrap
+  align-items flex-start
+  border-bottom 1px solid borderColor
+  background-color tableHeadBgColor
+
+dt
+  border-top 1px solid borderColor
+  font-weight bold
+  text-align right
+  overflow hidden
+  flex-basis 20%
+  padding 0.4rem 0.9rem
+  box-sizing border-box
+
+dd
+  border-top 1px solid borderColor
+  flex-basis 80%
+  padding 0.4rem 0.9rem
+  min-height 2.5rem
+  background-color $ui-noteDetail-backgroundColor
+  box-sizing border-box
+
+dd + dd
+  margin-left 20%
+
+pre.fence
+  flex-wrap wrap
+
+  .chart, .flowchart, .mermaid, .sequence
+    display flex
+    justify-content center
+    background-color white
+    max-width 100%
+    flex-grow 1
+
+    canvas, svg
+      max-width 100% !important
+
 themeDarkBackground = darken(#21252B, 10%)
 themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
@@ -344,6 +466,14 @@ body[data-theme="dark"]
   kbd
     background-color themeDarkBorder
     color themeDarkText
+  dl
+    border-color themeDarkBorder
+    background-color themeDarkTableHead
+  dt
+    border-color themeDarkBorder
+  dd
+    border-color themeDarkBorder
+    background-color themeDarkPreview
 
 themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor
 themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
@@ -371,3 +501,85 @@ body[data-theme="solarized-dark"]
         border-color themeSolarizedDarkTableBorder
         &:last-child
           border-right solid 1px themeSolarizedDarkTableBorder
+  dl
+    border-color themeDarkBorder
+    background-color themeSolarizedDarkTableHead
+  dt
+    border-color themeDarkBorder
+  dd
+    border-color themeDarkBorder
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+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
+  dl
+    border-color themeDarkBorder
+    background-color themeMonokaiTableHead
+  dt
+    border-color themeDarkBorder
+  dd
+    border-color themeDarkBorder
+    background-color $ui-monokai-noteDetail-backgroundColor
+
+themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
+themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
+themeDraculaTableHead = themeDraculaTableEven
+themeDraculaTableBorder = themeDarkBorder
+
+body[data-theme="dracula"]
+  color $ui-dracula-text-color
+  border-color themeDarkBorder
+  background-color $ui-dracula-noteDetail-backgroundColor
+  table
+    thead
+      tr
+        background-color themeDraculaTableHead
+      th
+        border-color themeDraculaTableBorder
+        &:last-child
+          border-right solid 1px themeDraculaTableBorder
+    tbody
+      tr:nth-child(2n + 1)
+        background-color themeDraculaTableOdd
+      tr:nth-child(2n)
+        background-color themeDraculaTableEven
+      td
+        border-color themeDraculaTableBorder
+        &:last-child
+          border-right solid 1px themeDraculaTableBorder
+  kbd
+    background-color themeDarkBackground
+  dl
+    border-color themeDarkBorder
+    background-color themeDraculaTableHead
+  dt
+    border-color themeDarkBorder
+  dd
+    border-color themeDarkBorder
+    background-color $ui-dracula-noteDetail-backgroundColor

browser/components/render/MermaidRender.js

@@ -0,0 +1,43 @@
+import mermaidAPI from 'mermaid'
+
+// fixes bad styling in the mermaid dark theme
+const darkThemeStyling = `
+.loopText tspan {
+  fill: white;
+}`
+
+function getRandomInt (min, max) {
+  return Math.floor(Math.random() * (max - min)) + min
+}
+
+function getId () {
+  const pool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
+  let id = 'm-'
+  for (let i = 0; i < 7; i++) {
+    id += pool[getRandomInt(0, 16)]
+  }
+  return id
+}
+
+function render (element, content, theme) {
+  try {
+    const height = element.attributes.getNamedItem('data-height')
+    if (height && height.value !== 'undefined') {
+      element.style.height = height.value + 'vh'
+    }
+    let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
+    mermaidAPI.initialize({
+      theme: isDarkTheme ? 'dark' : 'default',
+      themeCSS: isDarkTheme ? darkThemeStyling : '',
+      useMaxWidth: false
+    })
+    mermaidAPI.render(getId(), content, (svgGraph) => {
+      element.innerHTML = svgGraph
+    })
+  } catch (e) {
+    element.className = 'mermaid-error'
+    element.innerHTML = 'mermaid diagram parse error: ' + e.message
+  }
+}
+
+export default render

browser/lib/Languages.js

@@ -0,0 +1,85 @@
+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 (PT-BR)',
+    locale: 'pt-BR'
+  },
+  {
+    name: 'Portuguese (PT-PT)',
+    locale: 'pt-PT'
+  },
+  {
+    name: 'Russian',
+    locale: 'ru'
+  },
+  {
+    name: 'Spanish',
+    locale: 'es-ES'
+  }, {
+    name: 'Turkish',
+    locale: 'tr'
+  }, {
+    name: 'Thai',
+    locale: 'th'
+  }
+]
+
+module.exports = {
+  getLocales () {
+    return languages.reduce(function (localeList, locale) {
+      localeList.push(locale.locale)
+      return localeList
+    }, [])
+  },
+  getLanguages () {
+    return languages
+  }
+}
+

browser/lib/TextEditorInterface.js

@@ -0,0 +1,113 @@
+import { Point } from '@susisu/mte-kernel'
+
+export default class TextEditorInterface {
+  constructor (editor) {
+    this.editor = editor
+    this.doc = editor.getDoc()
+    this.transaction = false
+  }
+
+  getCursorPosition () {
+    const { line, ch } = this.doc.getCursor()
+    return new Point(line, ch)
+  }
+
+  setCursorPosition (pos) {
+    this.doc.setCursor({
+      line: pos.row,
+      ch: pos.column
+    })
+  }
+
+  setSelectionRange (range) {
+    this.doc.setSelection(
+      { line: range.start.row, ch: range.start.column },
+      { line: range.end.row, ch: range.end.column }
+    )
+  }
+
+  getLastRow () {
+    return this.doc.lineCount() - 1
+  }
+
+  acceptsTableEdit () {
+    return true
+  }
+
+  getLine (row) {
+    return this.doc.getLine(row)
+  }
+
+  insertLine (row, line) {
+    const lastRow = this.getLastRow()
+    if (row > lastRow) {
+      const lastLine = this.getLine(lastRow)
+      this.doc.replaceRange(
+        '\n' + line,
+        { line: lastRow, ch: lastLine.length },
+        { line: lastRow, ch: lastLine.length }
+      )
+    } else {
+      this.doc.replaceRange(
+        line + '\n',
+        { line: row, ch: 0 },
+        { line: row, ch: 0 }
+      )
+    }
+  }
+
+  deleteLine (row) {
+    const lastRow = this.getLastRow()
+    if (row >= lastRow) {
+      if (lastRow > 0) {
+        const preLastLine = this.getLine(lastRow - 1)
+        const lastLine = this.getLine(lastRow)
+        this.doc.replaceRange(
+          '',
+          { line: lastRow - 1, ch: preLastLine.length },
+          { line: lastRow, ch: lastLine.length }
+        )
+      } else {
+        const lastLine = this.getLine(lastRow)
+        this.doc.replaceRange(
+          '',
+          { line: lastRow, ch: 0 },
+          { line: lastRow, ch: lastLine.length }
+        )
+      }
+    } else {
+      this.doc.replaceRange(
+        '',
+        { line: row, ch: 0 },
+        { line: row + 1, ch: 0 }
+      )
+    }
+  }
+
+  replaceLines (startRow, endRow, lines) {
+    const lastRow = this.getLastRow()
+    if (endRow > lastRow) {
+      const lastLine = this.getLine(lastRow)
+      this.doc.replaceRange(
+        lines.join('\n'),
+        { line: startRow, ch: 0 },
+        { line: lastRow, ch: lastLine.length }
+      )
+    } else {
+      this.doc.replaceRange(
+        lines.join('\n') + '\n',
+        { line: startRow, ch: 0 },
+        { line: endRow, ch: 0 }
+      )
+    }
+  }
+
+  transact (func) {
+    this.transaction = true
+    func()
+    this.transaction = false
+    if (this.onDidFinishTransaction) {
+      this.onDidFinishTransaction.call(undefined)
+    }
+  }
+}

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,16 @@ const consts = {
     'Dodger Blue',
     'Violet Eggplant'
   ],
-  THEMES: ['default'].concat(themes)
+  THEMES: ['default'].concat(themes),
+  SNIPPET_FILE: snippetFile,
+  DEFAULT_EDITOR_FONT_FAMILY: [
+    'Monaco',
+    'Menlo',
+    'Ubuntu Mono',
+    'Consolas',
+    'source-code-pro',
+    'monospace'
+  ]
 }
 
 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/findNoteTitle.js

@@ -1,19 +1,37 @@
-export function findNoteTitle (value) {
+export function findNoteTitle (value, enableFrontMatterTitle, frontMatterTitleField = 'title') {
   const splitted = value.split('\n')
   let title = null
   let isInsideCodeBlock = false
 
-  splitted.some((line, index) => {
-    const trimmedLine = line.trim()
-    const trimmedNextLine = splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()
-    if (trimmedLine.match('```')) {
-      isInsideCodeBlock = !isInsideCodeBlock
+  if (splitted[0] === '---') {
+    let line = 0
+    while (++line < splitted.length) {
+      if (enableFrontMatterTitle && splitted[line].startsWith(frontMatterTitleField + ':')) {
+        title = splitted[line].substring(frontMatterTitleField.length + 1).trim()
+
+        break
+      }
+      if (splitted[line] === '---') {
+        splitted.splice(0, line + 1)
+
+        break
+      }
     }
-    if (isInsideCodeBlock === false && (trimmedLine.match(/^# +/) || trimmedNextLine.match(/^=+$/))) {
-      title = trimmedLine
-      return true
-    }
-  })
+  }
+
+  if (title === null) {
+    splitted.some((line, index) => {
+      const trimmedLine = line.trim()
+      const trimmedNextLine = splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()
+      if (trimmedLine.match('```')) {
+        isInsideCodeBlock = !isInsideCodeBlock
+      }
+      if (isInsideCodeBlock === false && (trimmedLine.match(/^# +/) || trimmedNextLine.match(/^=+$/))) {
+        title = trimmedLine
+        return true
+      }
+    })
+  }
 
   if (title === null) {
     title = ''

browser/lib/getTodoStatus.js

@@ -5,10 +5,10 @@ export function getTodoStatus (content) {
 
   splitted.forEach((line) => {
     const trimmedLine = line.trim()
-    if (trimmedLine.match(/^[\+\-\*] \[(\s|x)\] ./)) {
+    if (trimmedLine.match(/^[\+\-\*] \[(\s|x)\] ./i)) {
       numberOfTodo++
     }
-    if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
+    if (trimmedLine.match(/^[\+\-\*] \[x\] ./i)) {
       numberOfCompletedTodo++
     }
   })

browser/lib/i18n.js

@@ -1,8 +1,16 @@
+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: ['en', 'sq', 'zh-CN', 'zh-TW', 'da', 'fr', 'de', 'hu', 'ja', 'ko', 'no', 'pl', 'pt', 'es'],
+  locales: getLocales(),
   extension: '.json',
+  directory: process.env.NODE_ENV === 'production'
+    ? path.join(app.getAppPath(), './locales')
+    : path.resolve('./locales'),
   devMode: false
 })
 

browser/lib/markdown-it-deflist.js

@@ -0,0 +1,232 @@
+'use strict'
+
+module.exports = function definitionListPlugin (md) {
+  var isSpace = md.utils.isSpace
+
+  // Search `[:~][\n ]`, returns next pos after marker on success
+  // or -1 on fail.
+  function skipMarker (state, line) {
+    let start = state.bMarks[line] + state.tShift[line]
+    const max = state.eMarks[line]
+
+    if (start >= max) { return -1 }
+
+    // Check bullet
+    const marker = state.src.charCodeAt(start++)
+    if (marker !== 0x7E/* ~ */ && marker !== 0x3A/* : */) { return -1 }
+
+    const pos = state.skipSpaces(start)
+
+    // require space after ":"
+    if (start === pos) { return -1 }
+
+    return start
+  }
+
+  function markTightParagraphs (state, idx) {
+    const level = state.level + 2
+
+    let i
+    let l
+    for (i = idx + 2, l = state.tokens.length - 2; i < l; i++) {
+      if (state.tokens[i].level === level && state.tokens[i].type === 'paragraph_open') {
+        state.tokens[i + 2].hidden = true
+        state.tokens[i].hidden = true
+        i += 2
+      }
+    }
+  }
+
+  function deflist (state, startLine, endLine, silent) {
+    var ch,
+      contentStart,
+      ddLine,
+      dtLine,
+      itemLines,
+      listLines,
+      listTokIdx,
+      max,
+      newEndLine,
+      nextLine,
+      offset,
+      oldDDIndent,
+      oldIndent,
+      oldLineMax,
+      oldParentType,
+      oldSCount,
+      oldTShift,
+      oldTight,
+      pos,
+      prevEmptyEnd,
+      tight,
+      token
+
+    if (silent) {
+      // quirk: validation mode validates a dd block only, not a whole deflist
+      if (state.ddIndent < 0) { return false }
+      return skipMarker(state, startLine) >= 0
+    }
+
+    nextLine = startLine + 1
+    if (nextLine >= endLine) { return false }
+
+    if (state.isEmpty(nextLine)) {
+      nextLine++
+      if (nextLine >= endLine) { return false }
+    }
+
+    if (state.sCount[nextLine] < state.blkIndent) { return false }
+    contentStart = skipMarker(state, nextLine)
+    if (contentStart < 0) { return false }
+
+    // Start list
+    listTokIdx = state.tokens.length
+    tight = true
+
+    token = state.push('dl_open', 'dl', 1)
+    token.map = listLines = [ startLine, 0 ]
+
+    //
+    // Iterate list items
+    //
+
+    dtLine = startLine
+    ddLine = nextLine
+
+    // One definition list can contain multiple DTs,
+    // and one DT can be followed by multiple DDs.
+    //
+    // Thus, there is two loops here, and label is
+    // needed to break out of the second one
+    //
+    /* eslint no-labels:0,block-scoped-var:0 */
+    OUTER:
+    for (;;) {
+      prevEmptyEnd = false
+
+      token = state.push('dt_open', 'dt', 1)
+      token.map = [ dtLine, dtLine ]
+
+      token = state.push('inline', '', 0)
+      token.map = [ dtLine, dtLine ]
+      token.content = state.getLines(dtLine, dtLine + 1, state.blkIndent, false).trim()
+      token.children = []
+
+      token = state.push('dt_close', 'dt', -1)
+
+      for (;;) {
+        token = state.push('dd_open', 'dd', 1)
+        token.map = itemLines = [ ddLine, 0 ]
+
+        pos = contentStart
+        max = state.eMarks[ddLine]
+        offset = state.sCount[ddLine] + contentStart - (state.bMarks[ddLine] + state.tShift[ddLine])
+
+        while (pos < max) {
+          ch = state.src.charCodeAt(pos)
+
+          if (isSpace(ch)) {
+            if (ch === 0x09) {
+              offset += 4 - offset % 4
+            } else {
+              offset++
+            }
+          } else {
+            break
+          }
+
+          pos++
+        }
+
+        contentStart = pos
+
+        oldTight = state.tight
+        oldDDIndent = state.ddIndent
+        oldIndent = state.blkIndent
+        oldTShift = state.tShift[ddLine]
+        oldSCount = state.sCount[ddLine]
+        oldParentType = state.parentType
+        state.blkIndent = state.ddIndent = state.sCount[ddLine] + 2
+        state.tShift[ddLine] = contentStart - state.bMarks[ddLine]
+        state.sCount[ddLine] = offset
+        state.tight = true
+        state.parentType = 'deflist'
+
+        newEndLine = ddLine
+        while (++newEndLine < endLine && (state.sCount[newEndLine] >= state.sCount[ddLine] || state.isEmpty(newEndLine))) {
+        }
+
+        oldLineMax = state.lineMax
+        state.lineMax = newEndLine
+
+        state.md.block.tokenize(state, ddLine, newEndLine, true)
+
+        state.lineMax = oldLineMax
+
+        // If any of list item is tight, mark list as tight
+        if (!state.tight || prevEmptyEnd) {
+          tight = false
+        }
+        // Item become loose if finish with empty line,
+        // but we should filter last element, because it means list finish
+        prevEmptyEnd = (state.line - ddLine) > 1 && state.isEmpty(state.line - 1)
+
+        state.tShift[ddLine] = oldTShift
+        state.sCount[ddLine] = oldSCount
+        state.tight = oldTight
+        state.parentType = oldParentType
+        state.blkIndent = oldIndent
+        state.ddIndent = oldDDIndent
+
+        token = state.push('dd_close', 'dd', -1)
+
+        itemLines[1] = nextLine = state.line
+
+        if (nextLine >= endLine) { break OUTER }
+
+        if (state.sCount[nextLine] < state.blkIndent) { break OUTER }
+        contentStart = skipMarker(state, nextLine)
+        if (contentStart < 0) { break }
+
+        ddLine = nextLine
+
+        // go to the next loop iteration:
+        // insert DD tag and repeat checking
+      }
+
+      if (nextLine >= endLine) { break }
+      dtLine = nextLine
+
+      if (state.isEmpty(dtLine)) { break }
+      if (state.sCount[dtLine] < state.blkIndent) { break }
+
+      ddLine = dtLine + 1
+      if (ddLine >= endLine) { break }
+      if (state.isEmpty(ddLine)) { ddLine++ }
+      if (ddLine >= endLine) { break }
+
+      if (state.sCount[ddLine] < state.blkIndent) { break }
+      contentStart = skipMarker(state, ddLine)
+      if (contentStart < 0) { break }
+
+      // go to the next loop iteration:
+      // insert DT and DD tags and repeat checking
+    }
+
+    // Finilize list
+    token = state.push('dl_close', 'dl', -1)
+
+    listLines[1] = nextLine
+
+    state.line = nextLine
+
+    // mark paragraphs tight if needed
+    if (tight) {
+      markTightParagraphs(state, listTokIdx)
+    }
+
+    return true
+  }
+
+  md.block.ruler.before('paragraph', 'deflist', deflist, { alt: [ 'paragraph', 'reference' ] })
+}

browser/lib/markdown-it-fence.js

@@ -0,0 +1,132 @@
+'use strict'
+
+module.exports = function (md, renderers, defaultRenderer) {
+  const paramsRE = /^[ \t]*([\w+#-]+)?(?:\(((?:\s*\w[-\w]*(?:=(?:'(?:.*?[^\\])?'|"(?:.*?[^\\])?"|(?:[^'"][^\s]*)))?)*)\))?(?::([^:]*)(?::(\d+))?)?\s*$/
+
+  function fence (state, startLine, endLine) {
+    let pos = state.bMarks[startLine] + state.tShift[startLine]
+    let max = state.eMarks[startLine]
+
+    if (state.sCount[startLine] - state.blkIndent >= 4 || pos + 3 > max) {
+      return false
+    }
+
+    const marker = state.src.charCodeAt(pos)
+    if (!(marker === 96 || marker === 126)) {
+      return false
+    }
+
+    let mem = pos
+    pos = state.skipChars(pos, marker)
+
+    let len = pos - mem
+    if (len < 3) {
+      return false
+    }
+
+    const markup = state.src.slice(mem, pos)
+    const params = state.src.slice(pos, max)
+
+    let nextLine = startLine
+    let haveEndMarker = false
+
+    while (true) {
+      nextLine++
+      if (nextLine >= endLine) {
+        break
+      }
+
+      pos = mem = state.bMarks[nextLine] + state.tShift[nextLine]
+      max = state.eMarks[nextLine]
+
+      if (pos < max && state.sCount[nextLine] < state.blkIndent) {
+        break
+      }
+      if (state.src.charCodeAt(pos) !== marker || state.sCount[nextLine] - state.blkIndent >= 4) {
+        continue
+      }
+
+      pos = state.skipChars(pos, marker)
+
+      if (pos - mem < len) {
+        continue
+      }
+
+      pos = state.skipSpaces(pos)
+
+      if (pos >= max) {
+        haveEndMarker = true
+        break
+      }
+    }
+
+    len = state.sCount[startLine]
+    state.line = nextLine + (haveEndMarker ? 1 : 0)
+
+    const parameters = {}
+    let langType = ''
+    let fileName = ''
+    let firstLineNumber = 1
+
+    let match = paramsRE.exec(params)
+    if (match) {
+      if (match[1]) {
+        langType = match[1]
+      }
+      if (match[3]) {
+        fileName = match[3]
+      }
+      if (match[4]) {
+        firstLineNumber = parseInt(match[4], 10)
+      }
+
+      if (match[2]) {
+        const params = match[2]
+        const regex = /(\w[-\w]*)(?:=(?:'(.*?[^\\])?'|"(.*?[^\\])?"|([^'"][^\s]*)))?/g
+
+        let name, value
+        while ((match = regex.exec(params))) {
+          name = match[1]
+          value = match[2] || match[3] || match[4] || null
+
+          const height = /^(\d+)h$/.exec(name)
+          if (height && !value) {
+            parameters.height = height[1]
+          } else {
+            parameters[name] = value
+          }
+        }
+      }
+    }
+
+    let token
+    if (renderers[langType]) {
+      token = state.push(`${langType}_fence`, 'div', 0)
+    } else {
+      token = state.push('_fence', 'code', 0)
+    }
+
+    token.langType = langType
+    token.fileName = fileName
+    token.firstLineNumber = firstLineNumber
+    token.parameters = parameters
+
+    token.content = state.getLines(startLine + 1, nextLine, len, true)
+    token.markup = markup
+    token.map = [startLine, state.line]
+
+    return true
+  }
+
+  md.block.ruler.before('fence', '_fence', fence, {
+    alt: ['paragraph', 'reference', 'blockquote', 'list']
+  })
+
+  for (const name in renderers) {
+    md.renderer.rules[`${name}_fence`] = (tokens, index) => renderers[name](tokens[index])
+  }
+
+  if (defaultRenderer) {
+    md.renderer.rules['_fence'] = (tokens, index) => defaultRenderer(tokens[index])
+  }
+}

browser/lib/markdown-it-frontmatter.js

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

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

@@ -1,6 +1,8 @@
 'use strict'
 
 import sanitizeHtml from 'sanitize-html'
+import { escapeHtmlCharacters } from './utils'
+import url from 'url'
 
 module.exports = function sanitizePlugin (md, options) {
   options = options || {}
@@ -8,16 +10,115 @@ module.exports = function sanitizePlugin (md, 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)
+        state.tokens[tokenIdx].content = sanitizeHtml(
+          state.tokens[tokenIdx].content,
+          options
+        )
+      }
+      if (state.tokens[tokenIdx].type === '_fence') {
+        // escapeHtmlCharacters has better performance
+        state.tokens[tokenIdx].content = escapeHtmlCharacters(
+          state.tokens[tokenIdx].content,
+          { skipSingleQuote: true }
+        )
       }
       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)
+            inlineTokens[childIdx].content = sanitizeInline(
+              inlineTokens[childIdx].content,
+              options
+            )
           }
         }
       }
     }
   })
 }
+
+const tagRegex = /<([A-Z][A-Z0-9]*)\s*((?:\s*[A-Z][A-Z0-9]*(?:=("|')(?:[^\3]+?)\3)?)*)\s*\/?>|<\/([A-Z][A-Z0-9]*)\s*>/i
+const attributesRegex = /([A-Z][A-Z0-9]*)(?:=("|')([^\2]+?)\2)?/ig
+
+function sanitizeInline (html, options) {
+  let match = tagRegex.exec(html)
+  if (!match) {
+    return ''
+  }
+
+  const { allowedTags, allowedAttributes, selfClosing, allowedSchemesAppliedToAttributes } = options
+
+  if (match[1] !== undefined) {
+    // opening tag
+    const tag = match[1].toLowerCase()
+    if (allowedTags.indexOf(tag) === -1) {
+      return ''
+    }
+
+    const attributes = match[2]
+
+    let attrs = ''
+    let name
+    let value
+
+    while ((match = attributesRegex.exec(attributes))) {
+      name = match[1].toLowerCase()
+      value = match[3]
+
+      if (allowedAttributes['*'].indexOf(name) !== -1 || (allowedAttributes[tag] && allowedAttributes[tag].indexOf(name) !== -1)) {
+        if (allowedSchemesAppliedToAttributes.indexOf(name) !== -1) {
+          if (naughtyHRef(value, options) || (tag === 'iframe' && name === 'src' && naughtyIFrame(value, options))) {
+            continue
+          }
+        }
+
+        attrs += ` ${name}`
+        if (match[2]) {
+          attrs += `="${value}"`
+        }
+      }
+    }
+
+    if (selfClosing.indexOf(tag) === -1) {
+      return '<' + tag + attrs + '>'
+    } else {
+      return '<' + tag + attrs + ' />'
+    }
+  } else {
+    // closing tag
+    if (allowedTags.indexOf(match[4].toLowerCase()) !== -1) {
+      return html
+    } else {
+      return ''
+    }
+  }
+}
+
+function naughtyHRef (href, options) {
+  // href = href.replace(/[\x00-\x20]+/g, '')
+  href = href.replace(/<\!\-\-.*?\-\-\>/g, '')
+
+  const matches = href.match(/^([a-zA-Z]+)\:/)
+  if (!matches) {
+    if (href.match(/^[\/\\]{2}/)) {
+      return !options.allowProtocolRelative
+    }
+
+    // No scheme
+    return false
+  }
+
+  const scheme = matches[1].toLowerCase()
+
+  return options.allowedSchemes.indexOf(scheme) === -1
+}
+
+function naughtyIFrame (src, options) {
+  try {
+    const parsed = url.parse(src, false, true)
+
+    return options.allowedIframeHostnames.index(parsed.hostname) === -1
+  } catch (e) {
+    return true
+  }
+}

browser/lib/markdown-toc-generator.js

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

browser/lib/markdown.js

@@ -2,10 +2,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 katex from 'katex'
-import {lastFindInArray} from './utils'
+import { lastFindInArray } from './utils'
+import ee from 'browser/main/lib/eventEmitter'
 
 function createGutter (str, firstLineNumber) {
   if (Number.isNaN(firstLineNumber)) firstLineNumber = 1
@@ -25,27 +27,7 @@ class Markdown {
       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)
-
-        if (langType === 'flowchart') {
-          return `<pre class="flowchart">${str}</pre>`
-        }
-        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>'
-      },
+      breaks: config.preview.breaks,
       sanitize: 'STRICT'
     }
 
@@ -98,7 +80,11 @@ class Markdown {
           'iframe': ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
           'input': ['type', 'id', 'checked']
         },
-        allowedIframeHostnames: ['www.youtube.com']
+        allowedIframeHostnames: ['www.youtube.com'],
+        selfClosing: [ 'img', 'br', 'hr', 'input' ],
+        allowedSchemes: [ 'http', 'https', 'ftp', 'mailto' ],
+        allowedSchemesAppliedToAttributes: [ 'href', 'src', 'cite' ],
+        allowProtocolRelative: true
       })
     }
 
@@ -141,15 +127,76 @@ class Markdown {
       }
     })
     this.md.use(require('markdown-it-kbd'))
+    this.md.use(require('markdown-it-admonition'), {types: ['note', 'hint', 'attention', 'caution', 'danger', 'error']})
+    this.md.use(require('markdown-it-abbr'))
+    this.md.use(require('markdown-it-sub'))
+    this.md.use(require('markdown-it-sup'))
+    this.md.use(require('./markdown-it-deflist'))
+    this.md.use(require('./markdown-it-frontmatter'))
+
+    this.md.use(require('./markdown-it-fence'), {
+      chart: token => {
+        if (token.parameters.hasOwnProperty('yaml')) {
+          token.parameters.format = 'yaml'
+        }
+
+        return `<pre class="fence" data-line="${token.map[0]}">
+          <span class="filename">${token.fileName}</span>
+          <div class="chart" data-height="${token.parameters.height}" data-format="${token.parameters.format || 'json'}">${token.content}</div>
+        </pre>`
+      },
+      flowchart: token => {
+        return `<pre class="fence" data-line="${token.map[0]}">
+          <span class="filename">${token.fileName}</span>
+          <div class="flowchart" data-height="${token.parameters.height}">${token.content}</div>
+        </pre>`
+      },
+      mermaid: token => {
+        return `<pre class="fence" data-line="${token.map[0]}">
+          <span class="filename">${token.fileName}</span>
+          <div class="mermaid" data-height="${token.parameters.height}">${token.content}</div>
+        </pre>`
+      },
+      sequence: token => {
+        return `<pre class="fence" data-line="${token.map[0]}">
+          <span class="filename">${token.fileName}</span>
+          <div class="sequence" data-height="${token.parameters.height}">${token.content}</div>
+        </pre>`
+      }
+    }, token => {
+      return `<pre class="code CodeMirror" data-line="${token.map[0]}">
+        <span class="filename">${token.fileName}</span>
+        ${createGutter(token.content, token.firstLineNumber)}
+        <code class="${token.langType}">${token.content}</code>
+      </pre>`
+    })
 
     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 `http://www.plantuml.com/plantuml/svg/${zippedCode}`
+        return `${serverAddress}/${zippedCode}`
+      }
+    })
+
+    // Ditaa support
+    this.md.use(require('markdown-it-plantuml'), {
+      openMarker: '@startditaa',
+      closeMarker: '@endditaa',
+      generateSource: function (umlCode) {
+        const stripTrailingSlash = (url) => url.endsWith('/') ? url.slice(0, -1) : url
+        // Currently PlantUML server doesn't support Ditaa in SVG, so we set the format as PNG at the moment.
+        const serverAddress = stripTrailingSlash(config.preview.plantUMLServerAddress) + '/png'
+        const s = unescape(encodeURIComponent(umlCode))
+        const zippedCode = deflate.encode64(
+          deflate.zip_deflate(`@startditaa\n${s}\n@endditaa`, 9)
+        )
+        return `${serverAddress}/${zippedCode}`
       }
     })
 
@@ -195,7 +242,11 @@ class Markdown {
             if (!liToken.attrs) {
               liToken.attrs = []
             }
-            liToken.attrs.push(['class', 'taskListItem'])
+            if (config.preview.lineThroughCheckbox) {
+              liToken.attrs.push(['class', `taskListItem${match[1] !== ' ' ? ' checked' : ''}`])
+            } else {
+              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>`
         }
@@ -211,14 +262,21 @@ class Markdown {
       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 'dd_open':
+          case 'dt_open':
+          case 'heading_open':
+          case 'list_item_open':
+          case 'paragraph_open':
           case 'table_open':
             token.attrPush(['data-line', token.map[0]])
         }
@@ -234,11 +292,6 @@ class Markdown {
     if (!_.isString(content)) content = ''
     return this.md.render(content)
   }
-
-  normalizeLinkText (linkText) {
-    return this.md.normalizeLinkText(linkText)
-  }
 }
 
 export default Markdown
-

browser/lib/newNote.js

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

browser/lib/normalizeEditorFontFamily.js

@@ -0,0 +1,9 @@
+import consts from 'browser/lib/consts'
+import isString from 'lodash/isString'
+
+export default function normalizeEditorFontFamily (fontFamily) {
+  const defaultEditorFontFamily = consts.DEFAULT_EDITOR_FONT_FAMILY
+  return isString(fontFamily) && fontFamily.length > 0
+    ? [fontFamily].concat(defaultEditorFontFamily).join(', ')
+    : defaultEditorFontFamily.join(', ')
+}

browser/lib/search.js

@@ -4,39 +4,30 @@ 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) || note.snippets.some((snippet) => {
+        return snippet.name.match(wordRegExp) || snippet.content.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,134 @@ export function lastFindInArray (array, callback) {
   }
 }
 
-export default {
-  lastFindInArray
+export function escapeHtmlCharacters (
+  html,
+  opt = { detectCodeBlock: false, skipSingleQuote: false }
+) {
+  const matchHtmlRegExp = /["'&<>]/g
+  const matchCodeBlockRegExp = /```/g
+  const escapes = ['&quot;', '&amp;', '&#39;', '&lt;', '&gt;']
+  let match = null
+  const replaceAt = (str, index, replace) =>
+    str.substr(0, index) +
+    replace +
+    str.substr(index + replace.length - (replace.length - 1))
+
+  while ((match = matchHtmlRegExp.exec(html)) !== null) {
+    const current = { char: match[0], index: match.index }
+    const codeBlockIndexs = []
+    let openCodeBlock = null
+    // if the detectCodeBlock option is activated then this function should skip
+    // characters that needed to be escape but located in code block
+    if (opt.detectCodeBlock) {
+      // The first type of code block is lines that start with 4 spaces
+      // Here we check for the \n character located before the character that
+      // needed to be escape. It means we check for the begining of the line that
+      // contain that character, then we check if there are 4 spaces next to the
+      // \n character (the line start with 4 spaces)
+      let previousLineEnd = current.index - 1
+      while (html[previousLineEnd] !== '\n' && previousLineEnd !== -1) {
+        previousLineEnd--
+      }
+      // 4 spaces means this character is in a code block
+      if (
+        html[previousLineEnd + 1] === ' ' &&
+        html[previousLineEnd + 2] === ' ' &&
+        html[previousLineEnd + 3] === ' ' &&
+        html[previousLineEnd + 4] === ' '
+      ) {
+        // skip the current character
+        continue
+      }
+      // The second type of code block is lines that wrapped in ```
+      // We will get the position of each ```
+      // then push it into an array
+      // then the array returned will be like this:
+      // [startCodeblock, endCodeBlock, startCodeBlock, endCodeBlock]
+      while ((openCodeBlock = matchCodeBlockRegExp.exec(html)) !== null) {
+        codeBlockIndexs.push(openCodeBlock.index)
+      }
+      let shouldSkipChar = false
+      // we loop through the array of positions
+      // we skip 2 element as the i index position is the position of ``` that
+      // open the codeblock and the i + 1 is the position of the ``` that close
+      // the code block
+      for (let i = 0; i < codeBlockIndexs.length; i += 2) {
+        // the i index position is the position of the ``` that open code block
+        // so we have to + 2 as that position is the position of the first ` in the ````
+        // but we need to make sure that the position current character is larger
+        // that the last ` in the ``` that open the code block so we have to take
+        // the position of the first ` and + 2
+        // the i + 1 index position is the closing ``` so the char must less than it
+        if (
+          current.index > codeBlockIndexs[i] + 2 &&
+          current.index < codeBlockIndexs[i + 1]
+        ) {
+          // skip it
+          shouldSkipChar = true
+          break
+        }
+      }
+      if (shouldSkipChar) {
+        // skip the current character
+        continue
+      }
+    }
+    // otherwise, escape it !!!
+    if (current.char === '&') {
+      // when escaping character & we have to be becareful as the & could be a part
+      // of an escaped character like &quot; will be came &amp;quot;
+      let nextStr = ''
+      let nextIndex = current.index
+      let escapedStr = false
+      // maximum length of an escaped string is 5. For example ('&quot;')
+      // we take the next 5 character of the next string if it is one of the string:
+      // ['&quot;', '&amp;', '&#39;', '&lt;', '&gt;'] then we will not escape the & character
+      // as it is a part of the escaped string and should not be escaped
+      while (nextStr.length <= 5) {
+        nextStr += html[nextIndex]
+        nextIndex++
+        if (escapes.indexOf(nextStr) !== -1) {
+          escapedStr = true
+          break
+        }
+      }
+      if (!escapedStr) {
+        // this & char is not a part of an escaped string
+        html = replaceAt(html, current.index, '&amp;')
+      }
+    } else if (current.char === '"') {
+      html = replaceAt(html, current.index, '&quot;')
+    } else if (current.char === "'" && !opt.skipSingleQuote) {
+      html = replaceAt(html, current.index, '&#39;')
+    } else if (current.char === '<') {
+      html = replaceAt(html, current.index, '&lt;')
+    } else if (current.char === '>') {
+      html = replaceAt(html, current.index, '&gt;')
+    }
+  }
+  return 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

@@ -23,10 +23,24 @@ body[data-theme="dark"]
     border-left 1px solid $ui-dark-borderColor
   .empty-message
     color $ui-dark-inactive-text-color
-    
+
 body[data-theme="solarized-dark"]
   .root
     background-color $ui-solarized-dark-noteDetail-backgroundColor
     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
+
+body[data-theme="dracula"]
+  .root
+    background-color $ui-dracula-noteDetail-backgroundColor
+    border-left 1px solid $ui-dracula-borderColor
+  .empty-message
+    color $ui-dracula-text-color

browser/main/Detail/FolderSelect.styl

@@ -36,7 +36,7 @@
   height 34px
   width 20px
   line-height 34px
-  
+
 .search-input
   vertical-align middle
   position relative
@@ -71,7 +71,7 @@
   overflow ellipsis
   cursor pointer
   &:hover
-    background-color $ui-button--hover-backgroundColor 
+    background-color $ui-button--hover-backgroundColor
 
 .search-optionList-item--active
   @extend .search-optionList-item
@@ -133,3 +133,55 @@ 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
+
+body[data-theme="dracula"]
+ .root
+    color $ui-dracula-text-color
+    &:hover
+      color #f8f8f2
+      background-color $ui-dark-button--hover-backgroundColor
+      border-color $ui-dracula-borderColor
+
+  .search-optionList
+    color #f8f8f2
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-button-backgroundColor
+
+  .search-optionList-item
+    &:hover
+      background-color lighten($ui-dracula-button--hover-backgroundColor, 15%)
+
+  .search-optionList-item--active
+    background-color $ui-dracula-button--active-backgroundColor
+    color $ui-dracula-button--active-color
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+      color $ui-dracula-button--active-color
+  .search-optionList-item-name-surfix
+    color $ui-dracula-inactive-text-color

browser/main/Detail/FullscreenButton.js

@@ -4,12 +4,14 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './FullscreenButton.styl'
 import i18n from 'browser/lib/i18n'
 
+const OSX = global.process.platform === 'darwin'
+const hotkey = (OSX ? i18n.__('Command(⌘)') : i18n.__('Ctrl(^)')) + '+B'
 const FullscreenButton = ({
  onClick
 }) => (
   <button styleName='control-fullScreenButton' title={i18n.__('Fullscreen')} onMouseDown={(e) => onClick(e)}>
     <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
-    <span styleName='tooltip'>{i18n.__('Fullscreen')}</span>
+    <span styleName='tooltip'>{i18n.__('Fullscreen')}({hotkey})</span>
   </button>
 )
 

browser/main/Detail/InfoPanel.styl

@@ -11,6 +11,7 @@
 .control-infoButton-panel
   z-index 200
   margin-top 0px
+  top: 50px
   right 25px
   position absolute
   padding 20px 25px 0 25px
@@ -32,6 +33,7 @@
 .control-infoButton-panel-trash
   z-index 200
   margin-top 0px
+  top 50px
   right 0px
   position absolute
   padding 20px 25px 0 25px
@@ -215,3 +217,83 @@ 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
+
+body[data-theme="dracula"]
+  .control-infoButton-panel
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control-infoButton-panel-trash
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .modification-date
+    color $ui-dracula-text-color
+
+  .modification-date-desc
+    color $ui-inactive-text-color
+
+  .infoPanel-defaul-count
+    color $ui-dracula-text-color
+
+  .infoPanel-sub-count
+    color $ui-inactive-text-color
+
+  .infoPanel-default
+    color $ui-dracula-text-color
+
+  .infoPanel-sub
+    color $ui-inactive-text-color
+
+  .infoPanel-noteLink
+    background-color alpha($ui-dracula-borderColor, 20%)
+    color $ui-dracula-text-color
+
+  [id=export-wrap]
+    button
+      color $ui-dark-inactive-text-color
+      &:hover
+        background-color alpha($ui-dracula-borderColor, 20%)
+        color $ui-dracula-text-color
+    p
+      color $ui-dark-inactive-text-color
+      &:hover
+        color $ui-dracula-text-color

browser/main/Detail/MarkdownNoteDetail.js

@@ -28,6 +28,8 @@ 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'
+import markdownToc from 'browser/lib/markdown-toc-generator'
 
 class MarkdownNoteDetail extends React.Component {
   constructor (props) {
@@ -46,6 +48,7 @@ class MarkdownNoteDetail extends React.Component {
     this.dispatchTimer = null
 
     this.toggleLockButton = this.handleToggleLockButton.bind(this)
+    this.generateToc = () => this.handleGenerateToc()
   }
 
   focus () {
@@ -54,10 +57,18 @@ 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)
+    })
+    ee.on('hotkey:deletenote', this.handleDeleteNote.bind(this))
+    ee.on('code:generate-toc', this.generateToc)
   }
 
   componentWillReceiveProps (nextProps) {
-    if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
+    const isNewNote = nextProps.note.key !== this.props.note.key
+    const hasDeletedTags = nextProps.note.tags.length < this.props.note.tags.length
+    if (!this.state.isMovingNote && (isNewNote || hasDeletedTags)) {
       if (this.saveQueue != null) this.saveNow()
       this.setState({
         note: Object.assign({}, nextProps.note)
@@ -70,6 +81,7 @@ class MarkdownNoteDetail extends React.Component {
 
   componentWillUnmount () {
     ee.off('topbar:togglelockbutton', this.toggleLockButton)
+    ee.off('code:generate-toc', this.generateToc)
     if (this.saveQueue != null) this.saveNow()
   }
 
@@ -82,7 +94,7 @@ class MarkdownNoteDetail extends React.Component {
   handleUpdateContent () {
     const { note } = this.state
     note.content = this.refs.content.value
-    note.title = markdown.strip(striptags(findNoteTitle(note.content)))
+    note.title = markdown.strip(striptags(findNoteTitle(note.content, this.props.config.editor.enableFrontMatterTitle, this.props.config.editor.frontMatterTitleField)))
     this.updateNote(note)
   }
 
@@ -181,10 +193,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 +213,7 @@ class MarkdownNoteDetail extends React.Component {
           .then(() => ee.emit('list:next'))
       }
     } else {
-      if (confirmDeletion()) {
+      if (confirmDeleteNote(confirmDeletion, false)) {
         note.isTrashed = true
 
         this.setState({
@@ -257,6 +269,11 @@ class MarkdownNoteDetail extends React.Component {
     }
   }
 
+  handleGenerateToc () {
+    const editor = this.refs.content.refs.code.editor
+    markdownToc.generateInEditor(editor)
+  }
+
   handleFocus (e) {
     this.focus()
   }
@@ -272,15 +289,40 @@ class MarkdownNoteDetail extends React.Component {
 
   handleSwitchMode (type) {
     this.setState({ editorType: type }, () => {
+      this.focus()
       const newConfig = Object.assign({}, this.props.config)
       newConfig.editor.type = type
       ConfigManager.set(newConfig)
     })
   }
 
+  handleDeleteNote () {
+    this.handleTrashButtonClick()
+  }
+
+  handleClearTodo () {
+    const { note } = this.state
+    const splitted = note.content.split('\n')
+
+    const clearTodoContent = splitted.map((line) => {
+      const trimmedLine = line.trim()
+      if (trimmedLine.match(/\[x\]/i)) {
+        return line.replace(/\[x\]/i, '[ ]')
+      } else {
+        return line
+      }
+    }).join('\n')
+
+    note.content = clearTodoContent
+    this.refs.content.setValue(note.content)
+
+    this.updateNote(note)
+  }
+
   renderEditor () {
     const { config, ignorePreviewPointerEvents } = this.props
     const { note } = this.state
+
     if (this.state.editorType === 'EDITOR_PREVIEW') {
       return <MarkdownEditor
         ref='content'
@@ -288,6 +330,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 +340,7 @@ class MarkdownNoteDetail extends React.Component {
         config={config}
         value={note.content}
         storageKey={note.storage}
+        noteKey={note.key}
         onChange={this.handleUpdateContent.bind(this)}
         ignorePreviewPointerEvents={ignorePreviewPointerEvents}
       />
@@ -304,7 +348,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   render () {
-    const { data, location } = this.props
+    const { data, location, config } = this.props
     const { note, editorType } = this.state
     const storageKey = note.storage
     const folderKey = note.folder
@@ -355,9 +399,12 @@ class MarkdownNoteDetail extends React.Component {
         <TagSelect
           ref='tags'
           value={this.state.note.tags}
+          saveTagsAlphabetically={config.ui.saveTagsAlphabetically}
+          showTagsAlphabetically={config.ui.showTagsAlphabetically}
+          data={data}
           onChange={this.handleUpdateTag.bind(this)}
         />
-        <TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
+        <TodoListPercentage onClearCheckboxClick={(e) => this.handleClearTodo(e)} percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
       </div>
       <div styleName='info-right'>
         <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
@@ -437,8 +484,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,13 @@ 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
+
+body[data-theme="dracula"]
+  .root
+    border-left 1px solid $ui-dracula-borderColor
+    background-color $ui-dracula-noteDetail-backgroundColor

browser/main/Detail/NoteDetailInfo.styl

@@ -13,6 +13,7 @@ $info-margin-under-border = 30px
   display flex
   align-items center
   padding 0 20px
+  z-index 99
 
 .info-left
   padding 0 10px
@@ -97,4 +98,13 @@ body[data-theme="solarized-dark"]
   .info
     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
+
+body[data-theme="dracula"]
+  .info
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteDetail-backgroundColor

browser/main/Detail/SnippetNoteDetail.js

@@ -18,6 +18,7 @@ import context from 'browser/lib/context'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import _ from 'lodash'
 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'
@@ -27,25 +28,12 @@ import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
 import { formatDate } from 'browser/lib/date-formatter'
 import i18n from 'browser/lib/i18n'
-
-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 { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
+import markdownToc from 'browser/lib/markdown-toc-generator'
 
 const electron = require('electron')
 const { remote } = electron
-const { Menu, MenuItem, dialog } = remote
+const { dialog } = remote
 
 class SnippetNoteDetail extends React.Component {
   constructor (props) {
@@ -65,6 +53,7 @@ class SnippetNoteDetail extends React.Component {
     }
 
     this.scrollToNextTabThreshold = 0.7
+    this.generateToc = () => this.handleGenerateToc()
   }
 
   componentDidMount () {
@@ -78,10 +67,11 @@ class SnippetNoteDetail extends React.Component {
         enableLeftArrow: allTabs.offsetLeft !== 0
       })
     }
+    ee.on('code:generate-toc', this.generateToc)
   }
 
   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: ''
@@ -104,6 +94,16 @@ class SnippetNoteDetail extends React.Component {
 
   componentWillUnmount () {
     if (this.saveQueue != null) this.saveNow()
+    ee.off('code:generate-toc', this.generateToc)
+  }
+
+  handleGenerateToc () {
+    const { note, snippetIndex } = this.state
+    const currentMode = note.snippets[snippetIndex].mode
+    if (currentMode.includes('Markdown')) {
+      const currentEditor = this.refs[`code-${snippetIndex}`].refs.code.editor
+      markdownToc.generateInEditor(currentEditor)
+    }
   }
 
   handleChange (e) {
@@ -112,7 +112,7 @@ class SnippetNoteDetail extends React.Component {
     if (this.refs.tags) note.tags = this.refs.tags.value
     note.description = this.refs.description.value
     note.updatedAt = new Date()
-    note.title = findNoteTitle(note.description)
+    note.title = findNoteTitle(note.description, false)
 
     this.setState({
       note
@@ -197,10 +197,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)
@@ -217,7 +217,7 @@ class SnippetNoteDetail extends React.Component {
           .then(() => ee.emit('list:next'))
       }
     } else {
-      if (confirmDeletion()) {
+      if (confirmDeleteNote(confirmDeletion, false)) {
         note.isTrashed = true
 
         this.setState({
@@ -354,12 +354,10 @@ class SnippetNoteDetail extends React.Component {
       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)
@@ -381,11 +379,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()
     })
   }
@@ -394,11 +392,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()
       })
 
@@ -412,10 +410,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()
       })
     }
@@ -454,7 +452,7 @@ class SnippetNoteDetail extends React.Component {
           const isSuper = global.process.platform === 'darwin'
             ? e.metaKey
             : e.ctrlKey
-          if (isSuper) {
+          if (isSuper && !e.shiftKey && !e.altKey) {
             e.preventDefault()
             this.addSnippet()
           }
@@ -464,14 +462,14 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleModeButtonClick (e, index) {
-    const menu = new Menu()
+    const templetes = []
     CodeMirror.modeInfo.sort(function (a, b) { return a.name.localeCompare(b.name) }).forEach((mode) => {
-      menu.append(new MenuItem({
+      templetes.push({
         label: mode.name,
         click: (e) => this.handleModeOptionClick(index, mode.name)(e)
-      }))
+      })
     })
-    menu.popup(remote.getCurrentWindow())
+    context.popup(templetes)
   }
 
   handleIndentTypeButtonClick (e) {
@@ -586,11 +584,12 @@ class SnippetNoteDetail extends React.Component {
   }
 
   addSnippet () {
+    const { config } = this.props
     const { note } = this.state
 
     note.snippets = note.snippets.concat([{
       name: '',
-      mode: 'Plain Text',
+      mode: config.editor.snippetDefaultLanguage || 'text',
       content: ''
     }])
     const snippetIndex = note.snippets.length - 1
@@ -610,23 +609,22 @@ class SnippetNoteDetail extends React.Component {
   }
 
   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()
     })
   }
 
   focusEditor () {
-    console.log('code-' + this.state.snippetIndex)
     this.refs['code-' + this.state.snippetIndex].focus()
   }
 
@@ -676,7 +674,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'
@@ -704,6 +702,7 @@ class SnippetNoteDetail extends React.Component {
             keyMap={config.editor.keyMap}
             scrollPastEnd={config.editor.scrollPastEnd}
             fetchUrlTitle={config.editor.fetchUrlTitle}
+            enableTableEditor={config.editor.enableTableEditor}
             onChange={(e) => this.handleCodeChange(index)(e)}
             ref={'code-' + index}
           />
@@ -757,6 +756,9 @@ class SnippetNoteDetail extends React.Component {
         <TagSelect
           ref='tags'
           value={this.state.note.tags}
+          saveTagsAlphabetically={config.ui.saveTagsAlphabetically}
+          showTagsAlphabetically={config.ui.showTagsAlphabetically}
+          data={data}
           onChange={(e) => this.handleChange(e)}
         />
       </div>
@@ -883,8 +885,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

@@ -152,4 +152,38 @@ body[data-theme="solarized-dark"]
 
   .tabList
     background-color $ui-solarized-dark-noteDetail-backgroundColor
-    color $ui-solarized-dark-text-color
+    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
+
+body[data-theme="dracula"]
+  .root
+    border-left 1px solid $ui-dracula-borderColor
+    background-color $ui-dracula-noteDetail-backgroundColor
+
+  .body
+    background-color $ui-dracula-noteDetail-backgroundColor
+
+  .body .description textarea
+    background-color $ui-dracula-noteDetail-backgroundColor
+    color $ui-dracula-text-color
+    border 1px solid $ui-dracula-borderColor
+
+  .tabList
+    background-color $ui-dracula-noteDetail-backgroundColor
+    color $ui-dracula-text-color

browser/main/Detail/TagSelect.js

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

browser/main/Detail/TagSelect.styl

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

browser/main/Detail/ToggleModeButton.js

@@ -1,26 +1,26 @@
-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
-}) => (
-  <div styleName='control-toggleModeButton'>
-    <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => onClick('SPLIT')}>
-      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : ''} />
-    </div>
-    <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'>{i18n.__('Toggle Mode')}</span>
-  </div>
-)
-
-ToggleModeButton.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  editorType: PropTypes.string.Required
-}
-
-export default CSSModules(ToggleModeButton, styles)
+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
+}) => (
+  <div styleName='control-toggleModeButton'>
+    <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => onClick('SPLIT')}>
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : ''} />
+    </div>
+    <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'>{i18n.__('Toggle Mode')}</span>
+  </div>
+)
+
+ToggleModeButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  editorType: PropTypes.string.Required
+}
+
+export default CSSModules(ToggleModeButton, styles)

browser/main/Detail/ToggleModeButton.styl

@@ -56,3 +56,17 @@ body[data-theme="solarized-dark"]
     .active
       background-color #1EC38B
       box-shadow 2px 0px 7px #222222
+
+body[data-theme="monokai"]
+  .control-toggleModeButton
+      background-color #373831
+    .active
+      background-color #f92672
+      box-shadow 2px 0px 7px #222222
+
+body[data-theme="dracula"]
+  .control-toggleModeButton
+      background-color #44475a
+    .active
+      background-color #bd93f9
+      box-shadow 2px 0px 7px #222222

browser/main/Detail/index.js

@@ -8,6 +8,8 @@ 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'
+import searchFromNotes from 'browser/lib/search'
 
 const OSX = global.process.platform === 'darwin'
 
@@ -33,32 +35,39 @@ 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: i18n.__('Confirm note deletion'),
-        detail: i18n.__('This will permanently remove this note.'),
-        buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
-      }
-
-      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), alertConfig)
-      return dialogueButtonIndex === 0
-    }
-
-    return true
-  }
-
   render () {
-    const { location, data, config } = this.props
+    const { location, data, params, config } = this.props
     let note = null
+
     if (location.query.key != null) {
       const noteKey = location.query.key
-      note = data.noteMap.get(noteKey)
+      const allNotes = data.noteMap.map(note => note)
+      const trashedNotes = data.trashedSet.toJS().map(uniqueKey => data.noteMap.get(uniqueKey))
+      let displayedNotes = allNotes
+
+      if (location.pathname.match(/\/searched/)) {
+        const searchStr = params.searchword
+        displayedNotes = searchStr === undefined || searchStr === '' ? allNotes
+          : searchFromNotes(allNotes, searchStr)
+      }
+
+      if (location.pathname.match(/\/tags/)) {
+        const listOfTags = params.tagname.split(' ')
+        displayedNotes = data.noteMap.map(note => note).filter(note =>
+          listOfTags.every(tag => note.tags.includes(tag))
+        )
+      }
+
+      if (location.pathname.match(/\/trashed/)) {
+        displayedNotes = trashedNotes
+      } else {
+        displayedNotes = _.differenceWith(displayedNotes, trashedNotes, (note, trashed) => note.key === trashed.key)
+      }
+
+      const noteKeys = displayedNotes.map(note => note.key)
+      if (noteKeys.includes(noteKey)) {
+        note = data.noteMap.get(noteKey)
+      }
     }
 
     if (note == null) {
@@ -82,7 +91,6 @@ class Detail extends React.Component {
         <SnippetNoteDetail
           note={note}
           config={config}
-          confirmDeletion={(permanent) => this.confirmDeletion(permanent)}
           ref='root'
           {..._.pick(this.props, [
             'dispatch',
@@ -99,7 +107,6 @@ class Detail extends React.Component {
       <MarkdownNoteDetail
         note={note}
         config={config}
-        confirmDeletion={(permanent) => this.confirmDeletion(permanent)}
         ref='root'
         {..._.pick(this.props, [
           'dispatch',
@@ -121,4 +128,4 @@ Detail.propTypes = {
   ignorePreviewPointerEvents: PropTypes.bool
 }
 
-export default CSSModules(Detail, styles)
+export default debounceRender(CSSModules(Detail, styles))

browser/main/Main.js

@@ -15,12 +15,13 @@ 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
 
 class Main extends React.Component {
-
   constructor (props) {
     super(props)
 
@@ -55,13 +56,13 @@ class Main extends React.Component {
   init () {
     dataApi
       .addStorage({
-        name: 'My Storage',
+        name: 'My Storage Location',
         path: path.join(remote.app.getPath('home'), 'Boostnote')
       })
-      .then((data) => {
+      .then(data => {
         return data
       })
-      .then((data) => {
+      .then(data => {
         if (data.storage.folders[0] != null) {
           return data
         } else {
@@ -70,7 +71,7 @@ class Main extends React.Component {
               color: '#1278BD',
               name: 'Default'
             })
-            .then((_data) => {
+            .then(_data => {
               return {
                 storage: _data.storage,
                 notes: data.notes
@@ -78,8 +79,7 @@ class Main extends React.Component {
             })
         }
       })
-      .then((data) => {
-        console.log(data)
+      .then(data => {
         store.dispatch({
           type: 'ADD_STORAGE',
           storage: data.storage,
@@ -96,16 +96,16 @@ class Main extends React.Component {
               {
                 name: 'example.html',
                 mode: 'html',
-                content: '<html>\n<body>\n<h1 id=\'hello\'>Enjoy Boostnote!</h1>\n</body>\n</html>'
+                content: "<html>\n<body>\n<h1 id='hello'>Enjoy Boostnote!</h1>\n</body>\n</html>"
               },
               {
                 name: 'example.js',
                 mode: 'javascript',
-                content: 'var boostnote = document.getElementById(\'enjoy\').innerHTML\n\nconsole.log(boostnote)'
+                content: "var boostnote = document.getElementById('enjoy').innerHTML\n\nconsole.log(boostnote)"
               }
             ]
           })
-          .then((note) => {
+          .then(note => {
             store.dispatch({
               type: 'UPDATE_NOTE',
               note: note
@@ -118,7 +118,7 @@ class Main extends React.Component {
             title: 'Welcome to Boostnote!',
             content: '# Welcome to Boostnote!\n## Click here to edit markdown :wave:\n\n<iframe width="560" height="315" src="https://www.youtube.com/embed/L0qNPLsvmyM" frameborder="0" allowfullscreen></iframe>\n\n## Docs :memo:\n- [Boostnote | Boost your happiness, productivity and creativity.](https://hackernoon.com/boostnote-boost-your-happiness-productivity-and-creativity-315034efeebe)\n- [Cloud Syncing & Backups](https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup)\n- [How to sync your data across Desktop and Mobile apps](https://github.com/BoostIO/Boostnote/wiki/Sync-Data-Across-Desktop-and-Mobile-apps)\n- [Convert data from **Evernote** to Boostnote.](https://github.com/BoostIO/Boostnote/wiki/Evernote)\n- [Keyboard Shortcuts](https://github.com/BoostIO/Boostnote/wiki/Keyboard-Shortcuts)\n- [Keymaps in Editor mode](https://github.com/BoostIO/Boostnote/wiki/Keymaps-in-Editor-mode)\n- [How to set syntax highlight in Snippet note](https://github.com/BoostIO/Boostnote/wiki/Syntax-Highlighting)\n\n---\n\n## Article Archive :books:\n- [Reddit English](http://bit.ly/2mOJPu7)\n- [Reddit Spanish](https://www.reddit.com/r/boostnote_es/)\n- [Reddit Chinese](https://www.reddit.com/r/boostnote_cn/)\n- [Reddit Japanese](https://www.reddit.com/r/boostnote_jp/)\n\n---\n\n## Community :beers:\n- [GitHub](http://bit.ly/2AWWzkD)\n- [Twitter](http://bit.ly/2z8BUJZ)\n- [Facebook Group](http://bit.ly/2jcca8t)'
           })
-          .then((note) => {
+          .then(note => {
             store.dispatch({
               type: 'UPDATE_NOTE',
               note: note
@@ -129,10 +129,10 @@ class Main extends React.Component {
           .then(defaultMarkdownNote)
           .then(() => data.storage)
       })
-      .then((storage) => {
+      .then(storage => {
         hashHistory.push('/storages/' + storage.key)
       })
-      .catch((err) => {
+      .catch(err => {
         throw err
       })
   }
@@ -140,61 +140,35 @@ 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', 'dracula']
+
+    if (supportedThemes.indexOf(config.ui.theme) !== -1) {
+      document.body.setAttribute('data-theme', config.ui.theme)
     } else {
       document.body.setAttribute('data-theme', 'default')
     }
-    if (config.ui.language === 'sq') {
-      i18n.setLocale('sq')
-    } else if (config.ui.language === 'zh-CN') {
-      i18n.setLocale('zh-CN')
-    } else if (config.ui.language === 'zh-TW') {
-      i18n.setLocale('zh-TW')
-    } else if (config.ui.language === 'da') {
-      i18n.setLocale('da')
-    } else if (config.ui.language === 'fr') {
-      i18n.setLocale('fr')
-    } else if (config.ui.language === 'de') {
-      i18n.setLocale('de')
-    } else if (config.ui.language === 'hu') {
-      i18n.setLocale('hu')
-    } else if (config.ui.language === 'ja') {
-      i18n.setLocale('ja')
-    } else if (config.ui.language === 'ko') {
-      i18n.setLocale('ko')
-    } else if (config.ui.language === 'no') {
-      i18n.setLocale('no')
-    } else if (config.ui.language === 'pl') {
-      i18n.setLocale('pl')
-    } else if (config.ui.language === 'pt') {
-      i18n.setLocale('pt')
-    } else if (config.ui.language === 'ru') {
-      i18n.setLocale('ru')
-    } else if (config.ui.language === 'es') {
-      i18n.setLocale('es')
+
+    if (getLocales().indexOf(config.ui.language) !== -1) {
+      i18n.setLocale(config.ui.language)
     } else {
       i18n.setLocale('en')
     }
-
+    applyShortcuts()
     // Reload all data
-    dataApi.init()
-      .then((data) => {
-        dispatch({
-          type: 'INIT_ALL',
-          storages: data.storages,
-          notes: data.notes
-        })
-
-        if (data.storages.length < 1) {
-          this.init()
-        }
+    dataApi.init().then(data => {
+      dispatch({
+        type: 'INIT_ALL',
+        storages: data.storages,
+        notes: data.notes
       })
 
+      if (data.storages.length < 1) {
+        this.init()
+      }
+    })
+
+    delete CodeMirror.keyMap.emacs['Ctrl-V']
+
     eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
   }
 
@@ -219,34 +193,40 @@ class Main extends React.Component {
   handleMouseUp (e) {
     // Change width of NoteList component.
     if (this.state.isRightSliderFocused) {
-      this.setState({
-        isRightSliderFocused: false
-      }, () => {
-        const { dispatch } = this.props
-        const newListWidth = this.state.listWidth
-        // TODO: ConfigManager should dispatch itself.
-        ConfigManager.set({listWidth: newListWidth})
-        dispatch({
-          type: 'SET_LIST_WIDTH',
-          listWidth: newListWidth
-        })
-      })
+      this.setState(
+        {
+          isRightSliderFocused: false
+        },
+        () => {
+          const { dispatch } = this.props
+          const newListWidth = this.state.listWidth
+          // TODO: ConfigManager should dispatch itself.
+          ConfigManager.set({ listWidth: newListWidth })
+          dispatch({
+            type: 'SET_LIST_WIDTH',
+            listWidth: newListWidth
+          })
+        }
+      )
     }
 
     // Change width of SideNav component.
     if (this.state.isLeftSliderFocused) {
-      this.setState({
-        isLeftSliderFocused: false
-      }, () => {
-        const { dispatch } = this.props
-        const navWidth = this.state.navWidth
-        // TODO: ConfigManager should dispatch itself.
-        ConfigManager.set({ navWidth })
-        dispatch({
-          type: 'SET_NAV_WIDTH',
-          navWidth
-        })
-      })
+      this.setState(
+        {
+          isLeftSliderFocused: false
+        },
+        () => {
+          const { dispatch } = this.props
+          const navWidth = this.state.navWidth
+          // TODO: ConfigManager should dispatch itself.
+          ConfigManager.set({ navWidth })
+          dispatch({
+            type: 'SET_NAV_WIDTH',
+            navWidth
+          })
+        }
+      )
     }
   }
 
@@ -291,8 +271,8 @@ class Main extends React.Component {
   }
 
   hideLeftLists (noteDetail, noteList, mainBody) {
-    this.setState({noteDetailWidth: noteDetail.style.left})
-    this.setState({mainBodyWidth: mainBody.style.left})
+    this.setState({ noteDetailWidth: noteDetail.style.left })
+    this.setState({ mainBodyWidth: mainBody.style.left })
     noteDetail.style.left = '0px'
     mainBody.style.left = '0px'
     noteList.style.display = 'none'
@@ -314,33 +294,36 @@ class Main extends React.Component {
       <div
         className='Main'
         styleName='root'
-        onMouseMove={(e) => this.handleMouseMove(e)}
-        onMouseUp={(e) => this.handleMouseUp(e)}
+        onMouseMove={e => this.handleMouseMove(e)}
+        onMouseUp={e => this.handleMouseUp(e)}
       >
         <SideNav
-          {..._.pick(this.props, [
-            'dispatch',
-            'data',
-            'config',
-            'location'
-          ])}
+          {..._.pick(this.props, ['dispatch', 'data', 'config', 'params', 'location'])}
           width={this.state.navWidth}
         />
         {!config.isSideNavFolded &&
-          <div styleName={this.state.isLeftSliderFocused ? 'slider--active' : 'slider'}
-            style={{left: this.state.navWidth}}
-            onMouseDown={(e) => this.handleLeftSlideMouseDown(e)}
+          <div
+            styleName={
+              this.state.isLeftSliderFocused ? 'slider--active' : 'slider'
+            }
+            style={{ left: this.state.navWidth }}
+            onMouseDown={e => this.handleLeftSlideMouseDown(e)}
             draggable='false'
           >
             <div styleName='slider-hitbox' />
-          </div>
-        }
-        <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
+          </div>}
+        <div
+          styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
           id='main-body'
           ref='body'
-          style={{left: config.isSideNavFolded ? foldedNavigationWidth : this.state.navWidth}}
+          style={{
+            left: config.isSideNavFolded
+              ? foldedNavigationWidth
+              : this.state.navWidth
+          }}
         >
-          <TopBar style={{width: this.state.listWidth}}
+          <TopBar
+            style={{ width: this.state.listWidth }}
             {..._.pick(this.props, [
               'dispatch',
               'config',
@@ -349,7 +332,8 @@ class Main extends React.Component {
               'location'
             ])}
           />
-          <NoteList style={{width: this.state.listWidth}}
+          <NoteList
+            style={{ width: this.state.listWidth }}
             {..._.pick(this.props, [
               'dispatch',
               'data',
@@ -358,15 +342,20 @@ class Main extends React.Component {
               'location'
             ])}
           />
-          <div styleName={this.state.isRightSliderFocused ? 'slider-right--active' : 'slider-right'}
-            style={{left: this.state.listWidth - 1}}
-            onMouseDown={(e) => this.handleRightSlideMouseDown(e)}
+          <div
+            styleName={
+              this.state.isRightSliderFocused
+                ? 'slider-right--active'
+                : 'slider-right'
+            }
+            style={{ left: this.state.listWidth - 1 }}
+            onMouseDown={e => this.handleRightSlideMouseDown(e)}
             draggable='false'
           >
             <div styleName='slider-hitbox' />
           </div>
           <Detail
-            style={{left: this.state.listWidth}}
+            style={{ left: this.state.listWidth }}
             {..._.pick(this.props, [
               'dispatch',
               'data',
@@ -394,4 +383,4 @@ Main.propTypes = {
   data: PropTypes.shape({}).isRequired
 }
 
-export default connect((x) => x)(CSSModules(Main, styles))
+export default connect(x => x)(CSSModules(Main, styles))

browser/main/NewNoteButton/NewNoteButton.styl

@@ -74,4 +74,12 @@ body[data-theme="dark"]
 
 body[data-theme="solarized-dark"]
   .root, .root--expanded
-    background-color $ui-solarized-dark-noteList-backgroundColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+body[data-theme="monokai"]
+  .root, .root--expanded
+    background-color $ui-monokai-noteList-backgroundColor
+
+body[data-theme="dracula"]
+  .root, .root--expanded
+    background-color $ui-dracula-noteList-backgroundColor

browser/main/NewNoteButton/index.js

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

browser/main/NoteList/NoteList.styl

@@ -84,7 +84,7 @@ body[data-theme="dark"]
     color $ui-dark-inactive-text-color
     &:hover
       color $ui-dark-text-color
-  
+
   .control-button--active
     color $ui-dark-text-color
     &:active
@@ -109,8 +109,56 @@ body[data-theme="solarized-dark"]
     color $ui-solarized-dark-inactive-text-color
     &:hover
       color $ui-solarized-dark-text-color
-  
+
   .control-button--active
     color $ui-solarized-dark-text-color
     &:active
-      color $ui-solarized-dark-text-color
+      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
+
+body[data-theme="dracula"]
+  .root
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control
+    background-color $ui-dracula-noteList-backgroundColor
+    border-color $ui-dracula-borderColor
+
+  .control-sortBy-select
+    &:hover
+      transition 0.2s
+      color $ui-dracula-text-color
+
+  .control-button
+    color $ui-dracula-inactive-text-color
+    &:hover
+      color $ui-dracula-text-color
+
+  .control-button--active
+    color $ui-dracula-text-color
+    &:active
+      color $ui-dracula-text-color

browser/main/NoteList/index.js

@@ -2,11 +2,13 @@
 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'
@@ -18,9 +20,11 @@ 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'
+import context from 'browser/lib/context'
 
 const { remote } = require('electron')
-const { Menu, MenuItem, dialog } = remote
+const { dialog } = remote
 const WP_POST_PATH = '/wp/v2/posts'
 
 function sortByCreatedAt (a, b) {
@@ -52,7 +56,6 @@ class NoteList extends React.Component {
     super(props)
 
     this.selectNextNoteHandler = () => {
-      console.log('fired next')
       this.selectNextNote()
     }
     this.selectPriorNoteHandler = () => {
@@ -76,10 +79,13 @@ class NoteList extends React.Component {
     this.getViewType = this.getViewType.bind(this)
     this.restoreNote = this.restoreNote.bind(this)
     this.copyNoteLink = this.copyNoteLink.bind(this)
+    this.navigate = this.navigate.bind(this)
 
     // TODO: not Selected noteKeys but SelectedNote(for reusing)
     this.state = {
+      ctrlKeyDown: false,
       shiftKeyDown: false,
+      prevShiftNoteIndex: -1,
       selectedNoteKeys: []
     }
 
@@ -94,6 +100,7 @@ class NoteList extends React.Component {
     ee.on('list:isMarkdownNote', this.alertIfSnippetHandler)
     ee.on('import:file', this.importFromFileHandler)
     ee.on('list:jump', this.jumpNoteByHash)
+    ee.on('list:navigate', this.navigate)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -261,7 +268,7 @@ class NoteList extends React.Component {
   }
 
   handleNoteListKeyDown (e) {
-    if (e.metaKey || e.ctrlKey) return true
+    if (e.metaKey) return true
 
     // A key
     if (e.keyCode === 65 && !e.shiftKey) {
@@ -281,8 +288,8 @@ class NoteList extends React.Component {
       ee.emit('detail:focus')
     }
 
-    // F or S key
-    if (e.keyCode === 70 || e.keyCode === 83) {
+    // L or S key
+    if (e.keyCode === 76 || e.keyCode === 83) {
       e.preventDefault()
       ee.emit('top:focus-search')
     }
@@ -301,6 +308,8 @@ class NoteList extends React.Component {
 
     if (e.shiftKey) {
       this.setState({ shiftKeyDown: true })
+    } else if (e.ctrlKey) {
+      this.setState({ ctrlKeyDown: true })
     }
   }
 
@@ -308,6 +317,10 @@ class NoteList extends React.Component {
     if (!e.shiftKey) {
       this.setState({ shiftKeyDown: false })
     }
+
+    if (!e.ctrlKey) {
+      this.setState({ ctrlKeyDown: false })
+    }
   }
 
   getNotes () {
@@ -326,8 +339,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)
@@ -340,11 +355,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()
@@ -383,25 +397,65 @@ class NoteList extends React.Component {
     return pinnedNotes.concat(unpinnedNotes)
   }
 
+  getNoteIndexByKey (noteKey) {
+    return this.notes.findIndex((note) => {
+      if (!note) return -1
+
+      return note.key === noteKey
+    })
+  }
+
   handleNoteClick (e, uniqueKey) {
     const { router } = this.context
     const { location } = this.props
-    let { selectedNoteKeys } = this.state
-    const { shiftKeyDown } = this.state
+    let { selectedNoteKeys, prevShiftNoteIndex } = this.state
+    const { ctrlKeyDown, shiftKeyDown } = this.state
+    const hasSelectedNoteKey = selectedNoteKeys.length > 0
 
-    if (shiftKeyDown && selectedNoteKeys.includes(uniqueKey)) {
+    if (ctrlKeyDown && selectedNoteKeys.includes(uniqueKey)) {
       const newSelectedNoteKeys = selectedNoteKeys.filter((noteKey) => noteKey !== uniqueKey)
       this.setState({
         selectedNoteKeys: newSelectedNoteKeys
       })
       return
     }
-    if (!shiftKeyDown) {
+    if (!ctrlKeyDown && !shiftKeyDown) {
       selectedNoteKeys = []
     }
+
+    if (!shiftKeyDown) {
+      prevShiftNoteIndex = -1
+    }
+
     selectedNoteKeys.push(uniqueKey)
+
+    if (shiftKeyDown && hasSelectedNoteKey) {
+      let firstShiftNoteIndex = this.getNoteIndexByKey(selectedNoteKeys[0])
+      // Shift selection can either start from first note in the exisiting selectedNoteKeys
+      // or previous first shift note index
+      firstShiftNoteIndex = firstShiftNoteIndex > prevShiftNoteIndex
+        ? firstShiftNoteIndex : prevShiftNoteIndex
+
+      const lastShiftNoteIndex = this.getNoteIndexByKey(uniqueKey)
+
+      const startIndex = firstShiftNoteIndex < lastShiftNoteIndex
+        ? firstShiftNoteIndex : lastShiftNoteIndex
+      const endIndex = firstShiftNoteIndex > lastShiftNoteIndex
+        ? firstShiftNoteIndex : lastShiftNoteIndex
+
+      selectedNoteKeys = []
+      for (let i = startIndex; i <= endIndex; i++) {
+        selectedNoteKeys.push(this.notes[i].key)
+      }
+
+      if (prevShiftNoteIndex < 0) {
+        prevShiftNoteIndex = firstShiftNoteIndex
+      }
+    }
+
     this.setState({
-      selectedNoteKeys
+      selectedNoteKeys,
+      prevShiftNoteIndex
     })
 
     router.push({
@@ -413,10 +467,10 @@ class NoteList extends React.Component {
   }
 
   handleSortByChange (e) {
-    const { dispatch } = this.props
+    const { dispatch, params: { folderKey } } = this.props
 
     const config = {
-      sortBy: e.target.value
+      [folderKey]: { sortBy: e.target.value }
     }
 
     ConfigManager.set(config)
@@ -453,12 +507,19 @@ class NoteList extends React.Component {
   }
 
   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) {
@@ -480,52 +541,51 @@ class NoteList extends React.Component {
     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
-      }))
-    }
+    const templates = []
 
     if (location.pathname.match(/\/trash/)) {
-      menu.append(new MenuItem({
+      templates.push({
         label: restoreNote,
         click: this.restoreNote
-      }))
-    }
-
-    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)
-        }))
+      }, {
+        label: deleteLabel,
+        click: this.deleteNote
+      })
+    } else {
+      if (!location.pathname.match(/\/starred/)) {
+        templates.push({
+          label: pinLabel,
+          click: this.pinToTop
+        })
+      }
+      templates.push({
+        label: deleteLabel,
+        click: this.deleteNote
+      }, {
+        label: cloneNote,
+        click: this.cloneNote.bind(this)
+      }, {
+        label: copyNoteLink,
+        click: this.copyNoteLink.bind(this, note)
+      })
+      if (note.type === 'MARKDOWN_NOTE') {
+        if (note.blog && note.blog.blogLink && note.blog.blogId) {
+          templates.push({
+            label: updateLabel,
+            click: this.publishMarkdown.bind(this)
+          }, {
+            label: openBlogLabel,
+            click: () => this.openBlog.bind(this)(note)
+          })
+        } else {
+          templates.push({
+            label: publishLabel,
+            click: this.publishMarkdown.bind(this)
+          })
+        }
       }
     }
-
-    menu.popup()
+    context.popup(templates)
   }
 
   updateSelectedNotes (updateFunc, cleanSelection = true) {
@@ -580,16 +640,11 @@ 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: i18n.__('Confirm note deletion'),
-        detail: `This will permanently remove ${selectedNotes.length} ${noteExp}.`,
-        buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
-      })
-      if (dialogueButtonIndex === 1) return
+      if (!confirmDeleteNote(confirmDeletion, true)) return
+
       Promise.all(
         selectedNotes.map((note) => {
           return dataApi
@@ -608,8 +663,9 @@ class NoteList extends React.Component {
       .catch((err) => {
         console.error('Cannot Delete note: ' + err)
       })
-      console.log('Notes were all deleted')
     } else {
+      if (!confirmDeleteNote(confirmDeletion, false)) return
+
       Promise.all(
         selectedNotes.map((note) => {
           note.isTrashed = true
@@ -626,7 +682,6 @@ class NoteList extends React.Component {
           })
         })
         AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
-        console.log('Notes went to trash')
       })
       .catch((err) => {
         console.error('Notes could not go to trash: ' + err)
@@ -650,9 +705,13 @@ 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) => {
+        attachmentManagement.cloneAttachments(firstNote, note)
+        return note
+      })
       .then((note) => {
         dispatch({
           type: 'UPDATE_NOTE',
@@ -675,6 +734,16 @@ class NoteList extends React.Component {
     return copy(noteLink)
   }
 
+  navigate (sender, pathname) {
+    const { router } = this.context
+    router.push({
+      pathname,
+      query: {
+        // key: noteKey
+      }
+    })
+  }
+
   save (note) {
     const { dispatch } = this.props
     dataApi
@@ -897,12 +966,13 @@ class NoteList extends React.Component {
   }
 
   render () {
-    const { location, config } = this.props
+    const { location, config, params: { folderKey } } = this.props
     let { notes } = this.props
     const { selectedNoteKeys } = this.state
-    const sortFunc = config.sortBy === 'CREATED_AT'
+    const sortBy = _.get(config, [folderKey, 'sortBy'], config.sortBy.default)
+    const sortFunc = sortBy === 'CREATED_AT'
       ? sortByCreatedAt
-      : config.sortBy === 'ALPHABETICAL'
+      : sortBy === 'ALPHABETICAL'
       ? sortByAlphabetical
       : sortByUpdatedAt
     const sortedNotes = location.pathname.match(/\/starred|\/trash/)
@@ -913,7 +983,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',
@@ -934,17 +1004,26 @@ 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'
+          sortBy === 'CREATED_AT'
             ? note.createdAt : note.updatedAt
         ).fromNow('D')
 
@@ -962,6 +1041,7 @@ class NoteList extends React.Component {
               folderName={this.getNoteFolder(note).name}
               storageName={this.getNoteStorage(note).name}
               viewType={viewType}
+              showTagsAlphabetically={config.ui.showTagsAlphabetically}
             />
           )
         }
@@ -993,7 +1073,7 @@ class NoteList extends React.Component {
             <i className='fa fa-angle-down' />
             <select styleName='control-sortBy-select'
               title={i18n.__('Select filter mode')}
-              value={config.sortBy}
+              value={sortBy}
               onChange={(e) => this.handleSortByChange(e)}
             >
               <option title='Sort by update time' value='UPDATED_AT'>{i18n.__('Updated')}</option>
@@ -1044,4 +1124,4 @@ NoteList.propTypes = {
   })
 }
 
-export default CSSModules(NoteList, styles)
+export default debounceRender(CSSModules(NoteList, styles))

browser/main/SideNav/PreferenceButton.styl

@@ -48,4 +48,5 @@ body[data-theme="dark"]
   line-height normal
   border-radius 2px
   opacity 0
-  transition 0.1s
+  transition 0.1s
+  white-space nowrap

browser/main/SideNav/SideNav.styl

@@ -19,7 +19,7 @@
   text-align center
 
 
-  
+
 .top-menu-label
   margin-left 5px
   overflow ellipsis
@@ -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,13 @@ 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
+
+body[data-theme="dracula"]
+  .root, .root--folded
+    background-color $ui-dracula-backgroundColor
+    border-right 1px solid $ui-dracula-borderColor

browser/main/SideNav/StorageItem.js

@@ -11,21 +11,26 @@ import StorageItemChild from 'browser/components/StorageItem'
 import _ from 'lodash'
 import { SortableElement } from 'react-sortable-hoc'
 import i18n from 'browser/lib/i18n'
+import context from 'browser/lib/context'
 
 const { remote } = require('electron')
-const { Menu, dialog } = remote
+const { dialog } = remote
+const escapeStringRegexp = require('escape-string-regexp')
+const path = require('path')
 
 class StorageItem extends React.Component {
   constructor (props) {
     super(props)
 
+    const { storage } = this.props
+
     this.state = {
-      isOpen: true
+      isOpen: !!storage.isOpen
     }
   }
 
   handleHeaderContextMenu (e) {
-    const menu = Menu.buildFromTemplate([
+    context.popup([
       {
         label: i18n.__('Add Folder'),
         click: (e) => this.handleAddFolderButtonClick(e)
@@ -33,13 +38,27 @@ class StorageItem extends React.Component {
       {
         type: 'separator'
       },
+      {
+        label: i18n.__('Export Storage'),
+        submenu: [
+          {
+            label: i18n.__('Export as txt'),
+            click: (e) => this.handleExportStorageClick(e, 'txt')
+          },
+          {
+            label: i18n.__('Export as md'),
+            click: (e) => this.handleExportStorageClick(e, 'md')
+          }
+        ]
+      },
+      {
+        type: 'separator'
+      },
       {
         label: i18n.__('Unlink Storage'),
         click: (e) => this.handleUnlinkStorageClick(e)
       }
     ])
-
-    menu.popup()
   }
 
   handleUnlinkStorageClick (e) {
@@ -65,9 +84,43 @@ class StorageItem extends React.Component {
     }
   }
 
+  handleExportStorageClick (e, fileType) {
+    const options = {
+      properties: ['openDirectory', 'createDirectory'],
+      buttonLabel: i18n.__('Select directory'),
+      title: i18n.__('Select a folder to export the files to'),
+      multiSelections: false
+    }
+    dialog.showOpenDialog(remote.getCurrentWindow(), options,
+      (paths) => {
+        if (paths && paths.length === 1) {
+          const { storage, dispatch } = this.props
+          dataApi
+            .exportStorage(storage.key, fileType, paths[0])
+            .then(data => {
+              dispatch({
+                type: 'EXPORT_STORAGE',
+                storage: data.storage,
+                fileType: data.fileType
+              })
+            })
+        }
+      })
+  }
+
   handleToggleButtonClick (e) {
+    const { storage, dispatch } = this.props
+    const isOpen = !this.state.isOpen
+    dataApi.toggleStorage(storage.key, isOpen)
+      .then((storage) => {
+        dispatch({
+          type: 'EXPAND_STORAGE',
+          storage,
+          isOpen
+        })
+      })
     this.setState({
-      isOpen: !this.state.isOpen
+      isOpen: isOpen
     })
   }
 
@@ -92,7 +145,7 @@ class StorageItem extends React.Component {
   }
 
   handleFolderButtonContextMenu (e, folder) {
-    const menu = Menu.buildFromTemplate([
+    context.popup([
       {
         label: i18n.__('Rename Folder'),
         click: (e) => this.handleRenameFolderClick(e, folder)
@@ -121,8 +174,6 @@ class StorageItem extends React.Component {
         click: (e) => this.handleFolderDeleteClick(e, folder)
       }
     ])
-
-    menu.popup()
   }
 
   handleRenameFolderClick (e, folder) {
@@ -201,7 +252,7 @@ class StorageItem extends React.Component {
       createdNoteData.forEach((newNote) => {
         dispatch({
           type: 'MOVE_NOTE',
-          originNote: noteData.find((note) => note.content === newNote.content),
+          originNote: noteData.find((note) => note.content === newNote.oldContent),
           note: newNote
         })
       })
@@ -223,7 +274,8 @@ class StorageItem extends React.Component {
     const { folderNoteMap, trashedSet } = data
     const SortableStorageItemChild = SortableElement(StorageItemChild)
     const folderList = storage.folders.map((folder, index) => {
-      const isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
+      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
@@ -253,7 +305,7 @@ 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'}

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
@@ -147,7 +147,7 @@ body[data-theme="dark"]
       background-color $ui-dark-button--active-backgroundColor
       &:active
         color $ui-dark-text-color
-        background-color $ui-dark-button--active-backgroundColor  
+        background-color $ui-dark-button--active-backgroundColor
 
   .header--active
     .header-addFolderButton
@@ -180,7 +180,7 @@ body[data-theme="dark"]
     &:active, &:active:hover
       color $ui-dark-text-color
       background-color $ui-dark-button--active-backgroundColor
-      
+
 
 
 

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/index.js

@@ -1,8 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
-const { remote } = require('electron')
-const { Menu } = remote
 import dataApi from 'browser/main/lib/dataApi'
 import styles from './SideNav.styl'
 import { openModal } from 'browser/main/lib/modal'
@@ -19,6 +17,13 @@ import ListButton from './ListButton'
 import TagButton from './TagButton'
 import {SortableContainer} from 'react-sortable-hoc'
 import i18n from 'browser/lib/i18n'
+import context from 'browser/lib/context'
+import { remote } from 'electron'
+import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
+
+function matchActiveTags (tags, activeTags) {
+  return _.every(activeTags, v => tags.indexOf(v) >= 0)
+}
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
@@ -31,6 +36,52 @@ class SideNav extends React.Component {
     EventEmitter.off('side:preferences', this.handleMenuButtonClick)
   }
 
+  deleteTag (tag) {
+    const selectedButton = remote.dialog.showMessageBox(remote.getCurrentWindow(), {
+      ype: 'warning',
+      message: i18n.__('Confirm tag deletion'),
+      detail: i18n.__('This will permanently remove this tag.'),
+      buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
+    })
+
+    if (selectedButton === 0) {
+      const { data, dispatch, location, params } = this.props
+
+      const notes = data.noteMap
+        .map(note => note)
+        .filter(note => note.tags.indexOf(tag) !== -1)
+        .map(note => {
+          note = Object.assign({}, note)
+          note.tags = note.tags.slice()
+
+          note.tags.splice(note.tags.indexOf(tag), 1)
+
+          return note
+        })
+
+      Promise
+        .all(notes.map(note => dataApi.updateNote(note.storage, note.key, note)))
+        .then(updatedNotes => {
+          updatedNotes.forEach(note => {
+            dispatch({
+              type: 'UPDATE_NOTE',
+              note
+            })
+          })
+
+          if (location.pathname.match('/tags')) {
+            const tags = params.tagname.split(' ')
+            const index = tags.indexOf(tag)
+            if (index !== -1) {
+              tags.splice(index, 1)
+
+              this.context.router.push(`/tags/${tags.map(tag => encodeURIComponent(tag)).join(' ')}`)
+            }
+          }
+        })
+    }
+  }
+
   handleMenuButtonClick (e) {
     openModal(PreferencesModal)
   }
@@ -45,6 +96,17 @@ class SideNav extends React.Component {
     router.push('/starred')
   }
 
+  handleTagContextMenu (e, tag) {
+    const menu = []
+
+    menu.push({
+      label: i18n.__('Delete Tag'),
+      click: this.deleteTag.bind(this, tag)
+    })
+
+    context.popup(menu)
+  }
+
   handleToggleButtonClick (e) {
     const { dispatch, config } = this.props
 
@@ -82,7 +144,7 @@ class SideNav extends React.Component {
   }
 
   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$/)
@@ -108,15 +170,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>{i18n.__('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)}
@@ -129,17 +206,39 @@ class SideNav extends React.Component {
   }
 
   tagListComponent () {
-    const { data, location } = this.props
-    const tagList = _.sortBy(data.tagNoteMap.map((tag, name) => {
-      return { name, size: tag.size }
-    }), ['name'])
+    const { data, location, config } = this.props
+    const activeTags = this.getActiveTags(location.pathname)
+    const relatedTags = this.getRelatedTags(activeTags, data.noteMap)
+    let tagList = _.sortBy(data.tagNoteMap.map(
+      (tag, name) => ({ name, size: tag.size, related: relatedTags.has(name) })
+    ).filter(
+      tag => tag.size > 0
+    ), ['name'])
+    if (config.ui.enableLiveNoteCounts && activeTags.length !== 0) {
+      const notesTags = data.noteMap.map(note => note.tags)
+      tagList = tagList.map(tag => {
+        tag.size = notesTags.filter(tags => tags.includes(tag.name) && matchActiveTags(tags, activeTags)).length
+        return tag
+      })
+    }
+    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)}
+            handleContextMenu={this.handleTagContextMenu.bind(this)}
+            isActive={this.getTagActive(location.pathname, tag.name)}
+            isRelated={tag.related}
             key={tag.name}
             count={tag.size}
           />
@@ -148,15 +247,62 @@ 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')
+      ? []
+      : decodeURIComponent(tags).split(' ')
   }
 
   handleClickTagListItem (name) {
     const { router } = this.context
-    router.push(`/tags/${name}`)
+    router.push(`/tags/${encodeURIComponent(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/${encodeURIComponent(listOfTags.join(' '))}`)
   }
 
   emptyTrash (entries) {
@@ -164,6 +310,8 @@ class SideNav extends React.Component {
     const deletionPromises = entries.map((note) => {
       return dataApi.deleteNote(note.storage, note.key)
     })
+    const { confirmDeletion } = this.props.config.ui
+    if (!confirmDeleteNote(confirmDeletion, true)) return
     Promise.all(deletionPromises)
     .then((arrayOfStorageAndNoteKeys) => {
       arrayOfStorageAndNoteKeys.forEach(({ storageKey, noteKey }) => {
@@ -173,16 +321,14 @@ class SideNav extends React.Component {
     .catch((err) => {
       console.error('Cannot Delete note: ' + err)
     })
-    console.log('Trash emptied')
   }
 
   handleFilterButtonContextMenu (event) {
     const { data } = this.props
     const trashedNotes = data.trashedSet.toJS().map((uniqueKey) => data.noteMap.get(uniqueKey))
-    const menu = Menu.buildFromTemplate([
+    context.popup([
       { label: i18n.__('Empty Trash'), click: () => this.emptyTrash(trashedNotes) }
     ])
-    menu.popup()
   }
 
   render () {

browser/main/StatusBar/StatusBar.styl

@@ -34,7 +34,7 @@
     color $ui-active-color
   span
     margin-left 5px
-  
+
 .update
   navButtonColor()
   height 24px
@@ -69,3 +69,25 @@ 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
+
+body[data-theme="dracula"]
+   navButtonColor()
+  .zoom
+    border-color $ui-dark-borderColor
+    color $ui-dracula-text-color
+    &:hover
+      transition 0.15s
+      color $ui-dracula-active-color
+    &:active
+      color $ui-dracula-active-color

browser/main/StatusBar/index.js

@@ -4,10 +4,11 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
 import i18n from 'browser/lib/i18n'
+import context from 'browser/lib/context'
 
 const electron = require('electron')
 const { remote, ipcRenderer } = electron
-const { Menu, MenuItem, dialog } = remote
+const { dialog } = remote
 
 const zoomOptions = [0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2.0]
 
@@ -26,16 +27,16 @@ class StatusBar extends React.Component {
   }
 
   handleZoomButtonClick (e) {
-    const menu = new Menu()
+    const templates = []
 
     zoomOptions.forEach((zoom) => {
-      menu.append(new MenuItem({
+      templates.push({
         label: Math.floor(zoom * 100) + '%',
         click: () => this.handleZoomMenuItemClick(zoom)
-      }))
+      })
     })
 
-    menu.popup(remote.getCurrentWindow())
+    context.popup(templates)
   }
 
   handleZoomMenuItemClick (zoomFactor) {

browser/main/TopBar/TopBar.styl

@@ -234,3 +234,47 @@ 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
+
+body[data-theme="dracula"]
+  .root, .root--expanded
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control
+    border-color $ui-dracula-borderColor
+  .control-search
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control-search-icon
+    absolute top bottom left
+    line-height 32px
+    width 35px
+    color $ui-dracula-inactive-text-color
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control-search-input
+    background-color $ui-dracula-noteList-backgroundColor
+    input
+      background-color $ui-dracula-noteList-backgroundColor
+      color $ui-dracula-text-color

browser/main/TopBar/index.js

@@ -28,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)
   }
@@ -97,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
       })
     }
   }
@@ -108,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()
     }
@@ -147,8 +156,7 @@ class TopBar extends React.Component {
     if (this.state.isSearching) {
       el.blur()
     } else {
-      el.focus()
-      el.setSelectionRange(0, el.value.length)
+      el.select()
     }
   }
 

browser/main/global.styl

@@ -15,6 +15,15 @@ body
   font-weight 200
   -webkit-font-smoothing antialiased
 
+::-webkit-scrollbar
+  width 12px
+
+::-webkit-scrollbar-corner
+  background-color: transparent;
+
+::-webkit-scrollbar-thumb
+  background-color rgba(0, 0, 0, 0.15)
+
 button, input, select, textarea
   font-family DEFAULT_FONTS
 
@@ -85,9 +94,11 @@ modalBackColor = white
     absolute top left bottom right
     background-color modalBackColor
     z-index modalZIndex + 1
-    
+
 
 body[data-theme="dark"]
+  ::-webkit-scrollbar-thumb
+    background-color rgba(0, 0, 0, 0.3)
   .ModalBase
     .modalBack
       background-color $ui-dark-backgroundColor
@@ -108,15 +119,63 @@ 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"
+
+.CodeMirror-hover
+  padding 2px 4px 0 4px
+  position absolute
+  z-index 99
+
+.CodeMirror-hyperlink
+  cursor pointer
+
 
 .sortableItemHelper
   z-index modalZIndex + 5
 
 body[data-theme="solarized-dark"]
+  ::-webkit-scrollbar-thumb
+    background-color rgba(0, 0, 0, 0.3)
   .ModalBase
     .modalBack
       background-color $ui-solarized-dark-backgroundColor
   .sortableItemHelper
     color: $ui-solarized-dark-text-color
 
+body[data-theme="monokai"]
+  ::-webkit-scrollbar-thumb
+    background-color rgba(0, 0, 0, 0.3)
+  .ModalBase
+    .modalBack
+      background-color $ui-monokai-backgroundColor
+  .sortableItemHelper
+    color: $ui-monokai-text-color
 
+body[data-theme="dracula"]
+  ::-webkit-scrollbar-thumb
+    background-color rgba(0, 0, 0, 0.3)
+  .ModalBase
+    .modalBack
+      background-color $ui-dracula-backgroundColor
+  .sortableItemHelper
+    color: $ui-dracula-text-color
+
+body[data-theme="default"]
+  .SideNav ::-webkit-scrollbar-thumb
+    background-color rgba(255, 255, 255, 0.3)
+
+@import '../styles/Detail/TagSelect.styl'

browser/main/index.js

@@ -24,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
@@ -64,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/AwsMobileAnalyticsConfig.js

@@ -45,7 +45,6 @@ function initAwsMobileAnalytics () {
   if (getSendEventCond()) return
   AWS.config.credentials.get((err) => {
     if (!err) {
-      console.log('Cognito Identity ID: ' + AWS.config.credentials.identityId)
       recordDynamicCustomEvent('APP_STARTED')
       recordStaticCustomEvent()
     }
@@ -58,7 +57,7 @@ function recordDynamicCustomEvent (type, options = {}) {
     mobileAnalyticsClient.recordEvent(type, options)
   } catch (analyticsError) {
     if (analyticsError instanceof ReferenceError) {
-      console.log(analyticsError.name + ': ' + analyticsError.message)
+      console.error(analyticsError.name + ': ' + analyticsError.message)
     }
   }
 }
@@ -71,7 +70,7 @@ function recordStaticCustomEvent () {
     })
   } catch (analyticsError) {
     if (analyticsError instanceof ReferenceError) {
-      console.log(analyticsError.name + ': ' + analyticsError.message)
+      console.error(analyticsError.name + ': ' + analyticsError.message)
     }
   }
 }

browser/main/lib/ConfigManager.js

@@ -1,6 +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,11 +16,16 @@ export const DEFAULT_CONFIG = {
   isSideNavFolded: false,
   listWidth: 280,
   navWidth: 200,
-  sortBy: 'UPDATED_AT', // 'CREATED_AT', 'UPDATED_AT', 'APLHABETICAL'
+  sortBy: {
+    default: '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 ? 'Command + Alt + L' : 'Super + Alt + E',
+    toggleMode: OSX ? 'Command + Alt + M' : 'Ctrl + M',
+    deleteNote: OSX ? 'Command + Shift + Backspace' : 'Ctrl + Shift + Backspace'
   },
   ui: {
     language: 'en',
@@ -38,10 +44,14 @@ export const DEFAULT_CONFIG = {
     enableRulers: false,
     rulers: [80, 120],
     displayLineNumbers: true,
-    switchPreview: 'BLUR', // Available value: RIGHTCLICK, BLUR
+    switchPreview: 'BLUR', // 'BLUR', 'DBL_CLICK', 'RIGHTCLICK'
+    delfaultStatus: 'PREVIEW', // 'PREVIEW', 'CODE'
     scrollPastEnd: false,
-    type: 'SPLIT',
-    fetchUrlTitle: true
+    type: 'SPLIT', // 'SPLIT', 'EDITOR_PREVIEW'
+    fetchUrlTitle: true,
+    enableTableEditor: false,
+    enableFrontMatterTitle: true,
+    frontMatterTitleField: 'title'
   },
   preview: {
     fontSize: '14',
@@ -52,9 +62,16 @@ export const DEFAULT_CONFIG = {
     latexInlineClose: '$',
     latexBlockOpen: '$$',
     latexBlockClose: '$$',
+    plantUMLServerAddress: 'http://www.plantuml.com/plantuml',
     scrollPastEnd: false,
+    scrollSync: true,
     smartQuotes: true,
-    sanitize: 'STRICT' // 'STRICT', 'ALLOW_STYLES', 'NONE'
+    breaks: true,
+    smartArrows: false,
+    allowCustomCSS: false,
+    customCSS: '',
+    sanitize: 'STRICT', // 'STRICT', 'ALLOW_STYLES', 'NONE'
+    lineThroughCheckbox: true
   },
   blog: {
     type: 'wordpress', // Available value: wordpress, add more types in the future plz
@@ -134,41 +151,15 @@ 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 if (newConfig.ui.theme === 'dracula') {
+    document.body.setAttribute('data-theme', 'dracula')
   } else {
     document.body.setAttribute('data-theme', 'default')
   }
 
-  if (newConfig.ui.language === 'sq') {
-    i18n.setLocale('sq')
-  } else if (newConfig.ui.language === 'zh-CN') {
-    i18n.setLocale('zh-CN')
-  } else if (newConfig.ui.language === 'zh-TW') {
-    i18n.setLocale('zh-TW')
-  } else if (newConfig.ui.language === 'da') {
-    i18n.setLocale('da')
-  } else if (newConfig.ui.language === 'fr') {
-    i18n.setLocale('fr')
-  } else if (newConfig.ui.language === 'de') {
-    i18n.setLocale('de')
-  } else if (newConfig.ui.language === 'hu') {
-    i18n.setLocale('hu')
-  } else if (newConfig.ui.language === 'ja') {
-    i18n.setLocale('ja')
-  } else if (newConfig.ui.language === 'ko') {
-    i18n.setLocale('ko')
-  } else if (newConfig.ui.language === 'no') {
-    i18n.setLocale('no')
-  } else if (newConfig.ui.language === 'pl') {
-    i18n.setLocale('pl')
-  } else if (newConfig.ui.language === 'pt') {
-    i18n.setLocale('pt')
-  } else if (newConfig.ui.language === 'ru') {
-    i18n.setLocale('ru')
-  } else if (newConfig.ui.language === 'es') {
-    i18n.setLocale('es')
-  } else {
-    i18n.setLocale('en')
-  }
+  i18n.setLocale(newConfig.ui.language)
 
   let editorTheme = document.getElementById('editorTheme')
   if (editorTheme == null) {
@@ -192,6 +183,7 @@ function set (updates) {
   ipcRenderer.send('config-renew', {
     config: get()
   })
+  ee.emit('config-renew')
 }
 
 function assignConfigValues (originalConfig, rcConfig) {
@@ -201,6 +193,18 @@ function assignConfigValues (originalConfig, rcConfig) {
   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)
+
+  rewriteHotkey(config)
+
+  return config
+}
+
+function rewriteHotkey (config) {
+  const keys = [...Object.keys(config.hotkey)]
+  keys.forEach(key => {
+    config.hotkey[key] = config.hotkey[key].replace(/Cmd/g, 'Command')
+    config.hotkey[key] = config.hotkey[key].replace(/Opt\s/g, 'Option ')
+  })
   return config
 }
 

browser/main/lib/dataApi/addStorage.js

@@ -37,7 +37,8 @@ function addStorage (input) {
     key,
     name: input.name,
     type: input.type,
-    path: input.path
+    path: input.path,
+    isOpen: false
   }
 
   return Promise.resolve(newStorage)
@@ -48,7 +49,8 @@ function addStorage (input) {
         key: newStorage.key,
         type: newStorage.type,
         name: newStorage.name,
-        path: newStorage.path
+        path: newStorage.path,
+        isOpen: false
       })
 
       localStorage.setItem('storages', JSON.stringify(rawStorages))

browser/main/lib/dataApi/attachmentManagement.js

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

browser/main/lib/dataApi/copyImage.js

@@ -1,32 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-const { findStorage } = require('browser/lib/findStorage')
-
-/**
- * @description Copy an image and return the path.
- * @param {String} filePath
- * @param {String} storageKey
- * @param {Boolean} rename create new filename or leave the old one
- * @return {Promise<any>} an image path
- */
-function copyImage (filePath, storageKey, rename = true) {
-  return new Promise((resolve, reject) => {
-    try {
-      const targetStorage = findStorage(storageKey)
-
-      const inputImage = fs.createReadStream(filePath)
-      const imageExt = path.extname(filePath)
-      const imageName = rename ? Math.random().toString(36).slice(-16) : path.basename(filePath, imageExt)
-      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/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/exportNote.js

@@ -1,13 +1,9 @@
 import copyFile from 'browser/main/lib/dataApi/copyFile'
-import {findStorage} from 'browser/lib/findStorage'
-import filenamify from 'filenamify'
+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
  *
@@ -28,21 +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) => {
-    dstFilename = filenamify(dstFilename, {replacement: '_'})
-    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/exportStorage.js

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

browser/main/lib/dataApi/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

@@ -1,5 +1,6 @@
 const dataApi = {
   init: require('./init'),
+  toggleStorage: require('./toggleStorage'),
   addStorage: require('./addStorage'),
   renameStorage: require('./renameStorage'),
   removeStorage: require('./removeStorage'),
@@ -8,11 +9,16 @@ const dataApi = {
   deleteFolder: require('./deleteFolder'),
   reorderFolder: require('./reorderFolder'),
   exportFolder: require('./exportFolder'),
+  exportStorage: require('./exportStorage'),
   createNote: require('./createNote'),
   updateNote: require('./updateNote'),
   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

@@ -6,7 +6,7 @@ const CSON = require('@rokt33r/season')
 const keygen = require('browser/lib/keygen')
 const sander = require('sander')
 const { findStorage } = require('browser/lib/findStorage')
-const copyImage = require('./copyImage')
+const attachmentManagement = require('./attachmentManagement')
 
 function moveNote (storageKey, noteKey, newStorageKey, newFolderKey) {
   let oldStorage, newStorage
@@ -64,32 +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 moveImages (noteData) {
-          const searchImagesRegex = /!\[.*?]\(\s*?\/:storage\/(.*\.\S*?)\)/gi
-          let match = searchImagesRegex.exec(noteData.content)
-
-          const moveTasks = []
-          while (match != null) {
-            const [, filename] = match
-            const oldPath = path.join(oldStorage.path, 'images', filename)
-            moveTasks.push(
-                copyImage(oldPath, noteData.storage, false)
-                .then(() => {
-                  fs.unlinkSync(oldPath)
-                })
-            )
-
-            // find next occurence
-            match = searchImagesRegex.exec(noteData.content)
+        .then(function moveAttachments (noteData) {
+          if (oldStorage.path === newStorage.path) {
+            return noteData
           }
 
-          return Promise.all(moveTasks).then(() => 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/renameStorage.js

@@ -14,7 +14,6 @@ function renameStorage (key, name) {
     cachedStorageList = JSON.parse(localStorage.getItem('storages'))
     if (!_.isArray(cachedStorageList)) throw new Error('invalid storages')
   } catch (err) {
-    console.log('error got')
     console.error(err)
     return Promise.reject(err)
   }

browser/main/lib/dataApi/resolveStorageData.js

@@ -8,7 +8,8 @@ function resolveStorageData (storageCache) {
     key: storageCache.key,
     name: storageCache.name,
     type: storageCache.type,
-    path: storageCache.path
+    path: storageCache.path,
+    isOpen: storageCache.isOpen
   }
 
   const boostnoteJSONPath = path.join(storageCache.path, 'boostnote.json')
@@ -30,13 +31,9 @@ function resolveStorageData (storageCache) {
 
   const version = parseInt(storage.version, 10)
   if (version >= 1) {
-    if (version > 1) {
-      console.log('The repository version is newer than one of current app.')
-    }
     return Promise.resolve(storage)
   }
 
-  console.log('Transform Legacy storage', storage.path)
   return migrateFromV6Storage(storage.path)
     .then(() => storage)
 }