Merge remote-tracking branch 'upstream/master' into html-to-md

2025-12-13 01:36:22 +00:00 · 2019-07-28 15:49:16 +02:00
parent 0d36f59036 606be4304d
commit 72b8d56245
71 changed files with 424 additions and 163 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 { createTurndownService } from '../lib/turndown'
 import {languageMaps} from '../lib/CMLanguageList'
 import snippetManager from '../lib/SnippetManager'
@@ -53,6 +53,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
@@ -64,16 +65,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()
@@ -205,23 +201,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())
      },
@@ -267,7 +251,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,
@@ -566,6 +550,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}
@@ -340,6 +341,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,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,
@@ -249,30 +246,9 @@ 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)) {
-      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)
-        }
-      }
+    const menu = buildMarkdownPreviewContextMenu(this, event)
+    if (menu != null) {
+      menu.popup(remote.getCurrentWindow())
    }
  }

@@ -345,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:///', '')
@@ -580,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
@@ -657,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,
@@ -670,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 () {
@@ -703,7 +682,8 @@ export default class MarkdownPreview extends React.Component {
      showCopyNotification,
      storagePath,
      noteKey,
-      sanitize
+      sanitize,
+      mermaidHTMLLabel
    } = this.props
    let { value, codeBlockTheme } = this.props

@@ -845,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)
      }
    )

--- 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
@@ -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/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.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/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
@@ -311,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) {
@@ -450,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'
@@ -485,7 +485,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
@@ -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,8 @@ 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',
+    insertDate: OSX ? 'Command + /' : 'Ctrl + /',
+    insertDateTime: OSX ? 'Command + Alt + /' : 'Ctrl + Shift + /',
    toggleMenuBar: 'Alt'
  },
  ui: {
@@ -48,6 +50,7 @@ export const DEFAULT_CONFIG = {
    fontFamily: win ? 'Consolas' : 'Monaco',
    indentType: 'space',
    indentSize: '2',
+    lineWrapping: true,
    enableRulers: false,
    rulers: [80, 120],
    displayLineNumbers: true,
@@ -83,8 +86,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: {
@@ -108,7 +113,6 @@ function validate (config) {
 }

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

@@ -141,7 +145,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'
    }
@@ -152,7 +156,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)

@@ -183,7 +193,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
@@ -173,6 +173,26 @@ class HotkeyTab extends React.Component {
              />
            </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>
          <div styleName='group-control'>
            <button styleName='group-control-leftButton'
              onClick={(e) => this.handleHintToggleButtonClick(e)}
--- 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
@@ -91,6 +92,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,
@@ -123,6 +125,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()
@@ -135,7 +138,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)
      }
    }

@@ -545,6 +548,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)}
@@ -800,6 +814,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')}
@@ -883,7 +907,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 }