v0.11.12

fix pasting into fenced code block

.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

@@ -10,7 +10,6 @@
         "theme": "monokai"
     },
     "hotkey": {
-        "toggleFinder": "Cmd + Alt + S",
         "toggleMain": "Cmd + Alt + L"
     },
     "isSideNavFolded": false,
@@ -23,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

.eslintignore

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

.eslintrc

@@ -3,7 +3,9 @@
   "plugins": ["react"],
   "rules": {
     "no-useless-escape": 0,
-    "prefer-const": "warn",
+    "prefer-const": ["warn", {
+      "destructuring": "all"
+    }],
     "no-unused-vars": "warn",
     "no-undef": "warn",
     "no-lone-blocks": "warn",
@@ -12,5 +14,13 @@
     "react/no-find-dom-node": "warn",
     "react/no-render-return-value": "warn",
     "react/no-deprecated": "warn"
+  },
+  "globals": {
+    "FileReader": true,
+    "localStorage": true,
+    "fetch": true
+  },
+  "env": {
+    "jest": true
   }
 }

.gitignore

@@ -8,3 +8,5 @@ node_modules/*
 /compiled
 /secret
 *.log
+.idea
+.vscode

.travis.yml

@@ -1,9 +1,9 @@
 language: node_js
 node_js:
-  - stable
-  - lts/*
+  - 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
+          }
+        ]
+      }
+    }
+  ]
+}

Backers.md

@@ -1,27 +1,50 @@
 <h1 align="center">Sponsors &amp; Backers</h1>
 
-Boostnote is an open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these awesome [backers](https://github.com/BoostIO/Boostnote/blob/master/Backers.md). If you'd like to join them, please consider:
+Boostnote is an open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these awesome backers. If you'd like to join them, please consider:
 
 - [Become a backer or sponsor on Open Collective.](https://opencollective.com/boostnoteio)
 
 ---
 
 ## Backers via OpenCollective
-<a href="https://opencollective.com/boostnoteio#backers" target="_blank"><img src="https://opencollective.com/boostnoteio/backers.svg?width=890"></a>
 
-- [Ralph03](https://opencollective.com/ralph03) - $24
+### [Gold Sponsors / $1,000 per month](https://opencollective.com/boostnoteio/order/2259)
+- Get your logo on our Readme.md on GitHub and the frontpage of https://boostnote.io/.
 
-- [Nikolas Dan](https://opencollective.com/nikolas-dan) - $20
+### [Silver Sponsors / $250 per month](https://opencollective.com/boostnoteio/order/2257)
+- Get your logo on our Readme.md on GitHub and the frontpage of https://boostnote.io/.
 
-- [tatoosh11](https://twitter.com/ta11) - $10
+### [Bronze Sponsors / $50 per month](https://opencollective.com/boostnoteio/order/2258)
+- Get your name and Url (or E-mail) on Readme.md on GitHub.
 
-- [Alexander Borovkov](https://opencollective.com/alexander-borovkov) - $10
+### [Backers3 / $10 per month](https://opencollective.com/boostnoteio/order/2176)
+- [Ralph03](https://opencollective.com/ralph03)
 
-- [Yeojong Kim](https://twitter.com/yeojoy) - $5
+- [Nikolas Dan](https://opencollective.com/nikolas-dan)
 
-- [Scotia Draven](https://opencollective.com/scotia-draven) - $5
+### [Backers2 / $5 per month](https://opencollective.com/boostnoteio/order/2175)
+- [Yeojong Kim](https://twitter.com/yeojoy)
 
-- [spoonhoop](https://opencollective.com/spoonhoop) - $5
+- [Scotia Draven](https://opencollective.com/scotia-draven)
+
+- [A. J. Vargas](https://opencollective.com/aj-vargas)
+
+### [Backers1](https://opencollective.com/boostnoteio/order/2563) and One-time sponsors
+- Ryosuke Tamura - $30
+
+- tatoosh11 - $10
+
+- Alexander Borovkov - $10
+
+- spoonhoop - $5
+
+- Drew Williams - $2
+
+- Andy Shaw - $2
+
+- mysafesky -$2
+
+---
 
 ## Backers via Bountysource
 https://salt.bountysource.com/teams/boostnote

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
 -->

LICENSE

@@ -2,7 +2,7 @@ GPL-3.0
 
 Boostnote - an open source note-taking app made for programmers just like you.
 
-Copyright (C) 2017 Maisin&Co., Inc.
+Copyright (C) 2017 - 2018 BoostIO
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by

PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,36 @@
+<!--
+Before submitting this PR, please make sure that:
+- You have read and understand the contributing.md
+- You have checked docs/code_style.md for information on code style
+-->
+## Description
+<!--
+Tell us what your PR does.
+Please attach a screenshot/ video/gif image describing your PR if possible.
+-->
+
+## Issue fixed
+<!--
+Please list out all issue fixed with this PR here.
+-->
+
+<!--
+Please make sure you fill in these checkboxes,
+your PR will be reviewed faster if we know exactly what it does.
+
+Change :white_circle: to :radio_button: in all the options that apply
+-->
+## Type of changes
+
+- :white_circle: Bug fix (Change that fixed an issue)
+- :white_circle: Breaking change (Change that can cause existing functionality to change)
+- :white_circle: Improvement (Change that improves the code. Maybe performance or development improvement)
+- :white_circle: Feature (Change that adds new functionality)
+- :white_circle: Documentation change (Change that modifies documentation. Maybe typo fixes)
+
+## Checklist:
+
+- :white_circle: My code follows [the project code style](docs/code_style.md)
+- :white_circle: I have written test for my code and it has been tested
+- :white_circle: All existing tests have been passed
+- :white_circle: I have attached a screenshot/video to visualize my change if possible

__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

@@ -1,36 +1,48 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
-import path from 'path'
-import copyImage from 'browser/main/lib/dataApi/copyImage'
-import { findStorage } from 'browser/lib/findStorage'
+import 'codemirror-mode-elixir'
+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 styles from '../components/CodeEditor.styl'
 import fs from 'fs'
+const { ipcRenderer, remote, clipboard } = require('electron')
+import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
+const spellcheck = require('browser/lib/spellcheck')
+const buildEditorContextMenu = require('browser/lib/contextMenuBuilder')
+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
-  }
+function translateHotkey (hotkey) {
+  return hotkey.replace(/\s*\+\s*/g, '-').replace(/Command/g, 'Cmd').replace(/Control/g, 'Ctrl')
 }
 
 export default class CodeEditor extends React.Component {
   constructor (props) {
     super(props)
 
-    this.changeHandler = (e) => this.handleChange(e)
+    this.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {
+      leading: false,
+      trailing: true
+    })
+    this.changeHandler = (editor, changeObject) => this.handleChange(editor, changeObject)
+    this.focusHandler = () => {
+      ipcRenderer.send('editor:focused', true)
+    }
     this.blurHandler = (editor, e) => {
+      ipcRenderer.send('editor:focused', false)
       if (e == null) return null
       let el = e.relatedTarget
       while (el != null) {
@@ -40,70 +52,225 @@ 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.pasteHandler = (editor, e) => {
+      e.preventDefault()
+
+      this.handlePaste(editor, false)
+    }
+    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()
+
+    if (props.switchPreview !== 'RIGHTCLICK') {
+      this.contextMenuHandler = function (editor, event) {
+        const menu = buildEditorContextMenu(editor, event)
+        if (menu != null) {
+          setTimeout(() => menu.popup(remote.getCurrentWindow()), 30)
+        }
+      }
+    }
+
+    this.editorActivityHandler = () => this.handleEditorActivity()
+
+    this.turndownService = new TurndownService()
+  }
+
+  handleSearch (msg) {
+    const cm = this.editor
+    const component = this
+
+    if (component.searchState) cm.removeOverlay(component.searchState)
+    if (msg.length < 3) return
+
+    cm.operation(function () {
+      component.searchState = makeOverlay(msg, 'searching')
+      cm.addOverlay(component.searchState)
+
+      function makeOverlay (query, style) {
+        query = new RegExp(
+          query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'),
+          'gi'
+        )
+        return {
+          token: function (stream) {
+            query.lastIndex = stream.pos
+            var match = query.exec(stream.string)
+            if (match && match.index === stream.pos) {
+              stream.pos += match[0].length || 1
+              return style
+            } else if (match) {
+              stream.pos = match.index
+            } else {
+              stream.skipToEnd()
+            }
+          }
+        }
+      }
+    })
+  }
+
+  handleFormatTable () {
+    this.tableEditor.formatAll(options({textWidthOptions: {}}))
+  }
+
+  handleEditorActivity () {
+    if (!this.textEditorInterface.transaction) {
+      this.updateTableEditorState()
+    }
   }
 
-  componentDidMount () {
-    this.value = this.props.value
-    this.editor = CodeMirror(this.refs.root, {
-      value: this.props.value,
-      lineNumbers: true,
-      lineWrapping: true,
-      theme: this.props.theme,
-      indentUnit: this.props.indentSize,
-      tabSize: this.props.indentSize,
-      indentWithTabs: this.props.indentType !== 'space',
-      keyMap: this.props.keyMap,
-      inputStyle: 'textarea',
-      dragDrop: false,
-      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')
+  updateDefaultKeyMap () {
+    const { hotkey } = this.props
+    const expandSnippet = this.expandSnippet.bind(this)
+
+    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: 'newlineAndIndentContinueMarkdownList',
-        'Ctrl-C': (cm) => {
-          if (cm.getOption('keyMap').substr(0, 3) === 'vim') {
-            document.execCommand('copy')
-          }
-          return CodeMirror.Pass
         }
+      },
+      '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
+      },
+      [translateHotkey(hotkey.pasteSmartly)]: cm => {
+        this.handlePaste(cm, true)
       }
     })
+  }
+
+  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
+    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.updateDefaultKeyMap()
+
+    this.value = this.props.value
+    this.editor = CodeMirror(this.refs.root, {
+      rulers: buildCMRulers(rulers, enableRulers),
+      value: this.props.value,
+      lineNumbers: this.props.displayLineNumbers,
+      lineWrapping: true,
+      theme: this.props.theme,
+      indentUnit: this.props.indentSize,
+      tabSize: this.props.indentSize,
+      indentWithTabs: this.props.indentType !== 'space',
+      keyMap: this.props.keyMap,
+      scrollPastEnd: this.props.scrollPastEnd,
+      inputStyle: 'textarea',
+      dragDrop: false,
+      foldGutter: true,
+      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+      autoCloseBrackets: {
+        pairs: '()[]{}\'\'""$$**``',
+        triples: '```"""\'\'\'',
+        explode: '[]{}``$$',
+        override: true
+      },
+      extraKeys: this.defaultKeyMap
+    })
 
     this.setMode(this.props.mode)
 
+    this.editor.on('focus', this.focusHandler)
     this.editor.on('blur', this.blurHandler)
     this.editor.on('change', this.changeHandler)
     this.editor.on('paste', this.pasteHandler)
+    if (this.props.switchPreview !== 'RIGHTCLICK') {
+      this.editor.on('contextmenu', this.contextMenuHandler)
+    }
+    eventEmitter.on('top:search', this.searchHandler)
 
-    let editorTheme = document.getElementById('editorTheme')
+    eventEmitter.emit('code:init')
+    this.editor.on('scroll', this.scrollHandler)
+
+    const editorTheme = document.getElementById('editorTheme')
     editorTheme.addEventListener('load', this.loadStyleHandler)
 
     CodeMirror.Vim.defineEx('quit', 'q', this.quitEditor)
@@ -111,6 +278,147 @@ 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)
+    if (this.props.spellCheck) {
+      this.editor.addPanel(this.createSpellCheckPanel(), {position: 'bottom'})
+    }
+
+    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 () {
@@ -118,15 +426,23 @@ export default class CodeEditor extends React.Component {
   }
 
   componentWillUnmount () {
+    this.editor.off('focus', this.focusHandler)
     this.editor.off('blur', this.blurHandler)
     this.editor.off('change', this.changeHandler)
     this.editor.off('paste', this.pasteHandler)
-    let editorTheme = document.getElementById('editorTheme')
+    eventEmitter.off('top:search', this.searchHandler)
+    this.editor.off('scroll', this.scrollHandler)
+    this.editor.off('contextmenu', this.contextMenuHandler)
+    const editorTheme = document.getElementById('editorTheme')
     editorTheme.removeEventListener('load', this.loadStyleHandler)
+
+    spellcheck.setLanguage(null, spellcheck.SPELLCHECK_DISABLED)
+    eventEmitter.off('code:format-table', this.formatTable)
   }
 
   componentDidUpdate (prevProps, prevState) {
     let needRefresh = false
+    const { rulers, enableRulers } = this.props
     if (prevProps.mode !== this.props.mode) {
       this.setMode(this.props.mode)
     }
@@ -144,6 +460,13 @@ export default class CodeEditor extends React.Component {
       needRefresh = true
     }
 
+    if (
+      prevProps.enableRulers !== enableRulers ||
+      prevProps.rulers !== rulers
+    ) {
+      this.editor.setOption('rulers', buildCMRulers(rulers, enableRulers))
+    }
+
     if (prevProps.indentSize !== this.props.indentSize) {
       this.editor.setOption('indentUnit', this.props.indentSize)
       this.editor.setOption('tabSize', this.props.indentSize)
@@ -152,30 +475,82 @@ export default class CodeEditor extends React.Component {
       this.editor.setOption('indentWithTabs', this.props.indentType !== 'space')
     }
 
+    if (prevProps.displayLineNumbers !== this.props.displayLineNumbers) {
+      this.editor.setOption('lineNumbers', this.props.displayLineNumbers)
+    }
+
+    if (prevProps.scrollPastEnd !== this.props.scrollPastEnd) {
+      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 (prevProps.hotkey !== this.props.hotkey) {
+      this.updateDefaultKeyMap()
+
+      if (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 (prevProps.spellCheck !== this.props.spellCheck) {
+      if (this.props.spellCheck === false) {
+        spellcheck.setLanguage(this.editor, spellcheck.SPELLCHECK_DISABLED)
+        let elem = document.getElementById('editor-bottom-panel')
+        elem.parentNode.removeChild(elem)
+      } else {
+        this.editor.addPanel(this.createSpellCheckPanel(), {position: 'bottom'})
+      }
+    }
+
     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)
     CodeMirror.autoLoadMode(this.editor, syntax.mode)
   }
 
-  handleChange (e) {
-    this.value = this.editor.getValue()
+  handleChange (editor, changeObject) {
+    spellcheck.handleChange(editor, changeObject)
+    this.value = editor.getValue()
     if (this.props.onChange) {
-      this.props.onChange(e)
+      this.props.onChange(editor)
     }
   }
 
-  moveCursorTo (row, col) {
-  }
+  moveCursorTo (row, col) {}
 
-  scrollToLine (num) {
+  scrollToLine (event, num) {
+    const cursor = {
+      line: num,
+      ch: 1
+    }
+    this.editor.setCursor(cursor)
   }
 
   focus () {
@@ -197,80 +572,285 @@ export default class CodeEditor extends React.Component {
   }
 
   setValue (value) {
-    let cursor = this.editor.getCursor()
+    const cursor = this.editor.getCursor()
     this.editor.setValue(value)
     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 dataTransferItem = e.clipboardData.items[0]
-    if (!dataTransferItem.type.match('image')) return
+  handlePaste (editor, forceSmartPaste) {
+    const { storageKey, noteKey, fetchUrlTitle, enableSmartPaste } = this.props
 
-    const blob = dataTransferItem.getAsFile()
-    let reader = new FileReader()
-    let base64data
+    const isURL = str => {
+      const matcher = /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/
+      return matcher.test(str)
+    }
 
-    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)
+    const isInLinkTag = editor => {
+      const startCursor = editor.getCursor('start')
+      const prevChar = editor.getRange(
+        { line: startCursor.line, ch: startCursor.ch - 2 },
+        { line: startCursor.line, ch: startCursor.ch }
+      )
+      const endCursor = editor.getCursor('end')
+      const nextChar = editor.getRange(
+        { line: endCursor.line, ch: endCursor.ch },
+        { line: endCursor.line, ch: endCursor.ch + 1 }
+      )
+      return prevChar === '](' && nextChar === ')'
+    }
+
+    const isInFencedCodeBlock = editor => {
+      const cursor = editor.getCursor()
+
+      let token = editor.getTokenAt(cursor)
+      if (token.state.fencedState) {
+        return true
+      }
+
+      let line = line = cursor.line - 1
+      while (line >= 0) {
+        token = editor.getTokenAt({
+          ch: 3,
+          line
+        })
+
+        if (token.start === token.end) {
+          --line
+        } else if (token.type === 'comment') {
+          if (line > 0) {
+            token = editor.getTokenAt({
+              ch: 3,
+              line: line - 1
+            })
+
+            return token.type !== 'comment'
+          } else {
+            return true
+          }
+        } else {
+          return false
+        }
+      }
+
+      return false
+    }
+
+    const pastedTxt = clipboard.readText()
+
+    if (isInFencedCodeBlock(editor)) {
+      this.handlePasteText(editor, pastedTxt)
+    } else if (fetchUrlTitle && isURL(pastedTxt) && !isInLinkTag(editor)) {
+      this.handlePasteUrl(editor, pastedTxt)
+    } else if (enableSmartPaste || forceSmartPaste) {
+      const image = clipboard.readImage()
+      if (!image.isEmpty()) {
+        attachmentManagement.handlePastNativeImage(
+          this,
+          storageKey,
+          noteKey,
+          image
+        )
+      } else {
+        const pastedHtml = clipboard.readHTML()
+        if (pastedHtml.length > 0) {
+          this.handlePasteHtml(editor, pastedHtml)
+        } else {
+          this.handlePasteText(editor, pastedTxt)
+        }
+      }
+    } else if (attachmentManagement.isAttachmentLink(pastedTxt)) {
+      attachmentManagement
+        .handleAttachmentLinkPaste(storageKey, noteKey, pastedTxt)
+        .then(modifiedText => {
+          this.editor.replaceSelection(modifiedText)
+        })
+    } else {
+      this.handlePasteText(editor, pastedTxt)
     }
   }
 
+  handleScroll (e) {
+    if (this.props.onScroll) {
+      this.props.onScroll(e)
+    }
+  }
+
+  handlePasteUrl (editor, pastedTxt) {
+    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 => {
+        if (isImageReponse(response)) {
+          return this.mapImageResponse(response, pastedTxt)
+        } else {
+          return this.mapNormalResponse(response, pastedTxt)
+        }
+      })
+      .then(replacement => {
+        replaceTaggedUrl(replacement)
+      })
+      .catch(e => {
+        replaceTaggedUrl(pastedTxt)
+      })
+  }
+
+  handlePasteHtml (editor, pastedHtml) {
+    const markdown = this.turndownService.turndown(pastedHtml)
+    editor.replaceSelection(markdown)
+  }
+
+  handlePasteText (editor, pastedTxt) {
+    editor.replaceSelection(pastedTxt)
+  }
+
+  mapNormalResponse (response, pastedTxt) {
+    return this.decodeResponse(response).then(body => {
+      return new Promise((resolve, reject) => {
+        try {
+          const parsedBody = new window.DOMParser().parseFromString(
+            body,
+            'text/html'
+          )
+          const 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)
+      }
+    })
+  }
+
+  decodeResponse (response) {
+    const headers = response.headers
+    const _charset = headers.has('content-type')
+      ? this.extractContentTypeCharset(headers.get('content-type'))
+      : undefined
+    return response.arrayBuffer().then(buff => {
+      return new Promise((resolve, reject) => {
+        try {
+          const charset = _charset !== undefined &&
+            iconv.encodingExists(_charset)
+            ? _charset
+            : 'utf-8'
+          resolve(iconv.decode(new Buffer(buff), charset).toString())
+        } catch (e) {
+          reject(e)
+        }
+      })
+    })
+  }
+
+  extractContentTypeCharset (contentType) {
+    return contentType
+      .split(';')
+      .filter(str => {
+        return str.trim().toLowerCase().startsWith('charset')
+      })
+      .map(str => {
+        return str.replace(/['"]/g, '').split('=')[1]
+      })[0]
+  }
+
   render () {
-    let { className, fontFamily, fontSize } = this.props
-    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)}
       />
     )
   }
+
+  createSpellCheckPanel () {
+    const panel = document.createElement('div')
+    panel.className = 'panel bottom'
+    panel.id = 'editor-bottom-panel'
+    const dropdown = document.createElement('select')
+    dropdown.title = 'Spellcheck'
+    dropdown.className = styles['spellcheck-select']
+    dropdown.addEventListener('change', (e) => spellcheck.setLanguage(this.editor, dropdown.value))
+    const options = spellcheck.getAvailableDictionaries()
+    for (const op of options) {
+      const option = document.createElement('option')
+      option.value = op.value
+      option.innerHTML = op.label
+      dropdown.appendChild(option)
+    }
+    panel.appendChild(dropdown)
+    return panel
+  }
 }
 
 CodeEditor.propTypes = {
   value: PropTypes.string,
+  enableRulers: PropTypes.bool,
+  rulers: PropTypes.arrayOf(Number),
   mode: PropTypes.string,
   className: PropTypes.string,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  spellCheck: PropTypes.bool
 }
 
 CodeEditor.defaultProps = {
@@ -280,5 +860,6 @@ CodeEditor.defaultProps = {
   fontSize: 14,
   fontFamily: 'Monaco, Consolas',
   indentSize: 4,
-  indentType: 'space'
+  indentType: 'space',
+  spellCheck: false
 }

browser/components/CodeEditor.styl

@@ -0,0 +1,6 @@
+.codeEditor-typo
+  text-decoration underline wavy red
+
+.spellcheck-select
+  border: none
+  text-decoration underline wavy red

browser/components/MarkdownEditor.js

@@ -1,11 +1,12 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 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'
-const _ = require('lodash')
+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,17 +65,19 @@ class MarkdownEditor extends React.Component {
     })
   }
 
+  setValue (value) {
+    this.refs.code.setValue(value)
+  }
+
   handleChange (e) {
     this.value = this.refs.code.value
     this.props.onChange(e)
   }
 
   handleContextMenu (e) {
-    let { config } = this.props
+    const { config } = this.props
     if (config.editor.switchPreview === 'RIGHTCLICK') {
-      let 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)
       })
     }
   }
@@ -91,9 +98,11 @@ class MarkdownEditor extends React.Component {
   handleBlur (e) {
     if (this.state.isLocked) return
     this.setState({ keyPressed: new Set() })
-    let { config } = this.props
-    if (config.editor.switchPreview === 'BLUR') {
-      let cursorPosition = this.refs.code.editor.getCursor()
+    const { config } = this.props
+    if (config.editor.switchPreview === 'BLUR' ||
+        (config.editor.switchPreview === 'DBL_CLICK' && this.state.status === 'CODE')
+    ) {
+      const cursorPosition = this.refs.code.editor.getCursor()
       this.setState({
         status: 'PREVIEW'
       }, () => {
@@ -104,12 +113,26 @@ class MarkdownEditor extends React.Component {
     }
   }
 
+  handleDoubleClick (e) {
+    if (this.state.isLocked) return
+    this.setState({keyPressed: new Set()})
+    const { config } = this.props
+    if (config.editor.switchPreview === 'DBL_CLICK') {
+      this.setState({
+        status: 'CODE'
+      }, () => {
+        this.refs.code.focus()
+        eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+      })
+    }
+  }
+
   handlePreviewMouseDown (e) {
     this.previewMouseDownedAt = new Date()
   }
 
   handlePreviewMouseUp (e) {
-    let { config } = this.props
+    const { config } = this.props
     if (config.editor.switchPreview === 'BLUR' && new Date() - this.previewMouseDownedAt < 200) {
       this.setState({
         status: 'CODE'
@@ -123,21 +146,23 @@ class MarkdownEditor extends React.Component {
   handleCheckboxClick (e) {
     e.preventDefault()
     e.stopPropagation()
-    let idMatch = /checkbox-([0-9]+)/
-    let checkedMatch = /\[x\]/i
-    let uncheckedMatch = /\[ \]/
+    const idMatch = /checkbox-([0-9]+)/
+    const checkedMatch = /^\s*[\+\-\*] \[x\]/i
+    const uncheckedMatch = /^\s*[\+\-\*] \[ \]/
+    const checkReplace = /\[x\]/i
+    const uncheckReplace = /\[ \]/
     if (idMatch.test(e.target.getAttribute('id'))) {
-      let lineIndex = parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
-      let lines = this.refs.code.value
+      const lineIndex = parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
+      const lines = this.refs.code.value
         .split('\n')
 
-      let targetLine = lines[lineIndex]
+      const targetLine = lines[lineIndex]
 
       if (targetLine.match(checkedMatch)) {
-        lines[lineIndex] = targetLine.replace(checkedMatch, '[ ]')
+        lines[lineIndex] = targetLine.replace(checkReplace, '[ ]')
       }
       if (targetLine.match(uncheckedMatch)) {
-        lines[lineIndex] = targetLine.replace(uncheckedMatch, '[x]')
+        lines[lineIndex] = targetLine.replace(uncheckReplace, '[x]')
       }
       this.refs.code.setValue(lines.join('\n'))
     }
@@ -163,12 +188,12 @@ class MarkdownEditor extends React.Component {
   }
 
   handleKeyDown (e) {
-    let { config } = this.props
+    const { config } = this.props
     if (this.state.status !== 'CODE') return false
     const keyPressed = this.state.keyPressed
     keyPressed.add(e.keyCode)
     this.setState({ keyPressed })
-    let isNoteHandlerKey = (el) => { return keyPressed.has(el) }
+    const isNoteHandlerKey = (el) => { return keyPressed.has(el) }
     // These conditions are for ctrl-e and ctrl-w
     if (keyPressed.size === this.escapeFromEditor.length &&
         !this.state.isLocked && this.state.status === 'CODE' &&
@@ -207,14 +232,14 @@ class MarkdownEditor extends React.Component {
   }
 
   render () {
-    let { 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
     let editorIndentSize = parseInt(config.editor.indentSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
 
-    let previewStyle = {}
+    const previewStyle = {}
     if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
 
     const storage = findStorage(storageKey)
@@ -234,7 +259,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}
@@ -242,9 +267,20 @@ class MarkdownEditor extends React.Component {
           fontSize={editorFontSize}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
+          enableRulers={config.editor.enableRulers}
+          rulers={config.editor.rulers}
+          displayLineNumbers={config.editor.displayLineNumbers}
+          scrollPastEnd={config.editor.scrollPastEnd}
           storageKey={storageKey}
+          noteKey={noteKey}
+          fetchUrlTitle={config.editor.fetchUrlTitle}
+          enableTableEditor={config.editor.enableTableEditor}
           onChange={(e) => this.handleChange(e)}
           onBlur={(e) => this.handleBlur(e)}
+          spellCheck={config.editor.spellcheck}
+          enableSmartPaste={config.editor.enableSmartPaste}
+          hotkey={config.hotkey}
+          switchPreview={config.editor.switchPreview}
         />
         <MarkdownPreview styleName={this.state.status === 'PREVIEW'
             ? 'preview'
@@ -259,8 +295,14 @@ class MarkdownEditor extends React.Component {
           codeBlockFontFamily={config.editor.fontFamily}
           lineNumber={config.preview.lineNumber}
           indentSize={editorIndentSize}
+          scrollPastEnd={config.preview.scrollPastEnd}
+          smartQuotes={config.preview.smartQuotes}
+          smartArrows={config.preview.smartArrows}
+          breaks={config.preview.breaks}
+          sanitize={config.preview.sanitize}
           ref='preview'
           onContextMenu={(e) => this.handleContextMenu(e)}
+          onDoubleClick={(e) => this.handleDoubleClick(e)}
           tabIndex='0'
           value={this.state.renderValue}
           onMouseUp={(e) => this.handlePreviewMouseUp(e)}
@@ -268,6 +310,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

@@ -1,28 +1,58 @@
-import React, { PropTypes } from 'react'
-import markdown from 'browser/lib/markdown'
+import PropTypes from 'prop-types'
+import React from 'react'
+import Markdown from 'browser/lib/markdown'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
+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 fs from 'fs'
 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'
+import ConfigManager from '../main/lib/ConfigManager'
+
+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 markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
-const appPath = 'file://' + (process.env.NODE_ENV === 'production'
-  ? app.getAppPath()
-  : path.resolve())
+const uri2path = require('file-uri-to-path')
 
-function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber) {
+const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
+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,
+  theme,
+  allowCustomCSS,
+  customCSS
+) {
   return `
 @font-face {
   font-family: 'Lato';
@@ -42,18 +72,35 @@ function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber) {
   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(', ')};
+  font-family: '${codeBlockFontFamily.join("','")}';
   background-color: rgba(0,0,0,0.04);
 }
 .lineNumber {
   ${lineNumber && 'display: block !important;'}
-  font-family: ${codeBlockFontFamily.join(', ')};
+  font-family: '${codeBlockFontFamily.join("','")}';
 }
 
 .clipboardButton {
@@ -93,10 +140,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']
@@ -104,49 +181,93 @@ 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.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()
     this.printHandler = () => this.handlePrint()
 
     this.linkClickHandler = this.handlelinkClick.bind(this)
+    this.initMarkdown = this.initMarkdown.bind(this)
+    this.initMarkdown()
   }
 
-  handlePreviewAnchorClick (e) {
-    e.preventDefault()
-    e.stopPropagation()
-
-    let anchor = e.target.closest('a')
-    let href = anchor.getAttribute('href')
-    if (_.isString(href) && href.match(/^#/)) {
-      let targetElement = this.refs.root.contentWindow.document.getElementById(href.substring(1, href.length))
-      if (targetElement != null) {
-        this.getWindow().scrollTo(0, targetElement.offsetTop)
-      }
-    } else {
-      shell.openExternal(href)
-    }
+  initMarkdown () {
+    const { smartQuotes, sanitize, breaks } = this.props
+    this.markdown = new Markdown({
+      typographer: smartQuotes,
+      sanitize,
+      breaks
+    })
   }
 
   handleCheckboxClick (e) {
     this.props.onCheckboxClick(e)
   }
 
-  handleContextMenu (e) {
-    this.props.onContextMenu(e)
+  handleScroll (e) {
+    if (this.props.onScroll) {
+      this.props.onScroll(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) {
+    if (this.props.onDoubleClick != null) this.props.onDoubleClick(e)
   }
 
   handleMouseDown (e) {
+    const config = ConfigManager.get()
+    if (config.editor.switchPreview === 'RIGHTCLICK' && e.buttons === 2 && config.editor.type === 'SPLIT') {
+      eventEmitter.emit('topbar:togglemodebutton', 'CODE')
+    }
     if (e.target != null) {
       switch (e.target.tagName) {
         case 'A':
@@ -158,6 +279,7 @@ export default class MarkdownPreview extends React.Component {
   }
 
   handleMouseUp (e) {
+    if (!this.props.onMouseUp) return
     if (e.target != null && e.target.tagName === 'A') {
       return null
     }
@@ -172,224 +294,479 @@ export default class MarkdownPreview extends React.Component {
     this.exportAsDocument('md')
   }
 
+  handleSaveAsHtml () {
+    this.exportAsDocument('html', (noteContent, exportTasks) => {
+      const {
+        fontFamily,
+        fontSize,
+        codeBlockFontFamily,
+        lineNumber,
+        codeBlockTheme,
+        scrollPastEnd,
+        theme,
+        allowCustomCSS,
+        customCSS
+      } = this.getStyleParams()
+
+      const inlineStyles = buildStyle(
+        fontFamily,
+        fontSize,
+        codeBlockFontFamily,
+        lineNumber,
+        scrollPastEnd,
+        theme,
+        allowCustomCSS,
+        customCSS
+      )
+      let body = this.markdown.render(noteContent)
+      const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
+      files.forEach(file => {
+        if (global.process.platform === 'win32') {
+          file = file.replace('file:///', '')
+        } else {
+          file = file.replace('file://', '')
+        }
+        exportTasks.push({
+          src: file,
+          dst: 'css'
+        })
+      })
+
+      let styles = ''
+      files.forEach(file => {
+        styles += `<link rel="stylesheet" href="css/${path.basename(file)}">`
+      })
+
+      return `<html>
+                 <head>
+                   <meta charset="UTF-8">
+                   <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1">
+                   <style id="style">${inlineStyles}</style>
+                   ${styles}
+                 </head>
+                 <body>${body}</body>
+              </html>`
+    })
+  }
+
   handlePrint () {
     this.refs.root.contentWindow.print()
   }
 
-  exportAsDocument (fileType) {
+  exportAsDocument (fileType, contentFormatter) {
     const options = {
-      filters: [
-        { name: 'Documents', extensions: [fileType] }
-      ],
+      filters: [{ name: 'Documents', extensions: [fileType] }],
       properties: ['openFile', 'createDirectory']
     }
-    dialog.showSaveDialog(remote.getCurrentWindow(), options,
-    (filename) => {
+
+    dialog.showSaveDialog(remote.getCurrentWindow(), options, filename => {
       if (filename) {
-        fs.writeFile(filename, this.props.value, (err) => {
-          if (err) throw err
-        })
+        const content = this.props.value
+        const storage = this.props.storagePath
+        const nodeKey = this.props.noteKey
+
+        exportNote(nodeKey, 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
+    )
 
-    this.refs.root.contentWindow.document.head.innerHTML = `
+    let styles = `
       <style id='style'></style>
-      <link rel="stylesheet" href="${appPath}/node_modules/katex/dist/katex.min.css">
-      <link rel="stylesheet" href="${appPath}/node_modules/codemirror/lib/codemirror.css">
       <link rel="stylesheet" id="codeTheme">
+      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+      <style>
+        ${this.getScrollBarStyle()}
+      </style>
     `
+
+    CSS_FILES.forEach(file => {
+      styles += `<link rel="stylesheet" href="${file}">`
+    })
+
+    this.refs.root.contentWindow.document.head.innerHTML = styles
     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('drop', this.preventImageDroppedHandler)
-    this.refs.root.contentWindow.document.addEventListener('dragover', this.preventImageDroppedHandler)
+    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)
     eventEmitter.on('print', this.printHandler)
   }
 
   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('drop', this.preventImageDroppedHandler)
-    this.refs.root.contentWindow.document.removeEventListener('dragover', this.preventImageDroppedHandler)
+    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)
     eventEmitter.off('print', this.printHandler)
   }
 
   componentDidUpdate (prevProps) {
     if (prevProps.value !== this.props.value) this.rewriteIframe()
-    if (prevProps.fontFamily !== this.props.fontFamily ||
+    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 ||
       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.theme !== this.props.theme ||
+      prevProps.scrollPastEnd !== this.props.scrollPastEnd ||
+      prevProps.allowCustomCSS !== this.props.allowCustomCSS ||
+      prevProps.customCSS !== this.props.customCSS
+    ) {
       this.applyStyle()
       this.rewriteIframe()
     }
   }
 
-  applyStyle () {
-    let { fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
+  getStyleParams () {
+    const {
+      fontSize,
+      lineNumber,
+      codeBlockTheme,
+      scrollPastEnd,
+      theme,
+      allowCustomCSS,
+      customCSS
+    } = this.props
+    let { fontFamily, codeBlockFontFamily } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
-      ? [fontFamily].concat(defaultFontFamily)
+      ? fontFamily
+          .split(',')
+          .map(fontName => fontName.trim())
+          .concat(defaultFontFamily)
       : defaultFontFamily
-    codeBlockFontFamily = _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
-      ? [codeBlockFontFamily].concat(defaultCodeBlockFontFamily)
+    codeBlockFontFamily = _.isString(codeBlockFontFamily) &&
+      codeBlockFontFamily.trim().length > 0
+      ? codeBlockFontFamily
+          .split(',')
+          .map(fontName => fontName.trim())
+          .concat(defaultCodeBlockFontFamily)
       : defaultCodeBlockFontFamily
 
-    this.setCodeTheme(codeBlockTheme)
-    this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, lineNumber)
+    return {
+      fontFamily,
+      fontSize,
+      codeBlockFontFamily,
+      lineNumber,
+      codeBlockTheme,
+      scrollPastEnd,
+      theme,
+      allowCustomCSS,
+      customCSS
+    }
   }
 
-  setCodeTheme (theme) {
-    theme = consts.THEMES.some((_theme) => _theme === theme) && theme !== 'default'
+  applyStyle () {
+    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,
+      theme,
+      allowCustomCSS,
+      customCSS
+    )
+  }
+
+  GetCodeThemeLink (theme) {
+    theme = consts.THEMES.some(_theme => _theme === theme) &&
+      theme !== 'default'
       ? theme
       : 'elegant'
-    this.getWindow().document.getElementById('codeTheme').href = theme.startsWith('solarized')
+    return theme.startsWith('solarized')
       ? `${appPath}/node_modules/codemirror/theme/solarized.css`
       : `${appPath}/node_modules/codemirror/theme/${theme}.css`
   }
 
   rewriteIframe () {
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
-      el.removeEventListener('click', this.anchorClickHandler)
-    })
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
-      el.removeEventListener('click', this.checkboxClickHandler)
-    })
+    _.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)
+      }
+    )
 
-    let { value, theme, indentSize, codeBlockTheme, 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 = 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('.taskListItem'), (el) => {
-      el.parentNode.parentNode.style.listStyleType = 'none'
-    })
-
-    _.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 = markdown.normalizeLinkText(el.src)
-      if (!/\/:storage/.test(el.src)) return
-      el.src = `file:///${markdown.normalizeLinkText(path.join(storagePath, 'images', path.basename(el.src)))}`
-    })
-
-    codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme)
+    codeBlockTheme = consts.THEMES.some(_theme => _theme === codeBlockTheme)
       ? codeBlockTheme
       : 'default'
 
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.code code'), (el) => {
-      let syntax = CodeMirror.findModeByName(el.className)
-      if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
-      CodeMirror.requireMode(syntax.mode, () => {
-        let content = 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} CodeMirror`
-        } else {
-          el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
-        }
-        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
+          })
         })
-      })
-    })
-    let opts = {}
+      }
+    )
+    const opts = {}
     // if (this.props.theme === 'dark') {
     //   opts['font-color'] = '#DDD'
     //   opts['line-color'] = '#DDD'
     //   opts['element-color'] = '#DDD'
     //   opts['fill'] = '#3A404C'
     // }
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.flowchart'), (el) => {
-      Raphael.setWindow(this.getWindow())
-      try {
-        let diagram = flowchart.parse(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 {
-        let 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 () {
@@ -401,11 +778,13 @@ export default class MarkdownPreview extends React.Component {
   }
 
   scrollTo (targetRow) {
-    let 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]
-      let row = parseInt(block.getAttribute('data-line'))
+      const row = parseInt(block.getAttribute('data-line'))
       if (row > targetRow || index === blocks.length - 1) {
         block = blocks[index - 1]
         block != null && this.getWindow().scrollTo(0, block.offsetTop)
@@ -421,25 +800,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()
-    const regexIsNoteLink = /^(.{20})-(.{20})$/
-    if (regexIsNoteLink.test(noteHash)) {
-      eventEmitter.emit('list:jump', noteHash)
+    e.preventDefault()
+    e.stopPropagation()
+
+    const href = e.target.href
+    const linkHash = href.split('/').pop()
+
+    const regexNoteInternalLink = /main.html#(.+)/
+    if (regexNoteInternalLink.test(linkHash)) {
+      const targetId = mdurl.encode(linkHash.match(regexNoteInternalLink)[1])
+      const targetElement = this.refs.root.contentWindow.document.getElementById(
+        targetId
+      )
+
+      if (targetElement != null) {
+        this.getWindow().scrollTo(0, targetElement.offsetTop)
+      }
+      return
     }
+
+    // this will match the new uuid v4 hash and the old hash
+    // e.g.
+    // :note:1c211eb7dcb463de6490 and
+    // :note:7dd23275-f2b4-49cb-9e93-3454daf1af9c
+    const regexIsNoteLink = /^:note:([a-zA-Z0-9-]{20,36})$/
+    if (regexIsNoteLink.test(linkHash)) {
+      eventEmitter.emit('list:jump', linkHash.replace(':note:', ''))
+      return
+    }
+
+    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(linkHash)) {
+      eventEmitter.emit('list:jump', linkHash.split('-')[1])
+      return
+    }
+
+    // other case
+    shell.openExternal(href)
   }
 
   render () {
-    let { className, style, tabIndex } = this.props
+    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}
@@ -454,8 +881,12 @@ MarkdownPreview.propTypes = {
   onDoubleClick: PropTypes.func,
   onMouseUp: PropTypes.func,
   onMouseDown: PropTypes.func,
+  onContextMenu: PropTypes.func,
   className: PropTypes.string,
   value: PropTypes.string,
   showCopyNotification: PropTypes.bool,
-  storagePath: PropTypes.string
+  storagePath: PropTypes.string,
+  smartQuotes: PropTypes.bool,
+  smartArrows: PropTypes.bool,
+  breaks: PropTypes.bool
 }

browser/components/MarkdownSplitEditor.js

@@ -0,0 +1,214 @@
+import React from 'react'
+import CodeEditor from 'browser/components/CodeEditor'
+import MarkdownPreview from 'browser/components/MarkdownPreview'
+import { findStorage } from 'browser/lib/findStorage'
+import _ from 'lodash'
+
+import styles from './MarkdownSplitEditor.styl'
+import CSSModules from 'browser/lib/CSSModules'
+
+class MarkdownSplitEditor extends React.Component {
+  constructor (props) {
+    super(props)
+    this.value = props.value
+    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 () {
+    this.value = this.refs.code.value
+    this.props.onChange()
+  }
+
+  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
+
+    if (this.userScroll) {
+      if (e.doc) {
+        srcTop = _.get(e, 'doc.scrollTop')
+        srcHeight = _.get(e, 'doc.height')
+        targetTop = _.get(previewDoc, 'body.scrollTop')
+        targetHeight = _.get(previewDoc, 'body.scrollHeight')
+      } else {
+        srcTop = _.get(previewDoc, 'body.scrollTop')
+        srcHeight = _.get(previewDoc, 'body.scrollHeight')
+        targetTop = _.get(codeDoc, 'scrollTop')
+        targetHeight = _.get(codeDoc, 'height')
+      }
+
+      const distance = (targetHeight * srcTop / srcHeight) - targetTop
+      const framerate = 1000 / 60
+      const frames = 20
+      const refractory = frames * framerate
+
+      this.userScroll = false
+
+      let frame = 0
+      let scrollPos, time
+      const timer = setInterval(() => {
+        time = frame / frames
+        scrollPos = time < 0.5
+                  ? 2 * time * time // ease in
+                  : -1 + (4 - 2 * time) * time // ease out
+        if (e.doc) _.set(previewDoc, 'body.scrollTop', targetTop + scrollPos * distance)
+        else _.get(this, 'refs.code.editor').scrollTo(0, targetTop + scrollPos * distance)
+        if (frame >= frames) {
+          clearInterval(timer)
+          setTimeout(() => { this.userScroll = true }, refractory)
+        }
+        frame++
+      }, framerate)
+    }
+  }
+
+  handleCheckboxClick (e) {
+    e.preventDefault()
+    e.stopPropagation()
+    const idMatch = /checkbox-([0-9]+)/
+    const checkedMatch = /^\s*[\+\-\*] \[x\]/i
+    const uncheckedMatch = /^\s*[\+\-\*] \[ \]/
+    const checkReplace = /\[x\]/i
+    const uncheckReplace = /\[ \]/
+    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
+        .split('\n')
+
+      const targetLine = lines[lineIndex]
+
+      if (targetLine.match(checkedMatch)) {
+        lines[lineIndex] = targetLine.replace(checkReplace, '[ ]')
+      }
+      if (targetLine.match(uncheckedMatch)) {
+        lines[lineIndex] = targetLine.replace(uncheckReplace, '[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, 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 = {}
+    previewStyle.width = (100 - this.state.codeEditorWidthInPercent) + '%'
+    if (this.props.ignorePreviewPointerEvents || this.state.isSliderFocused) previewStyle.pointerEvents = 'none'
+    return (
+      <div styleName='root' ref='root'
+        onMouseMove={e => this.handleMouseMove(e)}
+        onMouseUp={e => this.handleMouseUp(e)}>
+        <CodeEditor
+          styleName='codeEditor'
+          ref='code'
+          width={this.state.codeEditorWidthInPercent + '%'}
+          mode='Boost Flavored Markdown'
+          value={value}
+          theme={config.editor.theme}
+          keyMap={config.editor.keyMap}
+          fontFamily={config.editor.fontFamily}
+          fontSize={editorFontSize}
+          displayLineNumbers={config.editor.displayLineNumbers}
+          indentType={config.editor.indentType}
+          indentSize={editorIndentSize}
+          enableRulers={config.editor.enableRulers}
+          rulers={config.editor.rulers}
+          scrollPastEnd={config.editor.scrollPastEnd}
+          fetchUrlTitle={config.editor.fetchUrlTitle}
+          enableTableEditor={config.editor.enableTableEditor}
+          storageKey={storageKey}
+          noteKey={noteKey}
+          onChange={this.handleOnChange.bind(this)}
+          onScroll={this.handleScroll.bind(this)}
+          spellCheck={config.editor.spellcheck}
+          enableSmartPaste={config.editor.enableSmartPaste}
+          hotkey={config.hotkey}
+          switchPreview={config.editor.switchPreview}
+       />
+        <div styleName='slider' style={{left: this.state.codeEditorWidthInPercent + '%'}} onMouseDown={e => this.handleMouseDown(e)} >
+          <div styleName='slider-hitbox' />
+        </div>
+        <MarkdownPreview
+          style={previewStyle}
+          styleName='preview'
+          theme={config.ui.theme}
+          keyMap={config.editor.keyMap}
+          fontSize={config.preview.fontSize}
+          fontFamily={config.preview.fontFamily}
+          codeBlockTheme={config.preview.codeBlockTheme}
+          codeBlockFontFamily={config.editor.fontFamily}
+          lineNumber={config.preview.lineNumber}
+          scrollPastEnd={config.preview.scrollPastEnd}
+          smartQuotes={config.preview.smartQuotes}
+          smartArrows={config.preview.smartArrows}
+          breaks={config.preview.breaks}
+          sanitize={config.preview.sanitize}
+          ref='preview'
+          tabInde='0'
+          value={value}
+          onCheckboxClick={(e) => this.handleCheckboxClick(e)}
+          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>
+    )
+  }
+}
+
+export default CSSModules(MarkdownSplitEditor, styles)

browser/components/MarkdownSplitEditor.styl

@@ -0,0 +1,16 @@
+.root
+  width 100%
+  height 100%
+  font-size 30px
+  display flex
+  .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/ModalEscButton.js

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ModalEscButton.styl'
 

browser/components/NavToggleButton.js

@@ -1,7 +1,8 @@
 /**
 * @fileoverview Micro component for toggle SideNav
 */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import styles from './NavToggleButton.styl'
 import CSSModules from 'browser/lib/CSSModules'
 

browser/components/NavToggleButton.styl

@@ -9,6 +9,10 @@
   width 34px
   line-height 32px
   padding 0
+  &:hover
+    border: 1px solid #1EC38B;
+    background-color: alpha(#1EC38B, 30%)
+    border-radius: 50%;
 
 body[data-theme="white"]
   navWhiteButtonColor()

browser/components/NoteItem.js

@@ -1,12 +1,14 @@
 /**
  * @fileoverview Note item component.
  */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { isArray } from 'lodash'
 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.
@@ -22,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 }))
+  }
 }
 
 /**
@@ -45,46 +48,76 @@ const TagElementList = (tags) => {
  * @param {Function} handleDragStart
  * @param {string} dateDisplay
  */
-const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu, handleDragStart, pathname }) => (
-  <div styleName={isActive
-      ? 'item--active'
-      : 'item'
-    }
-    key={`${note.storage}-${note.key}`}
-    onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
-    onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+const NoteItem = ({
+  isActive,
+  note,
+  dateDisplay,
+  handleNoteClick,
+  handleNoteContextMenu,
+  handleDragStart,
+  pathname,
+  storageName,
+  folderName,
+  viewType,
+  showTagsAlphabetically
+}) => (
+  <div
+    styleName={isActive ? 'item--active' : 'item'}
+    key={note.key}
+    onClick={e => handleNoteClick(e, note.key)}
+    onContextMenu={e => handleNoteContextMenu(e, note.key)}
     onDragStart={e => handleDragStart(e, note)}
     draggable='true'
   >
     <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>
+      <div styleName='item-middle'>
+        <div styleName='item-middle-time'>{dateDisplay}</div>
+        <div styleName='item-middle-app-meta'>
+          <div
+            title={
+              viewType === 'ALL'
+                ? storageName
+                : viewType === 'STORAGE' ? folderName : null
+            }
+            styleName='item-middle-app-meta-label'
+          >
+            {viewType === 'ALL' && storageName}
+            {viewType === 'STORAGE' && folderName}
+          </div>
+        </div>
       </div>
-
-      <div styleName='item-bottom-time'>{dateDisplay}</div>
-      {note.isStarred
-        ? <img styleName='item-star' src='../resources/icon/icon-starred.svg' /> : ''
-      }
-      {note.isPinned && !pathname.match(/\/home|\/starred|\/trash/)
-        ? <i styleName='item-pin' className='fa fa-thumb-tack' /> : ''
-      }
-      {note.type === 'MARKDOWN_NOTE'
-        ? <TodoProcess todoStatus={getTodoStatus(note.content)} />
-        : ''
-      }
       <div styleName='item-bottom'>
         <div styleName='item-bottom-tagList'>
           {note.tags.length > 0
-            ? TagElementList(note.tags)
-            : <span styleName='item-bottom-tagList-empty' />
-          }
+            ? 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'
+              />
+            : ''}
+          {note.isPinned && !pathname.match(/\/starred|\/trash/)
+            ? <i styleName='item-pin' className='fa fa-thumb-tack' />
+            : ''}
+          {note.type === 'MARKDOWN_NOTE'
+            ? <TodoProcess todoStatus={getTodoStatus(note.content)} />
+            : ''}
         </div>
       </div>
     </div>
@@ -101,7 +134,11 @@ NoteItem.propTypes = {
     title: PropTypes.string.isrequired,
     tags: PropTypes.array,
     isStarred: PropTypes.bool.isRequired,
-    isTrashed: PropTypes.bool.isRequired
+    isTrashed: PropTypes.bool.isRequired,
+    blog: {
+      blogLink: PropTypes.string,
+      blogId: PropTypes.number
+    }
   }),
   handleNoteClick: PropTypes.func.isRequired,
   handleNoteContextMenu: PropTypes.func.isRequired,

browser/components/NoteItem.styl

@@ -73,6 +73,7 @@ $control-height = 30px
   position relative
   font-size 12px
   color $ui-inactive-text-color
+  top 2px
 
 .item-title
   font-size 15px
@@ -80,8 +81,8 @@ $control-height = 30px
   position relative
   top -12px
   left 20px
-  padding-right 15px
-  padding-bottom 4px
+  padding 0px 15px 0px 0px
+  margin-bottom 4px
   overflow ellipsis
   color $ui-inactive-text-color
 
@@ -89,6 +90,26 @@ $control-height = 30px
   font-weight normal
   color $ui-inactive-text-color
 
+.item-middle
+  font-size 13px
+  padding-left 2px
+  padding-bottom 2px
+
+.item-middle-time
+  color $ui-inactive-text-color
+  display inline-block
+
+.item-middle-app-meta
+  float right
+  .item-middle-app-meta-label
+    opacity 0.4
+    color $ui-inactive-text-color
+    padding 0 3px
+    white-space nowrap
+    text-overflow ellipsis
+    overflow hidden
+    max-width 200px
+
 .item-bottom
   position relative
   bottom 0px
@@ -96,7 +117,7 @@ $control-height = 30px
   font-size 12px
   line-height 20px
   overflow ellipsis
-  display flex
+  display block
 
 .item-bottom-tagList
   flex 1
@@ -124,10 +145,8 @@ $control-height = 30px
 
 .item-star
   position absolute
-  right -6px
-  bottom 23px
-  width 16px
-  height 16px
+  right 2px
+  top 5px
   color alpha($ui-favorite-star-button-color, 60%)
   font-size 12px
   padding 0
@@ -135,10 +154,8 @@ $control-height = 30px
 
 .item-pin
   position absolute
-  right 0px
-  bottom 2px
-  width 34px
-  height 34px
+  right 25px
+  top 7px
   color #E54D42
   font-size 14px
   padding 0
@@ -191,7 +208,7 @@ body[data-theme="dark"]
       .item-bottom-tagList-item
         transition 0.15s
         background-color alpha(white, 10%)
-        color $ui-dark-text-color  
+        color $ui-dark-text-color
 
   .item-wrapper
     border-color alpha($ui-dark-button--active-backgroundColor, 60%)
@@ -230,3 +247,223 @@ body[data-theme="dark"]
   .item-bottom-tagList-empty
     color $ui-inactive-text-color
     vertical-align middle
+
+
+body[data-theme="solarized-dark"]
+  .root
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+  .item
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      // background-color alpha($ui-solarized-dark-noteList-backgroundColor, 20%)
+      color $ui-solarized-dark-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-solarized-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-solarized-dark-noteList-backgroundColor, 20%)
+        color $ui-solarized-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-solarized-dark-noteList-backgroundColor
+      color $ui-solarized-dark-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-solarized-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-solarized-dark-noteList-backgroundColor, 10%)
+        color $ui-solarized-dark-text-color
+
+  .item-wrapper
+    border-color alpha($ui-solarized-dark-button--active-backgroundColor, 60%)
+
+  .item--active
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-button-backgroundColor
+    .item-wrapper
+      border-color transparent
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      color $ui-solarized-dark-text-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 10%)
+      color $ui-solarized-dark-text-color
+    &:hover
+      // background-color alpha($ui-solarized-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-bottom-tagList-item
+        background-color alpha(#fff, 20%)
+
+  .item-title
+    color $ui-inactive-text-color
+
+  .item-title-icon
+    color $ui-inactive-text-color
+
+  .item-title-empty
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-item
+    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-empty
+    color $ui-inactive-text-color
+    vertical-align middle
+
+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

@@ -1,9 +1,11 @@
 /**
  * @fileoverview Note item component with simple display mode.
  */
-import React, { PropTypes } from 'react'
+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.
@@ -13,14 +15,23 @@ import styles from './NoteItemSimple.styl'
  * @param {Function} handleNoteContextMenu
  * @param {Function} handleDragStart
  */
-const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu, handleDragStart }) => (
+const NoteItemSimple = ({
+  isActive,
+  isAllNotesView,
+  note,
+  handleNoteClick,
+  handleNoteContextMenu,
+  handleDragStart,
+  pathname,
+  storage
+}) => (
   <div styleName={isActive
-      ? 'item-simple--active'
-      : 'item-simple'
-    }
-    key={`${note.storage}-${note.key}`}
-    onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
-    onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+    ? 'item-simple--active'
+    : 'item-simple'
+  }
+    key={note.key}
+    onClick={e => handleNoteClick(e, note.key)}
+    onContextMenu={e => handleNoteContextMenu(e, note.key)}
     onDragStart={e => handleDragStart(e, note)}
     draggable='true'
   >
@@ -29,10 +40,19 @@ const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu
         ? <i styleName='item-simple-title-icon' className='fa fa-fw fa-code' />
         : <i styleName='item-simple-title-icon' className='fa fa-fw fa-file-text-o' />
       }
+      {note.isPinned && !pathname.match(/\/starred|\/trash/)
+        ? <i styleName='item-pin' className='fa fa-thumb-tack' />
+        : ''
+      }
       {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'>
+          {storage.name}
+        </span>
+      </div>}
     </div>
   </div>
 )

browser/components/NoteItemSimple.styl

@@ -50,6 +50,7 @@ $control-height = 30px
 .item-simple-title
   font-size 13px
   height 40px
+  padding-right 20px
   box-sizing border-box
   line-height 24px
   padding-top 8px
@@ -67,6 +68,15 @@ $control-height = 30px
   font-weight normal
   color $ui-inactive-text-color
 
+.item-pin
+  position absolute
+  right 0px
+  top 12px
+  color #E54D42
+  font-size 14px
+  padding 0
+  border-radius 17px
+
 body[data-theme="white"]
   .item-simple
     background-color $ui-white-noteList-backgroundColor
@@ -94,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
@@ -107,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
@@ -114,7 +126,7 @@ body[data-theme="dark"]
       .item-simple-bottom-tagList-item
         transition 0.15s
         background-color alpha(white, 10%)
-        color $ui-dark-text-color  
+        color $ui-dark-text-color
 
   .item-simple--active
     border-color $ui-dark-borderColor
@@ -122,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
@@ -143,3 +156,197 @@ body[data-theme="dark"]
 
   .item-simple-title-empty
     color $ui-dark-inactive-text-color
+
+
+body[data-theme="solarized-dark"]
+  .root
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+  .item-simple
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      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
+        color $ui-solarized-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#fff, 20%)
+        color $ui-solarized-dark-text-color
+    &:active
+      transition 0.15s
+      // 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
+        color $ui-solarized-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-solarized-dark-text-color
+
+  .item-simple--active
+    border-color $ui-solarized-dark-borderColor
+    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
+      background-color alpha(white, 10%)
+      color $ui-solarized-dark-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="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.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './RealtimeNotification.styl'
 

browser/components/RealtimeNotification.styl

@@ -1,11 +1,8 @@
 .notification-area
   z-index 1000
   font-size 12px
-  position absolute
-  bottom 20px
-  width 100%
-  float left
-  height 30px
+  position: relative
+  top: 12px
   background-color none
 
 .notification-link
@@ -32,3 +29,37 @@ body[data-theme="dark"]
     transition 0.2s
     &:hover
       color #5CB85C
+
+
+body[data-theme="solarized-dark"]
+  .notification-area
+    background-color none
+
+  .notification-link
+    color $ui-solarized-dark-text-color
+    border none
+    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

@@ -1,9 +1,11 @@
 /**
  * @fileoverview Filter for all notes.
  */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SideNavFilter.styl'
+import i18n from 'browser/lib/i18n'
 
 /**
  * @param {boolean} isFolded
@@ -16,7 +18,7 @@ import styles from './SideNavFilter.styl'
 const SideNavFilter = ({
   isFolded, isHomeActive, handleAllNotesButtonClick,
   isStarredActive, handleStarredButtonClick, isTrashedActive, handleTrashedButtonClick, counterDelNote,
-  counterTotalNote, counterStarredNote
+  counterTotalNote, counterStarredNote, handleFilterButtonContextMenu
 }) => (
   <div styleName={isFolded ? 'menu--folded' : 'menu'}>
 
@@ -25,12 +27,12 @@ const SideNavFilter = ({
     >
       <div styleName='iconWrap'>
         <img src={isHomeActive
-            ? '../resources/icon/icon-all-active.svg'
-            : '../resources/icon/icon-all.svg'
-          }
+          ? '../resources/icon/icon-all-active.svg'
+          : '../resources/icon/icon-all.svg'
+        }
         />
       </div>
-      <span styleName='menu-button-label'>All Notes</span>
+      <span styleName='menu-button-label'>{i18n.__('All Notes')}</span>
       <span styleName='counters'>{counterTotalNote}</span>
     </button>
 
@@ -39,26 +41,26 @@ const SideNavFilter = ({
     >
       <div styleName='iconWrap'>
         <img src={isStarredActive
-            ? '../resources/icon/icon-star-active.svg'
-            : '../resources/icon/icon-star.svg'
-          }
+          ? '../resources/icon/icon-star-active.svg'
+          : '../resources/icon/icon-star-sidenav.svg'
+        }
         />
       </div>
-      <span styleName='menu-button-label'>Starred</span>
+      <span styleName='menu-button-label'>{i18n.__('Starred')}</span>
       <span styleName='counters'>{counterStarredNote}</span>
     </button>
 
     <button styleName={isTrashedActive ? 'menu-button-trash--active' : 'menu-button'}
-      onClick={handleTrashedButtonClick}
+      onClick={handleTrashedButtonClick} onContextMenu={handleFilterButtonContextMenu}
     >
       <div styleName='iconWrap'>
         <img src={isTrashedActive
-            ? '../resources/icon/icon-trash-active.svg'
-            : '../resources/icon/icon-trash.svg'
-          }
+          ? '../resources/icon/icon-trash-active.svg'
+          : '../resources/icon/icon-trash-sidenav.svg'
+        }
         />
       </div>
-      <span styleName='menu-button-label'>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
@@ -55,19 +55,22 @@
 
 .menu--folded
   @extend .menu
-  .menu-button, .menu-button--active
+  .menu-button, .menu-button--active, .menu-button-star--active, .menu-button-trash--active
     text-align center
+    padding 0 12px
     &:hover .menu-button-label
       transition opacity 0.15s
       opacity 1
+      color $ui-tooltip-text-color
+      background-color $ui-tooltip-backgroundColor
+
 
   .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
@@ -88,7 +91,6 @@ body[data-theme="white"]
     color $ui-inactive-text-color
 
   .menu-button--active
-    @extend .menu-button
     color #e74c3c
     background-color $ui-button--active-backgroundColor
     .menu-button-label
@@ -105,7 +107,6 @@ body[data-theme="white"]
         color $ui-text-color
 
   .menu-button-star--active
-    @extend .menu-button
     color #F9BF3B
     background-color $ui-button--active-backgroundColor
     .menu-button-label
@@ -122,7 +123,6 @@ body[data-theme="white"]
         color $ui-text-color
 
   .menu-button-trash--active
-    @extend .menu-button
     color #5D9E36
     background-color $ui-button--active-backgroundColor
     .menu-button-label
@@ -178,4 +178,131 @@ body[data-theme="dark"]
       background-color alpha($ui-dark-button--active-backgroundColor, 50%)
       color #5D9E36
       .menu-button-label
-        color $ui-dark-text-color
+        color $ui-dark-text-color
+
+
+body[data-theme="solarized-dark"]
+  .menu-button
+    &:active
+      background-color $ui-solarized-dark-noteList-backgroundColor
+      color $ui-solarized-dark-text-color
+    &:hover
+      background-color $ui-solarized-dark-button-backgroundColor
+      color $ui-solarized-dark-text-color
+
+  .menu-button--active
+    color $ui-solarized-dark-text-color
+    background-color $ui-solarized-dark-button-backgroundColor
+    .menu-button-label
+      color $ui-solarized-dark-text-color
+    &:hover
+      background-color $ui-solarized-dark-button-backgroundColor
+      color $ui-solarized-dark-text-color
+      .menu-button-label
+        color $ui-solarized-dark-text-color
+
+  .menu-button-star--active
+    color $ui-solarized-dark-text-color
+    background-color $ui-solarized-dark-button-backgroundColor
+    .menu-button-label
+      color $ui-solarized-dark-text-color
+    &:hover
+      background-color $ui-solarized-dark-button-backgroundColor
+      color $ui-solarized-dark-text-color
+      .menu-button-label
+        color $ui-solarized-dark-text-color
+
+  .menu-button-trash--active
+    color $ui-solarized-dark-text-color
+    background-color $ui-solarized-dark-button-backgroundColor
+    .menu-button-label
+      color $ui-solarized-dark-text-color
+    &:hover
+      background-color $ui-solarized-dark-button-backgroundColor
+      color $ui-solarized-dark-text-color
+      .menu-button-label
+        color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .menu-button
+    &:active
+      background-color $ui-monokai-noteList-backgroundColor
+      color $ui-monokai-text-color
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color
+
+  .menu-button--active
+    color $ui-monokai-text-color
+    background-color $ui-monokai-button-backgroundColor
+    .menu-button-label
+      color $ui-monokai-text-color
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color
+      .menu-button-label
+        color $ui-monokai-text-color
+
+  .menu-button-star--active
+    color $ui-monokai-text-color
+    background-color $ui-monokai-button-backgroundColor
+    .menu-button-label
+      color $ui-monokai-text-color
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color
+      .menu-button-label
+        color $ui-monokai-text-color
+
+  .menu-button-trash--active
+    color $ui-monokai-text-color
+    background-color $ui-monokai-button-backgroundColor
+    .menu-button-label
+      color $ui-monokai-text-color
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color
+      .menu-button-label
+        color $ui-monokai-text-color
+
+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
     }
   }
@@ -85,8 +86,17 @@ class SnippetTab extends React.Component {
     })
   }
 
+  handleDragStart (e) {
+    e.dataTransfer.dropEffect = 'move'
+    this.props.onDragStart(e)
+  }
+
+  handleDrop (e) {
+    this.props.onDrop(e)
+  }
+
   render () {
-    let { isActive, snippet, isDeletable } = this.props
+    const { isActive, snippet, isDeletable } = this.props
     return (
       <div styleName={isActive
           ? 'root--active'
@@ -98,11 +108,14 @@ class SnippetTab extends React.Component {
             onClick={(e) => this.handleClick(e)}
             onDoubleClick={(e) => this.handleRenameClick(e)}
             onContextMenu={(e) => this.handleContextMenu(e)}
+            onDragStart={(e) => this.handleDragStart(e)}
+            onDrop={(e) => this.handleDrop(e)}
+            draggable='true'
           >
             {snippet.name.trim().length > 0
               ? snippet.name
               : <span styleName='button-unnamed'>
-                Unnamed
+                {i18n.__('Unnamed')}
               </span>
             }
           </button>
@@ -127,6 +140,7 @@ class SnippetTab extends React.Component {
 }
 
 SnippetTab.propTypes = {
+
 }
 
 export default CSSModules(SnippetTab, styles)

browser/components/SnippetTab.styl

@@ -1,6 +1,7 @@
 .root
   position relative
   flex 1
+  min-width 70px
   overflow hidden
   &:hover
     .deleteButton
@@ -21,7 +22,7 @@
   height 29px
   overflow ellipsis
   text-align left
-  padding-right 30px
+  padding-right 23px
   border none
   background-color transparent
   transition 0.15s
@@ -38,7 +39,7 @@
   text-align center
   border none
   padding 0
-  color transparent
+  color $ui-inactive-text-color
   background-color transparent
   border-radius 2px
 
@@ -89,3 +90,138 @@ body[data-theme="dark"]
   .input
     background-color $ui-dark-button--hover-backgroundColor
     color $ui-dark-text-color
+
+  .deleteButton
+    color alpha($ui-dark-text-color, 30%)
+
+body[data-theme="solarized-dark"]
+  .root
+    color $ui-solarized-dark-text-color
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-solarized-dark-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-solarized-dark-text-color
+        &:hover
+          background-color darken($ui-solarized-dark-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-solarized-dark-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .root--active
+    color $ui-solarized-dark-text-color
+    border-color $ui-solarized-dark-borderColor
+    &:hover
+      background-color $ui-solarized-dark-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-solarized-dark-text-color
+        &:hover
+          background-color darken($ui-solarized-dark-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-solarized-dark-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .button
+    border none
+    color $ui-solarized-dark-text-color
+    background-color transparent
+    transition color background-color 0.15s
+    border-left 4px solid transparent
+    &:hover
+      color $ui-solarized-dark-text-color
+      background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+  .input
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    color $ui-solarized-dark-text-color
+
+  .deleteButton
+    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

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

browser/components/StorageItem.styl

@@ -13,6 +13,7 @@
   border none
   overflow ellipsis
   font-size 14px
+  align-items: center
   &:first-child
     margin-top 0
   &:hover
@@ -22,7 +23,7 @@
   &:active
     color $$ui-button-default-color
     background-color alpha($ui-button-default--active-backgroundColor, 20%)
-    
+
 .folderList-item--active
   @extend .folderList-item
   color #1EC38B
@@ -34,9 +35,7 @@
 .folderList-item-name
   display block
   flex 1
-  padding 0 12px
-  height 26px
-  line-height 26px
+  padding-right: 10px
   border-width 0 0 0 2px
   border-style solid
   border-color transparent
@@ -59,8 +58,8 @@
   opacity 0
   border-top-right-radius 2px
   border-bottom-right-radius 2px
-  height 26px
-  line-height 26px
+  height 34px
+  line-height 32px
 
 .folderList-item:hover, .folderList-item--active:hover
   .folderList-item-tooltip
@@ -68,9 +67,20 @@
 
 .folderList-item-name--folded
   @extend .folderList-item-name
-  padding-left 17px
-  text
-    display none
+  padding-left 7px
+  .folderList-item-icon
+    font-size 9px
+
+.folderList-item-icon
+  padding-right: 10px
+
+.folderList-item-reorder
+  font-size: 9px
+  padding: 10px 8px 10px 9px;
+  color: rgba(147, 147, 149, 0.3)
+  cursor: ns-resize
+  &:before
+    content: "\f142 \f142"
 
 body[data-theme="white"]
   .folderList-item
@@ -108,4 +118,61 @@ body[data-theme="dark"]
       background-color alpha($ui-dark-button--active-backgroundColor, 50%)
     &:hover
       color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+
+body[data-theme="solarized-dark"]
+  .folderList-item
+    &:hover
+      background-color $ui-solarized-dark-button-backgroundColor
+      color $ui-solarized-dark-text-color
+    &:active
+      color $ui-solarized-dark-text-color
+      background-color $ui-solarized-dark-button-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-solarized-dark-text-color
+    background-color $ui-solarized-dark-button-backgroundColor
+    &:active
+      background-color $ui-solarized-dark-button-backgroundColor
+    &: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

@@ -1,23 +1,24 @@
 /**
 * @fileoverview Micro component for showing StorageList
 */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 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

@@ -1,22 +1,34 @@
 /**
 * @fileoverview Micro component for showing TagList.
 */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import styles from './TagListItem.styl'
 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}) => (
-  <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
-    <span styleName='tagList-item-name'>
-      {`# ${name}`}
-    </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
@@ -48,6 +65,12 @@
   overflow hidden
   text-overflow ellipsis
 
+.tagList-item-count
+  float right
+  line-height 26px
+  padding-right 15px
+  font-size 13px
+
 body[data-theme="white"]
   .tagList-item
     color $ui-inactive-text-color
@@ -63,6 +86,8 @@ body[data-theme="white"]
     color $ui-text-color
     &:hover
       background-color alpha($ui-button--active-backgroundColor, 60%)
+  .tagList-item-count
+    color $ui-text-color
 
 body[data-theme="dark"]
   .tagList-item
@@ -81,4 +106,6 @@ body[data-theme="dark"]
       background-color alpha($ui-dark-button--active-backgroundColor, 50%)
     &:hover
       color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+  .tagList-item-count
+    color $ui-dark-button--active-color

browser/components/TodoListPercentage.js

@@ -2,7 +2,8 @@
  * @fileoverview Percentage of todo achievement.
  */
 
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TodoListPercentage.styl'
 
@@ -11,17 +12,23 @@ import styles from './TodoListPercentage.styl'
  */
 
 const TodoListPercentage = ({
-  percentageOfTodo
+  percentageOfTodo, onClearCheckboxClick
 }) => (
   <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
     <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
-      <p styleName='percentageText'>{percentageOfTodo}%</p>
+      <div styleName='progressBarInner'>
+        <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,6 +1,7 @@
 .percentageBar
+  display: flex
   position absolute
-  top 50px
+  top 72px
   right 0px
   left 0px
   background-color #DADFE1
@@ -16,17 +17,79 @@
   border-radius 2px
   transition 0.4s cubic-bezier(0.4, 0.4, 0, 1)
 
+.progressBarInner
+  padding 0 10px
+  min-width 1px
+  height 100%
+  display -webkit-box
+  display box
+  justify-content center
+  align-items center
+
+
 .percentageText
   color #f4f4f4
-  padding: 2px 43%
   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 #363A3D
+    background-color #444444
 
   .progressBar
-    background-color: alpha(#939395, 50%)
+    background-color: #1EC38B
 
   .percentageText
-    color $ui-dark-text-color
+    color $ui-dark-text-color
+  
+  .todoClearText
+    color $ui-dark-text-color
+
+body[data-theme="solarized-dark"]
+  .percentageBar
+    background-color #002b36
+
+  .progressBar
+    background-color: #2aa198
+
+  .percentageText
+    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/TodoProcess.js

@@ -2,7 +2,8 @@
  * @fileoverview Percentage of todo achievement.
  */
 
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TodoProcess.styl'
 

browser/components/markdown.styl

@@ -58,7 +58,7 @@ body
   .katex
     font 400 1.2em 'KaTeX_Main'
     line-height 1.2em
-    white-space nowrap
+    white-space initial
     text-indent 0
   .katex .mfrac>.vlist>span:nth-child(2)
     top 0 !important
@@ -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
@@ -76,7 +76,13 @@ body
     justify-content left
 li
   label.taskListItem
-    margin-left -2em
+    margin-left -1.8em
+    &.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
@@ -102,7 +108,6 @@ a
   border-radius 5px
   margin -5px
   transition .1s
-  display inline-block
   img
     vertical-align sub
   &:hover
@@ -117,6 +122,7 @@ hr
   margin 15px 0
 h1, h2, h3, h4, h5, h6
   font-weight bold
+  word-wrap break-word
 h1
   font-size 2.55em
   padding-bottom 0.3em
@@ -154,6 +160,7 @@ p
   line-height 1.6em
   margin 0 0 1em
   white-space pre-line
+  word-wrap break-word
 img
   max-width 100%
 strong, b
@@ -174,6 +181,8 @@ ul
   margin-bottom 1em
   li
     display list-item
+    &.taskListItem
+      list-style none
     p
       margin 0
   &>li>ul, &>li>ol
@@ -193,7 +202,6 @@ ol
   &>li>ul, &>li>ol
     margin 0
 code
-  color #CC305F
   padding 0.2em 0.4em
   background-color #f7f7f7
   border-radius 3px
@@ -201,33 +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
-    &>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
+    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
@@ -244,6 +258,7 @@ table
   display block
   width 100%
   margin 0 0 1em
+  overflow-x auto
   thead
     tr
       background-color tableHeadBgColor
@@ -280,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%)
@@ -329,4 +465,121 @@ body[data-theme="dark"]
           border-right solid 1px themeDarkTableBorder
   kbd
     background-color themeDarkBorder
-    color themeDarkText
+    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%)
+themeSolarizedDarkTableHead = themeSolarizedDarkTableEven
+themeSolarizedDarkTableBorder = themeDarkBorder
+
+body[data-theme="solarized-dark"]
+  color $ui-solarized-dark-text-color
+  border-color themeDarkBorder
+  background-color $ui-solarized-dark-noteDetail-backgroundColor
+  table
+    thead
+      tr
+        background-color themeSolarizedDarkTableHead
+      th
+        border-color themeSolarizedDarkTableBorder
+        &:last-child
+          border-right solid 1px themeSolarizedDarkTableBorder
+    tbody
+      tr:nth-child(2n + 1)
+        background-color themeSolarizedDarkTableOdd
+      tr:nth-child(2n)
+        background-color themeSolarizedDarkTableEven
+      td
+        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'
+    }
+    const 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/finder/FinderMain.styl

@@ -1,118 +0,0 @@
-$search-height = 50px
-$nav-width = 175px
-$list-width = 250px
-
-.root
-  absolute top left right bottom
-
-.search
-  height $search-height
-  padding 10px
-  box-sizing border-box
-  border-bottom $ui-border
-  text-align center
-
-.search-input
-  height 30px
-  width 100%
-  margin 0 auto
-  font-size 18px
-  border none
-  outline none
-  text-align center
-  background-color transparent
-
-.result
-  absolute left right bottom
-  top $search-height
-  background-color $ui-noteDetail-backgroundColor
-
-.result-nav
-  user-select none
-  absolute left top bottom
-  width $nav-width
-  background-color $ui-backgroundColor
-
-.result-nav-filter
-  margin-bottom 10px
-
-.result-nav-filter-option
-  height 25px
-  line-height 25px
-  padding 0 10px
-  label
-    cursor pointer
-
-.result-nav-menu
-  navButtonColor()
-  height 32px
-  padding 0 10px
-  font-size 14px
-  width 100%
-  outline none
-  text-align left
-  line-height 32px
-  box-sizing border-box
-  cursor pointer
-
-.result-nav-menu--active
-  @extend .result-nav-menu
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-
-.result-nav-storageList
-  absolute bottom left right
-  top 110px + 32px + 10px + 10px + 20px
-  overflow-y auto
-
-.result-list
-  user-select none
-  absolute top bottom
-  left $nav-width
-  width $list-width
-  box-sizing border-box
-  overflow-y auto
-  box-shadow 2px 0 15px -8px #b1b1b1
-  z-index 1
-
-.result-detail
-  absolute top bottom right
-  left $nav-width + $list-width
-  background-color $ui-noteDetail-backgroundColor
-
-body[data-theme="dark"]
-  .root
-    background-color $ui-dark-backgroundColor
-  .search
-    border-color $ui-dark-borderColor
-  .search-input
-    color $ui-dark-text-color
-
-  .result
-    background-color $ui-dark-noteList-backgroundColor
-
-  .result-nav
-    background-color $ui-dark-backgroundColor
-    label
-      color $ui-dark-text-color
-
-  .result-nav-menu
-    navDarkButtonColor()
-
-  .result-nav-menu--active
-    background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-button--active-color
-    &:hover
-      background-color $ui-dark-button--active-backgroundColor
-
-  .result-list
-    border-color $ui-dark-borderColor
-    box-shadow none
-    top 0
-
-  .result-detail
-    absolute top bottom right
-    left $nav-width + $list-width
-    background-color $ui-dark-noteDetail-backgroundColor

browser/finder/NoteDetail.js

@@ -1,209 +0,0 @@
-import React from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './NoteDetail.styl'
-import MarkdownPreview from 'browser/components/MarkdownPreview'
-import MarkdownEditor from 'browser/components/MarkdownEditor'
-import CodeEditor from 'browser/components/CodeEditor'
-import CodeMirror from 'codemirror'
-import { findStorage } from 'browser/lib/findStorage'
-
-const electron = require('electron')
-const { clipboard } = electron
-const path = require('path')
-
-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
-  }
-}
-function notify (title, options) {
-  if (global.process.platform === 'win32') {
-    options.icon = path.join('file://', global.__dirname, '../../resources/app.png')
-  }
-  return new window.Notification(title, options)
-}
-
-class NoteDetail extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      snippetIndex: 0
-    }
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.note !== this.props.note) {
-      this.setState({
-        snippetIndex: 0
-      }, () => {
-        if (nextProps.note.type === 'SNIPPET_NOTE') {
-          nextProps.note.snippets.forEach((snippet, index) => {
-            this.refs['code-' + index].reload()
-          })
-        }
-      })
-    }
-  }
-
-  selectPriorSnippet () {
-    let { note } = this.props
-    if (note.type === 'SNIPPET_NOTE' && note.snippets.length > 1) {
-      this.setState({
-        snippetIndex: (this.state.snippetIndex + note.snippets.length - 1) % note.snippets.length
-      })
-    }
-  }
-
-  selectNextSnippet () {
-    let { note } = this.props
-    if (note.type === 'SNIPPET_NOTE' && note.snippets.length > 1) {
-      this.setState({
-        snippetIndex: (this.state.snippetIndex + 1) % note.snippets.length
-      })
-    }
-  }
-
-  saveToClipboard () {
-    let { note } = this.props
-
-    if (note.type === 'MARKDOWN_NOTE') {
-      clipboard.writeText(note.content)
-    } else {
-      clipboard.writeText(note.snippets[this.state.snippetIndex].content)
-    }
-
-    notify('Saved to Clipboard!', {
-      body: 'Paste it wherever you want!',
-      silent: true
-    })
-  }
-
-  handleTabButtonClick (e, index) {
-    this.setState({
-      snippetIndex: index
-    })
-  }
-
-  render () {
-    let { note, config } = this.props
-    if (note == null) {
-      return (
-        <div styleName='root' />
-      )
-    }
-
-    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 storage = findStorage(note.storage)
-
-    if (note.type === 'SNIPPET_NOTE') {
-      let tabList = note.snippets.map((snippet, index) => {
-        let isActive = this.state.snippetIndex === index
-        return <div styleName={isActive
-            ? 'tabList-item--active'
-            : 'tabList-item'
-          }
-          key={index}
-        >
-          <button styleName='tabList-item-button'
-            onClick={(e) => this.handleTabButtonClick(e, index)}
-          >
-            {snippet.name.trim().length > 0
-              ? snippet.name
-              : <span styleName='tabList-item-unnamed'>
-                Unnamed
-              </span>
-            }
-          </button>
-        </div>
-      })
-
-      let viewList = note.snippets.map((snippet, index) => {
-        let isActive = this.state.snippetIndex === index
-
-        let syntax = CodeMirror.findModeByName(pass(snippet.mode))
-        if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
-
-        return <div styleName='tabView'
-          key={index}
-          style={{zIndex: isActive ? 5 : 4}}
-        >
-          {snippet.mode === 'markdown'
-            ? <MarkdownEditor styleName='tabView-content'
-              config={config}
-              value={snippet.content}
-              ref={'code-' + index}
-              storageKey={note.storage}
-            />
-            : <CodeEditor styleName='tabView-content'
-              mode={snippet.mode}
-              value={snippet.content}
-              theme={config.editor.theme}
-              fontFamily={config.editor.fontFamily}
-              fontSize={editorFontSize}
-              indentType={config.editor.indentType}
-              indentSize={editorIndentSize}
-              keyMap={config.editor.keyMap}
-              readOnly
-              ref={'code-' + index}
-            />
-          }
-        </div>
-      })
-
-      return (
-        <div styleName='root'>
-          <div styleName='description'>
-            <textarea styleName='description-textarea'
-              style={{
-                fontFamily: config.preview.fontFamily,
-                fontSize: parseInt(config.preview.fontSize, 10)
-              }}
-              ref='description'
-              placeholder='Description...'
-              value={note.description}
-              readOnly
-            />
-          </div>
-          <div styleName='tabList'>
-            {tabList}
-          </div>
-          {viewList}
-        </div>
-      )
-    }
-
-    return (
-      <MarkdownPreview styleName='root'
-        theme={config.ui.theme}
-        fontSize={config.preview.fontSize}
-        fontFamily={config.preview.fontFamily}
-        codeBlockTheme={config.preview.codeBlockTheme}
-        codeBlockFontFamily={config.editor.fontFamily}
-        lineNumber={config.preview.lineNumber}
-        indentSize={editorIndentSize}
-        value={note.content}
-        showCopyNotification={config.ui.showCopyNotification}
-        storagePath={storage.path}
-      />
-    )
-  }
-}
-
-NoteDetail.propTypes = {
-}
-
-export default CSSModules(NoteDetail, styles)

browser/finder/NoteDetail.styl

@@ -1,98 +0,0 @@
-@import('../main/Detail/DetailVars.styl')
-
-.root
-  absolute top bottom left right
-  bottom 30px
-  left $note-detail-left-margin
-  right $note-detail-right-margin
-  height 100%
-  width 365px
-  background-color $ui-noteDetail-backgroundColor
-
-.description
-  absolute top left right
-  height 80px
-  box-sizing border-box
-
-.description-textarea
-  display block
-  height 100%
-  width 100%
-  resize none
-  border none
-  padding 10px
-  line-height 1.6
-  box-sizing border-box
-  background-color $ui-noteDetail-backgroundColor
-
-.tabList
-  absolute left right
-  top 80px
-  box-sizing border-box
-  height 30px
-  display flex
-  background-color $ui-noteDetail-backgroundColor
-
-.tabList-item
-  position relative
-  flex 1
-  overflow hidden
-  &:hover
-    background-color $ui-button--hover-backgroundColorg
-
-.tabList-item--active
-  @extend .tabList-item
-  border-bottom $ui-border
-
-.tabList-item-button
-  width 100%
-  height 29px
-  overflow ellipsis
-  text-align left
-  padding-right 30px
-  padding-left 10px
-  border none
-  background-color transparent
-  transition 0.15s
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-
-.tabView
-  absolute left right bottom
-  top 130px
-
-.tabView-content
-  absolute top left right bottom
-  box-sizing border-box
-  height 100%
-  width 100%
-
-body[data-theme="dark"]
-  .root
-    background-color $ui-dark-noteDetail-backgroundColor
-
-  .description
-    border-color $ui-dark-borderColor
-    background-color $ui-dark-noteDetail-backgroundColor
-
-  .description-textarea
-    background-color $ui-dark-noteDetail-backgroundColor
-    color white
-
-  .tabList
-    background-color $ui-dark-noteDetail-backgroundColor
-
-  .tabList-item
-    border-color $ui-dark-borderColor
-    &:hover
-      background-color $ui-dark-button--hover-backgroundColor
-
-  .tabList-item-button
-    border none
-    color $ui-dark-text-color
-    background-color transparent
-    transition color background-color 0.15s
-    border-left 4px solid transparent
-    &:hover
-      color white
-      background-color $ui-dark-button--hover-backgroundColor

browser/finder/NoteList.js

@@ -1,90 +0,0 @@
-import React from 'react'
-import NoteItem from 'browser/components/NoteItem'
-import moment from 'moment'
-
-class NoteList extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      range: 0
-    }
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (this.props.search !== nextProps.search) {
-      this.resetScroll()
-    }
-  }
-
-  componentDidUpdate () {
-    let { index } = this.props
-
-    if (index > -1) {
-      let list = this.refs.root
-      let item = list.childNodes[index]
-      if (item == null) return null
-
-      let overflowBelow = item.offsetTop + item.clientHeight - list.clientHeight - list.scrollTop > 0
-      if (overflowBelow) {
-        list.scrollTop = item.offsetTop + item.clientHeight - list.clientHeight
-      }
-      let overflowAbove = list.scrollTop > item.offsetTop
-      if (overflowAbove) {
-        list.scrollTop = item.offsetTop
-      }
-    }
-  }
-
-  resetScroll () {
-    this.refs.root.scrollTop = 0
-    this.setState({
-      range: 0
-    })
-  }
-
-  handleScroll (e) {
-    let { notes } = this.props
-
-    if (e.target.offsetHeight + e.target.scrollTop > e.target.scrollHeight - 100 && notes.length > this.state.range * 10 + 10) {
-      this.setState({
-        range: this.state.range + 1
-      })
-    }
-  }
-
-  render () {
-    let { notes, index } = this.props
-
-    let notesList = notes
-      .slice(0, 10 + 10 * this.state.range)
-      .map((note, _index) => {
-        const isActive = (index === _index)
-        const key = `${note.storage}-${note.key}`
-        const dateDisplay = moment(note.updatedAt).fromNow()
-
-        return (
-          <NoteItem
-            isActive={isActive}
-            note={note}
-            dateDisplay={dateDisplay}
-            key={key}
-            handleNoteClick={(e) => this.props.handleNoteClick(e, _index)}
-          />
-        )
-      })
-    return (
-      <div className={this.props.className}
-        onScroll={(e) => this.handleScroll(e)}
-        ref='root'
-      >
-        {notesList}
-      </div>
-    )
-  }
-}
-
-NoteList.propTypes = {
-}
-
-export default NoteList

