Merge branch 'master' into migrate-to-jest

# Conflicts: # tests/lib/snapshots/markdown-test.js.md # tests/lib/snapshots/markdown-test.js.snap
2025-12-13 01:36:22 +00:00 · 2019-10-14 07:41:19 +09:00
parent 3921655157 8736666e91
commit fc08d2f8c3
75 changed files with 4848 additions and 3653 deletions
--- a/.eslintrc
+++ b/.eslintrc
@@ -18,7 +18,9 @@
  "globals": {
    "FileReader": true,
    "localStorage": true,
-    "fetch": true
+    "fetch": true,
+    "Image": true,
+    "MutationObserver": true
  },
  "env": {
    "jest": true
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ node_modules/*
 *.log
 .idea
 .vscode
+package-lock.json
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -21,13 +21,14 @@ const { ipcRenderer, remote, clipboard } = require('electron')
 import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
 const spellcheck = require('browser/lib/spellcheck')
 const buildEditorContextMenu = require('browser/lib/contextMenuBuilder').buildEditorContextMenu
-import TurndownService from 'turndown'
+import { createTurndownService } from '../lib/turndown'
 import {languageMaps} from '../lib/CMLanguageList'
 import snippetManager from '../lib/SnippetManager'
 import {generateInEditor, tocExistsInEditor} from 'browser/lib/markdown-toc-generator'
 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'

@@ -69,8 +70,10 @@ export default class CodeEditor extends React.Component {
        storageKey,
        noteKey
      } = this.props
+      if (this.props.deleteUnusedAttachments === true) {
        debouncedDeletionOfAttachments(this.editor.getValue(), storageKey, noteKey)
      }
+    }
    this.pasteHandler = (editor, e) => {
      e.preventDefault()

@@ -98,7 +101,7 @@ export default class CodeEditor extends React.Component {

    this.editorActivityHandler = () => this.handleEditorActivity()

-    this.turndownService = new TurndownService()
+    this.turndownService = createTurndownService()
  }

  handleSearch (msg) {
@@ -106,7 +109,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 +219,37 @@ 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.sortLines)]: cm => {
+        const selection = cm.doc.getSelection()
+        const appendLineBreak = /\n$/.test(selection)
+
+        const sorted = _.split(selection.trim(), '\n').sort()
+        const sortedString = _.join(sorted, '\n') + (appendLineBreak ? '\n' : '')
+
+        cm.doc.replaceSelection(sortedString)
+      },
      [translateHotkey(hotkey.pasteSmartly)]: cm => {
        this.handlePaste(cm, true)
      }
@@ -269,7 +303,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'
@@ -608,6 +643,9 @@ export default class CodeEditor extends React.Component {
        this.editor.addPanel(this.createSpellCheckPanel(), {position: 'bottom'})
      }
    }
+    if (prevProps.deleteUnusedAttachments !== this.props.deleteUnusedAttachments) {
+      this.editor.setOption('deleteUnusedAttachments', this.props.deleteUnusedAttachments)
+    }

    if (needRefresh) {
      this.editor.refresh()
@@ -836,6 +874,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 {
@@ -1169,7 +1218,8 @@ CodeEditor.propTypes = {
  autoDetect: PropTypes.bool,
  spellCheck: PropTypes.bool,
  enableMarkdownLint: PropTypes.bool,
-  customMarkdownLintConfig: PropTypes.string
+  customMarkdownLintConfig: PropTypes.string,
+  deleteUnusedAttachments: PropTypes.bool
 }

 CodeEditor.defaultProps = {
@@ -1183,5 +1233,7 @@ 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,
+  deleteUnusedAttachments: DEFAULT_CONFIG.editor.deleteUnusedAttachments
 }
--- 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)
    }
  }

@@ -322,6 +323,8 @@ class MarkdownEditor extends React.Component {
          switchPreview={config.editor.switchPreview}
          enableMarkdownLint={config.editor.enableMarkdownLint}
          customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
+          prettierConfig={config.editor.prettierConfig}
+          deleteUnusedAttachments={config.editor.deleteUnusedAttachments}
        />
        <MarkdownPreview styleName={this.state.status === 'PREVIEW'
            ? 'preview'
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -41,18 +41,32 @@ 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 (
+/**
+ * @param {Object} opts
+ * @param {String} opts.fontFamily
+ * @param {Numberl} opts.fontSize
+ * @param {String} opts.codeBlockFontFamily
+ * @param {String} opts.theme
+ * @param {Boolean} [opts.lineNumber] Should show line number
+ * @param {Boolean} [opts.scrollPastEnd]
+ * @param {Boolean} [opts.optimizeOverflowScroll] Should tweak body style to optimize overflow scrollbar display
+ * @param {Boolean} [opts.allowCustomCSS] Should add custom css
+ * @param {String} [opts.customCSS] Will be added to bottom, only if `opts.allowCustomCSS` is truthy
+ * @returns {String}
+ */
+function buildStyle (opts) {
+  const {
    fontFamily,
    fontSize,
    codeBlockFontFamily,
    lineNumber,
    scrollPastEnd,
+    optimizeOverflowScroll,
    theme,
    allowCustomCSS,
    customCSS
-) {
+  } = opts
  return `
@font-face {
  font-family: 'Lato';
@@ -82,12 +96,14 @@ function buildStyle (
       url('${appPath}/resources/fonts/MaterialIcons-Regular.woff') format('woff'),
       url('${appPath}/resources/fonts/MaterialIcons-Regular.ttf') format('truetype');
 }
+
 ${markdownStyle}

 body {
  font-family: '${fontFamily.join("','")}';
  font-size: ${fontSize}px;
-  ${scrollPastEnd && 'padding-bottom: 90vh;'}
+  ${scrollPastEnd ? 'padding-bottom: 90vh;' : ''}
+  ${optimizeOverflowScroll ? 'height: 100%;' : ''}
 }
@media print {
  body {
@@ -247,8 +263,11 @@ export default class MarkdownPreview extends React.Component {

  handleContextMenu (event) {
    const menu = buildMarkdownPreviewContextMenu(this, event)
-    if (menu != null) {
+    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)
    }
  }

@@ -310,7 +329,7 @@ export default class MarkdownPreview extends React.Component {
      customCSS
    } = this.getStyleParams()

-    const inlineStyles = buildStyle(
+    const inlineStyles = buildStyle({
      fontFamily,
      fontSize,
      codeBlockFontFamily,
@@ -319,7 +338,7 @@ export default class MarkdownPreview extends React.Component {
      theme,
      allowCustomCSS,
      customCSS
-    )
+    })
    let body = this.markdown.render(noteContent)
    body = attachmentManagement.fixLocalURLS(
      body,
@@ -361,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', () => {
@@ -556,7 +575,9 @@ 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 ||
@@ -566,7 +587,7 @@ export default class MarkdownPreview extends React.Component {
      prevProps.lineThroughCheckbox !== this.props.lineThroughCheckbox
    ) {
      this.initMarkdown()
-      this.rewriteIframe()
+      needsRewriteIframe = true
    }
    if (
      prevProps.fontFamily !== this.props.fontFamily ||
@@ -581,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 () {
@@ -639,16 +669,18 @@ export default class MarkdownPreview extends React.Component {
    this.getWindow().document.getElementById(
      'codeTheme'
    ).href = this.getCodeThemeLink(codeBlockTheme)
-    this.getWindow().document.getElementById('style').innerHTML = buildStyle(
+    this.getWindow().document.getElementById('style').innerHTML = buildStyle({
      fontFamily,
      fontSize,
      codeBlockFontFamily,
      lineNumber,
      scrollPastEnd,
+      optimizeOverflowScroll: true,
      theme,
      allowCustomCSS,
      customCSS
-    )
+    })
+    this.getWindow().document.documentElement.style.overflowY = 'hidden'
  }

  getCodeThemeLink (name) {
@@ -815,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'
@@ -953,8 +986,6 @@ export default class MarkdownPreview extends React.Component {
      overlay.appendChild(zoomImg)
      document.body.appendChild(overlay)
    }
-
-    this.getWindow().scrollTo(0, 0)
  }

  focus () {
@@ -1002,17 +1033,22 @@ export default class MarkdownPreview extends React.Component {
    e.stopPropagation()

    const rawHref = e.target.getAttribute('href')
-    const parser = document.createElement('a')
-    parser.href = e.target.getAttribute('href')
-    const { href, hash } = parser
-    const linkHash = hash === '' ? rawHref : hash // needed because we're having special link formats that are removed by parser e.g. :line:10
-
    if (!rawHref) return // not checked href because parser will create file://... string for [empty link]()

-    const extractId = /(main.html)?#/
-    const regexNoteInternalLink = new RegExp(`${extractId.source}(.+)`)
-    if (regexNoteInternalLink.test(linkHash)) {
-      const targetId = mdurl.encode(linkHash.replace(extractId, ''))
+    const parser = document.createElement('a')
+    parser.href = rawHref
+    const isStartWithHash = rawHref[0] === '#'
+    const { href, hash } = parser
+
+    const linkHash = hash === '' ? rawHref : hash // needed because we're having special link formats that are removed by parser e.g. :line:10
+
+    const extractIdRegex = /file:\/\/.*main.?\w*.html#/ // file://path/to/main(.development.)html
+    const regexNoteInternalLink = new RegExp(`${extractIdRegex.source}(.+)`)
+    if (isStartWithHash || regexNoteInternalLink.test(rawHref)) {
+      const posOfHash = linkHash.indexOf('#')
+      if (posOfHash > -1) {
+        const extractedId = linkHash.slice(posOfHash + 1)
+        const targetId = mdurl.encode(extractedId)
        const targetElement = this.refs.root.contentWindow.document.getElementById(
          targetId
        )
@@ -1022,6 +1058,7 @@ export default class MarkdownPreview extends React.Component {
        }
        return
      }
+    }

    // this will match the new uuid v4 hash and the old hash
    // e.g.
--- 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)
    }
  }

@@ -181,6 +182,7 @@ class MarkdownSplitEditor extends React.Component {
          switchPreview={config.editor.switchPreview}
          enableMarkdownLint={config.editor.enableMarkdownLint}
          customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
+          deleteUnusedAttachments={config.editor.deleteUnusedAttachments}
       />
        <div styleName='slider' style={{left: this.state.codeEditorWidthInPercent + '%'}} onMouseDown={e => this.handleMouseDown(e)} >
          <div styleName='slider-hitbox' />
--- 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] }))
  }
--- 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
@@ -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
@@ -183,32 +183,47 @@ class Markdown {
    })

    const deflate = require('markdown-it-plantuml/lib/deflate')
-    this.md.use(require('markdown-it-plantuml'), {
-      generateSource: function (umlCode) {
-        const stripTrailingSlash = (url) => url.endsWith('/') ? url.slice(0, -1) : url
-        const serverAddress = stripTrailingSlash(config.preview.plantUMLServerAddress) + '/svg'
+    const plantuml = require('markdown-it-plantuml')
+    const plantUmlStripTrailingSlash = (url) => url.endsWith('/') ? url.slice(0, -1) : url
+    const plantUmlServerAddress = plantUmlStripTrailingSlash(config.preview.plantUMLServerAddress)
+    const parsePlantUml = function (umlCode, openMarker, closeMarker, type) {
      const s = unescape(encodeURIComponent(umlCode))
      const zippedCode = deflate.encode64(
-          deflate.zip_deflate(`@startuml\n${s}\n@enduml`, 9)
+        deflate.zip_deflate(`${openMarker}\n${s}\n${closeMarker}`, 9)
      )
-        return `${serverAddress}/${zippedCode}`
+      return `${plantUmlServerAddress}/${type}/${zippedCode}`
    }
+
+    this.md.use(plantuml, {
+      generateSource: (umlCode) => parsePlantUml(umlCode, '@startuml', '@enduml', 'svg')
    })

-    // Ditaa support
-    this.md.use(require('markdown-it-plantuml'), {
+    // Ditaa support. PlantUML server doesn't support Ditaa in SVG, so we set the format as PNG at the moment.
+    this.md.use(plantuml, {
      openMarker: '@startditaa',
      closeMarker: '@endditaa',
-      generateSource: function (umlCode) {
-        const stripTrailingSlash = (url) => url.endsWith('/') ? url.slice(0, -1) : url
-        // Currently PlantUML server doesn't support Ditaa in SVG, so we set the format as PNG at the moment.
-        const serverAddress = stripTrailingSlash(config.preview.plantUMLServerAddress) + '/png'
-        const s = unescape(encodeURIComponent(umlCode))
-        const zippedCode = deflate.encode64(
-          deflate.zip_deflate(`@startditaa\n${s}\n@endditaa`, 9)
-        )
-        return `${serverAddress}/${zippedCode}`
-      }
+      generateSource: (umlCode) => parsePlantUml(umlCode, '@startditaa', '@endditaa', 'png')
+    })
+
+    // Mindmap support
+    this.md.use(plantuml, {
+      openMarker: '@startmindmap',
+      closeMarker: '@endmindmap',
+      generateSource: (umlCode) => parsePlantUml(umlCode, '@startmindmap', '@endmindmap', 'svg')
+    })
+
+    // WBS support
+    this.md.use(plantuml, {
+      openMarker: '@startwbs',
+      closeMarker: '@endwbs',
+      generateSource: (umlCode) => parsePlantUml(umlCode, '@startwbs', '@endwbs', 'svg')
+    })
+
+    // Gantt support
+    this.md.use(plantuml, {
+      openMarker: '@startgantt',
+      closeMarker: '@endgantt',
+      generateSource: (umlCode) => parsePlantUml(umlCode, '@startgantt', '@endgantt', 'svg')
    })

    // Override task item
--- a/browser/lib/turndown.js
+++ b/browser/lib/turndown.js
@@ -0,0 +1,9 @@
+const TurndownService = require('turndown')
+const { gfm } = require('turndown-plugin-gfm')
+
+export const createTurndownService = function () {
+  const turndown = new TurndownService()
+  turndown.use(gfm)
+  turndown.remove('script')
+  return turndown
+}
--- a/browser/lib/utils.js
+++ b/browser/lib/utils.js
@@ -136,9 +136,24 @@ export function isMarkdownTitleURL (str) {
  return /(^#{1,6}\s)(?:\w+:|^)\/\/(?:[^\s\.]+\.\S{2}|localhost[\:?\d]*)/.test(str)
 }

+export function humanFileSize (bytes) {
+  const threshold = 1000
+  if (Math.abs(bytes) < threshold) {
+    return bytes + ' B'
+  }
+  var units = ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  var u = -1
+  do {
+    bytes /= threshold
+    ++u
+  } while (Math.abs(bytes) >= threshold && u < units.length - 1)
+  return bytes.toFixed(1) + ' ' + units[u]
+}
+
 export default {
  lastFindInArray,
  escapeHtmlCharacters,
  isObjectEqual,
-  isMarkdownTitleURL
+  isMarkdownTitleURL,
+  humanFileSize
 }
--- a/browser/main/Detail/FromUrlButton.js
+++ b/browser/main/Detail/FromUrlButton.js
@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './FromUrlButton.styl'
+import _ from 'lodash'
+import i18n from 'browser/lib/i18n'
+
+class FromUrlButton extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isActive: false
+    }
+  }
+
+  handleMouseDown (e) {
+    this.setState({
+      isActive: true
+    })
+  }
+
+  handleMouseUp (e) {
+    this.setState({
+      isActive: false
+    })
+  }
+
+  handleMouseLeave (e) {
+    this.setState({
+      isActive: false
+    })
+  }
+
+  render () {
+    const { className } = this.props
+
+    return (
+      <button className={_.isString(className)
+          ? 'FromUrlButton ' + className
+          : 'FromUrlButton'
+        }
+        styleName={this.state.isActive || this.props.isActive
+          ? 'root--active'
+          : 'root'
+        }
+        onMouseDown={(e) => this.handleMouseDown(e)}
+        onMouseUp={(e) => this.handleMouseUp(e)}
+        onMouseLeave={(e) => this.handleMouseLeave(e)}
+        onClick={this.props.onClick}>
+        <img styleName='icon'
+          src={this.state.isActive || this.props.isActive
+            ? '../resources/icon/icon-external.svg'
+            : '../resources/icon/icon-external.svg'
+          }
+        />
+        <span styleName='tooltip'>{i18n.__('Convert URL to Markdown')}</span>
+      </button>
+    )
+  }
+}
+
+FromUrlButton.propTypes = {
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func,
+  className: PropTypes.string
+}
+
+export default CSSModules(FromUrlButton, styles)
--- a/browser/main/Detail/FromUrlButton.styl
+++ b/browser/main/Detail/FromUrlButton.styl
@@ -0,0 +1,41 @@
+.root
+  top 45px
+  topBarButtonRight()
+  &:hover
+    transition 0.2s
+    color alpha($ui-favorite-star-button-color, 0.6)
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 125px
+  width 90px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.root--active
+  @extend .root
+  transition 0.15s
+  color $ui-favorite-star-button-color
+  &:hover
+    transition 0.2s
+    color alpha($ui-favorite-star-button-color, 0.6)
+
+.icon
+  transition transform 0.15s
+  height 13px
+
+body[data-theme="dark"]
+  .root
+    topBarButtonDark()
+    &:hover
+      transition 0.2s
+      color alpha($ui-favorite-star-button-color, 0.6)
--- 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
@@ -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}
        />
@@ -472,6 +472,7 @@ class MarkdownNoteDetail extends React.Component {
      </div>
      <div styleName='info-right'>
        <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
+
        <StarButton
          onClick={(e) => this.handleStarButtonClick(e)}
          isActive={note.isStarred}
@@ -511,7 +512,7 @@ class MarkdownNoteDetail extends React.Component {
          exportAsTxt={this.exportAsTxt}
          exportAsHtml={this.exportAsHtml}
          exportAsPdf={this.exportAsPdf}
-          wordCount={note.content.split(' ').length}
+          wordCount={note.content.trim().split(/\s+/g).length}
          letterCount={note.content.replace(/\r?\n/g, '').length}
          type={note.type}
          print={this.print}
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -82,10 +82,3 @@ body[data-theme="dracula"]
    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
@@ -108,3 +108,11 @@ body[data-theme="dracula"]
  .info
    border-color $ui-dracula-borderColor
    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/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -699,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
@@ -823,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}
        />
--- 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.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/index.js
+++ b/browser/main/Detail/index.js
@@ -50,16 +50,14 @@ class Detail extends React.Component {
        const searchStr = params.searchword
        displayedNotes = searchStr === undefined || searchStr === '' ? allNotes
          : searchFromNotes(allNotes, searchStr)
-      }
-
-      if (location.pathname.match(/\/tags/)) {
+      } else if (location.pathname.match(/^\/tags/)) {
        const listOfTags = params.tagname.split(' ')
        displayedNotes = data.noteMap.map(note => note).filter(note =>
          listOfTags.every(tag => note.tags.includes(tag))
        )
      }

-      if (location.pathname.match(/\/trashed/)) {
+      if (location.pathname.match(/^\/trashed/)) {
        displayedNotes = trashedNotes
      } else {
        displayedNotes = _.differenceWith(displayedNotes, trashedNotes, (note, trashed) => note.key === trashed.key)
--- 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/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -88,6 +88,7 @@ class NoteList extends React.Component {
    this.importFromFileHandler = this.importFromFile.bind(this)
    this.jumpNoteByHash = this.jumpNoteByHashHandler.bind(this)
    this.handleNoteListKeyUp = this.handleNoteListKeyUp.bind(this)
+    this.handleNoteListBlur = this.handleNoteListBlur.bind(this)
    this.getNoteKeyFromTargetIndex = this.getNoteKeyFromTargetIndex.bind(this)
    this.cloneNote = this.cloneNote.bind(this)
    this.deleteNote = this.deleteNote.bind(this)
@@ -348,6 +349,13 @@ class NoteList extends React.Component {
    }
  }

+  handleNoteListBlur () {
+    this.setState({
+      shiftKeyDown: false,
+      ctrlKeyDown: false
+    })
+  }
+
  getNotes () {
    const { data, match: { params }, location } = this.props
    if (location.pathname.match(/\/home/) || location.pathname.match(/alltags/)) {
@@ -1155,6 +1163,7 @@ class NoteList extends React.Component {
          tabIndex='-1'
          onKeyDown={(e) => this.handleNoteListKeyDown(e)}
          onKeyUp={this.handleNoteListKeyUp}
+          onBlur={this.handleNoteListBlur}
        >
          {noteList}
        </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 {
@@ -271,6 +272,7 @@ class SideNav extends React.Component {
          <div styleName='tagList'>
            {this.tagListComponent(data)}
          </div>
+          <NavToggleButton isFolded={isFolded} handleToggleButtonClick={this.handleToggleButtonClick.bind(this)} />
        </div>
      )
    }
@@ -283,7 +285,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 +298,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(
--- 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',
+    prettifyMarkdown: OSX ? 'Command + Shift + F' : 'Ctrl + Shift + F',
+    sortLines: OSX ? 'Command + Shift + S' : 'Ctrl + Shift + S',
    insertDate: OSX ? 'Command + /' : 'Ctrl + /',
    insertDateTime: OSX ? 'Command + Alt + /' : 'Ctrl + Shift + /',
    toggleMenuBar: 'Alt'
@@ -68,7 +70,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
+    }`,
+    deleteUnusedAttachments: true
  },
  preview: {
    fontSize: '14',
--- 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)
@@ -623,6 +624,76 @@ function deleteAttachmentsNotPresentInNote (markdownContent, storageKey, noteKey
  }
 }

