Merge branch 'master' into feature/scrollbarAppearance

2025-12-13 01:36:22 +00:00 · 2019-08-26 10:38:26 +08:00
parent c2a26a8547 857e75594d
commit 9a704a2bcb
75 changed files with 481 additions and 162 deletions
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -20,7 +20,7 @@ import styles from '../components/CodeEditor.styl'
 const { ipcRenderer, remote, clipboard } = require('electron')
 import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
 const spellcheck = require('browser/lib/spellcheck')
-const buildEditorContextMenu = require('browser/lib/contextMenuBuilder')
+const buildEditorContextMenu = require('browser/lib/contextMenuBuilder').buildEditorContextMenu
 import TurndownService from 'turndown'
 import {languageMaps} from '../lib/CMLanguageList'
 import snippetManager from '../lib/SnippetManager'
@@ -28,6 +28,7 @@ import {generateInEditor, tocExistsInEditor} from 'browser/lib/markdown-toc-gene
 import markdownlint from 'markdownlint'
 import Jsonlint from 'jsonlint-mod'
 import { DEFAULT_CONFIG } from '../main/lib/ConfigManager'
+import prettier from 'prettier'

 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'

@@ -106,7 +107,7 @@ export default class CodeEditor extends React.Component {
    const component = this

    if (component.searchState) cm.removeOverlay(component.searchState)
-    if (msg.length < 3) return
+    if (msg.length < 1) return

    cm.operation(function () {
      component.searchState = makeOverlay(msg, 'searching')
@@ -216,6 +217,28 @@ export default class CodeEditor extends React.Component {
        }
        return CodeMirror.Pass
      },
+      [translateHotkey(hotkey.prettifyMarkdown)]: cm => {
+        // Default / User configured prettier options
+        const currentConfig = JSON.parse(self.props.prettierConfig)
+
+        // Parser type will always need to be markdown so we override the option before use
+        currentConfig.parser = 'markdown'
+
+        // Get current cursor position
+        const cursorPos = cm.getCursor()
+        currentConfig.cursorOffset = cm.doc.indexFromPos(cursorPos)
+
+        // Prettify contents of editor
+        const formattedTextDetails = prettier.formatWithCursor(cm.doc.getValue(), currentConfig)
+
+        const formattedText = formattedTextDetails.formatted
+        const formattedCursorPos = formattedTextDetails.cursorOffset
+        cm.doc.setValue(formattedText)
+
+        // Reset Cursor position to be at the same markdown as was before prettifying
+        const newCursorPos = cm.doc.posFromIndex(formattedCursorPos)
+        cm.doc.setCursor(newCursorPos)
+      },
      [translateHotkey(hotkey.pasteSmartly)]: cm => {
        this.handlePaste(cm, true)
      }
@@ -251,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,
@@ -269,7 +292,8 @@ export default class CodeEditor extends React.Component {
        explode: this.props.explodingPairs,
        override: true
      },
-      extraKeys: this.defaultKeyMap
+      extraKeys: this.defaultKeyMap,
+      prettierConfig: this.props.prettierConfig
    })

    document.querySelector('.CodeMirror-lint-markers').style.display = enableMarkdownLint ? 'inline-block' : 'none'
@@ -550,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)
    }
@@ -832,6 +860,17 @@ export default class CodeEditor extends React.Component {
    this.editor.setCursor(cursor)
  }

