Merged Master into feature branch and fixed conflicts

2025-12-13 01:36:22 +00:00 · 2019-08-01 20:12:58 +08:00
parent 86370edd1e eeca031c86
commit b837653cf1
75 changed files with 477 additions and 224 deletions
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -54,6 +54,7 @@ export default class CodeEditor extends React.Component {
    this.focusHandler = () => {
      ipcRenderer.send('editor:focused', true)
    }
+    const debouncedDeletionOfAttachments = _.debounce(attachmentManagement.deleteAttachmentsNotPresentInNote, 30000)
    this.blurHandler = (editor, e) => {
      ipcRenderer.send('editor:focused', false)
      if (e == null) return null
@@ -65,16 +66,11 @@ export default class CodeEditor extends React.Component {
        el = el.parentNode
      }
      this.props.onBlur != null && this.props.onBlur(e)
-
      const {
        storageKey,
        noteKey
      } = this.props
-      attachmentManagement.deleteAttachmentsNotPresentInNote(
-        this.editor.getValue(),
-        storageKey,
-        noteKey
-      )
+      debouncedDeletionOfAttachments(this.editor.getValue(), storageKey, noteKey)
    }
    this.pasteHandler = (editor, e) => {
      e.preventDefault()
@@ -206,23 +202,11 @@ export default class CodeEditor extends React.Component {
      'Cmd-T': function (cm) {
        // Do nothing
      },
-      'Ctrl-/': function (cm) {
-        if (global.process.platform === 'darwin') { return }
+      [translateHotkey(hotkey.insertDate)]: function (cm) {
        const dateNow = new Date()
        cm.replaceSelection(dateNow.toLocaleDateString())
      },
-      'Cmd-/': function (cm) {
-        if (global.process.platform !== 'darwin') { return }
-        const dateNow = new Date()
-        cm.replaceSelection(dateNow.toLocaleDateString())
-      },
-      'Shift-Ctrl-/': function (cm) {
-        if (global.process.platform === 'darwin') { return }
-        const dateNow = new Date()
-        cm.replaceSelection(dateNow.toLocaleString())
-      },
-      'Shift-Cmd-/': function (cm) {
-        if (global.process.platform !== 'darwin') { return }
+      [translateHotkey(hotkey.insertDateTime)]: function (cm) {
        const dateNow = new Date()
        cm.replaceSelection(dateNow.toLocaleString())
      },
@@ -290,7 +274,7 @@ export default class CodeEditor extends React.Component {
      value: this.props.value,
      linesHighlighted: this.props.linesHighlighted,
      lineNumbers: this.props.displayLineNumbers,
-      lineWrapping: true,
+      lineWrapping: this.props.lineWrapping,
      theme: this.props.theme,
      indentUnit: this.props.indentSize,
      tabSize: this.props.indentSize,
@@ -590,6 +574,10 @@ export default class CodeEditor extends React.Component {
      this.editor.setOption('lineNumbers', this.props.displayLineNumbers)
    }

+    if (prevProps.lineWrapping !== this.props.lineWrapping) {
+      this.editor.setOption('lineWrapping', this.props.lineWrapping)
+    }
+
    if (prevProps.scrollPastEnd !== this.props.scrollPastEnd) {
      this.editor.setOption('scrollPastEnd', this.props.scrollPastEnd)
    }
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -304,6 +304,7 @@ class MarkdownEditor extends React.Component {
          enableRulers={config.editor.enableRulers}
          rulers={config.editor.rulers}
          displayLineNumbers={config.editor.displayLineNumbers}
+          lineWrapping
          matchingPairs={config.editor.matchingPairs}
          matchingTriples={config.editor.matchingTriples}
          explodingPairs={config.editor.explodingPairs}
@@ -341,6 +342,7 @@ class MarkdownEditor extends React.Component {
          smartArrows={config.preview.smartArrows}
          breaks={config.preview.breaks}
          sanitize={config.preview.sanitize}
+          mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
          ref='preview'
          onContextMenu={(e) => this.handleContextMenu(e)}
          onDoubleClick={(e) => this.handleDoubleClick(e)}
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -41,6 +41,7 @@ const CSS_FILES = [
  `${appPath}/node_modules/codemirror/lib/codemirror.css`,
  `${appPath}/node_modules/react-image-carousel/lib/css/main.min.css`
 ]
+const win = global.process.platform === 'win32'

 function buildStyle (
  fontFamily,
@@ -247,7 +248,7 @@ export default class MarkdownPreview extends React.Component {
  handleContextMenu (event) {
    const menu = buildMarkdownPreviewContextMenu(this, event)
    if (menu != null) {
-      setTimeout(() => menu.popup(remote.getCurrentWindow()), 30)
+      menu.popup(remote.getCurrentWindow())
    }
  }

@@ -320,7 +321,11 @@ export default class MarkdownPreview extends React.Component {
      customCSS
    )
    let body = this.markdown.render(noteContent)
-    const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
+    body = attachmentManagement.fixLocalURLS(
+      body,
+      this.props.storagePath
+    )
+    const files = [this.getCodeThemeLink(codeBlockTheme), ...CSS_FILES]
    files.forEach(file => {
      if (global.process.platform === 'win32') {
        file = file.replace('file:///', '')
@@ -555,6 +560,7 @@ export default class MarkdownPreview extends React.Component {
    if (
      prevProps.smartQuotes !== this.props.smartQuotes ||
      prevProps.sanitize !== this.props.sanitize ||
+      prevProps.mermaidHTMLLabel !== this.props.mermaidHTMLLabel ||
      prevProps.smartArrows !== this.props.smartArrows ||
      prevProps.breaks !== this.props.breaks ||
      prevProps.lineThroughCheckbox !== this.props.lineThroughCheckbox
@@ -632,7 +638,7 @@ export default class MarkdownPreview extends React.Component {

    this.getWindow().document.getElementById(
      'codeTheme'
-    ).href = this.GetCodeThemeLink(codeBlockTheme)
+    ).href = this.getCodeThemeLink(codeBlockTheme)
    this.getWindow().document.getElementById('style').innerHTML = buildStyle(
      fontFamily,
      fontSize,
@@ -645,14 +651,12 @@ export default class MarkdownPreview extends React.Component {
    )
  }

-  GetCodeThemeLink (name) {
+  getCodeThemeLink (name) {
    const theme = consts.THEMES.find(theme => theme.name === name)

-    if (theme) {
-      return `${appPath}/${theme.path}`
-    } else {
-      return `${appPath}/node_modules/codemirror/theme/elegant.css`
-    }
+    return theme != null
+      ? theme.path
+      : `${appPath}/node_modules/codemirror/theme/elegant.css`
  }

  rewriteIframe () {
@@ -678,7 +682,8 @@ export default class MarkdownPreview extends React.Component {
      showCopyNotification,
      storagePath,
      noteKey,
-      sanitize
+      sanitize,
+      mermaidHTMLLabel
    } = this.props
    let { value, codeBlockTheme } = this.props

@@ -820,7 +825,7 @@ export default class MarkdownPreview extends React.Component {
    _.forEach(
      this.refs.root.contentWindow.document.querySelectorAll('.mermaid'),
      el => {
-        mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme)
+        mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme, mermaidHTMLLabel)
      }
    )

@@ -870,6 +875,12 @@ export default class MarkdownPreview extends React.Component {
      this.setImgOnClickEventHelper(img, rect)
      imgObserver.observe(parentEl, config)
    }
+
+    const aList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll('a')
+    for (const a of aList) {
+      a.removeEventListener('click', this.linkClickHandler)
+      a.addEventListener('click', this.linkClickHandler)
+    }
  }

  setImgOnClickEventHelper (img, rect) {
@@ -998,11 +1009,11 @@ export default class MarkdownPreview extends React.Component {

    if (!rawHref) return // not checked href because parser will create file://... string for [empty link]()

-    const regexNoteInternalLink = /.*[main.\w]*.html#/
-
-    if (regexNoteInternalLink.test(href)) {
-      const targetId = mdurl.encode(linkHash)
-      const targetElement = this.refs.root.contentWindow.document.querySelector(
+    const extractId = /(main.html)?#/
+    const regexNoteInternalLink = new RegExp(`${extractId.source}(.+)`)
+    if (regexNoteInternalLink.test(linkHash)) {
+      const targetId = mdurl.encode(linkHash.replace(extractId, ''))
+      const targetElement = this.refs.root.contentWindow.document.getElementById(
        targetId
      )

--- a/browser/components/MarkdownSplitEditor.js
+++ b/browser/components/MarkdownSplitEditor.js
@@ -150,7 +150,6 @@ class MarkdownSplitEditor extends React.Component {
        onMouseMove={e => this.handleMouseMove(e)}
        onMouseUp={e => this.handleMouseUp(e)}>
        <CodeEditor
-          styleName='codeEditor'
          ref='code'
          width={this.state.codeEditorWidthInPercent + '%'}
          mode='Boost Flavored Markdown'
@@ -160,6 +159,7 @@ class MarkdownSplitEditor extends React.Component {
          fontFamily={config.editor.fontFamily}
          fontSize={editorFontSize}
          displayLineNumbers={config.editor.displayLineNumbers}
+          lineWrapping
          matchingPairs={config.editor.matchingPairs}
          matchingTriples={config.editor.matchingTriples}
          explodingPairs={config.editor.explodingPairs}
@@ -187,7 +187,6 @@ class MarkdownSplitEditor extends React.Component {
        </div>
        <MarkdownPreview
          style={previewStyle}
-          styleName='preview'
          theme={config.ui.theme}
          keyMap={config.editor.keyMap}
          fontSize={config.preview.fontSize}
@@ -200,6 +199,7 @@ class MarkdownSplitEditor extends React.Component {
          smartArrows={config.preview.smartArrows}
          breaks={config.preview.breaks}
          sanitize={config.preview.sanitize}
+          mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
          ref='preview'
          tabInde='0'
          value={value}
--- a/browser/components/MarkdownSplitEditor.styl
+++ b/browser/components/MarkdownSplitEditor.styl
@@ -8,9 +8,30 @@
    top -2px
    width 0
    z-index 0
+    border-left 1px solid $ui-borderColor
  .slider-hitbox
    absolute top bottom left right
    width 7px
    left -3px
    z-index 10
    cursor col-resize
+
+body[data-theme="dark"]
+  .root
+    .slider
+      border-left 1px solid $ui-dark-borderColor
+
+body[data-theme="solarized-dark"]
+  .root
+    .slider
+      border-left 1px solid $ui-solarized-dark-borderColor
+
+body[data-theme="monokai"]
+  .root
+    .slider
+      border-left 1px solid $ui-monokai-borderColor
+
+body[data-theme="dracula"]
+  .root
+    .slider
+      border-left 1px solid $ui-dracula-borderColor
--- a/browser/components/ModalEscButton.js
+++ b/browser/components/ModalEscButton.js
@@ -8,7 +8,7 @@ const ModalEscButton = ({
 }) => (
  <button styleName='escButton' onClick={handleEscButtonClick}>
    <div styleName='esc-mark'>×</div>
-    <div styleName='esc-text'>esc</div>
+    <div>esc</div>
  </button>
 )

--- a/browser/components/NoteItem.js
+++ b/browser/components/NoteItem.js
@@ -148,15 +148,14 @@ NoteItem.propTypes = {
    tags: PropTypes.array,
    isStarred: PropTypes.bool.isRequired,
    isTrashed: PropTypes.bool.isRequired,
-    blog: {
+    blog: PropTypes.shape({
      blogLink: PropTypes.string,
      blogId: PropTypes.number
-    }
+    })
  }),
  handleNoteClick: PropTypes.func.isRequired,
  handleNoteContextMenu: PropTypes.func.isRequired,
-  handleDragStart: PropTypes.func.isRequired,
-  handleDragEnd: PropTypes.func.isRequired
+  handleDragStart: PropTypes.func.isRequired
 }

 export default CSSModules(NoteItem, styles)
--- a/browser/components/SideNavFilter.js
+++ b/browser/components/SideNavFilter.js
@@ -74,7 +74,7 @@ SideNavFilter.propTypes = {
  isStarredActive: PropTypes.bool.isRequired,
  isTrashedActive: PropTypes.bool.isRequired,
  handleStarredButtonClick: PropTypes.func.isRequired,
-  handleTrashdButtonClick: PropTypes.func.isRequired
+  handleTrashedButtonClick: PropTypes.func.isRequired
 }

 export default CSSModules(SideNavFilter, styles)
--- a/browser/components/SnippetTab.js
+++ b/browser/components/SnippetTab.js
@@ -114,7 +114,7 @@ class SnippetTab extends React.Component {
          >
            {snippet.name.trim().length > 0
              ? snippet.name
-              : <span styleName='button-unnamed'>
+              : <span>
                {i18n.__('Unnamed')}
              </span>
            }
--- a/browser/components/TodoProcess.js
+++ b/browser/components/TodoProcess.js
@@ -25,10 +25,10 @@ const TodoProcess = ({
 )

 TodoProcess.propTypes = {
-  todoStatus: {
+  todoStatus: PropTypes.exact({
    total: PropTypes.number.isRequired,
    completed: PropTypes.number.isRequired
-  }
+  })
 }

 export default CSSModules(TodoProcess, styles)
--- a/browser/components/render/MermaidRender.js
+++ b/browser/components/render/MermaidRender.js
@@ -19,7 +19,7 @@ function getId () {
  return id
 }

-function render (element, content, theme) {
+function render (element, content, theme, enableHTMLLabel) {
  try {
    const height = element.attributes.getNamedItem('data-height')
    if (height && height.value !== 'undefined') {
@@ -29,7 +29,8 @@ function render (element, content, theme) {
    mermaidAPI.initialize({
      theme: isDarkTheme ? 'dark' : 'default',
      themeCSS: isDarkTheme ? darkThemeStyling : '',
-      useMaxWidth: false
+      useMaxWidth: false,
+      flowchart: { htmlLabels: enableHTMLLabel }
    })
    mermaidAPI.render(getId(), content, (svgGraph) => {
      element.innerHTML = svgGraph
--- a/browser/lib/consts.js
+++ b/browser/lib/consts.js
@@ -7,6 +7,7 @@ const CODEMIRROR_THEME_PATH = 'node_modules/codemirror/theme'
 const CODEMIRROR_EXTRA_THEME_PATH = 'extra_scripts/codemirror/theme'

 const isProduction = process.env.NODE_ENV === 'production'
+
 const paths = [
  isProduction ? path.join(app.getAppPath(), CODEMIRROR_THEME_PATH) : path.resolve(CODEMIRROR_THEME_PATH),
  isProduction ? path.join(app.getAppPath(), CODEMIRROR_EXTRA_THEME_PATH) : path.resolve(CODEMIRROR_EXTRA_THEME_PATH)
@@ -18,7 +19,7 @@ const themes = paths

    return {
      name,
-      path: path.join(directory.split(/\//g).slice(-3).join('/'), file),
+      path: path.join(directory, file),
      className: `cm-s-${name}`
    }
  }))
@@ -27,17 +28,16 @@ const themes = paths

 themes.splice(themes.findIndex(({ name }) => name === 'solarized'), 1, {
  name: 'solarized dark',
-  path: `${CODEMIRROR_THEME_PATH}/solarized.css`,
+  path: path.join(paths[0], 'solarized.css'),
  className: `cm-s-solarized cm-s-dark`
 }, {
  name: 'solarized light',
-  path: `${CODEMIRROR_THEME_PATH}/solarized.css`,
+  path: path.join(paths[0], 'solarized.css'),
  className: `cm-s-solarized cm-s-light`
 })
-
 themes.splice(0, 0, {
  name: 'default',
-  path: `${CODEMIRROR_THEME_PATH}/elegant.css`,
+  path: path.join(paths[0], 'elegant.css'),
  className: `cm-s-default`
 })

--- a/browser/lib/contextMenuBuilder.js
+++ b/browser/lib/contextMenuBuilder.js
@@ -81,11 +81,7 @@ const buildMarkdownPreviewContextMenu = function (markdownPreview, event) {

  // Default context menu inclusions
  const template = [{
-    role: 'cut'
-  }, {
    role: 'copy'
-  }, {
-    role: 'paste'
  }, {
    role: 'selectall'
  }]
--- a/browser/lib/customMeta.js
+++ b/browser/lib/customMeta.js
@@ -1,5 +1,10 @@
 import CodeMirror from 'codemirror'
 import 'codemirror-mode-elixir'

-CodeMirror.modeInfo.push({name: 'Stylus', mime: 'text/x-styl', mode: 'stylus', ext: ['styl'], alias: ['styl']})
+const stylusCodeInfo = CodeMirror.modeInfo.find(info => info.name === 'Stylus')
+if (stylusCodeInfo == null) {
+  CodeMirror.modeInfo.push({name: 'Stylus', mime: 'text/x-styl', mode: 'stylus', ext: ['styl'], alias: ['styl']})
+} else {
+  stylusCodeInfo.alias = ['styl']
+}
 CodeMirror.modeInfo.push({name: 'Elixir', mime: 'text/x-elixir', mode: 'elixir', ext: ['ex']})
--- a/browser/lib/markdown-it-sanitize-html.js
+++ b/browser/lib/markdown-it-sanitize-html.js
@@ -15,7 +15,7 @@ module.exports = function sanitizePlugin (md, options) {
          options
        )
      }
-      if (state.tokens[tokenIdx].type === '_fence') {
+      if (state.tokens[tokenIdx].type.match(/.*_fence$/)) {
        // escapeHtmlCharacters has better performance
        state.tokens[tokenIdx].content = escapeHtmlCharacters(
          state.tokens[tokenIdx].content,
--- a/browser/lib/markdown-toc-generator.js
+++ b/browser/lib/markdown-toc-generator.js
@@ -21,7 +21,7 @@ function uniqueSlug (slug, slugs, opts) {
 }

 function linkify (token) {
-  token.content = mdlink(token.content, '#' + token.slug)
+  token.content = mdlink(token.content, `#${decodeURI(token.slug)}`)
  return token
 }

--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -2,6 +2,7 @@ import markdownit from 'markdown-it'
 import sanitize from './markdown-it-sanitize-html'
 import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
+import mdurl from 'mdurl'
 import smartArrows from 'markdown-it-smartarrows'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
@@ -150,9 +151,9 @@ class Markdown {
        const content = token.content.split('\n').slice(0, -1).map(line => {
          const match = /!\[[^\]]*]\(([^\)]*)\)/.exec(line)
          if (match) {
-            return match[1]
+            return mdurl.encode(match[1])
          } else {
-            return line
+            return mdurl.encode(line)
          }
        }).join('\n')

@@ -288,7 +289,9 @@ class Markdown {
          case 'list_item_open':
          case 'paragraph_open':
          case 'table_open':
-            token.attrPush(['data-line', token.map[0]])
+            if (token.map) {
+              token.attrPush(['data-line', token.map[0]])
+            }
        }
      })
      const result = originalRender.call(this.md.renderer, tokens, options, env)
--- a/browser/lib/slugify.js
+++ b/browser/lib/slugify.js
@@ -1,17 +1,11 @@
-import diacritics from 'diacritics-map'
-
-function replaceDiacritics (str) {
-  return str.replace(/[À-ž]/g, function (ch) {
-    return diacritics[ch] || ch
-  })
-}
-
 module.exports = function slugify (title) {
-  let slug = title.trim()
+  const slug = encodeURI(
+    title.trim()
+      .replace(/^\s+/, '')
+      .replace(/\s+$/, '')
+      .replace(/\s+/g, '-')
+      .replace(/[\]\[\!\'\#\$\%\&\(\)\*\+\,\.\/\:\;\<\=\>\?\@\\\^\{\|\}\~\`]/g, '')
+  )

-  slug = replaceDiacritics(slug)
-
-  slug = slug.replace(/[^\w\s-]/g, '').replace(/\s+/g, '-')
-
-  return encodeURI(slug).replace(/\-+$/, '')
+  return slug
 }
--- a/browser/main/Detail/FullscreenButton.js
+++ b/browser/main/Detail/FullscreenButton.js
@@ -11,7 +11,7 @@ const FullscreenButton = ({
  const hotkey = (OSX ? i18n.__('Command(⌘)') : i18n.__('Ctrl(^)')) + '+B'
  return (
    <button styleName='control-fullScreenButton' title={i18n.__('Fullscreen')} onMouseDown={(e) => onClick(e)}>
-      <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
+      <img src='../resources/icon/icon-full.svg' />
      <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Fullscreen')}({hotkey})</span>
    </button>
  )
--- a/browser/main/Detail/InfoPanel.js
+++ b/browser/main/Detail/InfoPanel.js
@@ -60,7 +60,7 @@ class InfoPanel extends React.Component {
        </div>

        <div>
-          <input styleName='infoPanel-noteLink' ref='noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
+          <input styleName='infoPanel-noteLink' ref='noteLink' defaultValue={noteLink} onClick={(e) => { e.target.select() }} />
          <button onClick={() => this.copyNoteLink()} styleName='infoPanel-copyButton'>
            <i className='fa fa-clipboard' />
          </button>
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -67,9 +67,6 @@ class MarkdownNoteDetail extends React.Component {
    })
    ee.on('hotkey:deletenote', this.handleDeleteNote.bind(this))
    ee.on('code:generate-toc', this.generateToc)
-
-    // Focus content if using blur or double click
-    if (this.state.switchPreview === 'BLUR' || this.state.switchPreview === 'DBL_CLICK') this.focus()
  }

  componentWillReceiveProps (nextProps) {
@@ -84,6 +81,20 @@ class MarkdownNoteDetail extends React.Component {
        if (this.refs.tags) this.refs.tags.reset()
      })
    }
+
+    // Focus content if using blur or double click
+    // --> Moved here from componentDidMount so a re-render during search won't set focus to the editor
+    const {switchPreview} = nextProps.config.editor
+
+    if (this.state.switchPreview !== switchPreview) {
+      this.setState({
+        switchPreview
+      })
+      if (switchPreview === 'BLUR' || switchPreview === 'DBL_CLICK') {
+        console.log('setting focus', switchPreview)
+        this.focus()
+      }
+    }
  }

  componentWillUnmount () {
@@ -300,7 +311,7 @@ class MarkdownNoteDetail extends React.Component {
  }

  getToggleLockButton () {
-    return this.state.isLocked ? '../resources/icon/icon-previewoff-on.svg' : '../resources/icon/icon-previewoff-off.svg'
+    return this.state.isLocked ? '../resources/icon/icon-lock.svg' : '../resources/icon/icon-unlock.svg'
  }

  handleDeleteKeyDown (e) {
@@ -439,7 +450,7 @@ class MarkdownNoteDetail extends React.Component {

    const detailTopBar = <div styleName='info'>
      <div styleName='info-left'>
-        <div styleName='info-left-top'>
+        <div>
          <FolderSelect styleName='info-left-top-folderSelect'
            value={this.state.note.storage + '-' + this.state.note.folder}
            ref='folder'
@@ -473,7 +484,7 @@ class MarkdownNoteDetail extends React.Component {
              onFocus={(e) => this.handleFocus(e)}
              onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
            >
-              <img styleName='iconInfo' src={imgSrc} />
+              <img src={imgSrc} />
              {this.state.isLocked ? <span styleName='tooltip'>Unlock</span> : <span styleName='tooltip'>Lock</span>}
            </button>

--- a/browser/main/Detail/PermanentDeleteButton.js
+++ b/browser/main/Detail/PermanentDeleteButton.js
@@ -10,7 +10,7 @@ const PermanentDeleteButton = ({
  <button styleName='control-trashButton--in-trash'
    onClick={(e) => onClick(e)}
  >
-    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+    <img src='../resources/icon/icon-trash.svg' />
    <span styleName='tooltip'>{i18n.__('Permanent Delete')}</span>
  </button>
 )
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -518,6 +518,19 @@ class SnippetNoteDetail extends React.Component {
    ])
  }

+  handleWrapLineButtonClick (e) {
+    context.popup([
+      {
+        label: 'on',
+        click: (e) => this.handleWrapLineItemClick(e, true)
+      },
+      {
+        label: 'off',
+        click: (e) => this.handleWrapLineItemClick(e, false)
+      }
+    ])
+  }
+
  handleIndentSizeItemClick (e, indentSize) {
    const { config, dispatch } = this.props
    const editor = Object.assign({}, config.editor, {
@@ -550,6 +563,22 @@ class SnippetNoteDetail extends React.Component {
    })
  }

+  handleWrapLineItemClick (e, lineWrapping) {
+    const { config, dispatch } = this.props
+    const editor = Object.assign({}, config.editor, {
+      lineWrapping
+    })
+    ConfigManager.set({
+      editor
+    })
+    dispatch({
+      type: 'SET_CONFIG',
+      config: {
+        editor
+      }
+    })
+  }
+
  focus () {
    this.refs.description.focus()
  }
@@ -720,6 +749,7 @@ class SnippetNoteDetail extends React.Component {
            mode={snippet.mode || (autoDetect ? null : config.editor.snippetDefaultLanguage)}
            value={snippet.content}
            linesHighlighted={snippet.linesHighlighted}
+            lineWrapping={config.editor.lineWrapping}
            theme={config.editor.theme}
            fontFamily={config.editor.fontFamily}
            fontSize={editorFontSize}
@@ -778,7 +808,7 @@ class SnippetNoteDetail extends React.Component {

    const detailTopBar = <div styleName='info'>
      <div styleName='info-left'>
-        <div styleName='info-left-top'>
+        <div>
          <FolderSelect styleName='info-left-top-folderSelect'
            value={this.state.note.storage + '-' + this.state.note.folder}
            ref='folder'
@@ -899,6 +929,12 @@ class SnippetNoteDetail extends React.Component {
            size: {config.editor.indentSize}&nbsp;
            <i className='fa fa-caret-down' />
          </button>
+          <button
+            onClick={(e) => this.handleWrapLineButtonClick(e)}
+          >
+            Wrap Line: {config.editor.lineWrapping ? 'on' : 'off'}&nbsp;
+            <i className='fa fa-caret-down' />
+          </button>
        </div>

        <StatusBar
--- a/browser/main/Detail/ToggleModeButton.js
+++ b/browser/main/Detail/ToggleModeButton.js
@@ -8,11 +8,11 @@ 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 styleName={editorType === 'SPLIT' ? 'active' : undefined} onClick={() => onClick('SPLIT')}>
+      <img 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 styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : undefined} onClick={() => onClick('EDITOR_PREVIEW')}>
+      <img src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
    </div>
    <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Toggle Mode')}</span>
  </div>
@@ -20,7 +20,7 @@ const ToggleModeButton = ({

 ToggleModeButton.propTypes = {
  onClick: PropTypes.func.isRequired,
-  editorType: PropTypes.string.Required
+  editorType: PropTypes.string.isRequired
 }

 export default CSSModules(ToggleModeButton, styles)
--- a/browser/main/Detail/TrashButton.js
+++ b/browser/main/Detail/TrashButton.js
@@ -10,7 +10,7 @@ const TrashButton = ({
  <button styleName='control-trashButton'
    onClick={(e) => onClick(e)}
  >
-    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+    <img src='../resources/icon/icon-trash.svg' />
    <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Trash')}</span>
  </button>
 )
--- a/browser/main/DevTools/index.js
+++ b/browser/main/DevTools/index.js
@@ -1,8 +1,8 @@
 /* eslint-disable no-undef */
-if (process.env.NODE_ENV === 'production') {
-  // eslint-disable-next-line global-require
-  module.exports = require('./index.prod').default
-} else {
+if (process.env.NODE_ENV === 'development') {
  // eslint-disable-next-line global-require
  module.exports = require('./index.dev').default
+} else {
+  // eslint-disable-next-line global-require
+  module.exports = require('./index.prod').default
 }
--- a/browser/main/NewNoteButton/index.js
+++ b/browser/main/NewNoteButton/index.js
@@ -90,7 +90,7 @@ class NewNoteButton extends React.Component {
        <div styleName='control'>
          <button styleName='control-newNoteButton'
            onClick={this.handleNewNoteButtonClick}>
-            <img styleName='iconTag' src='../resources/icon/icon-newnote.svg' />
+            <img src='../resources/icon/icon-newnote.svg' />
            <span styleName='control-newNoteButton-tooltip'>
              {i18n.__('Make a note')} {OSX ? '⌘' : i18n.__('Ctrl')} + N
            </span>
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -1138,7 +1138,7 @@ class NoteList extends React.Component {
              }
              onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
            >
-              <img styleName='iconTag' src='../resources/icon/icon-column.svg' />
+              <img src='../resources/icon/icon-column.svg' />
            </button>
            <button title={i18n.__('Compressed View')} styleName={config.listStyle === 'SMALL'
                ? 'control-button--active'
@@ -1146,7 +1146,7 @@ class NoteList extends React.Component {
              }
              onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
            >
-              <img styleName='iconTag' src='../resources/icon/icon-column-list.svg' />
+              <img src='../resources/icon/icon-column-list.svg' />
            </button>
          </div>
        </div>
--- a/browser/main/SideNav/PreferenceButton.js
+++ b/browser/main/SideNav/PreferenceButton.js
@@ -8,7 +8,7 @@ const PreferenceButton = ({
  onClick
 }) => (
  <button styleName='top-menu-preference' onClick={(e) => onClick(e)}>
-    <img styleName='iconTag' src='../resources/icon/icon-setting.svg' />
+    <img src='../resources/icon/icon-setting.svg' />
    <span styleName='tooltip'>{i18n.__('Preferences')}</span>
  </button>
 )
--- a/browser/main/SideNav/StorageItem.js
+++ b/browser/main/SideNav/StorageItem.js
@@ -362,14 +362,14 @@ class StorageItem extends React.Component {
            <button styleName='header-addFolderButton'
              onClick={(e) => this.handleAddFolderButtonClick(e)}
            >
-              <img styleName='iconTag' src='../resources/icon/icon-plus.svg' />
+              <img src='../resources/icon/icon-plus.svg' />
            </button>
          }

          <button styleName='header-info'
            onClick={(e) => this.handleHeaderInfoClick(e)}
          >
-            <span styleName='header-info-name'>
+            <span>
              {isFolded ? _.truncate(storage.name, {length: 1, omission: ''}) : storage.name}
            </span>
            {isFolded &&
@@ -380,7 +380,7 @@ class StorageItem extends React.Component {
          </button>
        </div>
        {this.state.isOpen &&
-          <div styleName='folderList' >
+          <div>
            {folderList}
          </div>
        }
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -440,7 +440,7 @@ class SideNav extends React.Component {

    const style = {}
    if (!isFolded) style.width = this.props.width
-    const isTagActive = location.pathname.match(/tag/)
+    const isTagActive = /tag/.test(location.pathname)
    return (
      <div className='SideNav'
        styleName={isFolded ? 'root--folded' : 'root'}
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -7,8 +7,8 @@ import ee from 'browser/main/lib/eventEmitter'
 import NewNoteButton from 'browser/main/NewNoteButton'
 import i18n from 'browser/lib/i18n'
 import debounce from 'lodash/debounce'
+import CInput from 'react-composition-input'
 import { push } from 'connected-react-router'
-import queryString from 'query-string'

 class TopBar extends React.Component {
  constructor (props) {
@@ -17,21 +17,29 @@ class TopBar extends React.Component {
    this.state = {
      search: '',
      searchOptions: [],
-      isSearching: false,
-      isAlphabet: false,
-      isIME: false,
-      isConfirmTranslation: false
+      isSearching: false
    }

+    const { dispatch } = this.props
+
    this.focusSearchHandler = () => {
      this.handleOnSearchFocus()
    }

    this.codeInitHandler = this.handleCodeInit.bind(this)
-    this.updateKeyword = this.updateKeyword.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+    this.handleSearchFocus = this.handleSearchFocus.bind(this)
+    this.handleSearchBlur = this.handleSearchBlur.bind(this)
+    this.handleSearchChange = this.handleSearchChange.bind(this)
    this.handleSearchClearButton = this.handleSearchClearButton.bind(this)

-    this.updateKeyword = debounce(this.updateKeyword, 1000 / 60, {
+    this.debouncedUpdateKeyword = debounce((keyword) => {
+      dispatch(push(`/searched/${encodeURIComponent(keyword)}`))
+      this.setState({
+        search: keyword
+      })
+      ee.emit('top:search', keyword)
+    }, 1000 / 60, {
      maxWait: 1000 / 8
    })
  }
@@ -63,14 +71,14 @@ class TopBar extends React.Component {
    this.refs.search.childNodes[0].blur
    dispatch(push('/searched'))
    e.preventDefault()
+    this.debouncedUpdateKeyword('')
  }

  handleKeyDown (e) {
-    // reset states
-    this.setState({
-      isAlphabet: false,
-      isIME: false
-    })
+    // Re-apply search field on ENTER key
+    if (e.keyCode === 13) {
+      this.debouncedUpdateKeyword(e.target.value)
+    }

    // Clear search on ESC
    if (e.keyCode === 27) {
@@ -88,52 +96,11 @@ class TopBar extends React.Component {
      ee.emit('list:prior')
      e.preventDefault()
    }
-
-    // When the key is an alphabet, del, enter or ctr
-    if (e.keyCode <= 90 || e.keyCode >= 186 && e.keyCode <= 222) {
-      this.setState({
-        isAlphabet: true
-      })
-    // When the key is an IME input (Japanese, Chinese)
-    } else if (e.keyCode === 229) {
-      this.setState({
-        isIME: true
-      })
-    }
-  }
-
-  handleKeyUp (e) {
-    // reset states
-    this.setState({
-      isConfirmTranslation: false
-    })
-
-    // When the key is translation confirmation (Enter, Space)
-    if (this.state.isIME && (e.keyCode === 32 || e.keyCode === 13)) {
-      this.setState({
-        isConfirmTranslation: true
-      })
-      const keyword = this.refs.searchInput.value
-      this.updateKeyword(keyword)
-    }
  }

  handleSearchChange (e) {
-    if (this.state.isAlphabet || this.state.isConfirmTranslation) {
-      const keyword = this.refs.searchInput.value
-      this.updateKeyword(keyword)
-    } else {
-      e.preventDefault()
-    }
-  }
-
-  updateKeyword (keyword) {
-    const { dispatch } = this.props
-    dispatch(push(`/searched/${encodeURIComponent(keyword)}`))
-    this.setState({
-      search: keyword
-    })
-    ee.emit('top:search', keyword)
+    const keyword = e.target.value
+    this.debouncedUpdateKeyword(keyword)
  }

  handleSearchFocus (e) {
@@ -141,6 +108,7 @@ class TopBar extends React.Component {
      isSearching: true
    })
  }
+
  handleSearchBlur (e) {
    e.stopPropagation()

@@ -170,7 +138,7 @@ class TopBar extends React.Component {
  }

  handleCodeInit () {
-    ee.emit('top:search', this.refs.searchInput.value)
+    ee.emit('top:search', this.refs.searchInput.value || '')
  }

  render () {
@@ -183,24 +151,23 @@ class TopBar extends React.Component {
        <div styleName='control'>
          <div styleName='control-search'>
            <div styleName='control-search-input'
-              onFocus={(e) => this.handleSearchFocus(e)}
-              onBlur={(e) => this.handleSearchBlur(e)}
+              onFocus={this.handleSearchFocus}
+              onBlur={this.handleSearchBlur}
              tabIndex='-1'
              ref='search'
            >
-              <input
+              <CInput
                ref='searchInput'
                value={this.state.search}
-                onChange={(e) => this.handleSearchChange(e)}
-                onKeyDown={(e) => this.handleKeyDown(e)}
-                onKeyUp={(e) => this.handleKeyUp(e)}
+                onInputChange={this.handleSearchChange}
+                onKeyDown={this.handleKeyDown}
                placeholder={i18n.__('Search')}
                type='text'
                className='searchInput'
              />
              {this.state.search !== '' &&
                <button styleName='control-search-input-clear'
-                  onClick={(e) => this.handleSearchClearButton(e)}
+                  onClick={this.handleSearchClearButton}
                >
                  <i className='fa fa-fw fa-times' />
                  <span styleName='control-search-input-clear-tooltip'>{i18n.__('Clear Search')}</span>
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -32,6 +32,8 @@ export const DEFAULT_CONFIG = {
    deleteNote: OSX ? 'Command + Shift + Backspace' : 'Ctrl + Shift + Backspace',
    pasteSmartly: OSX ? 'Command + Shift + V' : 'Ctrl + Shift + V',
    prettifyMarkdown: 'Shift + F',
+    insertDate: OSX ? 'Command + /' : 'Ctrl + /',
+    insertDateTime: OSX ? 'Command + Alt + /' : 'Ctrl + Shift + /',
    toggleMenuBar: 'Alt'
  },
  ui: {
@@ -49,6 +51,7 @@ export const DEFAULT_CONFIG = {
    fontFamily: win ? 'Consolas' : 'Monaco',
    indentType: 'space',
    indentSize: '2',
+    lineWrapping: true,
    enableRulers: false,
    rulers: [80, 120],
    displayLineNumbers: true,
@@ -91,8 +94,10 @@ export const DEFAULT_CONFIG = {
    breaks: true,
    smartArrows: false,
    allowCustomCSS: false,
-    customCSS: '',
+
+    customCSS: '/* Drop Your Custom CSS Code Here */',
    sanitize: 'STRICT', // 'STRICT', 'ALLOW_STYLES', 'NONE'
+    mermaidHTMLLabel: false,
    lineThroughCheckbox: true
  },
  blog: {
@@ -116,7 +121,6 @@ function validate (config) {
 }

 function _save (config) {
-  console.log(config)
  window.localStorage.setItem('config', JSON.stringify(config))
 }

@@ -149,7 +153,7 @@ function get () {
    const theme = consts.THEMES.find(theme => theme.name === config.editor.theme)

    if (theme) {
-      editorTheme.setAttribute('href', `../${theme.path}`)
+      editorTheme.setAttribute('href', theme.path)
    } else {
      config.editor.theme = 'default'
    }
@@ -160,7 +164,13 @@ function get () {

 function set (updates) {
  const currentConfig = get()
-  const newConfig = Object.assign({}, DEFAULT_CONFIG, currentConfig, updates)
+
+  const arrangedUpdates = updates
+  if (updates.preview !== undefined && updates.preview.customCSS === '') {
+    arrangedUpdates.preview.customCSS = DEFAULT_CONFIG.preview.customCSS
+  }
+
+  const newConfig = Object.assign({}, DEFAULT_CONFIG, currentConfig, arrangedUpdates)
  if (!validate(newConfig)) throw new Error('INVALID CONFIG')
  _save(newConfig)

@@ -191,7 +201,7 @@ function set (updates) {
  const newTheme = consts.THEMES.find(theme => theme.name === newConfig.editor.theme)

  if (newTheme) {
-    editorTheme.setAttribute('href', `../${newTheme.path}`)
+    editorTheme.setAttribute('href', newTheme.path)
  }

  ipcRenderer.send('config-renew', {
--- a/browser/main/lib/dataApi/attachmentManagement.js
+++ b/browser/main/lib/dataApi/attachmentManagement.js
@@ -241,6 +241,10 @@ function migrateAttachments (markdownContent, storagePath, noteKey) {
 * @returns {String} postprocessed HTML in which all :storage references are mapped to the actual paths.
 */
 function fixLocalURLS (renderedHTML, storagePath) {
+  const encodedWin32SeparatorRegex = /%5C/g
+  const storageRegex = new RegExp('/?' + STORAGE_FOLDER_PLACEHOLDER, 'g')
+  const storageUrl = 'file:///' + path.join(storagePath, DESTINATION_FOLDER).replace(/\\/g, '/')
+
  /*
    A :storage reference is like `:storage/3b6f8bd6-4edd-4b15-96e0-eadc4475b564/f939b2c3.jpg`.

@@ -250,8 +254,7 @@ function fixLocalURLS (renderedHTML, storagePath) {
    - `(?:\\\/|%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))
+    return match.replace(encodedWin32SeparatorRegex, '/').replace(storageRegex, storageUrl)
  })
 }

@@ -617,8 +620,6 @@ function deleteAttachmentsNotPresentInNote (markdownContent, storageKey, noteKey
        }
      })
    })
-  } else {
-    console.info('Attachment folder ("' + attachmentFolder + '") did not exist..')
  }
 }

--- a/browser/main/modals/NewNoteModal.styl
+++ b/browser/main/modals/NewNoteModal.styl
@@ -19,6 +19,7 @@
 .control
  padding 25px 0px
  text-align center
+  display: flex

 .control-button
  width 240px
--- a/browser/main/modals/PreferencesModal/FolderItem.js
+++ b/browser/main/modals/PreferencesModal/FolderItem.js
@@ -225,7 +225,7 @@ class FolderItem extends React.Component {
        <div styleName='folderItem-left'
          style={{borderColor: folder.color}}
        >
-          <span styleName='folderItem-left-name'>{folder.name}</span>
+          <span>{folder.name}</span>
          <span styleName='folderItem-left-key'>({folder.key})</span>
        </div>
        <div styleName='folderItem-right'>
@@ -288,10 +288,10 @@ class Handle extends React.Component {

 class SortableFolderItemComponent extends React.Component {
  render () {
-    const StyledHandle = CSSModules(Handle, this.props.styles)
+    const StyledHandle = CSSModules(Handle, styles)
    const DragHandle = SortableHandle(StyledHandle)

-    const StyledFolderItem = CSSModules(FolderItem, this.props.styles)
+    const StyledFolderItem = CSSModules(FolderItem, styles)

    return (
      <div>
--- a/browser/main/modals/PreferencesModal/FolderList.js
+++ b/browser/main/modals/PreferencesModal/FolderList.js
@@ -22,7 +22,7 @@ class FolderList extends React.Component {
    })

    return (
-      <div styleName='folderList'>
+      <div>
        {folderList.length > 0
          ? folderList
          : <div styleName='folderList-empty'>{i18n.__('No Folders')}</div>
--- a/browser/main/modals/PreferencesModal/HotkeyTab.js
+++ b/browser/main/modals/PreferencesModal/HotkeyTab.js
@@ -181,7 +181,26 @@ class HotkeyTab extends React.Component {
                onChange={(e) => this.handleHotkeyChange(e)}
                ref='prettifyMarkdown'
                value={config.hotkey.prettifyMarkdown}
+                type='text'/>
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Insert Current Date')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                value={config.hotkey.insertDate}
                type='text'
+                disabled='true'
+              />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Insert Current Date and Time')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                value={config.hotkey.insertDateTime}
+                type='text'
+                disabled='true'
              />
            </div>
          </div>
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -14,6 +14,7 @@ import { getLanguages } from 'browser/lib/Languages'
 import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'

 const OSX = global.process.platform === 'darwin'
+const WIN = global.process.platform === 'win32'

 const electron = require('electron')
 const ipc = electron.ipcRenderer
@@ -95,6 +96,7 @@ class UiTab extends React.Component {
        enableRulers: this.refs.enableEditorRulers.value === 'true',
        rulers: this.refs.editorRulers.value.replace(/[^0-9,]/g, '').split(','),
        displayLineNumbers: this.refs.editorDisplayLineNumbers.checked,
+        lineWrapping: this.refs.editorLineWrapping.checked,
        switchPreview: this.refs.editorSwitchPreview.value,
        keyMap: this.refs.editorKeyMap.value,
        snippetDefaultLanguage: this.refs.editorSnippetDefaultLanguage.value,
@@ -129,6 +131,7 @@ class UiTab extends React.Component {
        breaks: this.refs.previewBreaks.checked,
        smartArrows: this.refs.previewSmartArrows.checked,
        sanitize: this.refs.previewSanitize.value,
+        mermaidHTMLLabel: this.refs.previewMermaidHTMLLabel.checked,
        allowCustomCSS: this.refs.previewAllowCustomCSS.checked,
        lineThroughCheckbox: this.refs.lineThroughCheckbox.checked,
        customCSS: this.customCSSCM.getCodeMirror().getValue()
@@ -141,7 +144,7 @@ class UiTab extends React.Component {
      const theme = consts.THEMES.find(theme => theme.name === newCodemirrorTheme)

      if (theme) {
-        checkHighLight.setAttribute('href', `../${theme.path}`)
+        checkHighLight.setAttribute('href', theme.path)
      }
    }

@@ -551,6 +554,17 @@ class UiTab extends React.Component {
            </label>
          </div>

+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.lineWrapping}
+                ref='editorLineWrapping'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Wrap line in Snippet Note')}
+            </label>
+          </div>
+
          <div styleName='group-checkBoxSection'>
            <label>
              <input onChange={(e) => this.handleUIChange(e)}
@@ -806,6 +820,16 @@ class UiTab extends React.Component {
              </select>
            </div>
          </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.mermaidHTMLLabel}
+                ref='previewMermaidHTMLLabel'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Enable HTML label in mermaid flowcharts')}
+            </label>
+          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
              {i18n.__('LaTeX Inline Open Delimiter')}
@@ -889,7 +913,6 @@ class UiTab extends React.Component {
                  onChange={e => this.handleUIChange(e)}
                  ref={e => (this.customCSSCM = e)}
                  value={config.preview.customCSS}
-                  defaultValue={'/* Drop Your Custom CSS Code Here */\n'}
                  options={{
                    lineNumbers: true,
                    mode: 'css',
--- a/browser/main/modals/PreferencesModal/index.js
+++ b/browser/main/modals/PreferencesModal/index.js
@@ -147,7 +147,7 @@ class Preferences extends React.Component {
          key={tab.target}
          onClick={(e) => this.handleNavButtonClick(tab.target)(e)}
        >
-          <span styleName='nav-button-label'>
+          <span>
            {tab.label}
          </span>
          {isUiHotkeyTab ? this.haveToSaveNotif(tab[tab.label].type, tab[tab.label].message) : null}
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -476,7 +476,8 @@ const reducer = combineReducers({
  router: connectRouter(history)
 })

-const store = createStore(reducer, undefined, compose(
-  applyMiddleware(routerMiddleware(history)), DevTools.instrument()))
+const store = createStore(reducer, undefined, process.env.NODE_ENV === 'development'
+  ? compose(applyMiddleware(routerMiddleware(history)), DevTools.instrument())
+  : applyMiddleware(routerMiddleware(history)))

 export { store, history }