Merge branch 'master' into fix-autocomplete-codeblock

2026-01-26 07:07:17 +00:00 · 2018-12-27 22:57:05 +01:00
parent 87515dbd3f 05da826c24
commit 12f9b9342d
100 changed files with 221693 additions and 712 deletions
--- a/browser/main/Detail/InfoPanel.js
+++ b/browser/main/Detail/InfoPanel.js
@@ -70,22 +70,22 @@ 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) => print(e, 'print')}>
            <i className='fa fa-print' />
            <p>{i18n.__('Print')}</p>
          </button>
--- a/browser/main/Detail/InfoPanelTrashed.js
+++ b/browser/main/Detail/InfoPanelTrashed.js
@@ -31,17 +31,17 @@ 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>
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -39,12 +39,14 @@ class MarkdownNoteDetail extends React.Component {
      isMovingNote: false,
      note: Object.assign({
        title: '',
-        content: ''
+        content: '',
+        linesHighlighted: []
      }, props.note),
      isLockButtonShown: false,
      isLocked: false,
      editorType: props.config.editor.type
    }
+
    this.dispatchTimer = null

    this.toggleLockButton = this.handleToggleLockButton.bind(this)
@@ -71,7 +73,7 @@ class MarkdownNoteDetail extends React.Component {
    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()
@@ -190,6 +192,36 @@ class MarkdownNoteDetail extends React.Component {
    ee.emit('export:save-html')
  }

+  handleKeyDown (e) {
+    switch (e.keyCode) {
+      // tab key
+      case 9:
+        if (e.ctrlKey && !e.shiftKey) {
+          e.preventDefault()
+          this.jumpNextTab()
+        } else if (e.ctrlKey && e.shiftKey) {
+          e.preventDefault()
+          this.jumpPrevTab()
+        } else if (!e.ctrlKey && !e.shiftKey && e.target === this.refs.description) {
+          e.preventDefault()
+          this.focusEditor()
+        }
+        break
+      // I key
+      case 73:
+        {
+          const isSuper = global.process.platform === 'darwin'
+            ? e.metaKey
+            : e.ctrlKey
+          if (isSuper) {
+            e.preventDefault()
+            this.handleInfoButtonClick(e)
+          }
+        }
+        break
+    }
+  }
+
  handleTrashButtonClick (e) {
    const { note } = this.state
    const { isTrashed } = note
@@ -331,6 +363,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}
      />
@@ -341,6 +374,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}
      />
@@ -458,6 +492,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}
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -48,7 +48,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 +76,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
@@ -410,6 +411,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
@@ -434,6 +437,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:
        {
@@ -590,7 +605,8 @@ class SnippetNoteDetail extends React.Component {
    note.snippets = note.snippets.concat([{
      name: '',
      mode: config.editor.snippetDefaultLanguage || 'text',
-      content: ''
+      content: '',
+      linesHighlighted: []
    }])
    const snippetIndex = note.snippets.length - 1

@@ -633,11 +649,18 @@ class SnippetNoteDetail extends React.Component {
    if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none'
  }

-  showWarning () {
+  showWarning (e, msg) {
+    const warningMessage = (msg) => ({
+      'export-txt': 'Text export',
+      'export-md': 'Markdown export',
+      'export-html': 'HTML export',
+      'print': 'Print'
+    })[msg]
+
    dialog.showMessageBox(remote.getCurrentWindow(), {
      type: 'warning',
      message: 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')]
    })
  }
@@ -673,10 +696,8 @@ 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}}
@@ -685,6 +706,7 @@ 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}
@@ -693,18 +715,27 @@ class SnippetNoteDetail extends React.Component {
          : <CodeEditor styleName='tabView-content'
            mode={snippet.mode}
            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}
+            codeBlockMatchingPairs={config.editor.codeBlockMatchingPairs}
+            codeBlockMatchingTriples={config.editor.codeBlockMatchingTriples}
+            codeBlockExplodingPairs={config.editor.codeBlockExplodingPairs}
            keyMap={config.editor.keyMap}
            scrollPastEnd={config.editor.scrollPastEnd}
            fetchUrlTitle={config.editor.fetchUrlTitle}
            enableTableEditor={config.editor.enableTableEditor}
            onChange={(e) => this.handleCodeChange(index)(e)}
            ref={'code-' + index}
+            enableSmartPaste={config.editor.enableSmartPaste}
+            hotkey={config.hotkey}
          />
        }
      </div>