browser/finder/StorageSection.js

@@ -1,77 +0,0 @@
-import React from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './StorageSection.styl'
-import StorageItem from 'browser/components/StorageItem'
-
-class StorageSection extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      isOpen: true
-    }
-  }
-
-  handleToggleButtonClick (e) {
-    this.setState({
-      isOpen: !this.state.isOpen
-    })
-  }
-
-  handleHeaderClick (e) {
-    let { storage } = this.props
-    this.props.handleStorageButtonClick(e, storage.key)
-  }
-
-  handleFolderClick (e, folder) {
-    let { storage } = this.props
-    this.props.handleFolderButtonClick(e, storage.key, folder.key)
-  }
-
-  render () {
-    let { storage, filter } = this.props
-    let folderList = storage.folders
-      .map(folder => (
-        <StorageItem
-          key={folder.key}
-          isActive={filter.type === 'FOLDER' && filter.folder === folder.key && filter.storage === storage.key}
-          handleButtonClick={(e) => this.handleFolderClick(e, folder)}
-          folderName={folder.name}
-          folderColor={folder.color}
-          isFolded={false}
-        />
-      ))
-
-    return (
-      <div styleName='root'>
-        <div styleName='header'>
-          <button styleName='header-toggleButton'
-            onClick={(e) => this.handleToggleButtonClick(e)}
-          >
-            <i className={this.state.isOpen
-                ? 'fa fa-caret-down'
-                : 'fa fa-caret-right'
-              }
-            />
-          </button>
-          <button styleName={filter.type === 'STORAGE' && filter.storage === storage.key
-              ? 'header-name--active'
-              : 'header-name'
-            }
-            onClick={(e) => this.handleHeaderClick(e)}
-          >{storage.name}</button>
-        </div>
-        {this.state.isOpen &&
-          <div styleName='folderList'>
-            {folderList}
-          </div>
-        }
-      </div>
-    )
-  }
-}
-
-StorageSection.propTypes = {
-}
-
-export default CSSModules(StorageSection, styles)

