Merge branch 'master' into mojave-dark-mode

.editorconfig

@@ -1,4 +1,4 @@
-# EditorConfig is awesome: http://EditorConfig.org
+# EditorConfig is awesome: https://EditorConfig.org
 
 # top-most EditorConfig file
 root = true

.travis.yml

@@ -1,10 +1,10 @@
 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

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

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,68 @@
+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

@@ -6,6 +6,8 @@ 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) {
@@ -18,10 +20,10 @@ 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()
@@ -30,6 +32,7 @@ class MarkdownEditor extends React.Component {
   componentDidMount () {
     this.value = this.refs.code.value
     eventEmitter.on('editor:lock', this.lockEditorCode)
+    eventEmitter.on('editor:focus', this.focusEditor.bind(this))
   }
 
   componentDidUpdate () {
@@ -45,6 +48,15 @@ class MarkdownEditor extends React.Component {
   componentWillUnmount () {
     this.cancelQueue()
     eventEmitter.off('editor:lock', this.lockEditorCode)
+    eventEmitter.off('editor:focus', this.focusEditor.bind(this))
+  }
+
+  focusEditor () {
+    this.setState({
+      status: 'CODE'
+    }, () => {
+      this.refs.code.focus()
+    })
   }
 
   queueRendering (value) {
@@ -64,17 +76,20 @@ class MarkdownEditor extends React.Component {
     })
   }
 
+  setValue (value) {
+    this.refs.code.setValue(value)
+  }
+
   handleChange (e) {
     this.value = this.refs.code.value
     this.props.onChange(e)
   }
 
   handleContextMenu (e) {
+    if (this.state.isLocked) return
     const { config } = this.props
     if (config.editor.switchPreview === 'RIGHTCLICK') {
-      const newStatus = this.state.status === 'PREVIEW'
-        ? 'CODE'
-        : 'PREVIEW'
+      const newStatus = this.state.status === 'PREVIEW' ? 'CODE' : 'PREVIEW'
       this.setState({
         status: newStatus
       }, () => {
@@ -84,6 +99,10 @@ class MarkdownEditor extends React.Component {
           this.refs.preview.focus()
         }
         eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+
+        const newConfig = Object.assign({}, config)
+        newConfig.editor.delfaultStatus = newStatus
+        ConfigManager.set(newConfig)
       })
     }
   }
@@ -140,8 +159,10 @@ class MarkdownEditor extends React.Component {
     e.preventDefault()
     e.stopPropagation()
     const idMatch = /checkbox-([0-9]+)/
-    const checkedMatch = /\[x\]/i
-    const uncheckedMatch = /\[ \]/
+    const checkedMatch = /^\s*[\+\-\*] \[x\]/i
+    const uncheckedMatch = /^\s*[\+\-\*] \[ \]/
+    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
@@ -150,10 +171,10 @@ class MarkdownEditor extends React.Component {
       const targetLine = lines[lineIndex]
 
       if (targetLine.match(checkedMatch)) {
-        lines[lineIndex] = targetLine.replace(checkedMatch, '[ ]')
+        lines[lineIndex] = targetLine.replace(checkReplace, '[ ]')
       }
       if (targetLine.match(uncheckedMatch)) {
-        lines[lineIndex] = targetLine.replace(uncheckedMatch, '[x]')
+        lines[lineIndex] = targetLine.replace(uncheckReplace, '[x]')
       }
       this.refs.code.setValue(lines.join('\n'))
     }
@@ -212,6 +233,28 @@ class MarkdownEditor extends React.Component {
     this.refs.code.editor.replaceSelection(`${mdElement}${this.refs.code.editor.getSelection()}${mdElement}`)
   }
 
+  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)
@@ -223,7 +266,7 @@ class MarkdownEditor extends React.Component {
   }
 
   render () {
-    const {className, value, config, storageKey, noteKey} = this.props
+    const {className, value, config, storageKey, noteKey, linesHighlighted} = this.props
 
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
@@ -261,13 +304,21 @@ class MarkdownEditor extends React.Component {
           enableRulers={config.editor.enableRulers}
           rulers={config.editor.rulers}
           displayLineNumbers={config.editor.displayLineNumbers}
+          matchingPairs={config.editor.matchingPairs}
+          matchingTriples={config.editor.matchingTriples}
+          explodingPairs={config.editor.explodingPairs}
           scrollPastEnd={config.editor.scrollPastEnd}
           storageKey={storageKey}
           noteKey={noteKey}
           fetchUrlTitle={config.editor.fetchUrlTitle}
           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}
         />
         <MarkdownPreview styleName={this.state.status === 'PREVIEW'
             ? 'preview'
@@ -300,6 +351,8 @@ class MarkdownEditor extends React.Component {
           noteKey={noteKey}
           customCSS={config.preview.customCSS}
           allowCustomCSS={config.preview.allowCustomCSS}
+          lineThroughCheckbox={config.preview.lineThroughCheckbox}
+          onDrop={(e) => this.handleDropImage(e)}
         />
       </div>
     )

browser/components/MarkdownPreview.js

@@ -8,7 +8,7 @@ import consts from 'browser/lib/consts'
 import Raphael from 'raphael'
 import flowchart from 'flowchart'
 import mermaidRender from './render/MermaidRender'
-import SequenceDiagram from 'js-sequence-diagrams'
+import SequenceDiagram from '@rokt33r/js-sequence-diagrams'
 import Chart from 'chart.js'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import htmlTextHelper from 'browser/lib/htmlTextHelper'
@@ -17,9 +17,13 @@ import copy from 'copy-to-clipboard'
 import mdurl from 'mdurl'
 import exportNote from 'browser/main/lib/dataApi/exportNote'
 import { escapeHtmlCharacters } from 'browser/lib/utils'
+import yaml from 'js-yaml'
 import context from 'browser/lib/context'
 import i18n from 'browser/lib/i18n'
 import fs from 'fs'
+import { render } from 'react-dom'
+import Carousel from 'react-image-carousel'
+import ConfigManager from '../main/lib/ConfigManager'
 
 const { remote, shell } = require('electron')
 const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
@@ -38,7 +42,8 @@ const appPath = fileUrl(
 )
 const CSS_FILES = [
   `${appPath}/node_modules/katex/dist/katex.min.css`,
-  `${appPath}/node_modules/codemirror/lib/codemirror.css`
+  `${appPath}/node_modules/codemirror/lib/codemirror.css`,
+  `${appPath}/node_modules/react-image-carousel/lib/css/main.min.css`
 ]
 
 function buildStyle (
@@ -80,7 +85,6 @@ function buildStyle (
        url('${appPath}/resources/fonts/MaterialIcons-Regular.woff') format('woff'),
        url('${appPath}/resources/fonts/MaterialIcons-Regular.ttf') format('truetype');
 }
-${allowCustomCSS ? customCSS : ''}
 ${markdownStyle}
 
 body {
@@ -88,6 +92,11 @@ body {
   font-size: ${fontSize}px;
   ${scrollPastEnd && 'padding-bottom: 90vh;'}
 }
+@media print {
+  body {
+    padding-bottom: initial;
+  }
+}
 code {
   font-family: '${codeBlockFontFamily.join("','")}';
   background-color: rgba(0,0,0,0.04);
@@ -144,6 +153,8 @@ body p {
     display: none
   }
 }
+
+${allowCustomCSS ? customCSS : ''}
 `
 }
 
@@ -181,6 +192,19 @@ const defaultCodeBlockFontFamily = [
   'source-code-pro',
   'monospace'
 ]
+
+// return the line number of the line that used to generate the specified element
+// return -1 if the line is not found
+function getSourceLineNumberByElement (element) {
+  let isHasLineNumber = element.dataset.line !== undefined
+  let parent = element
+  while (!isHasLineNumber && parent.parentElement !== null) {
+    parent = parent.parentElement
+    isHasLineNumber = parent.dataset.line !== undefined
+  }
+  return parent.dataset.line !== undefined ? parseInt(parent.dataset.line) : -1
+}
+
 export default class MarkdownPreview extends React.Component {
   constructor (props) {
     super(props)
@@ -197,9 +221,10 @@ export default class MarkdownPreview extends React.Component {
     this.saveAsTextHandler = () => this.handleSaveAsText()
     this.saveAsMdHandler = () => this.handleSaveAsMd()
     this.saveAsHtmlHandler = () => this.handleSaveAsHtml()
+    this.saveAsPdfHandler = () => this.handleSaveAsPdf()
     this.printHandler = () => this.handlePrint()
 
-    this.linkClickHandler = this.handlelinkClick.bind(this)
+    this.linkClickHandler = this.handleLinkClick.bind(this)
     this.initMarkdown = this.initMarkdown.bind(this)
     this.initMarkdown()
   }
@@ -256,14 +281,28 @@ export default class MarkdownPreview extends React.Component {
   }
 
   handleMouseDown (e) {
-    if (e.target != null) {
-      switch (e.target.tagName) {
-        case 'A':
-        case 'INPUT':
-          return null
+    const config = ConfigManager.get()
+    const clickElement = e.target
+    const targetTag = clickElement.tagName // The direct parent HTML of where was clicked ie "BODY" or "DIV"
+    const lineNumber = getSourceLineNumberByElement(clickElement) // Line location of element clicked.
+
+    if (config.editor.switchPreview === 'RIGHTCLICK' && e.buttons === 2 && config.editor.type === 'SPLIT') {
+      eventEmitter.emit('topbar:togglemodebutton', 'CODE')
+    }
+    if (e.ctrlKey) {
+      if (config.editor.type === 'SPLIT') {
+        if (lineNumber !== -1) {
+          eventEmitter.emit('line:jump', lineNumber)
+        }
+      } else {
+        if (lineNumber !== -1) {
+          eventEmitter.emit('editor:focus')
+          eventEmitter.emit('line:jump', lineNumber)
+        }
       }
     }
-    if (this.props.onMouseDown != null) this.props.onMouseDown(e)
+
+    if (this.props.onMouseDown != null && targetTag === 'BODY') this.props.onMouseDown(e)
   }
 
   handleMouseUp (e) {
@@ -279,97 +318,80 @@ export default class MarkdownPreview extends React.Component {
   }
 
   handleSaveAsMd () {
-    this.exportAsDocument('md', (noteContent, exportTasks) => {
-      let result = noteContent
-      if (this.props && this.props.storagePath && this.props.noteKey) {
-        const attachmentsAbsolutePaths = attachmentManagement.getAbsolutePathsOfAttachmentsInContent(
-          noteContent,
-          this.props.storagePath
-        )
-        attachmentsAbsolutePaths.forEach(attachment => {
-          exportTasks.push({
-            src: attachment,
-            dst: attachmentManagement.DESTINATION_FOLDER
-          })
-        })
-        result = attachmentManagement.removeStorageAndNoteReferences(
-          noteContent,
-          this.props.noteKey
-        )
+    this.exportAsDocument('md')
+  }
+
+  htmlContentFormatter (noteContent, exportTasks, targetDir) {
+    const {
+      fontFamily,
+      fontSize,
+      codeBlockFontFamily,
+      lineNumber,
+      codeBlockTheme,
+      scrollPastEnd,
+      theme,
+      allowCustomCSS,
+      customCSS
+    } = this.getStyleParams()
+
+    const inlineStyles = buildStyle(
+      fontFamily,
+      fontSize,
+      codeBlockFontFamily,
+      lineNumber,
+      scrollPastEnd,
+      theme,
+      allowCustomCSS,
+      customCSS
+    )
+    let body = this.markdown.render(noteContent)
+    const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
+    files.forEach(file => {
+      if (global.process.platform === 'win32') {
+        file = file.replace('file:///', '')
+      } else {
+        file = file.replace('file://', '')
       }
-      return result
+      exportTasks.push({
+        src: file,
+        dst: 'css'
+      })
     })
+
+    let styles = ''
+    files.forEach(file => {
+      styles += `<link rel="stylesheet" href="css/${path.basename(file)}">`
+    })
+
+    return `<html>
+               <head>
+                 <base href="file://${targetDir}/">
+                 <meta charset="UTF-8">
+                 <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1">
+                 <style id="style">${inlineStyles}</style>
+                 ${styles}
+               </head>
+               <body>${body}</body>
+            </html>`
   }
 
   handleSaveAsHtml () {
-    this.exportAsDocument('html', (noteContent, exportTasks) => {
-      const {
-        fontFamily,
-        fontSize,
-        codeBlockFontFamily,
-        lineNumber,
-        codeBlockTheme,
-        scrollPastEnd,
-        theme,
-        allowCustomCSS,
-        customCSS
-      } = this.getStyleParams()
+    this.exportAsDocument('html', (noteContent, exportTasks, targetDir) => Promise.resolve(this.htmlContentFormatter(noteContent, exportTasks, targetDir)))
+  }
 
-      const inlineStyles = buildStyle(
-        fontFamily,
-        fontSize,
-        codeBlockFontFamily,
-        lineNumber,
-        scrollPastEnd,
-        theme,
-        allowCustomCSS,
-        customCSS
-      )
-      let body = this.markdown.render(
-        escapeHtmlCharacters(noteContent, { detectCodeBlock: true })
-      )
-      const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
-      const attachmentsAbsolutePaths = attachmentManagement.getAbsolutePathsOfAttachmentsInContent(
-        noteContent,
-        this.props.storagePath
-      )
-
-      files.forEach(file => {
-        if (global.process.platform === 'win32') {
-          file = file.replace('file:///', '')
-        } else {
-          file = file.replace('file://', '')
-        }
-        exportTasks.push({
-          src: file,
-          dst: 'css'
+  handleSaveAsPdf () {
+    this.exportAsDocument('pdf', (noteContent, exportTasks, targetDir) => {
+      const printout = new remote.BrowserWindow({show: false, webPreferences: {webSecurity: false}})
+      printout.loadURL('data:text/html;charset=UTF-8,' + this.htmlContentFormatter(noteContent, exportTasks, targetDir))
+      return new Promise((resolve, reject) => {
+        printout.webContents.on('did-finish-load', () => {
+          printout.webContents.printToPDF({}, (err, data) => {
+            if (err) reject(err)
+            else resolve(data)
+            printout.destroy()
+          })
         })
       })
-      attachmentsAbsolutePaths.forEach(attachment => {
-        exportTasks.push({
-          src: attachment,
-          dst: attachmentManagement.DESTINATION_FOLDER
-        })
-      })
-      body = attachmentManagement.removeStorageAndNoteReferences(
-        body,
-        this.props.noteKey
-      )
-
-      let styles = ''
-      files.forEach(file => {
-        styles += `<link rel="stylesheet" href="css/${path.basename(file)}">`
-      })
-
-      return `<html>
-                 <head>
-                   <meta charset="UTF-8">
-                   <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1">
-                   <style id="style">${inlineStyles}</style>
-                   ${styles}
-                 </head>
-                 <body>${body}</body>
-              </html>`
     })
   }
 
@@ -387,8 +409,9 @@ export default class MarkdownPreview extends React.Component {
       if (filename) {
         const content = this.props.value
         const storage = this.props.storagePath
+        const nodeKey = this.props.noteKey
 
-        exportNote(storage, content, filename, contentFormatter)
+        exportNote(nodeKey, storage, content, filename, contentFormatter)
           .then(res => {
             dialog.showMessageBox(remote.getCurrentWindow(), {
               type: 'info',
@@ -418,6 +441,31 @@ export default class MarkdownPreview extends React.Component {
     }
   }
 
+  /**
+   * @description Convert special characters between three ```
+   * @param {string[]} splitWithCodeTag Array of HTML strings separated by three ```
+   * @returns {string} HTML in which special characters between three ``` have been converted
+   */
+  escapeHtmlCharactersInCodeTag (splitWithCodeTag) {
+    for (let index = 0; index < splitWithCodeTag.length; index++) {
+      const codeTagRequired = (splitWithCodeTag[index] !== '\`\`\`' && index < splitWithCodeTag.length - 1)
+      if (codeTagRequired) {
+        splitWithCodeTag.splice((index + 1), 0, '\`\`\`')
+      }
+    }
+    let inCodeTag = false
+    let result = ''
+    for (let content of splitWithCodeTag) {
+      if (content === '\`\`\`') {
+        inCodeTag = !inCodeTag
+      } else if (inCodeTag) {
+        content = escapeHtmlCharacters(content)
+      }
+      result += content
+    }
+    return result
+  }
+
   getScrollBarStyle () {
     const { theme } = this.props
 
@@ -433,6 +481,8 @@ export default class MarkdownPreview extends React.Component {
   }
 
   componentDidMount () {
+    const { onDrop } = this.props
+
     this.refs.root.setAttribute('sandbox', 'allow-scripts')
     this.refs.root.contentWindow.document.body.addEventListener(
       'contextmenu',
@@ -470,7 +520,7 @@ export default class MarkdownPreview extends React.Component {
     )
     this.refs.root.contentWindow.document.addEventListener(
       'drop',
-      this.preventImageDroppedHandler
+      onDrop || this.preventImageDroppedHandler
     )
     this.refs.root.contentWindow.document.addEventListener(
       'dragover',
@@ -483,14 +533,13 @@ export default class MarkdownPreview extends React.Component {
     eventEmitter.on('export:save-text', this.saveAsTextHandler)
     eventEmitter.on('export:save-md', this.saveAsMdHandler)
     eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
+    eventEmitter.on('export:save-pdf', this.saveAsPdfHandler)
     eventEmitter.on('print', this.printHandler)
-    eventEmitter.on('config-renew', () => {
-      this.markdown.updateConfig()
-      this.rewriteIframe()
-    })
   }
 
   componentWillUnmount () {
+    const { onDrop } = this.props
+
     this.refs.root.contentWindow.document.body.removeEventListener(
       'contextmenu',
       this.contextMenuHandler
@@ -509,7 +558,7 @@ export default class MarkdownPreview extends React.Component {
     )
     this.refs.root.contentWindow.document.removeEventListener(
       'drop',
-      this.preventImageDroppedHandler
+      onDrop || this.preventImageDroppedHandler
     )
     this.refs.root.contentWindow.document.removeEventListener(
       'dragover',
@@ -522,6 +571,7 @@ export default class MarkdownPreview extends React.Component {
     eventEmitter.off('export:save-text', this.saveAsTextHandler)
     eventEmitter.off('export:save-md', this.saveAsMdHandler)
     eventEmitter.off('export:save-html', this.saveAsHtmlHandler)
+    eventEmitter.off('export:save-pdf', this.saveAsPdfHandler)
     eventEmitter.off('print', this.printHandler)
   }
 
@@ -531,7 +581,8 @@ export default class MarkdownPreview extends React.Component {
       prevProps.smartQuotes !== this.props.smartQuotes ||
       prevProps.sanitize !== this.props.sanitize ||
       prevProps.smartArrows !== this.props.smartArrows ||
-      prevProps.breaks !== this.props.breaks
+      prevProps.breaks !== this.props.breaks ||
+      prevProps.lineThroughCheckbox !== this.props.lineThroughCheckbox
     ) {
       this.initMarkdown()
       this.rewriteIframe()
@@ -651,11 +702,16 @@ export default class MarkdownPreview extends React.Component {
       indentSize,
       showCopyNotification,
       storagePath,
-      noteKey
+      noteKey,
+      sanitize
     } = this.props
     let { value, codeBlockTheme } = this.props
 
     this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
+    if (sanitize === 'NONE') {
+      const splitWithCodeTag = value.split('```')
+      value = this.escapeHtmlCharactersInCodeTag(splitWithCodeTag)
+    }
     const renderedHTML = this.markdown.render(value)
     attachmentManagement.migrateAttachments(value, storagePath, noteKey)
     this.refs.root.contentWindow.document.body.innerHTML = attachmentManagement.fixLocalURLS(
@@ -694,6 +750,8 @@ export default class MarkdownPreview extends React.Component {
           copyIcon.innerHTML =
             '<button class="clipboardButton"><svg width="13" height="13" viewBox="0 0 1792 1792" ><path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/></svg></button>'
           copyIcon.onclick = e => {
+            e.preventDefault()
+            e.stopPropagation()
             copy(content)
             if (showCopyNotification) {
               this.notify('Saved to Clipboard!', {
@@ -737,7 +795,6 @@ export default class MarkdownPreview extends React.Component {
             el.addEventListener('click', this.linkClickHandler)
           })
         } catch (e) {
-          console.error(e)
           el.className = 'flowchart-error'
           el.innerHTML = 'Flowchart parse error: ' + e.message
         }
@@ -758,7 +815,6 @@ export default class MarkdownPreview extends React.Component {
             el.addEventListener('click', this.linkClickHandler)
           })
         } catch (e) {
-          console.error(e)
           el.className = 'sequence-error'
           el.innerHTML = 'Sequence diagram parse error: ' + e.message
         }
@@ -769,14 +825,21 @@ export default class MarkdownPreview extends React.Component {
       this.refs.root.contentWindow.document.querySelectorAll('.chart'),
       el => {
         try {
-          const chartConfig = JSON.parse(el.innerHTML)
+          const format = el.attributes.getNamedItem('data-format').value
+          const chartConfig = format === 'yaml' ? yaml.load(el.innerHTML) : JSON.parse(el.innerHTML)
           el.innerHTML = ''
-          var canvas = document.createElement('canvas')
+
+          const canvas = document.createElement('canvas')
           el.appendChild(canvas)
-          /* eslint-disable no-new */
-          new Chart(canvas, chartConfig)
+
+          const height = el.attributes.getNamedItem('data-height')
+          if (height && height.value !== 'undefined') {
+            el.style.height = height.value + 'vh'
+            canvas.height = height.value + 'vh'
+          }
+
+          const chart = new Chart(canvas, chartConfig)
         } catch (e) {
-          console.error(e)
           el.className = 'chart-error'
           el.innerHTML = 'chartjs diagram parse error: ' + e.message
         }
@@ -788,6 +851,109 @@ export default class MarkdownPreview extends React.Component {
         mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme)
       }
     )
+
+    _.forEach(
+      this.refs.root.contentWindow.document.querySelectorAll('.gallery'),
+      el => {
+        const images = el.innerHTML.split(/\n/g).filter(i => i.length > 0)
+        el.innerHTML = ''
+
+        const height = el.attributes.getNamedItem('data-height')
+        if (height && height.value !== 'undefined') {
+          el.style.height = height.value + 'vh'
+        }
+
+        let autoplay = el.attributes.getNamedItem('data-autoplay')
+        if (autoplay && autoplay.value !== 'undefined') {
+          autoplay = parseInt(autoplay.value, 10) || 0
+        } else {
+          autoplay = 0
+        }
+
+        render(
+          <Carousel
+            images={images}
+            autoplay={autoplay}
+          />,
+          el
+        )
+      }
+    )
+
+    const markdownPreviewIframe = document.querySelector('.MarkdownPreview')
+    const rect = markdownPreviewIframe.getBoundingClientRect()
+    const imgList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll('img')
+    for (const img of imgList) {
+      img.onclick = () => {
+        const widthMagnification = document.body.clientWidth / img.width
+        const heightMagnification = document.body.clientHeight / img.height
+        const baseOnWidth = widthMagnification < heightMagnification
+        const magnification = baseOnWidth ? widthMagnification : heightMagnification
+
+        const zoomImgWidth = img.width * magnification
+        const zoomImgHeight = img.height * magnification
+        const zoomImgTop = (document.body.clientHeight - zoomImgHeight) / 2
+        const zoomImgLeft = (document.body.clientWidth - zoomImgWidth) / 2
+        const originalImgTop = img.y + rect.top
+        const originalImgLeft = img.x + rect.left
+        const originalImgRect = {
+          top: `${originalImgTop}px`,
+          left: `${originalImgLeft}px`,
+          width: `${img.width}px`,
+          height: `${img.height}px`
+        }
+        const zoomInImgRect = {
+          top: `${baseOnWidth ? zoomImgTop : 0}px`,
+          left: `${baseOnWidth ? 0 : zoomImgLeft}px`,
+          width: `${zoomImgWidth}px`,
+          height: `${zoomImgHeight}px`
+        }
+        const animationSpeed = 300
+
+        const zoomImg = document.createElement('img')
+        zoomImg.src = img.src
+        zoomImg.style = `
+          position: absolute;
+          top: ${baseOnWidth ? zoomImgTop : 0}px;
+          left: ${baseOnWidth ? 0 : zoomImgLeft}px;
+          width: ${zoomImgWidth};
+          height: ${zoomImgHeight}px;
+          `
+        zoomImg.animate([
+          originalImgRect,
+          zoomInImgRect
+        ], animationSpeed)
+
+        const overlay = document.createElement('div')
+        overlay.style = `
+          background-color: rgba(0,0,0,0.5);
+          cursor: zoom-out;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: ${document.body.clientHeight}px;
+          z-index: 100;
+        `
+        overlay.onclick = () => {
+          zoomImg.style = `
+            position: absolute;
+            top: ${originalImgTop}px;
+            left: ${originalImgLeft}px;
+            width: ${img.width}px;
+            height: ${img.height}px;
+            `
+          const zoomOutImgAnimation = zoomImg.animate([
+            zoomInImgRect,
+            originalImgRect
+          ], animationSpeed)
+          zoomOutImgAnimation.onfinish = () => overlay.remove()
+        }
+
+        overlay.appendChild(zoomImg)
+        document.body.appendChild(overlay)
+      }
+    }
   }
 
   focus () {
@@ -830,7 +996,7 @@ export default class MarkdownPreview extends React.Component {
     return new window.Notification(title, options)
   }
 
-  handlelinkClick (e) {
+  handleLinkClick (e) {
     e.preventDefault()
     e.stopPropagation()
 
@@ -860,6 +1026,15 @@ export default class MarkdownPreview extends React.Component {
       return
     }
 
+    const regexIsLine = /^:line:[0-9]/
+    if (regexIsLine.test(linkHash)) {
+      const numberPattern = /\d+/g
+
+      const lineNumber = parseInt(linkHash.match(numberPattern)[0])
+      eventEmitter.emit('line:jump', lineNumber)
+      return
+    }
+
     // this will match the old link format storage.key-note.key
     // e.g.
     // 877f99c3268608328037-1c211eb7dcb463de6490

browser/components/MarkdownSplitEditor.js

@@ -20,12 +20,18 @@ class MarkdownSplitEditor extends React.Component {
     }
   }
 
-  handleOnChange () {
+  setValue (value) {
+    this.refs.code.setValue(value)
+  }
+
+  handleOnChange (e) {
     this.value = this.refs.code.value
-    this.props.onChange()
+    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
@@ -72,8 +78,10 @@ class MarkdownSplitEditor extends React.Component {
     e.preventDefault()
     e.stopPropagation()
     const idMatch = /checkbox-([0-9]+)/
-    const checkedMatch = /\[x\]/i
-    const uncheckedMatch = /\[ \]/
+    const checkedMatch = /^\s*[\+\-\*] \[x\]/i
+    const uncheckedMatch = /^\s*[\+\-\*] \[ \]/
+    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
@@ -82,10 +90,10 @@ class MarkdownSplitEditor extends React.Component {
       const targetLine = lines[lineIndex]
 
       if (targetLine.match(checkedMatch)) {
-        lines[lineIndex] = targetLine.replace(checkedMatch, '[ ]')
+        lines[lineIndex] = targetLine.replace(checkReplace, '[ ]')
       }
       if (targetLine.match(uncheckedMatch)) {
-        lines[lineIndex] = targetLine.replace(uncheckedMatch, '[x]')
+        lines[lineIndex] = targetLine.replace(uncheckReplace, '[x]')
       }
       this.refs.code.setValue(lines.join('\n'))
     }
@@ -128,7 +136,7 @@ class MarkdownSplitEditor extends React.Component {
   }
 
   render () {
-    const {config, value, storageKey, noteKey} = this.props
+    const {config, value, storageKey, noteKey, linesHighlighted} = this.props
     const storage = findStorage(storageKey)
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
@@ -152,6 +160,9 @@ class MarkdownSplitEditor extends React.Component {
           fontFamily={config.editor.fontFamily}
           fontSize={editorFontSize}
           displayLineNumbers={config.editor.displayLineNumbers}
+          matchingPairs={config.editor.matchingPairs}
+          matchingTriples={config.editor.matchingTriples}
+          explodingPairs={config.editor.explodingPairs}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
           enableRulers={config.editor.enableRulers}
@@ -161,8 +172,13 @@ class MarkdownSplitEditor extends React.Component {
           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)}
+          spellCheck={config.editor.spellcheck}
+          enableSmartPaste={config.editor.enableSmartPaste}
+          hotkey={config.hotkey}
+          switchPreview={config.editor.switchPreview}
        />
         <div styleName='slider' style={{left: this.state.codeEditorWidthInPercent + '%'}} onMouseDown={e => this.handleMouseDown(e)} >
           <div styleName='slider-hitbox' />
@@ -192,6 +208,7 @@ class MarkdownSplitEditor extends React.Component {
           noteKey={noteKey}
           customCSS={config.preview.customCSS}
           allowCustomCSS={config.preview.allowCustomCSS}
+          lineThroughCheckbox={config.preview.lineThroughCheckbox}
        />
       </div>
     )

browser/components/NavToggleButton.js

@@ -16,8 +16,8 @@ const NavToggleButton = ({isFolded, handleToggleButtonClick}) => (
     onClick={(e) => handleToggleButtonClick(e)}
   >
     {isFolded
-     ? <i className='fa fa-angle-double-right' />
-     : <i className='fa fa-angle-double-left' />
+     ? <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;

browser/components/NoteItem.js

@@ -4,6 +4,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { isArray } from 'lodash'
+import invertColor from 'invert-color'
 import CSSModules from 'browser/lib/CSSModules'
 import { getTodoStatus } from 'browser/lib/getTodoStatus'
 import styles from './NoteItem.styl'
@@ -13,27 +14,39 @@ 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] }))
+  }
 }
 
 /**
@@ -43,6 +56,7 @@ const TagElementList = tags => {
  * @param {Function} handleNoteClick
  * @param {Function} handleNoteContextMenu
  * @param {Function} handleDragStart
+ * @param {Object} coloredTags
  * @param {string} dateDisplay
  */
 const NoteItem = ({
@@ -55,7 +69,9 @@ const NoteItem = ({
   pathname,
   storageName,
   folderName,
-  viewType
+  viewType,
+  showTagsAlphabetically,
+  coloredTags
 }) => (
   <div
     styleName={isActive ? 'item--active' : 'item'}
@@ -93,7 +109,7 @@ const NoteItem = ({
       <div styleName='item-bottom'>
         <div styleName='item-bottom-tagList'>
           {note.tags.length > 0
-            ? TagElementList(note.tags)
+            ? TagElementList(note.tags, showTagsAlphabetically, coloredTags)
             : <span
               style={{ fontStyle: 'italic', opacity: 0.5 }}
               styleName='item-bottom-tagList-empty'
@@ -123,6 +139,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,

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,76 +61,66 @@
   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
+    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
 
   .button
     border none
-    color $ui-dark-text-color
     background-color transparent
     transition color background-color 0.15s
     border-left 4px solid transparent
-    &:hover
-      color $ui-dark-text-color
-      background-color $ui-dark-button--hover-backgroundColor
 
   .input
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color $ui-dark-button--active-backgroundColor
     color $ui-dark-text-color
-
-  .deleteButton
-    color alpha($ui-dark-text-color, 30%)
+    transition 0.15s
 
 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
+      transition 0.15s
       .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
+        color $ui-solarized-dark-button--active-color
+        transition 0.15s
+      .button
+        color $ui-solarized-dark-button--active-color
+        transition 0.15s
+
+  .root--active
+    color $ui-solarized-dark-button--active-color
+    background-color $ui-solarized-dark-button-backgroundColor
+    border-color $ui-solarized-dark-borderColor
+    .deleteButton
+      color $ui-solarized-dark-button--active-color
+    .button
+      color $ui-solarized-dark-button--active-color
 
   .button
     border none
@@ -127,101 +128,75 @@ body[data-theme="solarized-dark"]
     background-color transparent
     transition color background-color 0.15s
     border-left 4px solid transparent
-    &:hover
-      color $ui-solarized-dark-text-color
-      background-color $ui-solarized-dark-noteDetail-backgroundColor
 
   .input
     background-color $ui-solarized-dark-noteDetail-backgroundColor
-    color $ui-solarized-dark-text-color
-
-  .deleteButton
-    color alpha($ui-solarized-dark-text-color, 30%)
+    color $ui-solarized-dark-button--active-color
+    transition 0.15s
 
 body[data-theme="monokai"]
   .root
-    color $ui-monokai-text-color
-    border-color $ui-dark-borderColor
-    &:hover
-      background-color $ui-monokai-noteDetail-backgroundColor
-      .deleteButton
-        color $ui-monokai-text-color
-        &:hover
-          background-color darken($ui-monokai-noteDetail-backgroundColor, 15%)
-        &:active
-          color $ui-monokai-text-color
-          background-color $ui-dark-button--active-backgroundColor
-
-  .root--active
-    color $ui-monokai-text-color
     border-color $ui-monokai-borderColor
     &:hover
       background-color $ui-monokai-noteDetail-backgroundColor
+      transition 0.15s
       .deleteButton
         color $ui-monokai-text-color
-        &:hover
-          background-color darken($ui-monokai-noteDetail-backgroundColor, 15%)
-        &:active
-          color $ui-monokai-text-color
-          background-color $ui-dark-button--active-backgroundColor
+        transition 0.15s
+      .button
+        color $ui-monokai-text-color
+        transition 0.15s
 
+  .root--active
+    color $ui-monokai-active-color
+    background-color $ui-monokai-button-backgroundColor
+    border-color $ui-monokai-borderColor
+    .deleteButton
+      color $ui-monokai-text-color
+    .button
+      color $ui-monokai-active-color
+        
   .button
     border none
-    color $ui-monokai-text-color
+    color $ui-inactive-text-color
     background-color transparent
     transition color background-color 0.15s
     border-left 4px solid transparent
-    &:hover
-      color $ui-monokai-text-color
-      background-color $ui-monokai-noteDetail-backgroundColor
 
   .input
     background-color $ui-monokai-noteDetail-backgroundColor
     color $ui-monokai-text-color
-
-  .deleteButton
-    color alpha($ui-monokai-text-color, 30%)
+    transition 0.15s
 
 body[data-theme="dracula"]
   .root
-    color $ui-dracula-text-color
-    border-color $ui-dark-borderColor
-    &:hover
-      background-color $ui-dracula-noteDetail-backgroundColor
-      .deleteButton
-        color $ui-dracula-text-color
-        &:hover
-          background-color darken($ui-dracula-noteDetail-backgroundColor, 15%)
-        &:active
-          color $ui-dracula-text-color
-          background-color $ui-dark-button--active-backgroundColor
-
-  .root--active
-    color $ui-dracula-text-color
     border-color $ui-dracula-borderColor
     &:hover
       background-color $ui-dracula-noteDetail-backgroundColor
+      transition 0.15s
       .deleteButton
         color $ui-dracula-text-color
-        &:hover
-          background-color darken($ui-dracula-noteDetail-backgroundColor, 15%)
-        &:active
-          color $ui-dracula-text-color
-          background-color $ui-dark-button--active-backgroundColor
+        transition 0.15s
+      .button
+        color $ui-dracula-text-color
+        transition 0.15s
+
+  .root--active
+    color $ui-dracula-text-color
+    background-color $ui-dracula-button-backgroundColor
+    border-color $ui-dracula-borderColor
+    .deleteButton
+      color $ui-dracula-text-color
+    .button
+      color $ui-dracula-active-color
 
   .button
     border none
-    color $ui-dracula-text-color
+    color $ui-inactive-text-color
     background-color transparent
     transition color background-color 0.15s
     border-left 4px solid transparent
-    &:hover
-      color $ui-dracula-text-color
-      background-color $ui-dracula-noteDetail-backgroundColor
 
   .input
     background-color $ui-dracula-noteDetail-backgroundColor
-    color $ui-dracula-text-color
-
-  .deleteButton
-    color alpha($ui-dracula-text-color, 30%)
+    color $ui-dracula-text-color

browser/components/StorageList.js

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

browser/components/TagListItem.js

@@ -10,12 +10,13 @@ import CSSModules from 'browser/lib/CSSModules'
 * @param {string} name
 * @param {Function} handleClickTagListItem
 * @param {Function} handleClickNarrowToTag
-* @param {bool} isActive
-* @param {bool} isRelated
+* @param {boolean} isActive
+* @param {boolean} isRelated
+* @param {string} bgColor tab backgroundColor
 */
 
-const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, isRelated, count}) => (
-  <div styleName='tagList-itemContainer'>
+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'} />
@@ -23,9 +24,10 @@ const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isAc
       : <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 +35,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

browser/components/TodoListPercentage.js

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

browser/components/TodoListPercentage.styl

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

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
@@ -162,6 +165,7 @@ p
   white-space pre-line
   word-wrap break-word
 img
+  cursor zoom-in
   max-width 100%
 strong, b
   font-weight bold
@@ -183,6 +187,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
@@ -209,41 +217,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
@@ -375,6 +381,69 @@ 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
+
+  .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
+
 themeDarkBackground = darken(#21252B, 10%)
 themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
@@ -425,6 +494,22 @@ 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
+
+  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
 
 themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor
 themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
@@ -452,6 +537,22 @@ body[data-theme="solarized-dark"]
         border-color themeSolarizedDarkTableBorder
         &:last-child
           border-right solid 1px themeSolarizedDarkTableBorder
+  dl
+    border-color themeDarkBorder
+    background-color themeSolarizedDarkTableHead
+  dt
+    border-color themeDarkBorder
+  dd
+    border-color themeDarkBorder
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+  pre.fence
+    .gallery
+      .carousel-main, .carousel-footer
+        background-color $ui-solarized-dark-noteDetail-backgroundColor
+      .prev, .next
+        color $ui-solarized-dark-button--active-color
+        background-color $ui-solarized-dark-button-backgroundColor
 
 themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
 themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
@@ -482,6 +583,23 @@ body[data-theme="monokai"]
   kbd
     background-color themeDarkBackground
 
+  dl
+    border-color themeDarkBorder
+    background-color themeMonokaiTableHead
+  dt
+    border-color themeDarkBorder
+  dd
+    border-color themeDarkBorder
+    background-color $ui-monokai-noteDetail-backgroundColor
+
+  pre.fence
+    .gallery
+      .carousel-main, .carousel-footer
+        background-color $ui-monokai-noteDetail-backgroundColor
+      .prev, .next
+        color $ui-monokai-button--active-color
+        background-color $ui-monokai-button-backgroundColor
+
 themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
 themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
 themeDraculaTableHead = themeDraculaTableEven
@@ -509,4 +627,21 @@ body[data-theme="dracula"]
         &:last-child
           border-right solid 1px themeDraculaTableBorder
   kbd
-    background-color themeDarkBackground
+    background-color themeDarkBackground
+
+  dl
+    border-color themeDarkBorder
+    background-color themeDraculaTableHead
+  dt
+    border-color themeDarkBorder
+  dd
+    border-color themeDarkBorder
+    background-color $ui-dracula-noteDetail-backgroundColor
+
+  pre.fence
+    .gallery
+      .carousel-main, .carousel-footer
+        background-color $ui-dracula-noteDetail-backgroundColor
+      .prev, .next
+        color $ui-dracula-button--active-color
+        background-color $ui-dracula-button-backgroundColor

browser/components/render/MermaidRender.js

@@ -11,9 +11,9 @@ function getRandomInt (min, max) {
 }
 
 function getId () {
-  var pool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
-  var id = 'm-'
-  for (var i = 0; i < 7; i++) {
+  const pool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
+  let id = 'm-'
+  for (let i = 0; i < 7; i++) {
     id += pool[getRandomInt(0, 16)]
   }
   return id
@@ -21,16 +21,20 @@ function getId () {
 
 function render (element, content, theme) {
   try {
-    let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
+    const height = element.attributes.getNamedItem('data-height')
+    if (height && height.value !== 'undefined') {
+      element.style.height = height.value + 'vh'
+    }
+    const isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
     mermaidAPI.initialize({
       theme: isDarkTheme ? 'dark' : 'default',
-      themeCSS: isDarkTheme ? darkThemeStyling : ''
+      themeCSS: isDarkTheme ? darkThemeStyling : '',
+      useMaxWidth: false
     })
     mermaidAPI.render(getId(), content, (svgGraph) => {
       element.innerHTML = svgGraph
     })
   } 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/Languages.js

@@ -48,8 +48,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',
@@ -61,6 +65,9 @@ const languages = [
   }, {
     name: 'Turkish',
     locale: 'tr'
+  }, {
+    name: 'Thai',
+    locale: 'th'
   }
 ]
 

browser/lib/SnippetManager.js

@@ -0,0 +1,91 @@
+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/contextMenuBuilder.js

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

browser/lib/findNoteTitle.js

@@ -1,4 +1,4 @@
-export function findNoteTitle (value) {
+export function findNoteTitle (value, enableFrontMatterTitle, frontMatterTitleField = 'title') {
   const splitted = value.split('\n')
   let title = null
   let isInsideCodeBlock = false
@@ -6,6 +6,11 @@ export function findNoteTitle (value) {
   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)
 
@@ -14,17 +19,19 @@ export function findNoteTitle (value) {
     }
   }
 
-  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) {
+    splitted.some((line, index) => {
+      const trimmedLine = line.trim()
+      const trimmedNextLine = splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()
+      if (trimmedLine.match('```')) {
+        isInsideCodeBlock = !isInsideCodeBlock
+      }
+      if (isInsideCodeBlock === false && (trimmedLine.match(/^# +/) || trimmedNextLine.match(/^=+$/))) {
+        title = trimmedLine
+        return true
+      }
+    })
+  }
 
   if (title === null) {
     title = ''

browser/lib/markdown-it-deflist.js

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

browser/lib/markdown-it-fence.js

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

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

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

browser/lib/markdown-toc-generator.js

@@ -2,49 +2,34 @@
  * @fileoverview Markdown table of contents generator
  */
 
+import { EOL } from 'os'
 import toc from 'markdown-toc'
-import diacritics from 'diacritics-map'
-import stripColor from 'strip-color'
+import mdlink from 'markdown-link'
+import slugify from './slugify'
 
-const EOL = require('os').EOL
+const hasProp = Object.prototype.hasOwnProperty
 
 /**
- * @caseSensitiveSlugify Custom slugify function
- * Same implementation that the original used by markdown-toc (node_modules/markdown-toc/lib/utils.js),
- * but keeps original case to properly handle https://github.com/BoostIO/Boostnote/issues/2067
+ * From @enyaxu/markdown-it-anchor
  */
-function caseSensitiveSlugify (str) {
-  function replaceDiacritics (str) {
-    return str.replace(/[À-ž]/g, function (ch) {
-      return diacritics[ch] || ch
-    })
-  }
+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 getTitle (str) {
-    if (/^\[[^\]]+\]\(/.test(str)) {
-      var m = /^\[([^\]]+)\]/.exec(str)
-      if (m) return m[1]
-    }
-    return str
-  }
-
-  str = getTitle(str)
-  str = stripColor(str)
-  // str = str.toLowerCase() //let's be case sensitive
-
-  // `.split()` is often (but not always) faster than `.replace()`
-  str = str.split(' ').join('-')
-  str = str.split(/\t/).join('--')
-  str = str.split(/<\/?[^>]+>/).join('')
-  str = str.split(/[|$&`~=\\\/@+*!?({[\]})<>=.,;:'"^]/).join('')
-  str = str.split(/[。？！，、；：“”【】（）〔〕［］﹃﹄“ ”‘’﹁﹂—…－～《》〈〉「」]/).join('')
-  str = replaceDiacritics(str)
-  return str
+function linkify (token) {
+  token.content = mdlink(token.content, '#' + 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.
@@ -52,12 +37,6 @@ const TOC_MARKER_END = '<!-- tocstop -->'
  * @param editor CodeMirror editor to be updated with TOC
  */
 export function generateInEditor (editor) {
-  const tocRegex = new RegExp(`${TOC_MARKER_START}[\\s\\S]*?${TOC_MARKER_END}`)
-
-  function tocExistsInEditor () {
-    return tocRegex.test(editor.getValue())
-  }
-
   function updateExistingToc () {
     const toc = generate(editor.getValue())
     const search = editor.getSearchCursor(tocRegex)
@@ -71,21 +50,40 @@ export function generateInEditor (editor) {
     editor.replaceRange(wrapTocWithEol(toc, editor), editor.getCursor())
   }
 
-  if (tocExistsInEditor()) {
+  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 generatedToc = toc(markdownText, {slugify: caseSensitiveSlugify})
-  return TOC_MARKER_START + EOL + EOL + generatedToc.content + EOL + EOL + TOC_MARKER_END
+  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) {
@@ -96,5 +94,6 @@ function wrapTocWithEol (toc, editor) {
 
 export default {
   generate,
-  generateInEditor
+  generateInEditor,
+  tocExistsInEditor
 }

browser/lib/markdown.js

@@ -7,7 +7,6 @@ import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import katex from 'katex'
 import { lastFindInArray } from './utils'
-import ee from 'browser/main/lib/eventEmitter'
 
 function createGutter (str, firstLineNumber) {
   if (Number.isNaN(firstLineNumber)) firstLineNumber = 1
@@ -21,39 +20,13 @@ function createGutter (str, firstLineNumber) {
 
 class Markdown {
   constructor (options = {}) {
-    let config = ConfigManager.get()
+    const config = ConfigManager.get()
     const defaultOptions = {
       typographer: config.preview.smartQuotes,
       linkify: true,
       html: true,
       xhtmlOut: true,
       breaks: config.preview.breaks,
-      highlight: function (str, lang) {
-        const delimiter = ':'
-        const langInfo = lang.split(delimiter)
-        const langType = langInfo[0]
-        const fileName = langInfo[1] || ''
-        const firstLineNumber = parseInt(langInfo[2], 10)
-
-        if (langType === 'flowchart') {
-          return `<pre class="flowchart">${str}</pre>`
-        }
-        if (langType === 'sequence') {
-          return `<pre class="sequence">${str}</pre>`
-        }
-        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'
     }
 
@@ -106,7 +79,11 @@ class Markdown {
           'iframe': ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
           'input': ['type', 'id', 'checked']
         },
-        allowedIframeHostnames: ['www.youtube.com']
+        allowedIframeHostnames: ['www.youtube.com'],
+        selfClosing: [ 'img', 'br', 'hr', 'input' ],
+        allowedSchemes: [ 'http', 'https', 'ftp', 'mailto' ],
+        allowedSchemesAppliedToAttributes: [ 'href', 'src', 'cite' ],
+        allowProtocolRelative: true
       })
     }
 
@@ -140,21 +117,71 @@ 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'), {types: ['note', 'hint', 'attention', 'caution', 'danger', 'error']})
+    this.md.use(require('markdown-it-abbr'))
+    this.md.use(require('markdown-it-sub'))
+    this.md.use(require('markdown-it-sup'))
+    this.md.use(require('./markdown-it-deflist'))
     this.md.use(require('./markdown-it-frontmatter'))
 
+    this.md.use(require('./markdown-it-fence'), {
+      chart: token => {
+        if (token.parameters.hasOwnProperty('yaml')) {
+          token.parameters.format = 'yaml'
+        }
+
+        return `<pre class="fence" data-line="${token.map[0]}">
+          <span class="filename">${token.fileName}</span>
+          <div class="chart" data-height="${token.parameters.height}" data-format="${token.parameters.format || 'json'}">${token.content}</div>
+        </pre>`
+      },
+      flowchart: token => {
+        return `<pre class="fence" data-line="${token.map[0]}">
+          <span class="filename">${token.fileName}</span>
+          <div class="flowchart" data-height="${token.parameters.height}">${token.content}</div>
+        </pre>`
+      },
+      gallery: token => {
+        const content = token.content.split('\n').slice(0, -1).map(line => {
+          const match = /!\[[^\]]*]\(([^\)]*)\)/.exec(line)
+          if (match) {
+            return match[1]
+          } else {
+            return 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'), '', {
+    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'
@@ -253,9 +280,12 @@ class Markdown {
     this.md.renderer.render = (tokens, options, env) => {
       tokens.forEach((token) => {
         switch (token.type) {
-          case 'heading_open':
-          case 'paragraph_open':
           case 'blockquote_open':
+          case 'dd_open':
+          case 'dt_open':
+          case 'heading_open':
+          case 'list_item_open':
+          case 'paragraph_open':
           case 'table_open':
             token.attrPush(['data-line', token.map[0]])
         }
@@ -265,9 +295,6 @@ class Markdown {
     }
     // FIXME We should not depend on global variable.
     window.md = this.md
-    this.updateConfig = () => {
-      config = ConfigManager.get()
-    }
   }
 
   render (content) {

browser/lib/markdownTextHelper.js

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

@@ -3,15 +3,23 @@ import dataApi from 'browser/main/lib/dataApi'
 import ee from 'browser/main/lib/eventEmitter'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
-export function createMarkdownNote (storage, folder, dispatch, location) {
+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: '',
-      content: ''
+      tags,
+      content: '',
+      linesHighlighted: []
     })
     .then(note => {
       const noteHash = note.key
@@ -29,20 +37,30 @@ export function createMarkdownNote (storage, folder, dispatch, location) {
     })
 }
 
-export function createSnippetNote (storage, folder, dispatch, location, config) {
+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: config.editor.snippetDefaultLanguage || 'text',
-          content: ''
+          mode: defaultLanguage,
+          content: '',
+          linesHighlighted: []
         }
       ]
     })

browser/lib/slugify.js

@@ -0,0 +1,17 @@
+import diacritics from 'diacritics-map'
+
+function replaceDiacritics (str) {
+  return str.replace(/[À-ž]/g, function (ch) {
+    return diacritics[ch] || ch
+  })
+}
+
+module.exports = function slugify (title) {
+  let slug = title.trim()
+
+  slug = replaceDiacritics(slug)
+
+  slug = slug.replace(/[^\w\s-]/g, '').replace(/\s+/g, '-')
+
+  return encodeURI(slug).replace(/\-+$/, '')
+}

browser/lib/spellcheck.js

@@ -0,0 +1,232 @@
+import styles from '../components/CodeEditor.styl'
+import i18n from 'browser/lib/i18n'
+
+const Typo = require('typo-js')
+const _ = require('lodash')
+
+const CSS_ERROR_CLASS = 'codeEditor-typo'
+const SPELLCHECK_DISABLED = 'NONE'
+const DICTIONARY_PATH = '../dictionaries'
+const MILLISECONDS_TILL_LIVECHECK = 500
+
+let dictionary = null
+let self
+
+function getAvailableDictionaries () {
+  return [
+    {label: i18n.__('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/utils.js

@@ -132,8 +132,13 @@ export function isObjectEqual (a, b) {
   return true
 }
 
+export function isMarkdownTitleURL (str) {
+  return /(^#{1,6}\s)(?:\w+:|^)\/\/(?:[^\s\.]+\.\S{2}|localhost[\:?\d]*)/.test(str)
+}
+
 export default {
   lastFindInArray,
   escapeHtmlCharacters,
-  isObjectEqual
+  isObjectEqual,
+  isMarkdownTitleURL
 }

browser/main/Detail/FullscreenButton.js

@@ -5,15 +5,17 @@ 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 hotkey = (OSX ? i18n.__('Command(⌘)') : i18n.__('Ctrl(^)')) + '+B'
+  return (
+    <button styleName='control-fullScreenButton' title={i18n.__('Fullscreen')} onMouseDown={(e) => onClick(e)}>
+      <img styleName='iconInfo' 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

@@ -17,6 +17,10 @@
   opacity 0
   transition 0.1s
 
+.tooltip:lang(ja)
+  @extend .tooltip
+  right 35px
+
 body[data-theme="dark"]
   .control-fullScreenButton
     topBarButtonDark()

browser/main/Detail/InfoPanel.js

@@ -14,7 +14,7 @@ class InfoPanel extends React.Component {
 
   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'}}>
@@ -70,22 +70,27 @@ 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 +109,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)

browser/main/Detail/InfoPanelTrashed.js

@@ -5,7 +5,7 @@ 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>
@@ -31,22 +31,22 @@ 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 +61,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

@@ -39,12 +39,15 @@ class MarkdownNoteDetail extends React.Component {
       isMovingNote: false,
       note: Object.assign({
         title: '',
-        content: ''
+        content: '',
+        linesHighlighted: []
       }, props.note),
-      isLockButtonShown: false,
+      isLockButtonShown: props.config.editor.type !== 'SPLIT',
       isLocked: false,
-      editorType: props.config.editor.type
+      editorType: props.config.editor.type,
+      switchPreview: props.config.editor.switchPreview
     }
+
     this.dispatchTimer = null
 
     this.toggleLockButton = this.handleToggleLockButton.bind(this)
@@ -61,14 +64,20 @@ class MarkdownNoteDetail extends React.Component {
       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)
+
+    // Focus content if using blur or double click
+    if (this.state.switchPreview === 'BLUR' || this.state.switchPreview === 'DBL_CLICK') this.focus()
   }
 
   componentWillReceiveProps (nextProps) {
-    if (nextProps.note.key !== this.props.note.key && !this.state.isMovingNote) {
+    const isNewNote = nextProps.note.key !== this.props.note.key
+    const hasDeletedTags = nextProps.note.tags.length < this.props.note.tags.length
+    if (!this.state.isMovingNote && (isNewNote || hasDeletedTags)) {
       if (this.saveQueue != null) this.saveNow()
       this.setState({
-        note: Object.assign({}, nextProps.note)
+        note: Object.assign({linesHighlighted: []}, nextProps.note)
       }, () => {
         this.refs.content.reload()
         if (this.refs.tags) this.refs.tags.reset()
@@ -91,7 +100,12 @@ class MarkdownNoteDetail extends React.Component {
   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)
   }
 
@@ -187,6 +201,40 @@ class MarkdownNoteDetail extends React.Component {
     ee.emit('export:save-html')
   }
 
+  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
@@ -259,7 +307,7 @@ class MarkdownNoteDetail extends React.Component {
 
   handleToggleLockButton (event, noteStatus) {
     // first argument event is not used
-    if (this.props.config.editor.switchPreview === 'BLUR' && noteStatus === 'CODE') {
+    if (noteStatus === 'CODE') {
       this.setState({isLockButtonShown: true})
     } else {
       this.setState({isLockButtonShown: false})
@@ -285,7 +333,8 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleSwitchMode (type) {
-    this.setState({ editorType: 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
@@ -293,9 +342,33 @@ class MarkdownNoteDetail extends React.Component {
     })
   }
 
+  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'
@@ -304,7 +377,9 @@ class MarkdownNoteDetail extends React.Component {
         value={note.content}
         storageKey={note.storage}
         noteKey={note.key}
+        linesHighlighted={note.linesHighlighted}
         onChange={this.handleUpdateContent.bind(this)}
+        isLocked={this.state.isLocked}
         ignorePreviewPointerEvents={ignorePreviewPointerEvents}
       />
     } else {
@@ -314,6 +389,7 @@ class MarkdownNoteDetail extends React.Component {
         value={note.content}
         storageKey={note.storage}
         noteKey={note.key}
+        linesHighlighted={note.linesHighlighted}
         onChange={this.handleUpdateContent.bind(this)}
         ignorePreviewPointerEvents={ignorePreviewPointerEvents}
       />
@@ -321,7 +397,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   render () {
-    const { data, location } = this.props
+    const { data, location, config } = this.props
     const { note, editorType } = this.state
     const storageKey = note.storage
     const folderKey = note.folder
@@ -354,6 +430,7 @@ class MarkdownNoteDetail extends React.Component {
           exportAsHtml={this.exportAsHtml}
           exportAsMd={this.exportAsMd}
           exportAsTxt={this.exportAsTxt}
+          exportAsPdf={this.exportAsPdf}
         />
       </div>
     </div>
@@ -372,10 +449,13 @@ class MarkdownNoteDetail extends React.Component {
         <TagSelect
           ref='tags'
           value={this.state.note.tags}
+          saveTagsAlphabetically={config.ui.saveTagsAlphabetically}
+          showTagsAlphabetically={config.ui.showTagsAlphabetically}
           data={data}
           onChange={this.handleUpdateTag.bind(this)}
+          coloredTags={config.coloredTags}
         />
-        <TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
+        <TodoListPercentage onClearCheckboxClick={(e) => this.handleClearTodo(e)} percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
       </div>
       <div styleName='info-right'>
         <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
@@ -417,6 +497,7 @@ class MarkdownNoteDetail extends React.Component {
           exportAsMd={this.exportAsMd}
           exportAsTxt={this.exportAsTxt}
           exportAsHtml={this.exportAsHtml}
+          exportAsPdf={this.exportAsPdf}
           wordCount={note.content.split(' ').length}
           letterCount={note.content.replace(/\r?\n/g, '').length}
           type={note.type}
@@ -429,6 +510,7 @@ class MarkdownNoteDetail extends React.Component {
       <div className='NoteDetail'
         style={this.props.style}
         styleName='root'
+        onKeyDown={(e) => this.handleKeyDown(e)}
       >
 
         {location.pathname === '/trashed' ? trashTopBar : detailTopBar}

browser/main/Detail/SnippetNoteDetail.js

@@ -20,6 +20,7 @@ import _ from 'lodash'
 import {findNoteTitle} from 'browser/lib/findNoteTitle'
 import convertModeName from 'browser/lib/convertModeName'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import FullscreenButton from './FullscreenButton'
 import TrashButton from './TrashButton'
 import RestoreButton from './RestoreButton'
 import PermanentDeleteButton from './PermanentDeleteButton'
@@ -48,7 +49,7 @@ class SnippetNoteDetail extends React.Component {
       note: Object.assign({
         description: ''
       }, props.note, {
-        snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet))
+        snippets: props.note.snippets.map((snippet) => Object.assign({linesHighlighted: []}, snippet))
       })
     }
 
@@ -76,8 +77,9 @@ class SnippetNoteDetail extends React.Component {
       const nextNote = Object.assign({
         description: ''
       }, nextProps.note, {
-        snippets: nextProps.note.snippets.map((snippet) => Object.assign({}, snippet))
+        snippets: nextProps.note.snippets.map((snippet) => Object.assign({linesHighlighted: []}, snippet))
       })
+
       this.setState({
         snippetIndex: 0,
         note: nextNote
@@ -112,7 +114,7 @@ class SnippetNoteDetail extends React.Component {
     if (this.refs.tags) note.tags = this.refs.tags.value
     note.description = this.refs.description.value
     note.updatedAt = new Date()
-    note.title = findNoteTitle(note.description)
+    note.title = findNoteTitle(note.description, false)
 
     this.setState({
       note
@@ -354,12 +356,10 @@ class SnippetNoteDetail extends React.Component {
       this.refs['code-' + this.state.snippetIndex].reload()
 
       if (this.visibleTabs.offsetWidth > this.allTabs.scrollWidth) {
-        console.log('no need for arrows')
         this.moveTabBarBy(0)
       } else {
         const lastTab = this.allTabs.lastChild
         if (lastTab.offsetLeft + lastTab.offsetWidth < this.visibleTabs.offsetWidth) {
-          console.log('need to scroll')
           const width = this.visibleTabs.offsetWidth
           const newLeft = lastTab.offsetLeft + lastTab.offsetWidth - width
           this.moveTabBarBy(newLeft > 0 ? -newLeft : 0)
@@ -412,6 +412,8 @@ class SnippetNoteDetail extends React.Component {
     return (e) => {
       const snippets = this.state.note.snippets.slice()
       snippets[index].content = this.refs['code-' + index].value
+      snippets[index].linesHighlighted = e.options.linesHighlighted
+
       this.setState(state => ({note: Object.assign(state.note, {snippets: snippets})}))
       this.setState(state => ({
         note: state.note
@@ -436,6 +438,18 @@ class SnippetNoteDetail extends React.Component {
           this.focusEditor()
         }
         break
+      // I key
+      case 73:
+        {
+          const isSuper = global.process.platform === 'darwin'
+            ? e.metaKey
+            : e.ctrlKey
+          if (isSuper) {
+            e.preventDefault()
+            this.handleInfoButtonClick(e)
+          }
+        }
+        break
       // L key
       case 76:
         {
@@ -586,13 +600,16 @@ class SnippetNoteDetail extends React.Component {
   }
 
   addSnippet () {
-    const { config } = this.props
+    const { config: { editor: { snippetDefaultLanguage } } } = this.props
     const { note } = this.state
 
+    const defaultLanguage = snippetDefaultLanguage === 'Auto Detect' ? null : snippetDefaultLanguage
+
     note.snippets = note.snippets.concat([{
       name: '',
-      mode: config.editor.snippetDefaultLanguage || 'text',
-      content: ''
+      mode: defaultLanguage,
+      content: '',
+      linesHighlighted: []
     }])
     const snippetIndex = note.snippets.length - 1
 
@@ -627,7 +644,6 @@ class SnippetNoteDetail extends React.Component {
   }
 
   focusEditor () {
-    console.log('code-' + this.state.snippetIndex)
     this.refs['code-' + this.state.snippetIndex].focus()
   }
 
@@ -636,11 +652,19 @@ class SnippetNoteDetail extends React.Component {
     if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none'
   }
 
-  showWarning () {
+  showWarning (e, msg) {
+    const warningMessage = (msg) => ({
+      'export-txt': 'Text export',
+      'export-md': 'Markdown export',
+      'export-html': 'HTML export',
+      'export-pdf': 'PDF export',
+      'print': 'Print'
+    })[msg]
+
     dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
       message: i18n.__('Sorry!'),
-      detail: i18n.__('md/text import is available only a markdown note.'),
+      detail: i18n.__(warningMessage(msg) + ' is available only in markdown notes.'),
       buttons: [i18n.__('OK')]
     })
   }
@@ -652,6 +676,8 @@ class SnippetNoteDetail extends React.Component {
     const storageKey = note.storage
     const folderKey = note.folder
 
+    const autoDetect = config.editor.snippetDefaultLanguage === 'Auto Detect'
+
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
     let editorIndentSize = parseInt(config.editor.indentSize, 10)
@@ -676,10 +702,6 @@ class SnippetNoteDetail extends React.Component {
 
     const viewList = note.snippets.map((snippet, index) => {
       const isActive = this.state.snippetIndex === index
-
-      let syntax = CodeMirror.findModeByName(convertModeName(snippet.mode))
-      if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
-
       return <div styleName='tabView'
         key={index}
         style={{zIndex: isActive ? 5 : 4}}
@@ -688,26 +710,34 @@ class SnippetNoteDetail extends React.Component {
           ? <MarkdownEditor styleName='tabView-content'
             value={snippet.content}
             config={config}
+            linesHighlighted={snippet.linesHighlighted}
             onChange={(e) => this.handleCodeChange(index)(e)}
             ref={'code-' + index}
             ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
             storageKey={storageKey}
           />
           : <CodeEditor styleName='tabView-content'
-            mode={snippet.mode}
+            mode={snippet.mode || (autoDetect ? null : config.editor.snippetDefaultLanguage)}
             value={snippet.content}
+            linesHighlighted={snippet.linesHighlighted}
             theme={config.editor.theme}
             fontFamily={config.editor.fontFamily}
             fontSize={editorFontSize}
             indentType={config.editor.indentType}
             indentSize={editorIndentSize}
             displayLineNumbers={config.editor.displayLineNumbers}
+            matchingPairs={config.editor.matchingPairs}
+            matchingTriples={config.editor.matchingTriples}
+            explodingPairs={config.editor.explodingPairs}
             keyMap={config.editor.keyMap}
             scrollPastEnd={config.editor.scrollPastEnd}
             fetchUrlTitle={config.editor.fetchUrlTitle}
             enableTableEditor={config.editor.enableTableEditor}
             onChange={(e) => this.handleCodeChange(index)(e)}
             ref={'code-' + index}
+            enableSmartPaste={config.editor.enableSmartPaste}
+            hotkey={config.hotkey}
+            autoDetect={autoDetect}
           />
         }
       </div>
@@ -741,6 +771,7 @@ class SnippetNoteDetail extends React.Component {
           exportAsMd={this.showWarning}
           exportAsTxt={this.showWarning}
           exportAsHtml={this.showWarning}
+          exportAsPdf={this.showWarning}
         />
       </div>
     </div>
@@ -759,8 +790,11 @@ class SnippetNoteDetail extends React.Component {
         <TagSelect
           ref='tags'
           value={this.state.note.tags}
+          saveTagsAlphabetically={config.ui.saveTagsAlphabetically}
+          showTagsAlphabetically={config.ui.showTagsAlphabetically}
           data={data}
           onChange={(e) => this.handleChange(e)}
+          coloredTags={config.coloredTags}
         />
       </div>
       <div styleName='info-right'>
@@ -769,11 +803,7 @@ class SnippetNoteDetail extends React.Component {
           isActive={note.isStarred}
         />
 
-        <button styleName='control-fullScreenButton' title={i18n.__('Fullscreen')}
-          onMouseDown={(e) => this.handleFullScreenButton(e)}>
-          <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
-          <span styleName='tooltip'>{i18n.__('Fullscreen')}</span>
-        </button>
+        <FullscreenButton onClick={(e) => this.handleFullScreenButton(e)} />
 
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
 
@@ -789,7 +819,10 @@ class SnippetNoteDetail extends React.Component {
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.showWarning}
           exportAsTxt={this.showWarning}
+          exportAsHtml={this.showWarning}
+          exportAsPdf={this.showWarning}
           type={note.type}
+          print={this.showWarning}
         />
       </div>
     </div>

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
@@ -150,6 +169,15 @@ body[data-theme="solarized-dark"]
     color $ui-solarized-dark-text-color
     border 1px solid $ui-solarized-dark-borderColor
 
+  .tabList .tabButton
+    border-color $ui-solarized-dark-borderColor
+
+  .tabButton
+    &:hover
+      color $ui-solarized-dark-button--active-color
+      background-color $ui-solarized-dark-noteDetail-backgroundColor
+      transition 0.15s
+    
   .tabList
     background-color $ui-solarized-dark-noteDetail-backgroundColor
     color $ui-solarized-dark-text-color
@@ -167,6 +195,14 @@ body[data-theme="monokai"]
     color $ui-monokai-text-color
     border 1px solid $ui-monokai-borderColor
 
+  .tabList .tabButton
+    border-color $ui-monokai-borderColor
+
+  .tabButton
+    &:hover
+      color $ui-monokai-text-color
+      background-color $ui-monokai-noteDetail-backgroundColor
+
   .tabList
     background-color $ui-monokai-noteDetail-backgroundColor
     color $ui-monokai-text-color
@@ -184,6 +220,14 @@ body[data-theme="dracula"]
     color $ui-dracula-text-color
     border 1px solid $ui-dracula-borderColor
 
+  .tabList .tabButton
+    border-color $ui-dracula-borderColor
+
+  .tabButton
+    &:hover
+      color $ui-dracula-text-color
+      background-color $ui-dracula-noteDetail-backgroundColor
+
   .tabList
     background-color $ui-dracula-noteDetail-backgroundColor
     color $ui-dracula-text-color

browser/main/Detail/StarButton.js

@@ -54,7 +54,7 @@ class StarButton extends React.Component {
             : '../resources/icon/icon-star.svg'
           }
         />
-        <span styleName='tooltip'>{i18n.__('Star')}</span>
+        <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Star')}</span>
       </button>
     )
   }

browser/main/Detail/StarButton.styl

@@ -21,6 +21,11 @@
   opacity 0
   transition 0.1s
 
+.tooltip:lang(ja)
+  @extend .tooltip
+  right 103px
+  width 70px
+
 .root--active
   @extend .root
   transition 0.15s

browser/main/Detail/TagSelect.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import invertColor from 'invert-color'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TagSelect.styl'
 import _ from 'lodash'
@@ -45,8 +46,14 @@ class TagSelect extends React.Component {
     value = _.isArray(value)
       ? value.slice()
       : []
-    value.push(newTag)
-    value = _.uniq(value)
+
+    if (!_.includes(value, newTag)) {
+      value.push(newTag)
+    }
+
+    if (this.props.saveTagsAlphabetically) {
+      value = _.sortBy(value)
+    }
 
     this.setState({
       newTag: ''
@@ -179,19 +186,34 @@ class TagSelect extends React.Component {
   }
 
   render () {
-    const { value, className } = this.props
+    const { value, className, showTagsAlphabetically, coloredTags } = this.props
 
     const tagList = _.isArray(value)
-      ? value.map((tag) => {
+      ? (showTagsAlphabetically ? _.sortBy(value) : value).map((tag) => {
+        const wrapperStyle = {}
+        const textStyle = {}
+        const BLACK = '#333333'
+        const WHITE = '#f1f1f1'
+        const color = coloredTags[tag]
+        const invertedColor = color && invertColor(color, { black: BLACK, white: WHITE })
+        let iconRemove = '../resources/icon/icon-x.svg'
+        if (color) {
+          wrapperStyle.backgroundColor = color
+          textStyle.color = invertedColor
+        }
+        if (invertedColor === WHITE) {
+          iconRemove = '../resources/icon/icon-x-light.svg'
+        }
         return (
           <span styleName='tag'
             key={tag}
+            style={wrapperStyle}
           >
-            <span styleName='tag-label' onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
+            <span styleName='tag-label' style={textStyle} onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)}
             >
-              <img className='tag-removeButton-icon' src='../resources/icon/icon-x.svg' width='8px' />
+              <img className='tag-removeButton-icon' src={iconRemove} width='8px' />
             </button>
           </span>
         )
@@ -240,7 +262,8 @@ TagSelect.contextTypes = {
 TagSelect.propTypes = {
   className: PropTypes.string,
   value: PropTypes.arrayOf(PropTypes.string),
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  coloredTags: PropTypes.object
 }
 
 export default CSSModules(TagSelect, styles)

browser/main/Detail/TagSelect.styl

@@ -3,19 +3,18 @@
   align-items center
   user-select none
   vertical-align middle
-  width 100%
-  overflow-x scroll
+  width 96%
+  overflow-x auto
   white-space nowrap
-  margin-top 31px
+  top 50px
   position absolute
-
-.root::-webkit-scrollbar
-  display none
+  &::-webkit-scrollbar
+    height 8px
 
 .tag
   display flex
   align-items center
-  margin 0px 2px
+  margin 0px 2px 2px
   padding 2px 4px
   background-color alpha($ui-tag-backgroundColor, 3%)
   border-radius 4px

browser/main/Detail/ToggleModeButton.js

@@ -1,26 +1,26 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './ToggleModeButton.styl'
-import i18n from 'browser/lib/i18n'
-
-const ToggleModeButton = ({
-  onClick, editorType
-}) => (
-  <div styleName='control-toggleModeButton'>
-    <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => onClick('SPLIT')}>
-      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : ''} />
-    </div>
-    <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
-      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
-    </div>
-    <span styleName='tooltip'>{i18n.__('Toggle Mode')}</span>
-  </div>
-)
-
-ToggleModeButton.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  editorType: PropTypes.string.Required
-}
-
-export default CSSModules(ToggleModeButton, styles)
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ToggleModeButton.styl'
+import i18n from 'browser/lib/i18n'
+
+const ToggleModeButton = ({
+  onClick, editorType
+}) => (
+  <div styleName='control-toggleModeButton'>
+    <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => onClick('SPLIT')}>
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : ''} />
+    </div>
+    <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
+    </div>
+    <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Toggle Mode')}</span>
+  </div>
+)
+
+ToggleModeButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  editorType: PropTypes.string.Required
+}
+
+export default CSSModules(ToggleModeButton, styles)

browser/main/Detail/ToggleModeButton.styl

@@ -40,6 +40,11 @@
   opacity 0
   transition 0.1s
 
+.tooltip:lang(ja)
+  @extend .tooltip
+  left -8px
+  width 70px
+
 body[data-theme="dark"]
   .control-fullScreenButton
     topBarButtonDark()

browser/main/Detail/TrashButton.js

@@ -11,7 +11,7 @@ const TrashButton = ({
     onClick={(e) => onClick(e)}
   >
     <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
-    <span styleName='tooltip'>{i18n.__('Trash')}</span>
+    <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Trash')}</span>
   </button>
 )
 

browser/main/Detail/TrashButton.styl

@@ -17,6 +17,10 @@
   opacity 0
   transition 0.1s
 
+.tooltip:lang(ja)
+  @extend .tooltip
+  right 46px
+
 .control-trashButton--in-trash
   top 60px
   topBarButtonRight()

browser/main/Main.js

@@ -80,7 +80,6 @@ class Main extends React.Component {
         }
       })
       .then(data => {
-        console.log(data)
         store.dispatch({
           type: 'ADD_STORAGE',
           storage: data.storage,
@@ -97,12 +96,14 @@ class Main extends React.Component {
               {
                 name: 'example.html',
                 mode: 'html',
-                content: "<html>\n<body>\n<h1 id='hello'>Enjoy Boostnote!</h1>\n</body>\n</html>"
+                content: "<html>\n<body>\n<h1 id='hello'>Enjoy Boostnote!</h1>\n</body>\n</html>",
+                linesHighlighted: []
               },
               {
                 name: 'example.js',
                 mode: 'javascript',
-                content: "var boostnote = document.getElementById('enjoy').innerHTML\n\nconsole.log(boostnote)"
+                content: "var boostnote = document.getElementById('enjoy').innerHTML\n\nconsole.log(boostnote)",
+                linesHighlighted: []
               }
             ]
           })
@@ -168,11 +169,24 @@ class Main extends React.Component {
       }
     })
 
+    delete CodeMirror.keyMap.emacs['Ctrl-V']
+
     eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
+    eventEmitter.on('menubar:togglemenubar', this.toggleMenuBarVisible.bind(this))
   }
 
   componentWillUnmount () {
     eventEmitter.off('editor:fullscreen', this.toggleFullScreen)
+    eventEmitter.off('menubar:togglemenubar', this.toggleMenuBarVisible.bind(this))
+  }
+
+  toggleMenuBarVisible () {
+    const { config } = this.props
+    const { ui } = config
+
+    const newUI = Object.assign(ui, {showMenuBar: !ui.showMenuBar})
+    const newConfig = Object.assign(config, newUI)
+    ConfigManager.set(newConfig)
   }
 
   handleLeftSlideMouseDown (e) {
@@ -233,8 +247,8 @@ class Main extends React.Component {
     if (this.state.isRightSliderFocused) {
       const offset = this.refs.body.getBoundingClientRect().left
       let newListWidth = e.pageX - offset
-      if (newListWidth < 10) {
-        newListWidth = 10
+      if (newListWidth < 180) {
+        newListWidth = 180
       } else if (newListWidth > 600) {
         newListWidth = 600
       }
@@ -297,7 +311,7 @@ class Main extends React.Component {
         onMouseUp={e => this.handleMouseUp(e)}
       >
         <SideNav
-          {..._.pick(this.props, ['dispatch', 'data', 'config', 'location'])}
+          {..._.pick(this.props, ['dispatch', 'data', 'config', 'params', 'location'])}
           width={this.state.navWidth}
         />
         {!config.isSideNavFolded &&

browser/main/NewNoteButton/index.js

@@ -35,19 +35,20 @@ class NewNoteButton extends React.Component {
   }
 
   handleNewNoteButtonClick (e) {
-    const { location, dispatch, config } = this.props
+    const { location, params, dispatch, config } = this.props
     const { storage, folder } = this.resolveTargetFolder()
 
     if (config.ui.defaultNote === 'MARKDOWN_NOTE') {
-      createMarkdownNote(storage.key, folder.key, dispatch, location)
+      createMarkdownNote(storage.key, folder.key, dispatch, location, params, config)
     } else if (config.ui.defaultNote === 'SNIPPET_NOTE') {
-      createSnippetNote(storage.key, folder.key, dispatch, location, config)
+      createSnippetNote(storage.key, folder.key, dispatch, location, params, config)
     } else {
       modal.open(NewNoteModal, {
         storage: storage.key,
         folder: folder.key,
         dispatch,
         location,
+        params,
         config
       })
     }

browser/main/NoteList/index.js

@@ -2,7 +2,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
-import debounceRender from 'react-debounce-render'
 import styles from './NoteList.styl'
 import moment from 'moment'
 import _ from 'lodash'
@@ -56,7 +55,6 @@ class NoteList extends React.Component {
     super(props)
 
     this.selectNextNoteHandler = () => {
-      console.log('fired next')
       this.selectNextNote()
     }
     this.selectPriorNoteHandler = () => {
@@ -65,13 +63,14 @@ class NoteList extends React.Component {
     this.focusHandler = () => {
       this.refs.list.focus()
     }
-    this.alertIfSnippetHandler = () => {
-      this.alertIfSnippet()
+    this.alertIfSnippetHandler = (event, msg) => {
+      this.alertIfSnippet(msg)
     }
     this.importFromFileHandler = this.importFromFile.bind(this)
     this.jumpNoteByHash = this.jumpNoteByHashHandler.bind(this)
     this.handleNoteListKeyUp = this.handleNoteListKeyUp.bind(this)
     this.getNoteKeyFromTargetIndex = this.getNoteKeyFromTargetIndex.bind(this)
+    this.cloneNote = this.cloneNote.bind(this)
     this.deleteNote = this.deleteNote.bind(this)
     this.focusNote = this.focusNote.bind(this)
     this.pinToTop = this.pinToTop.bind(this)
@@ -84,7 +83,9 @@ class NoteList extends React.Component {
 
     // TODO: not Selected noteKeys but SelectedNote(for reusing)
     this.state = {
+      ctrlKeyDown: false,
       shiftKeyDown: false,
+      prevShiftNoteIndex: -1,
       selectedNoteKeys: []
     }
 
@@ -95,6 +96,7 @@ class NoteList extends React.Component {
     this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
     ee.on('list:next', this.selectNextNoteHandler)
     ee.on('list:prior', this.selectPriorNoteHandler)
+    ee.on('list:clone', this.cloneNote)
     ee.on('list:focus', this.focusHandler)
     ee.on('list:isMarkdownNote', this.alertIfSnippetHandler)
     ee.on('import:file', this.importFromFileHandler)
@@ -117,6 +119,7 @@ class NoteList extends React.Component {
 
     ee.off('list:next', this.selectNextNoteHandler)
     ee.off('list:prior', this.selectPriorNoteHandler)
+    ee.off('list:clone', this.cloneNote)
     ee.off('list:focus', this.focusHandler)
     ee.off('list:isMarkdownNote', this.alertIfSnippetHandler)
     ee.off('import:file', this.importFromFileHandler)
@@ -172,16 +175,15 @@ class NoteList extends React.Component {
     }
   }
 
-  focusNote (selectedNoteKeys, noteKey) {
+  focusNote (selectedNoteKeys, noteKey, pathname) {
     const { router } = this.context
-    const { location } = this.props
 
     this.setState({
       selectedNoteKeys
     })
 
     router.push({
-      pathname: location.pathname,
+      pathname,
       query: {
         key: noteKey
       }
@@ -200,6 +202,7 @@ class NoteList extends React.Component {
     }
     let { selectedNoteKeys } = this.state
     const { shiftKeyDown } = this.state
+    const { location } = this.props
 
     let targetIndex = this.getTargetIndex()
 
@@ -216,7 +219,7 @@ class NoteList extends React.Component {
       selectedNoteKeys.push(priorNoteKey)
     }
 
-    this.focusNote(selectedNoteKeys, priorNoteKey)
+    this.focusNote(selectedNoteKeys, priorNoteKey, location.pathname)
 
     ee.emit('list:moved')
   }
@@ -227,6 +230,7 @@ class NoteList extends React.Component {
     }
     let { selectedNoteKeys } = this.state
     const { shiftKeyDown } = this.state
+    const { location } = this.props
 
     let targetIndex = this.getTargetIndex()
     const isTargetLastNote = targetIndex === this.notes.length - 1
@@ -249,25 +253,34 @@ class NoteList extends React.Component {
       selectedNoteKeys.push(nextNoteKey)
     }
 
-    this.focusNote(selectedNoteKeys, nextNoteKey)
+    this.focusNote(selectedNoteKeys, nextNoteKey, location.pathname)
 
     ee.emit('list:moved')
   }
 
   jumpNoteByHashHandler (event, noteHash) {
+    const { data } = this.props
+
     // first argument event isn't used.
     if (this.notes === null || this.notes.length === 0) {
       return
     }
 
     const selectedNoteKeys = [noteHash]
-    this.focusNote(selectedNoteKeys, noteHash)
+
+    let locationToSelect = '/home'
+    const noteByHash = data.noteMap.map((note) => note).find(note => note.key === noteHash)
+    if (noteByHash !== undefined) {
+      locationToSelect = '/storages/' + noteByHash.storage + '/folders/' + noteByHash.folder
+    }
+
+    this.focusNote(selectedNoteKeys, noteHash, locationToSelect)
 
     ee.emit('list:moved')
   }
 
   handleNoteListKeyDown (e) {
-    if (e.metaKey || e.ctrlKey) return true
+    if (e.metaKey) return true
 
     // A key
     if (e.keyCode === 65 && !e.shiftKey) {
@@ -275,12 +288,6 @@ class NoteList extends React.Component {
       ee.emit('top:new-note')
     }
 
-    // D key
-    if (e.keyCode === 68) {
-      e.preventDefault()
-      this.deleteNote()
-    }
-
     // E key
     if (e.keyCode === 69) {
       e.preventDefault()
@@ -307,6 +314,8 @@ class NoteList extends React.Component {
 
     if (e.shiftKey) {
       this.setState({ shiftKeyDown: true })
+    } else if (e.ctrlKey) {
+      this.setState({ ctrlKeyDown: true })
     }
   }
 
@@ -314,6 +323,10 @@ class NoteList extends React.Component {
     if (!e.shiftKey) {
       this.setState({ shiftKeyDown: false })
     }
+
+    if (!e.ctrlKey) {
+      this.setState({ ctrlKeyDown: false })
+    }
   }
 
   getNotes () {
@@ -390,25 +403,65 @@ class NoteList extends React.Component {
     return pinnedNotes.concat(unpinnedNotes)
   }
 
+  getNoteIndexByKey (noteKey) {
+    return this.notes.findIndex((note) => {
+      if (!note) return -1
+
+      return note.key === noteKey
+    })
+  }
+
   handleNoteClick (e, uniqueKey) {
     const { router } = this.context
     const { location } = this.props
-    let { selectedNoteKeys } = this.state
-    const { shiftKeyDown } = this.state
+    let { selectedNoteKeys, prevShiftNoteIndex } = this.state
+    const { ctrlKeyDown, shiftKeyDown } = this.state
+    const hasSelectedNoteKey = selectedNoteKeys.length > 0
 
-    if (shiftKeyDown && selectedNoteKeys.includes(uniqueKey)) {
+    if (ctrlKeyDown && selectedNoteKeys.includes(uniqueKey)) {
       const newSelectedNoteKeys = selectedNoteKeys.filter((noteKey) => noteKey !== uniqueKey)
       this.setState({
         selectedNoteKeys: newSelectedNoteKeys
       })
       return
     }
-    if (!shiftKeyDown) {
+    if (!ctrlKeyDown && !shiftKeyDown) {
       selectedNoteKeys = []
     }
+
+    if (!shiftKeyDown) {
+      prevShiftNoteIndex = -1
+    }
+
     selectedNoteKeys.push(uniqueKey)
+
+    if (shiftKeyDown && hasSelectedNoteKey) {
+      let firstShiftNoteIndex = this.getNoteIndexByKey(selectedNoteKeys[0])
+      // Shift selection can either start from first note in the exisiting selectedNoteKeys
+      // or previous first shift note index
+      firstShiftNoteIndex = firstShiftNoteIndex > prevShiftNoteIndex
+        ? firstShiftNoteIndex : prevShiftNoteIndex
+
+      const lastShiftNoteIndex = this.getNoteIndexByKey(uniqueKey)
+
+      const startIndex = firstShiftNoteIndex < lastShiftNoteIndex
+        ? firstShiftNoteIndex : lastShiftNoteIndex
+      const endIndex = firstShiftNoteIndex > lastShiftNoteIndex
+        ? firstShiftNoteIndex : lastShiftNoteIndex
+
+      selectedNoteKeys = []
+      for (let i = startIndex; i <= endIndex; i++) {
+        selectedNoteKeys.push(this.notes[i].key)
+      }
+
+      if (prevShiftNoteIndex < 0) {
+        prevShiftNoteIndex = firstShiftNoteIndex
+      }
+    }
+
     this.setState({
-      selectedNoteKeys
+      selectedNoteKeys,
+      prevShiftNoteIndex
     })
 
     router.push({
@@ -447,14 +500,22 @@ class NoteList extends React.Component {
     })
   }
 
-  alertIfSnippet () {
+  alertIfSnippet (msg) {
+    const warningMessage = (msg) => ({
+      'export-txt': 'Text export',
+      'export-md': 'Markdown export',
+      'export-html': 'HTML export',
+      'export-pdf': 'PDF export',
+      'print': 'Print'
+    })[msg]
+
     const targetIndex = this.getTargetIndex()
     if (this.notes[targetIndex].type === 'SNIPPET_NOTE') {
       dialog.showMessageBox(remote.getCurrentWindow(), {
         type: 'warning',
         message: i18n.__('Sorry!'),
-        detail: i18n.__('md/text import is available only a markdown note.'),
-        buttons: [i18n.__('OK'), i18n.__('Cancel')]
+        detail: i18n.__(warningMessage(msg) + ' is available only in markdown notes.'),
+        buttons: [i18n.__('OK')]
       })
     }
   }
@@ -605,18 +666,21 @@ class NoteList extends React.Component {
         })
       )
       .then((data) => {
-        data.forEach((item) => {
-          dispatch({
-            type: 'DELETE_NOTE',
-            storageKey: item.storageKey,
-            noteKey: item.noteKey
+        const dispatchHandler = () => {
+          data.forEach((item) => {
+            dispatch({
+              type: 'DELETE_NOTE',
+              storageKey: item.storageKey,
+              noteKey: item.noteKey
+            })
           })
-        })
+        }
+        ee.once('list:next', dispatchHandler)
       })
+      .then(() => ee.emit('list:next'))
       .catch((err) => {
         console.error('Cannot Delete note: ' + err)
       })
-      console.log('Notes were all deleted')
     } else {
       if (!confirmDeleteNote(confirmDeletion, false)) return
 
@@ -636,8 +700,8 @@ class NoteList extends React.Component {
           })
         })
         AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
-        console.log('Notes went to trash')
       })
+      .then(() => ee.emit('list:next'))
       .catch((err) => {
         console.error('Notes could not go to trash: ' + err)
       })
@@ -661,7 +725,12 @@ class NoteList extends React.Component {
         type: firstNote.type,
         folder: folder.key,
         title: firstNote.title + ' ' + i18n.__('copy'),
-        content: firstNote.content
+        content: firstNote.content,
+        linesHighlighted: firstNote.linesHighlighted,
+        description: firstNote.description,
+        snippets: firstNote.snippets,
+        tags: firstNote.tags,
+        isStarred: firstNote.isStarred
       })
       .then((note) => {
         attachmentManagement.cloneAttachments(firstNote, note)
@@ -826,7 +895,7 @@ class NoteList extends React.Component {
     if (!location.pathname.match(/\/trashed/)) this.addNotesFromFiles(filepaths)
   }
 
-  // Add notes to the current folder
+ // Add notes to the current folder
   addNotesFromFiles (filepaths) {
     const { dispatch, location } = this.props
     const { storage, folder } = this.resolveTargetFolder()
@@ -850,13 +919,20 @@ class NoteList extends React.Component {
           }
           dataApi.createNote(storage.key, newNote)
           .then((note) => {
-            dispatch({
-              type: 'UPDATE_NOTE',
-              note: note
-            })
-            hashHistory.push({
-              pathname: location.pathname,
-              query: {key: getNoteKey(note)}
+            attachmentManagement.importAttachments(note.content, filepath, storage.key, note.key)
+            .then((newcontent) => {
+              note.content = newcontent
+
+              dataApi.updateNote(storage.key, note.key, note)
+
+              dispatch({
+                type: 'UPDATE_NOTE',
+                note: note
+              })
+              hashHistory.push({
+                pathname: location.pathname,
+                query: {key: getNoteKey(note)}
+              })
             })
           })
         })
@@ -996,6 +1072,8 @@ class NoteList extends React.Component {
               folderName={this.getNoteFolder(note).name}
               storageName={this.getNoteStorage(note).name}
               viewType={viewType}
+              showTagsAlphabetically={config.ui.showTagsAlphabetically}
+              coloredTags={config.coloredTags}
             />
           )
         }
@@ -1078,4 +1156,4 @@ NoteList.propTypes = {
   })
 }
 
-export default debounceRender(CSSModules(NoteList, styles))
+export default CSSModules(NoteList, styles)

browser/main/SideNav/StorageItem.js

@@ -25,7 +25,8 @@ class StorageItem extends React.Component {
     const { storage } = this.props
 
     this.state = {
-      isOpen: !!storage.isOpen
+      isOpen: !!storage.isOpen,
+      draggedOver: null
     }
   }
 
@@ -204,6 +205,20 @@ class StorageItem extends React.Component {
               folderKey: data.folderKey,
               fileType: data.fileType
             })
+            return data
+          })
+          .then(data => {
+            dialog.showMessageBox(remote.getCurrentWindow(), {
+              type: 'info',
+              message: 'Exported to "' + data.exportDir + '"'
+            })
+          })
+          .catch(err => {
+            dialog.showErrorBox(
+              'Export error',
+              err ? err.message || err : 'Unexpected error during export'
+            )
+            throw err
           })
       }
     })
@@ -231,14 +246,20 @@ class StorageItem extends React.Component {
     }
   }
 
-  handleDragEnter (e) {
-    e.dataTransfer.setData('defaultColor', e.target.style.backgroundColor)
-    e.target.style.backgroundColor = 'rgba(129, 130, 131, 0.08)'
+  handleDragEnter (e, key) {
+    e.preventDefault()
+    if (this.state.draggedOver === key) { return }
+    this.setState({
+      draggedOver: key
+    })
   }
 
   handleDragLeave (e) {
-    e.target.style.opacity = '1'
-    e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor')
+    e.preventDefault()
+    if (this.state.draggedOver === null) { return }
+    this.setState({
+      draggedOver: null
+    })
   }
 
   dropNote (storage, folder, dispatch, location, noteData) {
@@ -263,8 +284,12 @@ class StorageItem extends React.Component {
   }
 
   handleDrop (e, storage, folder, dispatch, location) {
-    e.target.style.opacity = '1'
-    e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor')
+    e.preventDefault()
+    if (this.state.draggedOver !== null) {
+      this.setState({
+        draggedOver: null
+      })
+    }
     const noteData = JSON.parse(e.dataTransfer.getData('note'))
     this.dropNote(storage, folder, dispatch, location, noteData)
   }
@@ -274,7 +299,7 @@ class StorageItem extends React.Component {
     const { folderNoteMap, trashedSet } = data
     const SortableStorageItemChild = SortableElement(StorageItemChild)
     const folderList = storage.folders.map((folder, index) => {
-      let folderRegex = new RegExp(escapeStringRegexp(path.sep) + 'storages' + escapeStringRegexp(path.sep) + storage.key + escapeStringRegexp(path.sep) + 'folders' + escapeStringRegexp(path.sep) + folder.key)
+      const folderRegex = new RegExp(escapeStringRegexp(path.sep) + 'storages' + escapeStringRegexp(path.sep) + storage.key + escapeStringRegexp(path.sep) + 'folders' + escapeStringRegexp(path.sep) + folder.key)
       const isActive = !!(location.pathname.match(folderRegex))
       const noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
 
@@ -291,16 +316,22 @@ class StorageItem extends React.Component {
         <SortableStorageItemChild
           key={folder.key}
           index={index}
-          isActive={isActive}
+          isActive={isActive || folder.key === this.state.draggedOver}
           handleButtonClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
           handleContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
           folderName={folder.name}
           folderColor={folder.color}
           isFolded={isFolded}
           noteCount={noteCount}
-          handleDrop={(e) => this.handleDrop(e, storage, folder, dispatch, location)}
-          handleDragEnter={this.handleDragEnter}
-          handleDragLeave={this.handleDragLeave}
+          handleDrop={(e) => {
+            this.handleDrop(e, storage, folder, dispatch, location)
+          }}
+          handleDragEnter={(e) => {
+            this.handleDragEnter(e, folder.key)
+          }}
+          handleDragLeave={(e) => {
+            this.handleDragLeave(e, folder)
+          }}
         />
       )
     })

browser/main/SideNav/index.js

@@ -18,9 +18,32 @@ import TagButton from './TagButton'
 import {SortableContainer} from 'react-sortable-hoc'
 import i18n from 'browser/lib/i18n'
 import context from 'browser/lib/context'
+import { remote } from 'electron'
+import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
+import ColorPicker from 'browser/components/ColorPicker'
+
+function matchActiveTags (tags, activeTags) {
+  return _.every(activeTags, v => tags.indexOf(v) >= 0)
+}
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      colorPicker: {
+        show: false,
+        color: null,
+        tagName: null,
+        targetRect: null
+      }
+    }
+
+    this.dismissColorPicker = this.dismissColorPicker.bind(this)
+    this.handleColorPickerConfirm = this.handleColorPickerConfirm.bind(this)
+    this.handleColorPickerReset = this.handleColorPickerReset.bind(this)
+  }
 
   componentDidMount () {
     EventEmitter.on('side:preferences', this.handleMenuButtonClick)
@@ -30,6 +53,52 @@ class SideNav extends React.Component {
     EventEmitter.off('side:preferences', this.handleMenuButtonClick)
   }
 
+  deleteTag (tag) {
+    const selectedButton = remote.dialog.showMessageBox(remote.getCurrentWindow(), {
+      ype: 'warning',
+      message: i18n.__('Confirm tag deletion'),
+      detail: i18n.__('This will permanently remove this tag.'),
+      buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
+    })
+
+    if (selectedButton === 0) {
+      const { data, dispatch, location, params } = this.props
+
+      const notes = data.noteMap
+        .map(note => note)
+        .filter(note => note.tags.indexOf(tag) !== -1)
+        .map(note => {
+          note = Object.assign({}, note)
+          note.tags = note.tags.slice()
+
+          note.tags.splice(note.tags.indexOf(tag), 1)
+
+          return note
+        })
+
+      Promise
+        .all(notes.map(note => dataApi.updateNote(note.storage, note.key, note)))
+        .then(updatedNotes => {
+          updatedNotes.forEach(note => {
+            dispatch({
+              type: 'UPDATE_NOTE',
+              note
+            })
+          })
+
+          if (location.pathname.match('/tags')) {
+            const tags = params.tagname.split(' ')
+            const index = tags.indexOf(tag)
+            if (index !== -1) {
+              tags.splice(index, 1)
+
+              this.context.router.push(`/tags/${tags.map(tag => encodeURIComponent(tag)).join(' ')}`)
+            }
+          }
+        })
+    }
+  }
+
   handleMenuButtonClick (e) {
     openModal(PreferencesModal)
   }
@@ -44,6 +113,72 @@ class SideNav extends React.Component {
     router.push('/starred')
   }
 
+  handleTagContextMenu (e, tag) {
+    const menu = []
+
+    menu.push({
+      label: i18n.__('Delete Tag'),
+      click: this.deleteTag.bind(this, tag)
+    })
+
+    menu.push({
+      label: i18n.__('Customize Color'),
+      click: this.displayColorPicker.bind(this, tag, e.target.getBoundingClientRect())
+    })
+
+    context.popup(menu)
+  }
+
+  dismissColorPicker () {
+    this.setState({
+      colorPicker: {
+        show: false
+      }
+    })
+  }
+
+  displayColorPicker (tagName, rect) {
+    const { config } = this.props
+    this.setState({
+      colorPicker: {
+        show: true,
+        color: config.coloredTags[tagName],
+        tagName,
+        targetRect: rect
+      }
+    })
+  }
+
+  handleColorPickerConfirm (color) {
+    const { dispatch, config: {coloredTags} } = this.props
+    const { colorPicker: { tagName } } = this.state
+    const newColoredTags = Object.assign({}, coloredTags, {[tagName]: color.hex})
+
+    const config = { coloredTags: newColoredTags }
+    ConfigManager.set(config)
+    dispatch({
+      type: 'SET_CONFIG',
+      config
+    })
+    this.dismissColorPicker()
+  }
+
+  handleColorPickerReset () {
+    const { dispatch, config: {coloredTags} } = this.props
+    const { colorPicker: { tagName } } = this.state
+    const newColoredTags = Object.assign({}, coloredTags)
+
+    delete newColoredTags[tagName]
+
+    const config = { coloredTags: newColoredTags }
+    ConfigManager.set(config)
+    dispatch({
+      type: 'SET_CONFIG',
+      config
+    })
+    this.dismissColorPicker()
+  }
+
   handleToggleButtonClick (e) {
     const { dispatch, config } = this.props
 
@@ -144,12 +279,21 @@ class SideNav extends React.Component {
 
   tagListComponent () {
     const { data, location, config } = this.props
-    const relatedTags = this.getRelatedTags(this.getActiveTags(location.pathname), data.noteMap)
+    const { colorPicker } = this.state
+    const activeTags = this.getActiveTags(location.pathname)
+    const relatedTags = this.getRelatedTags(activeTags, data.noteMap)
     let tagList = _.sortBy(data.tagNoteMap.map(
       (tag, name) => ({ name, size: tag.size, related: relatedTags.has(name) })
-    ), ['name']).filter(
+    ).filter(
       tag => tag.size > 0
-    )
+    ), ['name'])
+    if (config.ui.enableLiveNoteCounts && activeTags.length !== 0) {
+      const notesTags = data.noteMap.map(note => note.tags)
+      tagList = tagList.map(tag => {
+        tag.size = notesTags.filter(tags => tags.includes(tag.name) && matchActiveTags(tags, activeTags)).length
+        return tag
+      })
+    }
     if (config.sortTagsBy === 'COUNTER') {
       tagList = _.sortBy(tagList, item => (0 - item.size))
     }
@@ -165,10 +309,12 @@ class SideNav extends React.Component {
             name={tag.name}
             handleClickTagListItem={this.handleClickTagListItem.bind(this)}
             handleClickNarrowToTag={this.handleClickNarrowToTag.bind(this)}
-            isActive={this.getTagActive(location.pathname, tag.name)}
+            handleContextMenu={this.handleTagContextMenu.bind(this)}
+            isActive={this.getTagActive(location.pathname, tag.name) || (colorPicker.tagName === tag.name)}
             isRelated={tag.related}
             key={tag.name}
             count={tag.size}
+            color={config.coloredTags[tag.name]}
           />
         )
       })
@@ -198,7 +344,7 @@ class SideNav extends React.Component {
     const tags = pathSegments[pathSegments.length - 1]
     return (tags === 'alltags')
       ? []
-      : tags.split(' ').map(tag => decodeURIComponent(tag))
+      : decodeURIComponent(tags).split(' ')
   }
 
   handleClickTagListItem (name) {
@@ -230,7 +376,7 @@ class SideNav extends React.Component {
     } else {
       listOfTags.push(tag)
     }
-    router.push(`/tags/${listOfTags.map(tag => encodeURIComponent(tag)).join(' ')}`)
+    router.push(`/tags/${encodeURIComponent(listOfTags.join(' '))}`)
   }
 
   emptyTrash (entries) {
@@ -238,6 +384,8 @@ class SideNav extends React.Component {
     const deletionPromises = entries.map((note) => {
       return dataApi.deleteNote(note.storage, note.key)
     })
+    const { confirmDeletion } = this.props.config.ui
+    if (!confirmDeleteNote(confirmDeletion, true)) return
     Promise.all(deletionPromises)
     .then((arrayOfStorageAndNoteKeys) => {
       arrayOfStorageAndNoteKeys.forEach(({ storageKey, noteKey }) => {
@@ -247,7 +395,6 @@ class SideNav extends React.Component {
     .catch((err) => {
       console.error('Cannot Delete note: ' + err)
     })
-    console.log('Trash emptied')
   }
 
   handleFilterButtonContextMenu (event) {
@@ -260,6 +407,7 @@ class SideNav extends React.Component {
 
   render () {
     const { data, location, config, dispatch } = this.props
+    const { colorPicker: colorPickerState } = this.state
 
     const isFolded = config.isSideNavFolded
 
@@ -276,6 +424,20 @@ class SideNav extends React.Component {
         useDragHandle
       />
     })
+
+    let colorPicker
+    if (colorPickerState.show) {
+      colorPicker = (
+        <ColorPicker
+          color={colorPickerState.color}
+          targetRect={colorPickerState.targetRect}
+          onConfirm={this.handleColorPickerConfirm}
+          onCancel={this.dismissColorPicker}
+          onReset={this.handleColorPickerReset}
+        />
+      )
+    }
+
     const style = {}
     if (!isFolded) style.width = this.props.width
     const isTagActive = location.pathname.match(/tag/)
@@ -295,6 +457,7 @@ class SideNav extends React.Component {
           </div>
         </div>
         {this.SideNavComponent(isFolded, storageList)}
+        {colorPicker}
       </div>
     )
   }

browser/main/StatusBar/StatusBar.styl

@@ -47,6 +47,14 @@
 .update-icon
   color $brand-color
 
+body[data-theme="default"]
+  .zoom
+    color $ui-text-color
+
+body[data-theme="white"]
+  .zoom
+    color $ui-text-color
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor

browser/main/StatusBar/index.js

@@ -5,6 +5,7 @@ import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
 import i18n from 'browser/lib/i18n'
 import context from 'browser/lib/context'
+import EventEmitter from 'browser/main/lib/eventEmitter'
 
 const electron = require('electron')
 const { remote, ipcRenderer } = electron
@@ -13,6 +14,26 @@ const { dialog } = remote
 const zoomOptions = [0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2.0]
 
 class StatusBar extends React.Component {
+
+  constructor (props) {
+    super(props)
+    this.handleZoomInMenuItem = this.handleZoomInMenuItem.bind(this)
+    this.handleZoomOutMenuItem = this.handleZoomOutMenuItem.bind(this)
+    this.handleZoomResetMenuItem = this.handleZoomResetMenuItem.bind(this)
+  }
+
+  componentDidMount () {
+    EventEmitter.on('status:zoomin', this.handleZoomInMenuItem)
+    EventEmitter.on('status:zoomout', this.handleZoomOutMenuItem)
+    EventEmitter.on('status:zoomreset', this.handleZoomResetMenuItem)
+  }
+
+  componentWillUnmount () {
+    EventEmitter.off('status:zoomin', this.handleZoomInMenuItem)
+    EventEmitter.off('status:zoomout', this.handleZoomOutMenuItem)
+    EventEmitter.off('status:zoomreset', this.handleZoomResetMenuItem)
+  }
+
   updateApp () {
     const index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
@@ -48,6 +69,20 @@ class StatusBar extends React.Component {
     })
   }
 
+  handleZoomInMenuItem () {
+    const zoomFactor = ZoomManager.getZoom() + 0.1
+    this.handleZoomMenuItemClick(zoomFactor)
+  }
+
+  handleZoomOutMenuItem () {
+    const zoomFactor = ZoomManager.getZoom() - 0.1
+    this.handleZoomMenuItemClick(zoomFactor)
+  }
+
+  handleZoomResetMenuItem () {
+    this.handleZoomMenuItemClick(1.0)
+  }
+
   render () {
     const { config, status } = this.context
 

browser/main/TopBar/index.js

@@ -6,6 +6,7 @@ import _ from 'lodash'
 import ee from 'browser/main/lib/eventEmitter'
 import NewNoteButton from 'browser/main/NewNoteButton'
 import i18n from 'browser/lib/i18n'
+import debounce from 'lodash/debounce'
 
 class TopBar extends React.Component {
   constructor (props) {
@@ -25,6 +26,10 @@ class TopBar extends React.Component {
     }
 
     this.codeInitHandler = this.handleCodeInit.bind(this)
+
+    this.updateKeyword = debounce(this.updateKeyword, 1000 / 60, {
+      maxWait: 1000 / 8
+    })
   }
 
   componentDidMount () {
@@ -94,7 +99,6 @@ class TopBar extends React.Component {
   }
 
   handleKeyUp (e) {
-    const { router } = this.context
     // reset states
     this.setState({
       isConfirmTranslation: false
@@ -106,21 +110,21 @@ class TopBar extends React.Component {
         isConfirmTranslation: true
       })
       const keyword = this.refs.searchInput.value
-      router.push(`/searched/${encodeURIComponent(keyword)}`)
-      this.setState({
-        search: keyword
-      })
+      this.updateKeyword(keyword)
     }
   }
 
   handleSearchChange (e) {
-    const { router } = this.context
-    const keyword = this.refs.searchInput.value
     if (this.state.isAlphabet || this.state.isConfirmTranslation) {
-      router.push(`/searched/${encodeURIComponent(keyword)}`)
+      const keyword = this.refs.searchInput.value
+      this.updateKeyword(keyword)
     } else {
       e.preventDefault()
     }
+  }
+
+  updateKeyword (keyword) {
+    this.context.router.push(`/searched/${encodeURIComponent(keyword)}`)
     this.setState({
       search: keyword
     })

browser/main/global.styl

@@ -97,6 +97,7 @@ modalBackColor = white
 
 
 body[data-theme="dark"]
+  background-color $ui-dark-backgroundColor
   ::-webkit-scrollbar-thumb
     background-color rgba(0, 0, 0, 0.3)
   .ModalBase
@@ -148,6 +149,7 @@ body[data-theme="dark"]
   z-index modalZIndex + 5
 
 body[data-theme="solarized-dark"]
+  background-color $ui-solarized-dark-backgroundColor
   ::-webkit-scrollbar-thumb
     background-color rgba(0, 0, 0, 0.3)
   .ModalBase
@@ -157,6 +159,7 @@ body[data-theme="solarized-dark"]
     color: $ui-solarized-dark-text-color
 
 body[data-theme="monokai"]
+  background-color $ui-monokai-backgroundColor
   ::-webkit-scrollbar-thumb
     background-color rgba(0, 0, 0, 0.3)
   .ModalBase
@@ -166,6 +169,7 @@ body[data-theme="monokai"]
     color: $ui-monokai-text-color
 
 body[data-theme="dracula"]
+  background-color $ui-dracula-backgroundColor
   ::-webkit-scrollbar-thumb
     background-color rgba(0, 0, 0, 0.3)
   .ModalBase

browser/main/lib/AwsMobileAnalyticsConfig.js

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

browser/main/lib/ConfigManager.js

@@ -24,30 +24,42 @@ export const DEFAULT_CONFIG = {
   amaEnabled: true,
   hotkey: {
     toggleMain: OSX ? 'Command + Alt + L' : 'Super + Alt + E',
-    toggleMode: OSX ? 'Command + Option + M' : 'Ctrl + M'
+    toggleMode: OSX ? 'Command + Alt + M' : 'Ctrl + M',
+    deleteNote: OSX ? 'Command + Shift + Backspace' : 'Ctrl + Shift + Backspace',
+    pasteSmartly: OSX ? 'Command + Shift + V' : 'Ctrl + Shift + V',
+    toggleMenuBar: 'Alt'
   },
   ui: {
     language: 'en',
     theme: 'default',
     showCopyNotification: true,
     disableDirectWrite: false,
-    defaultNote: 'ALWAYS_ASK' // 'ALWAYS_ASK', 'SNIPPET_NOTE', 'MARKDOWN_NOTE'
+    defaultNote: 'ALWAYS_ASK', // 'ALWAYS_ASK', 'SNIPPET_NOTE', 'MARKDOWN_NOTE'
+    showMenuBar: false
   },
   editor: {
     theme: 'base16-light',
     keyMap: 'sublime',
     fontSize: '14',
-    fontFamily: win ? 'Segoe UI' : 'Monaco, Consolas',
+    fontFamily: win ? 'Consolas' : 'Monaco',
     indentType: 'space',
     indentSize: '2',
     enableRulers: false,
     rulers: [80, 120],
     displayLineNumbers: true,
-    switchPreview: 'BLUR', // Available value: RIGHTCLICK, BLUR
+    matchingPairs: '()[]{}\'\'""$$**``~~__',
+    matchingTriples: '```"""\'\'\'',
+    explodingPairs: '[]{}``$$',
+    switchPreview: 'BLUR', // 'BLUR', 'DBL_CLICK', 'RIGHTCLICK'
+    delfaultStatus: 'PREVIEW', // 'PREVIEW', 'CODE'
     scrollPastEnd: false,
-    type: 'SPLIT',
+    type: 'SPLIT', // 'SPLIT', 'EDITOR_PREVIEW'
     fetchUrlTitle: true,
-    enableTableEditor: false
+    enableTableEditor: false,
+    enableFrontMatterTitle: true,
+    frontMatterTitleField: 'title',
+    spellcheck: false,
+    enableSmartPaste: false
   },
   preview: {
     fontSize: '14',
@@ -60,6 +72,7 @@ export const DEFAULT_CONFIG = {
     latexBlockClose: '$$',
     plantUMLServerAddress: 'http://www.plantuml.com/plantuml',
     scrollPastEnd: false,
+    scrollSync: true,
     smartQuotes: true,
     breaks: true,
     smartArrows: false,
@@ -75,7 +88,8 @@ export const DEFAULT_CONFIG = {
     token: '',
     username: '',
     password: ''
-  }
+  },
+  coloredTags: {}
 }
 
 function validate (config) {
@@ -197,8 +211,8 @@ function assignConfigValues (originalConfig, rcConfig) {
 function rewriteHotkey (config) {
   const keys = [...Object.keys(config.hotkey)]
   keys.forEach(key => {
-    config.hotkey[key] = config.hotkey[key].replace(/Cmd/g, 'Command')
-    config.hotkey[key] = config.hotkey[key].replace(/Opt/g, 'Alt')
+    config.hotkey[key] = config.hotkey[key].replace(/Cmd\s/g, 'Command ')
+    config.hotkey[key] = config.hotkey[key].replace(/Opt\s/g, 'Option ')
   })
   return config
 }

browser/main/lib/dataApi/attachmentManagement.js

@@ -6,6 +6,7 @@ const mdurl = require('mdurl')
 const fse = require('fs-extra')
 const escapeStringRegexp = require('escape-string-regexp')
 const sander = require('sander')
+const url = require('url')
 import i18n from 'browser/lib/i18n'
 
 const STORAGE_FOLDER_PLACEHOLDER = ':storage'
@@ -18,15 +19,23 @@ const PATH_SEPARATORS = escapeStringRegexp(path.posix.sep) + escapeStringRegexp(
  * @returns {Promise<Image>} Image element created
  */
 function getImage (file) {
-  return new Promise((resolve) => {
-    const reader = new FileReader()
-    const img = new Image()
-    img.onload = () => resolve(img)
-    reader.onload = e => {
-      img.src = e.target.result
-    }
-    reader.readAsDataURL(file)
-  })
+  if (_.isString(file)) {
+    return new Promise(resolve => {
+      const img = new Image()
+      img.onload = () => resolve(img)
+      img.src = file
+    })
+  } else {
+    return new Promise(resolve => {
+      const reader = new FileReader()
+      const img = new Image()
+      img.onload = () => resolve(img)
+      reader.onload = e => {
+        img.src = e.target.result
+      }
+      reader.readAsDataURL(file)
+    })
+  }
 }
 
 /**
@@ -76,7 +85,7 @@ function getOrientation (file) {
             return view.getUint16(offset + (i * 12) + 8, little)
           }
         }
-      } else if ((marker & 0xFF00) !== 0xFF00) { // If not start with 0xFF, not a Marker
+      } else if ((marker & 0xFF00) !== 0xFF00) { // If not start with 0xFF, not a Marker.
         break
       } else {
         offset += view.getUint16(offset, false)
@@ -151,23 +160,28 @@ function copyAttachment (sourceFilePath, storageKey, noteKey, useRandomName = tr
 
     try {
       const isBase64 = typeof sourceFilePath === 'object' && sourceFilePath.type === 'base64'
-      if (!fs.existsSync(sourceFilePath) && !isBase64) {
+      if (!isBase64 && !fs.existsSync(sourceFilePath)) {
         return reject('source file does not exist')
       }
-      const targetStorage = findStorage.findStorage(storageKey)
+
+      const sourcePath = sourceFilePath.sourceFilePath || sourceFilePath
+      const sourceURL = url.parse(/^\w+:\/\//.test(sourcePath) ? sourcePath : 'file:///' + sourcePath)
+
       let destinationName
       if (useRandomName) {
-        destinationName = `${uniqueSlug()}${path.extname(sourceFilePath.sourceFilePath || sourceFilePath)}`
+        destinationName = `${uniqueSlug()}${path.extname(sourceURL.pathname) || '.png'}`
       } else {
-        destinationName = path.basename(sourceFilePath.sourceFilePath || sourceFilePath)
+        destinationName = path.basename(sourceURL.pathname)
       }
+
+      const targetStorage = findStorage.findStorage(storageKey)
       const destinationDir = path.join(targetStorage.path, DESTINATION_FOLDER, noteKey)
       createAttachmentDestinationFolder(targetStorage.path, noteKey)
       const outputFile = fs.createWriteStream(path.join(destinationDir, destinationName))
 
       if (isBase64) {
         const base64Data = sourceFilePath.data.replace(/^data:image\/\w+;base64,/, '')
-        const dataBuffer = new Buffer(base64Data, 'base64')
+        const dataBuffer = Buffer.from(base64Data, 'base64')
         outputFile.write(dataBuffer, () => {
           resolve(destinationName)
         })
@@ -227,7 +241,15 @@ function migrateAttachments (markdownContent, storagePath, noteKey) {
  * @returns {String} postprocessed HTML in which all :storage references are mapped to the actual paths.
  */
 function fixLocalURLS (renderedHTML, storagePath) {
-  return renderedHTML.replace(new RegExp('/?' + STORAGE_FOLDER_PLACEHOLDER + '.*?"', 'g'), function (match) {
+  /*
+    A :storage reference is like `:storage/3b6f8bd6-4edd-4b15-96e0-eadc4475b564/f939b2c3.jpg`.
+
+    - `STORAGE_FOLDER_PLACEHOLDER` will match `:storage`
+    - `(?:(?:\\\/|%5C)[-.\\w]+)+` will match `/3b6f8bd6-4edd-4b15-96e0-eadc4475b564/f939b2c3.jpg`
+    - `(?:\\\/|%5C)[-.\\w]+` will either match `/3b6f8bd6-4edd-4b15-96e0-eadc4475b564` or `/f939b2c3.jpg`
+    - `(?:\\\/|%5C)` match the path seperator. `\\\/` for posix systems and `%5C` for windows.
+  */
+  return renderedHTML.replace(new RegExp('/?' + STORAGE_FOLDER_PLACEHOLDER + '(?:(?:\\\/|%5C)[-.\\w]+)+', 'g'), function (match) {
     var encodedPathSeparators = new RegExp(mdurl.encode(path.win32.sep) + '|' + mdurl.encode(path.posix.sep), 'g')
     return match.replace(encodedPathSeparators, path.sep).replace(new RegExp('/?' + STORAGE_FOLDER_PLACEHOLDER, 'g'), 'file:///' + path.join(storagePath, DESTINATION_FOLDER))
   })
@@ -253,22 +275,87 @@ function generateAttachmentMarkdown (fileName, path, showPreview) {
  * @param {Event} dropEvent DropEvent
  */
 function handleAttachmentDrop (codeEditor, storageKey, noteKey, dropEvent) {
-  const file = dropEvent.dataTransfer.files[0]
-  const filePath = file.path
-  const originalFileName = path.basename(filePath)
-  const fileType = file['type']
-  const isImage = fileType.startsWith('image')
   let promise
-  if (isImage) {
-    promise = fixRotate(file).then(base64data => {
-      return copyAttachment({type: 'base64', data: base64data, sourceFilePath: filePath}, storageKey, noteKey)
-    })
+  if (dropEvent.dataTransfer.files.length > 0) {
+    promise = Promise.all(Array.from(dropEvent.dataTransfer.files).map(file => {
+      const filePath = file.path
+      const fileType = file.type // EX) 'image/gif' or 'text/html'
+      if (fileType.startsWith('image')) {
+        if (fileType === 'image/gif' || fileType === 'image/svg+xml') {
+          return copyAttachment(filePath, storageKey, noteKey).then(fileName => ({
+            fileName,
+            title: path.basename(filePath),
+            isImage: true
+          }))
+        } else {
+          return getOrientation(file)
+            .then((orientation) => {
+              if (orientation === -1) { // The image rotation is correct and does not need adjustment
+                return copyAttachment(filePath, storageKey, noteKey)
+              } else {
+                return fixRotate(file).then(data => copyAttachment({
+                  type: 'base64',
+                  data: data,
+                  sourceFilePath: filePath
+                }, storageKey, noteKey))
+              }
+            })
+            .then(fileName =>
+              ({
+                fileName,
+                title: path.basename(filePath),
+                isImage: true
+              })
+            )
+        }
+      } else {
+        return copyAttachment(filePath, storageKey, noteKey).then(fileName => ({
+          fileName,
+          title: path.basename(filePath),
+          isImage: false
+        }))
+      }
+    }))
   } else {
-    promise = copyAttachment(filePath, storageKey, noteKey)
+    let imageURL = dropEvent.dataTransfer.getData('text/plain')
+
+    if (!imageURL) {
+      const match = /<img[^>]*[\s"']src="([^"]+)"/.exec(dropEvent.dataTransfer.getData('text/html'))
+      if (match) {
+        imageURL = match[1]
+      }
+    }
+
+    if (!imageURL) {
+      return
+    }
+
+    promise = Promise.all([getImage(imageURL)
+      .then(image => {
+        const canvas = document.createElement('canvas')
+        const context = canvas.getContext('2d')
+        canvas.width = image.width
+        canvas.height = image.height
+        context.drawImage(image, 0, 0)
+
+        return copyAttachment({
+          type: 'base64',
+          data: canvas.toDataURL(),
+          sourceFilePath: imageURL
+        }, storageKey, noteKey)
+      })
+      .then(fileName => ({
+        fileName,
+        title: imageURL,
+        isImage: true
+      }))
+    ])
   }
-  promise.then((fileName) => {
-    const imageMd = generateAttachmentMarkdown(originalFileName, path.join(STORAGE_FOLDER_PLACEHOLDER, noteKey, fileName), isImage)
-    codeEditor.insertAttachmentMd(imageMd)
+
+  promise.then(files => {
+    const attachments = files.filter(file => !!file).map(file => generateAttachmentMarkdown(file.title, path.join(STORAGE_FOLDER_PLACEHOLDER, noteKey, file.fileName), file.isImage))
+
+    codeEditor.insertAttachmentMd(attachments.join('\n'))
   })
 }
 
@@ -279,7 +366,7 @@ function handleAttachmentDrop (codeEditor, storageKey, noteKey, dropEvent) {
  * @param {String} noteKey Key of the current note
  * @param {DataTransferItem} dataTransferItem Part of the past-event
  */
-function handlePastImageEvent (codeEditor, storageKey, noteKey, dataTransferItem) {
+function handlePasteImageEvent (codeEditor, storageKey, noteKey, dataTransferItem) {
   if (!codeEditor) {
     throw new Error('codeEditor has to be given')
   }
@@ -316,6 +403,44 @@ function handlePastImageEvent (codeEditor, storageKey, noteKey, dataTransferItem
   reader.readAsDataURL(blob)
 }
 
+/**
+ * @description Creates a new file in the storage folder belonging to the current note and inserts the correct markdown code
+ * @param {CodeEditor} codeEditor Markdown editor. Its insertAttachmentMd() method will be called to include the markdown code
+ * @param {String} storageKey Key of the current storage
+ * @param {String} noteKey Key of the current note
+ * @param {NativeImage} image The native image
+ */
+function handlePasteNativeImage (codeEditor, storageKey, noteKey, image) {
+  if (!codeEditor) {
+    throw new Error('codeEditor has to be given')
+  }
+  if (!storageKey) {
+    throw new Error('storageKey has to be given')
+  }
+
+  if (!noteKey) {
+    throw new Error('noteKey has to be given')
+  }
+  if (!image) {
+    throw new Error('image has to be given')
+  }
+
+  const targetStorage = findStorage.findStorage(storageKey)
+  const destinationDir = path.join(targetStorage.path, DESTINATION_FOLDER, noteKey)
+
+  createAttachmentDestinationFolder(targetStorage.path, noteKey)
+
+  const imageName = `${uniqueSlug()}.png`
+  const imagePath = path.join(destinationDir, imageName)
+
+  const binaryData = image.toPNG()
+  fs.writeFileSync(imagePath, binaryData, 'binary')
+
+  const imageReferencePath = path.join(STORAGE_FOLDER_PLACEHOLDER, noteKey, imageName)
+  const imageMd = generateAttachmentMarkdown(imageName, imageReferencePath, true)
+  codeEditor.insertAttachmentMd(imageMd)
+}
+
 /**
 * @description Returns all attachment paths of the given markdown
 * @param {String} markdownContent content in which the attachment paths should be found
@@ -342,6 +467,54 @@ function getAbsolutePathsOfAttachmentsInContent (markdownContent, storagePath) {
   return result
 }
 
+/**
+ * @description Copies the attachments to the storage folder and returns the mardown content it should be replaced with
+ * @param {String} markDownContent content in which the attachment paths should be found
+ * @param {String} filepath The path of the file with attachments to import
+ * @param {String} storageKey Storage key of the destination storage
+ * @param {String} noteKey Key of the current note. Will be used as subfolder in :storage
+ */
+function importAttachments (markDownContent, filepath, storageKey, noteKey) {
+  return new Promise((resolve, reject) => {
+    const nameRegex = /(!\[.*?]\()(.+?\..+?)(\))/g
+    let attachPath = nameRegex.exec(markDownContent)
+    const promiseArray = []
+    const attachmentPaths = []
+    const groupIndex = 2
+
+    while (attachPath) {
+      let attachmentPath = attachPath[groupIndex]
+      attachmentPaths.push(attachmentPath)
+      attachmentPath = path.isAbsolute(attachmentPath) ? attachmentPath : path.join(path.dirname(filepath), attachmentPath)
+      promiseArray.push(this.copyAttachment(attachmentPath, storageKey, noteKey))
+      attachPath = nameRegex.exec(markDownContent)
+    }
+
+    let numResolvedPromises = 0
+
+    if (promiseArray.length === 0) {
+      resolve(markDownContent)
+    }
+
+    for (let j = 0; j < promiseArray.length; j++) {
+      promiseArray[j]
+      .then((fileName) => {
+        const newPath = path.join(STORAGE_FOLDER_PLACEHOLDER, noteKey, fileName)
+        markDownContent = markDownContent.replace(attachmentPaths[j], newPath)
+      })
+      .catch((e) => {
+        console.error('File does not exist in path: ' + attachmentPaths[j])
+      })
+      .finally(() => {
+        numResolvedPromises++
+        if (numResolvedPromises === promiseArray.length) {
+          resolve(markDownContent)
+        }
+      })
+    }
+  })
+}
+
 /**
  * @description Moves the attachments of the current note to the new location.
  * Returns a modified version of the given content so that the links to the attachments point to the new note key.
@@ -383,7 +556,14 @@ function replaceNoteKeyWithNewNoteKey (noteContent, oldNoteKey, newNoteKey) {
  * @returns {String} Input without the references
  */
 function removeStorageAndNoteReferences (input, noteKey) {
-  return input.replace(new RegExp(mdurl.encode(path.sep), 'g'), path.sep).replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + '(' + escapeStringRegexp(path.sep) + noteKey + ')?', 'g'), DESTINATION_FOLDER)
+  return input.replace(new RegExp('/?' + STORAGE_FOLDER_PLACEHOLDER + '.*?("|])', 'g'), function (match) {
+    const temp = match
+      .replace(new RegExp(mdurl.encode(path.win32.sep), 'g'), path.sep)
+      .replace(new RegExp(mdurl.encode(path.posix.sep), 'g'), path.sep)
+      .replace(new RegExp(escapeStringRegexp(path.win32.sep), 'g'), path.sep)
+      .replace(new RegExp(escapeStringRegexp(path.posix.sep), 'g'), path.sep)
+    return temp.replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + '(' + escapeStringRegexp(path.sep) + noteKey + ')?', 'g'), DESTINATION_FOLDER)
+  })
 }
 
 /**
@@ -529,7 +709,6 @@ function handleAttachmentLinkPaste (storageKey, noteKey, linkText) {
       return modifiedLinkText
     })
   } else {
-    console.log('One if the parameters was null -> Do nothing..')
     return Promise.resolve(linkText)
   }
 }
@@ -539,9 +718,11 @@ module.exports = {
   fixLocalURLS,
   generateAttachmentMarkdown,
   handleAttachmentDrop,
-  handlePastImageEvent,
+  handlePasteImageEvent,
+  handlePasteNativeImage,
   getAttachmentsInMarkdownContent,
   getAbsolutePathsOfAttachmentsInContent,
+  importAttachments,
   removeStorageAndNoteReferences,
   deleteAttachmentFolder,
   deleteAttachmentsNotPresentInNote,

browser/main/lib/dataApi/copyFile.js

@@ -16,7 +16,7 @@ function copyFile (srcPath, dstPath) {
     const dstFolder = path.dirname(dstPath)
     if (!fs.existsSync(dstFolder)) fs.mkdirSync(dstFolder)
 
-    const input = fs.createReadStream(srcPath)
+    const input = fs.createReadStream(decodeURI(srcPath))
     const output = fs.createWriteStream(dstPath)
 
     output.on('error', reject)

browser/main/lib/dataApi/createNote.js

@@ -16,6 +16,7 @@ function validateInput (input) {
   switch (input.type) {
     case 'MARKDOWN_NOTE':
       if (!_.isString(input.content)) input.content = ''
+      if (!_.isArray(input.linesHighlighted)) input.linesHighlighted = []
       break
     case 'SNIPPET_NOTE':
       if (!_.isString(input.description)) input.description = ''
@@ -23,7 +24,8 @@ function validateInput (input) {
         input.snippets = [{
           name: '',
           mode: 'text',
-          content: ''
+          content: '',
+          linesHighlighted: []
         }]
       }
       break

browser/main/lib/dataApi/createSnippet.js

@@ -9,7 +9,8 @@ function createSnippet (snippetFile) {
       id: crypto.randomBytes(16).toString('hex'),
       name: 'Unnamed snippet',
       prefix: [],
-      content: ''
+      content: '',
+      linesHighlighted: []
     }
     fetchSnippet(null, snippetFile).then((snippets) => {
       snippets.push(newSnippet)

browser/main/lib/dataApi/exportFolder.js

@@ -1,9 +1,9 @@
 import { findStorage } from 'browser/lib/findStorage'
 import resolveStorageData from './resolveStorageData'
 import resolveStorageNotes from './resolveStorageNotes'
+import exportNote from './exportNote'
 import filenamify from 'filenamify'
 import * as path from 'path'
-import * as fs from 'fs'
 
 /**
  * @param {String} storageKey
@@ -43,19 +43,18 @@ function exportFolder (storageKey, folderKey, fileType, exportDir) {
     .then(function exportNotes (data) {
       const { storage, notes } = data
 
-      notes
+      return Promise.all(notes
         .filter(note => note.folder === folderKey && note.isTrashed === false && note.type === 'MARKDOWN_NOTE')
-        .forEach(snippet => {
-          const notePath = path.join(exportDir, `${filenamify(snippet.title, {replacement: '_'})}.${fileType}`)
-          fs.writeFileSync(notePath, snippet.content)
+        .map(note => {
+          const notePath = path.join(exportDir, `${filenamify(note.title, {replacement: '_'})}.${fileType}`)
+          return exportNote(note.key, storage.path, note.content, notePath, null)
         })
-
-      return {
+      ).then(() => ({
         storage,
         folderKey,
         fileType,
         exportDir
-      }
+      }))
     })
 }
 

browser/main/lib/dataApi/exportNote.js

@@ -4,37 +4,56 @@ import { findStorage } from 'browser/lib/findStorage'
 const fs = require('fs')
 const path = require('path')
 
+const attachmentManagement = require('./attachmentManagement')
+
 /**
- * Export note together with images
+ * Export note together with attachments
  *
- * If images is stored in the storage, creates 'images' subfolder in target directory
- * and copies images to it. Changes links to images in the content of the note
+ * If attachments are stored in the storage, creates 'attachments' subfolder in target directory
+ * and copies attachments to it. Changes links to images in the content of the note
  *
+ * @param {String} nodeKey key of the node that should be exported
  * @param {String} storageKey or storage path
  * @param {String} noteContent Content to export
  * @param {String} targetPath Path to exported file
  * @param {function} outputFormatter
  * @return {Promise.<*[]>}
  */
-function exportNote (storageKey, noteContent, targetPath, outputFormatter) {
+function exportNote (nodeKey, storageKey, noteContent, targetPath, outputFormatter) {
   const storagePath = path.isAbsolute(storageKey) ? storageKey : findStorage(storageKey).path
   const exportTasks = []
 
   if (!storagePath) {
     throw new Error('Storage path is not found')
   }
+  const attachmentsAbsolutePaths = attachmentManagement.getAbsolutePathsOfAttachmentsInContent(
+    noteContent,
+    storagePath
+  )
+  attachmentsAbsolutePaths.forEach(attachment => {
+    exportTasks.push({
+      src: attachment,
+      dst: attachmentManagement.DESTINATION_FOLDER
+    })
+  })
 
-  let exportedData = noteContent
+  let exportedData = attachmentManagement.removeStorageAndNoteReferences(
+    noteContent,
+    nodeKey
+  )
 
   if (outputFormatter) {
-    exportedData = outputFormatter(exportedData, exportTasks)
+    exportedData = outputFormatter(exportedData, exportTasks, path.dirname(targetPath))
+  } else {
+    exportedData = Promise.resolve(exportedData)
   }
 
   const tasks = prepareTasks(exportTasks, storagePath, path.dirname(targetPath))
 
   return Promise.all(tasks.map((task) => copyFile(task.src, task.dst)))
-  .then(() => {
-    return saveToFile(exportedData, targetPath)
+  .then(() => exportedData)
+  .then(data => {
+    return saveToFile(data, targetPath)
   }).catch((err) => {
     rollbackExport(tasks)
     throw err

browser/main/lib/dataApi/init.js

@@ -4,6 +4,7 @@ const resolveStorageData = require('./resolveStorageData')
 const resolveStorageNotes = require('./resolveStorageNotes')
 const consts = require('browser/lib/consts')
 const path = require('path')
+const fs = require('fs')
 const CSON = require('@rokt33r/season')
 /**
  * @return {Object} all storages and notes
@@ -19,11 +20,14 @@ const CSON = require('@rokt33r/season')
  * 2. legacy
  * 3. empty directory
  */
+
 function init () {
   const fetchStorages = function () {
     let rawStorages
     try {
       rawStorages = JSON.parse(window.localStorage.getItem('storages'))
+      // Remove storages who's location is inaccesible.
+      rawStorages = rawStorages.filter(storage => fs.existsSync(storage.path))
       if (!_.isArray(rawStorages)) throw new Error('Cached data is not valid.')
     } catch (e) {
       console.warn('Failed to parse cached data from localStorage', e)
@@ -36,6 +40,7 @@ function init () {
 
   const fetchNotes = function (storages) {
     const findNotesFromEachStorage = storages
+    .filter(storage => fs.existsSync(storage.path))
       .map((storage) => {
         return resolveStorageNotes(storage)
           .then((notes) => {
@@ -51,7 +56,11 @@ function init () {
               }
             })
             if (unknownCount > 0) {
-              CSON.writeFileSync(path.join(storage.path, 'boostnote.json'), _.pick(storage, ['folders', 'version']))
+              try {
+                CSON.writeFileSync(path.join(storage.path, 'boostnote.json'), _.pick(storage, ['folders', 'version']))
+              } catch (e) {
+                console.log('Error writting boostnote.json: ' + e + ' from init.js')
+              }
             }
             return notes
           })

browser/main/lib/dataApi/migrateFromV5Storage.js

@@ -69,7 +69,8 @@ function importAll (storage, data) {
             isStarred: false,
             title: article.title,
             content: '# ' + article.title + '\n\n' + article.content,
-            key: noteKey
+            key: noteKey,
+            linesHighlighted: article.linesHighlighted
           }
           notes.push(newNote)
         } else {
@@ -87,7 +88,8 @@ function importAll (storage, data) {
             snippets: [{
               name: article.mode,
               mode: article.mode,
-              content: article.content
+              content: article.content,
+              linesHighlighted: article.linesHighlighted
             }]
           }
           notes.push(newNote)

browser/main/lib/dataApi/renameStorage.js

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

browser/main/lib/dataApi/resolveStorageData.js

@@ -31,13 +31,9 @@ function resolveStorageData (storageCache) {
 
   const version = parseInt(storage.version, 10)
   if (version >= 1) {
-    if (version > 1) {
-      console.log('The repository version is newer than one of current app.')
-    }
     return Promise.resolve(storage)
   }
 
-  console.log('Transform Legacy storage', storage.path)
   return migrateFromV6Storage(storage.path)
     .then(() => storage)
 }

browser/main/lib/dataApi/resolveStorageNotes.js

@@ -9,7 +9,7 @@ function resolveStorageNotes (storage) {
     notePathList = sander.readdirSync(notesDirPath)
   } catch (err) {
     if (err.code === 'ENOENT') {
-      console.log(notesDirPath, ' doesn\'t exist.')
+      console.error(notesDirPath, ' doesn\'t exist.')
       sander.mkdirSync(notesDirPath)
     } else {
       console.warn('Failed to find note dir', notesDirPath, err)

browser/main/lib/dataApi/toggleStorage.js

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

browser/main/lib/dataApi/updateNote.js

@@ -39,6 +39,9 @@ function validateInput (input) {
       if (input.content != null) {
         if (!_.isString(input.content)) validatedInput.content = ''
         else validatedInput.content = input.content
+
+        if (!_.isArray(input.linesHighlighted)) validatedInput.linesHighlighted = []
+        else validatedInput.linesHighlighted = input.linesHighlighted
       }
       return validatedInput
     case 'SNIPPET_NOTE':
@@ -51,7 +54,8 @@ function validateInput (input) {
           validatedInput.snippets = [{
             name: '',
             mode: 'text',
-            content: ''
+            content: '',
+            linesHighlighted: []
           }]
         } else {
           validatedInput.snippets = input.snippets
@@ -96,12 +100,14 @@ function updateNote (storageKey, noteKey, input) {
             snippets: [{
               name: '',
               mode: 'text',
-              content: ''
+              content: '',
+              linesHighlighted: []
             }]
           }
           : {
             type: 'MARKDOWN_NOTE',
-            content: ''
+            content: '',
+            linesHighlighted: []
           }
         noteData.title = ''
         if (storage.folders.length === 0) throw new Error('Failed to restore note: No folder exists.')

browser/main/lib/dataApi/updateSnippet.js

@@ -12,7 +12,8 @@ function updateSnippet (snippet, snippetFile) {
         if (
           currentSnippet.name === snippet.name &&
           currentSnippet.prefix === snippet.prefix &&
-          currentSnippet.content === snippet.content
+          currentSnippet.content === snippet.content &&
+          currentSnippet.linesHighlighted === snippet.linesHighlighted
         ) {
           // if everything is the same then don't write to disk
           resolve(snippets)
@@ -20,6 +21,7 @@ function updateSnippet (snippet, snippetFile) {
           currentSnippet.name = snippet.name
           currentSnippet.prefix = snippet.prefix
           currentSnippet.content = snippet.content
+          currentSnippet.linesHighlighted = (snippet.linesHighlighted)
           fs.writeFile(snippetFile || consts.SNIPPET_FILE, JSON.stringify(snippets, null, 4), (err) => {
             if (err) reject(err)
             resolve(snippets)

browser/main/lib/eventEmitter.js

@@ -14,7 +14,6 @@ function once (name, listener) {
 }
 
 function emit (name, ...args) {
-  console.log(name)
   remote.getCurrentWindow().webContents.send(name, ...args)
 }
 

browser/main/lib/ipcClient.js

@@ -14,14 +14,13 @@ nodeIpc.connectTo(
   path.join(app.getPath('userData'), 'boostnote.service'),
   function () {
     nodeIpc.of.node.on('error', function (err) {
-      console.log(err)
+      console.error(err)
     })
     nodeIpc.of.node.on('connect', function () {
-      console.log('Connected successfully')
       ipcRenderer.send('config-renew', {config: ConfigManager.get()})
     })
     nodeIpc.of.node.on('disconnect', function () {
-      console.log('disconnected')
+      return
     })
   }
 )

browser/main/lib/shortcut.js

@@ -3,5 +3,11 @@ import ee from 'browser/main/lib/eventEmitter'
 module.exports = {
   'toggleMode': () => {
     ee.emit('topbar:togglemodebutton')
+  },
+  'deleteNote': () => {
+    ee.emit('hotkey:deletenote')
+  },
+  'toggleMenuBar': () => {
+    ee.emit('menubar:togglemenubar')
   }
 }

browser/main/modals/NewNoteModal.js

@@ -8,7 +8,7 @@ import { createMarkdownNote, createSnippetNote } from 'browser/lib/newNote'
 class NewNoteModal extends React.Component {
   constructor (props) {
     super(props)
-
+    this.lock = false
     this.state = {}
   }
 
@@ -21,10 +21,13 @@ class NewNoteModal extends React.Component {
   }
 
   handleMarkdownNoteButtonClick (e) {
-    const { storage, folder, dispatch, location } = this.props
-    createMarkdownNote(storage, folder, dispatch, location).then(() => {
-      setTimeout(this.props.close, 200)
-    })
+    const { storage, folder, dispatch, location, params, config } = this.props
+    if (!this.lock) {
+      this.lock = true
+      createMarkdownNote(storage, folder, dispatch, location, params, config).then(() => {
+        setTimeout(this.props.close, 200)
+      })
+    }
   }
 
   handleMarkdownNoteButtonKeyDown (e) {
@@ -35,10 +38,13 @@ class NewNoteModal extends React.Component {
   }
 
   handleSnippetNoteButtonClick (e) {
-    const { storage, folder, dispatch, location, config } = this.props
-    createSnippetNote(storage, folder, dispatch, location, config).then(() => {
-      setTimeout(this.props.close, 200)
-    })
+    const { storage, folder, dispatch, location, params, config } = this.props
+    if (!this.lock) {
+      this.lock = true
+      createSnippetNote(storage, folder, dispatch, location, params, config).then(() => {
+        setTimeout(this.props.close, 200)
+      })
+    }
   }
 
   handleSnippetNoteButtonKeyDown (e) {

browser/main/modals/PreferencesModal/Crowdfunding.js

@@ -23,21 +23,29 @@ class Crowdfunding extends React.Component {
     return (
       <div styleName='root'>
         <div styleName='header'>{i18n.__('Crowdfunding')}</div>
-        <p>{i18n.__('Dear Boostnote users,')}</p>
-        <br />
         <p>{i18n.__('Thank you for using Boostnote!')}</p>
-        <p>{i18n.__('Boostnote is used in about 200 different countries and regions by an awesome community of developers.')}</p>
         <br />
-        <p>{i18n.__('To support our growing userbase, and satisfy community expectations,')}</p>
-        <p>{i18n.__('we would like to invest more time and resources in this project.')}</p>
+        <p>{i18n.__('We launched IssueHunt which is an issue-based crowdfunding / sourcing platform for open source projects.')}</p>
+        <p>{i18n.__('Anyone can put a bounty on not only a bug but also on OSS feature requests listed on IssueHunt. Collected funds will be distributed to project owners and contributors.')}</p>
         <br />
-        <p>{i18n.__('If you use Boostnote and see its potential, help us out by supporting the project on OpenCollective!')}</p>
+        <p>{i18n.__('### Sustainable Open Source Ecosystem')}</p>
+        <p>{i18n.__('We discussed about open-source ecosystem and IssueHunt concept with the Boostnote team repeatedly. We actually also discussed with Matz who father of Ruby.')}</p>
+        <p>{i18n.__('The original reason why we made IssueHunt was to reward our contributors of Boostnote project. We’ve got tons of Github stars and hundred of contributors in two years.')}</p>
+        <p>{i18n.__('We thought that it will be nice if we can pay reward for our contributors.')}</p>
         <br />
-        <p>{i18n.__('Thanks,')}</p>
+        <p>{i18n.__('### We believe Meritocracy')}</p>
+        <p>{i18n.__('We think developers who have skills and do great things must be rewarded properly.')}</p>
+        <p>{i18n.__('OSS projects are used in everywhere on the internet, but no matter how they great, most of owners of those projects need to have another job to sustain their living.')}</p>
+        <p>{i18n.__('It sometimes looks like exploitation.')}</p>
+        <p>{i18n.__('We’ve realized IssueHunt could enhance sustainability of open-source ecosystem.')}</p>
+        <br />
+        <p>{i18n.__('As same as issues of Boostnote are already funded on IssueHunt, your open-source projects can be also started funding from now.')}</p>
+        <br />
+        <p>{i18n.__('Thank you,')}</p>
         <p>{i18n.__('The Boostnote Team')}</p>
         <br />
         <button styleName='cf-link'>
-          <a href='https://opencollective.com/boostnoteio' onClick={(e) => this.handleLinkClick(e)}>{i18n.__('Support via OpenCollective')}</a>
+          <a href='http://bit.ly/issuehunt-from-boostnote-app' onClick={(e) => this.handleLinkClick(e)}>{i18n.__('See IssueHunt')}</a>
         </button>
       </div>
     )

browser/main/modals/PreferencesModal/FolderItem.styl

@@ -62,7 +62,7 @@
 .folderItem-right-button
   vertical-align middle
   height 25px
-  margin-top 2.5px
+  margin-top 2px
   colorDefaultButton()
   border-radius 2px
   border $ui-border

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -28,10 +28,20 @@ class HotkeyTab extends React.Component {
       }})
     }
     this.handleSettingError = (err) => {
-      this.setState({keymapAlert: {
-        type: 'error',
-        message: err.message != null ? err.message : i18n.__('An error occurred!')
-      }})
+      if (
+        this.state.config.hotkey.toggleMain === '' ||
+        this.state.config.hotkey.toggleMode === ''
+      ) {
+        this.setState({keymapAlert: {
+          type: 'success',
+          message: i18n.__('Successfully applied!')
+        }})
+      } else {
+        this.setState({keymapAlert: {
+          type: 'error',
+          message: err.message != null ? err.message : i18n.__('An error occurred!')
+        }})
+      }
     }
     this.oldHotkey = this.state.config.hotkey
     ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
@@ -68,7 +78,10 @@ class HotkeyTab extends React.Component {
     const { config } = this.state
     config.hotkey = {
       toggleMain: this.refs.toggleMain.value,
-      toggleMode: this.refs.toggleMode.value
+      toggleMode: this.refs.toggleMode.value,
+      deleteNote: this.refs.deleteNote.value,
+      pasteSmartly: this.refs.pasteSmartly.value,
+      toggleMenuBar: this.refs.toggleMenuBar.value
     }
     this.setState({
       config
@@ -116,6 +129,17 @@ class HotkeyTab extends React.Component {
               />
             </div>
           </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Show/Hide Menu Bar')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='toggleMenuBar'
+                value={config.hotkey.toggleMenuBar}
+                type='text'
+              />
+            </div>
+          </div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>{i18n.__('Toggle Editor Mode')}</div>
             <div styleName='group-section-control'>
@@ -127,6 +151,28 @@ class HotkeyTab extends React.Component {
               />
             </div>
           </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Delete Note')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='deleteNote'
+                value={config.hotkey.deleteNote}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Paste HTML')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='pasteSmartly'
+                value={config.hotkey.pasteSmartly}
+                type='text'
+              />
+            </div>
+          </div>
           <div styleName='group-control'>
             <button styleName='group-control-leftButton'
               onClick={(e) => this.handleHintToggleButtonClick(e)}

browser/main/modals/PreferencesModal/InfoTab.js

@@ -73,6 +73,11 @@ class InfoTab extends React.Component {
         <div styleName='header--sub'>{i18n.__('Community')}</div>
         <div styleName='top'>
           <ul styleName='list'>
+            <li>
+              <a href='https://issuehunt.io/repos/53266139'
+                onClick={(e) => this.handleLinkClick(e)}
+              >{i18n.__('Bounty on IssueHunt')}</a>
+            </li>
             <li>
               <a href='https://boostnote.io/#subscribe'
                 onClick={(e) => this.handleLinkClick(e)}
@@ -84,7 +89,7 @@ class InfoTab extends React.Component {
               >{i18n.__('GitHub')}</a>
             </li>
             <li>
-              <a href='https://boostlog.io/@junp1234'
+              <a href='https://medium.com/boostnote'
                 onClick={(e) => this.handleLinkClick(e)}
               >{i18n.__('Blog')}</a>
             </li>
@@ -129,7 +134,7 @@ class InfoTab extends React.Component {
             >{i18n.__('Development')}</a>{i18n.__(' : Development configurations for Boostnote.')}
           </li>
           <li styleName='cc'>
-            {i18n.__('Copyright (C) 2017 - 2018 BoostIO')}
+            {i18n.__('Copyright (C) 2017 - 2019 BoostIO')}
           </li>
           <li styleName='cc'>
             {i18n.__('License: GPL v3')}

browser/main/modals/PreferencesModal/SnippetEditor.js

@@ -4,6 +4,7 @@ import _ from 'lodash'
 import styles from './SnippetTab.styl'
 import CSSModules from 'browser/lib/CSSModules'
 import dataApi from 'browser/main/lib/dataApi'
+import snippetManager from '../../../lib/SnippetManager'
 
 const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
 const buildCMRulers = (rulers, enableRulers) =>
@@ -28,9 +29,9 @@ class SnippetEditor extends React.Component {
       foldGutter: true,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
       autoCloseBrackets: {
-        pairs: '()[]{}\'\'""$$**``',
-        triples: '```"""\'\'\'',
-        explode: '[]{}``$$',
+        pairs: this.props.matchingPairs,
+        triples: this.props.matchingTriples,
+        explode: this.props.explodingPairs,
         override: true
       },
       mode: 'null'
@@ -64,7 +65,9 @@ class SnippetEditor extends React.Component {
   }
 
   saveSnippet () {
-    dataApi.updateSnippet(this.snippet).catch((err) => { throw err })
+    dataApi.updateSnippet(this.snippet)
+      .then(snippets => snippetManager.assignSnippets(snippets))
+      .catch((err) => { throw err })
   }
 
   render () {

browser/main/modals/PreferencesModal/SnippetTab.js

@@ -136,6 +136,9 @@ class SnippetTab extends React.Component {
               enableRulers={config.editor.enableRulers}
               rulers={config.editor.rulers}
               displayLineNumbers={config.editor.displayLineNumbers}
+              matchingPairs={config.editor.matchingPairs}
+              matchingTriples={config.editor.matchingTriples}
+              explodingPairs={config.editor.explodingPairs}
               scrollPastEnd={config.editor.scrollPastEnd}
               onRef={ref => { this.snippetEditor = ref }} />
           </div>

browser/main/modals/PreferencesModal/UiTab.js

@@ -68,9 +68,14 @@ class UiTab extends React.Component {
         theme: this.refs.uiTheme.value,
         language: this.refs.uiLanguage.value,
         defaultNote: this.refs.defaultNote.value,
+        tagNewNoteWithFilteringTags: this.refs.tagNewNoteWithFilteringTags.checked,
         showCopyNotification: this.refs.showCopyNotification.checked,
         confirmDeletion: this.refs.confirmDeletion.checked,
         showOnlyRelatedTags: this.refs.showOnlyRelatedTags.checked,
+        showTagsAlphabetically: this.refs.showTagsAlphabetically.checked,
+        saveTagsAlphabetically: this.refs.saveTagsAlphabetically.checked,
+        enableLiveNoteCounts: this.refs.enableLiveNoteCounts.checked,
+        showMenuBar: this.refs.showMenuBar.checked,
         disableDirectWrite: this.refs.uiD2w != null
           ? this.refs.uiD2w.checked
           : false
@@ -89,7 +94,14 @@ class UiTab extends React.Component {
         snippetDefaultLanguage: this.refs.editorSnippetDefaultLanguage.value,
         scrollPastEnd: this.refs.scrollPastEnd.checked,
         fetchUrlTitle: this.refs.editorFetchUrlTitle.checked,
-        enableTableEditor: this.refs.enableTableEditor.checked
+        enableTableEditor: this.refs.enableTableEditor.checked,
+        enableFrontMatterTitle: this.refs.enableFrontMatterTitle.checked,
+        frontMatterTitleField: this.refs.frontMatterTitleField.value,
+        matchingPairs: this.refs.matchingPairs.value,
+        matchingTriples: this.refs.matchingTriples.value,
+        explodingPairs: this.refs.explodingPairs.value,
+        spellcheck: this.refs.spellcheck.checked,
+        enableSmartPaste: this.refs.enableSmartPaste.checked
       },
       preview: {
         fontSize: this.refs.previewFontSize.value,
@@ -102,6 +114,7 @@ class UiTab extends React.Component {
         latexBlockClose: this.refs.previewLatexBlockClose.value,
         plantUMLServerAddress: this.refs.previewPlantUMLServerAddress.value,
         scrollPastEnd: this.refs.previewScrollPastEnd.checked,
+        scrollSync: this.refs.previewScrollSync.checked,
         smartQuotes: this.refs.previewSmartQuotes.checked,
         breaks: this.refs.previewBreaks.checked,
         smartArrows: this.refs.previewSmartArrows.checked,
@@ -226,6 +239,16 @@ class UiTab extends React.Component {
             </div>
           </div>
 
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.ui.showMenuBar}
+                ref='showMenuBar'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Show menu bar')}
+            </label>
+          </div>
           <div styleName='group-checkBoxSection'>
             <label>
               <input onChange={(e) => this.handleUIChange(e)}
@@ -246,16 +269,6 @@ class UiTab extends React.Component {
               {i18n.__('Show a confirmation dialog when deleting notes')}
             </label>
           </div>
-          <div styleName='group-checkBoxSection'>
-            <label>
-              <input onChange={(e) => this.handleUIChange(e)}
-                checked={this.state.config.ui.showOnlyRelatedTags}
-                ref='showOnlyRelatedTags'
-                type='checkbox'
-              />&nbsp;
-              {i18n.__('Show only related tags')}
-            </label>
-          </div>
           {
             global.process.platform === 'win32'
             ? <div styleName='group-checkBoxSection'>
@@ -271,6 +284,64 @@ class UiTab extends React.Component {
             </div>
             : null
           }
+
+          <div styleName='group-header2'>Tags</div>
+
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.ui.saveTagsAlphabetically}
+                ref='saveTagsAlphabetically'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Save tags of a note in alphabetical order')}
+            </label>
+          </div>
+
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.ui.showTagsAlphabetically}
+                ref='showTagsAlphabetically'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Show tags of a note in alphabetical order')}
+            </label>
+          </div>
+
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.ui.showOnlyRelatedTags}
+                ref='showOnlyRelatedTags'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Show only related tags')}
+            </label>
+          </div>
+
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.ui.enableLiveNoteCounts}
+                ref='enableLiveNoteCounts'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Enable live count of notes')}
+            </label>
+          </div>
+
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.ui.tagNewNoteWithFilteringTags}
+                ref='tagNewNoteWithFilteringTags'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('New notes are tagged with the filtering tags')}
+            </label>
+          </div>
+
           <div styleName='group-header2'>Editor</div>
 
           <div styleName='group-section'>
@@ -421,6 +492,7 @@ class UiTab extends React.Component {
                 ref='editorSnippetDefaultLanguage'
                 onChange={(e) => this.handleUIChange(e)}
               >
+                <option key='Auto Detect' value='Auto Detect'>{i18n.__('Auto Detect')}</option>
                 {
                   _.sortBy(CodeMirror.modeInfo.map(mode => mode.name)).map(name => (<option key={name} value={name}>{name}</option>))
                 }
@@ -428,6 +500,31 @@ class UiTab extends React.Component {
             </div>
           </div>
 
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Front matter title field')}
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                ref='frontMatterTitleField'
+                value={config.editor.frontMatterTitleField}
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>
+
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.enableFrontMatterTitle}
+                ref='enableFrontMatterTitle'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Extract title from front matter')}
+            </label>
+          </div>
+
           <div styleName='group-checkBoxSection'>
             <label>
               <input onChange={(e) => this.handleUIChange(e)}
@@ -472,6 +569,70 @@ class UiTab extends React.Component {
             </label>
           </div>
 
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.enableSmartPaste}
+                ref='enableSmartPaste'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Enable HTML paste')}
+            </label>
+          </div>
+
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.spellcheck}
+                ref='spellcheck'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Enable spellcheck - Experimental feature!! :)')}
+            </label>
+          </div>
+
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Matching character pairs')}
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                value={this.state.config.editor.matchingPairs}
+                ref='matchingPairs'
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>
+
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Matching character triples')}
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                value={this.state.config.editor.matchingTriples}
+                ref='matchingTriples'
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>
+
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Exploding character pairs')}
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                value={this.state.config.editor.explodingPairs}
+                ref='explodingPairs'
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>
+
           <div styleName='group-header2'>{i18n.__('Preview')}</div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>
@@ -499,6 +660,7 @@ class UiTab extends React.Component {
               />
             </div>
           </div>
+
           <div styleName='group-section'>
             <div styleName='group-section-label'>{i18n.__('Code Block Theme')}</div>
             <div styleName='group-section-control'>
@@ -534,6 +696,16 @@ class UiTab extends React.Component {
               {i18n.__('Allow preview to scroll past the last line')}
             </label>
           </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.scrollSync}
+                ref='previewScrollSync'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('When scrolling, synchronize preview with editor')}
+            </label>
+          </div>
           <div styleName='group-checkBoxSection'>
             <label>
               <input onChange={(e) => this.handleUIChange(e)}

browser/main/store.js

@@ -44,7 +44,9 @@ function data (state = defaultDataMap(), action) {
         const folderNoteSet = getOrInitItem(state.folderNoteMap, folderKey)
         folderNoteSet.add(uniqueKey)
 
-        assignToTags(note.tags, state, uniqueKey)
+        if (!note.isTrashed) {
+          assignToTags(note.tags, state, uniqueKey)
+        }
       })
       return state
     case 'UPDATE_NOTE':
@@ -113,7 +115,6 @@ function data (state = defaultDataMap(), action) {
 
         // If storage chanced, origin key must be discarded
         if (originKey !== uniqueKey) {
-          console.log('diffrent storage')
           // From isStarred
           if (originNote.isStarred) {
             state.starredSet = new Set(state.starredSet)

browser/styles/Detail/TagSelect.styl

@@ -4,8 +4,10 @@
     border none
     background-color transparent
     outline none
-    padding 0 4px
+    padding 2px 4px
+    margin 0px 2px 2px
     font-size 13px
+    height 23px
 
   ul
     position fixed

browser/styles/index.styl

@@ -240,10 +240,8 @@ navWhiteButtonColor()
   &:hover
     background-color alpha($ui-button--active-backgroundColor, 20%)
     transition  0.15s
-    color $ui-text-color
   &:active, &:active:hover
     background-color $ui-button--active-backgroundColor
-    color $ui-text-color
     transition 0.15s
 
 // UI Button

contributing.md

@@ -1,12 +1,24 @@
 # Contributing to Boostnote (English)
 
 ### When you open an issue or a bug report
-There is no issue template, but there is a request.
-
-**Please paste screenshots of Boostnote with the developer tool open**
+There is an issue template for you to follow. Please provide as much information as you can according to the template.
 
 Thank you in advance for your help.
 
+### When you open a pull request
+There is a pull request template for your to follow. Please fill in the template before submitting your code. Your pull request will be reviewed faster if we know exactly what it does.
+
+Make sure that you have:
+- Checked [`code_style.md`](docs/code_style.md) for information on code style
+- Write tests for your code and run test with the following command
+```
+npm run test
+```
+- Lint your code using the following command
+```
+npm run lint
+```
+
 ### Concerning Copyright
 
 By making a pull request you agree to transfer ownership of your code to BoostIO.

dev-scripts/dev.js

@@ -49,7 +49,7 @@ function startServer () {
 }
 
 function startElectron () {
-  spawn(electron, ['--hot', './index.js'])
+  spawn(electron, ['--hot', './index.js'], { stdio: 'inherit' })
     .on('close', () => {
       server.close()
     })

dictionaries/de_DE/LICENSE

@@ -0,0 +1,342 @@
+From https://github.com/elastic/hunspell/blob/master/dicts/de_DE/README_de_DE.txt
+
+		    GNU GENERAL PUBLIC LICENSE
+		       Version 2, June 1991
+
+ Copyright (C) 1989, 1991 Free Software Foundation, Inc.
+     59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+			    Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+License is intended to guarantee your freedom to share and change free
+software--to make sure the software is free for all its users.  This
+General Public License applies to most of the Free Software
+Foundation's software and to any other program whose authors commit to
+using it.  (Some other Free Software Foundation software is covered by
+the GNU Library General Public License instead.)  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+this service if you wish), that you receive source code or can get it
+if you want it, that you can change the software or use pieces of it
+in new free programs; and that you know you can do these things.
+
+  To protect your rights, we need to make restrictions that forbid
+anyone to deny you these rights or to ask you to surrender the rights.
+These restrictions translate to certain responsibilities for you if you
+distribute copies of the software, or if you modify it.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must give the recipients all the rights that
+you have.  You must make sure that they, too, receive or can get the
+source code.  And you must show them these terms so they know their
+rights.
+
+  We protect your rights with two steps: (1) copyright the software, and
+(2) offer you this license which gives you legal permission to copy,
+distribute and/or modify the software.
+
+  Also, for each author's protection and ours, we want to make certain
+that everyone understands that there is no warranty for this free
+software.  If the software is modified by someone else and passed on, we
+want its recipients to know that what they have is not the original, so
+that any problems introduced by others will not reflect on the original
+authors' reputations.
+
+  Finally, any free program is threatened constantly by software
+patents.  We wish to avoid the danger that redistributors of a free
+program will individually obtain patent licenses, in effect making the
+program proprietary.  To prevent this, we have made it clear that any
+patent must be licensed for everyone's free use or not licensed at all.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+		    GNU GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License applies to any program or other work which contains
+a notice placed by the copyright holder saying it may be distributed
+under the terms of this General Public License.  The "Program", below,
+refers to any such program or work, and a "work based on the Program"
+means either the Program or any derivative work under copyright law:
+that is to say, a work containing the Program or a portion of it,
+either verbatim or with modifications and/or translated into another
+language.  (Hereinafter, translation is included without limitation in
+the term "modification".)  Each licensee is addressed as "you".
+
+Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running the Program is not restricted, and the output from the Program
+is covered only if its contents constitute a work based on the
+Program (independent of having been made by running the Program).
+Whether that is true depends on what the Program does.
+
+  1. You may copy and distribute verbatim copies of the Program's
+source code as you receive it, in any medium, provided that you
+conspicuously and appropriately publish on each copy an appropriate
+copyright notice and disclaimer of warranty; keep intact all the
+notices that refer to this License and to the absence of any warranty;
+and give any other recipients of the Program a copy of this License
+along with the Program.
+
+You may charge a fee for the physical act of transferring a copy, and
+you may at your option offer warranty protection in exchange for a fee.
+
+  2. You may modify your copy or copies of the Program or any portion
+of it, thus forming a work based on the Program, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) You must cause the modified files to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    b) You must cause any work that you distribute or publish, that in
+    whole or in part contains or is derived from the Program or any
+    part thereof, to be licensed as a whole at no charge to all third
+    parties under the terms of this License.
+
+    c) If the modified program normally reads commands interactively
+    when run, you must cause it, when started running for such
+    interactive use in the most ordinary way, to print or display an
+    announcement including an appropriate copyright notice and a
+    notice that there is no warranty (or else, saying that you provide
+    a warranty) and that users may redistribute the program under
+    these conditions, and telling the user how to view a copy of this
+    License.  (Exception: if the Program itself is interactive but
+    does not normally print such an announcement, your work based on
+    the Program is not required to print an announcement.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Program,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Program, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Program.
+
+In addition, mere aggregation of another work not based on the Program
+with the Program (or with a work based on the Program) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may copy and distribute the Program (or a work based on it,
+under Section 2) in object code or executable form under the terms of
+Sections 1 and 2 above provided that you also do one of the following:
+
+    a) Accompany it with the complete corresponding machine-readable
+    source code, which must be distributed under the terms of Sections
+    1 and 2 above on a medium customarily used for software interchange; or,
+
+    b) Accompany it with a written offer, valid for at least three
+    years, to give any third party, for a charge no more than your
+    cost of physically performing source distribution, a complete
+    machine-readable copy of the corresponding source code, to be
+    distributed under the terms of Sections 1 and 2 above on a medium
+    customarily used for software interchange; or,
+
+    c) Accompany it with the information you received as to the offer
+    to distribute corresponding source code.  (This alternative is
+    allowed only for noncommercial distribution and only if you
+    received the program in object code or executable form with such
+    an offer, in accord with Subsection b above.)
+
+The source code for a work means the preferred form of the work for
+making modifications to it.  For an executable work, complete source
+code means all the source code for all modules it contains, plus any
+associated interface definition files, plus the scripts used to
+control compilation and installation of the executable.  However, as a
+special exception, the source code distributed need not include
+anything that is normally distributed (in either source or binary
+form) with the major components (compiler, kernel, and so on) of the
+operating system on which the executable runs, unless that component
+itself accompanies the executable.
+
+If distribution of executable or object code is made by offering
+access to copy from a designated place, then offering equivalent
+access to copy the source code from the same place counts as
+distribution of the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  4. You may not copy, modify, sublicense, or distribute the Program
+except as expressly provided under this License.  Any attempt
+otherwise to copy, modify, sublicense or distribute the Program is
+void, and will automatically terminate your rights under this License.
+However, parties who have received copies, or rights, from you under
+this License will not have their licenses terminated so long as such
+parties remain in full compliance.
+
+  5. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Program or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Program (or any work based on the
+Program), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Program or works based on it.
+
+  6. Each time you redistribute the Program (or any work based on the
+Program), the recipient automatically receives a license from the
+original licensor to copy, distribute or modify the Program subject to
+these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties to
+this License.
+
+  7. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Program at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Program by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Program.
+
+If any portion of this section is held invalid or unenforceable under
+any particular circumstance, the balance of the section is intended to
+apply and the section as a whole is intended to apply in other
+circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system, which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  8. If the distribution and/or use of the Program is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Program under this License
+may add an explicit geographical distribution limitation excluding
+those countries, so that distribution is permitted only in or among
+countries not thus excluded.  In such case, this License incorporates
+the limitation as if written in the body of this License.
+
+  9. The Free Software Foundation may publish revised and/or new versions
+of the General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Program
+specifies a version number of this License which applies to it and "any
+later version", you have the option of following the terms and conditions
+either of that version or of any later version published by the Free
+Software Foundation.  If the Program does not specify a version number of
+this License, you may choose any version ever published by the Free Software
+Foundation.
+
+  10. If you wish to incorporate parts of the Program into other free
+programs whose distribution conditions are different, write to the author
+to ask for permission.  For software which is copyrighted by the Free
+Software Foundation, write to the Free Software Foundation; we sometimes
+make exceptions for this.  Our decision will be guided by the two goals
+of preserving the free status of all derivatives of our free software and
+of promoting the sharing and reuse of software generally.
+
+			    NO WARRANTY
+
+  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
+FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
+OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
+PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
+OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
+TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
+PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
+REPAIR OR CORRECTION.
+
+  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
+REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
+OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
+TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
+YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
+PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGES.
+
+		     END OF TERMS AND CONDITIONS
+
+	    How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) 19yy  <name of author>
+
+    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
+    the Free Software Foundation; either version 2 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program; if not, write to the Free Software
+    Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
+
+
+Also add information on how to contact you by electronic and paper mail.
+
+If the program is interactive, make it output a short notice like this
+when it starts in an interactive mode:
+
+    Gnomovision version 69, Copyright (C) 19yy name of author
+    Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, the commands you use may
+be called something other than `show w' and `show c'; they could even be
+mouse-clicks or menu items--whatever suits your program.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the program, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the program
+  `Gnomovision' (which makes passes at compilers) written by James Hacker.
+
+  <signature of Ty Coon>, 1 April 1989
+  Ty Coon, President of Vice
+
+This General Public License does not permit incorporating your program into
+proprietary programs.  If your program is a subroutine library, you may
+consider it more useful to permit linking proprietary applications with the
+library.  If this is what you want to do, use the GNU Library General
+Public License instead of this License.

dictionaries/de_DE/de_DE.aff

@@ -0,0 +1,501 @@
+SET ISO8859-1
+TRY esianrtolcdugmphbyfvkwäüößáéêàâñESIANRTOLCDUGMPHBYFVKWÄÜÖ
+
+
+PFX G N 1
+PFX G   0     ge           .
+
+
+
+PFX U Y 1
+PFX U   0     un           .
+
+
+
+PFX V Y 1
+PFX V   0     ver          .
+
+
+
+SFX F N 7
+SFX F   0     nen          in
+SFX F   e     in           e
+SFX F   e     innen        e
+SFX F   0     in           [^i]n
+SFX F   0     innen        [^i]n
+SFX F   0     in           [^en]
+SFX F   0     innen        [^en]
+
+
+
+
+
+SFX L N 12
+SFX L   0       tlich      n
+SFX L   0       tliche     n
+SFX L   0       tlicher    n
+SFX L   0       tliches    n
+SFX L   0       tlichem    n
+SFX L   0       tlichen    n
+SFX L   0       lich       [^n]
+SFX L   0       liche      [^n]
+SFX L   0       licher     [^n]
+SFX L   0       liches     [^n]
+SFX L   0       lichem     [^n]
+SFX L   0       lichen     [^n]
+
+
+
+
+
+
+SFX H N 2
+SFX H   0       heit       .
+SFX H   0       heiten     .
+
+
+SFX K N 2
+SFX K   0       keit       .
+SFX K   0       keiten     .
+
+
+
+SFX M N 12
+SFX M   0       chen       [^s][^s]
+SFX M   0       chens      [^s][^s]
+SFX M   0       chen       [^e]
+SFX M   0       chens      [^e]
+SFX M   ass     ässchen    ass
+SFX M   ass     ässchens   ass
+SFX M   oss     össchen    oss
+SFX M   oss     össchens   oss
+SFX M   uss     üsschen    uss
+SFX M   uss     üsschens   uss
+SFX M   e       chen       e
+SFX M   e       chens      e
+
+
+
+SFX A Y 46
+SFX A   0       r          e
+SFX A   0       n          e
+SFX A   0       m          e
+SFX A   0       s          e
+SFX A   0       e          [^elr]
+SFX A   0       er         [^elr]
+SFX A   0       en         [^elr]
+SFX A   0       em         [^elr]
+SFX A   0       es         [^elr]
+SFX A   0       e          [^e][rl]
+SFX A   0       er         [^e][rl]
+SFX A   0       en         [^e][rl]
+SFX A   0       em         [^e][rl]
+SFX A   0       es         [^e][rl]
+SFX A   0       e          [^u]er
+SFX A   0       er         [^u]er
+SFX A   0       en         [^u]er
+SFX A   0       em         [^u]er
+SFX A   0       es         [^u]er
+SFX A   er      re         uer
+SFX A   er      rer        uer
+SFX A   er      ren        uer
+SFX A   er      rem        uer
+SFX A   er      res        uer
+SFX A   0       e          [eil]el
+SFX A   0       er         [eil]el
+SFX A   0       en         [eil]el
+SFX A   0       em         [eil]el
+SFX A   0       es         [eil]el
+SFX A   el      le         [^eil]el
+SFX A   el      ler        [^eil]el
+SFX A   el      len        [^eil]el
+SFX A   el      lem        [^eil]el
+SFX A   el      les        [^eil]el
+SFX A   lig     elig       [^aeiouhlräüö]lig
+SFX A   lig     elige      [^aeiouhlräüö]lig
+SFX A   lig     eliger     [^aeiouhlräüö]lig
+SFX A   lig     eligen     [^aeiouhlräüö]lig
+SFX A   lig     eligem     [^aeiouhlräüö]lig
+SFX A   lig     eliges     [^aeiouhlräüö]lig
+SFX A   erig    rig        [^hi]erig
+SFX A   erig    rige       [^hi]erig
+SFX A   erig    riger      [^hi]erig
+SFX A   erig    rigen      [^hi]erig
+SFX A   erig    rigem      [^hi]erig
+SFX A   erig    riges      [^hi]erig
+
+
+
+SFX C Y 80
+SFX C   0       ere        [^elr]
+SFX C   0       erer       [^elr]
+SFX C   0       eren       [^elr]
+SFX C   0       erem       [^elr]
+SFX C   0       eres       [^elr]
+SFX C   0       re         e
+SFX C   0       rer        e
+SFX C   0       ren        e
+SFX C   0       rem        e
+SFX C   0       res        e
+SFX C   0       ere        [^e][lr]
+SFX C   0       erer       [^e][lr]
+SFX C   0       eren       [^e][lr]
+SFX C   0       erem       [^e][lr]
+SFX C   0       eres       [^e][lr]
+SFX C   el      lere       el
+SFX C   el      lerer      el
+SFX C   el      leren      el
+SFX C   el      lerem      el
+SFX C   el      leres      el
+SFX C   er      rere       uer
+SFX C   er      rerer      uer
+SFX C   er      reren      uer
+SFX C   er      rerem      uer
+SFX C   er      reres      uer
+SFX C   0       ere        [^u]er
+SFX C   0       erer       [^u]er
+SFX C   0       eren       [^u]er
+SFX C   0       erem       [^u]er
+SFX C   0       eres       [^u]er
+SFX C   lig     eligere    [^aeiouhlräüö]lig
+SFX C   lig     eligerer   [^aeiouhlräüö]lig
+SFX C   lig     eligeren   [^aeiouhlräüö]lig
+SFX C   lig     eligerem   [^aeiouhlräüö]lig
+SFX C   lig     eligeres   [^aeiouhlräüö]lig
+SFX C   erig    rigere     [^hi]erig
+SFX C   erig    rigerer    [^hi]erig
+SFX C   erig    rigeren    [^hi]erig
+SFX C   erig    rigerem    [^hi]erig
+SFX C   erig    rigeres    [^hi]erig
+SFX C   0       este       [kßsuxz]
+SFX C   0       ester      [kßsuxz]
+SFX C   0       esten      [kßsuxz]
+SFX C   0       estem      [kßsuxz]
+SFX C   0       estes      [kßsuxz]
+SFX C   0       ste        et
+SFX C   0       ster       et
+SFX C   0       sten       et
+SFX C   0       stem       et
+SFX C   0       stes       et
+SFX C   0       este       [^e]t
+SFX C   0       ester      [^e]t
+SFX C   0       esten      [^e]t
+SFX C   0       estem      [^e]t
+SFX C   0       estes      [^e]t
+SFX C   0       ste        [^kßstxz]
+SFX C   0       ster       [^kßstxz]
+SFX C   0       sten       [^kßstxz]
+SFX C   0       stem       [^kßstxz]
+SFX C   0       stes       [^kßstxz]
+SFX C   0       ste        nd
+SFX C   0       ster       nd
+SFX C   0       sten       nd
+SFX C   0       stem       nd
+SFX C   0       stes       nd
+SFX C   0       este       [^n]d
+SFX C   0       ester      [^n]d
+SFX C   0       esten      [^n]d
+SFX C   0       estem      [^n]d
+SFX C   0       estes      [^n]d
+SFX C   lig     eligste    [^aeiouhlräüö]lig
+SFX C   lig     eligster   [^aeiouhlräüö]lig
+SFX C   lig     eligsten   [^aeiouhlräüö]lig
+SFX C   lig     eligstem   [^aeiouhlräüö]lig
+SFX C   lig     eligstes   [^aeiouhlräüö]lig
+SFX C   erig    rigste     [^hi]erig
+SFX C   erig    rigster    [^hi]erig
+SFX C   erig    rigsten    [^hi]erig
+SFX C   erig    rigstem    [^hi]erig
+SFX C   erig    rigstes    [^hi]erig
+
+
+
+
+
+
+SFX E Y 1
+SFX E   0       e          .
+
+
+SFX f Y 4
+SFX f   ph      f          ph
+SFX f   ph      fen        ph
+SFX f   phie    fie        phie
+SFX f   phie    fien       phie
+
+
+SFX N Y 1
+SFX N   0       n          .
+
+
+SFX P Y 1
+SFX P   0       en         .
+
+
+
+SFX p Y 24
+SFX p   auf     äufe      auf
+SFX p   auf     äufen     auf
+SFX p   aus     äuser     haus
+SFX p   aus     äusern    haus
+SFX p   arkt    ärkte     markt
+SFX p   arkt    ärkten    markt
+SFX p   ang     änge      ang
+SFX p   ang     ängen     ang
+SFX p   uß      üße       uß
+SFX p   uß      üßen      uß
+SFX p   oß      öße       oß
+SFX p   oß      ößen      oß
+SFX p   aum     äume      aum
+SFX p   aum     äumen     aum
+SFX p   ag      äge       ag
+SFX p   ag      ägen      ag
+SFX p   ug      üge       ug
+SFX p   ug      ügen      ug
+SFX p   all     älle      all
+SFX p   all     ällen     all
+SFX p   ass     ässe      ass
+SFX p   ass     ässen     ass
+SFX p   uss     üsse      uss
+SFX p   uss     üssen     uss
+
+
+
+
+
+SFX R Y 3
+SFX R   0       er         [^e]
+SFX R   0       ern        [^e]
+SFX R   0       r          e
+
+
+SFX S Y 1
+SFX S   0       s          .
+
+
+SFX q Y 2
+SFX q   s       sse        s
+SFX q   s       ssen       s
+
+
+SFX Q Y 3
+SFX Q   s       sse        s
+SFX Q   s       ssen       s
+SFX Q   s       sses       s
+
+
+
+
+
+SFX T Y 1
+SFX T   0       es         .
+
+
+
+
+SFX J Y 12
+SFX J   n       ung        [bgkpßsz]eln
+SFX J   n       ungen      [bgkpßsz]eln
+SFX J   eln     lung       eln
+SFX J   n       ung        ern
+SFX J   en      ung        en
+SFX J   eln     lungen     eln
+SFX J   n       ungen      ern
+SFX J   en      ungen      en
+SFX J   0       ung        [^n]
+SFX J   0       ungen      [^n]
+SFX J   el      lung       el
+SFX J   el      lungen     el
+
+
+SFX B N 12
+SFX B   n       bar        e[lr]n
+SFX B   n       bare       e[lr]n
+SFX B   n       baren      e[lr]n
+SFX B   n       barer      e[lr]n
+SFX B   n       bares      e[lr]n
+SFX B   n       barem      e[lr]n
+SFX B   en      bar        en
+SFX B   en      bare       en
+SFX B   en      baren      en
+SFX B   en      barer      en
+SFX B   en      bares      en
+SFX B   en      barem      en
+
+
+SFX D Y 6
+SFX D   0       d          n
+SFX D   0       de         n
+SFX D   0       den        n
+SFX D   0       der        n
+SFX D   0       des        n
+SFX D   0       dem        n
+
+
+
+SFX W Y 8
+SFX W   en      0          [^imn]en
+SFX W   en      0          eien
+SFX W   en      0          [^bght][mn]en
+SFX W   en      0          [^c]hnen
+SFX W   n       0          e[lr]n
+SFX W   st      0          [^s]st
+SFX W   t       0          sst
+SFX W   t       0          [^s]t
+
+
+
+
+
+
+
+
+
+
+
+
+
+SFX I Y 16
+SFX I   n       0          en
+SFX I   eln     le         eln
+SFX I   n       e          eln
+SFX I   ern     re         ern
+SFX I   n       e          ern
+SFX I   n       t          e[lr]n
+SFX I   n       t          [dt]en
+SFX I   en      t          [^dimnt]en
+SFX I   en      t          eien
+SFX I   n       t          [^e]ien
+SFX I   n       t          chnen
+SFX I   en      t          [^c]h[mn]en
+SFX I   n       t          [^aäehilmnoöuür][mn]en
+SFX I   en      t          [aäeilmnoöuür][mn]en
+SFX I   n       e          un
+SFX I   n       t          un
+
+
+SFX X Y 26
+SFX X   n       t          e[lr]n
+SFX X   n       t          [dtw]en
+SFX X   en      t          eien
+SFX X   n       t          [^e]ien
+SFX X   en      t          [^ditmnw]en
+SFX X   n       t          chnen
+SFX X   en      t          [^c]h[mn]en
+SFX X   n       t          [^aäehilmnoöuür][mn]en
+SFX X   en      t          [aäeilmnoöuür][mn]en
+SFX X   n       t          un
+SFX X   st      0          tst
+SFX X   n       st         e[lr]n
+SFX X   n       st         [dtw]en
+SFX X   en      st         [^dimnßstwzx]en
+SFX X   en      st         eien
+SFX X   n       st         [^e]ien
+SFX X   n       st         chnen
+SFX X   en      st         [^c]h[mn]en
+SFX X   n       st         [^aäehilmnoöuür][mn]en
+SFX X   en      st         [aäeilmnoöuür][mn]en
+SFX X   n       st         un
+SFX X   n       st         [ßsxz]en
+SFX X   n       st         ssen
+SFX X   n       st         schen
+SFX X   t       st         [^sz]t
+SFX X   t       est        zt
+
+
+SFX Y Y 36
+SFX Y   n       te         e[lr]n
+SFX Y   n       te         [dtw]en
+SFX Y   en      te         [^dimntw]en
+SFX Y   en      te         eien
+SFX Y   n       te         [^e]ien
+SFX Y   n       te         chnen
+SFX Y   en      te         [^c]h[mn]en
+SFX Y   n       te         [^aäehilmnoöuür][mn]en
+SFX Y   en      te         [aäeilmnoöuür][mn]en
+SFX Y   n       test       e[lr]n
+SFX Y   n       test       [dtw]en
+SFX Y   en      test       [^dimntw]en
+SFX Y   en      test       eien
+SFX Y   n       test       [^e]ien
+SFX Y   n       test       chnen
+SFX Y   en      test       [^c]h[mn]en
+SFX Y   n       test       [^aäehilmnoöuür][mn]en
+SFX Y   en      test       [aäeilmnoöuür][mn]en
+SFX Y   n       tet        e[lr]n
+SFX Y   n       tet        [dtw]en
+SFX Y   en      tet        [^dimntw]en
+SFX Y   en      tet        eien
+SFX Y   n       tet        [^e]ien
+SFX Y   n       tet        chnen
+SFX Y   en      tet        [^c]h[mn]en
+SFX Y   n       tet        [^aäehilmnoöuür][mn]en
+SFX Y   en      tet        [aäeilmnoöuür][mn]en
+SFX Y   n       ten        e[lr]n
+SFX Y   n       ten        [dtw]en
+SFX Y   en      ten        [^dimntw]en
+SFX Y   en      ten        eien
+SFX Y   n       ten        [^e]ien
+SFX Y   n       ten        chnen
+SFX Y   en      ten        [^c]h[mn]en
+SFX Y   n       ten        [^aäehilmnoöuür][mn]en
+SFX Y   en      ten        [aäeilmnoöuür][mn]en
+
+
+
+SFX Z Y 13
+SFX Z   0       st         [^hßsz]
+SFX Z   0       st         [^c]h
+SFX Z   0       st         [^s]ch
+SFX Z   0       est        [dfkstz]
+SFX Z   0       est        ch
+SFX Z   0       est        [au]ß
+SFX Z   0       est        ieß
+SFX Z   0       est        [io]ss
+SFX Z   0       t          [^dt]
+SFX Z   0       et         [dt]
+SFX Z   0       n          e
+SFX Z   0       en         ie
+SFX Z   0       en         [^e]
+
+
+SFX O Y 21
+SFX O   n       tes        e[lr]n
+SFX O   n       tes        [dtw]en
+SFX O   en      tes        [^dmntw]en
+SFX O   n       tes        chnen
+SFX O   en      tes        [^c]h[mn]en
+SFX O   n       tes        [^aäehilmnoöuür][mn]en
+SFX O   en      tes        [aäeilmnoöuür][mn]en
+SFX O   n       ter        e[lr]n
+SFX O   n       ter        [dtw]en
+SFX O   en      ter        [^dmntw]en
+SFX O   n       ter        chnen
+SFX O   en      ter        [^c]h[mn]en
+SFX O   n       ter        [^aäehilmnoöuür][mn]en
+SFX O   en      ter        [aäeilmnoöuür][mn]en
+SFX O   n       tem        e[lr]n
+SFX O   n       tem        [dtw]en
+SFX O   en      tem        [^dmntw]en
+SFX O   n       tem        chnen
+SFX O   en      tem        [^c]h[mn]en
+SFX O   n       tem        [^aäehilmnoöuür][mn]en
+SFX O   en      tem        [aäeilmnoöuür][mn]en
+
+REP 15
+REP f ph
+REP ph f
+REP ß ss
+REP ss ß
+REP s ss
+REP ss s
+REP i ie
+REP ie i
+REP ee e
+REP o oh
+REP oh o
+REP a ah
+REP ah a
+REP e eh
+REP eh e
+