@@ -788,7 +819,9 @@ class SnippetNoteDetail extends React.Component {
          createdAt={formatDate(note.createdAt)}
          exportAsMd={this.showWarning}
          exportAsTxt={this.showWarning}
+          exportAsHtml={this.showWarning}
          type={note.type}
+          print={this.showWarning}
        />
      </div>
    </div>
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/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
--- a/browser/main/Detail/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -45,8 +45,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: ''
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -96,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: []
              }
            ]
          })
@@ -167,6 +169,8 @@ class Main extends React.Component {
      }
    })

+    delete CodeMirror.keyMap.emacs['Ctrl-V']
+
    eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
  }

@@ -232,8 +236,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
      }
--- a/browser/main/NewNoteButton/index.js
+++ b/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
      })
    }
--- a/browser/main/NoteList/index.js
+++ b/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'
@@ -64,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)
@@ -83,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: []
    }

@@ -94,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)
@@ -116,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)
@@ -171,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
      }
@@ -199,6 +202,7 @@ class NoteList extends React.Component {
    }
    let { selectedNoteKeys } = this.state
    const { shiftKeyDown } = this.state
+    const { location } = this.props

    let targetIndex = this.getTargetIndex()

@@ -215,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')
  }
@@ -226,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
@@ -248,7 +253,7 @@ class NoteList extends React.Component {
      selectedNoteKeys.push(nextNoteKey)
    }

-    this.focusNote(selectedNoteKeys, nextNoteKey)
+    this.focusNote(selectedNoteKeys, nextNoteKey, location.pathname)

    ee.emit('list:moved')
  }
@@ -260,13 +265,13 @@ class NoteList extends React.Component {
    }

    const selectedNoteKeys = [noteHash]
-    this.focusNote(selectedNoteKeys, noteHash)
+    this.focusNote(selectedNoteKeys, noteHash, '/home')

    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) {
@@ -274,12 +279,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()
@@ -306,6 +305,8 @@ class NoteList extends React.Component {

    if (e.shiftKey) {
      this.setState({ shiftKeyDown: true })
+    } else if (e.ctrlKey) {
+      this.setState({ ctrlKeyDown: true })
    }
  }

@@ -313,6 +314,10 @@ class NoteList extends React.Component {
    if (!e.shiftKey) {
      this.setState({ shiftKeyDown: false })
    }
+
+    if (!e.ctrlKey) {
+      this.setState({ ctrlKeyDown: false })
+    }
  }

  getNotes () {
@@ -389,25 +394,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({
@@ -446,14 +491,21 @@ class NoteList extends React.Component {
    })
  }

-  alertIfSnippet () {
+  alertIfSnippet (msg) {
+    const warningMessage = (msg) => ({
+      'export-txt': 'Text export',
+      'export-md': 'Markdown export',
+      'export-html': 'HTML 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')]
      })
    }
  }
@@ -658,7 +710,8 @@ 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
      })
      .then((note) => {
        attachmentManagement.cloneAttachments(firstNote, note)
@@ -1076,4 +1129,4 @@ NoteList.propTypes = {
  })
 }

-export default debounceRender(CSSModules(NoteList, styles))
+export default CSSModules(NoteList, styles)
--- a/browser/main/SideNav/StorageItem.js
+++ b/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)
+          }}
        />
      )
    })
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -19,6 +19,7 @@ import {SortableContainer} from 'react-sortable-hoc'
 import i18n from 'browser/lib/i18n'
 import context from 'browser/lib/context'
 import { remote } from 'electron'