+/**
+ * @description Get all existing attachments related to a specific note
+ including their status (in use or not) and their path. Return null if there're no attachment related to note or specified parametters are invalid
+ * @param markdownContent markdownContent of the current note
+ * @param storageKey StorageKey of the current note
+ * @param noteKey NoteKey of the currentNote
+ * @return {Promise<Array<{path: String, isInUse: bool}>>} Promise returning the
+ list of attachments with their properties */
+function getAttachmentsPathAndStatus (markdownContent, storageKey, noteKey) {
+  if (storageKey == null || noteKey == null || markdownContent == null) {
+    return null
+  }
+  const targetStorage = findStorage.findStorage(storageKey)
+  const attachmentFolder = path.join(targetStorage.path, DESTINATION_FOLDER, noteKey)
+  const attachmentsInNote = getAttachmentsInMarkdownContent(markdownContent)
+  const attachmentsInNoteOnlyFileNames = []
+  if (attachmentsInNote) {
+    for (let i = 0; i < attachmentsInNote.length; i++) {
+      attachmentsInNoteOnlyFileNames.push(attachmentsInNote[i].replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + escapeStringRegexp(path.sep) + noteKey + escapeStringRegexp(path.sep), 'g'), ''))
+    }
+  }
+  if (fs.existsSync(attachmentFolder)) {
+    return new Promise((resolve, reject) => {
+      fs.readdir(attachmentFolder, (err, files) => {
+        if (err) {
+          console.error('Error reading directory "' + attachmentFolder + '". Error:')
+          console.error(err)
+          reject(err)
+          return
+        }
+        const attachments = []
+        for (const file of files) {
+          const absolutePathOfFile = path.join(targetStorage.path, DESTINATION_FOLDER, noteKey, file)
+          if (!attachmentsInNoteOnlyFileNames.includes(file)) {
+            attachments.push({ path: absolutePathOfFile, isInUse: false })
+          } else {
+            attachments.push({ path: absolutePathOfFile, isInUse: true })
+          }
+        }
+        resolve(attachments)
+      })
+    })
+  } else {
+    return null
+  }
+}
+
+/**
+ * @description Remove all specified attachment paths
+ * @param attachments attachment paths
+ * @return {Promise} Promise after all attachments are removed */
+function removeAttachmentsByPaths (attachments) {
+  const promises = []
+  for (const attachment of attachments) {
+    const promise = new Promise((resolve, reject) => {
+      fs.unlink(attachment, (err) => {
+        if (err) {
+          console.error('Could not delete "%s"', attachment)
+          console.error(err)
+          reject(err)
+          return
+        }
+        resolve()
+      })
+    })
+    promises.push(promise)
+  }
+  return Promise.all(promises)
+}
+
 /**
 * Clones the attachments of a given note.
 * Copies the attachments to their new destination and updates the content of the new note so that the attachment-links again point to the correct destination.
@@ -725,8 +796,10 @@ module.exports = {
  getAbsolutePathsOfAttachmentsInContent,
  importAttachments,
  removeStorageAndNoteReferences,
+  removeAttachmentsByPaths,
  deleteAttachmentFolder,
  deleteAttachmentsNotPresentInNote,
+  getAttachmentsPathAndStatus,
  moveAttachments,
  cloneAttachments,
  isAttachmentLink,
--- a/browser/main/lib/dataApi/createNoteFromUrl.js
+++ b/browser/main/lib/dataApi/createNoteFromUrl.js
@@ -0,0 +1,79 @@
+const http = require('http')
+const https = require('https')
+const { createTurndownService } = require('../../../lib/turndown')
+const createNote = require('./createNote')
+
+import { push } from 'connected-react-router'
+import ee from 'browser/main/lib/eventEmitter'
+
+function validateUrl (str) {
+  if (/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(str)) {
+    return true
+  } else {
+    return false
+  }
+}
+
+function createNoteFromUrl (url, storage, folder, dispatch = null, location = null) {
+  return new Promise((resolve, reject) => {
+    const td = createTurndownService()
+
+    if (!validateUrl(url)) {
+      reject({result: false, error: 'Please check your URL is in correct format. (Example, https://www.google.com)'})
+    }
+
+    const request = url.startsWith('https') ? https : http
+
+    const req = request.request(url, (res) => {
+      let data = ''
+
+      res.on('data', (chunk) => {
+        data += chunk
+      })
+
+      res.on('end', () => {
+        const markdownHTML = td.turndown(data)
+
+        if (dispatch !== null) {
+          createNote(storage, {
+            type: 'MARKDOWN_NOTE',
+            folder: folder,
+            title: '',
+            content: markdownHTML
+          })
+          .then((note) => {
+            const noteHash = note.key
+            dispatch({
+              type: 'UPDATE_NOTE',
+              note: note
+            })
+            dispatch(push({
+              pathname: location.pathname,
+              query: {key: noteHash}
+            }))
+            ee.emit('list:jump', noteHash)
+            ee.emit('detail:focus')
+            resolve({result: true, error: null})
+          })
+        } else {
+          createNote(storage, {
+            type: 'MARKDOWN_NOTE',
+            folder: folder,
+            title: '',
+            content: markdownHTML
+          }).then((note) => {
+            resolve({result: true, note, error: null})
+          })
+        }
+      })
+    })
+
+    req.on('error', (e) => {
+      console.error('error in parsing URL', e)
+      reject({result: false, error: e})
+    })
+    req.end()
+  })
+}
+
+module.exports = createNoteFromUrl
--- 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/index.js
+++ b/browser/main/lib/dataApi/index.js
@@ -11,6 +11,7 @@ const dataApi = {
  exportFolder: require('./exportFolder'),
  exportStorage: require('./exportStorage'),
  createNote: require('./createNote'),
+  createNoteFromUrl: require('./createNoteFromUrl'),
  updateNote: require('./updateNote'),
  deleteNote: require('./deleteNote'),
  moveNote: require('./moveNote'),
--- 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/CreateMarkdownFromURLModal.js
+++ b/browser/main/modals/CreateMarkdownFromURLModal.js
@@ -0,0 +1,118 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './CreateMarkdownFromURLModal.styl'
+import dataApi from 'browser/main/lib/dataApi'
+import ModalEscButton from 'browser/components/ModalEscButton'
+import i18n from 'browser/lib/i18n'
+
+class CreateMarkdownFromURLModal extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      name: '',
+      showerror: false,
+      errormessage: ''
+    }
+  }
+
+  componentDidMount () {
+    this.refs.name.focus()
+    this.refs.name.select()
+  }
+
+  handleCloseButtonClick (e) {
+    this.props.close()
+  }
+
+  handleChange (e) {
+    this.setState({
+      name: this.refs.name.value
+    })
+  }
+
+  handleKeyDown (e) {
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
+  }
+
+  handleInputKeyDown (e) {
+    switch (e.keyCode) {
+      case 13:
+        this.confirm()
+    }
+  }
+
+  handleConfirmButtonClick (e) {
+    this.confirm()
+  }
+
+  showError (message) {
+    this.setState({
+      showerror: true,
+      errormessage: message
+    })
+  }
+
+  hideError () {
+    this.setState({
+      showerror: false,
+      errormessage: ''
+    })
+  }
+
+  confirm () {
+    this.hideError()
+    const { storage, folder, dispatch, location } = this.props
+
+    dataApi.createNoteFromUrl(this.state.name, storage, folder, dispatch, location).then((result) => {
+      this.props.close()
+    }).catch((result) => {
+      this.showError(result.error)
+    })
+  }
+
+  render () {
+    return (
+      <div styleName='root'
+        tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
+        <div styleName='header'>
+          <div styleName='title'>{i18n.__('Import Markdown From URL')}</div>
+        </div>
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
+        <div styleName='control'>
+          <div styleName='control-folder'>
+            <div styleName='control-folder-label'>{i18n.__('Insert URL Here')}</div>
+            <input styleName='control-folder-input'
+              ref='name'
+              value={this.state.name}
+              onChange={(e) => this.handleChange(e)}
+              onKeyDown={(e) => this.handleInputKeyDown(e)}
+            />
+          </div>
+          <button styleName='control-confirmButton'
+            onClick={(e) => this.handleConfirmButtonClick(e)}
+          >
+            {i18n.__('Import')}
+          </button>
+          <div className='error' styleName='error'>{this.state.errormessage}</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+CreateMarkdownFromURLModal.propTypes = {
+  storage: PropTypes.string,
+  folder: PropTypes.string,
+  dispatch: PropTypes.func,
+  location: PropTypes.shape({
+    pathname: PropTypes.string
+  })
+}
+
+export default CSSModules(CreateMarkdownFromURLModal, styles)
--- a/browser/main/modals/CreateMarkdownFromURLModal.styl
+++ b/browser/main/modals/CreateMarkdownFromURLModal.styl
@@ -0,0 +1,160 @@
+.root
+  modal()
+  width 500px
+  height 270px
+  overflow hidden
+  position relative
+
+.header
+  height 80px
+  margin-bottom 10px
+  margin-top 20px
+  font-size 18px
+  line-height 50px
+  background-color $ui-backgroundColor
+  color $ui-text-color
+
+.title
+  font-size 36px
+  font-weight 600
+
+.control-folder-label
+  text-align left
+  font-size 14px
+  color $ui-text-color
+
+.control-folder-input
+  display block
+  height 40px
+  width 490px
+  padding 0 5px
+  margin 10px 0
+  border 1px solid $ui-input--create-folder-modal
+  border-radius 2px
+  background-color transparent
+  outline none
+  vertical-align middle
+  font-size 16px
+  &:disabled
+    background-color $ui-input--disabled-backgroundColor
+  &:focus, &:active
+    border-color $ui-active-color
+
+.control-confirmButton
+  display block
+  height 35px
+  width 140px
+  border none
+  border-radius 2px
+  padding 0 25px
+  margin 20px auto
+  font-size 14px
+  colorPrimaryButton()
+
+body[data-theme="dark"]
+  .root
+    modalDark()
+    width 500px
+    height 270px
+    overflow hidden
+    position relative
+
+  .header
+    background-color transparent
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+
+  .control-folder-label
+    color $ui-dark-text-color
+
+  .control-folder-input
+    border 1px solid $ui-input--create-folder-modal
+    color white
+
+   .description
+    color $ui-inactive-text-color
+
+  .control-confirmButton
+    colorDarkPrimaryButton()
+
+body[data-theme="solarized-dark"]
+  .root
+    modalSolarizedDark()
+    width 500px
+    height 270px
+    overflow hidden
+    position relative
+
+  .header
+    background-color transparent
+    border-color $ui-dark-borderColor
+    color $ui-solarized-dark-text-color
+
+  .control-folder-label
+    color $ui-solarized-dark-text-color
+
+  .control-folder-input
+    border 1px solid $ui-input--create-folder-modal
+    color white
+
+   .description
+    color $ui-inactive-text-color
+
+  .control-confirmButton
+    colorSolarizedDarkPrimaryButton()
+
+.error
+  text-align center
+  color #F44336
+
+body[data-theme="monokai"]
+  .root
+    modalMonokai()
+    width 500px
+    height 270px
+    overflow hidden
+    position relative
+
+  .header
+    background-color transparent
+    border-color $ui-dark-borderColor
+    color $ui-monokai-text-color
+
+  .control-folder-label
+    color $ui-monokai-text-color
+
+  .control-folder-input
+    border 1px solid $ui-input--create-folder-modal
+    color white
+
+   .description
+    color $ui-inactive-text-color
+
+  .control-confirmButton
+    colorMonokaiPrimaryButton()
+
+body[data-theme="dracula"]
+  .root
+    modalDracula()
+    width 500px
+    height 270px
+    overflow hidden
+    position relative
+
+  .header
+    background-color transparent
+    border-color $ui-dracula-borderColor
+    color $ui-dracula-text-color
+
+  .control-folder-label
+    color $ui-dracula-text-color
+
+  .control-folder-input
+    border 1px solid $ui-input--create-folder-modal
+    color white
+
+   .description
+    color $ui-inactive-text-color
+
+  .control-confirmButton
+    colorDraculaPrimaryButton()
--- a/browser/main/modals/NewNoteModal.js
+++ b/browser/main/modals/NewNoteModal.js
@@ -3,6 +3,8 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './NewNoteModal.styl'
 import ModalEscButton from 'browser/components/ModalEscButton'
 import i18n from 'browser/lib/i18n'
+import { openModal } from 'browser/main/lib/modal'
+import CreateMarkdownFromURLModal from '../modals/CreateMarkdownFromURLModal'
 import { createMarkdownNote, createSnippetNote } from 'browser/lib/newNote'
 import queryString from 'query-string'

@@ -21,6 +23,18 @@ class NewNoteModal extends React.Component {
    this.props.close()
  }

+  handleCreateMarkdownFromUrlClick (e) {
+    this.props.close()
+
+    const { storage, folder, dispatch, location } = this.props
+    openModal(CreateMarkdownFromURLModal, {
+      storage: storage,
+      folder: folder,
+      dispatch,
+      location
+    })
+  }
+
  handleMarkdownNoteButtonClick (e) {
    const { storage, folder, dispatch, location, config } = this.props
    const params = location.search !== '' && queryString.parse(location.search)
@@ -115,10 +129,8 @@ class NewNoteModal extends React.Component {
          </button>

        </div>
-        <div styleName='description'>
-          <i className='fa fa-arrows-h' />{i18n.__('Tab to switch format')}
-        </div>
-
+        <div styleName='description'><i className='fa fa-arrows-h' />{i18n.__('Tab to switch format')}</div>
+        <div styleName='from-url' onClick={(e) => this.handleCreateMarkdownFromUrlClick(e)}>Or, create a new markdown note from a URL</div>
      </div>
    )
  }
--- a/browser/main/modals/NewNoteModal.styl
+++ b/browser/main/modals/NewNoteModal.styl
@@ -48,6 +48,12 @@
  text-align center
  margin-bottom 25px

+.from-url
+  color $ui-inactive-text-color
+  text-align center
+  margin-bottom 25px
+  cursor pointer
+
 body[data-theme="dark"]
  .root
    modalDark()
@@ -62,7 +68,7 @@ body[data-theme="dark"]
    &:focus
      colorDarkPrimaryButton()

-  .description
+  .description, .from-url
    color $ui-inactive-text-color

 body[data-theme="solarized-dark"]
@@ -79,7 +85,7 @@ body[data-theme="solarized-dark"]
    &:focus
      colorDarkPrimaryButton()

-  .description
+  .description, .from-url
    color $ui-solarized-dark-text-color

 body[data-theme="monokai"]
@@ -96,7 +102,7 @@ body[data-theme="monokai"]
    &:focus
      colorDarkPrimaryButton()

-  .description
+  .description, .from-url
    color $ui-monokai-text-color

 body[data-theme="dracula"]
--- a/browser/main/modals/PreferencesModal/HotkeyTab.js
+++ b/browser/main/modals/PreferencesModal/HotkeyTab.js
@@ -76,13 +76,16 @@ class HotkeyTab extends React.Component {

  handleHotkeyChange (e) {
    const { config } = this.state
-    config.hotkey = {
+    config.hotkey = Object.assign({}, config.hotkey, {
      toggleMain: this.refs.toggleMain.value,
      toggleMode: this.refs.toggleMode.value,
      deleteNote: this.refs.deleteNote.value,
      pasteSmartly: this.refs.pasteSmartly.value,
-      toggleMenuBar: this.refs.toggleMenuBar.value
-    }
+      prettifyMarkdown: this.refs.prettifyMarkdown.value,
+      toggleMenuBar: this.refs.toggleMenuBar.value,
+      insertDate: this.refs.insertDate.value,
+      insertDateTime: this.refs.insertDateTime.value
+    })
    this.setState({
      config
    })
@@ -173,10 +176,21 @@ 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'>
              <input styleName='group-section-control-input'
+                ref='insertDate'
                value={config.hotkey.insertDate}
                type='text'
                disabled='true'
@@ -187,6 +201,7 @@ class HotkeyTab extends React.Component {
            <div styleName='group-section-label'>{i18n.__('Insert Current Date and Time')}</div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
+                ref='insertDateTime'
                value={config.hotkey.insertDateTime}
                type='text'
                disabled='true'
--- a/browser/main/modals/PreferencesModal/StorageItem.styl
+++ b/browser/main/modals/PreferencesModal/StorageItem.styl
@@ -102,3 +102,11 @@ body[data-theme="solarized-dark"]
    border-color $ui-solarized-dark-button-backgroundColor
    background-color $ui-solarized-dark-button-backgroundColor
    color $ui-solarized-dark-text-color
+
+body[data-theme="dracula"]
+  .header
+    border-color $ui-dracula-borderColor
+
+  .header-control-button
+    colorDraculaDefaultButton()
+    border-color $ui-dracula-borderColor
--- a/browser/main/modals/PreferencesModal/StoragesTab.js
+++ b/browser/main/modals/PreferencesModal/StoragesTab.js
@@ -3,8 +3,11 @@ import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StoragesTab.styl'
 import dataApi from 'browser/main/lib/dataApi'
+import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'
 import StorageItem from './StorageItem'
 import i18n from 'browser/lib/i18n'
+import { humanFileSize } from 'browser/lib/utils'
+import fs from 'fs'

 const electron = require('electron')
 const { shell, remote } = electron
@@ -35,8 +38,29 @@ class StoragesTab extends React.Component {
        name: 'Unnamed',
        type: 'FILESYSTEM',
        path: ''
+      },
+      attachments: []
    }
+    this.loadAttachmentStorage()
  }
+
+  loadAttachmentStorage () {
+    const promises = []
+    this.props.data.noteMap.map(note => {
+      const promise = attachmentManagement.getAttachmentsPathAndStatus(
+        note.content,
+        note.storage,
+        note.key
+      )
+      if (promise) promises.push(promise)
+    })
+
+    Promise.all(promises)
+      .then(data => {
+        const result = data.reduce((acc, curr) => acc.concat(curr), [])
+        this.setState({attachments: result})
+      })
+      .catch(console.error)
  }

  handleAddStorageButton (e) {
@@ -57,8 +81,39 @@ class StoragesTab extends React.Component {
    e.preventDefault()
  }

+  handleRemoveUnusedAttachments (attachments) {
+    attachmentManagement.removeAttachmentsByPaths(attachments)
+      .then(() => this.loadAttachmentStorage())
+      .catch(console.error)
+  }
+
  renderList () {
    const { data, boundingBox } = this.props
+    const { attachments } = this.state
+
+    const unusedAttachments = attachments.filter(attachment => !attachment.isInUse)
+    const inUseAttachments = attachments.filter(attachment => attachment.isInUse)
+
+    const totalUnusedAttachments = unusedAttachments.length
+    const totalInuseAttachments = inUseAttachments.length
+    const totalAttachments = totalUnusedAttachments + totalInuseAttachments
+
+    const totalUnusedAttachmentsSize = unusedAttachments
+      .reduce((acc, curr) => {
+        const stats = fs.statSync(curr.path)
+        const fileSizeInBytes = stats.size
+        return acc + fileSizeInBytes
+      }, 0)
+    const totalInuseAttachmentsSize = inUseAttachments
+      .reduce((acc, curr) => {
+        const stats = fs.statSync(curr.path)
+        const fileSizeInBytes = stats.size
+        return acc + fileSizeInBytes
+      }, 0)
+    const totalAttachmentsSize = totalUnusedAttachmentsSize + totalInuseAttachmentsSize
+
+    const unusedAttachmentPaths = unusedAttachments
+      .reduce((acc, curr) => acc.concat(curr.path), [])

    if (!boundingBox) { return null }
    const storageList = data.storageMap.map((storage) => {
@@ -82,6 +137,20 @@ class StoragesTab extends React.Component {
            <i className='fa fa-plus' /> {i18n.__('Add Storage Location')}
          </button>
        </div>
+        <div styleName='header'>{i18n.__('Attachment storage')}</div>
+        <p styleName='list-attachment-label'>
+          Unused attachments size: {humanFileSize(totalUnusedAttachmentsSize)} ({totalUnusedAttachments} items)
+        </p>
+        <p styleName='list-attachment-label'>
+          In use attachments size: {humanFileSize(totalInuseAttachmentsSize)} ({totalInuseAttachments} items)
+        </p>
+        <p styleName='list-attachment-label'>
+          Total attachments size: {humanFileSize(totalAttachmentsSize)} ({totalAttachments} items)
+        </p>
+        <button styleName='list-attachement-clear-button'
+          onClick={() => this.handleRemoveUnusedAttachments(unusedAttachmentPaths)}>
+          {i18n.__('Clear unused attachments')}
+        </button>
      </div>
    )
  }
--- a/browser/main/modals/PreferencesModal/StoragesTab.styl
+++ b/browser/main/modals/PreferencesModal/StoragesTab.styl
@@ -33,6 +33,17 @@
  colorDefaultButton()
  font-size $tab--button-font-size
  border-radius 2px
+.list-attachment-label
+  margin-bottom 10px
+  color $ui-text-color
+.list-attachement-clear-button
+  height 30px
+  border none
+  border-top-right-radius 2px
+  border-bottom-right-radius 2px
+  colorPrimaryButton()
+  vertical-align middle
+  padding 0 20px

 .addStorage
  margin-bottom 15px
@@ -154,8 +165,8 @@ body[data-theme="dark"]
  .addStorage-body-control-cancelButton
    colorDarkDefaultButton()
    border-color $ui-dark-borderColor
-
-
+  .list-attachement-clear-button
+    colorDarkPrimaryButton()

 body[data-theme="solarized-dark"]
  .root
@@ -194,6 +205,8 @@ body[data-theme="solarized-dark"]
  .addStorage-body-control-cancelButton
    colorDarkDefaultButton()
    border-color $ui-solarized-dark-borderColor
+  .list-attachement-clear-button
+    colorSolarizedDarkPrimaryButton()

 body[data-theme="monokai"]
  .root
@@ -232,6 +245,8 @@ body[data-theme="monokai"]
  .addStorage-body-control-cancelButton
    colorDarkDefaultButton()
    border-color $ui-monokai-borderColor
+  .list-attachement-clear-button
+    colorMonokaiPrimaryButton()

 body[data-theme="dracula"]
  .root
@@ -270,3 +285,5 @@ body[data-theme="dracula"]
  .addStorage-body-control-cancelButton
    colorDarkDefaultButton()
    border-color $ui-dracula-borderColor
+  .list-attachement-clear-button
+    colorDraculaPrimaryButton()
--- 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',
@@ -107,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(),
+        deleteUnusedAttachments: this.refs.deleteUnusedAttachments.checked
      },
      preview: {
        fontSize: this.refs.previewFontSize.value,
@@ -613,6 +618,16 @@ class UiTab extends React.Component {
              {i18n.__('Enable spellcheck - Experimental feature!! :)')}
            </label>
          </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.deleteUnusedAttachments}
+                ref='deleteUnusedAttachments'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Delete attachments, that are not referenced in the text anymore')}
+            </label>
+          </div>

          <div styleName='group-section'>
            <div styleName='group-section-label'>
@@ -915,7 +930,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/styles/index.styl
+++ b/browser/styles/index.styl
@@ -410,6 +410,15 @@ $ui-dracula-button--active-color = #f8f8f2
 $ui-dracula-button--active-backgroundColor = #bd93f9
 $ui-dracula-button--hover-backgroundColor = lighten($ui-dracula-backgroundColor, 10%)
 $ui-dracula-button--focus-borderColor = lighten(#44475a, 25%)
+colorDraculaDefaultButton()
+  border-color $ui-dracula-borderColor
+  color $ui-dracula-text-color
+  background-color $ui-dracula-button-backgroundColor
+  &:hover
+    background-color $ui-dracula-button--hover-backgroundColor
+  &:active
+  &:active:hover
+    background-color $ui-dracula-button--active-backgroundColor

 modalDracula()
  position relative
--- a/lib/main-app.js
+++ b/lib/main-app.js
@@ -5,24 +5,23 @@ const ipc = electron.ipcMain
 const GhReleases = require('electron-gh-releases')
 const { isPackaged } = app
 // electron.crashReporter.start()
+const singleInstance = app.requestSingleInstanceLock()

 var ipcServer = null

 var mainWindow = null

-var shouldQuit = app.makeSingleInstance(function (commandLine, workingDirectory) {
+// Single Instance Lock
+if (!singleInstance) {
+  app.quit()
+} else {
+  app.on('second-instance', () => {
+    // Someone tried to run a second instance, it should focus the existing instance.
    if (mainWindow) {
-    if (process.platform === 'win32') {
-      mainWindow.minimize()
-      mainWindow.restore()
-    }
+      if (!mainWindow.isVisible()) mainWindow.show()
      mainWindow.focus()
    }
-  return true
-})
-
-if (shouldQuit) {
-  app.quit()
+  })
 }

 var isUpdateReady = false
--- a/lib/main.development.html
+++ b/lib/main.development.html
@@ -73,6 +73,11 @@
      mix-blend-mode: difference;
    }
    
+    .CodeMirror-scroll {
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+
    .CodeMirror-lint-tooltip {
      z-index: 1003;
    }
--- a/lib/main.production.html
+++ b/lib/main.production.html
@@ -71,6 +71,11 @@
      border-left-color: rgba(142, 142, 142, 0.5);
      mix-blend-mode: difference;
    }
+
+    .CodeMirror-scroll {
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
  </style>
 </head>

--- a/locales/es-ES.json
+++ b/locales/es-ES.json
@@ -1,4 +1,4 @@
- {
+{
  "Notes": "Notas",
  "Tags": "Etiquetas",
  "Preferences": "Preferencias",
--- a/locales/fa.json
+++ b/locales/fa.json
@@ -82,7 +82,7 @@
  "Boostnote collects anonymous data for the sole purpose of improving the application, and strictly does not collect any personal information such the contents of your notes.": "Bosstnote اطلاعات ناشناس را برای بهبود عملکرد برنامه جمع آوری می‌کند.اطلاعات شخصی شما مثل محتوای یادداشت ها هرگز برای هیچ هدفی جمع آوری نمی‌شوند",
  "You can see how it works on ": "میتوانید ببینید چگونه کار میکند. ",
  "You can choose to enable or disable this option.": "میتوانید این گزینه را فعال یا غیرفعال کنید.",
-	"Enable analytics to help improve Boostnote":".تجزیه تحلیل داده ها را برای کمک به بهبود برنامه فعال کن",
+  "Enable analytics to help improve Boostnote": ".تجزیه تحلیل داده ها را برای کمک به بهبود برنامه فعال کن",
  "Crowdfunding": "جمع سپاری (سرمایه گذاری جمعی )",
  "Dear Boostnote users,": "عزیزان,",
  "Thank you for using Boostnote!": "از شما بخاطر استفاده از boostnote ممنونیم!",
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -4,7 +4,7 @@
  "Preferences": "首选项",
  "Make a note": "新建笔记",
  "Ctrl": "Ctrl",
-	"Ctrl(^)": "Ctrl",
+  "Ctrl(^)": "Ctrl(^)",
  "to create a new note": "新建笔记",
  "Toggle Mode": "切换模式",
  "Trash": "废纸篓",
@@ -114,7 +114,7 @@
  "Updated": "更新时间",
  "Created": "创建时间",
  "Alphabetically": "A~Z 排序",
-	"Counter":"标签下文章数量排序",
+  "Counter": "标签下文章数量排序",
  "Default View": "默认视图",
  "Compressed View": "列表视图",
  "Search": "搜索",
@@ -155,9 +155,9 @@
  "Allow dangerous html tags": "允许危险的 html 标签",
  "Select filter mode": "选择过滤模式",
  "Add tag...": "添加标签...",
-	"Star":"星标",
+  "Star": "星标",
  "Fullscreen": "全屏",
-	"Info":"详情",
+  "Info": "详情",
  "Remove pin": "取消置顶",
  "Pin to Top": "置顶",
  "Delete Note": "删除笔记",
@@ -183,7 +183,7 @@
  "Help": "帮助",
  "Hungarian": "匈牙利语",
  "Hide Help": "隐藏帮助",
-	"wordpress": "Wordpress",
+  "wordpress": "wordpress",
  "Add Storage": "添加存储",
  "Name": "名称",
  "Type": "类型",
@@ -202,13 +202,13 @@
  "Unlink Storage": "取消存储链接",
  "Unlinking removes this linked storage from Boostnote. No data is removed, please manually delete the folder from your hard drive if needed.": "取消链接会移除存储和 Boostnote 的链接。文件将不会被删除，如果你需要的话可以手动删除此目录。",
  "Empty note": "空笔记",
-	"Unnamed":"未命名",
+  "Unnamed": "未命名",
  "Rename": "重命名",
  "Folder Name": "文件夹名称",
-	"No tags":"无标签",
+  "No tags": "无标签",
  "Convert textual arrows to beautiful signs. ⚠ This will interfere with using HTML comments in your Markdown.": "将文本箭头转换为完整符号。 ⚠ 注意这会影响 Markdown 的 HTML 注释。",
  "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠",
-	"Default New Note":"预设新笔记类型",
+  "Default New Note": "预设新笔记类型",
  "Show only related tags": "只显示相关标签",
  "Snippet Default Language": "程式码片段预设语言",
  "Disable Direct Write (It will be applied after restarting)": "停用直接编辑 (重启后生效)",
@@ -217,10 +217,31 @@
  "Allow line through checkbox": "替标示为完成的选框添加删除线",
  "Custom CSS": "自定义 CSS",
  "Allow custom CSS for preview": "允许预览自定义 CSS",
-	"Render newlines in Markdown paragraphs as <br>":"在 Markdown 段落中使用 <br> 换行",
+  "Render newlines in Markdown paragraphs as <br>": "在 Markdown 段落中使用 <br> 换行",
  "Spellcheck disabled": "Spellcheck disabled",
-	"Show menu bar": "Show menu bar",
+  "Show menu bar": "显示菜单栏",
  "Auto Detect": "Auto Detect",
-	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
-	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
+  "Enable HTML label in mermaid flowcharts": "在 mermaid flowcharts 中启用 HTML 标签 ⚠ 这个选项可能会产生 XSS",
+  "Wrap line in Snippet Note": "在 Snippet Note 里换行",
+  "Toggle Editor Mode": "切换编辑模式",
+  "Insert Current Date": "插入当前日期",
+  "Insert Current Date and Time": "插入当前日期和时间",
+  "Paste HTML": "粘贴 HTML",
+  "Show/Hide Menu Bar": "显示/隐藏 菜单栏",
+  "Save tags of a note in alphabetical order": "按字母顺序存储标签",
+  "Show tags of a note in alphabetical order": "按字母顺序显示标签",
+  "Enable live count of notes": "实时统计标签下笔记个数",
+  "New notes are tagged with the filtering tags": "新建的笔记带有在标签列表过滤的标签",
+  "Front matter title field": "从 front-matter 中抽取标题的字段名",
+  "Extract title from front matter": "启用从 front-matter 抽取标题",
+  "Enable HTML paste": "启用 HTML 粘贴（自动转换 html 到 md）",
+  "Enable spellcheck - Experimental feature!! :)": "启用拼写检查 - 实验性功能！！ :)",
+  "Matching character pairs": "Matching character pairs",
+  "Matching character triples": "Matching character triples",
+  "Exploding character pairs": "Exploding character pairs",
+  "Custom MarkdownLint Rules": "自定义 MarkdownLint 规则",
+  "Enable MarkdownLint": "启用 MarkdownLint",
+  "When scrolling, synchronize preview with editor": "滚动编辑页时同步滚动预览页",
+  "This will delete all notes in the folder and can not be undone.": "即将删除文件夹中所有笔记，并且不能撤销。",
+  "Always Ask": "每次询问"
 }
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -151,7 +151,7 @@
  "Allow styles": "允許樣式",
  "Allow dangerous html tags": "允許危險的 HTML 標籤",
  "Convert textual arrows to beautiful signs. ⚠ This will interfere with using HTML comments in your Markdown.": "將文本箭頭轉換為完整符號。 ⚠ 注意這會影響 Markdown 的 HTML 注釋。",
-	"Default New Note":"預設新筆記類型",
+  "Default New Note": "預設新筆記類型",
  "Show only related tags": "只顯示相關標籤",
  "Snippet Default Language": "程式碼片段預設語言",
  "Disable Direct Write (It will be applied after restarting)": "停用直接編輯 (重啟後生效)",
@@ -160,7 +160,7 @@
  "Allow line through checkbox": "替標示為完成的選框添加刪除線",
  "Custom CSS": "自定義 CSS",
  "Allow custom CSS for preview": "允許預覽自定義 CSS",
-	"Render newlines in Markdown paragraphs as <br>":"在 Markdown 段落中使用 <br> 換行",
+  "Render newlines in Markdown paragraphs as <br>": "在 Markdown 段落中使用 <br> 換行",
  "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠",
  "Spellcheck disabled": "Spellcheck disabled",
  "Show menu bar": "Show menu bar",
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
    "mousetrap": "^1.6.2",
    "mousetrap-global-bind": "^1.1.0",
    "node-ipc": "^8.1.0",
+    "prettier": "^1.18.2",
    "prop-types": "^15.7.2",
    "query-string": "^6.5.0",
    "raphael": "^2.2.7",
--- a/prettier.config
+++ b/prettier.config
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 4,
+  "semi": false,
+  "singleQuote": true
+}
--- a/resources/icon/icon-external.svg
+++ b/resources/icon/icon-external.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+   <title>icon-external</title>
+   <defs>
+       <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
+           <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+           <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowOffsetOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+           <feMerge>
+               <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+               <feMergeNode in="SourceGraphic"></feMergeNode>
+           </feMerge>
+       </filter>
+   </defs>
+  <g id="Artboard-4" stroke="none" stroke-width="1" fill="#c7c7c7" fill-rule="evenodd" transform="" stroke-linecap="round" stroke-linejoin="round">
+    <g>
+    	<g>
+    		<path d="M412.88,261.464c-11.423,0-20.682,9.259-20.682,20.682v156.879c0,17.43-14.181,31.611-31.612,31.611H72.975
+    			c-17.43,0-31.611-14.181-31.611-31.611V151.414c0-17.43,14.181-31.611,31.611-31.611h156.879c11.422,0,20.682-9.26,20.682-20.682
+    			c0-11.422-9.26-20.682-20.682-20.682H72.975C32.737,78.439,0,111.176,0,151.414v287.611C0,479.264,32.737,512,72.975,512h287.61
+    			c40.239,0,72.976-32.736,72.977-72.975V282.146C433.562,270.723,424.303,261.464,412.88,261.464z"/>
+    	</g>
+    </g>
+    <g>
+    	<g>
+    		<path d="M491.318,0H334.439c-11.423,0-20.682,9.26-20.682,20.682c0,11.422,9.259,20.682,20.682,20.682h136.197v136.197
+    			c0,11.422,9.259,20.682,20.682,20.682c11.423,0,20.682-9.26,20.682-20.682V20.682C512,9.26,502.741,0,491.318,0z"/>
+    	</g>
+    </g>
+    <g>
+    	<g>
+    		<path d="M505.942,6.058c-8.077-8.076-21.172-8.076-29.249,0L189.082,293.668c-8.077,8.077-8.077,21.172,0,29.249
+    			c4.038,4.039,9.332,6.058,14.625,6.058c5.294,0,10.587-2.02,14.625-6.058L505.942,35.307
+    			C514.019,27.23,514.019,14.135,505.942,6.058z"/>
+    	</g>
+    </g>
+  </g>
+</svg>
--- a/tests/dataApi/attachmentManagement.test.js
+++ b/tests/dataApi/attachmentManagement.test.js
@@ -578,6 +578,72 @@ it('should test that deleteAttachmentsNotPresentInNote does nothing if noteKey,
  expect(fs.unlink).not.toHaveBeenCalled()
 })

+it('should test that getAttachmentsPathAndStatus return null if noteKey, storageKey or noteContent was undefined', function () {
+  const noteKey = undefined
+  const storageKey = undefined
+  const markdownContent = ''
+
+  const result = systemUnderTest.getAttachmentsPathAndStatus(markdownContent, storageKey, noteKey)
+  expect(result).toBeNull()
+})
+
+it('should test that getAttachmentsPathAndStatus return null if noteKey, storageKey or noteContent was null', function () {
+  const noteKey = null
+  const storageKey = null
+  const markdownContent = ''
+
+  const result = systemUnderTest.getAttachmentsPathAndStatus(markdownContent, storageKey, noteKey)
+  expect(result).toBeNull()
+})
+
+it('should test that getAttachmentsPathAndStatus return the correct path and status for attachments', async function () {
+  const dummyStorage = {path: 'dummyStoragePath'}
+  const noteKey = 'noteKey'
+  const storageKey = 'storageKey'
+  const markdownContent =
+    'Test input' +
+    '![' + systemUnderTest.STORAGE_FOLDER_PLACEHOLDER + path.win32.sep + noteKey + path.win32.sep + 'file2.pdf](file2.pdf) \n'
+  const dummyFilesInFolder = ['file1.txt', 'file2.pdf', 'file3.jpg']
+
+  findStorage.findStorage = jest.fn(() => dummyStorage)
+  fs.existsSync = jest.fn(() => true)
+  fs.readdir = jest.fn((paht, callback) => callback(undefined, dummyFilesInFolder))
+  fs.unlink = jest.fn()
+
+  const targetStorage = findStorage.findStorage(storageKey)
+
+  const attachments = await systemUnderTest.getAttachmentsPathAndStatus(markdownContent, storageKey, noteKey)
+  expect(attachments.length).toBe(3)
+  expect(attachments[0].isInUse).toBe(false)
+  expect(attachments[1].isInUse).toBe(true)
+  expect(attachments[2].isInUse).toBe(false)
+
+  expect(attachments[0].path).toBe(
+    path.join(
+      targetStorage.path,
+      systemUnderTest.DESTINATION_FOLDER,
+      noteKey,
+      dummyFilesInFolder[0]
+    )
+  )
+  expect(attachments[1].path).toBe(
+    path.join(
+      targetStorage.path,
+      systemUnderTest.DESTINATION_FOLDER,
+      noteKey,
+      dummyFilesInFolder[1]
+    )
+  )
+  expect(attachments[2].path).toBe(
+    path.join(
+      targetStorage.path,
+      systemUnderTest.DESTINATION_FOLDER,
+      noteKey,
+      dummyFilesInFolder[2]
+    )
+  )
+})
+
 it('should test that moveAttachments moves attachments only if the source folder existed', function () {
  fse.existsSync = jest.fn(() => false)
  fse.moveSync = jest.fn()
--- a/tests/dataApi/createNoteFromUrl-test.js
+++ b/tests/dataApi/createNoteFromUrl-test.js
@@ -0,0 +1,43 @@
+const test = require('ava')
+const createNoteFromUrl = require('browser/main/lib/dataApi/createNoteFromUrl')
+
+global.document = require('jsdom').jsdom('<body></body>')
+global.window = document.defaultView
+global.navigator = window.navigator
+
+const Storage = require('dom-storage')
+const localStorage = window.localStorage = global.localStorage = new Storage(null, { strict: true })
+const path = require('path')
+const TestDummy = require('../fixtures/TestDummy')
+const sander = require('sander')
+const os = require('os')
+const CSON = require('@rokt33r/season')
+
+const storagePath = path.join(os.tmpdir(), 'test/create-note-from-url')
+
+test.beforeEach((t) => {
+  t.context.storage = TestDummy.dummyStorage(storagePath)
+  localStorage.setItem('storages', JSON.stringify([t.context.storage.cache]))
+})
+
+test.serial('Create a note from URL', (t) => {
+  const storageKey = t.context.storage.cache.key
+  const folderKey = t.context.storage.json.folders[0].key
+
+  const url = 'https://shapeshed.com/writing-cross-platform-node/'
+
+  return createNoteFromUrl(url, storageKey, folderKey)
+    .then(function assert ({ note }) {
+      t.is(storageKey, note.storage)
+      const jsonData = CSON.readFileSync(path.join(storagePath, 'notes', note.key + '.cson'))
+
+      // Test if saved content is matching the created in memory note
+      t.is(note.content, jsonData.content)
+      t.is(note.tags.length, jsonData.tags.length)
+    })
+})
+
+test.after(function after () {
+  localStorage.clear()
+  sander.rimrafSync(storagePath)
+})
--- a/tests/fixtures/markdowns.js
+++ b/tests/fixtures/markdowns.js
@@ -109,6 +109,76 @@ const footnote = `
 hello-world: https://github.com/BoostIO/Boostnote/
 `

+const plantUmlMindMap = `
+@startmindmap
+* Debian
+** Ubuntu
+*** Linux Mint
+*** Kubuntu
+*** Lubuntu
+*** KDE Neon
+** LMDE
+** SolydXK
+** SteamOS
+** Raspbian with a very long name
+*** <s>Raspmbc</s> => OSMC
+*** <s>Raspyfi</s> => Volumio
+@endmindmap
+`
+
+const plantUmlGantt = `
+@startgantt
+[Prototype design] lasts 15 days
+[Test prototype] lasts 10 days
+[Test prototype] starts at [Prototype design]'s end
+@endgantt
+`
+
+const plantUmlWbs = `
+@startwbs
+* Business Process Modelling WBS
+** Launch the project
+*** Complete Stakeholder Research
+*** Initial Implementation Plan
+** Design phase
+*** Model of AsIs Processes Completed
+**** Model of AsIs Processes Completed1
+**** Model of AsIs Processes Completed2
+*** Measure AsIs performance metrics
+*** Identify Quick Wins
+** Complete innovate phase
+@endwbs
+`
+
+const plantUmlUml = `
+@startuml
+left to right direction
+skinparam packageStyle rectangle
+actor customer
+actor clerk
+rectangle checkout {
+  customer -- (checkout)
+  (checkout) .> (payment) : include
+  (help) .> (checkout) : extends
+  (checkout) -- clerk
+}
+@enduml
+`
+
+const plantUmlDitaa = `
+@startditaa
+--------+   +-------+    +-------+
+|        +---+ ditaa +--> |       |
+|  Text  |   +-------+    |Diagram|
+|Dokument|   |!Magie!|    |       |
+|     {d}|   |       |    |       |
+---+----+   +-------+    +-------+
+  :                         ^
+  |    Ein Haufen Arbeit    |
+  +-------------------------+
+@endditaa
+`
+
 export default {
  basic,
  codeblock,
@@ -121,5 +191,10 @@ export default {
  supTexts,
  deflists,
  shortcuts,
-  footnote
+  footnote,
+  plantUmlMindMap,
+  plantUmlGantt,
+  plantUmlWbs,
+  plantUmlDitaa,
+  plantUmlUml
 }
--- a/tests/lib/snapshots/markdown.test.js.snap
+++ b/tests/lib/snapshots/markdown.test.js.snap
@@ -1,5 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`Markdown.render() should render PlantUML Ditaa correctly 1`] = `
+"<img src=\\"http://www.plantuml.com/plantuml/png/SoWkIImgISaiIKpaqjQ50cq51GLj93Q2mrMZ00NQO3cmHX3RJW4cKmDI4v9QKQ805a8nfyObCp6zA34NgCObFxiqDpMl1AIcHj4tCJqpLH5i18evG52TKbk3B8og1kmC0cvMKB1Im0NYkA2ckMRcANWabgQbvYau5YMbPfP0p4UOWmcqkHnIyrB0GG00\\" alt=\\"uml diagram\\" />
+"
+`;
+
+exports[`Markdown.render() should render PlantUML Gantt correctly 1`] = `
+"<img src=\\"http://www.plantuml.com/plantuml/svg/SoWkIImgIK_CAodXYWueoY_9BwaiI5L8IItEJC-BLSX9B2ufLZ0qLKX9h2pcYWv9BIvHA82fWaiRu906crsia5YYW6cqUh52QbuAbmEG0DiE0000\\" alt=\\"uml diagram\\" />
+"
+`;
+
+exports[`Markdown.render() should render PlantUML MindMaps correctly 1`] = `
+"<img src=\\"http://www.plantuml.com/plantuml/svg/JOzD3e8m44Rtd6BMtNW192IM5I29HEDsAbKdeLD2MvNRIsjCMCsRlFd9LpgFipV4Wy4f4o2r8kHC23Yhm3wi9A0X3XzeYNrgwx1H6wvb1KTjqtRJoYhMtexBSAqJUescwoEUq4tn3xp9Fm7XfUS5HiiFO3Gw7SjT4QUCkkKxLy2-WAvl3rkrtEclBdOCXcnMwZN7ByiN\\" alt=\\"uml diagram\\" />
+"
+`;
+
+exports[`Markdown.render() should render PlantUML Umls correctly 1`] = `
+"<img src=\\"http://www.plantuml.com/plantuml/svg/LOzD2eCm44RtESMtj0jx01V5E_G4Gvngo2_912gbTsz4LBfylCV7p5Y4ibJlbEENG2AocHV1P39hCJ6eOar8bCaZaROqyrDMnzWqXTcn8YqnGzSYqNC-q76sweoW5zOsLi57uMpHz-WESslY0jmVw1AjdaE30IPeLoVUceLTslrL3-2tS9ZA_qZRtm_vgh7PzkOF\\" alt=\\"uml diagram\\" />
+"
+`;
+
+exports[`Markdown.render() should render PlantUML WBS correctly 1`] = `
+"<img src=\\"http://www.plantuml.com/plantuml/svg/ZP2_JiD03CRtFeNdRF04fR140gdGeREv-z8plVYYimFYxSabKbaxsR9-ylTdRyxLVpvjrz5XDb6OqR6MqEPRYSXPz4BdmsdNTVJAiuP4da1JBLy8lbmxUYxZbE6Wa_CLgUI8IXymS0rf9NeL5yxKDt24EhiKfMDcRNzVO79HcX8RLdvLfZBGa_KtFx2RKcpK7TZ3dTpZfWgskMAZ9jIXr94rW4PubM1RbBZOb-6NtcS9LpgBjlj_1w9QldbPjZHxQ5pg_GC0\\" alt=\\"uml diagram\\" />
+"
+`;
+
 exports[`Markdown.render() should render footnote correctly 1`] = `
 "<p data-line=\\"1\\"><sup class=\\"footnote-ref\\"><a href=\\"#fn1\\" id=\\"fnref1\\">[1]</a></sup><br />
 hello-world: <a href=\\"https://github.com/BoostIO/Boostnote/\\">https://github.com/BoostIO/Boostnote/</a></p>
--- a/tests/lib/markdown.test.js
+++ b/tests/lib/markdown.test.js
@@ -72,3 +72,28 @@ test('Markdown.render() should render footnote correctly', () => {
  const rendered = md.render(markdownFixtures.footnote)
  expect(rendered).toMatchSnapshot()
 })
+
+test('Markdown.render() should render PlantUML MindMaps correctly', t => {
+  const rendered = md.render(markdownFixtures.plantUmlMindMap)
+  expect(rendered).toMatchSnapshot()
+})
+
+test('Markdown.render() should render PlantUML Gantt correctly', t => {
+  const rendered = md.render(markdownFixtures.plantUmlGantt)
+  expect(rendered).toMatchSnapshot()
+})
+
+test('Markdown.render() should render PlantUML WBS correctly', t => {
+  const rendered = md.render(markdownFixtures.plantUmlWbs)
+  expect(rendered).toMatchSnapshot()
+})
+
+test('Markdown.render() should render PlantUML Umls correctly', t => {
+  const rendered = md.render(markdownFixtures.plantUmlUml)
+  expect(rendered).toMatchSnapshot()
+})
+
+test('Markdown.render() should render PlantUML Ditaa correctly', t => {
+  const rendered = md.render(markdownFixtures.plantUmlDitaa)
+  expect(rendered).toMatchSnapshot()
+})
--- a/webpack-skeleton.js
+++ b/webpack-skeleton.js
@@ -30,6 +30,7 @@ var config = {
    ]
  },
  externals: [
+    'prettier',
    'node-ipc',
    'electron',
    'lodash',
--- a/yarn.lock
+++ b/yarn.lock
@@ -6771,8 +6771,8 @@ number-is-nan@^1.0.0:
  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.4.tgz#2285631f34a95f0d0395cd900c96ed39b58f346e"

 nwsapi@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.0.0.tgz#7c8faf4ad501e1d17a651ebc5547f966b547c5c7"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.0.1.tgz#a50d59a2dcb14b6931401171713ced2d0eb3468f"

 nwsapi@^2.0.7:
  version "2.0.8"
@@ -7482,6 +7482,11 @@ preserve@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"

+prettier@^1.18.2:
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
+  integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==
+
 pretty-bytes@^1.0.2:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-1.0.4.tgz#0a22e8210609ad35542f8c8d5d2159aff0751c84"