browser/finder/StorageSection.styl

@@ -1,85 +0,0 @@
-.root
-  position relative
-
-.header
-  height 26px
-.header-toggleButton
-  absolute top left
-  width 25px
-  height 26px
-  navButtonColor()
-  border none
-  outline none
-.header-name
-  display block
-  height 26px
-  navButtonColor()
-  padding 0 10px 0 25px
-  font-size 14px
-  width 100%
-  text-align left
-  line-height 26px
-  box-sizing border-box
-  cursor pointer
-  outline none
-
-.header-name--active
-  @extend .header-name
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-
-.folderList-item
-  display block
-  width 100%
-  height 26px
-  navButtonColor()
-  padding 0 10px 0 25px
-  font-size 14px
-  width 100%
-  text-align left
-  line-height 26px
-  box-sizing border-box
-  cursor pointer
-  outline none
-  padding 0 10px
-  margin 2px 0
-  height 26px
-  line-height 26px
-  border-width 0 0 0 6px
-  border-style solid
-  border-color transparent
-
-.folderList-item--active
-  @extend .folderList-item
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-
-body[data-theme="dark"]
-  .header-toggleButton
-    navDarkButtonColor()
-  .header-name
-    navDarkButtonColor()
-
-  .header-name--active
-    @extend .header-name
-    background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
-    &:hover
-      background-color $ui-button--active-backgroundColor
-
-  .folderList-item
-    navDarkButtonColor()
-    border-width 0 0 0 6px
-    border-style solid
-    border-color transparent
-
-  .folderList-item--active
-    @extend .folderList-item
-    background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
-    &:hover
-      background-color $ui-button--active-backgroundColor