+import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'

 function matchActiveTags (tags, activeTags) {
  return _.every(activeTags, v => tags.indexOf(v) >= 0)
@@ -269,7 +270,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) {
@@ -301,7 +302,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) {
@@ -309,6 +310,8 @@ class SideNav extends React.Component {
    const deletionPromises = entries.map((note) => {
      return dataApi.deleteNote(note.storage, note.key)
    })
+    const { confirmDeletion } = this.props.config.ui
+    if (!confirmDeleteNote(confirmDeletion, true)) return
    Promise.all(deletionPromises)
    .then((arrayOfStorageAndNoteKeys) => {
      arrayOfStorageAndNoteKeys.forEach(({ storageKey, noteKey }) => {
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/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
--- a/browser/main/StatusBar/index.js
+++ b/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

--- a/browser/main/TopBar/index.js
+++ b/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
    })
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -25,7 +25,8 @@ export const DEFAULT_CONFIG = {
  hotkey: {
    toggleMain: OSX ? 'Command + Alt + L' : 'Super + Alt + E',
    toggleMode: OSX ? 'Command + Alt + M' : 'Ctrl + M',
-    deleteNote: OSX ? 'Command + Shift + Backspace' : 'Ctrl + Shift + Backspace'
+    deleteNote: OSX ? 'Command + Shift + Backspace' : 'Ctrl + Shift + Backspace',
+    pasteSmartly: OSX ? 'Command + Shift + V' : 'Ctrl + Shift + V'
  },
  ui: {
    language: 'en',
@@ -44,6 +45,12 @@ export const DEFAULT_CONFIG = {
    enableRulers: false,
    rulers: [80, 120],
    displayLineNumbers: true,
+    matchingPairs: '()[]{}\'\'""$$**``',
+    matchingTriples: '```"""\'\'\'',
+    explodingPairs: '[]{}``$$',
+    codeBlockMatchingPairs: '()[]{}\'\'""``',
+    codeBlockMatchingTriples: '',
+    codeBlockExplodingPairs: '[]{}``',
    switchPreview: 'BLUR', // 'BLUR', 'DBL_CLICK', 'RIGHTCLICK'
    delfaultStatus: 'PREVIEW', // 'PREVIEW', 'CODE'
    scrollPastEnd: false,
@@ -51,7 +58,9 @@ export const DEFAULT_CONFIG = {
    fetchUrlTitle: true,
    enableTableEditor: false,
    enableFrontMatterTitle: true,
-    frontMatterTitleField: 'title'
+    frontMatterTitleField: 'title',
+    spellcheck: false,
+    enableSmartPaste: false
  },
  preview: {
    fontSize: '14',
--- a/browser/main/lib/dataApi/attachmentManagement.js
+++ b/browser/main/lib/dataApi/attachmentManagement.js
@@ -227,7 +227,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))
  })
@@ -316,6 +324,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 handlePastNativeImage (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
@@ -539,6 +585,7 @@ module.exports = {
  generateAttachmentMarkdown,
  handleAttachmentDrop,
  handlePastImageEvent,
+  handlePastNativeImage,
  getAttachmentsInMarkdownContent,
  getAbsolutePathsOfAttachmentsInContent,
  removeStorageAndNoteReferences,
--- a/browser/main/lib/dataApi/copyFile.js
+++ b/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)
--- a/browser/main/lib/dataApi/createNote.js
+++ b/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
--- a/browser/main/lib/dataApi/createSnippet.js
+++ b/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)
--- a/browser/main/lib/dataApi/exportFolder.js
+++ b/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
@@ -45,9 +45,9 @@ function exportFolder (storageKey, folderKey, fileType, exportDir) {

      notes
        .filter(note => note.folder === folderKey && note.isTrashed === false && note.type === 'MARKDOWN_NOTE')
-        .forEach(snippet => {
-          const notePath = path.join(exportDir, `${filenamify(snippet.title, {replacement: '_'})}.${fileType}`)
-          fs.writeFileSync(notePath, snippet.content)
+        .forEach(note => {
+          const notePath = path.join(exportDir, `${filenamify(note.title, {replacement: '_'})}.${fileType}`)
+          exportNote(note.key, storage.path, note.content, notePath, null)
        })

      return {
--- a/browser/main/lib/dataApi/exportNote.js
+++ b/browser/main/lib/dataApi/exportNote.js
@@ -4,27 +4,43 @@ 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)
--- a/browser/main/lib/dataApi/migrateFromV5Storage.js
+++ b/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)
--- a/browser/main/lib/dataApi/updateNote.js
+++ b/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.')
--- a/browser/main/lib/dataApi/updateSnippet.js
+++ b/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)
--- a/browser/main/modals/NewNoteModal.js
+++ b/browser/main/modals/NewNoteModal.js
@@ -21,8 +21,8 @@ class NewNoteModal extends React.Component {
  }

  handleMarkdownNoteButtonClick (e) {
-    const { storage, folder, dispatch, location } = this.props
-    createMarkdownNote(storage, folder, dispatch, location).then(() => {
+    const { storage, folder, dispatch, location, params, config } = this.props
+    createMarkdownNote(storage, folder, dispatch, location, params, config).then(() => {
      setTimeout(this.props.close, 200)
    })
  }
@@ -35,8 +35,8 @@ class NewNoteModal extends React.Component {
  }

  handleSnippetNoteButtonClick (e) {
-    const { storage, folder, dispatch, location, config } = this.props
-    createSnippetNote(storage, folder, dispatch, location, config).then(() => {
+    const { storage, folder, dispatch, location, params, config } = this.props
+    createSnippetNote(storage, folder, dispatch, location, params, config).then(() => {
      setTimeout(this.props.close, 200)
    })
  }
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -29,6 +29,13 @@
  margin-right 10px
  font-size 14px

+.group-section-label-right
+  width 200px
+  text-align right
+  margin-right 10px
+  font-size 14px
+  padding-right 1.5rem
+
 .group-section-control
  flex 1
  margin-left 5px
--- a/browser/main/modals/PreferencesModal/HotkeyTab.js
+++ b/browser/main/modals/PreferencesModal/HotkeyTab.js
@@ -79,7 +79,8 @@ class HotkeyTab extends React.Component {
    config.hotkey = {
      toggleMain: this.refs.toggleMain.value,
      toggleMode: this.refs.toggleMode.value,
-      deleteNote: this.refs.deleteNote.value
+      deleteNote: this.refs.deleteNote.value,
+      pasteSmartly: this.refs.pasteSmartly.value
    }
    this.setState({
      config
@@ -149,6 +150,17 @@ class HotkeyTab extends React.Component {
              />
            </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)}
--- a/browser/main/modals/PreferencesModal/InfoTab.js
+++ b/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)}
--- a/browser/main/modals/PreferencesModal/SnippetEditor.js
+++ b/browser/main/modals/PreferencesModal/SnippetEditor.js
@@ -29,14 +29,14 @@ class SnippetEditor extends React.Component {
      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
      autoCloseBrackets: {
        codeBlock: {
-          pairs: '()[]{}\'\'""``',
-          triples: '',
-          explode: '[]{}``'
+          pairs: this.props.codeBlockMatchingPairs,
+          triples: this.props.codeBlockMatchingTriples,
+          explode: this.props.codeBlockExplodingPairs
        },
        markdown: {
-          pairs: '()[]{}\'\'""$$**``',
-          triples: '```"""\'\'\'',
-          explode: '[]{}``$$'
+          pairs: this.props.matchingPairs,
+          triples: this.props.matchingTriples,
+          explode: this.props.explodingPairs
        }
      },
      mode: 'null'
--- a/browser/main/modals/PreferencesModal/SnippetTab.js
+++ b/browser/main/modals/PreferencesModal/SnippetTab.js
@@ -136,6 +136,12 @@ 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}
+              codeBlockMatchingPairs={config.editor.codeBlockMatchingPairs}
+              codeBlockMatchingTriples={config.editor.codeBlockMatchingTriples}
+              codeBlockExplodingPairs={config.editor.codeBlockExplodingPairs}
              scrollPastEnd={config.editor.scrollPastEnd}
              onRef={ref => { this.snippetEditor = ref }} />
          </div>
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -68,6 +68,7 @@ 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,
@@ -94,7 +95,15 @@ class UiTab extends React.Component {
        fetchUrlTitle: this.refs.editorFetchUrlTitle.checked,
        enableTableEditor: this.refs.enableTableEditor.checked,
        enableFrontMatterTitle: this.refs.enableFrontMatterTitle.checked,
-        frontMatterTitleField: this.refs.frontMatterTitleField.value
+        frontMatterTitleField: this.refs.frontMatterTitleField.value,
+        matchingPairs: this.refs.matchingPairs.value,
+        matchingTriples: this.refs.matchingTriples.value,
+        explodingPairs: this.refs.explodingPairs.value,
+        codeBlockMatchingPairs: this.refs.codeBlockMatchingPairs.value,
+        codeBlockMatchingTriples: this.refs.codeBlockMatchingTriples.value,
+        codeBlockExplodingPairs: this.refs.codeBlockExplodingPairs.value,
+        spellcheck: this.refs.spellcheck.checked,
+        enableSmartPaste: this.refs.enableSmartPaste.checked
      },
      preview: {
        fontSize: this.refs.previewFontSize.value,
@@ -267,6 +276,7 @@ class UiTab extends React.Component {
            </div>
            : null
          }
+
          <div styleName='group-header2'>Tags</div>

          <div styleName='group-checkBoxSection'>
@@ -313,6 +323,17 @@ class UiTab extends React.Component {
            </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'>
@@ -484,6 +505,90 @@ class UiTab extends React.Component {
            </div>
          </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-right'>
+              {i18n.__('in code blocks')}
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                value={this.state.config.editor.codeBlockMatchingPairs}
+                ref='codeBlockMatchingPairs'
+                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-right'>
+              {i18n.__('in code blocks')}
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                value={this.state.config.editor.codeBlockMatchingTriples}
+                ref='codeBlockMatchingTriples'
+                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-section'>
+            <div styleName='group-section-label-right'>
+              {i18n.__('in code blocks')}
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                value={this.state.config.editor.codeBlockExplodingPairs}
+                ref='codeBlockExplodingPairs'
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>
+
          <div styleName='group-checkBoxSection'>
            <label>
              <input onChange={(e) => this.handleUIChange(e)}
@@ -539,6 +644,28 @@ 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-header2'>{i18n.__('Preview')}</div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
@@ -566,6 +693,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'>