+  /**
+   * Update content of one line
+   * @param {Number} lineNumber
+   * @param {String} content
+   */
+  setLineContent (lineNumber, content) {
+    const prevContent = this.editor.getLine(lineNumber)
+    const prevContentLength = prevContent ? prevContent.length : 0
+    this.editor.replaceRange(content, { line: lineNumber, ch: 0 }, { line: lineNumber, ch: prevContentLength })
+  }
+
  handleDropImage (dropEvent) {
    dropEvent.preventDefault()
    const {
@@ -1179,5 +1218,6 @@ CodeEditor.defaultProps = {
  autoDetect: false,
  spellCheck: false,
  enableMarkdownLint: DEFAULT_CONFIG.editor.enableMarkdownLint,
-  customMarkdownLintConfig: DEFAULT_CONFIG.editor.customMarkdownLintConfig
+  customMarkdownLintConfig: DEFAULT_CONFIG.editor.customMarkdownLintConfig,
+  prettierConfig: DEFAULT_CONFIG.editor.prettierConfig
 }
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -169,14 +169,15 @@ class MarkdownEditor extends React.Component {
        .split('\n')

      const targetLine = lines[lineIndex]
+      let newLine = targetLine

      if (targetLine.match(checkedMatch)) {
-        lines[lineIndex] = targetLine.replace(checkReplace, '[ ]')
+        newLine = targetLine.replace(checkReplace, '[ ]')
      }
      if (targetLine.match(uncheckedMatch)) {
-        lines[lineIndex] = targetLine.replace(uncheckReplace, '[x]')
+        newLine = targetLine.replace(uncheckReplace, '[x]')
      }
-      this.refs.code.setValue(lines.join('\n'))
+      this.refs.code.setLineContent(lineIndex, newLine)
    }
  }

@@ -304,6 +305,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}
@@ -321,6 +323,7 @@ class MarkdownEditor extends React.Component {
          switchPreview={config.editor.switchPreview}
          enableMarkdownLint={config.editor.enableMarkdownLint}
          customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
+          prettierConfig={config.editor.prettierConfig}
        />
        <MarkdownPreview styleName={this.state.status === 'PREVIEW'
            ? 'preview'
@@ -340,6 +343,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
@@ -18,15 +18,13 @@ import mdurl from 'mdurl'
 import exportNote from 'browser/main/lib/dataApi/exportNote'
 import { escapeHtmlCharacters } from 'browser/lib/utils'
 import yaml from 'js-yaml'
-import context from 'browser/lib/context'
-import i18n from 'browser/lib/i18n'
-import fs from 'fs'
 import { render } from 'react-dom'
 import Carousel from 'react-image-carousel'
 import ConfigManager from '../main/lib/ConfigManager'

 const { remote, shell } = require('electron')
 const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
+const buildMarkdownPreviewContextMenu = require('browser/lib/contextMenuBuilder').buildMarkdownPreviewContextMenu

 const { app } = remote
 const path = require('path')
@@ -34,8 +32,6 @@ const fileUrl = require('file-url')

 const dialog = remote.dialog

-const uri2path = require('file-uri-to-path')
-
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
 const appPath = fileUrl(
  process.env.NODE_ENV === 'production' ? app.getAppPath() : path.resolve()
@@ -45,7 +41,6 @@ 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'

 /**
 * @param {Object} opts
@@ -267,30 +262,12 @@ export default class MarkdownPreview extends React.Component {
  }

  handleContextMenu (event) {
-    // If a contextMenu handler was passed to us, use it instead of the self-defined one -> return
-    if (_.isFunction(this.props.onContextMenu)) {
+    const menu = buildMarkdownPreviewContextMenu(this, event)
+    const switchPreview = ConfigManager.get().editor.switchPreview
+    if (menu != null && switchPreview !== 'RIGHTCLICK') {
+      menu.popup(remote.getCurrentWindow())
+    } else if (_.isFunction(this.props.onContextMenu)) {
      this.props.onContextMenu(event)
-      return
-    }
-    // No contextMenu was passed to us -> execute our own link-opener
-    if (event.target.tagName.toLowerCase() === 'a' && event.target.getAttribute('href')) {
-      const href = event.target.href
-      const isLocalFile = href.startsWith('file:')
-      if (isLocalFile) {
-        const absPath = uri2path(href)
-        try {
-          if (fs.lstatSync(absPath).isFile()) {
-            context.popup([
-              {
-                label: i18n.__('Show in explorer'),
-                click: (e) => shell.showItemInFolder(absPath)
-              }
-            ])
-          }
-        } catch (e) {
-          console.log('Error while evaluating if the file is locally available', e)
-        }
-      }
    }
  }

@@ -367,7 +344,7 @@ export default class MarkdownPreview extends React.Component {
      body,
      this.props.storagePath
    )
-    const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
+    const files = [this.getCodeThemeLink(codeBlockTheme), ...CSS_FILES]
    files.forEach(file => {
      if (global.process.platform === 'win32') {
        file = file.replace('file:///', '')
@@ -403,7 +380,7 @@ export default class MarkdownPreview extends React.Component {

  handleSaveAsPdf () {
    this.exportAsDocument('pdf', (noteContent, exportTasks, targetDir) => {
-      const printout = new remote.BrowserWindow({show: false, webPreferences: {webSecurity: false}})
+      const printout = new remote.BrowserWindow({show: false, webPreferences: {webSecurity: false, javascript: false}})
      printout.loadURL('data:text/html;charset=UTF-8,' + this.htmlContentFormatter(noteContent, exportTasks, targetDir))
      return new Promise((resolve, reject) => {
        printout.webContents.on('did-finish-load', () => {
@@ -598,16 +575,19 @@ export default class MarkdownPreview extends React.Component {
  }

  componentDidUpdate (prevProps) {
-    if (prevProps.value !== this.props.value) this.rewriteIframe()
+    // actual rewriteIframe function should be called only once
+    let needsRewriteIframe = false
+    if (prevProps.value !== this.props.value) needsRewriteIframe = true
    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
    ) {
      this.initMarkdown()
-      this.rewriteIframe()
+      needsRewriteIframe = true
    }
    if (
      prevProps.fontFamily !== this.props.fontFamily ||
@@ -622,8 +602,17 @@ export default class MarkdownPreview extends React.Component {
      prevProps.customCSS !== this.props.customCSS
    ) {
      this.applyStyle()
+      needsRewriteIframe = true
+    }
+
+    if (needsRewriteIframe) {
      this.rewriteIframe()
    }
+
+    // Should scroll to top after selecting another note
+    if (prevProps.noteKey !== this.props.noteKey) {
+      this.getWindow().scrollTo(0, 0)
+    }
  }

  getStyleParams () {
@@ -679,8 +668,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,
@@ -695,11 +683,11 @@ export default class MarkdownPreview extends React.Component {
    this.getWindow().document.documentElement.style.overflowY = 'hidden'
  }

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

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

@@ -726,7 +714,8 @@ export default class MarkdownPreview extends React.Component {
      showCopyNotification,
      storagePath,
      noteKey,
-      sanitize
+      sanitize,
+      mermaidHTMLLabel
    } = this.props
    let { value, codeBlockTheme } = this.props

@@ -858,6 +847,7 @@ export default class MarkdownPreview extends React.Component {
            canvas.height = height.value + 'vh'
          }

+          // eslint-disable-next-line no-unused-vars
          const chart = new Chart(canvas, chartConfig)
        } catch (e) {
          el.className = 'chart-error'
@@ -868,7 +858,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)
      }
    )

@@ -996,8 +986,6 @@ export default class MarkdownPreview extends React.Component {
      overlay.appendChild(zoomImg)
      document.body.appendChild(overlay)
    }
-
-    this.getWindow().scrollTo(0, 0)
  }

  focus () {
--- a/browser/components/MarkdownSplitEditor.js
+++ b/browser/components/MarkdownSplitEditor.js
@@ -88,14 +88,15 @@ class MarkdownSplitEditor extends React.Component {
        .split('\n')

      const targetLine = lines[lineIndex]
+      let newLine = targetLine

      if (targetLine.match(checkedMatch)) {
-        lines[lineIndex] = targetLine.replace(checkReplace, '[ ]')
+        newLine = targetLine.replace(checkReplace, '[ ]')
      }
      if (targetLine.match(uncheckedMatch)) {
-        lines[lineIndex] = targetLine.replace(uncheckReplace, '[x]')
+        newLine = targetLine.replace(uncheckReplace, '[x]')
      }
-      this.refs.code.setValue(lines.join('\n'))
+      this.refs.code.setLineContent(lineIndex, newLine)
    }
  }

@@ -150,7 +151,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 +160,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 +188,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 +200,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/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
@@ -3,7 +3,7 @@
 */
 import PropTypes from 'prop-types'
 import React from 'react'
-import { isArray } from 'lodash'
+import { isArray, sortBy } from 'lodash'
 import invertColor from 'invert-color'
 import CSSModules from 'browser/lib/CSSModules'
 import { getTodoStatus } from 'browser/lib/getTodoStatus'
@@ -43,7 +43,7 @@ const TagElementList = (tags, showTagsAlphabetically, coloredTags) => {
  }

  if (showTagsAlphabetically) {
-    return _.sortBy(tags).map(tag => TagElement({ tagName: tag, color: coloredTags[tag] }))
+    return sortBy(tags).map(tag => TagElement({ tagName: tag, color: coloredTags[tag] }))
  } else {
    return tags.map(tag => TagElement({ tagName: tag, color: coloredTags[tag] }))
  }
@@ -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
@@ -19,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}`
    }
  }))
@@ -28,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
@@ -1,6 +1,12 @@
+import i18n from 'browser/lib/i18n'
+import fs from 'fs'
+
 const {remote} = require('electron')
 const {Menu} = remote.require('electron')
+const {clipboard} = remote.require('electron')
+const {shell} = remote.require('electron')
 const spellcheck = require('./spellcheck')
+const uri2path = require('file-uri-to-path')

 /**
 * Creates the context menu that is shown when there is a right click in the editor of a (not-snippet) note.
@@ -62,4 +68,57 @@ const buildEditorContextMenu = function (editor, event) {
  return Menu.buildFromTemplate(template)
 }

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

 module.exports = function (uuid) {
--- 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,
@@ -96,6 +96,10 @@ function sanitizeInline (html, options) {

 function naughtyHRef (href, options) {
  // href = href.replace(/[\x00-\x20]+/g, '')
+  if (!href) {
+    // No href
+    return false
+  }
  href = href.replace(/<\!\-\-.*?\-\-\>/g, '')

  const matches = href.match(/^([a-zA-Z]+)\:/)
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -289,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/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
@@ -152,7 +152,6 @@ class MarkdownNoteDetail extends React.Component {
  }

  handleFolderChange (e) {
-    const { dispatch } = this.props
    const { note } = this.state
    const value = this.refs.folder.value
    const splitted = value.split('-')
@@ -410,7 +409,7 @@ class MarkdownNoteDetail extends React.Component {
  }

  render () {
-    const { data, location, config } = this.props
+    const { data, dispatch, location, config } = this.props
    const { note, editorType } = this.state
    const storageKey = note.storage
    const folderKey = note.folder
@@ -450,7 +449,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'
@@ -465,6 +464,7 @@ class MarkdownNoteDetail extends React.Component {
          saveTagsAlphabetically={config.ui.saveTagsAlphabetically}
          showTagsAlphabetically={config.ui.showTagsAlphabetically}
          data={data}
+          dispatch={dispatch}
          onChange={this.handleUpdateTag.bind(this)}
          coloredTags={config.coloredTags}
        />
@@ -484,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/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -81,11 +81,4 @@ body[data-theme="dracula"]
  .root
    border-left 1px solid $ui-dracula-borderColor
    background-color $ui-dracula-noteDetail-backgroundColor
-    
-div
-  > button, div
-    -webkit-user-drag none
-    user-select none
-    > img, span
-      -webkit-user-drag none
-      user-select none
+
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -107,4 +107,12 @@ body[data-theme="monokai"]
 body[data-theme="dracula"]
  .info
    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-noteDetail-backgroundColor
+    background-color $ui-dracula-noteDetail-backgroundColor
+
+.info > div
+  > button
+    -webkit-user-drag none
+    user-select none
+    > img, span
+      -webkit-user-drag none
+      user-select none
--- 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()
  }
@@ -670,7 +699,7 @@ class SnippetNoteDetail extends React.Component {
  }

  render () {
-    const { data, config, location } = this.props
+    const { data, dispatch, config, location } = this.props
    const { note } = this.state

    const storageKey = note.storage
@@ -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'
@@ -793,6 +823,7 @@ class SnippetNoteDetail extends React.Component {
          saveTagsAlphabetically={config.ui.saveTagsAlphabetically}
          showTagsAlphabetically={config.ui.showTagsAlphabetically}
          data={data}
+          dispatch={dispatch}
          onChange={(e) => this.handleChange(e)}
          coloredTags={config.coloredTags}
        />
@@ -899,6 +930,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/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -8,6 +8,7 @@ import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import i18n from 'browser/lib/i18n'
 import ee from 'browser/main/lib/eventEmitter'
 import Autosuggest from 'react-autosuggest'
+import { push } from 'connected-react-router'

 class TagSelect extends React.Component {
  constructor (props) {
@@ -96,8 +97,11 @@ class TagSelect extends React.Component {
  }

  handleTagLabelClick (tag) {
-    const { router } = this.context
-    router.push(`/tags/${tag}`)
+    const { dispatch } = this.props
+
+    // Note: `tag` requires encoding later.
+    //       E.g. % in tag is a problem (see issue #3170) - encodeURIComponent(tag) is not working.
+    dispatch(push(`/tags/${tag}`))
  }

  handleTagRemoveButtonClick (tag) {
@@ -255,11 +259,8 @@ class TagSelect extends React.Component {
  }
 }

-TagSelect.contextTypes = {
-  router: PropTypes.shape({})
-}
-
 TagSelect.propTypes = {
+  dispatch: PropTypes.func,
  className: PropTypes.string,
  value: PropTypes.arrayOf(PropTypes.string),
  onChange: PropTypes.func,
--- 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/ToggleModeButton.styl
+++ b/browser/main/Detail/ToggleModeButton.styl
@@ -75,3 +75,10 @@ body[data-theme="dracula"]
    .active
      background-color #bd93f9
      box-shadow 2px 0px 7px #222222
+
+.control-toggleModeButton
+  -webkit-user-drag none
+  user-select none
+  > div img
+    -webkit-user-drag none
+    user-select none
--- 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/Main.js
+++ b/browser/main/Main.js
@@ -102,7 +102,7 @@ class Main extends React.Component {
              {
                name: 'example.js',
                mode: 'javascript',
-                content: "var boostnote = document.getElementById('enjoy').innerHTML\n\nconsole.log(boostnote)",
+                content: "var boostnote = document.getElementById('hello').innerHTML\n\nconsole.log(boostnote)",
                linesHighlighted: []
              }
            ]
@@ -169,6 +169,7 @@ class Main extends React.Component {
      }
    })

+    // eslint-disable-next-line no-undef
    delete CodeMirror.keyMap.emacs['Ctrl-V']

    eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
--- 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
@@ -22,9 +22,10 @@ import context from 'browser/lib/context'
 import { remote } from 'electron'
 import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
 import ColorPicker from 'browser/components/ColorPicker'
+import { every, sortBy } from 'lodash'

 function matchActiveTags (tags, activeTags) {
-  return _.every(activeTags, v => tags.indexOf(v) >= 0)
+  return every(activeTags, v => tags.indexOf(v) >= 0)
 }

 class SideNav extends React.Component {
@@ -283,7 +284,7 @@ class SideNav extends React.Component {
    const { colorPicker } = this.state
    const activeTags = this.getActiveTags(location.pathname)
    const relatedTags = this.getRelatedTags(activeTags, data.noteMap)
-    let tagList = _.sortBy(data.tagNoteMap.map(
+    let tagList = sortBy(data.tagNoteMap.map(
      (tag, name) => ({ name, size: tag.size, related: relatedTags.has(name) })
    ).filter(
      tag => tag.size > 0
@@ -296,7 +297,7 @@ class SideNav extends React.Component {
      })
    }
    if (config.sortTagsBy === 'COUNTER') {
-      tagList = _.sortBy(tagList, item => (0 - item.size))
+      tagList = sortBy(tagList, item => (0 - item.size))
    }
    if (config.ui.showOnlyRelatedTags && (relatedTags.size > 0)) {
      tagList = tagList.filter(
@@ -440,7 +441,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
@@ -71,6 +71,7 @@ class TopBar extends React.Component {
    this.refs.search.childNodes[0].blur
    dispatch(push('/searched'))
    e.preventDefault()
+    this.debouncedUpdateKeyword('')
  }

  handleKeyDown (e) {
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -31,6 +31,7 @@ export const DEFAULT_CONFIG = {
    toggleMode: OSX ? 'Command + Alt + M' : 'Ctrl + M',
    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'
@@ -50,6 +51,7 @@ export const DEFAULT_CONFIG = {
    fontFamily: win ? 'Consolas' : 'Monaco',
    indentType: 'space',
    indentSize: '2',
+    lineWrapping: true,
    enableRulers: false,
    rulers: [80, 120],
    displayLineNumbers: true,
@@ -67,7 +69,14 @@ export const DEFAULT_CONFIG = {
    spellcheck: false,
    enableSmartPaste: false,
    enableMarkdownLint: false,
-    customMarkdownLintConfig: DEFAULT_MARKDOWN_LINT_CONFIG
+    customMarkdownLintConfig: DEFAULT_MARKDOWN_LINT_CONFIG,
+    prettierConfig: ` {
+      "trailingComma": "es5",
+      "tabWidth": 4,
+      "semi": false,
+      "singleQuote": true
+  }`
+
  },
  preview: {
    fontSize: '14',
@@ -85,8 +94,10 @@ export const DEFAULT_CONFIG = {
    breaks: true,
    smartArrows: false,
    allowCustomCSS: false,
+
    customCSS: '/* Drop Your Custom CSS Code Here */',
    sanitize: 'STRICT', // 'STRICT', 'ALLOW_STYLES', 'NONE'
+    mermaidHTMLLabel: false,
    lineThroughCheckbox: true
  },
  blog: {
@@ -142,7 +153,7 @@ function get () {
    const theme = consts.THEMES.find(theme => theme.name === config.editor.theme)

    if (theme) {
-      editorTheme.setAttribute('href', win ? theme.path : `../${theme.path}`)
+      editorTheme.setAttribute('href', theme.path)
    } else {
      config.editor.theme = 'default'
    }
@@ -190,7 +201,7 @@ function set (updates) {
  const newTheme = consts.THEMES.find(theme => theme.name === newConfig.editor.theme)

  if (newTheme) {
-    editorTheme.setAttribute('href', win ? newTheme.path : `../${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
@@ -8,6 +8,7 @@ const escapeStringRegexp = require('escape-string-regexp')
 const sander = require('sander')
 const url = require('url')
 import i18n from 'browser/lib/i18n'
+import { isString } from 'lodash'

 const STORAGE_FOLDER_PLACEHOLDER = ':storage'
 const DESTINATION_FOLDER = 'attachments'
@@ -19,7 +20,7 @@ const PATH_SEPARATORS = escapeStringRegexp(path.posix.sep) + escapeStringRegexp(
 * @returns {Promise<Image>} Image element created
 */
 function getImage (file) {
-  if (_.isString(file)) {
+  if (isString(file)) {
    return new Promise(resolve => {
      const img = new Image()
      img.onload = () => resolve(img)
--- a/browser/main/lib/dataApi/deleteFolder.js
+++ b/browser/main/lib/dataApi/deleteFolder.js
@@ -3,7 +3,6 @@ const path = require('path')
 const resolveStorageData = require('./resolveStorageData')
 const resolveStorageNotes = require('./resolveStorageNotes')
 const CSON = require('@rokt33r/season')
-const sander = require('sander')
 const { findStorage } = require('browser/lib/findStorage')
 const deleteSingleNote = require('./deleteNote')

--- a/browser/main/lib/dataApi/exportNote.js
+++ b/browser/main/lib/dataApi/exportNote.js
@@ -43,7 +43,7 @@ function exportNote (nodeKey, storageKey, noteContent, targetPath, outputFormatt
  )

  if (outputFormatter) {
-    exportedData = outputFormatter(exportedData, exportTasks, path.dirname(targetPath))
+    exportedData = outputFormatter(exportedData, exportTasks, targetPath)
  } else {
    exportedData = Promise.resolve(exportedData)
  }
--- a/browser/main/lib/dataApi/moveNote.js
+++ b/browser/main/lib/dataApi/moveNote.js
@@ -1,7 +1,6 @@
 const resolveStorageData = require('./resolveStorageData')
 const _ = require('lodash')
 const path = require('path')
-const fs = require('fs')
 const CSON = require('@rokt33r/season')
 const keygen = require('browser/lib/keygen')
 const sander = require('sander')
--- 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
@@ -81,6 +81,7 @@ class HotkeyTab extends React.Component {
      toggleMode: this.refs.toggleMode.value,
      deleteNote: this.refs.deleteNote.value,
      pasteSmartly: this.refs.pasteSmartly.value,
+      prettifyMarkdown: this.refs.prettifyMarkdown.value,
      toggleMenuBar: this.refs.toggleMenuBar.value
    }
    this.setState({
@@ -173,6 +174,16 @@ class HotkeyTab extends React.Component {
              />
            </div>
          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Prettify Markdown')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                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'>
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -14,7 +14,6 @@ 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
@@ -32,8 +31,12 @@ class UiTab extends React.Component {
    CodeMirror.autoLoadMode(this.codeMirrorInstance.getCodeMirror(), 'javascript')
    CodeMirror.autoLoadMode(this.customCSSCM.getCodeMirror(), 'css')
    CodeMirror.autoLoadMode(this.customMarkdownLintConfigCM.getCodeMirror(), 'javascript')
+    CodeMirror.autoLoadMode(this.prettierConfigCM.getCodeMirror(), 'javascript')
+    // Set CM editor Sizes
    this.customCSSCM.getCodeMirror().setSize('400px', '400px')
+    this.prettierConfigCM.getCodeMirror().setSize('400px', '400px')
    this.customMarkdownLintConfigCM.getCodeMirror().setSize('400px', '200px')
+
    this.handleSettingDone = () => {
      this.setState({UiAlert: {
        type: 'success',
@@ -92,6 +95,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,
@@ -106,7 +110,9 @@ class UiTab extends React.Component {
        spellcheck: this.refs.spellcheck.checked,
        enableSmartPaste: this.refs.enableSmartPaste.checked,
        enableMarkdownLint: this.refs.enableMarkdownLint.checked,
-        customMarkdownLintConfig: this.customMarkdownLintConfigCM.getCodeMirror().getValue()
+        customMarkdownLintConfig: this.customMarkdownLintConfigCM.getCodeMirror().getValue(),
+        prettierConfig: this.prettierConfigCM.getCodeMirror().getValue()
+
      },
      preview: {
        fontSize: this.refs.previewFontSize.value,
@@ -124,6 +130,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()
@@ -136,7 +143,7 @@ class UiTab extends React.Component {
      const theme = consts.THEMES.find(theme => theme.name === newCodemirrorTheme)

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

@@ -546,6 +553,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)}
@@ -801,6 +819,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')}
@@ -892,7 +920,27 @@ class UiTab extends React.Component {
              </div>
            </div>
          </div>
-
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Prettier Config')}
+            </div>
+            <div styleName='group-section-control'>
+              <div style={{fontFamily}}>
+                <ReactCodeMirror
+                  width='400px'
+                  height='400px'
+                  onChange={e => this.handleUIChange(e)}
+                  ref={e => (this.prettierConfigCM = e)}
+                  value={config.editor.prettierConfig}
+                  options={{
+                    lineNumbers: true,
+                    mode: 'application/json',
+                    lint: true,
+                    theme: codemirrorTheme
+                  }} />
+              </div>
+            </div>
+          </div>
          <div styleName='group-control'>
            <button styleName='group-control-rightButton'
              onClick={(e) => this.handleSaveUIClick(e)}>{i18n.__('Save')}
--- 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}