browser/finder/index.js

@@ -1,356 +0,0 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import { connect, Provider } from 'react-redux'
-import _ from 'lodash'
-import ipc from './ipcClient'
-import store from './store'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './FinderMain.styl'
-import StorageSection from './StorageSection'
-import NoteList from './NoteList'
-import NoteDetail from './NoteDetail'
-import SideNavFilter from 'browser/components/SideNavFilter'
-import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
-require('!!style!css!stylus?sourceMap!../main/global.styl')
-require('../lib/customMeta')
-
-const electron = require('electron')
-const { remote } = electron
-const { Menu } = remote
-
-function hideFinder () {
-  let finderWindow = remote.getCurrentWindow()
-  if (global.process.platform === 'win32') {
-    finderWindow.blur()
-    finderWindow.hide()
-  }
-  if (global.process.platform === 'darwin') {
-    Menu.sendActionToFirstResponder('hide:')
-  }
-  remote.getCurrentWindow().hide()
-}
-
-require('!!style!css!stylus?sourceMap!../styles/finder/index.styl')
-
-class FinderMain extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      search: '',
-      index: 0,
-      filter: {
-        includeSnippet: true,
-        includeMarkdown: false,
-        type: 'ALL',
-        storage: null,
-        folder: null
-      }
-    }
-
-    this.focusHandler = (e) => this.handleWindowFocus(e)
-    this.blurHandler = (e) => this.handleWindowBlur(e)
-  }
-
-  componentDidMount () {
-    this.refs.search.focus()
-    window.addEventListener('focus', this.focusHandler)
-    window.addEventListener('blur', this.blurHandler)
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('focus', this.focusHandler)
-    window.removeEventListener('blur', this.blurHandler)
-  }
-
-  handleWindowFocus (e) {
-    this.refs.search.focus()
-  }
-
-  handleWindowBlur (e) {
-    this.setState({
-      search: ''
-    })
-  }
-
-  handleKeyDown (e) {
-    this.refs.search.focus()
-    if (e.keyCode === 9) {
-      if (e.shiftKey) {
-        this.refs.detail.selectPriorSnippet()
-      } else {
-        this.refs.detail.selectNextSnippet()
-      }
-      e.preventDefault()
-    }
-    if (e.keyCode === 38) {
-      this.selectPrevious()
-      e.preventDefault()
-    }
-
-    if (e.keyCode === 40) {
-      this.selectNext()
-      e.preventDefault()
-    }
-
-    if (e.keyCode === 13) {
-      this.refs.detail.saveToClipboard()
-      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('COPY_FINDER')
-      hideFinder()
-      e.preventDefault()
-    }
-    if (e.keyCode === 27) {
-      hideFinder()
-      e.preventDefault()
-    }
-    if (e.keyCode === 91 || e.metaKey) {
-      return
-    }
-  }
-
-  handleSearchChange (e) {
-    this.setState({
-      search: e.target.value,
-      index: 0
-    })
-  }
-
-  selectArticle (article) {
-    this.setState({currentArticle: article})
-  }
-
-  selectPrevious () {
-    if (this.state.index > 0) {
-      this.setState({
-        index: this.state.index - 1
-      })
-    }
-  }
-
-  selectNext () {
-    if (this.state.index < this.noteCount - 1) {
-      this.setState({
-        index: this.state.index + 1
-      })
-    }
-  }
-
-  handleOnlySnippetCheckboxChange (e) {
-    let { filter } = this.state
-    filter.includeSnippet = e.target.checked
-    this.setState({
-      filter: filter,
-      index: 0
-    }, () => {
-      this.refs.search.focus()
-    })
-  }
-
-  handleOnlyMarkdownCheckboxChange (e) {
-    let { filter } = this.state
-    filter.includeMarkdown = e.target.checked
-    this.refs.list.resetScroll()
-    this.setState({
-      filter: filter,
-      index: 0
-    }, () => {
-      this.refs.search.focus()
-    })
-  }
-
-  handleAllNotesButtonClick (e) {
-    let { filter } = this.state
-    filter.type = 'ALL'
-    this.refs.list.resetScroll()
-    this.setState({
-      filter,
-      index: 0
-    }, () => {
-      this.refs.search.focus()
-    })
-  }
-
-  handleStarredButtonClick (e) {
-    let { filter } = this.state
-    filter.type = 'STARRED'
-    this.refs.list.resetScroll()
-    this.setState({
-      filter,
-      index: 0
-    }, () => {
-      this.refs.search.focus()
-    })
-  }
-
-  handleStorageButtonClick (e, storage) {
-    let { filter } = this.state
-    filter.type = 'STORAGE'
-    filter.storage = storage
-    this.refs.list.resetScroll()
-    this.setState({
-      filter,
-      index: 0
-    }, () => {
-      this.refs.search.focus()
-    })
-  }
-
-  handleFolderButtonClick (e, storage, folder) {
-    let { filter } = this.state
-    filter.type = 'FOLDER'
-    filter.storage = storage
-    filter.folder = folder
-    this.refs.list.resetScroll()
-    this.setState({
-      filter,
-      index: 0
-    }, () => {
-      this.refs.search.focus()
-    })
-  }
-
-  handleNoteClick (e, index) {
-    this.setState({
-      index
-    }, () => {
-      this.refs.search.focus()
-    })
-  }
-
-  render () {
-    let { data, config } = this.props
-    let { filter, search } = this.state
-    let storageList = []
-    for (let key in data.storageMap) {
-      let storage = data.storageMap[key]
-      let item = (
-        <StorageSection
-          filter={filter}
-          storage={storage}
-          key={storage.key}
-          handleStorageButtonClick={(e, storage) => this.handleStorageButtonClick(e, storage)}
-          handleFolderButtonClick={(e, storage, folder) => this.handleFolderButtonClick(e, storage, folder)}
-        />
-      )
-      storageList.push(item)
-    }
-    let notes = []
-    let noteIds
-
-    switch (filter.type) {
-      case 'STORAGE':
-        noteIds = data.storageNoteMap[filter.storage]
-        break
-      case 'FOLDER':
-        noteIds = data.folderNoteMap[filter.storage + '-' + filter.folder]
-        break
-      case 'STARRED':
-        noteIds = data.starredSet
-    }
-    if (noteIds != null) {
-      noteIds.forEach((id) => {
-        notes.push(data.noteMap[id])
-      })
-    } else {
-      for (let key in data.noteMap) {
-        notes.push(data.noteMap[key])
-      }
-    }
-
-    if (!filter.includeSnippet && filter.includeMarkdown) {
-      notes = notes.filter((note) => note.type === 'MARKDOWN_NOTE')
-    } else if (filter.includeSnippet && !filter.includeMarkdown) {
-      notes = notes.filter((note) => note.type === 'SNIPPET_NOTE')
-    }
-
-    if (search.trim().length > 0) {
-      let needle = new RegExp(_.escapeRegExp(search.trim()), 'i')
-      notes = notes.filter((note) => note.title.match(needle))
-    }
-    notes = notes
-      .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
-
-    let activeNote = notes[this.state.index]
-    this.noteCount = notes.length
-
-    return (
-      <div className='Finder'
-        styleName='root'
-        ref='-1'
-        onKeyDown={(e) => this.handleKeyDown(e)}
-      >
-        <div styleName='search'>
-          <input
-            styleName='search-input'
-            ref='search'
-            value={search}
-            placeholder='Search...'
-            onChange={(e) => this.handleSearchChange(e)}
-          />
-        </div>
-        <div styleName='result'>
-          <div styleName='result-nav'>
-            <div styleName='result-nav-filter'>
-              <div styleName='result-nav-filter-option'>
-                <label>
-                  <input type='checkbox'
-                    checked={filter.includeSnippet}
-                    onChange={(e) => this.handleOnlySnippetCheckboxChange(e)}
-                  /> Only Snippets</label>
-              </div>
-              <div styleName='result-nav-filter-option'>
-                <label>
-                  <input type='checkbox'
-                    checked={filter.includeMarkdown}
-                    onChange={(e) => this.handleOnlyMarkdownCheckboxChange(e)}
-                  /> Only Markdown</label>
-              </div>
-            </div>
-            <SideNavFilter
-              isHomeActive={filter.type === 'ALL'}
-              handleAllNotesButtonClick={(e) => this.handleAllNotesButtonClick(e)}
-              isStarredActive={filter.type === 'STARRED'}
-              handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
-            />
-            <div styleName='result-nav-storageList'>
-              {storageList}
-            </div>
-          </div>
-          <NoteList styleName='result-list'
-            storageMap={data.storageMap}
-            notes={notes}
-            ref='list'
-            search={search}
-            index={this.state.index}
-            handleNoteClick={(e, _index) => this.handleNoteClick(e, _index)}
-          />
-          <div styleName='result-detail'>
-            <NoteDetail
-              note={activeNote}
-              config={config}
-              ref='detail'
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-FinderMain.propTypes = {
-  dispatch: PropTypes.func
-}
-
-var Finder = connect((x) => x)(CSSModules(FinderMain, styles))
-
-function refreshData () {
-  // let data = dataStore.getData(true)
-}
-
-ReactDOM.render((
-  <Provider store={store}>
-    <Finder />
-  </Provider>
-), document.getElementById('content'), function () {
-  refreshData()
-})

browser/finder/ipcClient.js

@@ -1,124 +0,0 @@
-const nodeIpc = require('node-ipc')
-const { remote, ipcRenderer } = require('electron')
-const { app, Menu } = remote
-const path = require('path')
-const store = require('./store')
-const consts = require('browser/lib/consts')
-
-nodeIpc.config.id = 'finder'
-nodeIpc.config.retry = 1500
-nodeIpc.config.silent = true
-
-function killFinder () {
-  let finderWindow = remote.getCurrentWindow()
-  finderWindow.removeAllListeners()
-  if (global.process.platform === 'darwin') {
-    // Only OSX has another app process.
-    nodeIpc.of.node.emit('quit-from-finder')
-  } else {
-    finderWindow.close()
-  }
-}
-
-function toggleFinder () {
-  let finderWindow = remote.getCurrentWindow()
-  if (global.process.platform === 'darwin') {
-    if (finderWindow.isVisible()) {
-      finderWindow.hide()
-      Menu.sendActionToFirstResponder('hide:')
-    } else {
-      nodeIpc.of.node.emit('request-data-from-finder')
-      finderWindow.show()
-    }
-  } else {
-    if (finderWindow.isVisible()) {
-      finderWindow.blur()
-      finderWindow.hide()
-    } else {
-      nodeIpc.of.node.emit('request-data-from-finder')
-      finderWindow.show()
-      finderWindow.focus()
-    }
-  }
-}
-
-nodeIpc.connectTo(
-  'node',
-  path.join(app.getPath('userData'), 'boostnote.service'),
-  function () {
-    nodeIpc.of.node.on('error', function (err) {
-      console.log(err)
-    })
-    nodeIpc.of.node.on('connect', function () {
-      console.log('Conncted successfully')
-    })
-    nodeIpc.of.node.on('disconnect', function () {
-      console.log('disconnected')
-    })
-
-    nodeIpc.of.node.on('open-finder', function () {
-      toggleFinder()
-    })
-
-    ipcRenderer.on('open-finder-from-tray', function () {
-      toggleFinder()
-    })
-    ipcRenderer.on('open-main-from-tray', function () {
-      nodeIpc.of.node.emit('open-main-from-finder')
-    })
-
-    ipcRenderer.on('quit-from-tray', function () {
-      nodeIpc.of.node.emit('quit-from-finder')
-      killFinder()
-    })
-
-    nodeIpc.of.node.on('throttle-data', function (payload) {
-      console.log('Received data from Main renderer')
-      store.default.dispatch({
-        type: 'THROTTLE_DATA',
-        data: payload
-      })
-    })
-
-    nodeIpc.of.node.on('config-renew', function (payload) {
-      const { config } = payload
-      if (config.ui.theme === 'dark') {
-        document.body.setAttribute('data-theme', 'dark')
-      } else if (config.ui.theme === 'white') {
-        document.body.setAttribute('data-theme', 'white')
-      } else {
-        document.body.setAttribute('data-theme', 'default')
-      }
-
-      let editorTheme = document.getElementById('editorTheme')
-      if (editorTheme == null) {
-        editorTheme = document.createElement('link')
-        editorTheme.setAttribute('id', 'editorTheme')
-        editorTheme.setAttribute('rel', 'stylesheet')
-        document.head.appendChild(editorTheme)
-      }
-
-      config.editor.theme = consts.THEMES.some((theme) => theme === config.editor.theme)
-        ? config.editor.theme
-        : 'default'
-
-      if (config.editor.theme !== 'default') {
-        editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + config.editor.theme + '.css')
-      }
-
-      store.default.dispatch({
-        type: 'SET_CONFIG',
-        config: config
-      })
-    })
-
-    nodeIpc.of.node.on('quit-finder-app', function () {
-      nodeIpc.of.node.emit('quit-finder-app-confirm')
-      killFinder()
-    })
-  }
-)
-
-const ipc = {}
-
-module.exports = ipc

browser/finder/store.js

@@ -1,51 +0,0 @@
-import { combineReducers, createStore } from 'redux'
-import { routerReducer } from 'react-router-redux'
-import { DEFAULT_CONFIG } from 'browser/main/lib/ConfigManager'
-
-let defaultData = {
-  storageMap: {},
-  noteMap: {},
-  starredSet: [],
-  storageNoteMap: {},
-  folderNoteMap: {},
-  tagNoteMap: {}
-}
-
-function data (state = defaultData, action) {
-  switch (action.type) {
-    case 'THROTTLE_DATA':
-      console.log(action)
-      state = action.data
-  }
-  return state
-}
-
-function config (state = DEFAULT_CONFIG, action) {
-  switch (action.type) {
-    case 'INIT_CONFIG':
-    case 'SET_CONFIG':
-      return Object.assign({}, state, action.config)
-    case 'SET_IS_SIDENAV_FOLDED':
-      state.isSideNavFolded = action.isFolded
-      return Object.assign({}, state)
-    case 'SET_ZOOM':
-      state.zoom = action.zoom
-      return Object.assign({}, state)
-    case 'SET_LIST_WIDTH':
-      state.listWidth = action.listWidth
-      return Object.assign({}, state)
-    case 'SET_UI':
-      return Object.assign({}, state, action.config)
-  }
-  return state
-}
-
-let reducer = combineReducers({
-  data,
-  config,
-  routing: routerReducer
-})
-
-let store = createStore(reducer)
-
-export default store

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

@@ -38,15 +38,15 @@ class MutableMap {
   }
 
   map (cb) {
-    let result = []
-    for (let [key, value] of this._map) {
+    const result = []
+    for (const [key, value] of this._map) {
       result.push(cb(value, key))
     }
     return result
   }
 
   toJS () {
-    let result = {}
+    const result = {}
     for (let [key, value] of this._map) {
       if (value instanceof MutableSet || value instanceof MutableMap) {
         value = value.toJS()
@@ -85,7 +85,7 @@ class MutableSet {
   }
 
   map (cb) {
-    let result = []
+    const result = []
     this._set.forEach(function (value, key) {
       result.push(cb(value, key))
     })

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

@@ -2,7 +2,7 @@ const { remote } = require('electron')
 const { Menu, MenuItem } = remote
 
 function popup (templates) {
-  let menu = new Menu()
+  const menu = new Menu()
   templates.forEach((item) => {
     menu.append(new MenuItem(item))
   })

browser/lib/contextMenuBuilder.js

@@ -0,0 +1,65 @@
+const {remote} = require('electron')
+const {Menu} = remote.require('electron')
+const spellcheck = require('./spellcheck')
+
+/**
+ * Creates the context menu that is shown when there is a right click in the editor of a (not-snippet) note.
+ * If the word is does not contains a spelling error (determined by the 'error style'), no suggestions for corrections are requested
+ * => they are not visible in the context menu
+ * @param editor CodeMirror editor
+ * @param {MouseEvent} event that has triggered the creation of the context menu
+ * @returns {Electron.Menu} The created electron context menu
+ */
+const buildEditorContextMenu = function (editor, event) {
+  if (editor == null || event == null || event.pageX == null || event.pageY == null) {
+    return null
+  }
+  const cursor = editor.coordsChar({left: event.pageX, top: event.pageY})
+  const wordRange = editor.findWordAt(cursor)
+  const word = editor.getRange(wordRange.anchor, wordRange.head)
+  const existingMarks = editor.findMarks(wordRange.anchor, wordRange.head) || []
+  let isMisspelled = false
+  for (const mark of existingMarks) {
+    if (mark.className === spellcheck.getCSSClassName()) {
+      isMisspelled = true
+      break
+    }
+  }
+  let suggestion = []
+  if (isMisspelled) {
+    suggestion = spellcheck.getSpellingSuggestion(word)
+  }
+
+  const selection = {
+    isMisspelled: isMisspelled,
+    spellingSuggestions: suggestion
+  }
+  const template = [{
+    role: 'cut'
+  }, {
+    role: 'copy'
+  }, {
+    role: 'paste'
+  }, {
+    role: 'selectall'
+  }]
+
+  if (selection.isMisspelled) {
+    const suggestions = selection.spellingSuggestions
+    template.unshift.apply(template, suggestions.map(function (suggestion) {
+      return {
+        label: suggestion,
+        click: function (suggestion) {
+          if (editor != null) {
+            editor.replaceRange(suggestion.label, wordRange.anchor, wordRange.head)
+          }
+        }
+      }
+    }).concat({
+      type: 'separator'
+    }))
+  }
+  return Menu.buildFromTemplate(template)
+}
+
+module.exports = buildEditorContextMenu

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

@@ -1,3 +1,5 @@
 import CodeMirror from 'codemirror'
+import 'codemirror-mode-elixir'
 
 CodeMirror.modeInfo.push({name: 'Stylus', mime: 'text/x-styl', mode: 'stylus', ext: ['styl'], alias: ['styl']})
+CodeMirror.modeInfo.push({name: 'Elixir', mime: 'text/x-elixir', mode: 'elixir', ext: ['ex']})

browser/lib/findNoteTitle.js

@@ -1,19 +1,37 @@
-export function findNoteTitle (value) {
-  let splitted = value.split('\n')
+export function findNoteTitle (value, enableFrontMatterTitle, frontMatterTitleField = 'title') {
+  const splitted = value.split('\n')
   let title = null
   let isInsideCodeBlock = false
 
-  splitted.some((line, index) => {
-    let trimmedLine = line.trim()
-    let 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

@@ -1,14 +1,14 @@
 export function getTodoStatus (content) {
-  let splitted = content.split('\n')
+  const splitted = content.split('\n')
   let numberOfTodo = 0
   let numberOfCompletedTodo = 0
 
   splitted.forEach((line) => {
-    let trimmedLine = line.trim()
-    if (trimmedLine.match(/^[\+\-\*] \[\s|x\] ./)) {
+    const trimmedLine = line.trim()
+    if (trimmedLine.match(/^[\+\-\*] \[(\s|x)\] ./i)) {
       numberOfTodo++
     }
-    if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
+    if (trimmedLine.match(/^[\+\-\*] \[x\] ./i)) {
       numberOfCompletedTodo++
     }
   })

browser/lib/i18n.js

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

browser/lib/keygen.js

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

browser/lib/markdown-it-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,136 @@
+'use strict'
+
+module.exports = function (md, renderers, defaultRenderer) {
+  const paramsRE = /^[ \t]*([\w+#-]+)?(?:\(((?:\s*\w[-\w]*(?:=(?:'(?:.*?[^\\])?'|"(?:.*?[^\\])?"|(?:[^'"][^\s]*)))?)*)\))?(?::([^:]*)(?::(\d+))?)?\s*$/
+
+  function fence (state, startLine, endLine, silent) {
+    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 !== 0x7E/* ~ */ && marker !== 0x60 /* ` */) {
+      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)
+
+    if (silent) {
+      return true
+    }
+
+    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

@@ -0,0 +1,124 @@
+'use strict'
+
+import sanitizeHtml from 'sanitize-html'
+import { escapeHtmlCharacters } from './utils'
+import url from 'url'
+
+module.exports = function sanitizePlugin (md, options) {
+  options = options || {}
+
+  md.core.ruler.after('linkify', 'sanitize_inline', state => {
+    for (let tokenIdx = 0; tokenIdx < state.tokens.length; tokenIdx++) {
+      if (state.tokens[tokenIdx].type === 'html_block') {
+        state.tokens[tokenIdx].content = sanitizeHtml(
+          state.tokens[tokenIdx].content,
+          options
+        )
+      }
+      if (state.tokens[tokenIdx].type === '_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 = 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,107 @@
+/**
+ * @fileoverview Markdown table of contents generator
+ */
+
+import toc from 'markdown-toc'
+import diacritics from 'diacritics-map'
+import stripColor from 'strip-color'
+import mdlink from 'markdown-link'
+
+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
+}
+
+function linkify (tok, text, slug, opts) {
+  var uniqeID = opts.num === 0 ? '' : '-' + opts.num
+  tok.content = mdlink(text, '#' + slug + uniqeID)
+  return tok
+}
+
+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, linkify: linkify})
+  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

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

browser/lib/newNote.js

@@ -0,0 +1,76 @@
+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, params, config) {
+  AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_MARKDOWN')
+  AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
+
+  let tags = []
+  if (config.ui.tagNewNoteWithFilteringTags && location.pathname.match(/\/tags/)) {
+    tags = params.tagname.split(' ')
+  }
+
+  return dataApi
+    .createNote(storage, {
+      type: 'MARKDOWN_NOTE',
+      folder: folder,
+      title: '',
+      tags,
+      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, params, config) {
+  AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_SNIPPET')
+  AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
+
+  let tags = []
+  if (config.ui.tagNewNoteWithFilteringTags && location.pathname.match(/\/tags/)) {
+    tags = params.tagname.split(' ')
+  }
+
+  return dataApi
+    .createNote(storage, {
+      type: 'SNIPPET_NOTE',
+      folder: folder,
+      title: '',
+      tags,
+      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]
-  let 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) {
-  let 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/spellcheck.js

@@ -0,0 +1,232 @@
+import styles from '../components/CodeEditor.styl'
+import i18n from 'browser/lib/i18n'
+
+const Typo = require('typo-js')
+const _ = require('lodash')
+
+const CSS_ERROR_CLASS = 'codeEditor-typo'
+const SPELLCHECK_DISABLED = 'NONE'
+const DICTIONARY_PATH = '../dictionaries'
+const MILLISECONDS_TILL_LIVECHECK = 500
+
+let dictionary = null
+let self
+
+function getAvailableDictionaries () {
+  return [
+    {label: i18n.__('Disabled'), value: SPELLCHECK_DISABLED},
+    {label: i18n.__('English'), value: 'en_GB'},
+    {label: i18n.__('German'), value: 'de_DE'},
+    {label: i18n.__('French'), value: 'fr_FR'}
+  ]
+}
+
+/**
+ * Only to be used in the tests :)
+ */
+function setDictionaryForTestsOnly (newDictionary) {
+  dictionary = newDictionary
+}
+
+/**
+ * @description Initializes the spellcheck. It removes all existing marks of the current editor.
+ * If a language was given (i.e. lang !== this.SPELLCHECK_DISABLED) it will load the stated dictionary and use it to check the whole document.
+ * @param {Codemirror} editor CodeMirror-Editor
+ * @param {String} lang on of the values from getAvailableDictionaries()-Method
+ */
+function setLanguage (editor, lang) {
+  self = this
+  dictionary = null
+
+  if (editor == null) {
+    return
+  }
+
+  const existingMarks = editor.getAllMarks() || []
+  for (const mark of existingMarks) {
+    mark.clear()
+  }
+  if (lang !== SPELLCHECK_DISABLED) {
+    dictionary = new Typo(lang, false, false, {
+      dictionaryPath: DICTIONARY_PATH,
+      asyncLoad: true,
+      loadedCallback: () =>
+        checkWholeDocument(editor)
+    })
+  }
+}
+
+/**
+ * Checks the whole content of the editor for typos
+ * @param {Codemirror} editor CodeMirror-Editor
+ */
+function checkWholeDocument (editor) {
+  const lastLine = editor.lineCount() - 1
+  const textOfLastLine = editor.getLine(lastLine) || ''
+  const lastChar = textOfLastLine.length
+  const from = {line: 0, ch: 0}
+  const to = {line: lastLine, ch: lastChar}
+  checkMultiLineRange(editor, from, to)
+}
+
+/**
+ * Checks the given range for typos
+ * @param {Codemirror} editor CodeMirror-Editor
+ * @param {line, ch} from starting position of the spellcheck
+ * @param {line, ch} to end position of the spellcheck
+ */
+function checkMultiLineRange (editor, from, to) {
+  function sortRange (pos1, pos2) {
+    if (pos1.line > pos2.line || (pos1.line === pos2.line && pos1.ch > pos2.ch)) {
+      return {from: pos2, to: pos1}
+    }
+    return {from: pos1, to: pos2}
+  }
+
+  const {from: smallerPos, to: higherPos} = sortRange(from, to)
+  for (let l = smallerPos.line; l <= higherPos.line; l++) {
+    const line = editor.getLine(l) || ''
+    let w = 0
+    if (l === smallerPos.line) {
+      w = smallerPos.ch
+    }
+    let wEnd = line.length
+    if (l === higherPos.line) {
+      wEnd = higherPos.ch
+    }
+    while (w <= wEnd) {
+      const wordRange = editor.findWordAt({line: l, ch: w})
+      self.checkWord(editor, wordRange)
+      w += (wordRange.head.ch - wordRange.anchor.ch) + 1
+    }
+  }
+}
+
+/**
+ * @description Checks whether a certain range of characters in the editor (i.e. a word) contains a typo.
+ * If so the ranged will be marked with the class CSS_ERROR_CLASS.
+ * Note: Due to performance considerations, only words with more then 3 signs are checked.
+ * @param {Codemirror} editor CodeMirror-Editor
+ * @param wordRange Object specifying the range that should be checked.
+ * Having the following structure: <code>{anchor: {line: integer, ch: integer}, head: {line: integer, ch: integer}}</code>
+ */
+function checkWord (editor, wordRange) {
+  const word = editor.getRange(wordRange.anchor, wordRange.head)
+  if (word == null || word.length <= 3) {
+    return
+  }
+  if (!dictionary.check(word)) {
+    editor.markText(wordRange.anchor, wordRange.head, {className: styles[CSS_ERROR_CLASS]})
+  }
+}
+
+/**
+ * Checks the changes recently made (aka live check)
+ * @param {Codemirror} editor CodeMirror-Editor
+ * @param fromChangeObject codeMirror changeObject describing the start of the editing
+ * @param toChangeObject codeMirror changeObject describing the end of the editing
+ */
+function checkChangeRange (editor, fromChangeObject, toChangeObject) {
+  /**
+   * Calculate the smallest respectively largest position as a start, resp. end, position and return it
+   * @param start CodeMirror change object
+   * @param end CodeMirror change object
+   * @returns {{start: {line: *, ch: *}, end: {line: *, ch: *}}}
+   */
+  function getStartAndEnd (start, end) {
+    const possiblePositions = [start.from, start.to, end.from, end.to]
+    let smallest = start.from
+    let biggest = end.to
+    for (const currentPos of possiblePositions) {
+      if (currentPos.line < smallest.line || (currentPos.line === smallest.line && currentPos.ch < smallest.ch)) {
+        smallest = currentPos
+      }
+      if (currentPos.line > biggest.line || (currentPos.line === biggest.line && currentPos.ch > biggest.ch)) {
+        biggest = currentPos
+      }
+    }
+    return {start: smallest, end: biggest}
+  }
+
+  if (dictionary === null || editor == null) { return }
+
+  try {
+    const {start, end} = getStartAndEnd(fromChangeObject, toChangeObject)
+
+    // Expand the range to include words after/before whitespaces
+    start.ch = Math.max(start.ch - 1, 0)
+    end.ch = end.ch + 1
+
+    // clean existing marks
+    const existingMarks = editor.findMarks(start, end) || []
+    for (const mark of existingMarks) {
+      mark.clear()
+    }
+
+    self.checkMultiLineRange(editor, start, end)
+  } catch (e) {
+    console.info('Error during the spell check. It might be due to problems figuring out the range of the new text..', e)
+  }
+}
+
+function saveLiveSpellCheckFrom (changeObject) {
+  liveSpellCheckFrom = changeObject
+}
+let liveSpellCheckFrom
+const debouncedSpellCheckLeading = _.debounce(saveLiveSpellCheckFrom, MILLISECONDS_TILL_LIVECHECK, {
+  'leading': true,
+  'trailing': false
+})
+const debouncedSpellCheck = _.debounce(checkChangeRange, MILLISECONDS_TILL_LIVECHECK, {
+  'leading': false,
+  'trailing': true
+})
+
+/**
+ * Handles a keystroke. Buffers the input and performs a live spell check after a certain time. Uses _debounce from lodash to buffer the input
+ * @param {Codemirror} editor CodeMirror-Editor
+ * @param changeObject codeMirror changeObject
+ */
+function handleChange (editor, changeObject) {
+  if (dictionary === null) {
+    return
+  }
+  debouncedSpellCheckLeading(changeObject)
+  debouncedSpellCheck(editor, liveSpellCheckFrom, changeObject)
+}
+
+/**
+ * Returns an array of spelling suggestions for the given (wrong written) word.
+ * Returns an empty array if the dictionary is null (=> spellcheck is disabled) or the given word was null
+ * @param word word to be checked
+ * @returns {String[]} Array of suggestions
+ */
+function getSpellingSuggestion (word) {
+  if (dictionary == null || word == null) {
+    return []
+  }
+  return dictionary.suggest(word)
+}
+
+/**
+ * Returns the name of the CSS class used for errors
+ */
+function getCSSClassName () {
+  return styles[CSS_ERROR_CLASS]
+}
+
+module.exports = {
+  DICTIONARY_PATH,
+  CSS_ERROR_CLASS,
+  SPELLCHECK_DISABLED,
+  getAvailableDictionaries,
+  setLanguage,
+  checkChangeRange,
+  handleChange,
+  getSpellingSuggestion,
+  checkWord,
+  checkMultiLineRange,
+  checkWholeDocument,
+  setDictionaryForTestsOnly,
+  getCSSClassName
+}

browser/lib/utils.js

@@ -0,0 +1,139 @@
+export function lastFindInArray (array, callback) {
+  for (let i = array.length - 1; i >= 0; --i) {
+    if (callback(array[i], i, array)) {
+      return array[i]
+    }
+  }
+}
+
+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

@@ -20,5 +20,27 @@
 body[data-theme="dark"]
   .root
     background-color $ui-dark-backgroundColor
+    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.js

@@ -1,7 +1,9 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './FolderSelect.styl'
 import _ from 'lodash'
+import i18n from 'browser/lib/i18n'
 
 class FolderSelect extends React.Component {
   constructor (props) {
@@ -73,8 +75,8 @@ class FolderSelect extends React.Component {
       case 9:
         if (e.shiftKey) {
           e.preventDefault()
-          let tabbable = document.querySelectorAll('a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])')
-          let previousEl = tabbable[Array.prototype.indexOf.call(tabbable, this.refs.root) - 1]
+          const tabbable = document.querySelectorAll('a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])')
+          const previousEl = tabbable[Array.prototype.indexOf.call(tabbable, this.refs.root) - 1]
           if (previousEl != null) previousEl.focus()
         }
     }
@@ -89,9 +91,9 @@ class FolderSelect extends React.Component {
   }
 
   handleSearchInputChange (e) {
-    let { folders } = this.props
-    let search = this.refs.search.value
-    let optionIndex = search.length > 0
+    const { folders } = this.props
+    const search = this.refs.search.value
+    const optionIndex = search.length > 0
       ? _.findIndex(folders, (folder) => {
         return folder.name.match(new RegExp('^' + _.escapeRegExp(search), 'i'))
       })
@@ -129,7 +131,7 @@ class FolderSelect extends React.Component {
 
   nextOption () {
     let { optionIndex } = this.state
-    let { folders } = this.props
+    const { folders } = this.props
 
     optionIndex++
     if (optionIndex >= folders.length) optionIndex = 0
@@ -140,7 +142,7 @@ class FolderSelect extends React.Component {
   }
 
   previousOption () {
-    let { folders } = this.props
+    const { folders } = this.props
     let { optionIndex } = this.state
 
     optionIndex--
@@ -152,10 +154,10 @@ class FolderSelect extends React.Component {
   }
 
   selectOption () {
-    let { folders } = this.props
-    let optionIndex = this.state.optionIndex
+    const { folders } = this.props
+    const optionIndex = this.state.optionIndex
 
-    let folder = folders[optionIndex]
+    const folder = folders[optionIndex]
     if (folder != null) {
       this.setState({
         status: 'FOCUS'
@@ -184,10 +186,10 @@ class FolderSelect extends React.Component {
   }
 
   render () {
-    let { className, data, value } = this.props
-    let splitted = value.split('-')
-    let storageKey = splitted.shift()
-    let folderKey = splitted.shift()
+    const { className, data, value } = this.props
+    const splitted = value.split('-')
+    const storageKey = splitted.shift()
+    const folderKey = splitted.shift()
     let options = []
     data.storageMap.forEach((storage, index) => {
       storage.folders.forEach((folder) => {
@@ -198,14 +200,14 @@ class FolderSelect extends React.Component {
       })
     })
 
-    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
 
     if (this.state.search.trim().length > 0) {
-      let filter = new RegExp('^' + _.escapeRegExp(this.state.search), 'i')
+      const filter = new RegExp('^' + _.escapeRegExp(this.state.search), 'i')
       options = options.filter((option) => filter.test(option.folder.name))
     }
 
-    let optionList = options
+    const optionList = options
       .map((option, index) => {
         return (
           <div styleName={index === this.state.optionIndex
@@ -248,7 +250,7 @@ class FolderSelect extends React.Component {
             <input styleName='search-input'
               ref='search'
               value={this.state.search}
-              placeholder='Folder...'
+              placeholder={i18n.__('Folder...')}
               onChange={(e) => this.handleSearchInputChange(e)}
               onBlur={(e) => this.handleSearchInputBlur(e)}
               onKeyDown={(e) => this.handleSearchInputKeyDown(e)}

browser/main/Detail/FolderSelect.styl

@@ -3,20 +3,14 @@
   border solid 1px transparent
   vertical-align middle
   border-radius 2px
+  height 30px
   transition 0.15s
   user-select none
   margin-right 10px
-  &:hover
-    background-color $ui-button--hover-backgroundColor
 
 .root--search, .root--focus
   @extend .root
-  background-color $ui-noteDetail-backgroundColor = #fff
   border-color $ui-input--focus-borderColor
-  width 154px
-  height 30px
-  &:hover
-    border-color $ui-input--focus-borderColor = #fff
 
 .idle
   position relative
@@ -42,7 +36,7 @@
   height 34px
   width 20px
   line-height 34px
-  
+
 .search-input
   vertical-align middle
   position relative
@@ -77,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
@@ -139,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

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './FullscreenButton.styl'
+import i18n from 'browser/lib/i18n'
+
+const 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')}({hotkey})</span>
+  </button>
+)
+
+FullscreenButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(FullscreenButton, styles)

browser/main/Detail/FullscreenButton.styl

@@ -0,0 +1,22 @@
+.control-fullScreenButton
+  top 80px
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 70px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="dark"]
+  .control-fullScreenButton
+    topBarButtonDark()

browser/main/Detail/InfoButton.js

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

browser/main/Detail/InfoButton.styl

@@ -1,7 +1,21 @@
 .control-infoButton
   top 10px
-  margin-bottom 10px
-  topBarButtonLight()
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 20px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
 
 .infoButton
   padding 0px

browser/main/Detail/InfoPanel.js

@@ -1,77 +1,99 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
+import copy from 'copy-to-clipboard'
+import i18n from 'browser/lib/i18n'
 
-const InfoPanel = ({
-  storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, wordCount, letterCount, type, print
-}) => (
-  <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
-    <div>
-      <p styleName='modification-date'>{updatedAt}</p>
-      <p styleName='modification-date-desc'>MODIFICATION DATE</p>
-    </div>
+class InfoPanel extends React.Component {
+  copyNoteLink () {
+    const {noteLink} = this.props
+    this.refs.noteLink.select()
+    copy(noteLink)
+  }
 
-    <hr />
-
-    {type === 'SNIPPET_NOTE'
-      ? ''
-      : <div styleName='count-wrap'>
-        <div styleName='count-number'>
-          <p styleName='infoPanel-defaul-count'>{wordCount}</p>
-          <p styleName='infoPanel-sub-count'>Words</p>
+  render () {
+    const {
+      storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml, wordCount, letterCount, type, print
+    } = this.props
+    return (
+      <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
+        <div>
+          <p styleName='modification-date'>{updatedAt}</p>
+          <p styleName='modification-date-desc'>{i18n.__('MODIFICATION DATE')}</p>
         </div>
-        <div styleName='count-number'>
-          <p styleName='infoPanel-defaul-count'>{letterCount}</p>
-          <p styleName='infoPanel-sub-count'>Letters</p>
+
+        <hr />
+
+        {type === 'SNIPPET_NOTE'
+          ? ''
+          : <div styleName='count-wrap'>
+            <div styleName='count-number'>
+              <p styleName='infoPanel-defaul-count'>{wordCount}</p>
+              <p styleName='infoPanel-sub-count'>{i18n.__('Words')}</p>
+            </div>
+            <div styleName='count-number'>
+              <p styleName='infoPanel-defaul-count'>{letterCount}</p>
+              <p styleName='infoPanel-sub-count'>{i18n.__('Letters')}</p>
+            </div>
+          </div>
+        }
+
+        {type === 'SNIPPET_NOTE'
+          ? ''
+          : <hr />
+        }
+
+        <div>
+          <p styleName='infoPanel-default'>{storageName}</p>
+          <p styleName='infoPanel-sub'>{i18n.__('STORAGE')}</p>
+        </div>
+
+        <div>
+          <p styleName='infoPanel-default'>{folderName}</p>
+          <p styleName='infoPanel-sub'>{i18n.__('FOLDER')}</p>
+        </div>
+
+        <div>
+          <p styleName='infoPanel-default'>{createdAt}</p>
+          <p styleName='infoPanel-sub'>{i18n.__('CREATION DATE')}</p>
+        </div>
+
+        <div>
+          <input styleName='infoPanel-noteLink' ref='noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
+          <button onClick={() => this.copyNoteLink()} styleName='infoPanel-copyButton'>
+            <i className='fa fa-clipboard' />
+          </button>
+          <p styleName='infoPanel-sub'>{i18n.__('NOTE LINK')}</p>
+        </div>
+
+        <hr />
+
+        <div id='export-wrap'>
+          <button styleName='export--enable' onClick={(e) => exportAsMd(e, 'export-md')}>
+            <i className='fa fa-file-code-o' />
+            <p>{i18n.__('.md')}</p>
+          </button>
+
+          <button styleName='export--enable' onClick={(e) => exportAsTxt(e, 'export-txt')}>
+            <i className='fa fa-file-text-o' />
+            <p>{i18n.__('.txt')}</p>
+          </button>
+
+          <button styleName='export--enable' onClick={(e) => exportAsHtml(e, 'export-html')}>
+            <i className='fa fa-html5' />
+            <p>{i18n.__('.html')}</p>
+          </button>
+
+          <button styleName='export--enable' onClick={(e) => print(e, 'print')}>
+            <i className='fa fa-print' />
+            <p>{i18n.__('Print')}</p>
+          </button>
         </div>
       </div>
-    }
-
-    {type === 'SNIPPET_NOTE'
-      ? ''
-      : <hr />
-    }
-
-    <div>
-      <p styleName='infoPanel-default'>{storageName}</p>
-      <p styleName='infoPanel-sub'>STORAGE</p>
-    </div>
-
-    <div>
-      <p styleName='infoPanel-default'>{folderName}</p>
-      <p styleName='infoPanel-sub'>FOLDER</p>
-    </div>
-
-    <div>
-      <p styleName='infoPanel-default'>{createdAt}</p>
-      <p styleName='infoPanel-sub'>CREATION DATE</p>
-    </div>
-
-    <div>
-      <input styleName='infoPanel-noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
-      <p styleName='infoPanel-sub'>NOTE LINK</p>
-    </div>
-
-    <hr />
-
-    <div id='export-wrap'>
-      <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
-        <i className='fa fa-file-code-o fa-fw' />
-        <p>.md</p>
-      </button>
-
-      <button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
-        <i className='fa fa-file-text-o fa-fw' />
-        <p>.txt</p>
-      </button>
-
-      <button styleName='export--enable' onClick={(e) => print(e)}>
-        <i className='fa fa-print fa-fw' />
-        <p>Print</p>
-      </button>
-    </div>
-  </div>
-)
+    )
+  }
+}
 
 InfoPanel.propTypes = {
   storageName: PropTypes.string.isRequired,
@@ -81,6 +103,7 @@ InfoPanel.propTypes = {
   createdAt: PropTypes.string.isRequired,
   exportAsMd: PropTypes.func.isRequired,
   exportAsTxt: PropTypes.func.isRequired,
+  exportAsHtml: PropTypes.func.isRequired,
   wordCount: PropTypes.number,
   letterCount: PropTypes.number,
   type: PropTypes.string.isRequired,

browser/main/Detail/InfoPanel.styl

@@ -11,11 +11,11 @@
 .control-infoButton-panel
   z-index 200
   margin-top 0px
-  right 0
+  top: 50px
+  right 25px
   position absolute
   padding 20px 25px 0 25px
   width 300px
-  height 350px
   overflow auto
   background-color $ui-noteList-backgroundColor
   box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
@@ -33,6 +33,7 @@
 .control-infoButton-panel-trash
   z-index 200
   margin-top 0px
+  top 50px
   right 0px
   position absolute
   padding 20px 25px 0 25px
@@ -41,12 +42,12 @@
   box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
   border-radius 2px
 
-.count-wrap 
+.count-wrap
 	display flex
 	position relative
 	width 100%
 
-.count-number 
+.count-number
 	position relative
 	display block
 	width 50%
@@ -70,26 +71,41 @@
   color $ui-text-color
 
 .infoPanel-sub
-  font-size 14px
+  font-size 12px
+  font-weight 600
   color $ui-inactive-text-color
   padding-bottom 8px
 
 .infoPanel-noteLink
   padding-right 5px
-  width 200px
+  width 210px
   height 25px
-  margin-bottom 6px
+  margin 6px 0
+
+.infoPanel-copyButton
+  outline none
+  font-size 16px
+  color #A0A0A0
+  background-color transparent
+  border none
+  margin 0 5px
+  border-radius 5px
+  cursor pointer
+  &:hover
+    transition 0.2s
+    background-color alpha($ui-button--hover-backgroundColor, 30%)
+    color $ui-inactive-text-color
 
 .infoPanel-trash
-  color #EA4447		
-  font-weight 600		
+  color #EA4447
+  font-weight 600
   font-size 14px
   width 70px
   background-color rgba(226,33,113,0.1)
-  border none		
+  border none
   outline none
-  border-radius 2px		
-  margin-right 5px		
+  border-radius 2px
+  margin-right 5px
   padding 2px 5px
 
 [id=export-wrap]
@@ -160,4 +176,124 @@ body[data-theme="dark"]
     p
       color $ui-dark-inactive-text-color
       &:hover
-        color $ui-dark-text-color
+        color $ui-dark-text-color
+
+body[data-theme="solarized-dark"]
+  .control-infoButton-panel
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+  .control-infoButton-panel-trash
+    background-color $ui-solarized-ark-noteList-backgroundColor
+
+  .modification-date
+    color $ui-solarized-ark-text-color
+
+  .modification-date-desc
+    color $ui-inactive-text-color
+
+  .infoPanel-defaul-count
+    color $ui-solarized-dark-text-color
+
+  .infoPanel-sub-count
+    color $ui-inactive-text-color
+
+  .infoPanel-default
+    color $ui-solarized-ark-text-color
+
+  .infoPanel-sub
+    color $ui-inactive-text-color
+
+  .infoPanel-noteLink
+    background-color alpha($ui-solarized-dark-borderColor, 20%)
+    color $ui-solarized-dark-text-color
+
+  [id=export-wrap]
+    button
+      color $ui-dark-inactive-text-color
+      &:hover
+        background-color alpha($ui-solarized-dark-borderColor, 20%)
+        color $ui-solarized-ark-text-color
+    p
+      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/InfoPanelTrashed.js

@@ -1,46 +1,53 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
+import i18n from 'browser/lib/i18n'
 
 const InfoPanelTrashed = ({
-  storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt
+  storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml
 }) => (
   <div className='infoPanel' styleName='control-infoButton-panel-trash' style={{display: 'none'}}>
     <div>
       <p styleName='modification-date'>{updatedAt}</p>
-      <p styleName='modification-date-desc'>MODIFICATION DATE</p>
+      <p styleName='modification-date-desc'>{i18n.__('MODIFICATION DATE')}</p>
     </div>
 
     <hr />
 
     <div>
       <p styleName='infoPanel-default'>{storageName}</p>
-      <p styleName='infoPanel-sub'>STORAGE</p>
+      <p styleName='infoPanel-sub'>{i18n.__('STORAGE')}</p>
     </div>
 
     <div>
       <p styleName='infoPanel-default'><text styleName='infoPanel-trash'>Trash</text>{folderName}</p>
-      <p styleName='infoPanel-sub'>FOLDER</p>
+      <p styleName='infoPanel-sub'>{i18n.__('FOLDER')}</p>
     </div>
 
     <div>
       <p styleName='infoPanel-default'>{createdAt}</p>
-      <p styleName='infoPanel-sub'>CREATION DATE</p>
+      <p styleName='infoPanel-sub'>{i18n.__('CREATION DATE')}</p>
     </div>
 
     <div id='export-wrap'>
-      <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
-        <i className='fa fa-file-code-o fa-fw' />
+      <button styleName='export--enable' onClick={(e) => exportAsMd(e, 'export-md')}>
+        <i className='fa fa-file-code-o' />
         <p>.md</p>
       </button>
 
-      <button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
-        <i className='fa fa-file-text-o fa-fw' />
+      <button styleName='export--enable' onClick={(e) => exportAsTxt(e, 'export-txt')}>
+        <i className='fa fa-file-text-o' />
         <p>.txt</p>
       </button>
 
+      <button styleName='export--enable' onClick={(e) => exportAsHtml(e, 'export-html')}>
+        <i className='fa fa-html5' />
+        <p>.html</p>
+      </button>
+
       <button styleName='export--unable'>
-        <i className='fa fa-file-pdf-o fa-fw' />
+        <i className='fa fa-file-pdf-o' />
         <p>.pdf</p>
       </button>
     </div>
@@ -53,7 +60,8 @@ InfoPanelTrashed.propTypes = {
   updatedAt: PropTypes.string.isRequired,
   createdAt: PropTypes.string.isRequired,
   exportAsMd: PropTypes.func.isRequired,
-  exportAsTxt: PropTypes.func.isRequired
+  exportAsTxt: PropTypes.func.isRequired,
+  exportAsHtml: PropTypes.func.isRequired
 }
 
 export default CSSModules(InfoPanelTrashed, styles)

browser/main/Detail/MarkdownNoteDetail.js

@@ -1,7 +1,9 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
+import MarkdownSplitEditor from 'browser/components/MarkdownSplitEditor'
 import TodoListPercentage from 'browser/components/TodoListPercentage'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
@@ -14,18 +16,20 @@ import StatusBar from '../StatusBar'
 import _ from 'lodash'
 import { findNoteTitle } from 'browser/lib/findNoteTitle'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import ConfigManager from 'browser/main/lib/ConfigManager'
 import TrashButton from './TrashButton'
+import FullscreenButton from './FullscreenButton'
+import RestoreButton from './RestoreButton'
 import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
+import ToggleModeButton from './ToggleModeButton'
 import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
 import { formatDate } from 'browser/lib/date-formatter'
 import { getTodoPercentageOfCompleted } from 'browser/lib/getTodoStatus'
 import striptags from 'striptags'
-
-const electron = require('electron')
-const { remote } = electron
-const { Menu, MenuItem, dialog } = remote
+import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
+import markdownToc from 'browser/lib/markdown-toc-generator'
 
 class MarkdownNoteDetail extends React.Component {
   constructor (props) {
@@ -38,11 +42,13 @@ class MarkdownNoteDetail extends React.Component {
         content: ''
       }, props.note),
       isLockButtonShown: false,
-      isLocked: false
+      isLocked: false,
+      editorType: props.config.editor.type
     }
     this.dispatchTimer = null
 
     this.toggleLockButton = this.handleToggleLockButton.bind(this)
+    this.generateToc = () => this.handleGenerateToc()
   }
 
   focus () {
@@ -51,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)
@@ -66,24 +80,27 @@ 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()
   }
 
-  componentDidUnmount () {
-    ee.off('topbar:togglelockbutton', this.toggleLockButton)
+  handleUpdateTag () {
+    const { note } = this.state
+    if (this.refs.tags) note.tags = this.refs.tags.value
+    this.updateNote(note)
   }
 
-  handleChange (e) {
-    let { note } = this.state
-
+  handleUpdateContent () {
+    const { note } = this.state
     note.content = this.refs.content.value
-    if (this.refs.tags) note.tags = this.refs.tags.value
-    note.title = markdown.strip(striptags(findNoteTitle(note.content)))
-    note.updatedAt = new Date()
+    note.title = markdown.strip(striptags(findNoteTitle(note.content, this.props.config.editor.enableFrontMatterTitle, this.props.config.editor.frontMatterTitleField)))
+    this.updateNote(note)
+  }
 
-    this.setState({
-      note
-    }, () => {
+  updateNote (note) {
+    note.updatedAt = new Date()
+    this.setState({note}, () => {
       this.save()
     })
   }
@@ -96,7 +113,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   saveNow () {
-    let { note, dispatch } = this.props
+    const { note, dispatch } = this.props
     clearTimeout(this.saveQueue)
     this.saveQueue = null
 
@@ -112,11 +129,11 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleFolderChange (e) {
-    let { note } = this.state
-    let value = this.refs.folder.value
-    let splitted = value.split('-')
-    let newStorageKey = splitted.shift()
-    let newFolderKey = splitted.shift()
+    const { note } = this.state
+    const value = this.refs.folder.value
+    const splitted = value.split('-')
+    const newStorageKey = splitted.shift()
+    const newFolderKey = splitted.shift()
 
     dataApi
       .moveNote(note.storage, note.key, newStorageKey, newFolderKey)
@@ -125,7 +142,7 @@ class MarkdownNoteDetail extends React.Component {
           isMovingNote: true,
           note: Object.assign({}, newNote)
         }, () => {
-          let { dispatch, location } = this.props
+          const { dispatch, location } = this.props
           dispatch({
             type: 'MOVE_NOTE',
             originNote: note,
@@ -134,7 +151,7 @@ class MarkdownNoteDetail extends React.Component {
           hashHistory.replace({
             pathname: location.pathname,
             query: {
-              key: newNote.storage + '-' + newNote.key
+              key: newNote.key
             }
           })
           this.setState({
@@ -145,7 +162,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleStarButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
     if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
@@ -169,45 +186,79 @@ class MarkdownNoteDetail extends React.Component {
     ee.emit('export:save-text')
   }
 
+  exportAsHtml () {
+    ee.emit('export:save-html')
+  }
+
+  handleKeyDown (e) {
+    switch (e.keyCode) {
+      // tab key
+      case 9:
+        if (e.ctrlKey && !e.shiftKey) {
+          e.preventDefault()
+          this.jumpNextTab()
+        } else if (e.ctrlKey && e.shiftKey) {
+          e.preventDefault()
+          this.jumpPrevTab()
+        } else if (!e.ctrlKey && !e.shiftKey && e.target === this.refs.description) {
+          e.preventDefault()
+          this.focusEditor()
+        }
+        break
+      // I key
+      case 73:
+        {
+          const isSuper = global.process.platform === 'darwin'
+            ? e.metaKey
+            : e.ctrlKey
+          if (isSuper) {
+            e.preventDefault()
+            this.handleInfoButtonClick(e)
+          }
+        }
+        break
+    }
+  }
+
   handleTrashButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
     const { isTrashed } = note
+    const { confirmDeletion } = this.props.config.ui
 
     if (isTrashed) {
-      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
-        type: 'warning',
-        message: 'Confirm note deletion',
-        detail: 'This will permanently remove this note.',
-        buttons: ['Confirm', 'Cancel']
-      })
-      if (dialogueButtonIndex === 1) return
-      let { note, dispatch } = this.props
-      dataApi
-        .deleteNote(note.storage, note.key)
-        .then((data) => {
-          let dispatchHandler = () => {
-            dispatch({
-              type: 'DELETE_NOTE',
-              storageKey: data.storageKey,
-              noteKey: data.noteKey
-            })
-          }
-          ee.once('list:moved', dispatchHandler)
-        })
+      if (confirmDeleteNote(confirmDeletion, true)) {
+        const {note, dispatch} = this.props
+        dataApi
+          .deleteNote(note.storage, note.key)
+          .then((data) => {
+            const dispatchHandler = () => {
+              dispatch({
+                type: 'DELETE_NOTE',
+                storageKey: data.storageKey,
+                noteKey: data.noteKey
+              })
+            }
+            ee.once('list:next', dispatchHandler)
+          })
+          .then(() => ee.emit('list:next'))
+      }
     } else {
-      note.isTrashed = true
+      if (confirmDeleteNote(confirmDeletion, false)) {
+        note.isTrashed = true
 
-      this.setState({
-        note
-      }, () => {
-        this.save()
-      })
+        this.setState({
+          note
+        }, () => {
+          this.save()
+        })
+
+        ee.emit('list:next')
+      }
     }
-    ee.emit('list:next')
   }
 
   handleUndoButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
 
     note.isTrashed = false
 
@@ -232,7 +283,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   getToggleLockButton () {
-    return this.state.isLocked ? '../resources/icon/icon-lock.svg' : '../resources/icon/icon-unlock.svg'
+    return this.state.isLocked ? '../resources/icon/icon-previewoff-on.svg' : '../resources/icon/icon-previewoff-off.svg'
   }
 
   handleDeleteKeyDown (e) {
@@ -248,6 +299,11 @@ class MarkdownNoteDetail extends React.Component {
     }
   }
 
+  handleGenerateToc () {
+    const editor = this.refs.content.refs.code.editor
+    markdownToc.generateInEditor(editor)
+  }
+
   handleFocus (e) {
     this.focus()
   }
@@ -261,13 +317,73 @@ class MarkdownNoteDetail extends React.Component {
     ee.emit('print')
   }
 
-  render () {
-    let { data, config, location } = this.props
-    let { note } = this.state
-    let storageKey = note.storage
-    let folderKey = note.folder
+  handleSwitchMode (type) {
+    this.setState({ editorType: type }, () => {
+      this.focus()
+      const newConfig = Object.assign({}, this.props.config)
+      newConfig.editor.type = type
+      ConfigManager.set(newConfig)
+    })
+  }
 
-    let options = []
+  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'
+        styleName='body-noteEditor'
+        config={config}
+        value={note.content}
+        storageKey={note.storage}
+        noteKey={note.key}
+        onChange={this.handleUpdateContent.bind(this)}
+        ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+      />
+    } else {
+      return <MarkdownSplitEditor
+        ref='content'
+        config={config}
+        value={note.content}
+        storageKey={note.storage}
+        noteKey={note.key}
+        onChange={this.handleUpdateContent.bind(this)}
+        ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+      />
+    }
+  }
+
+  render () {
+    const { data, location, config } = this.props
+    const { note, editorType } = this.state
+    const storageKey = note.storage
+    const folderKey = note.folder
+
+    const options = []
     data.storageMap.forEach((storage, index) => {
       storage.folders.forEach((folder) => {
         options.push({
@@ -276,14 +392,11 @@ class MarkdownNoteDetail extends React.Component {
         })
       })
     })
-    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
 
     const trashTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <i styleName='undo-button'
-          className='fa fa-undo fa-fw'
-          onClick={(e) => this.handleUndoButtonClick(e)}
-        />
+        <RestoreButton onClick={(e) => this.handleUndoButtonClick(e)} />
       </div>
       <div styleName='info-right'>
         <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
@@ -295,6 +408,7 @@ class MarkdownNoteDetail extends React.Component {
           folderName={currentOption.folder.name}
           updatedAt={formatDate(note.updatedAt)}
           createdAt={formatDate(note.createdAt)}
+          exportAsHtml={this.exportAsHtml}
           exportAsMd={this.exportAsMd}
           exportAsTxt={this.exportAsTxt}
         />
@@ -315,17 +429,15 @@ class MarkdownNoteDetail extends React.Component {
         <TagSelect
           ref='tags'
           value={this.state.note.tags}
-          onChange={(e) => this.handleChange(e)}
-        />
-        <TodoListPercentage
-          percentageOfTodo={getTodoPercentageOfCompleted(note.content)}
+          saveTagsAlphabetically={config.ui.saveTagsAlphabetically}
+          showTagsAlphabetically={config.ui.showTagsAlphabetically}
+          data={data}
+          onChange={this.handleUpdateTag.bind(this)}
         />
+        <TodoListPercentage onClearCheckboxClick={(e) => this.handleClearTodo(e)} percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
       </div>
       <div styleName='info-right'>
-        <InfoButton
-          onClick={(e) => this.handleInfoButtonClick(e)}
-        />
-
+        <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
         <StarButton
           onClick={(e) => this.handleStarButtonClick(e)}
           isActive={note.isStarred}
@@ -339,6 +451,7 @@ class MarkdownNoteDetail extends React.Component {
               onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
             >
               <img styleName='iconInfo' src={imgSrc} />
+              {this.state.isLocked ? <span styleName='tooltip'>Unlock</span> : <span styleName='tooltip'>Lock</span>}
             </button>
 
           return (
@@ -346,22 +459,23 @@ class MarkdownNoteDetail extends React.Component {
           )
         })()}
 
-        <button styleName='control-fullScreenButton'
-          onMouseDown={(e) => this.handleFullScreenButton(e)}
-        >
-          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg' />
-        </button>
+        <FullscreenButton onClick={(e) => this.handleFullScreenButton(e)} />
 
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
 
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}
-          noteLink={`[${note.title}](${location.query.key})`}
+          noteLink={`[${note.title}](:note:${location.query.key})`}
           updatedAt={formatDate(note.updatedAt)}
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.exportAsMd}
           exportAsTxt={this.exportAsTxt}
+          exportAsHtml={this.exportAsHtml}
           wordCount={note.content.split(' ').length}
           letterCount={note.content.replace(/\r?\n/g, '').length}
           type={note.type}
@@ -374,20 +488,13 @@ class MarkdownNoteDetail extends React.Component {
       <div className='NoteDetail'
         style={this.props.style}
         styleName='root'
+        onKeyDown={(e) => this.handleKeyDown(e)}
       >
 
         {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
 
         <div styleName='body'>
-          <MarkdownEditor
-            ref='content'
-            styleName='body-noteEditor'
-            config={config}
-            value={this.state.note.content}
-            storageKey={this.state.note.storage}
-            onChange={(e) => this.handleChange(e)}
-            ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
-          />
+          {this.renderEditor()}
         </div>
 
         <StatusBar

browser/main/Detail/MarkdownNoteDetail.styl

@@ -7,31 +7,42 @@
   background-color $ui-noteDetail-backgroundColor
   box-shadow none
   padding 20px 40px
+  overflow hidden
 
 .lock-button
   padding-bottom 3px
 
 .control-lockButton
-  top 160px
-  margin-bottom 10px
-  topBarButtonLight()
+  topBarButtonRight()
+  position absolute
+  right 225px
+  &:hover .tooltip
+    opacity 1
+
+  .tooltip
+    tooltip()
+    position absolute
+    pointer-events none
+    top 35px
+    right -10px
+    width 50px
+    z-index 200
+    padding 5px
+    line-height normal
+    border-radius 2px
+    opacity 0
+    transition 0.1s
 
 .trashed-infopanel
-  top 40px
   position relative
 
-.control-fullScreenButton
-  top 80px
-  topBarButtonLight()
-
 .body
   absolute left right
   left 0
   right 0
   top $info-height + $info-margin-under-border
   bottom $statusBar-height
-  max-width 600px
-  margin 0 auto
+  margin 0 30px
 .body-noteEditor
   absolute top bottom left right
 
@@ -44,7 +55,7 @@ body[data-theme="dark"]
   .root
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
-    border none
+    border-left 1px solid $ui-dark-borderColor
 
   .control-lockButton
     topBarButtonDark()
@@ -54,3 +65,19 @@ body[data-theme="dark"]
 
   .control-fullScreenButton
     topBarButtonDark()
+
+
+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

@@ -1,6 +1,6 @@
 @import('DetailVars')
 
-$info-height = 50px
+$info-height = 60px
 $info-margin-under-border = 30px
 
 .info
@@ -8,11 +8,12 @@ $info-margin-under-border = 30px
   left 0
   right 0
   height $info-height
-  border-bottom 1px solid #eee
   background-color $ui-noteDetail-backgroundColor
   width 100%
   display flex
   align-items center
+  padding 0 20px
+  z-index 99
 
 .info-left
   padding 0 10px
@@ -20,7 +21,6 @@ $info-margin-under-border = 30px
   display flex
   align-items center
 
-
 .info-left-top-folderSelect
   display flex
   align-items center
@@ -45,12 +45,9 @@ $info-margin-under-border = 30px
     color $ui-button--color
 
 .info-right
-  position absolute
-  right 40px
-  top 60px
-  bottom 1px
-  padding-left 30px
   z-index 101
+  display inline-flex
+  margin-top 3px
 
 .undo-button
   width 34px
@@ -95,4 +92,19 @@ body[data-theme="dark"]
     background-color $ui-dark-noteDetail-backgroundColor
 
   .undo-button
-    topBarButtonDark()
+    topBarButtonDark()
+
+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/PermanentDeleteButton.js

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

browser/main/Detail/RestoreButton.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './RestoreButton.styl'
+import i18n from 'browser/lib/i18n'
+
+const RestoreButton = ({
+  onClick
+}) => (
+  <button styleName='control-restoreButton'
+    onClick={onClick}
+  >
+    <i className='fa fa-undo fa-fw' styleName='iconRestore' />
+    <span styleName='tooltip'>{i18n.__('Restore')}</span>
+  </button>
+)
+
+RestoreButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(RestoreButton, styles)

browser/main/Detail/RestoreButton.styl

@@ -0,0 +1,22 @@
+.control-restoreButton
+  top 115px
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  left 25px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="dark"]
+  .control-restoreButton
+    topBarButtonDark()

browser/main/Detail/SnippetNoteDetail.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SnippetNoteDetail.styl'
 import CodeEditor from 'browser/components/CodeEditor'
@@ -7,41 +8,32 @@ import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
 import dataApi from 'browser/main/lib/dataApi'
-import { hashHistory } from 'react-router'
+import {hashHistory} from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
 import CodeMirror from 'codemirror'
+import 'codemirror-mode-elixir'
 import SnippetTab from 'browser/components/SnippetTab'
 import StatusBar from '../StatusBar'
 import context from 'browser/lib/context'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import _ from 'lodash'
-import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import {findNoteTitle} from 'browser/lib/findNoteTitle'
+import convertModeName from 'browser/lib/convertModeName'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import TrashButton from './TrashButton'
+import RestoreButton from './RestoreButton'
 import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
 import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
 import { formatDate } from 'browser/lib/date-formatter'
-
-function pass (name) {
-  switch (name) {
-    case 'ejs':
-      return 'Embedded Javascript'
-    case 'html_ruby':
-      return 'Embedded Ruby'
-    case 'objectivec':
-      return 'Objective C'
-    case 'text':
-      return 'Plain Text'
-    default:
-      return name
-  }
-}
+import i18n from 'browser/lib/i18n'
+import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
+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) {
@@ -50,18 +42,38 @@ class SnippetNoteDetail extends React.Component {
     this.state = {
       isMovingNote: false,
       snippetIndex: 0,
+      showArrows: false,
+      enableLeftArrow: false,
+      enableRightArrow: false,
       note: Object.assign({
         description: ''
       }, props.note, {
         snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet))
       })
     }
+
+    this.scrollToNextTabThreshold = 0.7
+    this.generateToc = () => this.handleGenerateToc()
+  }
+
+  componentDidMount () {
+    const visibleTabs = this.visibleTabs
+    const allTabs = this.allTabs
+
+    if (visibleTabs.offsetWidth < allTabs.scrollWidth) {
+      this.setState({
+        showArrows: visibleTabs.offsetWidth < allTabs.scrollWidth,
+        enableRightArrow: allTabs.offsetLeft !== visibleTabs.offsetWidth - allTabs.scrollWidth,
+        enableLeftArrow: allTabs.offsetLeft !== 0
+      })
+    }
+    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()
-      let nextNote = Object.assign({
+      const nextNote = Object.assign({
         description: ''
       }, nextProps.note, {
         snippets: nextProps.note.snippets.map((snippet) => Object.assign({}, snippet))
@@ -70,26 +82,37 @@ class SnippetNoteDetail extends React.Component {
         snippetIndex: 0,
         note: nextNote
       }, () => {
-        let { snippets } = this.state.note
+        const { snippets } = this.state.note
         snippets.forEach((snippet, index) => {
           this.refs['code-' + index].reload()
         })
         if (this.refs.tags) this.refs.tags.reset()
+        this.setState(this.getArrowsState())
       })
     }
   }
 
   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) {
-    let { note } = this.state
+    const { note } = this.state
 
     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
@@ -106,7 +129,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   saveNow () {
-    let { note, dispatch } = this.props
+    const { note, dispatch } = this.props
     clearTimeout(this.saveQueue)
     this.saveQueue = null
 
@@ -122,11 +145,11 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleFolderChange (e) {
-    let { note } = this.state
-    let value = this.refs.folder.value
-    let splitted = value.split('-')
-    let newStorageKey = splitted.shift()
-    let newFolderKey = splitted.shift()
+    const { note } = this.state
+    const value = this.refs.folder.value
+    const splitted = value.split('-')
+    const newStorageKey = splitted.shift()
+    const newFolderKey = splitted.shift()
 
     dataApi
       .moveNote(note.storage, note.key, newStorageKey, newFolderKey)
@@ -135,7 +158,7 @@ class SnippetNoteDetail extends React.Component {
           isMovingNote: true,
           note: Object.assign({}, newNote)
         }, () => {
-          let { dispatch, location } = this.props
+          const { dispatch, location } = this.props
           dispatch({
             type: 'MOVE_NOTE',
             originNote: note,
@@ -144,7 +167,7 @@ class SnippetNoteDetail extends React.Component {
           hashHistory.replace({
             pathname: location.pathname,
             query: {
-              key: newNote.storage + '-' + newNote.key
+              key: newNote.key
             }
           })
           this.setState({
@@ -155,7 +178,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleStarButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
     if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
@@ -172,44 +195,44 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleTrashButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
     const { isTrashed } = note
+    const { confirmDeletion } = this.props.config.ui
 
     if (isTrashed) {
-      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
-        type: 'warning',
-        message: 'Confirm note deletion',
-        detail: 'This will permanently remove this note.',
-        buttons: ['Confirm', 'Cancel']
-      })
-      if (dialogueButtonIndex === 1) return
-      let { note, dispatch } = this.props
-      dataApi
-        .deleteNote(note.storage, note.key)
-        .then((data) => {
-          let dispatchHandler = () => {
-            dispatch({
-              type: 'DELETE_NOTE',
-              storageKey: data.storageKey,
-              noteKey: data.noteKey
-            })
-          }
-          ee.once('list:moved', dispatchHandler)
-        })
+      if (confirmDeleteNote(confirmDeletion, true)) {
+        const {note, dispatch} = this.props
+        dataApi
+          .deleteNote(note.storage, note.key)
+          .then((data) => {
+            const dispatchHandler = () => {
+              dispatch({
+                type: 'DELETE_NOTE',
+                storageKey: data.storageKey,
+                noteKey: data.noteKey
+              })
+            }
+            ee.once('list:next', dispatchHandler)
+          })
+          .then(() => ee.emit('list:next'))
+      }
     } else {
-      note.isTrashed = true
+      if (confirmDeleteNote(confirmDeletion, false)) {
+        note.isTrashed = true
 
-      this.setState({
-        note
-      }, () => {
-        this.save()
-      })
+        this.setState({
+          note
+        }, () => {
+          this.save()
+        })
+
+        ee.emit('list:next')
+      }
     }
-    ee.emit('list:next')
   }
 
   handleUndoButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
 
     note.isTrashed = false
 
@@ -225,6 +248,51 @@ class SnippetNoteDetail extends React.Component {
     ee.emit('editor:fullscreen')
   }
 
+  handleTabMoveLeftButtonClick (e) {
+    {
+      const left = this.visibleTabs.scrollLeft
+
+      const tabs = this.allTabs.querySelectorAll('div')
+      const lastVisibleTab = Array.from(tabs).find((tab) => {
+        return tab.offsetLeft + tab.offsetWidth >= left
+      })
+
+      if (lastVisibleTab) {
+        const visiblePart = lastVisibleTab.offsetWidth + lastVisibleTab.offsetLeft - left
+        const isFullyVisible = visiblePart > lastVisibleTab.offsetWidth * this.scrollToNextTabThreshold
+        const scrollToTab = (isFullyVisible && lastVisibleTab.previousSibling)
+            ? lastVisibleTab.previousSibling
+            : lastVisibleTab
+
+        // FIXME use `scrollIntoView()` instead of custom method after update to Electron2.0 (with Chrome 61 its possible animate the scroll)
+        this.moveToTab(scrollToTab)
+        // scrollToTab.scrollIntoView({behavior: 'smooth', inline: 'start', block: 'start'})
+      }
+    }
+  }
+
+  handleTabMoveRightButtonClick (e) {
+    const left = this.visibleTabs.scrollLeft
+    const width = this.visibleTabs.offsetWidth
+
+    const tabs = this.allTabs.querySelectorAll('div')
+    const lastVisibleTab = Array.from(tabs).find((tab) => {
+      return tab.offsetLeft + tab.offsetWidth >= width + left
+    })
+
+    if (lastVisibleTab) {
+      const visiblePart = width + left - lastVisibleTab.offsetLeft
+      const isFullyVisible = visiblePart > lastVisibleTab.offsetWidth * this.scrollToNextTabThreshold
+      const scrollToTab = (isFullyVisible && lastVisibleTab.nextSibling)
+          ? lastVisibleTab.nextSibling
+          : lastVisibleTab
+
+      // FIXME use `scrollIntoView()` instead of custom method after update to Electron2.0 (with Chrome 61 its possible animate the scroll)
+      this.moveToTab(scrollToTab)
+      // scrollToTab.scrollIntoView({behavior: 'smooth', inline: 'end', block: 'end'})
+    }
+  }
+
   handleTabPlusButtonClick (e) {
     this.addSnippet()
   }
@@ -235,14 +303,35 @@ class SnippetNoteDetail extends React.Component {
     })
   }
 
+  handleTabDragStart (e, index) {
+    e.dataTransfer.setData('text/plain', index)
+  }
+
+  handleTabDrop (e, index) {
+    const oldIndex = parseInt(e.dataTransfer.getData('text'))
+
+    const snippets = this.state.note.snippets.slice()
+    const draggedSnippet = snippets[oldIndex]
+    snippets[oldIndex] = snippets[index]
+    snippets[index] = draggedSnippet
+    const snippetIndex = index
+
+    const note = Object.assign({}, this.state.note, {snippets})
+    this.setState({ note, snippetIndex }, () => {
+      this.save()
+      this.refs['code-' + index].reload()
+      this.refs['code-' + oldIndex].reload()
+    })
+  }
+
   handleTabDeleteButtonClick (e, index) {
     if (this.state.note.snippets.length > 1) {
       if (this.state.note.snippets[index].content.trim().length > 0) {
-        let dialogIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+        const dialogIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
           type: 'warning',
-          message: 'Delete a snippet',
-          detail: 'This work cannot be undone.',
-          buttons: ['Confirm', 'Cancel']
+          message: i18n.__('Delete a snippet'),
+          detail: i18n.__('This work cannot be undone.'),
+          buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
         })
         if (dialogIndex === 0) {
           this.deleteSnippetByIndex(index)
@@ -263,6 +352,19 @@ class SnippetNoteDetail extends React.Component {
     this.setState({ note, snippetIndex }, () => {
       this.save()
       this.refs['code-' + this.state.snippetIndex].reload()
+
+      if (this.visibleTabs.offsetWidth > this.allTabs.scrollWidth) {
+        this.moveTabBarBy(0)
+      } else {
+        const lastTab = this.allTabs.lastChild
+        if (lastTab.offsetLeft + lastTab.offsetWidth < this.visibleTabs.offsetWidth) {
+          const width = this.visibleTabs.offsetWidth
+          const newLeft = lastTab.offsetLeft + lastTab.offsetWidth - width
+          this.moveTabBarBy(newLeft > 0 ? -newLeft : 0)
+        } else {
+          this.setState(this.getArrowsState())
+        }
+      }
     })
   }
 
@@ -277,24 +379,24 @@ 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()
     })
   }
 
   handleModeOptionClick (index, name) {
     return (e) => {
-      let snippets = this.state.note.snippets.slice()
+      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()
       })
 
@@ -306,12 +408,12 @@ class SnippetNoteDetail extends React.Component {
 
   handleCodeChange (index) {
     return (e) => {
-      let snippets = this.state.note.snippets.slice()
+      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()
       })
     }
@@ -319,6 +421,7 @@ class SnippetNoteDetail extends React.Component {
 
   handleKeyDown (e) {
     switch (e.keyCode) {
+      // tab key
       case 9:
         if (e.ctrlKey && !e.shiftKey) {
           e.preventDefault()
@@ -331,9 +434,22 @@ class SnippetNoteDetail extends React.Component {
           this.focusEditor()
         }
         break
+      // I key
+      case 73:
+        {
+          const isSuper = global.process.platform === 'darwin'
+            ? e.metaKey
+            : e.ctrlKey
+          if (isSuper) {
+            e.preventDefault()
+            this.handleInfoButtonClick(e)
+          }
+        }
+        break
+      // L key
       case 76:
         {
-          let isSuper = global.process.platform === 'darwin'
+          const isSuper = global.process.platform === 'darwin'
             ? e.metaKey
             : e.ctrlKey
           if (isSuper) {
@@ -342,12 +458,13 @@ class SnippetNoteDetail extends React.Component {
           }
         }
         break
+      // T key
       case 84:
         {
-          let isSuper = global.process.platform === 'darwin'
+          const isSuper = global.process.platform === 'darwin'
             ? e.metaKey
             : e.ctrlKey
-          if (isSuper) {
+          if (isSuper && !e.shiftKey && !e.altKey) {
             e.preventDefault()
             this.addSnippet()
           }
@@ -357,14 +474,14 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleModeButtonClick (e, index) {
-    let menu = new Menu()
-    CodeMirror.modeInfo.forEach((mode) => {
-      menu.append(new MenuItem({
+    const templetes = []
+    CodeMirror.modeInfo.sort(function (a, b) { return a.name.localeCompare(b.name) }).forEach((mode) => {
+      templetes.push({
         label: mode.name,
         click: (e) => this.handleModeOptionClick(index, mode.name)(e)
-      }))
+      })
     })
-    menu.popup(remote.getCurrentWindow())
+    context.popup(templetes)
   }
 
   handleIndentTypeButtonClick (e) {
@@ -398,8 +515,8 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleIndentSizeItemClick (e, indentSize) {
-    let { config, dispatch } = this.props
-    let editor = Object.assign({}, config.editor, {
+    const { config, dispatch } = this.props
+    const editor = Object.assign({}, config.editor, {
       indentSize
     })
     ConfigManager.set({
@@ -414,8 +531,8 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleIndentTypeItemClick (e, indentType) {
-    let { config, dispatch } = this.props
-    let editor = Object.assign({}, config.editor, {
+    const { config, dispatch } = this.props
+    const editor = Object.assign({}, config.editor, {
       indentType
     })
     ConfigManager.set({
@@ -433,42 +550,93 @@ class SnippetNoteDetail extends React.Component {
     this.refs.description.focus()
   }
 
+  moveToTab (tab) {
+    const easeOutCubic = t => (--t) * t * t + 1
+    const startScrollPosition = this.visibleTabs.scrollLeft
+    const animationTiming = 300
+    const scrollMoreCoeff = 1.4 // introduce coefficient, because we want to scroll a bit further to see next tab
+
+    let scrollBy = (tab.offsetLeft - startScrollPosition)
+
+    if (tab.offsetLeft > startScrollPosition) {
+      // if tab is on the right side and we want to show the whole tab in visible area,
+      // we need to include width of the tab and visible area in the formula
+      //  ___________________________________________
+      // |____|_______|________|________|_show_this_|
+      //        ↑_____________________↑
+      //            visible area
+      scrollBy += (tab.offsetWidth - this.visibleTabs.offsetWidth)
+    }
+
+    let startTime = null
+    const scrollAnimation = time => {
+      startTime = startTime || time
+      const elapsed = (time - startTime) / animationTiming
+
+      this.visibleTabs.scrollLeft = startScrollPosition + easeOutCubic(elapsed) * scrollBy * scrollMoreCoeff
+      if (elapsed < 1) {
+        window.requestAnimationFrame(scrollAnimation)
+      } else {
+        this.setState(this.getArrowsState())
+      }
+    }
+
+    window.requestAnimationFrame(scrollAnimation)
+  }
+
+  getArrowsState () {
+    const allTabs = this.allTabs
+    const visibleTabs = this.visibleTabs
+
+    const showArrows = visibleTabs.offsetWidth < allTabs.scrollWidth
+    const enableRightArrow = visibleTabs.scrollLeft !== allTabs.scrollWidth - visibleTabs.offsetWidth
+    const enableLeftArrow = visibleTabs.scrollLeft !== 0
+
+    return {showArrows, enableRightArrow, enableLeftArrow}
+  }
+
   addSnippet () {
-    let { note } = this.state
+    const { config } = this.props
+    const { note } = this.state
 
     note.snippets = note.snippets.concat([{
       name: '',
-      mode: 'Plain Text',
+      mode: config.editor.snippetDefaultLanguage || 'text',
       content: ''
     }])
-    let snippetIndex = note.snippets.length - 1
+    const snippetIndex = note.snippets.length - 1
 
-    this.setState({
+    this.setState(Object.assign({
       note,
       snippetIndex
-    }, () => {
+    }, this.getArrowsState()), () => {
+      if (this.state.showArrows) {
+        const tabs = this.allTabs.querySelectorAll('div')
+        if (tabs) {
+          this.moveToTab(tabs[snippetIndex])
+        }
+      }
       this.refs['tab-' + snippetIndex].startRenaming()
     })
   }
 
   jumpNextTab () {
-    this.setState({
-      snippetIndex: (this.state.snippetIndex + 1) % this.state.note.snippets.length
-    }, () => {
+    this.setState(state => ({
+      snippetIndex: (state.snippetIndex + 1) % state.note.snippets.length
+    }), () => {
       this.focusEditor()
     })
   }
 
   jumpPrevTab () {
-    this.setState({
-      snippetIndex: (this.state.snippetIndex - 1 + this.state.note.snippets.length) % this.state.note.snippets.length
-    }, () => {
+    this.setState(state => ({
+      snippetIndex: (state.snippetIndex - 1 + state.note.snippets.length) % state.note.snippets.length
+    }), () => {
       this.focusEditor()
     })
   }
 
   focusEditor () {
-    console.log('code-' + this.state.snippetIndex)
     this.refs['code-' + this.state.snippetIndex].focus()
   }
 
@@ -477,29 +645,36 @@ class SnippetNoteDetail extends React.Component {
     if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none'
   }
 
-  showWarning () {
+  showWarning (e, msg) {
+    const warningMessage = (msg) => ({
+      'export-txt': 'Text export',
+      'export-md': 'Markdown export',
+      'export-html': 'HTML export',
+      'print': 'Print'
+    })[msg]
+
     dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
-      message: 'Sorry!',
-      detail: 'md/text import is available only a markdown note.',
-      buttons: ['OK']
+      message: i18n.__('Sorry!'),
+      detail: i18n.__(warningMessage(msg) + ' is available only in markdown notes.'),
+      buttons: [i18n.__('OK')]
     })
   }
 
   render () {
-    let { data, config, location } = this.props
-    let { note } = this.state
+    const { data, config, location } = this.props
+    const { note } = this.state
 
-    let storageKey = note.storage
-    let folderKey = note.folder
+    const storageKey = note.storage
+    const folderKey = note.folder
 
     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
 
-    let tabList = note.snippets.map((snippet, index) => {
-      let isActive = this.state.snippetIndex === index
+    const tabList = note.snippets.map((snippet, index) => {
+      const isActive = this.state.snippetIndex === index
 
       return <SnippetTab
         key={index}
@@ -510,13 +685,15 @@ class SnippetNoteDetail extends React.Component {
         onDelete={(e) => this.handleTabDeleteButtonClick(e, index)}
         onRename={(name) => this.renameSnippetByIndex(index, name)}
         isDeletable={note.snippets.length > 1}
+        onDragStart={(e) => this.handleTabDragStart(e, index)}
+        onDrop={(e) => this.handleTabDrop(e, index)}
       />
     })
 
-    let viewList = note.snippets.map((snippet, index) => {
-      let isActive = this.state.snippetIndex === index
+    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'
@@ -540,15 +717,21 @@ class SnippetNoteDetail extends React.Component {
             fontSize={editorFontSize}
             indentType={config.editor.indentType}
             indentSize={editorIndentSize}
+            displayLineNumbers={config.editor.displayLineNumbers}
             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}
+            enableSmartPaste={config.editor.enableSmartPaste}
+            hotkey={config.hotkey}
           />
         }
       </div>
     })
 
-    let options = []
+    const options = []
     data.storageMap.forEach((storage, index) => {
       storage.folders.forEach((folder) => {
         options.push({
@@ -557,14 +740,11 @@ class SnippetNoteDetail extends React.Component {
         })
       })
     })
-    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
 
     const trashTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <i styleName='undo-button'
-          className='fa fa-undo fa-fw'
-          onClick={(e) => this.handleUndoButtonClick(e)}
-        />
+        <RestoreButton onClick={(e) => this.handleUndoButtonClick(e)} />
       </div>
       <div styleName='info-right'>
         <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
@@ -578,6 +758,7 @@ class SnippetNoteDetail extends React.Component {
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.showWarning}
           exportAsTxt={this.showWarning}
+          exportAsHtml={this.showWarning}
         />
       </div>
     </div>
@@ -596,34 +777,41 @@ 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>
       <div styleName='info-right'>
-        <InfoButton
-          onClick={(e) => this.handleInfoButtonClick(e)}
-        />
-
         <StarButton
           onClick={(e) => this.handleStarButtonClick(e)}
           isActive={note.isStarred}
         />
 
-        <button styleName='control-fullScreenButton'
+        <button styleName='control-fullScreenButton' title={i18n.__('Fullscreen')}
           onMouseDown={(e) => this.handleFullScreenButton(e)}>
-          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg' />
+          <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
+          <span styleName='tooltip'>{i18n.__('Fullscreen')}</span>
         </button>
 
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}
-          noteLink={`[${note.title}](${location.query.key})`}
+          noteLink={`[${note.title}](:note:${location.query.key})`}
           updatedAt={formatDate(note.updatedAt)}
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.showWarning}
           exportAsTxt={this.showWarning}
+          exportAsHtml={this.showWarning}
           type={note.type}
+          print={this.showWarning}
         />
       </div>
     </div>
@@ -644,16 +832,32 @@ class SnippetNoteDetail extends React.Component {
                 fontSize: parseInt(config.preview.fontSize, 10)
               }}
               ref='description'
-              placeholder='Description...'
+              placeholder={i18n.__('Description...')}
               value={this.state.note.description}
               onChange={(e) => this.handleChange(e)}
             />
           </div>
           <div styleName='tabList'>
-            <div styleName='list'>
-              {tabList}
+            <button styleName='tabButton'
+              hidden={!this.state.showArrows}
+              disabled={!this.state.enableLeftArrow}
+              onClick={(e) => this.handleTabMoveLeftButtonClick(e)}
+            >
+              <i className='fa fa-chevron-left' />
+            </button>
+            <div styleName='list' onScroll={(e) => { this.setState(this.getArrowsState()) }} ref={(tabs) => { this.visibleTabs = tabs }}>
+              <div styleName='allTabs' ref={(tabs) => { this.allTabs = tabs }}>
+                {tabList}
+              </div>
             </div>
-            <button styleName='plusButton'
+            <button styleName='tabButton'
+              hidden={!this.state.showArrows}
+              disabled={!this.state.enableRightArrow}
+              onClick={(e) => this.handleTabMoveRightButtonClick(e)}
+            >
+              <i className='fa fa-chevron-right' />
+            </button>
+            <button styleName='tabButton'
               onClick={(e) => this.handleTabPlusButtonClick(e)}
             >
               <i className='fa fa-plus' />
@@ -667,7 +871,7 @@ class SnippetNoteDetail extends React.Component {
             onClick={(e) => this.handleModeButtonClick(e, this.state.snippetIndex)}
           >
             {this.state.note.snippets[this.state.snippetIndex].mode == null
-              ? 'Select Syntax...'
+              ? i18n.__('Select Syntax...')
               : this.state.note.snippets[this.state.snippetIndex].mode
             }&nbsp;
             <i className='fa fa-caret-down' />

browser/main/Detail/SnippetNoteDetail.styl

@@ -9,8 +9,7 @@
 
 .body
   absolute left right
-  left $snippet-note-detail-left-margin
-  right $snippet-note-detail-right-margin
+  margin 0 30px
   top $info-height + $info-margin-under-border
   bottom $statusBar-height
   background-color $ui-noteDetail-backgroundColor
@@ -36,13 +35,26 @@
   height 30px
   display flex
   background-color $ui-noteDetail-backgroundColor
+  overflow hidden
 
 .tabList .list
   flex 1
-  display flex
   overflow hidden
+  overflow-x scroll
+  position relative
 
-.tabList .plusButton
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .allTabs
+    display flex
+    position relative
+    overflow visible
+    left 0
+    transition left 0.1s
+
+.tabList .tabButton
   navWhiteButtonColor()
   width 30px
 
@@ -69,7 +81,22 @@
 .control-fullScreenButton
   top 80px
   margin-bottom 10px
-  topBarButtonLight()
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 70px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
 
 body[data-theme="white"]
   .root
@@ -78,7 +105,7 @@ body[data-theme="white"]
 
 body[data-theme="dark"]
   .root
-    border none
+    border-left 1px solid $ui-dark-borderColor
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
 
@@ -109,3 +136,54 @@ body[data-theme="dark"]
 
   .control-fullScreenButton
     topBarButtonDark()
+
+body[data-theme="solarized-dark"]
+  .root
+    border-left 1px solid $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+  .body
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+  .body .description textarea
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    color $ui-solarized-dark-text-color
+    border 1px solid $ui-solarized-dark-borderColor
+
+  .tabList
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .root
+    border-left 1px solid $ui-monokai-borderColor
+    background-color $ui-monokai-noteDetail-backgroundColor
+
+  .body
+    background-color $ui-monokai-noteDetail-backgroundColor
+
+  .body .description textarea
+    background-color $ui-monokai-noteDetail-backgroundColor
+    color $ui-monokai-text-color
+    border 1px solid $ui-monokai-borderColor
+
+  .tabList
+    background-color $ui-monokai-noteDetail-backgroundColor
+    color $ui-monokai-text-color
+
+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/StarButton.js

@@ -1,7 +1,9 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StarButton.styl'
 import _ from 'lodash'
+import i18n from 'browser/lib/i18n'
 
 class StarButton extends React.Component {
   constructor (props) {
@@ -31,7 +33,7 @@ class StarButton extends React.Component {
   }
 
   render () {
-    let { className } = this.props
+    const { className } = this.props
 
     return (
       <button className={_.isString(className)
@@ -45,14 +47,14 @@ class StarButton extends React.Component {
         onMouseDown={(e) => this.handleMouseDown(e)}
         onMouseUp={(e) => this.handleMouseUp(e)}
         onMouseLeave={(e) => this.handleMouseLeave(e)}
-        onClick={this.props.onClick}
-      >
+        onClick={this.props.onClick}>
         <img styleName='icon'
           src={this.state.isActive || this.props.isActive
             ? '../resources/icon/icon-starred.svg'
             : '../resources/icon/icon-star.svg'
           }
         />
+        <span styleName='tooltip'>{i18n.__('Star')}</span>
       </button>
     )
   }

browser/main/Detail/StarButton.styl

@@ -1,9 +1,25 @@
 .root
   top 45px
-  topBarButtonLight()
+  topBarButtonRight()
   &:hover
     transition 0.2s
     color alpha($ui-favorite-star-button-color, 0.6)
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 115px
+  width 40px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
 
 .root--active
   @extend .root

browser/main/Detail/TagSelect.js

@@ -1,65 +1,38 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TagSelect.styl'
 import _ from 'lodash'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import i18n from 'browser/lib/i18n'
+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()
-        }
-    }
-  }
-
-  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.trim().replace(/ +/g, '_')
+    if (newTag.charAt(0) === '#') {
+      newTag.substring(1)
+    }
 
     if (newTag.length <= 0) {
       this.setState({
@@ -68,6 +41,7 @@ class TagSelect extends React.Component {
       return
     }
 
+    let { value } = this.props
     value = _.isArray(value)
       ? value.slice()
       : []
@@ -82,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()
+        }
     }
   }
 
-  render () {
-    let { value, className } = this.props
+  onSuggestionsClearRequested () {
+    this.setState({
+      suggestions: []
+    })
+  }
 
-    let tagList = _.isArray(value)
-      ? value.map((tag) => {
+  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, showTagsAlphabetically } = this.props
+
+    const tagList = _.isArray(value)
+      ? (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>
@@ -120,6 +198,8 @@ class TagSelect extends React.Component {
       })
       : []
 
+    const { newTag, suggestions } = this.state
+
     return (
       <div className={_.isString(className)
           ? 'TagSelect ' + className
@@ -128,23 +208,39 @@ class TagSelect extends React.Component {
         styleName='root'
       >
         {tagList}
-        <input styleName='newTag'
+        <Autosuggest
           ref='newTag'
-          value={this.state.newTag}
-          placeholder='Add tag...'
-          onChange={(e) => this.handleNewTagInputChange(e)}
-          onKeyDown={(e) => this.handleNewTagInputKeyDown(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)