v0.15.1

Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.4.0 to 1.4.7.
- [Release notes](https://github.com/unshiftio/url-parse/releases)
- [Commits](https://github.com/unshiftio/url-parse/compare/1.4.0...1.4.7)

Signed-off-by: dependabot[bot] <support@github.com>

.babelrc

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

.boostnoterc.sample

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

.editorconfig

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

.eslintrc

@@ -1,6 +1,6 @@
 {
-  "extends": ["standard", "standard-jsx", "plugin:react/recommended"],
-  "plugins": ["react"],
+  "extends": ["standard", "standard-jsx", "plugin:react/recommended", "prettier"],
+  "plugins": ["react", "prettier"],
   "rules": {
     "no-useless-escape": 0,
     "prefer-const": ["warn", {
@@ -13,12 +13,15 @@
     "react/no-string-refs": 0,
     "react/no-find-dom-node": "warn",
     "react/no-render-return-value": "warn",
-    "react/no-deprecated": "warn"
+    "react/no-deprecated": "warn",
+    "prettier/prettier": ["error"]
   },
   "globals": {
     "FileReader": true,
     "localStorage": true,
-    "fetch": true
+    "fetch": true,
+    "Image": true,
+    "MutationObserver": true
   },
   "env": {
     "jest": true

.github/FUNDING.yml

@@ -0,0 +1 @@
+issuehunt: BoostIo/Boostnote

.gitignore

@@ -9,4 +9,5 @@ node_modules/*
 /secret
 *.log
 .idea
-.vscode
+.vscode
+package-lock.json

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "jsxSingleQuote": true
+}

.travis.yml

@@ -1,10 +1,9 @@
 language: node_js
 node_js:
-  - 7
+  - 8
 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'
+  - 'if [[ ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} = "master" ]]; then npm install -g grunt npm@6.4 && grunt pre-build; fi'
 after_success:
   - openssl aes-256-cbc -K $encrypted_440d7f9a3c38_key -iv $encrypted_440d7f9a3c38_iv
     -in .snapcraft/travis_snapcraft.cfg -out .snapcraft/snapcraft.cfg -d

.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_modules/.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,72 +0,0 @@
-<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. If you'd like to join them, please consider:
-
-- [Become a backer or sponsor on Open Collective.](https://opencollective.com/boostnoteio)
-
----
-
-## Backers via OpenCollective
-
-### [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/.
-
-### [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/.
-
-### [Bronze Sponsors / $50 per month](https://opencollective.com/boostnoteio/order/2258)
-- Get your name and Url (or E-mail) on Readme.md on GitHub.
-
-### [Backers3 / $10 per month](https://opencollective.com/boostnoteio/order/2176)
-- [Ralph03](https://opencollective.com/ralph03)
-
-- [Nikolas Dan](https://opencollective.com/nikolas-dan)
-
-### [Backers2 / $5 per month](https://opencollective.com/boostnoteio/order/2175)
-- [Yeojong Kim](https://twitter.com/yeojoy)
-
-- [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
-
-- Kuzz - $65
-
-- Intense Raiden - $45
-
-- ravy22 - $25
-
-- trentpolack	- $20
-
-- hikariru - $10
-
-- kolchan11 - $10
-
-- RonWalker22 - $10
-
-- hocchuc	- $5
-
-- Adam - $5
-
-- Steve	- $5
-
-- evmin	- $5

FAQ.md

@@ -0,0 +1,29 @@
+# Frequently Asked Questions
+
+
+<details><summary>Allowing dangerous HTML tags</summary>
+
+Sometimes it is useful to allow dangerous HTML tags to add interactivity to your notebook. One of the example is to use details/summary as a way to expand/collaps your todo-list.
+
+* How to enable:
+  * Go to **Preferences** → **Interface** → **Sanitization** → **Allow dangerous html tags**
+* Example note: Multiple todo-list
+  * Create new notes
+  * Paste the below code, and you'll see that you can expand/collaps the todo-list, and you can have multiple todo-list in your note.
+  
+```html
+<details><summary>What I want to do</summary>
+
+- [x] Create an awesome feature X
+- [ ] Do my homework
+
+</details>
+```
+
+</details>
+
+## Other questions
+
+You can ask [here][ISSUES]
+
+[ISSUES]: https://github.com/BoostIO/Boostnote/issues

ISSUE_TEMPLATE.md

@@ -1,23 +1,33 @@
 # Current behavior
 
 <!--
-Please paste some **screenshots** with the **developer tool** open (console tab) when you report a bug.
+Let us know what is currently happening.
 
-If your issue is regarding boostnote mobile, move to https://github.com/BoostIO/boostnote-mobile.
+Please include some **screenshots** with the **developer tools** open (console tab) when you report a bug.
+
+If your issue is regarding the new Boost Note.next, please open an issue in the new repo 👉 https://github.com/BoostIO/BoostNote.next/issues.
 -->
 
 # 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 :
+- Boostnote version: <!-- 0.x.x -->
+- OS version and name: <!-- Windows 10 / Ubuntu 18.04 / etc -->
 
 <!--
 Love Boostnote? Please consider supporting us on IssueHunt:

LICENSE

@@ -2,7 +2,7 @@ GPL-3.0
 
 Boostnote - an open source note-taking app made for programmers just like you.
 
-Copyright (C) 2017 - 2018 BoostIO
+Copyright (C) 2017 - 2019 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,42 @@
+<!--
+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
+- :white_circle: This PR will modify the UI or affects the UX
+- :white_circle: This PR will add/update/delete a keybinding

browser/components/CodeEditor.styl

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

browser/components/ColorPicker.js

@@ -0,0 +1,77 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { SketchPicker } from 'react-color'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ColorPicker.styl'
+
+const componentHeight = 330
+
+class ColorPicker extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      color: this.props.color || '#939395'
+    }
+
+    this.onColorChange = this.onColorChange.bind(this)
+    this.handleConfirm = this.handleConfirm.bind(this)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.onColorChange(nextProps.color)
+  }
+
+  onColorChange(color) {
+    this.setState({
+      color
+    })
+  }
+
+  handleConfirm() {
+    this.props.onConfirm(this.state.color)
+  }
+
+  render() {
+    const { onReset, onCancel, targetRect } = this.props
+    const { color } = this.state
+
+    const clientHeight = document.body.clientHeight
+    const alignX = targetRect.right + 4
+    let alignY = targetRect.top
+    if (targetRect.top + componentHeight > clientHeight) {
+      alignY = targetRect.bottom - componentHeight
+    }
+
+    return (
+      <div
+        styleName='colorPicker'
+        style={{ top: `${alignY}px`, left: `${alignX}px` }}
+      >
+        <div styleName='cover' onClick={onCancel} />
+        <SketchPicker color={color} onChange={this.onColorChange} />
+        <div styleName='footer'>
+          <button styleName='btn-reset' onClick={onReset}>
+            Reset
+          </button>
+          <button styleName='btn-cancel' onClick={onCancel}>
+            Cancel
+          </button>
+          <button styleName='btn-confirm' onClick={this.handleConfirm}>
+            Confirm
+          </button>
+        </div>
+      </div>
+    )
+  }
+}
+
+ColorPicker.propTypes = {
+  color: PropTypes.string,
+  targetRect: PropTypes.object,
+  onConfirm: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onReset: PropTypes.func.isRequired
+}
+
+export default CSSModules(ColorPicker, styles)

browser/components/ColorPicker.styl

@@ -0,0 +1,39 @@
+.colorPicker
+  position fixed
+  z-index 2
+  display flex
+  flex-direction column
+
+.cover
+  position fixed
+  top 0
+  right 0
+  bottom 0
+  left 0
+
+.footer
+  display flex
+  justify-content center
+  z-index 2
+  align-items center
+  & > button + button
+    margin-left 10px
+
+.btn-cancel,
+.btn-confirm,
+.btn-reset
+  vertical-align middle
+  height 25px
+  margin-top 2.5px
+  border-radius 2px
+  border none
+  padding 0 5px
+  background-color $default-button-background
+  &:hover
+    background-color $default-button-background--hover
+.btn-confirm
+  background-color #1EC38B
+  &:hover
+    background-color darken(#1EC38B, 25%)
+
+

browser/components/MarkdownEditor.js

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
@@ -6,9 +7,11 @@ import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import { findStorage } from 'browser/lib/findStorage'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'
 
 class MarkdownEditor extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
 
     // char codes for ctrl + w
@@ -18,186 +21,246 @@ class MarkdownEditor extends React.Component {
     this.supportMdSelectionBold = [16, 17, 186]
 
     this.state = {
-      status: 'PREVIEW',
+      status:
+        props.config.editor.switchPreview === 'RIGHTCLICK'
+          ? props.config.editor.delfaultStatus
+          : 'CODE',
       renderValue: props.value,
       keyPressed: new Set(),
-      isLocked: false
+      isLocked: props.isLocked
     }
 
-    this.lockEditorCode = () => this.handleLockEditor()
+    this.lockEditorCode = this.handleLockEditor.bind(this)
+    this.focusEditor = this.focusEditor.bind(this)
+
+    this.previewRef = React.createRef()
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.value = this.refs.code.value
     eventEmitter.on('editor:lock', this.lockEditorCode)
+    eventEmitter.on('editor:focus', this.focusEditor)
   }
 
-  componentDidUpdate () {
+  componentDidUpdate() {
     this.value = this.refs.code.value
   }
 
-  componentWillReceiveProps (props) {
+  UNSAFE_componentWillReceiveProps(props) {
     if (props.value !== this.props.value) {
       this.queueRendering(props.value)
     }
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     this.cancelQueue()
     eventEmitter.off('editor:lock', this.lockEditorCode)
+    eventEmitter.off('editor:focus', this.focusEditor)
   }
 
-  queueRendering (value) {
+  focusEditor() {
+    this.setState(
+      {
+        status: 'CODE'
+      },
+      () => {
+        if (this.refs.code == null) {
+          return
+        }
+        this.refs.code.focus()
+      }
+    )
+  }
+
+  queueRendering(value) {
     clearTimeout(this.renderTimer)
     this.renderTimer = setTimeout(() => {
       this.renderPreview(value)
     }, 500)
   }
 
-  cancelQueue () {
+  cancelQueue() {
     clearTimeout(this.renderTimer)
   }
 
-  renderPreview (value) {
+  renderPreview(value) {
     this.setState({
       renderValue: value
     })
   }
 
-  handleChange (e) {
+  setValue(value) {
+    this.refs.code.setValue(value)
+  }
+
+  handleChange(e) {
     this.value = this.refs.code.value
     this.props.onChange(e)
   }
 
-  handleContextMenu (e) {
+  handleContextMenu(e) {
+    if (this.state.isLocked) return
     const { config } = this.props
     if (config.editor.switchPreview === 'RIGHTCLICK') {
-      const newStatus = this.state.status === 'PREVIEW'
-        ? 'CODE'
-        : 'PREVIEW'
-      this.setState({
-        status: newStatus
-      }, () => {
-        if (newStatus === 'CODE') {
-          this.refs.code.focus()
-        } else {
-          this.refs.preview.focus()
+      const newStatus = this.state.status === 'PREVIEW' ? 'CODE' : 'PREVIEW'
+      this.setState(
+        {
+          status: newStatus
+        },
+        () => {
+          if (newStatus === 'CODE') {
+            this.refs.code.focus()
+          } else {
+            this.previewRef.current.focus()
+          }
+          eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+
+          const newConfig = Object.assign({}, config)
+          newConfig.editor.delfaultStatus = newStatus
+          ConfigManager.set(newConfig)
         }
-        eventEmitter.emit('topbar:togglelockbutton', this.state.status)
-      })
+      )
     }
   }
 
-  handleBlur (e) {
+  handleBlur(e) {
     if (this.state.isLocked) return
     this.setState({ keyPressed: new Set() })
     const { config } = this.props
-    if (config.editor.switchPreview === 'BLUR' ||
-        (config.editor.switchPreview === 'DBL_CLICK' && this.state.status === 'CODE')
+    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'
-      }, () => {
-        this.refs.preview.focus()
-        this.refs.preview.scrollTo(cursorPosition.line)
-      })
+      this.setState(
+        {
+          status: 'PREVIEW'
+        },
+        () => {
+          this.previewRef.current.focus()
+          this.previewRef.current.scrollToRow(cursorPosition.line)
+        }
+      )
       eventEmitter.emit('topbar:togglelockbutton', this.state.status)
     }
   }
 
-  handleDoubleClick (e) {
+  handleDoubleClick(e) {
     if (this.state.isLocked) return
-    this.setState({keyPressed: new Set()})
+    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)
-      })
+      this.setState(
+        {
+          status: 'CODE'
+        },
+        () => {
+          this.refs.code.focus()
+          eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+        }
+      )
     }
   }
 
-  handlePreviewMouseDown (e) {
+  handlePreviewMouseDown(e) {
     this.previewMouseDownedAt = new Date()
   }
 
-  handlePreviewMouseUp (e) {
+  handlePreviewMouseUp(e) {
     const { config } = this.props
-    if (config.editor.switchPreview === 'BLUR' && new Date() - this.previewMouseDownedAt < 200) {
-      this.setState({
-        status: 'CODE'
-      }, () => {
-        this.refs.code.focus()
-      })
+    if (
+      config.editor.switchPreview === 'BLUR' &&
+      new Date() - this.previewMouseDownedAt < 200
+    ) {
+      this.setState(
+        {
+          status: 'CODE'
+        },
+        () => {
+          this.refs.code.focus()
+        }
+      )
       eventEmitter.emit('topbar:togglelockbutton', this.state.status)
     }
   }
 
-  handleCheckboxClick (e) {
+  handleCheckboxClick(e) {
     e.preventDefault()
     e.stopPropagation()
     const idMatch = /checkbox-([0-9]+)/
-    const checkedMatch = /\[x\]/i
-    const uncheckedMatch = /\[ \]/
+    const checkedMatch = /^(\s*>?)*\s*[+\-*] \[x]/i
+    const uncheckedMatch = /^(\s*>?)*\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 lineIndex =
+        parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
+      const lines = this.refs.code.value.split('\n')
 
       const targetLine = lines[lineIndex]
+      let newLine = targetLine
 
       if (targetLine.match(checkedMatch)) {
-        lines[lineIndex] = targetLine.replace(checkedMatch, '[ ]')
+        newLine = targetLine.replace(checkReplace, '[ ]')
       }
       if (targetLine.match(uncheckedMatch)) {
-        lines[lineIndex] = targetLine.replace(uncheckedMatch, '[x]')
+        newLine = targetLine.replace(uncheckReplace, '[x]')
       }
-      this.refs.code.setValue(lines.join('\n'))
+      this.refs.code.setLineContent(lineIndex, newLine)
     }
   }
 
-  focus () {
+  focus() {
     if (this.state.status === 'PREVIEW') {
-      this.setState({
-        status: 'CODE'
-      }, () => {
-        this.refs.code.focus()
-      })
+      this.setState(
+        {
+          status: 'CODE'
+        },
+        () => {
+          this.refs.code.focus()
+        }
+      )
     } else {
       this.refs.code.focus()
     }
     eventEmitter.emit('topbar:togglelockbutton', this.state.status)
   }
 
-  reload () {
+  reload() {
     this.refs.code.reload()
     this.cancelQueue()
     this.renderPreview(this.props.value)
   }
 
-  handleKeyDown (e) {
+  handleKeyDown(e) {
     const { config } = this.props
     if (this.state.status !== 'CODE') return false
     const keyPressed = this.state.keyPressed
     keyPressed.add(e.keyCode)
     this.setState({ keyPressed })
-    const 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' &&
-        this.escapeFromEditor.every(isNoteHandlerKey)) {
+    if (
+      keyPressed.size === this.escapeFromEditor.length &&
+      !this.state.isLocked &&
+      this.state.status === 'CODE' &&
+      this.escapeFromEditor.every(isNoteHandlerKey)
+    ) {
       this.handleContextMenu()
       if (config.editor.switchPreview === 'BLUR') document.activeElement.blur()
     }
-    if (keyPressed.size === this.supportMdSelectionBold.length && this.supportMdSelectionBold.every(isNoteHandlerKey)) {
+    if (
+      keyPressed.size === this.supportMdSelectionBold.length &&
+      this.supportMdSelectionBold.every(isNoteHandlerKey)
+    ) {
       this.addMdAroundWord('**')
     }
   }
 
-  addMdAroundWord (mdElement) {
+  addMdAroundWord(mdElement) {
     if (this.refs.code.editor.getSelection()) {
       return this.addMdAroundSelection(mdElement)
     }
@@ -205,25 +268,63 @@ class MarkdownEditor extends React.Component {
     const word = this.refs.code.editor.findWordAt(currentCaret)
     const cmDoc = this.refs.code.editor.getDoc()
     cmDoc.replaceRange(mdElement, word.anchor)
-    cmDoc.replaceRange(mdElement, { line: word.head.line, ch: word.head.ch + mdElement.length })
+    cmDoc.replaceRange(mdElement, {
+      line: word.head.line,
+      ch: word.head.ch + mdElement.length
+    })
   }
 
-  addMdAroundSelection (mdElement) {
-    this.refs.code.editor.replaceSelection(`${mdElement}${this.refs.code.editor.getSelection()}${mdElement}`)
+  addMdAroundSelection(mdElement) {
+    this.refs.code.editor.replaceSelection(
+      `${mdElement}${this.refs.code.editor.getSelection()}${mdElement}`
+    )
   }
 
-  handleKeyUp (e) {
+  handleDropImage(dropEvent) {
+    dropEvent.preventDefault()
+    const { storageKey, noteKey } = this.props
+
+    this.setState(
+      {
+        status: 'CODE'
+      },
+      () => {
+        this.refs.code.focus()
+
+        this.refs.code.editor.execCommand('goDocEnd')
+        this.refs.code.editor.execCommand('goLineEnd')
+        this.refs.code.editor.execCommand('newlineAndIndent')
+
+        attachmentManagement.handleAttachmentDrop(
+          this.refs.code,
+          storageKey,
+          noteKey,
+          dropEvent
+        )
+      }
+    )
+  }
+
+  handleKeyUp(e) {
     const keyPressed = this.state.keyPressed
     keyPressed.delete(e.keyCode)
     this.setState({ keyPressed })
   }
 
-  handleLockEditor () {
+  handleLockEditor() {
     this.setState({ isLocked: !this.state.isLocked })
   }
 
-  render () {
-    const {className, value, config, storageKey, noteKey} = this.props
+  render() {
+    const {
+      className,
+      value,
+      config,
+      storageKey,
+      noteKey,
+      linesHighlighted,
+      RTL
+    } = this.props
 
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
@@ -231,26 +332,27 @@ class MarkdownEditor extends React.Component {
     if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
 
     const previewStyle = {}
-    if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
+    if (this.props.ignorePreviewPointerEvents)
+      previewStyle.pointerEvents = 'none'
 
     const storage = findStorage(storageKey)
 
     return (
-      <div className={className == null
-          ? 'MarkdownEditor'
-          : `MarkdownEditor ${className}`
+      <div
+        className={
+          className == null ? 'MarkdownEditor' : `MarkdownEditor ${className}`
         }
-        onContextMenu={(e) => this.handleContextMenu(e)}
+        onContextMenu={e => this.handleContextMenu(e)}
         tabIndex='-1'
-        onKeyDown={(e) => this.handleKeyDown(e)}
-        onKeyUp={(e) => this.handleKeyUp(e)}
+        onKeyDown={e => this.handleKeyDown(e)}
+        onKeyUp={e => this.handleKeyUp(e)}
       >
-        <CodeEditor styleName={this.state.status === 'CODE'
-            ? 'codeEditor'
-            : 'codeEditor--hide'
+        <CodeEditor
+          styleName={
+            this.state.status === 'CODE' ? 'codeEditor' : 'codeEditor--hide'
           }
           ref='code'
-          mode='GitHub Flavored Markdown'
+          mode='Boost Flavored Markdown'
           value={value}
           theme={config.editor.theme}
           keyMap={config.editor.keyMap}
@@ -261,16 +363,32 @@ class MarkdownEditor extends React.Component {
           enableRulers={config.editor.enableRulers}
           rulers={config.editor.rulers}
           displayLineNumbers={config.editor.displayLineNumbers}
+          lineWrapping
+          matchingPairs={config.editor.matchingPairs}
+          matchingTriples={config.editor.matchingTriples}
+          explodingPairs={config.editor.explodingPairs}
           scrollPastEnd={config.editor.scrollPastEnd}
           storageKey={storageKey}
           noteKey={noteKey}
           fetchUrlTitle={config.editor.fetchUrlTitle}
-          onChange={(e) => this.handleChange(e)}
-          onBlur={(e) => this.handleBlur(e)}
+          enableTableEditor={config.editor.enableTableEditor}
+          linesHighlighted={linesHighlighted}
+          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}
+          enableMarkdownLint={config.editor.enableMarkdownLint}
+          customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
+          prettierConfig={config.editor.prettierConfig}
+          deleteUnusedAttachments={config.editor.deleteUnusedAttachments}
+          RTL={RTL}
         />
-        <MarkdownPreview styleName={this.state.status === 'PREVIEW'
-            ? 'preview'
-            : 'preview--hide'
+        <MarkdownPreview
+          ref={this.previewRef}
+          styleName={
+            this.state.status === 'PREVIEW' ? 'preview' : 'preview--hide'
           }
           style={previewStyle}
           theme={config.ui.theme}
@@ -286,19 +404,22 @@ class MarkdownEditor extends React.Component {
           smartArrows={config.preview.smartArrows}
           breaks={config.preview.breaks}
           sanitize={config.preview.sanitize}
-          ref='preview'
-          onContextMenu={(e) => this.handleContextMenu(e)}
-          onDoubleClick={(e) => this.handleDoubleClick(e)}
+          mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
+          onContextMenu={e => this.handleContextMenu(e)}
+          onDoubleClick={e => this.handleDoubleClick(e)}
           tabIndex='0'
           value={this.state.renderValue}
-          onMouseUp={(e) => this.handlePreviewMouseUp(e)}
-          onMouseDown={(e) => this.handlePreviewMouseDown(e)}
-          onCheckboxClick={(e) => this.handleCheckboxClick(e)}
+          onMouseUp={e => this.handlePreviewMouseUp(e)}
+          onMouseDown={e => this.handlePreviewMouseDown(e)}
+          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}
+          onDrop={e => this.handleDropImage(e)}
+          RTL={RTL}
         />
       </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/MarkdownSplitEditor.js

@@ -8,7 +8,7 @@ import styles from './MarkdownSplitEditor.styl'
 import CSSModules from 'browser/lib/CSSModules'
 
 class MarkdownSplitEditor extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
     this.value = props.value
     this.focus = () => this.refs.code.focus()
@@ -20,13 +20,22 @@ class MarkdownSplitEditor extends React.Component {
     }
   }
 
-  handleOnChange () {
-    this.value = this.refs.code.value
-    this.props.onChange()
+  setValue(value) {
+    this.refs.code.setValue(value)
   }
 
-  handleScroll (e) {
-    const previewDoc = _.get(this, 'refs.preview.refs.root.contentWindow.document')
+  handleOnChange(e) {
+    this.value = this.refs.code.value
+    this.props.onChange(e)
+  }
+
+  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
 
@@ -43,7 +52,7 @@ class MarkdownSplitEditor extends React.Component {
         targetHeight = _.get(codeDoc, 'height')
       }
 
-      const distance = (targetHeight * srcTop / srcHeight) - targetTop
+      const distance = (targetHeight * srcTop) / srcHeight - targetTop
       const framerate = 1000 / 60
       const frames = 20
       const refractory = frames * framerate
@@ -54,49 +63,60 @@ class MarkdownSplitEditor extends React.Component {
       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)
+        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)
+          setTimeout(() => {
+            this.userScroll = true
+          }, refractory)
         }
         frame++
       }, framerate)
     }
   }
 
-  handleCheckboxClick (e) {
+  handleCheckboxClick(e) {
     e.preventDefault()
     e.stopPropagation()
     const idMatch = /checkbox-([0-9]+)/
-    const checkedMatch = /\[x\]/i
-    const uncheckedMatch = /\[ \]/
+    const checkedMatch = /^(\s*>?)*\s*[+\-*] \[x]/i
+    const uncheckedMatch = /^(\s*>?)*\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 lineIndex =
+        parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
+      const lines = this.refs.code.value.split('\n')
 
       const targetLine = lines[lineIndex]
+      let newLine = targetLine
 
       if (targetLine.match(checkedMatch)) {
-        lines[lineIndex] = targetLine.replace(checkedMatch, '[ ]')
+        newLine = targetLine.replace(checkReplace, '[ ]')
       }
       if (targetLine.match(uncheckedMatch)) {
-        lines[lineIndex] = targetLine.replace(uncheckedMatch, '[x]')
+        newLine = targetLine.replace(uncheckReplace, '[x]')
       }
-      this.refs.code.setValue(lines.join('\n'))
+      this.refs.code.setLineContent(lineIndex, newLine)
     }
   }
 
-  handleMouseMove (e) {
+  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
+      let newCodeEditorWidthInPercent = ((e.pageX - offset) / rootWidth) * 100
 
       // limit minSize to 10%, maxSize to 90%
       if (newCodeEditorWidthInPercent <= 10) {
@@ -113,62 +133,89 @@ class MarkdownSplitEditor extends React.Component {
     }
   }
 
-  handleMouseUp (e) {
+  handleMouseUp(e) {
     e.preventDefault()
     this.setState({
       isSliderFocused: false
     })
   }
 
-  handleMouseDown (e) {
+  handleMouseDown(e) {
     e.preventDefault()
     this.setState({
       isSliderFocused: true
     })
   }
 
-  render () {
-    const {config, value, storageKey, noteKey} = this.props
+  render() {
+    const {
+      config,
+      value,
+      storageKey,
+      noteKey,
+      linesHighlighted,
+      RTL
+    } = 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'
+    previewStyle.width = 100 - this.state.codeEditorWidthInPercent + '%'
+    if (this.props.ignorePreviewPointerEvents || this.state.isSliderFocused)
+      previewStyle.pointerEvents = 'none'
     return (
-      <div styleName='root' ref='root'
+      <div
+        styleName='root'
+        ref='root'
         onMouseMove={e => this.handleMouseMove(e)}
-        onMouseUp={e => this.handleMouseUp(e)}>
+        onMouseUp={e => this.handleMouseUp(e)}
+      >
         <CodeEditor
-          styleName='codeEditor'
           ref='code'
           width={this.state.codeEditorWidthInPercent + '%'}
-          mode='GitHub Flavored Markdown'
+          mode='Boost Flavored Markdown'
           value={value}
           theme={config.editor.theme}
           keyMap={config.editor.keyMap}
           fontFamily={config.editor.fontFamily}
           fontSize={editorFontSize}
           displayLineNumbers={config.editor.displayLineNumbers}
+          lineWrapping
+          matchingPairs={config.editor.matchingPairs}
+          matchingTriples={config.editor.matchingTriples}
+          explodingPairs={config.editor.explodingPairs}
           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)}
+          linesHighlighted={linesHighlighted}
+          onChange={e => this.handleOnChange(e)}
           onScroll={this.handleScroll.bind(this)}
-       />
-        <div styleName='slider' style={{left: this.state.codeEditorWidthInPercent + '%'}} onMouseDown={e => this.handleMouseDown(e)} >
+          spellCheck={config.editor.spellcheck}
+          enableSmartPaste={config.editor.enableSmartPaste}
+          hotkey={config.hotkey}
+          switchPreview={config.editor.switchPreview}
+          enableMarkdownLint={config.editor.enableMarkdownLint}
+          customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
+          deleteUnusedAttachments={config.editor.deleteUnusedAttachments}
+          RTL={RTL}
+        />
+        <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}
@@ -181,17 +228,19 @@ class MarkdownSplitEditor extends React.Component {
           smartArrows={config.preview.smartArrows}
           breaks={config.preview.breaks}
           sanitize={config.preview.sanitize}
-          ref='preview'
+          mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
           tabInde='0'
           value={value}
-          onCheckboxClick={(e) => this.handleCheckboxClick(e)}
+          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}
+          RTL={RTL}
+        />
       </div>
     )
   }

browser/components/MarkdownSplitEditor.styl

@@ -8,9 +8,22 @@
     top -2px
     width 0
     z-index 0
+    border-left 1px solid $ui-borderColor
   .slider-hitbox
     absolute top bottom left right
     width 7px
     left -3px
     z-index 10
     cursor col-resize
+
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      .slider
+        border-left 1px solid get-theme-var(theme, 'borderColor')
+
+for theme in 'dark' 'dracula' 'solarized-dark'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/components/ModalEscButton.js

@@ -3,12 +3,10 @@ import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ModalEscButton.styl'
 
-const ModalEscButton = ({
-  handleEscButtonClick
-}) => (
+const ModalEscButton = ({ handleEscButtonClick }) => (
   <button styleName='escButton' onClick={handleEscButtonClick}>
     <div styleName='esc-mark'>×</div>
-    <div styleName='esc-text'>esc</div>
+    <div>esc</div>
   </button>
 )
 

browser/components/NavToggleButton.js

@@ -1,24 +1,23 @@
 /**
-* @fileoverview Micro component for toggle SideNav
-*/
+ * @fileoverview Micro component for toggle SideNav
+ */
 import PropTypes from 'prop-types'
 import React from 'react'
 import styles from './NavToggleButton.styl'
 import CSSModules from 'browser/lib/CSSModules'
 
 /**
-* @param {boolean} isFolded
-* @param {Function} handleToggleButtonClick
-*/
+ * @param {boolean} isFolded
+ * @param {Function} handleToggleButtonClick
+ */
 
-const NavToggleButton = ({isFolded, handleToggleButtonClick}) => (
-  <button styleName='navToggle'
-    onClick={(e) => handleToggleButtonClick(e)}
-  >
-    {isFolded
-     ? <i className='fa fa-angle-double-right' />
-     : <i className='fa fa-angle-double-left' />
-    }
+const NavToggleButton = ({ isFolded, handleToggleButtonClick }) => (
+  <button styleName='navToggle' onClick={e => handleToggleButtonClick(e)}>
+    {isFolded ? (
+      <i className='fa fa-angle-double-right fa-2x' />
+    ) : (
+      <i className='fa fa-angle-double-left fa-2x' />
+    )}
   </button>
 )
 

browser/components/NavToggleButton.styl

@@ -7,7 +7,7 @@
   border-radius 16.5px
   height 34px
   width 34px
-  line-height 32px
+  line-height 100%
   padding 0
   &:hover
     border: 1px solid #1EC38B;
@@ -17,10 +17,16 @@
 body[data-theme="white"]
   navWhiteButtonColor()
 
-body[data-theme="dark"]
-  .navToggle
-    &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+apply-theme(theme)
+  body[data-theme={theme}]
+    .navToggle:hover
+      background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
+      border 1px solid get-theme-var(theme, 'button--active-backgroundColor')
       transition 0.15s
-      color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
+for theme in 'dark' 'dracula' 'solarized-dark'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/components/NoteItem.js

@@ -3,7 +3,9 @@
  */
 import PropTypes from 'prop-types'
 import React from 'react'
-import { isArray } from 'lodash'
+import { isArray, sortBy } from 'lodash'
+import invertColor from 'invert-color'
+import Emoji from 'react-emoji-render'
 import CSSModules from 'browser/lib/CSSModules'
 import { getTodoStatus } from 'browser/lib/getTodoStatus'
 import styles from './NoteItem.styl'
@@ -13,29 +15,47 @@ import i18n from 'browser/lib/i18n'
 /**
  * @description Tag element component.
  * @param {string} tagName
+ * @param {string} color
  * @return {React.Component}
  */
-const TagElement = ({ tagName }) => (
-  <span styleName='item-bottom-tagList-item' key={tagName}>
-    #{tagName}
-  </span>
-)
+const TagElement = ({ tagName, color }) => {
+  const style = {}
+  if (color) {
+    style.backgroundColor = color
+    style.color = invertColor(color, {
+      black: '#222',
+      white: '#f1f1f1',
+      threshold: 0.3
+    })
+  }
+  return (
+    <span styleName='item-bottom-tagList-item' key={tagName} style={style}>
+      #{tagName}
+    </span>
+  )
+}
 
 /**
  * @description Tag element list component.
  * @param {Array|null} tags
+ * @param {boolean} showTagsAlphabetically
+ * @param {Object} coloredTags
  * @return {React.Component}
  */
-const TagElementList = (tags) => {
+const TagElementList = (tags, showTagsAlphabetically, coloredTags) => {
   if (!isArray(tags)) {
     return []
   }
 
-  const tagElements = tags.map(tag => (
-    TagElement({tagName: tag})
-  ))
-
-  return tagElements
+  if (showTagsAlphabetically) {
+    return sortBy(tags).map(tag =>
+      TagElement({ tagName: tag, color: coloredTags[tag] })
+    )
+  } else {
+    return tags.map(tag =>
+      TagElement({ tagName: tag, color: coloredTags[tag] })
+    )
+  }
 }
 
 /**
@@ -45,6 +65,7 @@ const TagElementList = (tags) => {
  * @param {Function} handleNoteClick
  * @param {Function} handleNoteContextMenu
  * @param {Function} handleDragStart
+ * @param {Object} coloredTags
  * @param {string} dateDisplay
  */
 const NoteItem = ({
@@ -57,12 +78,12 @@ const NoteItem = ({
   pathname,
   storageName,
   folderName,
-  viewType
+  viewType,
+  showTagsAlphabetically,
+  coloredTags
 }) => (
-  <div styleName={isActive
-    ? 'item--active'
-    : 'item'
-  }
+  <div
+    styleName={isActive ? 'item--active' : 'item'}
     key={note.key}
     onClick={e => handleNoteClick(e, note.key)}
     onContextMenu={e => handleNoteContextMenu(e, note.key)}
@@ -70,44 +91,68 @@ const NoteItem = ({
     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' />
-      }
+      {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' />
+      )}
       <div styleName='item-title'>
-        {note.title.trim().length > 0
-          ? note.title
-          : <span styleName='item-title-empty'>{i18n.__('Empty note')}</span>
-        }
+        {note.title.trim().length > 0 ? (
+          <Emoji text={note.title} />
+        ) : (
+          <span styleName='item-title-empty'>{i18n.__('Empty note')}</span>
+        )}
       </div>
-      {['ALL', 'STORAGE'].includes(viewType) && <div styleName='item-middle'>
+      <div styleName='item-middle'>
         <div styleName='item-middle-time'>{dateDisplay}</div>
         <div styleName='item-middle-app-meta'>
-          <div title={viewType === 'ALL' ? storageName : viewType === 'STORAGE' ? folderName : null} styleName='item-middle-app-meta-label'>
+          <div
+            title={
+              viewType === 'ALL'
+                ? storageName
+                : viewType === 'STORAGE'
+                ? folderName
+                : null
+            }
+            styleName='item-middle-app-meta-label'
+          >
             {viewType === 'ALL' && storageName}
             {viewType === 'STORAGE' && folderName}
           </div>
         </div>
-      </div>}
-
+      </div>
       <div styleName='item-bottom'>
         <div styleName='item-bottom-tagList'>
-          {note.tags.length > 0
-            ? TagElementList(note.tags)
-            : <span style={{ fontStyle: 'italic', opacity: 0.5 }} styleName='item-bottom-tagList-empty'>{i18n.__('No tags')}</span>
-          }
+          {note.tags.length > 0 ? (
+            TagElementList(note.tags, showTagsAlphabetically, coloredTags)
+          ) : (
+            <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)} />
-            : ''
-          }
+          {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>
@@ -117,6 +162,7 @@ const NoteItem = ({
 NoteItem.propTypes = {
   isActive: PropTypes.bool.isRequired,
   dateDisplay: PropTypes.string.isRequired,
+  coloredTags: PropTypes.object,
   note: PropTypes.shape({
     storage: PropTypes.string.isRequired,
     key: PropTypes.string.isRequired,
@@ -125,15 +171,14 @@ NoteItem.propTypes = {
     tags: PropTypes.array,
     isStarred: PropTypes.bool.isRequired,
     isTrashed: PropTypes.bool.isRequired,
-    blog: {
+    blog: PropTypes.shape({
       blogLink: PropTypes.string,
       blogId: PropTypes.number
-    }
+    })
   }),
   handleNoteClick: PropTypes.func.isRequired,
   handleNoteContextMenu: PropTypes.func.isRequired,
-  handleDragStart: PropTypes.func.isRequired,
-  handleDragEnd: PropTypes.func.isRequired
+  handleDragStart: PropTypes.func.isRequired
 }
 
 export default CSSModules(NoteItem, styles)

browser/components/NoteItem.styl

@@ -194,7 +194,7 @@ body[data-theme="dark"]
         color $ui-dark-text-color
       .item-bottom-tagList-item
         transition 0.15s
-        background-color alpha(#fff, 20%)
+        background-color alpha($ui-dark-tagList-backgroundColor, 20%)
         color $ui-dark-text-color
     &:active
       transition 0.15s
@@ -207,7 +207,7 @@ body[data-theme="dark"]
         color $ui-dark-text-color
       .item-bottom-tagList-item
         transition 0.15s
-        background-color alpha(white, 10%)
+        background-color alpha($ui-dark-tagList-backgroundColor, 10%)
         color $ui-dark-text-color
 
   .item-wrapper
@@ -223,13 +223,13 @@ body[data-theme="dark"]
     .item-bottom-time
       color $ui-dark-text-color
     .item-bottom-tagList-item
-      background-color alpha(white, 10%)
+      background-color alpha($ui-dark-tagList-backgroundColor, 10%)
       color $ui-dark-text-color
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 60%)
-      color #c0392b
+      color $ui-dark-button--hover-color
       .item-bottom-tagList-item
-        background-color alpha(#fff, 20%)
+        background-color alpha($ui-dark-tagList-backgroundColor, 20%)
 
   .item-title
     color $ui-inactive-text-color
@@ -322,75 +322,82 @@ body[data-theme="solarized-dark"]
     color $ui-inactive-text-color
     vertical-align middle
 
-body[data-theme="monokai"]
-  .root
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-noteList-backgroundColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, '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
+    .item
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
+      &:hover
         transition 0.15s
-        color $ui-monokai-text-color
-      .item-bottom-tagList-item
+        // background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
+        color get-theme-var(theme, 'text-color')
+        .item-title
+        .item-title-icon
+        .item-bottom-time
+          transition 0.15s
+          color get-theme-var(theme, 'text-color')
+        .item-bottom-tagList-item
+          transition 0.15s
+          background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
+          color get-theme-var(theme, 'text-color')
+      &:active
         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
+        background-color get-theme-var(theme, 'noteList-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+        .item-title
+        .item-title-icon
+        .item-bottom-time
+          transition 0.15s
+          color get-theme-var(theme, 'text-color')
+        .item-bottom-tagList-item
+          transition 0.15s
+          background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 10%)
+          color get-theme-var(theme, 'text-color')
 
-  .item-wrapper
-    border-color alpha($ui-monokai-button-backgroundColor, 60%)
-
-  .item--active
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-button-backgroundColor
     .item-wrapper
-      border-color transparent
-    .item-title
-    .item-title-icon
-    .item-bottom-time
-      color $ui-monokai-text-color
-    .item-bottom-tagList-item
-      background-color alpha(white, 10%)
-      color $ui-monokai-text-color
-    &:hover
-      // background-color alpha($ui-monokai-button--active-backgroundColor, 60%)
-      color #c0392b
+      border-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)
+
+    .item--active
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'button-backgroundColor')
+      .item-wrapper
+        border-color transparent
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        color get-theme-var(theme, 'active-color')
       .item-bottom-tagList-item
-        background-color alpha(#fff, 20%)
+        background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
+        color get-theme-var(theme, 'text-color')
+      &:hover
+        // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
+        color get-theme-var(theme, 'button--hover-color')
+        .item-bottom-tagList-item
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
 
-  .item-title
-    color $ui-inactive-text-color
+    .item-title
+      color $ui-inactive-text-color
 
-  .item-title-icon
-    color $ui-inactive-text-color
+    .item-title-icon
+      color $ui-inactive-text-color
 
-  .item-title-empty
-    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-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
+    .item-bottom-tagList-empty
+      color $ui-inactive-text-color
+      vertical-align middle
+
+for theme in 'dracula'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/components/NoteItemSimple.js

@@ -25,10 +25,8 @@ const NoteItemSimple = ({
   pathname,
   storage
 }) => (
-  <div styleName={isActive
-    ? 'item-simple--active'
-    : 'item-simple'
-  }
+  <div
+    styleName={isActive ? 'item-simple--active' : 'item-simple'}
     key={note.key}
     onClick={e => handleNoteClick(e, note.key)}
     onContextMenu={e => handleNoteContextMenu(e, note.key)}
@@ -36,23 +34,29 @@ const NoteItemSimple = ({
     draggable='true'
   >
     <div styleName='item-simple-title'>
-      {note.type === 'SNIPPET_NOTE'
-        ? <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'>{i18n.__('Empty note')}</span>
-      }
-      {isAllNotesView && <div styleName='item-simple-right'>
-        <span styleName='item-simple-right-storageName'>
-          {storage.name}
-        </span>
-      </div>}
+      {note.type === 'SNIPPET_NOTE' ? (
+        <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'>{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

@@ -223,66 +223,73 @@ body[data-theme="solarized-dark"]
       padding-left 4px
       opacity 0.4
 
-body[data-theme="monokai"]
-  .root
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-noteList-backgroundColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, '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
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
+      &:hover
+        transition 0.15s
+        background-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)
+        color get-theme-var(theme, 'text-color')
+        .item-simple-title
+        .item-simple-title-empty
+        .item-simple-title-icon
+        .item-simple-bottom-time
+          transition 0.15s
+          color get-theme-var(theme, 'text-color')
+        .item-simple-bottom-tagList-item
+          transition 0.15s
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
+          color get-theme-var(theme, 'text-color')
+      &:active
+        transition 0.15s
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+        .item-simple-title
+        .item-simple-title-empty
+        .item-simple-title-icon
+        .item-simple-bottom-time
+          transition 0.15s
+          color get-theme-var(theme, 'text-color')
+        .item-simple-bottom-tagList-item
+          transition 0.15s
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
+          color get-theme-var(theme, 'text-color')
+
+    .item-simple--active
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
+      .item-simple-wrapper
+        border-color transparent
       .item-simple-title
       .item-simple-title-empty
       .item-simple-title-icon
       .item-simple-bottom-time
-        transition 0.15s
-        color $ui-solarized-dark-text-color
+        color get-theme-var(theme, '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
+        background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
+        color get-theme-var(theme, 'text-color')
+      &:hover
+        // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
+        color #c0392b
+        .item-simple-bottom-tagList-item
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
     .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
+      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
+
+for theme in 'dracula'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/components/RealtimeNotification.js

@@ -6,7 +6,7 @@ const electron = require('electron')
 const { shell } = electron
 
 class RealtimeNotification extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
 
     this.state = {
@@ -14,38 +14,46 @@ class RealtimeNotification extends React.Component {
     }
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.fetchNotifications()
   }
 
-  fetchNotifications () {
-    const notificationsUrl = 'https://raw.githubusercontent.com/BoostIO/notification/master/notification.json'
+  fetchNotifications() {
+    const notificationsUrl =
+      'https://raw.githubusercontent.com/BoostIO/notification/master/notification.json'
     fetch(notificationsUrl)
       .then(response => {
         return response.json()
       })
       .then(json => {
-        this.setState({notifications: json.notifications})
+        this.setState({ notifications: json.notifications })
       })
   }
 
-  handleLinkClick (e) {
+  handleLinkClick(e) {
     shell.openExternal(e.currentTarget.href)
     e.preventDefault()
   }
 
-  render () {
+  render() {
     const { notifications } = this.state
-    const link = notifications.length > 0
-      ? <a styleName='notification-link' href={notifications[0].linkUrl}
-        onClick={(e) => this.handleLinkClick(e)}
-      >
-        Info: {notifications[0].text}
-      </a>
-    : ''
+    const link =
+      notifications.length > 0 ? (
+        <a
+          styleName='notification-link'
+          href={notifications[0].linkUrl}
+          onClick={e => this.handleLinkClick(e)}
+        >
+          Info: {notifications[0].text}
+        </a>
+      ) : (
+        ''
+      )
 
     return (
-      <div styleName='notification-area' style={this.props.style}>{link}</div>
+      <div styleName='notification-area' style={this.props.style}>
+        {link}
+      </div>
     )
   }
 }

browser/components/RealtimeNotification.styl

@@ -30,25 +30,20 @@ body[data-theme="dark"]
     &:hover
       color #5CB85C
 
+apply-theme(theme)
+  body[data-theme={theme}]
+    .notification-area
+      background-color none
 
-body[data-theme="solarized-dark"]
-  .notification-area
-    background-color none
+    .notification-link
+      color get-theme-var(theme, 'text-color')
+      border none
+      background-color get-theme-var(theme, 'button-backgroundColor')
+      &:hover
+        color get-theme-var(theme, 'button--hover-color')
 
-  .notification-link
-    color $ui-solarized-dark-text-color
-    border none
-    background-color $ui-solarized-dark-button-backgroundColor
-    &:hover
-      color #5CB85C
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)
 
-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
+for theme in $themes
+  apply-theme(theme)

browser/components/SideNavFilter.js

@@ -16,54 +16,70 @@ import i18n from 'browser/lib/i18n'
  * @return {React.Component}
  */
 const SideNavFilter = ({
-  isFolded, isHomeActive, handleAllNotesButtonClick,
-  isStarredActive, handleStarredButtonClick, isTrashedActive, handleTrashedButtonClick, counterDelNote,
-  counterTotalNote, counterStarredNote, handleFilterButtonContextMenu
+  isFolded,
+  isHomeActive,
+  handleAllNotesButtonClick,
+  isStarredActive,
+  handleStarredButtonClick,
+  isTrashedActive,
+  handleTrashedButtonClick,
+  counterDelNote,
+  counterTotalNote,
+  counterStarredNote,
+  handleFilterButtonContextMenu
 }) => (
   <div styleName={isFolded ? 'menu--folded' : 'menu'}>
-
-    <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
+    <button
+      styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
       onClick={handleAllNotesButtonClick}
     >
       <div styleName='iconWrap'>
-        <img src={isHomeActive
-          ? '../resources/icon/icon-all-active.svg'
-          : '../resources/icon/icon-all.svg'
-        }
+        <img
+          src={
+            isHomeActive
+              ? '../resources/icon/icon-all-active.svg'
+              : '../resources/icon/icon-all.svg'
+          }
         />
       </div>
       <span styleName='menu-button-label'>{i18n.__('All Notes')}</span>
       <span styleName='counters'>{counterTotalNote}</span>
     </button>
 
-    <button styleName={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
+    <button
+      styleName={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
       onClick={handleStarredButtonClick}
     >
       <div styleName='iconWrap'>
-        <img src={isStarredActive
-          ? '../resources/icon/icon-star-active.svg'
-          : '../resources/icon/icon-star-sidenav.svg'
-        }
+        <img
+          src={
+            isStarredActive
+              ? '../resources/icon/icon-star-active.svg'
+              : '../resources/icon/icon-star-sidenav.svg'
+          }
         />
       </div>
       <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} onContextMenu={handleFilterButtonContextMenu}
+    <button
+      styleName={isTrashedActive ? 'menu-button-trash--active' : 'menu-button'}
+      onClick={handleTrashedButtonClick}
+      onContextMenu={handleFilterButtonContextMenu}
     >
       <div styleName='iconWrap'>
-        <img src={isTrashedActive
-          ? '../resources/icon/icon-trash-active.svg'
-          : '../resources/icon/icon-trash-sidenav.svg'
-        }
+        <img
+          src={
+            isTrashedActive
+              ? '../resources/icon/icon-trash-active.svg'
+              : '../resources/icon/icon-trash-sidenav.svg'
+          }
         />
       </div>
       <span styleName='menu-button-label'>{i18n.__('Trash')}</span>
       <span styleName='counters'>{counterDelNote}</span>
     </button>
-
   </div>
 )
 
@@ -74,7 +90,7 @@ SideNavFilter.propTypes = {
   isStarredActive: PropTypes.bool.isRequired,
   isTrashedActive: PropTypes.bool.isRequired,
   handleStarredButtonClick: PropTypes.func.isRequired,
-  handleTrashdButtonClick: PropTypes.func.isRequired
+  handleTrashedButtonClick: PropTypes.func.isRequired
 }
 
 export default CSSModules(SideNavFilter, styles)

browser/components/SideNavFilter.styl

@@ -1,5 +1,5 @@
 .menu
-  margin-bottom 30px
+  margin-bottom 20px
 
 .menu-button
   navButtonColor()
@@ -180,87 +180,51 @@ body[data-theme="dark"]
       .menu-button-label
         color $ui-dark-text-color
 
+apply-theme(theme)
+  body[data-theme={theme}]
+    .menu-button
+      &:active
+        background-color get-theme-var(theme, 'noteList-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+      &:hover
+        background-color get-theme-var(theme, 'button-backgroundColor')
+        color get-theme-var(theme, '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--active
+      color get-theme-var(theme, 'text-color')
+      background-color get-theme-var(theme, 'button-backgroundColor')
       .menu-button-label
-        color $ui-solarized-dark-text-color
+        color get-theme-var(theme, 'text-color')
+      &:hover
+        background-color get-theme-var(theme, 'button-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+        .menu-button-label
+          color get-theme-var(theme, '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-star--active
+      color get-theme-var(theme, 'text-color')
+      background-color get-theme-var(theme, 'button-backgroundColor')
       .menu-button-label
-        color $ui-solarized-dark-text-color
+        color get-theme-var(theme, 'text-color')
+      &:hover
+        background-color get-theme-var(theme, 'button-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+        .menu-button-label
+          color get-theme-var(theme, '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-trash--active
+      color get-theme-var(theme, 'text-color')
+      background-color get-theme-var(theme, 'button-backgroundColor')
       .menu-button-label
-        color $ui-solarized-dark-text-color
+        color get-theme-var(theme, 'text-color')
+      &:hover
+        background-color get-theme-var(theme, 'button-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+        .menu-button-label
+          color get-theme-var(theme, '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
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)
 
-  .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
+for theme in $themes
+  apply-theme(theme)

browser/components/SnippetTab.js

@@ -5,7 +5,7 @@ import context from 'browser/lib/context'
 import i18n from 'browser/lib/i18n'
 
 class SnippetTab extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
 
     this.state = {
@@ -14,7 +14,7 @@ class SnippetTab extends React.Component {
     }
   }
 
-  componentWillUpdate (nextProps) {
+  componentWillUpdate(nextProps) {
     if (nextProps.snippet.name !== this.props.snippet.name) {
       this.setState({
         name: nextProps.snippet.name
@@ -22,34 +22,34 @@ class SnippetTab extends React.Component {
     }
   }
 
-  handleClick (e) {
+  handleClick(e) {
     this.props.onClick(e)
   }
 
-  handleContextMenu (e) {
+  handleContextMenu(e) {
     context.popup([
       {
         label: i18n.__('Rename'),
-        click: (e) => this.handleRenameClick(e)
+        click: e => this.handleRenameClick(e)
       }
     ])
   }
 
-  handleRenameClick (e) {
+  handleRenameClick(e) {
     this.startRenaming()
   }
 
-  handleNameInputBlur (e) {
+  handleNameInputBlur(e) {
     this.handleRename()
   }
 
-  handleNameInputChange (e) {
+  handleNameInputChange(e) {
     this.setState({
       name: e.target.value
     })
   }
 
-  handleNameInputKeyDown (e) {
+  handleNameInputKeyDown(e) {
     switch (e.keyCode) {
       case 13:
         this.handleRename()
@@ -63,84 +63,87 @@ class SnippetTab extends React.Component {
     }
   }
 
-  handleRename () {
-    this.setState({
-      isRenaming: false
-    }, () => {
-      if (this.props.snippet.name !== this.state.name) {
-        this.props.onRename(this.state.name)
+  handleRename() {
+    this.setState(
+      {
+        isRenaming: false
+      },
+      () => {
+        if (this.props.snippet.name !== this.state.name) {
+          this.props.onRename(this.state.name)
+        }
       }
-    })
+    )
   }
 
-  handleDeleteButtonClick (e) {
+  handleDeleteButtonClick(e) {
     this.props.onDelete(e)
   }
 
-  startRenaming () {
-    this.setState({
-      isRenaming: true
-    }, () => {
-      this.refs.name.focus()
-      this.refs.name.select()
-    })
+  startRenaming() {
+    this.setState(
+      {
+        isRenaming: true
+      },
+      () => {
+        this.refs.name.focus()
+        this.refs.name.select()
+      }
+    )
   }
 
-  handleDragStart (e) {
+  handleDragStart(e) {
     e.dataTransfer.dropEffect = 'move'
     this.props.onDragStart(e)
   }
 
-  handleDrop (e) {
+  handleDrop(e) {
     this.props.onDrop(e)
   }
 
-  render () {
+  render() {
     const { isActive, snippet, isDeletable } = this.props
     return (
-      <div styleName={isActive
-          ? 'root--active'
-          : 'root'
-        }
-      >
-        {!this.state.isRenaming
-          ? <button styleName='button'
-            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)}
+      <div styleName={isActive ? 'root--active' : 'root'}>
+        {!this.state.isRenaming ? (
+          <button
+            styleName='button'
+            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'>
-                {i18n.__('Unnamed')}
-              </span>
-            }
+            {snippet.name.trim().length > 0 ? (
+              snippet.name
+            ) : (
+              <span>{i18n.__('Unnamed')}</span>
+            )}
           </button>
-          : <input styleName='input'
+        ) : (
+          <input
+            styleName='input'
             ref='name'
             value={this.state.name}
-            onChange={(e) => this.handleNameInputChange(e)}
-            onBlur={(e) => this.handleNameInputBlur(e)}
-            onKeyDown={(e) => this.handleNameInputKeyDown(e)}
+            onChange={e => this.handleNameInputChange(e)}
+            onBlur={e => this.handleNameInputBlur(e)}
+            onKeyDown={e => this.handleNameInputKeyDown(e)}
           />
-        }
-        {isDeletable &&
-          <button styleName='deleteButton'
-            onClick={(e) => this.handleDeleteButtonClick(e)}
+        )}
+        {isDeletable && (
+          <button
+            styleName='deleteButton'
+            onClick={e => this.handleDeleteButtonClick(e)}
           >
             <i className='fa fa-times' />
           </button>
-        }
+        )}
       </div>
     )
   }
 }
 
-SnippetTab.propTypes = {
-
-}
+SnippetTab.propTypes = {}
 
 export default CSSModules(SnippetTab, styles)

browser/components/SnippetTab.styl

@@ -3,19 +3,30 @@
   flex 1
   min-width 70px
   overflow hidden
+  border-left 1px solid $ui-borderColor
+  border-top 1px solid $ui-borderColor
   &:hover
+    background-color alpha($ui-button--active-backgroundColor, 20%)
     .deleteButton
-      color $ui-inactive-text-color
-      &:hover
-        background-color darken($ui-backgroundColor, 15%)
-      &:active
-        color white
-        background-color $ui-active-color
+      color: $ui-text-color
+      visibility visible
+      transition 0.15s
+    .button
+      color: $ui-text-color
+      transition 0.15s
 
 .root--active
   @extend .root
   min-width 100px
-  border-bottom $ui-border
+  background-color alpha($ui-button--active-backgroundColor, 60%)
+  .deleteButton
+    visibility visible
+    color: $ui-text-color
+    transition 0.15s
+  .button
+    font-weight bold
+    color: $ui-text-color
+    transition 0.15s
 
 .button
   width 100%
@@ -27,8 +38,7 @@
   background-color transparent
   transition 0.15s
   border-left 4px solid transparent
-  &:hover
-    background-color $ui-button--hover-backgroundColor
+  color $ui-inactive-text-color
 
 .deleteButton
   position absolute
@@ -42,6 +52,7 @@
   color $ui-inactive-text-color
   background-color transparent
   border-radius 2px
+  visibility hidden
 
 .input
   height 29px
@@ -50,90 +61,82 @@
   width 100%
   outline none
 
+body[data-theme="default"], body[data-theme="white"]
+  .root--active
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+
 body[data-theme="dark"]
   .root
-    color $ui-dark-text-color
     border-color $ui-dark-borderColor
+    border-top 1px solid $ui-dark-borderColor
     &:hover
-      background-color $ui-dark-button--hover-backgroundColor
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      transition 0.15s
+      .button
+        color $ui-dark-text-color
+        transition 0.15s
       .deleteButton
-        color $ui-dark-inactive-text-color
-        &:hover
-          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
-        &:active
-          color $ui-dark-text-color
-          background-color $ui-dark-button--active-backgroundColor
+        color $ui-dark-text-color
+        transition 0.15s
 
   .root--active
-    color $ui-dark-text-color
-    border-color $ui-dark-borderColor
-    &:hover
-      background-color $ui-dark-button--hover-backgroundColor
-      .deleteButton
-        color $ui-dark-inactive-text-color
-        &:hover
-          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
-        &:active
-          color $ui-dark-text-color
-          background-color $ui-dark-button--active-backgroundColor
-
-  .button
-    border none
-    color $ui-dark-text-color
-    background-color transparent
-    transition color background-color 0.15s
-    border-left 4px solid transparent
-    &:hover
+    background-color $ui-dark-button--active-backgroundColor
+    border-left 1px solid $ui-dark-borderColor
+    border-top 1px solid $ui-dark-borderColor
+    .button
+      color $ui-dark-text-color
+    .deleteButton
       color $ui-dark-text-color
-      background-color $ui-dark-button--hover-backgroundColor
-
-  .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
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-text-color
+    transition 0.15s
 
-  .deleteButton
-    color alpha($ui-solarized-dark-text-color, 30%)
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      border-color get-theme-var(theme, 'borderColor')
+      &:hover
+        background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+        transition 0.15s
+        .deleteButton
+          color get-theme-var(theme, 'text-color')
+          transition 0.15s
+        .button
+          color get-theme-var(theme, 'text-color')
+          transition 0.15s
+
+    .root--active
+      color get-theme-var(theme, 'active-color')
+      background-color get-theme-var(theme, 'button-backgroundColor')
+      border-color get-theme-var(theme, 'borderColor')
+      .deleteButton
+        color get-theme-var(theme, 'text-color')
+      .button
+        color get-theme-var(theme, 'active-color')
+
+    .button
+      border none
+      color $ui-inactive-text-color
+      background-color transparent
+      transition color background-color 0.15s
+      border-left 4px solid transparent
+
+    .input
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+      color get-theme-var(theme, 'text-color')
+      transition 0.15s
+
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/components/StorageItem.js

@@ -21,7 +21,9 @@ const FolderIcon = ({ className, color, isActive }) => {
 
 /**
  * @param {boolean} isActive
+ * @param {object} tooltipRef,
  * @param {Function} handleButtonClick
+ * @param {Function} handleMouseEnter
  * @param {Function} handleContextMenu
  * @param {string} folderName
  * @param {string} folderColor
@@ -35,7 +37,9 @@ const FolderIcon = ({ className, color, isActive }) => {
 const StorageItem = ({
   styles,
   isActive,
+  tooltipRef,
   handleButtonClick,
+  handleMouseEnter,
   handleContextMenu,
   folderName,
   folderColor,
@@ -49,6 +53,7 @@ const StorageItem = ({
     <button
       styleName={isActive ? 'folderList-item--active' : 'folderList-item'}
       onClick={handleButtonClick}
+      onMouseEnter={handleMouseEnter}
       onContextMenu={handleContextMenu}
       onDrop={handleDrop}
       onDragEnter={handleDragEnter}
@@ -71,12 +76,13 @@ const StorageItem = ({
           ? _.truncate(folderName, { length: 1, omission: '' })
           : folderName}
       </span>
-      {!isFolded &&
-        _.isNumber(noteCount) && (
-          <span styleName='folderList-item-noteCount'>{noteCount}</span>
-        )}
+      {!isFolded && _.isNumber(noteCount) && (
+        <span styleName='folderList-item-noteCount'>{noteCount}</span>
+      )}
       {isFolded && (
-        <span styleName='folderList-item-tooltip'>{folderName}</span>
+        <span styleName='folderList-item-tooltip' ref={tooltipRef}>
+          {folderName}
+        </span>
       )}
     </button>
   )
@@ -84,7 +90,9 @@ const StorageItem = ({
 
 StorageItem.propTypes = {
   isActive: PropTypes.bool.isRequired,
+  tooltipRef: PropTypes.object,
   handleButtonClick: PropTypes.func,
+  handleMouseEnter: PropTypes.func,
   handleContextMenu: PropTypes.func,
   folderName: PropTypes.string.isRequired,
   folderColor: PropTypes.string,

browser/components/StorageItem.styl

@@ -60,6 +60,7 @@
   border-bottom-right-radius 2px
   height 34px
   line-height 32px
+  transition-property opacity
 
 .folderList-item:hover, .folderList-item--active:hover
   .folderList-item-tooltip
@@ -120,40 +121,28 @@ body[data-theme="dark"]
       color $ui-dark-text-color
       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
+apply-theme(theme)
+  body[data-theme={theme}]
+    .folderList-item
+      &:hover
+        background-color get-theme-var(theme, 'button-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+      &:active
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, '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
+    .folderList-item--active
+      @extend .folderList-item
+      color get-theme-var(theme, 'text-color')
+      background-color get-theme-var(theme, 'button-backgroundColor')
+      &:active
+        background-color get-theme-var(theme, 'button-backgroundColor')
+      &:hover
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, '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
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)
 
-  .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
+for theme in $themes
+  apply-theme(theme)

browser/components/StorageList.js

@@ -1,24 +1,26 @@
 /**
-* @fileoverview Micro component for showing StorageList
-*/
+ * @fileoverview Micro component for showing StorageList
+ */
 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, isFolded}) => (
+const StorageList = ({ storageList, isFolded }) => (
   <div styleName={isFolded ? 'storageList-folded' : 'storageList'}>
-    {storageList.length > 0 ? storageList : (
-      <div styleName='storgaeList-empty'>No storage mount.</div>
+    {storageList.length > 0 ? (
+      storageList
+    ) : (
+      <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/TagListItem.js

@@ -1,31 +1,61 @@
 /**
-* @fileoverview Micro component for showing TagList.
-*/
+ * @fileoverview Micro component for showing TagList.
+ */
 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
-*/
+ * @param {string} name
+ * @param {Function} handleClickTagListItem
+ * @param {Function} handleClickNarrowToTag
+ * @param {boolean} isActive
+ * @param {boolean} isRelated
+ * @param {string} bgColor tab backgroundColor
+ */
 
-const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, isRelated, count}) => (
-  <div styleName='tagList-itemContainer'>
-    {isRelated
-      ? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
+const TagListItem = ({
+  name,
+  handleClickTagListItem,
+  handleClickNarrowToTag,
+  handleContextMenu,
+  isActive,
+  isRelated,
+  count,
+  color
+}) => (
+  <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)}>
+    ) : (
+      <div
+        styleName={
+          isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'
+        }
+      />
+    )}
+    <button
+      styleName={isActive ? 'tagList-item-active' : 'tagList-item'}
+      onClick={() => handleClickTagListItem(name)}
+    >
+      <span
+        styleName='tagList-item-color'
+        style={{ backgroundColor: color || 'transparent' }}
+      />
       <span styleName='tagList-item-name'>
         {`# ${name}`}
-        <span styleName='tagList-item-count'>{count}</span>
+        <span styleName='tagList-item-count'>{count !== 0 ? count : ''}</span>
       </span>
     </button>
   </div>
@@ -33,7 +63,8 @@ const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isAc
 
 TagListItem.propTypes = {
   name: PropTypes.string.isRequired,
-  handleClickTagListItem: PropTypes.func.isRequired
+  handleClickTagListItem: PropTypes.func.isRequired,
+  color: PropTypes.string
 }
 
 export default CSSModules(TagListItem, styles)

browser/components/TagListItem.styl

@@ -71,6 +71,11 @@
   padding-right 15px
   font-size 13px
 
+.tagList-item-color
+  height 26px
+  width 3px
+  display inline-block
+
 body[data-theme="white"]
   .tagList-item
     color $ui-inactive-text-color
@@ -89,23 +94,30 @@ body[data-theme="white"]
   .tagList-item-count
     color $ui-text-color
 
-body[data-theme="dark"]
-  .tagList-item
-    color $ui-dark-inactive-text-color
-    &:hover
-      color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-    &:active
-      color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .tagList-item
+      color get-theme-var(theme, 'inactive-text-color')
+      &:hover
+        color get-theme-var(theme, 'text-color')
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
+      &:active
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
 
-  .tagList-item-active
-    background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-text-color
-    &:active
-      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
-    &:hover
-      color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
-  .tagList-item-count
-    color $ui-dark-button--active-color
+    .tagList-item-active
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
+      color get-theme-var(theme, 'text-color')
+      &:active
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)
+      &:hover
+        color get-theme-var(theme, 'text-color')
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)
+    .tagList-item-count
+      color get-theme-var(theme, 'button--active-color')
+
+for theme in 'dark'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/components/TodoListPercentage.js

@@ -11,20 +11,27 @@ import styles from './TodoListPercentage.styl'
  * @param {number} percentageOfTodo
  */
 
-const TodoListPercentage = ({
-  percentageOfTodo
-}) => (
-  <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
-    <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
+const TodoListPercentage = ({ percentageOfTodo, onClearCheckboxClick }) => (
+  <div
+    styleName='percentageBar'
+    style={{ display: isNaN(percentageOfTodo) ? 'none' : '' }}
+  >
+    <div styleName='progressBar' style={{ width: `${percentageOfTodo}%` }}>
       <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,4 +1,5 @@
 .percentageBar
+  display: flex
   position absolute
   top 72px
   right 0px
@@ -30,6 +31,20 @@
   color #f4f4f4
   font-weight 600
 
+.todoClear
+  display flex
+  justify-content: flex-end
+  position absolute
+  z-index 120
+  width 100%
+  height 100%
+  padding 2px 10px
+
+.todoClearText
+  color #f4f4f4
+  cursor pointer
+  font-weight 500
+
 body[data-theme="dark"]
   .percentageBar
     background-color #444444
@@ -39,7 +54,10 @@ body[data-theme="dark"]
 
   .percentageText
     color $ui-dark-text-color
-    
+
+  .todoClearText
+    color $ui-dark-text-color
+
 body[data-theme="solarized-dark"]
   .percentageBar
     background-color #002b36
@@ -50,12 +68,22 @@ body[data-theme="solarized-dark"]
   .percentageText
     color #fdf6e3
 
-body[data-theme="monokai"]
-  .percentageBar
-    background-color #f92672
+  .todoClearText
+    color #fdf6e3
 
-  .progressBar
-    background-color: #373831
+apply-theme(theme)
+  body[data-theme={theme}]
+    .percentageBar
+      background-color: get-theme-var(theme, 'borderColor')
 
-  .percentageText
-    color #fdf6e3
+    .progressBar
+      background-color get-theme-var(theme, 'active-color')
+
+    .percentageText
+      color get-theme-var(theme, 'text-color')
+
+for theme in 'dracula'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/components/TodoProcess.js

@@ -8,27 +8,30 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './TodoProcess.styl'
 
 const TodoProcess = ({
-  todoStatus: {
-    total: totalTodo,
-    completed: completedTodo
-  }
+  todoStatus: { total: totalTodo, completed: completedTodo }
 }) => (
-  <div styleName='todo-process' style={{display: totalTodo > 0 ? '' : 'none'}}>
+  <div
+    styleName='todo-process'
+    style={{ display: totalTodo > 0 ? '' : 'none' }}
+  >
     <div styleName='todo-process-text'>
       <i className='fa fa-fw fa-check-square-o' />
       {completedTodo} of {totalTodo}
     </div>
     <div styleName='todo-process-bar'>
-      <div styleName='todo-process-bar--inner' style={{width: parseInt(completedTodo / totalTodo * 100) + '%'}} />
+      <div
+        styleName='todo-process-bar--inner'
+        style={{ width: parseInt((completedTodo / totalTodo) * 100) + '%' }}
+      />
     </div>
   </div>
 )
 
 TodoProcess.propTypes = {
-  todoStatus: {
+  todoStatus: PropTypes.exact({
     total: PropTypes.number.isRequired,
     completed: PropTypes.number.isRequired
-  }
+  })
 }
 
 export default CSSModules(TodoProcess, styles)

browser/components/markdown.styl

@@ -55,11 +55,14 @@ body
   line-height 1.6
   overflow-x hidden
   background-color $ui-noteDetail-backgroundColor
+  // do not allow display line breaks
+  .katex-display > .katex
+    white-space nowrap
+  // allow inline line breaks
   .katex
-    font 400 1.2em 'KaTeX_Main'
-    line-height 1.2em
     white-space initial
-    text-indent 0
+  .katex .katex-html
+    display inline-flex
   .katex .mfrac>.vlist>span:nth-child(2)
     top 0 !important
   .katex-error
@@ -80,6 +83,9 @@ li
     &.checked
       text-decoration line-through
       opacity 0.5
+  &.taskListItem.checked
+    text-decoration line-through
+    opacity 0.5
 div.math-rendered
   text-align center
 .math-failed
@@ -118,40 +124,34 @@ hr
   border-bottom solid 1px borderColor
   margin 15px 0
 h1, h2, h3, h4, h5, h6
+  margin 1em 0 1.5em
+  line-height 1.4
   font-weight bold
   word-wrap break-word
+  padding .2em 0 .2em
 h1
   font-size 2.55em
-  padding-bottom 0.3em
-  line-height 1.2em
+  line-height 1.2
   border-bottom solid 1px borderColor
-  margin 1em 0 0.44em
   &:first-child
     margin-top 0
 h2
   font-size 1.75em
-  padding-bottom 0.3em
-  line-height 1.225em
+  line-height 1.225
   border-bottom solid 1px borderColor
-  margin 1em 0 0.57em
   &:first-child
     margin-top 0
 h3
   font-size 1.5em
-  line-height 1.43em
-  margin 1em 0 0.66em
+  line-height 1.43
 h4
   font-size 1.25em
-  line-height 1.4em
-  margin 1em 0 0.8em
+  line-height 1.4
 h5
   font-size 1em
-  line-height 1.4em
-  margin 1em 0 1em
+  line-height 1.1
 h6
   font-size 1em
-  line-height 1.4em
-  margin 1em 0 1em
   color #777
 p
   line-height 1.6em
@@ -159,6 +159,7 @@ p
   white-space pre-line
   word-wrap break-word
 img
+  cursor zoom-in
   max-width 100%
 strong, b
   font-weight bold
@@ -180,6 +181,10 @@ ul
     display list-item
     &.taskListItem
       list-style none
+      &>input
+        margin-left -1.6em
+      &>p
+        margin-left -1.8em
     p
       margin 0
   &>li>ul, &>li>ol
@@ -206,41 +211,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, &.chart
-    display flex
-    justify-content center
-    background-color white
-  &.CodeMirror
-    height initial
-    flex-wrap wrap
-    &>code
-      flex 1
-      overflow-x auto
   code
     background-color inherit
     margin 0
     padding 0
     border none
     border-radius 0
+  &.CodeMirror
+    height initial
+    flex-wrap wrap
+    &>code
+      flex 1
+      overflow-x auto
+  &.mermaid svg
+    max-width 100% !important
   &>span.filename
-    width 100%
-    border-radius: 5px 0px 0px 0px
-    margin -8px 100% 8px -8px
-    padding 0px 6px
+    margin -0.5rem 100% 0.5rem -0.5rem
+    padding 0.125rem 0.375rem
     background-color #777;
     color white
+    &:empty
+      display none
   &>span.lineNumber
     display none
     font-size 1em
-    padding 0.5em 0
-    margin -0.5em 0.5em -0.5em -0.5em
+    padding 0.5rem 0
+    margin -0.5rem 0.5rem -0.5rem -0.5rem
     border-right 1px solid
     text-align right
     border-top-left-radius 4px
@@ -257,6 +260,7 @@ table
   display block
   width 100%
   margin 0 0 1em
+  overflow-x auto
   thead
     tr
       background-color tableHeadBgColor
@@ -353,14 +357,17 @@ admonition_types = {
     danger: {color: #c2185b, icon: "block"},
     caution: {color: #ffa726, icon: "warning"},
     error: {color: #d32f2f, icon: "error_outline"},
-    attention: {color: #455a64, icon: "priority_high"}
+    question: {color: #64dd17, icon: "help_outline"},
+    quote: {color: #9e9e9e, icon: "format_quote"},
+    abstract: {color: #00b0ff, icon: "subject"},
+    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)
@@ -371,6 +378,110 @@ for name, val in admonition_types
         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
+
+    svg[ratio]
+      width 100%
+
+  .gallery
+    width 100%
+    height 50vh
+
+    .carousel
+      .carousel-main img
+        min-width auto
+        max-width 100%
+        min-height auto
+        max-height 100%
+
+      .carousel-footer::-webkit-scrollbar-corner
+        background-color transparent
+
+      .carousel-main, .carousel-footer
+        background-color $ui-noteDetail-backgroundColor
+      .prev, .next
+        color $ui-text-color
+        background-color $ui-tag-backgroundColor
+
+.markdownIt-TOC-wrapper
+  list-style none
+  position fixed
+  right 0
+  top 0
+  margin-left 15px
+  z-index 1000
+  transition transform .2s ease-in-out
+  transform translateX(100%)
+
+  .markdownIt-TOC
+    display block
+    max-height 90vh
+    overflow-y auto
+    padding 25px
+    padding-left 38px
+
+  &,
+  &:before
+    background-color $ui-dark-backgroundColor
+    color: $ui-dark-text-color
+
+  &:hover
+    transform translateX(-15px)
+
+  &:before
+    content 'TOC'
+    position absolute
+    width 60px
+    height 30px
+    top 60px
+    left -29px
+    display flex
+    align-items center
+    justify-content center
+    transform-origin top left
+    transform rotate(-90deg)
+
 themeDarkBackground = darken(#21252B, 10%)
 themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
@@ -421,59 +532,80 @@ body[data-theme="dark"]
   kbd
     background-color themeDarkBorder
     color themeDarkText
+  dl
+    border-color themeDarkBorder
+    background-color themeDarkTableHead
+  dt
+    border-color themeDarkBorder
+  dd
+    border-color themeDarkBorder
+    background-color themeDarkPreview
 
-themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor
-themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
-themeSolarizedDarkTableHead = themeSolarizedDarkTableEven
-themeSolarizedDarkTableBorder = themeDarkBorder
+  pre.fence
+    .gallery
+      .carousel-main, .carousel-footer
+        background-color $ui-dark-noteDetail-backgroundColor
+      .prev, .next
+        color $ui-dark-text-color
+        background-color $ui-dark-tag-backgroundColor
 
-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
+  .markdownIt-TOC-wrapper
+    &,
+    &:before
+      background-color darken(themeDarkBackground, 5%)
+      color themeDarkText
 
-themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
-themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
-themeMonokaiTableHead = themeMonokaiTableEven
-themeMonokaiTableBorder = themeDarkBorder
+apply-theme(theme)
+  body[data-theme={theme}]
+    color get-theme-var(theme, 'text-color')
+    border-color themeDarkBorder
+    background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+    table
+      thead
+        tr
+          background-color get-theme-var(theme, 'table-head-backgroundColor')
+        th
+          border-color get-theme-var(theme, 'table-borderColor')
+          &:last-child
+            border-right solid 1px get-theme-var(theme, 'table-borderColor')
+      tbody
+        tr:nth-child(2n + 1)
+          background-color get-theme-var(theme, 'table-odd-backgroundColor')
+        tr:nth-child(2n)
+          background-color get-theme-var(theme, 'table-even-backgroundColor')
+        td
+          border-color get-theme-var(theme, 'table-borderColor')
+          &:last-child
+            border-right solid 1px get-theme-var(theme, 'table-borderColor')
+    kbd
+      background-color get-theme-var(theme, 'kbd-backgroundColor')
+      color get-theme-var(theme, 'kbd-color')
 
-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 get-theme-var(theme, 'table-head-backgroundColor')
+    dt
+      border-color themeDarkBorder
+    dd
+      border-color themeDarkBorder
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+
+    pre.fence
+      .gallery
+        .carousel-main, .carousel-footer
+          background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+        .prev, .next
+          color get-theme-var(theme, 'button--active-color')
+          background-color get-theme-var(theme, 'button-backgroundColor')
+
+    .markdownIt-TOC-wrapper
+      &,
+      &:before
+        background-color darken(get-theme-var(theme, 'noteDetail-backgroundColor'), 15%)
+        color themeDarkText
+
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/components/render/MermaidRender.js

@@ -1,25 +1,70 @@
 import mermaidAPI from 'mermaid'
+import uiThemes from 'browser/lib/ui-themes'
 
-function getRandomInt (min, max) {
+// 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 () {
-  var pool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
-  var id = 'm-'
-  for (var i = 0; i < 7; i++) {
+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) {
+function render(element, content, theme, enableHTMLLabel) {
   try {
-    mermaidAPI.render(getId(), content, (svgGraph) => {
+    const height = element.attributes.getNamedItem('data-height')
+    const isPredefined = height && height.value !== 'undefined'
+
+    if (isPredefined) {
+      element.style.height = height.value + 'vh'
+    }
+
+    const isDarkTheme = uiThemes.some(
+      item => item.name === theme && item.isDark
+    )
+
+    mermaidAPI.initialize({
+      theme: isDarkTheme ? 'dark' : 'default',
+      themeCSS: isDarkTheme ? darkThemeStyling : '',
+      flowchart: {
+        htmlLabels: enableHTMLLabel
+      },
+      gantt: {
+        useWidth: element.clientWidth
+      }
+    })
+
+    mermaidAPI.render(getId(), content, svgGraph => {
       element.innerHTML = svgGraph
+
+      if (!isPredefined) {
+        const el = element.firstChild
+        const viewBox = el.getAttribute('viewBox').split(' ')
+
+        let ratio = viewBox[2] / viewBox[3]
+
+        if (el.style.maxWidth) {
+          const maxWidth = parseFloat(el.style.maxWidth)
+
+          ratio *= el.parentNode.clientWidth / maxWidth
+        }
+
+        el.setAttribute('ratio', ratio)
+        el.setAttribute('height', el.parentNode.clientWidth / ratio)
+        console.log(el)
+      }
     })
   } catch (e) {
-    console.error(e)
     element.className = 'mermaid-error'
     element.innerHTML = 'mermaid diagram parse error: ' + e.message
   }

browser/lib/CMLanguageList.js

@@ -0,0 +1,78 @@
+export const languageMaps = {
+  brainfuck: 'Brainfuck',
+  cpp: 'C++',
+  cs: 'C#',
+  clojure: 'Clojure',
+  'clojure-repl': 'ClojureScript',
+  cmake: 'CMake',
+  coffeescript: 'CoffeeScript',
+  crystal: 'Crystal',
+  css: 'CSS',
+  d: 'D',
+  dart: 'Dart',
+  delphi: 'Pascal',
+  diff: 'Diff',
+  django: 'Django',
+  dockerfile: 'Dockerfile',
+  ebnf: 'EBNF',
+  elm: 'Elm',
+  erlang: 'Erlang',
+  'erlang-repl': 'Erlang',
+  fortran: 'Fortran',
+  fsharp: 'F#',
+  gherkin: 'Gherkin',
+  go: 'Go',
+  groovy: 'Groovy',
+  haml: 'HAML',
+  haskell: 'Haskell',
+  haxe: 'Haxe',
+  http: 'HTTP',
+  ini: 'toml',
+  java: 'Java',
+  javascript: 'JavaScript',
+  json: 'JSON',
+  julia: 'Julia',
+  kotlin: 'Kotlin',
+  less: 'LESS',
+  livescript: 'LiveScript',
+  lua: 'Lua',
+  markdown: 'Markdown',
+  mathematica: 'Mathematica',
+  nginx: 'Nginx',
+  nsis: 'NSIS',
+  objectivec: 'Objective-C',
+  ocaml: 'Ocaml',
+  perl: 'Perl',
+  php: 'PHP',
+  powershell: 'PowerShell',
+  properties: 'Properties files',
+  protobuf: 'ProtoBuf',
+  python: 'Python',
+  puppet: 'Puppet',
+  q: 'Q',
+  r: 'R',
+  ruby: 'Ruby',
+  rust: 'Rust',
+  sas: 'SAS',
+  scala: 'Scala',
+  scheme: 'Scheme',
+  scss: 'SCSS',
+  shell: 'Shell',
+  smalltalk: 'Smalltalk',
+  sml: 'SML',
+  sql: 'SQL',
+  stylus: 'Stylus',
+  swift: 'Swift',
+  tcl: 'Tcl',
+  tex: 'LaTex',
+  typescript: 'TypeScript',
+  twig: 'Twig',
+  vbnet: 'VB.NET',
+  vbscript: 'VBScript',
+  verilog: 'Verilog',
+  vhdl: 'VHDL',
+  xml: 'HTML',
+  xquery: 'XQuery',
+  yaml: 'YAML',
+  elixir: 'Elixir'
+}

browser/lib/CSSModules.js

@@ -1,5 +1,5 @@
 import CSSModules from 'react-css-modules'
 
-export default function (component, styles) {
-  return CSSModules(component, styles, {errorWhenNotFound: false})
+export default function(component, styles) {
+  return CSSModules(component, styles, { handleNotFoundStyleName: 'log' })
 }

browser/lib/Languages.js

@@ -11,6 +11,10 @@ const languages = [
     name: 'Chinese (zh-TW)',
     locale: 'zh-TW'
   },
+  {
+    name: 'Czech',
+    locale: 'cs'
+  },
   {
     name: 'Danish',
     locale: 'da'
@@ -48,8 +52,12 @@ const languages = [
     locale: 'pl'
   },
   {
-    name: 'Portuguese',
-    locale: 'pt'
+    name: 'Portuguese (PT-BR)',
+    locale: 'pt-BR'
+  },
+  {
+    name: 'Portuguese (PT-PT)',
+    locale: 'pt-PT'
   },
   {
     name: 'Russian',
@@ -58,21 +66,25 @@ const languages = [
   {
     name: 'Spanish',
     locale: 'es-ES'
-  }, {
+  },
+  {
     name: 'Turkish',
     locale: 'tr'
+  },
+  {
+    name: 'Thai',
+    locale: 'th'
   }
 ]
 
 module.exports = {
-  getLocales () {
-    return languages.reduce(function (localeList, locale) {
+  getLocales() {
+    return languages.reduce(function(localeList, locale) {
       localeList.push(locale.locale)
       return localeList
     }, [])
   },
-  getLanguages () {
+  getLanguages() {
     return languages
   }
 }
-

browser/lib/Mutable.js

@@ -1,43 +1,43 @@
 class MutableMap {
-  constructor (iterable) {
+  constructor(iterable) {
     this._map = new Map(iterable)
     Object.defineProperty(this, 'size', {
       get: () => this._map.size,
-      set: function (value) {
+      set: function(value) {
         this['size'] = value
       }
     })
   }
 
-  get (...args) {
+  get(...args) {
     return this._map.get(...args)
   }
 
-  set (...args) {
+  set(...args) {
     return this._map.set(...args)
   }
 
-  delete (...args) {
+  delete(...args) {
     return this._map.delete(...args)
   }
 
-  has (...args) {
+  has(...args) {
     return this._map.has(...args)
   }
 
-  clear (...args) {
+  clear(...args) {
     return this._map.clear(...args)
   }
 
-  forEach (...args) {
+  forEach(...args) {
     return this._map.forEach(...args)
   }
 
-  [Symbol.iterator] () {
+  [Symbol.iterator]() {
     return this._map[Symbol.iterator]()
   }
 
-  map (cb) {
+  map(cb) {
     const result = []
     for (const [key, value] of this._map) {
       result.push(cb(value, key))
@@ -45,7 +45,7 @@ class MutableMap {
     return result
   }
 
-  toJS () {
+  toJS() {
     const result = {}
     for (let [key, value] of this._map) {
       if (value instanceof MutableSet || value instanceof MutableMap) {
@@ -58,42 +58,42 @@ class MutableMap {
 }
 
 class MutableSet {
-  constructor (iterable) {
+  constructor(iterable) {
     this._set = new Set(iterable)
     Object.defineProperty(this, 'size', {
       get: () => this._set.size,
-      set: function (value) {
+      set: function(value) {
         this['size'] = value
       }
     })
   }
 
-  add (...args) {
+  add(...args) {
     return this._set.add(...args)
   }
 
-  delete (...args) {
+  delete(...args) {
     return this._set.delete(...args)
   }
 
-  forEach (...args) {
+  forEach(...args) {
     return this._set.forEach(...args)
   }
 
-  [Symbol.iterator] () {
+  [Symbol.iterator]() {
     return this._set[Symbol.iterator]()
   }
 
-  map (cb) {
+  map(cb) {
     const result = []
-    this._set.forEach(function (value, key) {
+    this._set.forEach(function(value, key) {
       result.push(cb(value, key))
     })
 
     return result
   }
 
-  toJS () {
+  toJS() {
     return Array.from(this._set)
   }
 }

browser/lib/RcParser.js

@@ -5,13 +5,13 @@ const BOOSTNOTERC = '.boostnoterc'
 const homePath = global.process.env.HOME || global.process.env.USERPROFILE
 const _boostnotercPath = path.join(homePath, BOOSTNOTERC)
 
-export function parse (boostnotercPath = _boostnotercPath) {
+export function parse(boostnotercPath = _boostnotercPath) {
   if (!sander.existsSync(boostnotercPath)) return {}
   try {
     return JSON.parse(sander.readFileSync(boostnotercPath).toString())
   } catch (e) {
     console.warn(e)
-    console.warn('Your .boostnoterc is broken so it\'s not used.')
+    console.warn("Your .boostnoterc is broken so it's not used.")
     return {}
   }
 }

browser/lib/SnippetManager.js

@@ -0,0 +1,92 @@
+import crypto from 'crypto'
+import fs from 'fs'
+import consts from './consts'
+
+class SnippetManager {
+  constructor() {
+    this.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.'
+      }
+    ]
+    this.snippets = []
+    this.expandSnippet = this.expandSnippet.bind(this)
+    this.init = this.init.bind(this)
+    this.assignSnippets = this.assignSnippets.bind(this)
+  }
+
+  init() {
+    if (fs.existsSync(consts.SNIPPET_FILE)) {
+      try {
+        this.snippets = JSON.parse(
+          fs.readFileSync(consts.SNIPPET_FILE, { encoding: 'UTF-8' })
+        )
+      } catch (error) {
+        console.log('Error while parsing snippet file')
+      }
+      return
+    }
+    fs.writeFileSync(
+      consts.SNIPPET_FILE,
+      JSON.stringify(this.defaultSnippet, null, 4),
+      'utf8'
+    )
+    this.snippets = this.defaultSnippet
+  }
+
+  assignSnippets(snippets) {
+    this.snippets = snippets
+  }
+
+  expandSnippet(wordBeforeCursor, cursor, cm) {
+    const templateCursorString = ':{}'
+    for (let i = 0; i < this.snippets.length; i++) {
+      if (this.snippets[i].prefix.indexOf(wordBeforeCursor.text) === -1) {
+        continue
+      }
+      if (this.snippets[i].content.indexOf(templateCursorString) !== -1) {
+        const snippetLines = this.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(
+          this.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(
+          this.snippets[i].content,
+          wordBeforeCursor.range.from,
+          wordBeforeCursor.range.to
+        )
+      }
+      return true
+    }
+
+    return false
+  }
+}
+
+const manager = new SnippetManager()
+export default manager

browser/lib/TextEditorInterface.js

@@ -1,53 +1,109 @@
-import { Point } from '@susisu/mte-kernel'
-
-export default class TextEditorInterface {
-  constructor (editor) {
-    this.editor = editor
-  }
-
-  getCursorPosition () {
-    const pos = this.editor.getCursor()
-    return new Point(pos.line, pos.ch)
-  }
-
-  setCursorPosition (pos) {
-    this.editor.setCursor({line: pos.row, ch: pos.column})
-  }
-
-  setSelectionRange (range) {
-    this.editor.setSelection({
-      anchor: {line: range.start.row, ch: range.start.column},
-      head: {line: range.end.row, ch: range.end.column}
-    })
-  }
-
-  getLastRow () {
-    return this.editor.lastLine()
-  }
-
-  acceptsTableEdit (row) {
-    return true
-  }
-
-  getLine (row) {
-    return this.editor.getLine(row)
-  }
-
-  insertLine (row, line) {
-    this.editor.replaceRange(line, {line: row, ch: 0})
-  }
-
-  deleteLine (row) {
-    this.editor.replaceRange('', {line: row, ch: 0}, {line: row, ch: this.editor.getLine(row).length})
-  }
-
-  replaceLines (startRow, endRow, lines) {
-    endRow-- // because endRow is a first line after a table.
-    const endRowCh = this.editor.getLine(endRow).length
-    this.editor.replaceRange(lines, {line: startRow, ch: 0}, {line: endRow, ch: endRowCh})
-  }
-
-  transact (func) {
-    func()
-  }
-}
+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

@@ -3,17 +3,18 @@ import i18n from 'browser/lib/i18n'
 const { remote } = electron
 const { dialog } = remote
 
-export function confirmDeleteNote (confirmDeletion, permanent) {
+export function confirmDeleteNote(confirmDeletion, permanent) {
   if (confirmDeletion || permanent) {
     const alertConfig = {
-      ype: 'warning',
+      type: '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
+      remote.getCurrentWindow(),
+      alertConfig
     )
 
     return dialogButtonIndex === 0

browser/lib/consts.js

@@ -3,18 +3,59 @@ const fs = require('sander')
 const { remote } = require('electron')
 const { app } = remote
 
-const themePath = process.env.NODE_ENV === 'production'
-  ? path.join(app.getAppPath(), './node_modules/codemirror/theme')
-  : require('path').resolve('./node_modules/codemirror/theme')
-const themes = fs.readdirSync(themePath)
-  .map((themePath) => {
-    return themePath.substring(0, themePath.lastIndexOf('.'))
-  })
-themes.splice(themes.indexOf('solarized'), 1, 'solarized dark', 'solarized light')
+const CODEMIRROR_THEME_PATH = 'node_modules/codemirror/theme'
+const CODEMIRROR_EXTRA_THEME_PATH = 'extra_scripts/codemirror/theme'
 
-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 isProduction = process.env.NODE_ENV === 'production'
+
+const paths = [
+  isProduction
+    ? path.join(app.getAppPath(), CODEMIRROR_THEME_PATH)
+    : path.resolve(CODEMIRROR_THEME_PATH),
+  isProduction
+    ? path.join(app.getAppPath(), CODEMIRROR_EXTRA_THEME_PATH)
+    : path.resolve(CODEMIRROR_EXTRA_THEME_PATH)
+]
+
+const themes = paths
+  .map(directory =>
+    fs.readdirSync(directory).map(file => {
+      const name = file.substring(0, file.lastIndexOf('.'))
+
+      return {
+        name,
+        path: path.join(directory, file),
+        className: `cm-s-${name}`
+      }
+    })
+  )
+  .reduce((accumulator, value) => accumulator.concat(value), [])
+  .sort((a, b) => a.name.localeCompare(b.name))
+
+themes.splice(
+  themes.findIndex(({ name }) => name === 'solarized'),
+  1,
+  {
+    name: 'solarized dark',
+    path: path.join(paths[0], 'solarized.css'),
+    className: `cm-s-solarized cm-s-dark`
+  },
+  {
+    name: 'solarized light',
+    path: path.join(paths[0], 'solarized.css'),
+    className: `cm-s-solarized cm-s-light`
+  }
+)
+themes.splice(0, 0, {
+  name: 'default',
+  path: path.join(paths[0], 'elegant.css'),
+  className: `cm-s-default`
+})
+
+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: [
@@ -35,7 +76,7 @@ const consts = {
     'Dodger Blue',
     'Violet Eggplant'
   ],
-  THEMES: ['default'].concat(themes),
+  THEMES: themes,
   SNIPPET_FILE: snippetFile,
   DEFAULT_EDITOR_FONT_FAMILY: [
     'Monaco',

browser/lib/context.js

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

browser/lib/contextMenuBuilder.js

@@ -0,0 +1,152 @@
+import i18n from 'browser/lib/i18n'
+import fs from 'fs'
+
+const { remote } = require('electron')
+const { Menu } = remote.require('electron')
+const { clipboard } = remote.require('electron')
+const { shell } = remote.require('electron')
+const spellcheck = require('./spellcheck')
+const uri2path = require('file-uri-to-path')
+
+/**
+ * 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)
+}
+
+/**
+ * Creates the context menu that is shown when there is a right click Markdown preview of a (not-snippet) note.
+ * @param {MarkdownPreview} markdownPreview
+ * @param {MouseEvent} event that has triggered the creation of the context menu
+ * @returns {Electron.Menu} The created electron context menu
+ */
+const buildMarkdownPreviewContextMenu = function(markdownPreview, event) {
+  if (
+    markdownPreview == null ||
+    event == null ||
+    event.pageX == null ||
+    event.pageY == null
+  ) {
+    return null
+  }
+
+  // Default context menu inclusions
+  const template = [
+    {
+      role: 'copy'
+    },
+    {
+      role: 'selectall'
+    }
+  ]
+
+  if (
+    event.target.tagName.toLowerCase() === 'a' &&
+    event.target.getAttribute('href')
+  ) {
+    // Link opener for files on the local system pointed to by href
+    const href = event.target.href
+    const isLocalFile = href.startsWith('file:')
+    if (isLocalFile) {
+      const absPath = uri2path(href)
+      try {
+        if (fs.lstatSync(absPath).isFile()) {
+          template.push({
+            label: i18n.__('Show in explorer'),
+            click: e => shell.showItemInFolder(absPath)
+          })
+        }
+      } catch (e) {
+        console.log(
+          'Error while evaluating if the file is locally available',
+          e
+        )
+      }
+    }
+
+    // Add option to context menu to copy url
+    template.push({
+      label: i18n.__('Copy Url'),
+      click: e => clipboard.writeText(href)
+    })
+  }
+  return Menu.buildFromTemplate(template)
+}
+
+module.exports = {
+  buildEditorContextMenu: buildEditorContextMenu,
+  buildMarkdownPreviewContextMenu: buildMarkdownPreviewContextMenu
+}

browser/lib/convertModeName.js

@@ -1,4 +1,4 @@
-export default function convertModeName (name) {
+export default function convertModeName(name) {
   switch (name) {
     case 'ejs':
       return 'Embedded Javascript'

browser/lib/customMeta.js

@@ -1,5 +1,21 @@
 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']})
+const stylusCodeInfo = CodeMirror.modeInfo.find(info => info.name === 'Stylus')
+if (stylusCodeInfo == null) {
+  CodeMirror.modeInfo.push({
+    name: 'Stylus',
+    mime: 'text/x-styl',
+    mode: 'stylus',
+    ext: ['styl'],
+    alias: ['styl']
+  })
+} else {
+  stylusCodeInfo.alias = ['styl']
+}
+CodeMirror.modeInfo.push({
+  name: 'Elixir',
+  mime: 'text/x-elixir',
+  mode: 'elixir',
+  ext: ['ex']
+})

browser/lib/date-formatter.js

@@ -8,7 +8,7 @@ import moment from 'moment'
  * @param {mixed}
  * @return {string}
  */
-export function formatDate (date) {
+export function formatDate(date) {
   const m = moment(date)
   if (!m.isValid()) {
     throw Error('Invalid argument.')

browser/lib/findNoteTitle.js

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

browser/lib/findStorage.js

@@ -1,10 +1,11 @@
 const _ = require('lodash')
 
-export function findStorage (storageKey) {
+export function findStorage(storageKey) {
   const cachedStorageList = JSON.parse(localStorage.getItem('storages'))
-  if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
-  const storage = _.find(cachedStorageList, {key: storageKey})
-  if (storage === undefined) throw new Error('Target storage doesn\'t exist.')
+  if (!_.isArray(cachedStorageList))
+    throw new Error("Target storage doesn't exist.")
+  const storage = _.find(cachedStorageList, { key: storageKey })
+  if (storage === undefined) throw new Error("Target storage doesn't exist.")
 
   return storage
 }

browser/lib/getTodoStatus.js

@@ -1,14 +1,14 @@
-export function getTodoStatus (content) {
+export function getTodoStatus(content) {
   const splitted = content.split('\n')
   let numberOfTodo = 0
   let numberOfCompletedTodo = 0
 
-  splitted.forEach((line) => {
-    const trimmedLine = line.trim()
-    if (trimmedLine.match(/^[\+\-\*] \[(\s|x)\] ./)) {
+  splitted.forEach(line => {
+    const trimmedLine = line.trim().replace(/^(>\s*)*/, '')
+    if (trimmedLine.match(/^[+\-*] \[(\s|x)] ./i)) {
       numberOfTodo++
     }
-    if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
+    if (trimmedLine.match(/^[+\-*] \[x] ./i)) {
       numberOfCompletedTodo++
     }
   })
@@ -19,7 +19,7 @@ export function getTodoStatus (content) {
   }
 }
 
-export function getTodoPercentageOfCompleted (content) {
+export function getTodoPercentageOfCompleted(content) {
   const state = getTodoStatus(content)
-  return Math.floor(state.completed / state.total * 100)
+  return Math.floor((state.completed / state.total) * 100)
 }

browser/lib/htmlTextHelper.js

@@ -7,9 +7,9 @@
  * @return {string}
  */
 
-export function decodeEntities (text) {
+export function decodeEntities(text) {
   var entities = [
-    ['apos', '\''],
+    ['apos', "'"],
     ['amp', '&'],
     ['lt', '<'],
     ['gt', '>'],
@@ -24,16 +24,16 @@ export function decodeEntities (text) {
   return text
 }
 
-export function encodeEntities (text) {
+export function encodeEntities(text) {
   const entities = [
-    ['\'', 'apos'],
+    ["'", 'apos'],
     ['<', 'lt'],
     ['>', 'gt'],
     ['\\?', '#63'],
     ['\\$', '#36']
   ]
 
-  entities.forEach((entity) => {
+  entities.forEach(entity => {
     text = text.replace(new RegExp(entity[0], 'g'), `&${entity[1]};`)
   })
   return text

browser/lib/i18n.js

@@ -8,9 +8,10 @@ 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'),
+  directory:
+    process.env.NODE_ENV === 'production'
+      ? path.join(app.getAppPath(), './locales')
+      : path.resolve('./locales'),
   devMode: false
 })
 

browser/lib/keygen.js

@@ -1,8 +1,7 @@
 const crypto = require('crypto')
-const _ = require('lodash')
 const uuidv4 = require('uuid/v4')
 
-module.exports = function (uuid) {
+module.exports = function(uuid) {
   if (typeof uuid === typeof true && uuid) {
     return uuidv4()
   }

browser/lib/markdown-it-deflist.js

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

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

@@ -1,26 +1,141 @@
 'use strict'
 
 import sanitizeHtml from 'sanitize-html'
+import { escapeHtmlCharacters } from './utils'
+import url from 'url'
 
-module.exports = function sanitizePlugin (md, options) {
+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)
+        state.tokens[tokenIdx].content = sanitizeHtml(
+          state.tokens[tokenIdx].content,
+          options
+        )
       }
-      if (state.tokens[tokenIdx].type === 'fence') {
-        state.tokens[tokenIdx].content = state.tokens[tokenIdx].content.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+      if (state.tokens[tokenIdx].type.match(/.*_fence$/)) {
+        // escapeHtmlCharacters has better performance
+        state.tokens[tokenIdx].content = escapeHtmlCharacters(
+          state.tokens[tokenIdx].content,
+          { skipSingleQuote: true }
+        )
       }
       if (state.tokens[tokenIdx].type === 'inline') {
         const inlineTokens = state.tokens[tokenIdx].children
         for (let childIdx = 0; childIdx < inlineTokens.length; childIdx++) {
           if (inlineTokens[childIdx].type === 'html_inline') {
-            inlineTokens[childIdx].content = sanitizeHtml(inlineTokens[childIdx].content, options)
+            inlineTokens[childIdx].content = sanitizeInline(
+              inlineTokens[childIdx].content,
+              options
+            )
           }
         }
       }
     }
   })
 }
+
+const tagRegex = /<([A-Z][A-Z0-9]*)\s*((?:\s*[A-Z][A-Z0-9]*(?:=("|')(?:[^\3]+?)\3)?)*)\s*\/?>|<\/([A-Z][A-Z0-9]*)\s*>/i
+const attributesRegex = /([A-Z][A-Z0-9]*)(?:=("|')([^\2]+?)\2)?/gi
+
+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, '')
+  if (!href) {
+    // No href
+    return false
+  }
+  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,104 @@
+/**
+ * @fileoverview Markdown table of contents generator
+ */
+
+import { EOL } from 'os'
+import toc from 'markdown-toc'
+import mdlink from 'markdown-link'
+import slugify from './slugify'
+
+const hasProp = Object.prototype.hasOwnProperty
+
+/**
+ * From @enyaxu/markdown-it-anchor
+ */
+function uniqueSlug(slug, slugs, opts) {
+  let uniq = slug
+  let i = opts.uniqueSlugStartIndex
+  while (hasProp.call(slugs, uniq)) uniq = `${slug}-${i++}`
+  slugs[uniq] = true
+  return uniq
+}
+
+function linkify(token) {
+  token.content = mdlink(token.content, `#${decodeURI(token.slug)}`)
+  return token
+}
+
+const TOC_MARKER_START = '<!-- toc -->'
+const TOC_MARKER_END = '<!-- tocstop -->'
+
+const tocRegex = new RegExp(`${TOC_MARKER_START}[\\s\\S]*?${TOC_MARKER_END}`)
+
+/**
+ * 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) {
+  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(editor)) {
+    updateExistingToc()
+  } else {
+    addTocAtCursorPosition()
+  }
+}
+
+export function tocExistsInEditor(editor) {
+  return tocRegex.test(editor.getValue())
+}
+
+/**
+ * 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 slugs = {}
+  const opts = {
+    uniqueSlugStartIndex: 1
+  }
+
+  const result = toc(markdownText, {
+    slugify: title => {
+      return uniqueSlug(slugify(title), slugs, opts)
+    },
+    linkify: false
+  })
+
+  const md = toc.bullets(result.json.map(linkify), {
+    highest: result.highest
+  })
+
+  return TOC_MARKER_START + EOL + EOL + md + 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,
+  tocExistsInEditor
+}

browser/lib/markdown.js

@@ -2,24 +2,28 @@ 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 mdurl from 'mdurl'
 import smartArrows from 'markdown-it-smartarrows'
+import markdownItTocAndAnchor from '@hikerpig/markdown-it-toc-and-anchor'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import katex from 'katex'
 import { lastFindInArray } from './utils'
 
-function createGutter (str, firstLineNumber) {
+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>'
+  return (
+    '<span class="lineNumber CodeMirror-gutters">' + lines.join('') + '</span>'
+  )
 }
 
 class Markdown {
-  constructor (options = {}) {
+  constructor(options = {}) {
     const config = ConfigManager.get()
     const defaultOptions = {
       typographer: config.preview.smartQuotes,
@@ -27,62 +31,137 @@ class Markdown {
       html: true,
       xhtmlOut: true,
       breaks: config.preview.breaks,
-      highlight: function (str, lang) {
-        const delimiter = ':'
-        const langInfo = lang.split(delimiter)
-        const langType = langInfo[0]
-        const fileName = langInfo[1] || ''
-        const firstLineNumber = parseInt(langInfo[2], 10)
-
-        if (langType === 'flowchart') {
-          return `<pre class="flowchart">${str}</pre>`
-        }
-        if (langType === 'sequence') {
-          return `<pre class="sequence">${str}</pre>`
-        }
-        if (langType === 'chart') {
-          return `<pre class="chart">${str}</pre>`
-        }
-        if (langType === 'mermaid') {
-          return `<pre class="mermaid">${str}</pre>`
-        }
-        return '<pre class="code CodeMirror">' +
-          '<span class="filename">' + fileName + '</span>' +
-          createGutter(str, firstLineNumber) +
-          '<code class="' + langType + '">' +
-          str +
-          '</code></pre>'
-      },
       sanitize: 'STRICT'
     }
 
     const updatedOptions = Object.assign(defaultOptions, options)
     this.md = markdownit(updatedOptions)
+    this.md.linkify.set({ fuzzyLink: false })
 
     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 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'
+        'abbr',
+        'accept',
+        'accept-charset',
+        'accesskey',
+        'action',
+        'align',
+        'alt',
+        'axis',
+        'border',
+        'cellpadding',
+        'cellspacing',
+        'char',
+        'charoff',
+        'charset',
+        'checked',
+        'clear',
+        'cols',
+        'colspan',
+        'color',
+        'compact',
+        'coords',
+        'datetime',
+        'dir',
+        'disabled',
+        'enctype',
+        'for',
+        'frame',
+        'headers',
+        'height',
+        'hreflang',
+        'hspace',
+        'ismap',
+        'label',
+        'lang',
+        'maxlength',
+        'media',
+        'method',
+        'multiple',
+        'name',
+        'nohref',
+        'noshade',
+        'nowrap',
+        'open',
+        'prompt',
+        'readonly',
+        'rel',
+        'rev',
+        'rows',
+        'rowspan',
+        'rules',
+        'scope',
+        'selected',
+        'shape',
+        'size',
+        'span',
+        'start',
+        'summary',
+        'tabindex',
+        'target',
+        'title',
+        'type',
+        'usemap',
+        'valign',
+        'value',
+        'vspace',
+        'width',
+        'itemprop'
       ]
 
       if (updatedOptions.sanitize === 'ALLOW_STYLES') {
@@ -95,17 +174,21 @@ class Markdown {
         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']
+          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']
+        allowedIframeHostnames: ['www.youtube.com'],
+        selfClosing: ['img', 'br', 'hr', 'input'],
+        allowedSchemes: ['http', 'https', 'ftp', 'mailto'],
+        allowedSchemesAppliedToAttributes: ['href', 'src', 'cite'],
+        allowProtocolRelative: true
       })
     }
 
@@ -117,7 +200,7 @@ class Markdown {
       inlineClose: config.preview.latexInlineClose,
       blockOpen: config.preview.latexBlockOpen,
       blockClose: config.preview.latexBlockClose,
-      inlineRenderer: function (str) {
+      inlineRenderer: function(str) {
         let output = ''
         try {
           output = katex.renderToString(str.trim())
@@ -126,7 +209,7 @@ class Markdown {
         }
         return output
       },
-      blockRenderer: function (str) {
+      blockRenderer: function(str) {
         let output = ''
         try {
           output = katex.renderToString(str.trim(), { displayMode: true })
@@ -139,32 +222,171 @@ class Markdown {
     this.md.use(require('markdown-it-imsize'))
     this.md.use(require('markdown-it-footnote'))
     this.md.use(require('markdown-it-multimd-table'))
-    this.md.use(require('markdown-it-named-headers'), {
-      slugify: (header) => {
-        return encodeURI(header.trim()
-          .replace(/[\]\[\!\"\#\$\%\&\'\(\)\*\+\,\.\/\:\;\<\=\>\?\@\\\^\_\{\|\}\~]/g, '')
-          .replace(/\s+/g, '-'))
-          .replace(/\-+$/, '')
-      }
+    this.md.use(require('@enyaxu/markdown-it-anchor'), {
+      slugify: require('./slugify')
     })
     this.md.use(require('markdown-it-kbd'))
-    this.md.use(require('markdown-it-admonition'))
+    this.md.use(require('markdown-it-admonition'), {
+      types: [
+        'note',
+        'hint',
+        'attention',
+        'caution',
+        'danger',
+        'error',
+        'quote',
+        'abstract',
+        'question'
+      ]
+    })
+    this.md.use(require('markdown-it-abbr'))
+    this.md.use(require('markdown-it-sub'))
+    this.md.use(require('markdown-it-sup'))
+
+    this.md.use(md => {
+      markdownItTocAndAnchor(md, {
+        toc: true,
+        tocPattern: /\[TOC\]/i,
+        anchorLink: false,
+        appendIdToHeading: false
+      })
+
+      md.renderer.rules.toc_open = () => '<div class="markdownIt-TOC-wrapper">'
+      md.renderer.rules.toc_close = () => '</div>'
+    })
+
+    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>`
+        },
+        gallery: token => {
+          const content = token.content
+            .split('\n')
+            .slice(0, -1)
+            .map(line => {
+              const match = /!\[[^\]]*]\(([^\)]*)\)/.exec(line)
+              if (match) {
+                return mdurl.encode(match[1])
+              } else {
+                return mdurl.encode(line)
+              }
+            })
+            .join('\n')
+
+          return `<pre class="fence" data-line="${token.map[0]}">
+          <span class="filename">${token.fileName}</span>
+          <div class="gallery" data-autoplay="${
+            token.parameters.autoplay
+          }" data-height="${token.parameters.height}">${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}`
-      }
+    const plantuml = require('markdown-it-plantuml')
+    const plantUmlStripTrailingSlash = url =>
+      url.endsWith('/') ? url.slice(0, -1) : url
+    const plantUmlServerAddress = plantUmlStripTrailingSlash(
+      config.preview.plantUMLServerAddress
+    )
+    const parsePlantUml = function(umlCode, openMarker, closeMarker, type) {
+      const s = unescape(encodeURIComponent(umlCode))
+      const zippedCode = deflate.encode64(
+        deflate.zip_deflate(`${openMarker}\n${s}\n${closeMarker}`, 9)
+      )
+      return `${plantUmlServerAddress}/${type}/${zippedCode}`
+    }
+
+    this.md.use(plantuml, {
+      generateSource: umlCode =>
+        parsePlantUml(umlCode, '@startuml', '@enduml', 'svg')
+    })
+
+    // Ditaa support. PlantUML server doesn't support Ditaa in SVG, so we set the format as PNG at the moment.
+    this.md.use(plantuml, {
+      openMarker: '@startditaa',
+      closeMarker: '@endditaa',
+      generateSource: umlCode =>
+        parsePlantUml(umlCode, '@startditaa', '@endditaa', 'png')
+    })
+
+    // Mindmap support
+    this.md.use(plantuml, {
+      openMarker: '@startmindmap',
+      closeMarker: '@endmindmap',
+      generateSource: umlCode =>
+        parsePlantUml(umlCode, '@startmindmap', '@endmindmap', 'svg')
+    })
+
+    // WBS support
+    this.md.use(plantuml, {
+      openMarker: '@startwbs',
+      closeMarker: '@endwbs',
+      generateSource: umlCode =>
+        parsePlantUml(umlCode, '@startwbs', '@endwbs', 'svg')
+    })
+
+    // Gantt support
+    this.md.use(plantuml, {
+      openMarker: '@startgantt',
+      closeMarker: '@endgantt',
+      generateSource: umlCode =>
+        parsePlantUml(umlCode, '@startgantt', '@endgantt', 'svg')
     })
 
     // Override task item
-    this.md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
+    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')
@@ -174,10 +396,14 @@ class Markdown {
       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 (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 }
+        if (state.sCount[nextLine] < 0) {
+          continue
+        }
 
         // Some tags can terminate paragraph without empty line.
         terminate = false
@@ -187,10 +413,14 @@ class Markdown {
             break
           }
         }
-        if (terminate) { break }
+        if (terminate) {
+          break
+        }
       }
 
-      content = state.getLines(startLine, nextLine, state.blkIndent, false).trim()
+      content = state
+        .getLines(startLine, nextLine, state.blkIndent, false)
+        .trim()
 
       state.line = nextLine
 
@@ -200,14 +430,31 @@ class Markdown {
       if (state.parentType === 'list') {
         const match = content.match(/^\[( |x)\] ?(.+)/i)
         if (match) {
-          const liToken = lastFindInArray(state.tokens, token => token.type === 'list_item_open')
+          const liToken = lastFindInArray(
+            state.tokens,
+            token => token.type === 'list_item_open'
+          )
           if (liToken) {
             if (!liToken.attrs) {
               liToken.attrs = []
             }
-            liToken.attrs.push(['class', 'taskListItem'])
+            if (config.preview.lineThroughCheckbox) {
+              liToken.attrs.push([
+                'class',
+                `taskListItem${match[1] !== ' ' ? ' checked' : ''}`
+              ])
+            } else {
+              liToken.attrs.push(['class', 'taskListItem'])
+            }
           }
-          content = `<label class='taskListItem${match[1] !== ' ' ? ' checked' : ''}' for='checkbox-${startLine + 1}'><input type='checkbox'${match[1] !== ' ' ? ' checked' : ''} id='checkbox-${startLine + 1}'/> ${content.substring(4, content.length)}</label>`
+          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>`
         }
       }
 
@@ -228,13 +475,18 @@ class Markdown {
     // Add line number attribute for scrolling
     const originalRender = this.md.renderer.render
     this.md.renderer.render = (tokens, options, env) => {
-      tokens.forEach((token) => {
+      tokens.forEach(token => {
         switch (token.type) {
-          case 'heading_open':
-          case 'paragraph_open':
           case 'blockquote_open':
+          case 'dd_open':
+          case 'dt_open':
+          case 'heading_open':
+          case 'list_item_open':
+          case 'paragraph_open':
           case 'table_open':
-            token.attrPush(['data-line', token.map[0]])
+            if (token.map) {
+              token.attrPush(['data-line', token.map[0]])
+            }
         }
       })
       const result = originalRender.call(this.md.renderer, tokens, options, env)
@@ -244,7 +496,7 @@ class Markdown {
     window.md = this.md
   }
 
-  render (content) {
+  render(content) {
     if (!_.isString(content)) content = ''
     return this.md.render(content)
   }

browser/lib/markdownTextHelper.js

@@ -6,7 +6,7 @@
  * @param {string} input
  * @return {string}
  */
-export function strip (input) {
+export function strip(input) {
   let output = input
   try {
     output = output
@@ -22,7 +22,7 @@ export function strip (input) {
       .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
       .replace(/>/g, '')
       .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
-      .replace(/^#{1,6}\s*([^#]*)\s*(#{1,6})?/gm, '$1')
+      .replace(/^#{1,6}\s*/gm, '')
       .replace(/(`{3,})(.*?)\1/gm, '$2')
       .replace(/^-{3,}\s*$/g, '')
       .replace(/`(.+?)`/g, '$1')

browser/lib/newNote.js

@@ -0,0 +1,108 @@
+import dataApi from 'browser/main/lib/dataApi'
+import ee from 'browser/main/lib/eventEmitter'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import queryString from 'query-string'
+import { push } from 'connected-react-router'
+
+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: '',
+      linesHighlighted: []
+    })
+    .then(note => {
+      const noteHash = note.key
+      dispatch({
+        type: 'UPDATE_NOTE',
+        note: note
+      })
+
+      dispatch(
+        push({
+          pathname: location.pathname,
+          search: queryString.stringify({ 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(' ')
+  }
+
+  const defaultLanguage =
+    config.editor.snippetDefaultLanguage === 'Auto Detect'
+      ? null
+      : config.editor.snippetDefaultLanguage
+
+  return dataApi
+    .createNote(storage, {
+      type: 'SNIPPET_NOTE',
+      folder: folder,
+      title: '',
+      tags,
+      description: '',
+      snippets: [
+        {
+          name: '',
+          mode: defaultLanguage,
+          content: '',
+          linesHighlighted: []
+        }
+      ]
+    })
+    .then(note => {
+      const noteHash = note.key
+      dispatch({
+        type: 'UPDATE_NOTE',
+        note: note
+      })
+      dispatch(
+        push({
+          pathname: location.pathname,
+          search: queryString.stringify({ key: noteHash })
+        })
+      )
+      ee.emit('list:jump', noteHash)
+      ee.emit('detail:focus')
+    })
+}

browser/lib/normalizeEditorFontFamily.js

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

browser/lib/search.js

@@ -1,29 +1,38 @@
 import _ from 'lodash'
 
-export default function searchFromNotes (notes, search) {
+export default function searchFromNotes(notes, search) {
   if (search.trim().length === 0) return []
-  const searchBlocks = search.split(' ').filter(block => { return block !== '' })
+  const searchBlocks = search.split(' ').filter(block => {
+    return block !== ''
+  })
 
   let foundNotes = notes
-  searchBlocks.forEach((block) => {
+  searchBlocks.forEach(block => {
     foundNotes = findByWordOrTag(foundNotes, block)
   })
   return foundNotes
 }
 
-function findByWordOrTag (notes, block) {
+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) && note.tags.some((_tag) => _tag.match(tagRegExp))) {
+  return notes.filter(note => {
+    if (_.isArray(note.tags) && note.tags.some(_tag => _tag.match(tagRegExp))) {
       return true
     }
     if (note.type === 'SNIPPET_NOTE') {
-      return note.description.match(wordRegExp)
+      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(wordRegExp)
     }

browser/lib/slugify.js

@@ -0,0 +1,15 @@
+module.exports = function slugify(title) {
+  const slug = encodeURI(
+    title
+      .trim()
+      .replace(/^\s+/, '')
+      .replace(/\s+$/, '')
+      .replace(/\s+/g, '-')
+      .replace(
+        /[\]\[\!\'\#\$\%\&\(\)\*\+\,\.\/\:\;\<\=\>\?\@\\\^\{\|\}\~\`]/g,
+        ''
+      )
+  )
+
+  return slug
+}

browser/lib/spellcheck.js

@@ -0,0 +1,255 @@
+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.__('Spellcheck 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/turndown.js

@@ -0,0 +1,9 @@
+const TurndownService = require('turndown')
+const { gfm } = require('turndown-plugin-gfm')
+
+export const createTurndownService = function() {
+  const turndown = new TurndownService()
+  turndown.use(gfm)
+  turndown.remove('script')
+  return turndown
+}

browser/lib/ui-themes.js

@@ -0,0 +1,44 @@
+import i18n from 'browser/lib/i18n'
+
+export default [
+  {
+    name: 'dark',
+    label: i18n.__('Dark'),
+    isDark: true
+  },
+  {
+    name: 'default',
+    label: i18n.__('Default'),
+    isDark: false
+  },
+  {
+    name: 'dracula',
+    label: i18n.__('Dracula'),
+    isDark: true
+  },
+  {
+    name: 'monokai',
+    label: i18n.__('Monokai'),
+    isDark: true
+  },
+  {
+    name: 'nord',
+    label: i18n.__('Nord'),
+    isDark: true
+  },
+  {
+    name: 'solarized-dark',
+    label: i18n.__('Solarized Dark'),
+    isDark: true
+  },
+  {
+    name: 'vulcan',
+    label: i18n.__('Vulcan'),
+    isDark: true
+  },
+  {
+    name: 'white',
+    label: i18n.__('White'),
+    isDark: false
+  }
+]

browser/lib/utils.js

@@ -1,4 +1,4 @@
-export function lastFindInArray (array, callback) {
+export function lastFindInArray(array, callback) {
   for (let i = array.length - 1; i >= 0; --i) {
     if (callback(array[i], i, array)) {
       return array[i]
@@ -6,8 +6,12 @@ export function lastFindInArray (array, callback) {
   }
 }
 
-export function escapeHtmlCharacters (html, opt = { detectCodeBlock: false }) {
+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) =>
@@ -15,11 +19,18 @@ export function escapeHtmlCharacters (html, opt = { detectCodeBlock: false }) {
     replace +
     str.substr(index + replace.length - (replace.length - 1))
 
-  // detecting code block
-  while ((match = matchHtmlRegExp.exec(html)) != null) {
+  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) {
-      // position of the nearest line start
+      // 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--
@@ -31,16 +42,54 @@ export function escapeHtmlCharacters (html, opt = { detectCodeBlock: false }) {
         html[previousLineEnd + 3] === ' ' &&
         html[previousLineEnd + 4] === ' '
       ) {
-        // so skip it
+        // 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 escape string is 5. For example ('&quot;')
+      // 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++
@@ -55,7 +104,7 @@ export function escapeHtmlCharacters (html, opt = { detectCodeBlock: false }) {
       }
     } else if (current.char === '"') {
       html = replaceAt(html, current.index, '&quot;')
-    } else if (current.char === "'") {
+    } else if (current.char === "'" && !opt.skipSingleQuote) {
       html = replaceAt(html, current.index, '&#39;')
     } else if (current.char === '<') {
       html = replaceAt(html, current.index, '&lt;')
@@ -66,7 +115,7 @@ export function escapeHtmlCharacters (html, opt = { detectCodeBlock: false }) {
   return html
 }
 
-export function isObjectEqual (a, b) {
+export function isObjectEqual(a, b) {
   const aProps = Object.getOwnPropertyNames(a)
   const bProps = Object.getOwnPropertyNames(b)
 
@@ -83,8 +132,30 @@ export function isObjectEqual (a, b) {
   return true
 }
 
+export function isMarkdownTitleURL(str) {
+  return /(^#{1,6}\s)(?:\w+:|^)\/\/(?:[^\s\.]+\.\S{2}|localhost[\:?\d]*)/.test(
+    str
+  )
+}
+
+export function humanFileSize(bytes) {
+  const threshold = 1000
+  if (Math.abs(bytes) < threshold) {
+    return bytes + ' B'
+  }
+  var units = ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  var u = -1
+  do {
+    bytes /= threshold
+    ++u
+  } while (Math.abs(bytes) >= threshold && u < units.length - 1)
+  return bytes.toFixed(1) + ' ' + units[u]
+}
+
 export default {
   lastFindInArray,
   escapeHtmlCharacters,
-  isObjectEqual
+  isObjectEqual,
+  isMarkdownTitleURL,
+  humanFileSize
 }

browser/main/Detail/Detail.styl

@@ -23,17 +23,17 @@ body[data-theme="dark"]
     border-left 1px solid $ui-dark-borderColor
   .empty-message
     color $ui-dark-inactive-text-color
-    
-body[data-theme="solarized-dark"]
-  .root
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
-    border-left 1px solid $ui-solarized-dark-borderColor
-  .empty-message
-    color $ui-solarized-dark-text-color
 
-body[data-theme="monokai"]
-  .root
-    background-color $ui-monokai-noteDetail-backgroundColor
-    border-left 1px solid $ui-monokai-borderColor
-  .empty-message
-    color $ui-monokai-text-color
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+      border-left 1px solid get-theme-var(theme, 'borderColor')
+    .empty-message
+      color get-theme-var(theme, 'text-color')
+
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/main/Detail/FolderSelect.js

@@ -6,7 +6,7 @@ import _ from 'lodash'
 import i18n from 'browser/lib/i18n'
 
 class FolderSelect extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
 
     this.state = {
@@ -16,24 +16,27 @@ class FolderSelect extends React.Component {
     }
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.value = this.props.value
   }
 
-  componentDidUpdate () {
+  componentDidUpdate() {
     this.value = this.props.value
   }
 
-  handleClick (e) {
-    this.setState({
-      status: 'SEARCH',
-      optionIndex: -1
-    }, () => {
-      this.refs.search.focus()
-    })
+  handleClick(e) {
+    this.setState(
+      {
+        status: 'SEARCH',
+        optionIndex: -1
+      },
+      () => {
+        this.refs.search.focus()
+      }
+    )
   }
 
-  handleFocus (e) {
+  handleFocus(e) {
     if (this.state.status === 'IDLE') {
       this.setState({
         status: 'FOCUS'
@@ -41,7 +44,7 @@ class FolderSelect extends React.Component {
     }
   }
 
-  handleBlur (e) {
+  handleBlur(e) {
     if (this.state.status === 'FOCUS') {
       this.setState({
         status: 'IDLE'
@@ -49,40 +52,49 @@ class FolderSelect extends React.Component {
     }
   }
 
-  handleKeyDown (e) {
+  handleKeyDown(e) {
     switch (e.keyCode) {
       case 13:
         if (this.state.status === 'FOCUS') {
-          this.setState({
-            status: 'SEARCH',
-            optionIndex: -1
-          }, () => {
-            this.refs.search.focus()
-          })
+          this.setState(
+            {
+              status: 'SEARCH',
+              optionIndex: -1
+            },
+            () => {
+              this.refs.search.focus()
+            }
+          )
         }
         break
       case 40:
       case 38:
         if (this.state.status === 'FOCUS') {
-          this.setState({
-            status: 'SEARCH',
-            optionIndex: 0
-          }, () => {
-            this.refs.search.focus()
-          })
+          this.setState(
+            {
+              status: 'SEARCH',
+              optionIndex: 0
+            },
+            () => {
+              this.refs.search.focus()
+            }
+          )
         }
         break
       case 9:
         if (e.shiftKey) {
           e.preventDefault()
-          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]
+          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()
         }
     }
   }
 
-  handleSearchInputBlur (e) {
+  handleSearchInputBlur(e) {
     if (e.relatedTarget !== this.refs.root) {
       this.setState({
         status: 'IDLE'
@@ -90,14 +102,17 @@ class FolderSelect extends React.Component {
     }
   }
 
-  handleSearchInputChange (e) {
+  handleSearchInputChange(e) {
     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'))
-      })
-      : -1
+    const optionIndex =
+      search.length > 0
+        ? _.findIndex(folders, folder => {
+            return folder.name.match(
+              new RegExp('^' + _.escapeRegExp(search), 'i')
+            )
+          })
+        : -1
 
     this.setState({
       search: this.refs.search.value,
@@ -105,7 +120,7 @@ class FolderSelect extends React.Component {
     })
   }
 
-  handleSearchInputKeyDown (e) {
+  handleSearchInputKeyDown(e) {
     switch (e.keyCode) {
       case 40:
         e.stopPropagation()
@@ -121,15 +136,18 @@ class FolderSelect extends React.Component {
         break
       case 27:
         e.stopPropagation()
-        this.setState({
-          status: 'FOCUS'
-        }, () => {
-          this.refs.root.focus()
-        })
+        this.setState(
+          {
+            status: 'FOCUS'
+          },
+          () => {
+            this.refs.root.focus()
+          }
+        )
     }
   }
 
-  nextOption () {
+  nextOption() {
     let { optionIndex } = this.state
     const { folders } = this.props
 
@@ -141,7 +159,7 @@ class FolderSelect extends React.Component {
     })
   }
 
-  previousOption () {
+  previousOption() {
     const { folders } = this.props
     let { optionIndex } = this.state
 
@@ -153,46 +171,52 @@ class FolderSelect extends React.Component {
     })
   }
 
-  selectOption () {
+  selectOption() {
     const { folders } = this.props
     const optionIndex = this.state.optionIndex
 
     const folder = folders[optionIndex]
     if (folder != null) {
-      this.setState({
-        status: 'FOCUS'
-      }, () => {
-        this.setValue(folder.key)
-        this.refs.root.focus()
-      })
+      this.setState(
+        {
+          status: 'FOCUS'
+        },
+        () => {
+          this.setValue(folder.key)
+          this.refs.root.focus()
+        }
+      )
     }
   }
 
-  handleOptionClick (storageKey, folderKey) {
-    return (e) => {
+  handleOptionClick(storageKey, folderKey) {
+    return e => {
       e.stopPropagation()
-      this.setState({
-        status: 'FOCUS'
-      }, () => {
-        this.setValue(storageKey + '-' + folderKey)
-        this.refs.root.focus()
-      })
+      this.setState(
+        {
+          status: 'FOCUS'
+        },
+        () => {
+          this.setValue(storageKey + '-' + folderKey)
+          this.refs.root.focus()
+        }
+      )
     }
   }
 
-  setValue (value) {
+  setValue(value) {
     this.value = value
     this.props.onChange()
   }
 
-  render () {
+  render() {
     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) => {
+      storage.folders.forEach(folder => {
         options.push({
           storage: storage,
           folder: folder
@@ -200,68 +224,78 @@ class FolderSelect extends React.Component {
       })
     })
 
-    const 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) {
       const filter = new RegExp('^' + _.escapeRegExp(this.state.search), 'i')
-      options = options.filter((option) => filter.test(option.folder.name))
+      options = options.filter(option => filter.test(option.folder.name))
     }
 
-    const optionList = options
-      .map((option, index) => {
-        return (
-          <div styleName={index === this.state.optionIndex
+    const optionList = options.map((option, index) => {
+      return (
+        <div
+          styleName={
+            index === this.state.optionIndex
               ? 'search-optionList-item--active'
               : 'search-optionList-item'
-            }
-            key={option.storage.key + '-' + option.folder.key}
-            onClick={(e) => this.handleOptionClick(option.storage.key, option.folder.key)(e)}
+          }
+          key={option.storage.key + '-' + option.folder.key}
+          onClick={e =>
+            this.handleOptionClick(option.storage.key, option.folder.key)(e)
+          }
+        >
+          <span
+            styleName='search-optionList-item-name'
+            style={{ borderColor: option.folder.color }}
           >
-            <span styleName='search-optionList-item-name'
-              style={{borderColor: option.folder.color}}
-            >
-              {option.folder.name}
-              <span styleName='search-optionList-item-name-surfix'>in {option.storage.name}</span>
+            {option.folder.name}
+            <span styleName='search-optionList-item-name-surfix'>
+              in {option.storage.name}
             </span>
-          </div>
-        )
-      })
+          </span>
+        </div>
+      )
+    })
 
     return (
-      <div className={_.isString(className)
-          ? 'FolderSelect ' + className
-          : 'FolderSelect'
+      <div
+        className={
+          _.isString(className) ? 'FolderSelect ' + className : 'FolderSelect'
         }
-        styleName={this.state.status === 'SEARCH'
-          ? 'root--search'
-          : this.state.status === 'FOCUS'
-          ? 'root--focus'
-          : 'root'
+        styleName={
+          this.state.status === 'SEARCH'
+            ? 'root--search'
+            : this.state.status === 'FOCUS'
+            ? 'root--focus'
+            : 'root'
         }
         ref='root'
         tabIndex='0'
-        onClick={(e) => this.handleClick(e)}
-        onFocus={(e) => this.handleFocus(e)}
-        onBlur={(e) => this.handleBlur(e)}
-        onKeyDown={(e) => this.handleKeyDown(e)}
+        onClick={e => this.handleClick(e)}
+        onFocus={e => this.handleFocus(e)}
+        onBlur={e => this.handleBlur(e)}
+        onKeyDown={e => this.handleKeyDown(e)}
       >
-        {this.state.status === 'SEARCH'
-          ? <div styleName='search'>
-            <input styleName='search-input'
+        {this.state.status === 'SEARCH' ? (
+          <div styleName='search'>
+            <input
+              styleName='search-input'
               ref='search'
               value={this.state.search}
               placeholder={i18n.__('Folder...')}
-              onChange={(e) => this.handleSearchInputChange(e)}
-              onBlur={(e) => this.handleSearchInputBlur(e)}
-              onKeyDown={(e) => this.handleSearchInputKeyDown(e)}
+              onChange={e => this.handleSearchInputChange(e)}
+              onBlur={e => this.handleSearchInputBlur(e)}
+              onKeyDown={e => this.handleSearchInputKeyDown(e)}
             />
-            <div styleName='search-optionList'
-              ref='optionList'
-            >
+            <div styleName='search-optionList' ref='optionList'>
               {optionList}
             </div>
           </div>
-          : <div styleName='idle' style={{color: currentOption.folder.color}}>
+        ) : (
+          <div styleName='idle' style={{ color: currentOption.folder.color }}>
             <div styleName='idle-label'>
               <i className='fa fa-folder' />
               <span styleName='idle-label-name'>
@@ -269,8 +303,7 @@ class FolderSelect extends React.Component {
               </span>
             </div>
           </div>
-        }
-
+        )}
       </div>
     )
   }
@@ -280,11 +313,13 @@ FolderSelect.propTypes = {
   className: PropTypes.string,
   onChange: PropTypes.func,
   value: PropTypes.string,
-  folders: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string,
-    name: PropTypes.string,
-    color: PropTypes.string
-  }))
+  folders: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string,
+      name: PropTypes.string,
+      color: PropTypes.string
+    })
+  )
 }
 
 export default CSSModules(FolderSelect, styles)

browser/main/Detail/FolderSelect.styl

@@ -36,7 +36,7 @@
   height 34px
   width 20px
   line-height 34px
-  
+
 .search-input
   vertical-align middle
   position relative
@@ -71,7 +71,7 @@
   overflow ellipsis
   cursor pointer
   &:hover
-    background-color $ui-button--hover-backgroundColor 
+    background-color $ui-button--hover-backgroundColor
 
 .search-optionList-item--active
   @extend .search-optionList-item
@@ -134,28 +134,39 @@ body[data-theme="dark"]
   .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
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      &:hover
+        background-color get-theme-var(theme, 'button--hover-backgroundColor')
+        border-color get-theme-var(theme, 'borderColor')
 
-  .search-optionList
-    color white
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-button-backgroundColor
+    .search-input
+      color get-theme-var(theme, 'text-color')
+      background-color transparent
+      border-color get-theme-var(theme, 'borderColor')
 
-  .search-optionList-item
-    &:hover
-      background-color lighten($ui-monokai-button--hover-backgroundColor, 15%)
+    .search-optionList
+      color get-theme-var(theme, 'text-color')
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'button-backgroundColor')
 
-  .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
+    .search-optionList-item
+      &:hover
+        background-color lighten(get-theme-var(theme, 'button--hover-backgroundColor'), 15%)
+
+    .search-optionList-item--active
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
+      color get-theme-var(theme, 'button--active-color')
+      &:hover
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
+        color get-theme-var(theme, 'button--active-color')
+
+    .search-optionList-item-name-surfix
+      color get-theme-var(theme, 'inactive-text-color')
+
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/main/Detail/FromUrlButton.js

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './FromUrlButton.styl'
+import _ from 'lodash'
+import i18n from 'browser/lib/i18n'
+
+class FromUrlButton extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      isActive: false
+    }
+  }
+
+  handleMouseDown(e) {
+    this.setState({
+      isActive: true
+    })
+  }
+
+  handleMouseUp(e) {
+    this.setState({
+      isActive: false
+    })
+  }
+
+  handleMouseLeave(e) {
+    this.setState({
+      isActive: false
+    })
+  }
+
+  render() {
+    const { className } = this.props
+
+    return (
+      <button
+        className={
+          _.isString(className) ? 'FromUrlButton ' + className : 'FromUrlButton'
+        }
+        styleName={
+          this.state.isActive || this.props.isActive ? 'root--active' : 'root'
+        }
+        onMouseDown={e => this.handleMouseDown(e)}
+        onMouseUp={e => this.handleMouseUp(e)}
+        onMouseLeave={e => this.handleMouseLeave(e)}
+        onClick={this.props.onClick}
+      >
+        <img
+          styleName='icon'
+          src={
+            this.state.isActive || this.props.isActive
+              ? '../resources/icon/icon-external.svg'
+              : '../resources/icon/icon-external.svg'
+          }
+        />
+        <span styleName='tooltip'>{i18n.__('Convert URL to Markdown')}</span>
+      </button>
+    )
+  }
+}
+
+FromUrlButton.propTypes = {
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func,
+  className: PropTypes.string
+}
+
+export default CSSModules(FromUrlButton, styles)

browser/main/Detail/FromUrlButton.styl

@@ -0,0 +1,41 @@
+.root
+  top 45px
+  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 125px
+  width 90px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.root--active
+  @extend .root
+  transition 0.15s
+  color $ui-favorite-star-button-color
+  &:hover
+    transition 0.2s
+    color alpha($ui-favorite-star-button-color, 0.6)
+
+.icon
+  transition transform 0.15s
+  height 13px
+
+body[data-theme="dark"]
+  .root
+    topBarButtonDark()
+    &:hover
+      transition 0.2s
+      color alpha($ui-favorite-star-button-color, 0.6)

browser/main/Detail/FullscreenButton.js

@@ -5,15 +5,21 @@ 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>
-)
+const FullscreenButton = ({ onClick }) => {
+  const hotkey = (OSX ? i18n.__('Command(⌘)') : i18n.__('Ctrl(^)')) + '+B'
+  return (
+    <button
+      styleName='control-fullScreenButton'
+      title={i18n.__('Fullscreen')}
+      onMouseDown={e => onClick(e)}
+    >
+      <img src='../resources/icon/icon-full.svg' />
+      <span lang={i18n.locale} styleName='tooltip'>
+        {i18n.__('Fullscreen')}({hotkey})
+      </span>
+    </button>
+  )
+}
 
 FullscreenButton.propTypes = {
   onClick: PropTypes.func.isRequired

browser/main/Detail/FullscreenButton.styl

@@ -1,22 +1,26 @@
-.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
+.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
+
+.tooltip:lang(ja)
+  @extend .tooltip
+  right 35px
+
+body[data-theme="dark"]
+  .control-fullScreenButton
     topBarButtonDark()

browser/main/Detail/InfoButton.js

@@ -4,12 +4,8 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoButton.styl'
 import i18n from 'browser/lib/i18n'
 
-const InfoButton = ({
-  onClick
-}) => (
-  <button styleName='control-infoButton'
-    onClick={(e) => onClick(e)}
-  >
+const InfoButton = ({ onClick }) => (
+  <button styleName='control-infoButton' onClick={e => onClick(e)}>
     <img className='infoButton' src='../resources/icon/icon-info.svg' />
     <span styleName='tooltip'>{i18n.__('Info')}</span>
   </button>

browser/main/Detail/InfoPanel.js

@@ -6,28 +6,47 @@ import copy from 'copy-to-clipboard'
 import i18n from 'browser/lib/i18n'
 
 class InfoPanel extends React.Component {
-  copyNoteLink () {
-    const {noteLink} = this.props
+  copyNoteLink() {
+    const { noteLink } = this.props
     this.refs.noteLink.select()
     copy(noteLink)
   }
 
-  render () {
+  render() {
     const {
-      storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml, wordCount, letterCount, type, print
+      storageName,
+      folderName,
+      noteLink,
+      updatedAt,
+      createdAt,
+      exportAsMd,
+      exportAsTxt,
+      exportAsHtml,
+      exportAsPdf,
+      wordCount,
+      letterCount,
+      type,
+      print
     } = this.props
     return (
-      <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
+      <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>
+          <p styleName='modification-date-desc'>
+            {i18n.__('MODIFICATION DATE')}
+          </p>
         </div>
 
         <hr />
 
-        {type === 'SNIPPET_NOTE'
-          ? ''
-          : <div styleName='count-wrap'>
+        {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>
@@ -37,12 +56,9 @@ class InfoPanel extends React.Component {
               <p styleName='infoPanel-sub-count'>{i18n.__('Letters')}</p>
             </div>
           </div>
-        }
+        )}
 
-        {type === 'SNIPPET_NOTE'
-          ? ''
-          : <hr />
-        }
+        {type === 'SNIPPET_NOTE' ? '' : <hr />}
 
         <div>
           <p styleName='infoPanel-default'>{storageName}</p>
@@ -60,8 +76,18 @@ class InfoPanel extends React.Component {
         </div>
 
         <div>
-          <input styleName='infoPanel-noteLink' ref='noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
-          <button onClick={() => this.copyNoteLink()} styleName='infoPanel-copyButton'>
+          <input
+            styleName='infoPanel-noteLink'
+            ref='noteLink'
+            defaultValue={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>
@@ -70,22 +96,39 @@ class InfoPanel extends React.Component {
         <hr />
 
         <div id='export-wrap'>
-          <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
+          <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)}>
+          <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)}>
+          <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)}>
+          <button
+            styleName='export--enable'
+            onClick={e => exportAsPdf(e, 'export-pdf')}
+          >
+            <i className='fa fa-file-pdf-o' />
+            <p>{i18n.__('.pdf')}</p>
+          </button>
+
+          <button styleName='export--enable' onClick={e => print(e, 'print')}>
             <i className='fa fa-print' />
             <p>{i18n.__('Print')}</p>
           </button>
@@ -104,6 +147,7 @@ InfoPanel.propTypes = {
   exportAsMd: PropTypes.func.isRequired,
   exportAsTxt: PropTypes.func.isRequired,
   exportAsHtml: PropTypes.func.isRequired,
+  exportAsPdf: PropTypes.func.isRequired,
   wordCount: PropTypes.number,
   letterCount: PropTypes.number,
   type: PropTypes.string.isRequired,

browser/main/Detail/InfoPanel.styl

@@ -15,7 +15,7 @@
   right 25px
   position absolute
   padding 20px 25px 0 25px
-  width 300px
+  // width 300px
   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
@@ -137,122 +138,49 @@
 .export--unable
   cursor not-allowed
 
-body[data-theme="dark"]
-  .control-infoButton-panel
-    background-color $ui-dark-noteList-backgroundColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .control-infoButton-panel
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
-  .control-infoButton-panel-trash
-    background-color $ui-dark-noteList-backgroundColor
+    .control-infoButton-panel-trash
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
-  .modification-date
-    color $ui-dark-text-color
+    .modification-date
+      color get-theme-var(theme, 'text-color')
 
-  .modification-date-desc
-    color $ui-inactive-text-color
+    .modification-date-desc
+      color $ui-inactive-text-color
 
-  .infoPanel-defaul-count
-    color $ui-dark-text-color
+    .infoPanel-defaul-count
+      color get-theme-var(theme, 'text-color')
 
-  .infoPanel-sub-count
-    color $ui-inactive-text-color
+    .infoPanel-sub-count
+      color $ui-inactive-text-color
 
-  .infoPanel-default
-    color $ui-dark-text-color
+    .infoPanel-default
+      color get-theme-var(theme, 'text-color')
 
-  .infoPanel-sub
-    color $ui-inactive-text-color
+    .infoPanel-sub
+      color $ui-inactive-text-color
 
-  .infoPanel-noteLink
-    background-color alpha($ui-dark-borderColor, 60%)
-    color $ui-dark-text-color
+    .infoPanel-noteLink
+      background-color alpha(get-theme-var(theme, 'borderColor'), 20%)
+      color get-theme-var(theme, 'text-color')
 
-  [id=export-wrap]
-    button
-      color $ui-dark-inactive-text-color
-      &:hover
-        background-color alpha($ui-dark-borderColor, 20%)
-        color $ui-dark-text-color
-    p
-      color $ui-dark-inactive-text-color
-      &:hover
-        color $ui-dark-text-color
+    [id=export-wrap]
+      button
+        color $ui-dark-inactive-text-color
+        &:hover
+          background-color alpha(get-theme-var(theme, 'borderColor'), 20%)
+          color get-theme-var(theme, 'text-color')
+      p
+        color $ui-dark-inactive-text-color
+        &:hover
+          color get-theme-var(theme, 'text-color')
 
-body[data-theme="solarized-dark"]
-  .control-infoButton-panel
-    background-color $ui-solarized-dark-noteList-backgroundColor
+for theme in 'dark' 'solarized-dark' 'dracula'
+  apply-theme(theme)
 
-  .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
+for theme in $themes
+  apply-theme(theme)

browser/main/Detail/InfoPanelTrashed.js

@@ -5,9 +5,20 @@ import styles from './InfoPanel.styl'
 import i18n from 'browser/lib/i18n'
 
 const InfoPanelTrashed = ({
-  storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml
+  storageName,
+  folderName,
+  updatedAt,
+  createdAt,
+  exportAsMd,
+  exportAsTxt,
+  exportAsHtml,
+  exportAsPdf
 }) => (
-  <div className='infoPanel' styleName='control-infoButton-panel-trash' style={{display: 'none'}}>
+  <div
+    className='infoPanel'
+    styleName='control-infoButton-panel-trash'
+    style={{ display: 'none' }}
+  >
     <div>
       <p styleName='modification-date'>{updatedAt}</p>
       <p styleName='modification-date-desc'>{i18n.__('MODIFICATION DATE')}</p>
@@ -21,7 +32,10 @@ const InfoPanelTrashed = ({
     </div>
 
     <div>
-      <p styleName='infoPanel-default'><text styleName='infoPanel-trash'>Trash</text>{folderName}</p>
+      <p styleName='infoPanel-default'>
+        <text styleName='infoPanel-trash'>Trash</text>
+        {folderName}
+      </p>
       <p styleName='infoPanel-sub'>{i18n.__('FOLDER')}</p>
     </div>
 
@@ -31,22 +45,34 @@ const InfoPanelTrashed = ({
     </div>
 
     <div id='export-wrap'>
-      <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
+      <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)}>
+      <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)}>
+      <button
+        styleName='export--enable'
+        onClick={e => exportAsHtml(e, 'export-html')}
+      >
         <i className='fa fa-html5' />
         <p>.html</p>
       </button>
 
-      <button styleName='export--unable'>
+      <button
+        styleName='export--enable'
+        onClick={e => exportAsPdf(e, 'export-pdf')}
+      >
         <i className='fa fa-file-pdf-o' />
         <p>.pdf</p>
       </button>
@@ -61,7 +87,8 @@ InfoPanelTrashed.propTypes = {
   createdAt: PropTypes.string.isRequired,
   exportAsMd: PropTypes.func.isRequired,
   exportAsTxt: PropTypes.func.isRequired,
-  exportAsHtml: PropTypes.func.isRequired
+  exportAsHtml: PropTypes.func.isRequired,
+  exportAsPdf: PropTypes.func.isRequired
 }
 
 export default CSSModules(InfoPanelTrashed, styles)

browser/main/Detail/MarkdownNoteDetail.js

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
@@ -9,7 +10,6 @@ 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 ee from 'browser/main/lib/eventEmitter'
 import markdown from 'browser/lib/markdownTextHelper'
 import StatusBar from '../StatusBar'
@@ -29,99 +29,145 @@ import { formatDate } from 'browser/lib/date-formatter'
 import { getTodoPercentageOfCompleted } from 'browser/lib/getTodoStatus'
 import striptags from 'striptags'
 import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
+import markdownToc from 'browser/lib/markdown-toc-generator'
+import queryString from 'query-string'
+import { replace } from 'connected-react-router'
+import ToggleDirectionButton from 'browser/main/Detail/ToggleDirectionButton'
 
 class MarkdownNoteDetail extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
 
     this.state = {
       isMovingNote: false,
-      note: Object.assign({
-        title: '',
-        content: ''
-      }, props.note),
-      isLockButtonShown: false,
+      note: Object.assign(
+        {
+          title: '',
+          content: '',
+          linesHighlighted: []
+        },
+        props.note
+      ),
+      isLockButtonShown: props.config.editor.type !== 'SPLIT',
       isLocked: false,
-      editorType: props.config.editor.type
+      editorType: props.config.editor.type,
+      switchPreview: props.config.editor.switchPreview,
+      RTL: false
     }
+
     this.dispatchTimer = null
 
     this.toggleLockButton = this.handleToggleLockButton.bind(this)
+    this.generateToc = this.handleGenerateToc.bind(this)
+    this.handleUpdateContent = this.handleUpdateContent.bind(this)
   }
 
-  focus () {
+  focus() {
     this.refs.content.focus()
   }
 
-  componentDidMount () {
+  componentDidMount() {
     ee.on('topbar:togglelockbutton', this.toggleLockButton)
+    ee.on('topbar:toggledirectionbutton', () => this.handleSwitchDirection())
     ee.on('topbar:togglemodebutton', () => {
-      const reversedType = this.state.editorType === 'SPLIT' ? 'EDITOR_PREVIEW' : 'SPLIT'
+      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.state.isMovingNote) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    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({ linesHighlighted: [] }, nextProps.note)
+        },
+        () => {
+          this.refs.content.reload()
+          if (this.refs.tags) this.refs.tags.reset()
+        }
+      )
+    }
+
+    // Focus content if using blur or double click
+    // --> Moved here from componentDidMount so a re-render during search won't set focus to the editor
+    const { switchPreview } = nextProps.config.editor
+
+    if (this.state.switchPreview !== switchPreview) {
       this.setState({
-        note: Object.assign({}, nextProps.note)
-      }, () => {
-        this.refs.content.reload()
-        if (this.refs.tags) this.refs.tags.reset()
+        switchPreview
       })
+      if (switchPreview === 'BLUR' || switchPreview === 'DBL_CLICK') {
+        console.log('setting focus', switchPreview)
+        this.focus()
+      }
     }
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     ee.off('topbar:togglelockbutton', this.toggleLockButton)
+    ee.on('topbar:toggledirectionbutton', this.handleSwitchDirection)
+    ee.off('code:generate-toc', this.generateToc)
     if (this.saveQueue != null) this.saveNow()
   }
 
-  handleUpdateTag () {
+  handleUpdateTag() {
     const { note } = this.state
     if (this.refs.tags) note.tags = this.refs.tags.value
     this.updateNote(note)
   }
 
-  handleUpdateContent () {
+  handleUpdateContent() {
     const { note } = this.state
     note.content = this.refs.content.value
-    note.title = markdown.strip(striptags(findNoteTitle(note.content)))
+
+    let title = findNoteTitle(
+      note.content,
+      this.props.config.editor.enableFrontMatterTitle,
+      this.props.config.editor.frontMatterTitleField
+    )
+    title = striptags(title)
+    title = markdown.strip(title)
+    note.title = title
+
     this.updateNote(note)
   }
 
-  updateNote (note) {
+  updateNote(note) {
     note.updatedAt = new Date()
-    this.setState({note}, () => {
+    this.setState({ note }, () => {
       this.save()
     })
   }
 
-  save () {
+  save() {
     clearTimeout(this.saveQueue)
     this.saveQueue = setTimeout(() => {
       this.saveNow()
     }, 1000)
   }
 
-  saveNow () {
+  saveNow() {
     const { note, dispatch } = this.props
     clearTimeout(this.saveQueue)
     this.saveQueue = null
 
-    dataApi
-      .updateNote(note.storage, note.key, this.state.note)
-      .then((note) => {
-        dispatch({
-          type: 'UPDATE_NOTE',
-          note: note
-        })
-        AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
+    dataApi.updateNote(note.storage, note.key, this.state.note).then(note => {
+      dispatch({
+        type: 'UPDATE_NOTE',
+        note: note
       })
+      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
+    })
   }
 
-  handleFolderChange (e) {
+  handleFolderChange(e) {
     const { note } = this.state
     const value = this.refs.folder.value
     const splitted = value.split('-')
@@ -130,70 +176,114 @@ class MarkdownNoteDetail extends React.Component {
 
     dataApi
       .moveNote(note.storage, note.key, newStorageKey, newFolderKey)
-      .then((newNote) => {
-        this.setState({
-          isMovingNote: true,
-          note: Object.assign({}, newNote)
-        }, () => {
-          const { dispatch, location } = this.props
-          dispatch({
-            type: 'MOVE_NOTE',
-            originNote: note,
-            note: newNote
-          })
-          hashHistory.replace({
-            pathname: location.pathname,
-            query: {
-              key: newNote.key
-            }
-          })
-          this.setState({
-            isMovingNote: false
-          })
-        })
+      .then(newNote => {
+        this.setState(
+          {
+            isMovingNote: true,
+            note: Object.assign({}, newNote)
+          },
+          () => {
+            const { dispatch, location } = this.props
+            dispatch({
+              type: 'MOVE_NOTE',
+              originNote: note,
+              note: newNote
+            })
+            dispatch(
+              replace({
+                pathname: location.pathname,
+                search: queryString.stringify({
+                  key: newNote.key
+                })
+              })
+            )
+            this.setState({
+              isMovingNote: false
+            })
+          }
+        )
       })
   }
 
-  handleStarButtonClick (e) {
+  handleStarButtonClick(e) {
     const { note } = this.state
-    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
+    if (!note.isStarred)
+      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
 
-    this.setState({
-      note
-    }, () => {
-      this.save()
-    })
+    this.setState(
+      {
+        note
+      },
+      () => {
+        this.save()
+      }
+    )
   }
 
-  exportAsFile () {
+  exportAsFile() {}
 
-  }
-
-  exportAsMd () {
+  exportAsMd() {
     ee.emit('export:save-md')
   }
 
-  exportAsTxt () {
+  exportAsTxt() {
     ee.emit('export:save-text')
   }
 
-  exportAsHtml () {
+  exportAsHtml() {
     ee.emit('export:save-html')
   }
 
-  handleTrashButtonClick (e) {
+  exportAsPdf() {
+    ee.emit('export:save-pdf')
+  }
+
+  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) {
     const { note } = this.state
     const { isTrashed } = note
     const { confirmDeletion } = this.props.config.ui
 
     if (isTrashed) {
       if (confirmDeleteNote(confirmDeletion, true)) {
-        const {note, dispatch} = this.props
+        const { note, dispatch } = this.props
         dataApi
           .deleteNote(note.storage, note.key)
-          .then((data) => {
+          .then(data => {
             const dispatchHandler = () => {
               dispatch({
                 type: 'DELETE_NOTE',
@@ -209,223 +299,316 @@ class MarkdownNoteDetail extends React.Component {
       if (confirmDeleteNote(confirmDeletion, false)) {
         note.isTrashed = true
 
-        this.setState({
-          note
-        }, () => {
-          this.save()
-        })
+        this.setState(
+          {
+            note
+          },
+          () => {
+            this.save()
+          }
+        )
 
         ee.emit('list:next')
       }
     }
   }
 
-  handleUndoButtonClick (e) {
+  handleUndoButtonClick(e) {
     const { note } = this.state
 
     note.isTrashed = false
 
-    this.setState({
-      note
-    }, () => {
-      this.save()
-      this.refs.content.reload()
-      ee.emit('list:next')
-    })
+    this.setState(
+      {
+        note
+      },
+      () => {
+        this.save()
+        this.refs.content.reload()
+        ee.emit('list:next')
+      }
+    )
   }
 
-  handleFullScreenButton (e) {
+  handleFullScreenButton(e) {
     ee.emit('editor:fullscreen')
   }
 
-  handleLockButtonMouseDown (e) {
+  handleLockButtonMouseDown(e) {
     e.preventDefault()
     ee.emit('editor:lock')
     this.setState({ isLocked: !this.state.isLocked })
     if (this.state.isLocked) this.focus()
   }
 
-  getToggleLockButton () {
-    return this.state.isLocked ? '../resources/icon/icon-previewoff-on.svg' : '../resources/icon/icon-previewoff-off.svg'
+  getToggleLockButton() {
+    return this.state.isLocked
+      ? '../resources/icon/icon-lock.svg'
+      : '../resources/icon/icon-unlock.svg'
   }
 
-  handleDeleteKeyDown (e) {
+  handleDeleteKeyDown(e) {
     if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
   }
 
-  handleToggleLockButton (event, noteStatus) {
+  handleToggleLockButton(event, noteStatus) {
     // first argument event is not used
-    if (this.props.config.editor.switchPreview === 'BLUR' && noteStatus === 'CODE') {
-      this.setState({isLockButtonShown: true})
+    if (noteStatus === 'CODE') {
+      this.setState({ isLockButtonShown: true })
     } else {
-      this.setState({isLockButtonShown: false})
+      this.setState({ isLockButtonShown: false })
     }
   }
 
-  handleFocus (e) {
+  handleGenerateToc() {
+    const editor = this.refs.content.refs.code.editor
+    markdownToc.generateInEditor(editor)
+  }
+
+  handleFocus(e) {
     this.focus()
   }
 
-  handleInfoButtonClick (e) {
+  handleInfoButtonClick(e) {
     const infoPanel = document.querySelector('.infoPanel')
-    if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none'
+    if (infoPanel.style)
+      infoPanel.style.display =
+        infoPanel.style.display === 'none' ? 'inline' : 'none'
   }
 
-  print (e) {
+  print(e) {
     ee.emit('print')
   }
 
-  handleSwitchMode (type) {
-    this.setState({ editorType: type }, () => {
-      this.focus()
-      const newConfig = Object.assign({}, this.props.config)
-      newConfig.editor.type = type
-      ConfigManager.set(newConfig)
-    })
+  handleSwitchMode(type) {
+    // If in split mode, hide the lock button
+    this.setState(
+      { editorType: type, isLockButtonShown: !(type === 'SPLIT') },
+      () => {
+        this.focus()
+        const newConfig = Object.assign({}, this.props.config)
+        newConfig.editor.type = type
+        ConfigManager.set(newConfig)
+      }
+    )
   }
 
-  renderEditor () {
+  handleSwitchDirection() {
+    if (!this.props.config.editor.rtlEnabled) {
+      return
+    }
+    // If in split mode, hide the lock button
+    const direction = this.state.RTL
+    this.setState({ RTL: !direction })
+  }
+
+  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}
-      />
+      return (
+        <MarkdownEditor
+          ref='content'
+          styleName='body-noteEditor'
+          config={config}
+          value={note.content}
+          storageKey={note.storage}
+          noteKey={note.key}
+          linesHighlighted={note.linesHighlighted}
+          onChange={this.handleUpdateContent}
+          isLocked={this.state.isLocked}
+          ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+          RTL={config.editor.rtlEnabled && this.state.RTL}
+        />
+      )
     } else {
-      return <MarkdownSplitEditor
-        ref='content'
-        config={config}
-        value={note.content}
-        storageKey={note.storage}
-        noteKey={note.key}
-        onChange={this.handleUpdateContent.bind(this)}
-        ignorePreviewPointerEvents={ignorePreviewPointerEvents}
-      />
+      return (
+        <MarkdownSplitEditor
+          ref='content'
+          config={config}
+          value={note.content}
+          storageKey={note.storage}
+          noteKey={note.key}
+          linesHighlighted={note.linesHighlighted}
+          onChange={this.handleUpdateContent}
+          ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+          RTL={config.editor.rtlEnabled && this.state.RTL}
+        />
+      )
     }
   }
 
-  render () {
-    const { data, location } = this.props
+  render() {
+    const { data, dispatch, 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) => {
+      storage.folders.forEach(folder => {
         options.push({
           storage: storage,
           folder: folder
         })
       })
     })
-    const 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'>
-        <RestoreButton onClick={(e) => this.handleUndoButtonClick(e)} />
-      </div>
-      <div styleName='info-right'>
-        <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
-        <InfoButton
-          onClick={(e) => this.handleInfoButtonClick(e)}
-        />
-        <InfoPanelTrashed
-          storageName={currentOption.storage.name}
-          folderName={currentOption.folder.name}
-          updatedAt={formatDate(note.updatedAt)}
-          createdAt={formatDate(note.createdAt)}
-          exportAsHtml={this.exportAsHtml}
-          exportAsMd={this.exportAsMd}
-          exportAsTxt={this.exportAsTxt}
-        />
-      </div>
-    </div>
-
-    const detailTopBar = <div styleName='info'>
-      <div styleName='info-left'>
-        <div styleName='info-left-top'>
-          <FolderSelect styleName='info-left-top-folderSelect'
-            value={this.state.note.storage + '-' + this.state.note.folder}
-            ref='folder'
-            data={data}
-            onChange={(e) => this.handleFolderChange(e)}
+    const trashTopBar = (
+      <div styleName='info'>
+        <div styleName='info-left'>
+          <RestoreButton onClick={e => this.handleUndoButtonClick(e)} />
+        </div>
+        <div styleName='info-right'>
+          <PermanentDeleteButton
+            onClick={e => this.handleTrashButtonClick(e)}
+          />
+          <InfoButton onClick={e => this.handleInfoButtonClick(e)} />
+          <InfoPanelTrashed
+            storageName={currentOption.storage.name}
+            folderName={currentOption.folder.name}
+            updatedAt={formatDate(note.updatedAt)}
+            createdAt={formatDate(note.createdAt)}
+            exportAsHtml={this.exportAsHtml}
+            exportAsMd={this.exportAsMd}
+            exportAsTxt={this.exportAsTxt}
+            exportAsPdf={this.exportAsPdf}
           />
         </div>
-
-        <TagSelect
-          ref='tags'
-          value={this.state.note.tags}
-          onChange={this.handleUpdateTag.bind(this)}
-        />
-        <TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
       </div>
-      <div styleName='info-right'>
-        <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
-        <StarButton
-          onClick={(e) => this.handleStarButtonClick(e)}
-          isActive={note.isStarred}
-        />
+    )
 
-        {(() => {
-          const imgSrc = `${this.getToggleLockButton()}`
-          const lockButtonComponent =
-            <button styleName='control-lockButton'
-              onFocus={(e) => this.handleFocus(e)}
-              onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
-            >
-              <img styleName='iconInfo' src={imgSrc} />
-              {this.state.isLocked ? <span styleName='tooltip'>Unlock</span> : <span styleName='tooltip'>Lock</span>}
-            </button>
+    const detailTopBar = (
+      <div styleName='info'>
+        <div styleName='info-left'>
+          <div>
+            <FolderSelect
+              styleName='info-left-top-folderSelect'
+              value={this.state.note.storage + '-' + this.state.note.folder}
+              ref='folder'
+              data={data}
+              onChange={e => this.handleFolderChange(e)}
+            />
+          </div>
 
-          return (
-            this.state.isLockButtonShown ? lockButtonComponent : ''
-          )
-        })()}
+          <TagSelect
+            ref='tags'
+            value={this.state.note.tags}
+            saveTagsAlphabetically={config.ui.saveTagsAlphabetically}
+            showTagsAlphabetically={config.ui.showTagsAlphabetically}
+            data={data}
+            dispatch={dispatch}
+            onChange={this.handleUpdateTag.bind(this)}
+            coloredTags={config.coloredTags}
+          />
+          <TodoListPercentage
+            onClearCheckboxClick={e => this.handleClearTodo(e)}
+            percentageOfTodo={getTodoPercentageOfCompleted(note.content)}
+          />
+        </div>
+        <div styleName='info-right'>
+          <ToggleModeButton
+            onClick={e => this.handleSwitchMode(e)}
+            editorType={editorType}
+          />
+          {this.props.config.editor.rtlEnabled && (
+            <ToggleDirectionButton
+              onClick={e => this.handleSwitchDirection(e)}
+              isRTL={this.state.RTL}
+            />
+          )}
+          <StarButton
+            onClick={e => this.handleStarButtonClick(e)}
+            isActive={note.isStarred}
+          />
 
-        <FullscreenButton onClick={(e) => this.handleFullScreenButton(e)} />
+          {(() => {
+            const imgSrc = `${this.getToggleLockButton()}`
+            const lockButtonComponent = (
+              <button
+                styleName='control-lockButton'
+                onFocus={e => this.handleFocus(e)}
+                onMouseDown={e => this.handleLockButtonMouseDown(e)}
+              >
+                <img src={imgSrc} />
+                {this.state.isLocked ? (
+                  <span styleName='tooltip'>Unlock</span>
+                ) : (
+                  <span styleName='tooltip'>Lock</span>
+                )}
+              </button>
+            )
 
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+            return this.state.isLockButtonShown ? lockButtonComponent : ''
+          })()}
 
-        <InfoButton
-          onClick={(e) => this.handleInfoButtonClick(e)}
-        />
+          <FullscreenButton onClick={e => this.handleFullScreenButton(e)} />
 
-        <InfoPanel
-          storageName={currentOption.storage.name}
-          folderName={currentOption.folder.name}
-          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}
-          print={this.print}
-        />
+          <TrashButton onClick={e => this.handleTrashButtonClick(e)} />
+
+          <InfoButton onClick={e => this.handleInfoButtonClick(e)} />
+
+          <InfoPanel
+            storageName={currentOption.storage.name}
+            folderName={currentOption.folder.name}
+            noteLink={`[${note.title}](:note:${
+              queryString.parse(location.search).key
+            })`}
+            updatedAt={formatDate(note.updatedAt)}
+            createdAt={formatDate(note.createdAt)}
+            exportAsMd={this.exportAsMd}
+            exportAsTxt={this.exportAsTxt}
+            exportAsHtml={this.exportAsHtml}
+            exportAsPdf={this.exportAsPdf}
+            wordCount={note.content.trim().split(/\s+/g).length}
+            letterCount={note.content.replace(/\r?\n/g, '').length}
+            type={note.type}
+            print={this.print}
+          />
+        </div>
       </div>
-    </div>
+    )
 
     return (
-      <div className='NoteDetail'
+      <div
+        className='NoteDetail'
         style={this.props.style}
         styleName='root'
+        onKeyDown={e => this.handleKeyDown(e)}
       >
-
         {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
 
-        <div styleName='body'>
-          {this.renderEditor()}
-        </div>
+        <div styleName='body'>{this.renderEditor()}</div>
 
         <StatusBar
           {..._.pick(this.props, ['config', 'location', 'dispatch'])}
@@ -439,9 +622,7 @@ class MarkdownNoteDetail extends React.Component {
 MarkdownNoteDetail.propTypes = {
   dispatch: PropTypes.func,
   repositories: PropTypes.array,
-  note: PropTypes.shape({
-
-  }),
+  note: PropTypes.shape({}),
   style: PropTypes.shape({
     left: PropTypes.number
   }),

browser/main/Detail/MarkdownNoteDetail.styl

@@ -15,7 +15,7 @@
 .control-lockButton
   topBarButtonRight()
   position absolute
-  right 225px
+  right 265px
   &:hover .tooltip
     opacity 1
 
@@ -66,13 +66,14 @@ body[data-theme="dark"]
   .control-fullScreenButton
     topBarButtonDark()
 
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      border-left 1px solid get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
 
-body[data-theme="solarized-dark"]
-  .root
-    border-left 1px solid $ui-solarized-dark-borderColor
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)
 
-body[data-theme="monokai"]
-  .root
-    border-left 1px solid $ui-monokai-borderColor
-    background-color $ui-monokai-noteDetail-backgroundColor
+for theme in $themes
+  apply-theme(theme)

browser/main/Detail/NoteDetailInfo.styl

@@ -13,6 +13,15 @@ $info-margin-under-border = 30px
   display flex
   align-items center
   padding 0 20px
+  z-index 99
+
+.info > div
+  > button
+    -webkit-user-drag none
+    user-select none
+    > img, span
+      -webkit-user-drag none
+      user-select none
 
 .info-left
   padding 0 10px
@@ -93,12 +102,14 @@ body[data-theme="dark"]
   .undo-button
     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
+apply-theme(theme)
+  body[data-theme={theme}]
+    .info
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/main/Detail/PermanentDeleteButton.js

@@ -4,13 +4,9 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './TrashButton.styl'
 import i18n from 'browser/lib/i18n'
 
-const PermanentDeleteButton = ({
-  onClick
-}) => (
-  <button styleName='control-trashButton--in-trash'
-    onClick={(e) => onClick(e)}
-  >
-    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+const PermanentDeleteButton = ({ onClick }) => (
+  <button styleName='control-trashButton--in-trash' onClick={e => onClick(e)}>
+    <img src='../resources/icon/icon-trash.svg' />
     <span styleName='tooltip'>{i18n.__('Permanent Delete')}</span>
   </button>
 )

browser/main/Detail/RestoreButton.js

@@ -4,12 +4,8 @@ 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}
-  >
+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>

browser/main/Detail/SnippetNoteDetail.styl

@@ -31,7 +31,7 @@
 
 .tabList
   absolute left right
-  top 55px
+  top 70px
   height 30px
   display flex
   background-color $ui-noteDetail-backgroundColor
@@ -57,6 +57,9 @@
 .tabList .tabButton
   navWhiteButtonColor()
   width 30px
+  border-left 1px solid $ui-borderColor
+  border-top 1px solid $ui-borderColor
+  border-right 1px solid $ui-borderColor
 
 .tabView
   absolute left right bottom
@@ -98,17 +101,34 @@
   opacity 0
   transition 0.1s
 
-body[data-theme="white"]
+body[data-theme="white"], body[data-theme="default"]
   .root
     box-shadow $note-detail-box-shadow
     border none
 
+  .tabButton
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 20%)
+      color $ui-text-color
+      transition 0.15s
+
 body[data-theme="dark"]
   .root
     border-left 1px solid $ui-dark-borderColor
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
 
+  .tabList .tabButton
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+
+  .tabButton
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
+      transition 0.15s
+
   .body
     background-color $ui-dark-noteDetail-backgroundColor
 
@@ -118,7 +138,6 @@ body[data-theme="dark"]
     border 1px solid $ui-dark-borderColor
 
   .tabList
-    background-color $ui-button--active-backgroundColor
     background-color $ui-dark-noteDetail-backgroundColor
 
   .tabList .list
@@ -137,36 +156,35 @@ 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
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      border-left 1px solid get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
 
-  .body
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    .body
+      background-color get-theme-var(theme, '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
+    .body .description textarea
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+      color get-theme-var(theme, 'text-color')
+      border 1px solid get-theme-var(theme, 'borderColor')
 
-  .tabList
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
-    color $ui-solarized-dark-text-color
+    .tabList .tabButton
+      border-color get-theme-var(theme, 'borderColor')
 
-body[data-theme="monokai"]
-  .root
-    border-left 1px solid $ui-monokai-borderColor
-    background-color $ui-monokai-noteDetail-backgroundColor
+    .tabButton
+      &:hover
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+        transition 0.15s
 
-  .body
-    background-color $ui-monokai-noteDetail-backgroundColor
+    .tabList
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+      color get-theme-var(theme, 'text-color')
 
-  .body .description textarea
-    background-color $ui-monokai-noteDetail-backgroundColor
-    color $ui-monokai-text-color
-    border 1px solid $ui-monokai-borderColor
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)
 
-  .tabList
-    background-color $ui-monokai-noteDetail-backgroundColor
-    color $ui-monokai-text-color
+for theme in $themes
+  apply-theme(theme)