Merge branch 'spellchecker' of https://github.com/ehhc/Boostnote into spellchecker

2026-01-27 23:57:17 +00:00 · 2018-11-12 17:36:36 +01:00
parent a3e59d43a7 c6f1f97a57
commit 336f007fa1
59 changed files with 1515 additions and 378 deletions
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -72,6 +72,8 @@ export default class CodeEditor extends React.Component {
      }
    }
    this.editorActivityHandler = () => this.handleEditorActivity()
+
+    this.turndownService = new TurndownService()
  }

  handleSearch (msg) {
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -6,6 +6,7 @@ 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'

 class MarkdownEditor extends React.Component {
  constructor (props) {
@@ -18,7 +19,7 @@ class MarkdownEditor extends React.Component {
    this.supportMdSelectionBold = [16, 17, 186]

    this.state = {
-      status: 'PREVIEW',
+      status: props.config.editor.switchPreview === 'RIGHTCLICK' ? props.config.editor.delfaultStatus : 'PREVIEW',
      renderValue: props.value,
      keyPressed: new Set(),
      isLocked: false
@@ -76,9 +77,7 @@ class MarkdownEditor extends React.Component {
  handleContextMenu (e) {
    const { config } = this.props
    if (config.editor.switchPreview === 'RIGHTCLICK') {
-      const newStatus = this.state.status === 'PREVIEW'
-        ? 'CODE'
-        : 'PREVIEW'
+      const newStatus = this.state.status === 'PREVIEW' ? 'CODE' : 'PREVIEW'
      this.setState({
        status: newStatus
      }, () => {
@@ -88,6 +87,10 @@ class MarkdownEditor extends React.Component {
          this.refs.preview.focus()
        }
        eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+
+        const newConfig = Object.assign({}, config)
+        newConfig.editor.delfaultStatus = newStatus
+        ConfigManager.set(newConfig)
      })
    }
  }
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -17,6 +17,7 @@ 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'
@@ -331,9 +332,7 @@ export default class MarkdownPreview extends React.Component {
        allowCustomCSS,
        customCSS
      )
-      let body = this.markdown.render(
-        escapeHtmlCharacters(noteContent, { detectCodeBlock: true })
-      )
+      let body = this.markdown.render(noteContent)
      const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
      const attachmentsAbsolutePaths = attachmentManagement.getAbsolutePathsOfAttachmentsInContent(
        noteContent,
@@ -740,7 +739,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
        }
@@ -761,7 +759,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
        }
@@ -772,14 +769,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
        }
--- a/browser/components/NoteItem.js
+++ b/browser/components/NoteItem.js
@@ -24,16 +24,19 @@ const TagElement = ({ tagName }) => (
 /**
 * @description Tag element list component.
 * @param {Array|null} tags
+ * @param {boolean} showTagsAlphabetically
 * @return {React.Component}
 */
-const TagElementList = tags => {
+const TagElementList = (tags, showTagsAlphabetically) => {
  if (!isArray(tags)) {
    return []
  }

-  const tagElements = tags.map(tag => TagElement({ tagName: tag }))
-
-  return tagElements
+  if (showTagsAlphabetically) {
+    return _.sortBy(tags).map(tag => TagElement({ tagName: tag }))
+  } else {
+    return tags.map(tag => TagElement({ tagName: tag }))
+  }
 }

 /**
@@ -55,7 +58,8 @@ const NoteItem = ({
  pathname,
  storageName,
  folderName,
-  viewType
+  viewType,
+  showTagsAlphabetically
 }) => (
  <div
    styleName={isActive ? 'item--active' : 'item'}
@@ -93,7 +97,7 @@ const NoteItem = ({
      <div styleName='item-bottom'>
        <div styleName='item-bottom-tagList'>
          {note.tags.length > 0
-            ? TagElementList(note.tags)
+            ? TagElementList(note.tags, showTagsAlphabetically)
            : <span
              style={{ fontStyle: 'italic', opacity: 0.5 }}
              styleName='item-bottom-tagList-empty'
--- a/browser/components/StorageList.js
+++ b/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)
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -25,7 +25,7 @@ const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, hand
    <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
      <span styleName='tagList-item-name'>
        {`# ${name}`}
-        <span styleName='tagList-item-count'>{count}</span>
+        <span styleName='tagList-item-count'>{count !== 0 ? count : ''}</span>
      </span>
    </button>
  </div>
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -209,41 +209,39 @@ code
  text-decoration none
  margin-right 2px
 pre
-  padding 0.5em !important
+  padding 0.5rem !important
  border solid 1px #D1D1D1
  border-radius 5px
  overflow-x auto
-  margin 0 0 1em
+  margin 0 0 1rem
  display flex
  line-height 1.4em
-  &.flowchart, &.sequence, &.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 +373,49 @@ 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
+
 themeDarkBackground = darken(#21252B, 10%)
 themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
@@ -425,6 +466,14 @@ body[data-theme="dark"]
  kbd
    background-color themeDarkBorder
    color themeDarkText
+  dl
+    border-color themeDarkBorder
+    background-color themeDarkTableHead
+  dt
+    border-color themeDarkBorder
+  dd
+    border-color themeDarkBorder
+    background-color themeDarkPreview

 themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor
 themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
@@ -452,6 +501,14 @@ body[data-theme="solarized-dark"]
        border-color themeSolarizedDarkTableBorder
        &:last-child
          border-right solid 1px themeSolarizedDarkTableBorder
+  dl
+    border-color themeDarkBorder
+    background-color themeSolarizedDarkTableHead
+  dt
+    border-color themeDarkBorder
+  dd
+    border-color themeDarkBorder
+    background-color $ui-solarized-dark-noteDetail-backgroundColor

 themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
 themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
@@ -481,6 +538,14 @@ body[data-theme="monokai"]
          border-right solid 1px themeMonokaiTableBorder
  kbd
    background-color themeDarkBackground
+  dl
+    border-color themeDarkBorder
+    background-color themeMonokaiTableHead
+  dt
+    border-color themeDarkBorder
+  dd
+    border-color themeDarkBorder
+    background-color $ui-monokai-noteDetail-backgroundColor

 themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
 themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
@@ -509,4 +574,12 @@ 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
--- a/browser/components/render/MermaidRender.js
+++ b/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 {
+    const height = element.attributes.getNamedItem('data-height')
+    if (height && height.value !== 'undefined') {
+      element.style.height = height.value + 'vh'
+    }
    let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
    mermaidAPI.initialize({
      theme: isDarkTheme ? 'dark' : 'default',
-      themeCSS: isDarkTheme ? darkThemeStyling : ''
+      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
  }
--- a/browser/lib/Languages.js
+++ b/browser/lib/Languages.js
@@ -48,9 +48,13 @@ const languages = [
    locale: 'pl'
  },
  {
-    name: 'Portuguese',
+    name: 'Portuguese (PT-BR)',
    locale: 'pt-BR'
  },
+  {
+    name: 'Portuguese (PT-PT)',
+    locale: 'pt-PT'
+  },
  {
    name: 'Russian',
    locale: 'ru'
@@ -61,6 +65,9 @@ const languages = [
  }, {
    name: 'Turkish',
    locale: 'tr'
+  }, {
+    name: 'Thai',
+    locale: 'th'
  }
 ]

--- a/browser/lib/markdown-it-deflist.js
+++ b/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' ] })
+}
--- a/browser/lib/markdown-it-fence.js
+++ b/browser/lib/markdown-it-fence.js
@@ -0,0 +1,132 @@
+'use strict'
+
+module.exports = function (md, renderers, defaultRenderer) {
+  const paramsRE = /^[ \t]*([\w+#-]+)?(?:\(((?:\s*\w[-\w]*(?:=(?:'(?:.*?[^\\])?'|"(?:.*?[^\\])?"|(?:[^'"][^\s]*)))?)*)\))?(?::([^:]*)(?::(\d+))?)?\s*$/
+
+  function fence (state, startLine, endLine) {
+    let pos = state.bMarks[startLine] + state.tShift[startLine]
+    let max = state.eMarks[startLine]
+
+    if (state.sCount[startLine] - state.blkIndent >= 4 || pos + 3 > max) {
+      return false
+    }
+
+    const marker = state.src.charCodeAt(pos)
+    if (!(marker === 96 || marker === 126)) {
+      return false
+    }
+
+    let mem = pos
+    pos = state.skipChars(pos, marker)
+
+    let len = pos - mem
+    if (len < 3) {
+      return false
+    }
+
+    const markup = state.src.slice(mem, pos)
+    const params = state.src.slice(pos, max)
+
+    let nextLine = startLine
+    let haveEndMarker = false
+
+    while (true) {
+      nextLine++
+      if (nextLine >= endLine) {
+        break
+      }
+
+      pos = mem = state.bMarks[nextLine] + state.tShift[nextLine]
+      max = state.eMarks[nextLine]
+
+      if (pos < max && state.sCount[nextLine] < state.blkIndent) {
+        break
+      }
+      if (state.src.charCodeAt(pos) !== marker || state.sCount[nextLine] - state.blkIndent >= 4) {
+        continue
+      }
+
+      pos = state.skipChars(pos, marker)
+
+      if (pos - mem < len) {
+        continue
+      }
+
+      pos = state.skipSpaces(pos)
+
+      if (pos >= max) {
+        haveEndMarker = true
+        break
+      }
+    }
+
+    len = state.sCount[startLine]
+    state.line = nextLine + (haveEndMarker ? 1 : 0)
+
+    const parameters = {}
+    let langType = ''
+    let fileName = ''
+    let firstLineNumber = 1
+
+    let match = paramsRE.exec(params)
+    if (match) {
+      if (match[1]) {
+        langType = match[1]
+      }
+      if (match[3]) {
+        fileName = match[3]
+      }
+      if (match[4]) {
+        firstLineNumber = parseInt(match[4], 10)
+      }
+
+      if (match[2]) {
+        const params = match[2]
+        const regex = /(\w[-\w]*)(?:=(?:'(.*?[^\\])?'|"(.*?[^\\])?"|([^'"][^\s]*)))?/g
+
+        let name, value
+        while ((match = regex.exec(params))) {
+          name = match[1]
+          value = match[2] || match[3] || match[4] || null
+
+          const height = /^(\d+)h$/.exec(name)
+          if (height && !value) {
+            parameters.height = height[1]
+          } else {
+            parameters[name] = value
+          }
+        }
+      }
+    }
+
+    let token
+    if (renderers[langType]) {
+      token = state.push(`${langType}_fence`, 'div', 0)
+    } else {
+      token = state.push('_fence', 'code', 0)
+    }
+
+    token.langType = langType
+    token.fileName = fileName
+    token.firstLineNumber = firstLineNumber
+    token.parameters = parameters
+
+    token.content = state.getLines(startLine + 1, nextLine, len, true)
+    token.markup = markup
+    token.map = [startLine, state.line]
+
+    return true
+  }
+
+  md.block.ruler.before('fence', '_fence', fence, {
+    alt: ['paragraph', 'reference', 'blockquote', 'list']
+  })
+
+  for (const name in renderers) {
+    md.renderer.rules[`${name}_fence`] = (tokens, index) => renderers[name](tokens[index])
+  }
+
+  if (defaultRenderer) {
+    md.renderer.rules['_fence'] = (tokens, index) => defaultRenderer(tokens[index])
+  }
+}
--- a/browser/lib/markdown-it-sanitize-html.js
+++ b/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
+  }
+}
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -28,32 +28,6 @@ class Markdown {
      html: true,
      xhtmlOut: true,
      breaks: config.preview.breaks,
-      highlight: function (str, lang) {
-        const delimiter = ':'
-        const langInfo = lang.split(delimiter)
-        const langType = langInfo[0]
-        const fileName = langInfo[1] || ''
-        const firstLineNumber = parseInt(langInfo[2], 10)
-
-        if (langType === 'flowchart') {
-          return `<pre class="flowchart">${str}</pre>`
-        }
-        if (langType === 'sequence') {
-          return `<pre class="sequence">${str}</pre>`
-        }
-        if (langType === 'chart') {
-          return `<pre class="chart">${str}</pre>`
-        }
-        if (langType === 'mermaid') {
-          return `<pre class="mermaid">${str}</pre>`
-        }
-        return '<pre class="code CodeMirror">' +
-          '<span class="filename">' + fileName + '</span>' +
-          createGutter(str, firstLineNumber) +
-          '<code class="' + langType + '">' +
-          str +
-          '</code></pre>'
-      },
      sanitize: 'STRICT'
    }

@@ -106,7 +80,11 @@ class Markdown {
          'iframe': ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
          'input': ['type', 'id', 'checked']
        },
-        allowedIframeHostnames: ['www.youtube.com']
+        allowedIframeHostnames: ['www.youtube.com'],
+        selfClosing: [ 'img', 'br', 'hr', 'input' ],
+        allowedSchemes: [ 'http', 'https', 'ftp', 'mailto' ],
+        allowedSchemesAppliedToAttributes: [ 'href', 'src', 'cite' ],
+        allowProtocolRelative: true
      })
    }

@@ -149,10 +127,50 @@ class Markdown {
      }
    })
    this.md.use(require('markdown-it-kbd'))
-
    this.md.use(require('markdown-it-admonition'), {types: ['note', 'hint', 'attention', 'caution', 'danger', 'error']})
+    this.md.use(require('markdown-it-abbr'))
+    this.md.use(require('markdown-it-sub'))
+    this.md.use(require('markdown-it-sup'))
+    this.md.use(require('./markdown-it-deflist'))
    this.md.use(require('./markdown-it-frontmatter'))

+    this.md.use(require('./markdown-it-fence'), {
+      chart: token => {
+        if (token.parameters.hasOwnProperty('yaml')) {
+          token.parameters.format = 'yaml'
+        }
+
+        return `<pre class="fence" data-line="${token.map[0]}">
+          <span class="filename">${token.fileName}</span>
+          <div class="chart" data-height="${token.parameters.height}" data-format="${token.parameters.format || 'json'}">${token.content}</div>
+        </pre>`
+      },
+      flowchart: token => {
+        return `<pre class="fence" data-line="${token.map[0]}">
+          <span class="filename">${token.fileName}</span>
+          <div class="flowchart" data-height="${token.parameters.height}">${token.content}</div>
+        </pre>`
+      },
+      mermaid: token => {
+        return `<pre class="fence" data-line="${token.map[0]}">
+          <span class="filename">${token.fileName}</span>
+          <div class="mermaid" data-height="${token.parameters.height}">${token.content}</div>
+        </pre>`
+      },
+      sequence: token => {
+        return `<pre class="fence" data-line="${token.map[0]}">
+          <span class="filename">${token.fileName}</span>
+          <div class="sequence" data-height="${token.parameters.height}">${token.content}</div>
+        </pre>`
+      }
+    }, token => {
+      return `<pre class="code CodeMirror" data-line="${token.map[0]}">
+        <span class="filename">${token.fileName}</span>
+        ${createGutter(token.content, token.firstLineNumber)}
+        <code class="${token.langType}">${token.content}</code>
+      </pre>`
+    })
+
    const deflate = require('markdown-it-plantuml/lib/deflate')
    this.md.use(require('markdown-it-plantuml'), '', {
      generateSource: function (umlCode) {
@@ -253,9 +271,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]])
        }
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -348,7 +348,7 @@ class MarkdownNoteDetail extends React.Component {
  }

  render () {
-    const { data, location } = this.props
+    const { data, location, config } = this.props
    const { note, editorType } = this.state
    const storageKey = note.storage
    const folderKey = note.folder
@@ -399,6 +399,8 @@ 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)}
        />
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -354,12 +354,10 @@ class SnippetNoteDetail extends React.Component {
      this.refs['code-' + this.state.snippetIndex].reload()

      if (this.visibleTabs.offsetWidth > this.allTabs.scrollWidth) {
-        console.log('no need for arrows')
        this.moveTabBarBy(0)
      } else {
        const lastTab = this.allTabs.lastChild
        if (lastTab.offsetLeft + lastTab.offsetWidth < this.visibleTabs.offsetWidth) {
-          console.log('need to scroll')
          const width = this.visibleTabs.offsetWidth
          const newLeft = lastTab.offsetLeft + lastTab.offsetWidth - width
          this.moveTabBarBy(newLeft > 0 ? -newLeft : 0)
@@ -627,7 +625,6 @@ class SnippetNoteDetail extends React.Component {
  }

  focusEditor () {
-    console.log('code-' + this.state.snippetIndex)
    this.refs['code-' + this.state.snippetIndex].focus()
  }

@@ -759,6 +756,8 @@ 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)}
        />
--- a/browser/main/Detail/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -179,10 +179,10 @@ class TagSelect extends React.Component {
  }

  render () {
-    const { value, className } = this.props
+    const { value, className, showTagsAlphabetically } = this.props

    const tagList = _.isArray(value)
-      ? value.map((tag) => {
+      ? (showTagsAlphabetically ? _.sortBy(value) : value).map((tag) => {
        return (
          <span styleName='tag'
            key={tag}
--- a/browser/main/Detail/ToggleModeButton.js
+++ b/browser/main/Detail/ToggleModeButton.js
@@ -1,26 +1,26 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './ToggleModeButton.styl'
-import i18n from 'browser/lib/i18n'
-
-const ToggleModeButton = ({
-  onClick, editorType
-}) => (
-  <div styleName='control-toggleModeButton'>
-    <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => onClick('SPLIT')}>
-      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : ''} />
-    </div>
-    <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
-      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
-    </div>
-    <span styleName='tooltip'>{i18n.__('Toggle Mode')}</span>
-  </div>
-)
-
-ToggleModeButton.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  editorType: PropTypes.string.Required
-}
-
-export default CSSModules(ToggleModeButton, styles)
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ToggleModeButton.styl'
+import i18n from 'browser/lib/i18n'
+
+const ToggleModeButton = ({
+  onClick, editorType
+}) => (
+  <div styleName='control-toggleModeButton'>
+    <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => onClick('SPLIT')}>
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : ''} />
+    </div>
+    <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
+    </div>
+    <span styleName='tooltip'>{i18n.__('Toggle Mode')}</span>
+  </div>
+)
+
+ToggleModeButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  editorType: PropTypes.string.Required
+}
+
+export default CSSModules(ToggleModeButton, styles)
--- a/browser/main/Main.js
+++ b/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,
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -56,7 +56,6 @@ class NoteList extends React.Component {
    super(props)

    this.selectNextNoteHandler = () => {
-      console.log('fired next')
      this.selectNextNote()
    }
    this.selectPriorNoteHandler = () => {
@@ -616,7 +615,6 @@ class NoteList extends React.Component {
      .catch((err) => {
        console.error('Cannot Delete note: ' + err)
      })
-      console.log('Notes were all deleted')
    } else {
      if (!confirmDeleteNote(confirmDeletion, false)) return

@@ -636,7 +634,6 @@ class NoteList extends React.Component {
          })
        })
        AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
-        console.log('Notes went to trash')
      })
      .catch((err) => {
        console.error('Notes could not go to trash: ' + err)
@@ -996,6 +993,7 @@ class NoteList extends React.Component {
              folderName={this.getNoteFolder(note).name}
              storageName={this.getNoteStorage(note).name}
              viewType={viewType}
+              showTagsAlphabetically={config.ui.showTagsAlphabetically}
            />
          )
        }
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -20,6 +20,10 @@ import i18n from 'browser/lib/i18n'
 import context from 'browser/lib/context'
 import { remote } from 'electron'

+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

@@ -202,12 +206,20 @@ class SideNav extends React.Component {

  tagListComponent () {
    const { data, location, config } = this.props
-    const relatedTags = this.getRelatedTags(this.getActiveTags(location.pathname), data.noteMap)
+    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))
    }
@@ -306,7 +318,6 @@ class SideNav extends React.Component {
    .catch((err) => {
      console.error('Cannot Delete note: ' + err)
    })
-    console.log('Trash emptied')
  }

  handleFilterButtonContextMenu (event) {
--- a/browser/main/lib/AwsMobileAnalyticsConfig.js
+++ b/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)
    }
  }
 }
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -44,9 +44,10 @@ export const DEFAULT_CONFIG = {
    enableRulers: false,
    rulers: [80, 120],
    displayLineNumbers: true,
-    switchPreview: 'BLUR', // Available value: RIGHTCLICK, BLUR
+    switchPreview: 'BLUR', // 'BLUR', 'DBL_CLICK', 'RIGHTCLICK'
+    delfaultStatus: 'PREVIEW', // 'PREVIEW', 'CODE'
    scrollPastEnd: false,
-    type: 'SPLIT',
+    type: 'SPLIT', // 'SPLIT', 'EDITOR_PREVIEW'
    fetchUrlTitle: true,
    enableTableEditor: false,
    enableFrontMatterTitle: true,
@@ -203,7 +204,7 @@ 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(/Opt\s/g, 'Option ')
  })
  return config
 }
--- a/browser/main/lib/dataApi/attachmentManagement.js
+++ b/browser/main/lib/dataApi/attachmentManagement.js
@@ -529,7 +529,6 @@ function handleAttachmentLinkPaste (storageKey, noteKey, linkText) {
      return modifiedLinkText
    })
  } else {
-    console.log('One if the parameters was null -> Do nothing..')
    return Promise.resolve(linkText)
  }
 }
--- a/browser/main/lib/dataApi/renameStorage.js
+++ b/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)
  }
--- a/browser/main/lib/dataApi/resolveStorageData.js
+++ b/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)
 }
--- a/browser/main/lib/dataApi/resolveStorageNotes.js
+++ b/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)
--- a/browser/main/lib/dataApi/toggleStorage.js
+++ b/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)
  }
--- a/browser/main/lib/eventEmitter.js
+++ b/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)
 }

--- a/browser/main/lib/ipcClient.js
+++ b/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
    })
  }
 )
--- a/browser/main/modals/PreferencesModal/HotkeyTab.js
+++ b/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)
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -71,6 +71,9 @@ class UiTab extends React.Component {
        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,
        disableDirectWrite: this.refs.uiD2w != null
          ? this.refs.uiD2w.checked
          : false
@@ -250,16 +253,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'>
@@ -275,6 +268,52 @@ 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-header2'>Editor</div>

          <div styleName='group-section'>
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -113,7 +113,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)