Merge remote-tracking branch 'origin/master' into feature/toc

Fix conflicts
2025-12-13 01:36:22 +00:00 · 2019-10-10 18:23:39 +08:00
parent 1e00651541 8736666e91
commit 6d09cf227c
78 changed files with 4954 additions and 3639 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'
@@ -341,6 +344,7 @@ class MarkdownEditor extends React.Component {
          smartArrows={config.preview.smartArrows}
          breaks={config.preview.breaks}
          sanitize={config.preview.sanitize}
+          mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
          ref='preview'
          onContextMenu={(e) => this.handleContextMenu(e)}
          onDoubleClick={(e) => this.handleDoubleClick(e)}
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -41,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,16 +575,19 @@ export default class MarkdownPreview extends React.Component {
  }

  componentDidUpdate (prevProps) {
-    if (prevProps.value !== this.props.value) this.rewriteIframe()
+    // actual rewriteIframe function should be called only once
+    let needsRewriteIframe = false
+    if (prevProps.value !== this.props.value) needsRewriteIframe = true
    if (
      prevProps.smartQuotes !== this.props.smartQuotes ||
      prevProps.sanitize !== this.props.sanitize ||
+      prevProps.mermaidHTMLLabel !== this.props.mermaidHTMLLabel ||
      prevProps.smartArrows !== this.props.smartArrows ||
      prevProps.breaks !== this.props.breaks ||
      prevProps.lineThroughCheckbox !== this.props.lineThroughCheckbox
    ) {
      this.initMarkdown()
-      this.rewriteIframe()
+      needsRewriteIframe = true
    }
    if (
      prevProps.fontFamily !== this.props.fontFamily ||
@@ -580,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 () {
@@ -638,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) {
@@ -681,7 +714,8 @@ export default class MarkdownPreview extends React.Component {
      showCopyNotification,
      storagePath,
      noteKey,
-      sanitize
+      sanitize,
+      mermaidHTMLLabel
    } = this.props
    let { value, codeBlockTheme } = this.props

@@ -813,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'
@@ -823,7 +858,7 @@ export default class MarkdownPreview extends React.Component {
    _.forEach(
      this.refs.root.contentWindow.document.querySelectorAll('.mermaid'),
      el => {
-        mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme)
+        mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme, mermaidHTMLLabel)
      }
    )

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

  focus () {
@@ -1000,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
        )
@@ -1020,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' />
@@ -199,6 +201,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/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/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/keygen.js
+++ b/browser/lib/keygen.js
@@ -1,5 +1,4 @@
 const crypto = require('crypto')
-const _ = require('lodash')
 const uuidv4 = require('uuid/v4')

 module.exports = function (uuid) {
--- a/browser/lib/markdown-it-sanitize-html.js
+++ b/browser/lib/markdown-it-sanitize-html.js
@@ -15,7 +15,7 @@ module.exports = function sanitizePlugin (md, options) {
          options
        )
      }
-      if (state.tokens[tokenIdx].type === '_fence') {
+      if (state.tokens[tokenIdx].type.match(/.*_fence$/)) {
        // escapeHtmlCharacters has better performance
        state.tokens[tokenIdx].content = escapeHtmlCharacters(
          state.tokens[tokenIdx].content,
@@ -96,6 +96,10 @@ function sanitizeInline (html, options) {

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

  const matches = href.match(/^([a-zA-Z]+)\:/)
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -190,32 +190,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',
@@ -86,8 +95,10 @@ export const DEFAULT_CONFIG = {
    breaks: true,
    smartArrows: false,
    allowCustomCSS: false,
+
    customCSS: '/* Drop Your Custom CSS Code Here */',
    sanitize: 'STRICT', // 'STRICT', 'ALLOW_STYLES', 'NONE'
+    mermaidHTMLLabel: false,
    lineThroughCheckbox: true
  },
  blog: {
--- 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,
@@ -125,6 +130,7 @@ class UiTab extends React.Component {
        breaks: this.refs.previewBreaks.checked,
        smartArrows: this.refs.previewSmartArrows.checked,
        sanitize: this.refs.previewSanitize.value,
+        mermaidHTMLLabel: this.refs.previewMermaidHTMLLabel.checked,
        allowCustomCSS: this.refs.previewAllowCustomCSS.checked,
        lineThroughCheckbox: this.refs.lineThroughCheckbox.checked,
        customCSS: this.customCSSCM.getCodeMirror().getValue()
@@ -612,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'>
@@ -813,6 +829,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')}
@@ -904,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/da.json
+++ b/locales/da.json
@@ -157,5 +157,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- a/locales/de.json
+++ b/locales/de.json
@@ -213,5 +213,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- a/locales/en.json
+++ b/locales/en.json
@@ -188,5 +188,6 @@
  "New notes are tagged with the filtering tags": "New notes are tagged with the filtering tags",
  "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"
 }
--- a/locales/es-ES.json
+++ b/locales/es-ES.json
@@ -159,5 +159,6 @@
  "Show menu bar": "Mostrar barra del menú",
  "Auto Detect": "Detección automática",
  "Snippet Default Language": "Lenguaje por defecto de los fragmentos de código",
+  "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"
 }
--- a/locales/fa.json
+++ b/locales/fa.json
@@ -161,5 +161,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -173,5 +173,6 @@
  "Snippet prefix": "Préfixe du snippet",
  "Delete Note": "Supprimer la note",
  "New notes are tagged with the filtering tags": "Les nouvelles notes sont taggées avec les tags de filtrage",
+  "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"
 }
--- a/locales/hu.json
+++ b/locales/hu.json
@@ -181,5 +181,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- a/locales/it.json
+++ b/locales/it.json
@@ -161,5 +161,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -220,5 +220,6 @@
  "Spellcheck disabled": "スペルチェック無効",
  "Show menu bar": "メニューバーを表示",
  "Auto Detect": "自動検出",
+  "Enable HTML label in mermaid flowcharts": "mermaid flowchartでHTMLラベルを有効にする  ⚠ このオプションには潜在的なXSSの危険性があります。",
  "Wrap line in Snippet Note": "行を右端で折り返す（Snippet Note）"
 }
--- a/locales/ko.json
+++ b/locales/ko.json
@@ -164,5 +164,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- a/locales/no.json
+++ b/locales/no.json
@@ -157,5 +157,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- a/locales/pl.json
+++ b/locales/pl.json
@@ -166,5 +166,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- a/locales/pt-BR.json
+++ b/locales/pt-BR.json
@@ -157,5 +157,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- a/locales/pt-PT.json
+++ b/locales/pt-PT.json
@@ -156,5 +156,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -154,5 +154,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- a/locales/sq.json
+++ b/locales/sq.json
@@ -156,5 +156,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- a/locales/th.json
+++ b/locales/th.json
@@ -183,5 +183,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- a/locales/tr.json
+++ b/locales/tr.json
@@ -156,5 +156,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- 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": "废纸篓",
@@ -183,7 +183,7 @@
  "Help": "帮助",
  "Hungarian": "匈牙利语",
  "Hide Help": "隐藏帮助",
-	"wordpress": "Wordpress",
+  "wordpress": "wordpress",
  "Add Storage": "添加存储",
  "Name": "名称",
  "Type": "类型",
@@ -219,7 +219,29 @@
  "Allow custom CSS for preview": "允许预览自定义 CSS",
  "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",
-	"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
@@ -165,5 +165,6 @@
  "Spellcheck disabled": "Spellcheck disabled",
  "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"
 }
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "boost",
  "productName": "Boostnote",
-  "version": "0.12.1-1",
+  "version": "0.12.1",
  "main": "index.js",
  "description": "Boostnote",
  "license": "GPL-3.0",
@@ -99,6 +99,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
@@ -117,6 +117,76 @@ const tocPlaceholder = `
 ###$ H4
 `

+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,
@@ -130,5 +200,10 @@ export default {
  deflists,
  shortcuts,
  footnote,
-  tocPlaceholder
+  tocPlaceholder,
+  plantUmlMindMap,
+  plantUmlGantt,
+  plantUmlWbs,
+  plantUmlDitaa,
+  plantUmlUml
 }
--- a/tests/lib/snapshots/markdown-remark.test.js.snap
+++ b/tests/lib/snapshots/markdown-remark.test.js.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Markdown.render() should renders markdown correctly 1`] = `
+"# Welcome to Boostnote!
+
+## Click here to edit markdown :wave:
+
+<iframe width=\\"560\\" height=\\"315\\" src=\\"https://www.youtube.com/embed/L0qNPLsvmyM\\" frameborder=\\"0\\" allowfullscreen></iframe>
+
+## Docs :memo:
+
+-   [Boostnote | Boost your happiness, productivity and creativity.](https://hackernoon.com/boostnote-boost-your-happiness-productivity-and-creativity-315034efeebe)
+-   [Cloud Syncing & Backups](https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup)
+-   [How to sync your data across Desktop and Mobile apps](https://github.com/BoostIO/Boostnote/wiki/Sync-Data-Across-Desktop-and-Mobile-apps)
+-   [Convert data from **Evernote** to Boostnote.](https://github.com/BoostIO/Boostnote/wiki/Evernote)
+-   [Keyboard Shortcuts](https://github.com/BoostIO/Boostnote/wiki/Keyboard-Shortcuts)
+-   [Keymaps in Editor mode](https://github.com/BoostIO/Boostnote/wiki/Keymaps-in-Editor-mode)
+-   [How to set syntax highlight in Snippet note](https://github.com/BoostIO/Boostnote/wiki/Syntax-Highlighting)
+
+* * *
+
+## Article Archive :books:
+
+-   [Reddit English](http://bit.ly/2mOJPu7)
+-   [Reddit Spanish](https://www.reddit.com/r/boostnote_es/)
+-   [Reddit Chinese](https://www.reddit.com/r/boostnote_cn/)
+-   [Reddit Japanese](https://www.reddit.com/r/boostnote_jp/)
+
+* * *
+
+## Community :beers:
+
+-   [GitHub](http://bit.ly/2AWWzkD)
+-   [Twitter](http://bit.ly/2z8BUJZ)
+-   [Facebook Group](http://bit.ly/2jcca8t)
+"
+`;
--- a/tests/lib/markdown-test.js
+++ b/tests/lib/markdown-test.js
@@ -78,3 +78,28 @@ test('Markdown.render() should renders [TOC] placholder correctly', t => {
  const rendered = md.render(markdownFixtures.tocPlaceholder)
  t.snapshot(rendered)
 })
+
+test('Markdown.render() should render PlantUML MindMaps correctly', t => {
+  const rendered = md.render(markdownFixtures.plantUmlMindMap)
+  t.snapshot(rendered)
+})
+
+test('Markdown.render() should render PlantUML Gantt correctly', t => {
+  const rendered = md.render(markdownFixtures.plantUmlGantt)
+  t.snapshot(rendered)
+})
+
+test('Markdown.render() should render PlantUML WBS correctly', t => {
+  const rendered = md.render(markdownFixtures.plantUmlWbs)
+  t.snapshot(rendered)
+})
+
+test('Markdown.render() should render PlantUML Umls correctly', t => {
+  const rendered = md.render(markdownFixtures.plantUmlUml)
+  t.snapshot(rendered)
+})
+
+test('Markdown.render() should render PlantUML Ditaa correctly', t => {
+  const rendered = md.render(markdownFixtures.plantUmlDitaa)
+  t.snapshot(rendered)
+})
--- a/tests/lib/snapshots/markdown-test.js.md
+++ b/tests/lib/snapshots/markdown-test.js.md
@@ -4,6 +4,41 @@ The actual snapshot is saved in `markdown-test.js.snap`.

 Generated by [AVA](https://ava.li).

+## Markdown.render() should render PlantUML Ditaa correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/png/SoWkIImgISaiIKpaqjQ50cq51GLj93Q2mrMZ00NQO3cmHX3RJW4cKmDI4v9QKQ805a8nfyObCp6zA34NgCObFxiqDpMl1AIcHj4tCJqpLH5i18evG52TKbk3B8og1kmC0cvMKB1Im0NYkA2ckMRcANWabgQbvYau5YMbPfP0p4UOWmcqkHnIyrB0GG00" alt="uml diagram" />␊
+    `
+
+## Markdown.render() should render PlantUML Gantt correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/svg/SoWkIImgIK_CAodXYWueoY_9BwaiI5L8IItEJC-BLSX9B2ufLZ0qLKX9h2pcYWv9BIvHA82fWaiRu906crsia5YYW6cqUh52QbuAbmEG0DiE0000" alt="uml diagram" />␊
+    `
+
+## Markdown.render() should render PlantUML MindMaps correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/svg/JOzD3e8m44Rtd6BMtNW192IM5I29HEDsAbKdeLD2MvNRIsjCMCsRlFd9LpgFipV4Wy4f4o2r8kHC23Yhm3wi9A0X3XzeYNrgwx1H6wvb1KTjqtRJoYhMtexBSAqJUescwoEUq4tn3xp9Fm7XfUS5HiiFO3Gw7SjT4QUCkkKxLy2-WAvl3rkrtEclBdOCXcnMwZN7ByiN" alt="uml diagram" />␊
+    `
+
+## Markdown.render() should render PlantUML Umls correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/svg/LOzD2eCm44RtESMtj0jx01V5E_G4Gvngo2_912gbTsz4LBfylCV7p5Y4ibJlbEENG2AocHV1P39hCJ6eOar8bCaZaROqyrDMnzWqXTcn8YqnGzSYqNC-q76sweoW5zOsLi57uMpHz-WESslY0jmVw1AjdaE30IPeLoVUceLTslrL3-2tS9ZA_qZRtm_vgh7PzkOF" alt="uml diagram" />␊
+    `
+
+## Markdown.render() should render PlantUML WBS correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/svg/ZP2_JiD03CRtFeNdRF04fR140gdGeREv-z8plVYYimFYxSabKbaxsR9-ylTdRyxLVpvjrz5XDb6OqR6MqEPRYSXPz4BdmsdNTVJAiuP4da1JBLy8lbmxUYxZbE6Wa_CLgUI8IXymS0rf9NeL5yxKDt24EhiKfMDcRNzVO79HcX8RLdvLfZBGa_KtFx2RKcpK7TZ3dTpZfWgskMAZ9jIXr94rW4PubM1RbBZOb-6NtcS9LpgBjlj_1w9QldbPjZHxQ5pg_GC0" alt="uml diagram" />␊
+    `
+
 ## Markdown.render() should render footnote correctly

 > Snapshot 1
@@ -191,4 +226,39 @@ Generated by [AVA](https://ava.li).
 > Snapshot 2

    `<p data-line="0">This is a &quot;QUOTE&quot;.</p>␊
+    
+
+## Markdown.render() should render PlantUML Ditaa correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/png/SoWkIImgISaiIKpaqjQ50cq51GLj93Q2mrMZ00NQO3cmHX3RJW4cKmDI4v9QKQ805a8nfyObCp6zA34NgCObFxiqDpMl1AIcHj4tCJqpLH5i18evG52TKbk3B8og1kmC0cvMKB1Im0NYkA2ckMRcANWabgQbvYau5YMbPfP0p4UOWmcqkHnIyrB0GG00" alt="uml diagram" />␊
+    `
+
+## Markdown.render() should render PlantUML Gantt correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/svg/SoWkIImgIK_CAodXYWueoY_9BwaiI5L8IItEJC-BLSX9B2ufLZ0qLKX9h2pcYWv9BIvHA82fWaiRu906crsia5YYW6cqUh52QbuAbmEG0DiE0000" alt="uml diagram" />␊
+    `
+
+## Markdown.render() should render PlantUML MindMaps correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/svg/JOzD3e8m44Rtd6BMtNW192IM5I29HEDsAbKdeLD2MvNRIsjCMCsRlFd9LpgFipV4Wy4f4o2r8kHC23Yhm3wi9A0X3XzeYNrgwx1H6wvb1KTjqtRJoYhMtexBSAqJUescwoEUq4tn3xp9Fm7XfUS5HiiFO3Gw7SjT4QUCkkKxLy2-WAvl3rkrtEclBdOCXcnMwZN7ByiN" alt="uml diagram" />␊
+    `
+
+## Markdown.render() should render PlantUML Umls correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/svg/LOzD2eCm44RtESMtj0jx01V5E_G4Gvngo2_912gbTsz4LBfylCV7p5Y4ibJlbEENG2AocHV1P39hCJ6eOar8bCaZaROqyrDMnzWqXTcn8YqnGzSYqNC-q76sweoW5zOsLi57uMpHz-WESslY0jmVw1AjdaE30IPeLoVUceLTslrL3-2tS9ZA_qZRtm_vgh7PzkOF" alt="uml diagram" />␊
+    `
+
+## Markdown.render() should render PlantUML WBS correctly
+
+> Snapshot 1
+
+    `<img src="http://www.plantuml.com/plantuml/svg/ZP2_JiD03CRtFeNdRF04fR140gdGeREv-z8plVYYimFYxSabKbaxsR9-ylTdRyxLVpvjrz5XDb6OqR6MqEPRYSXPz4BdmsdNTVJAiuP4da1JBLy8lbmxUYxZbE6Wa_CLgUI8IXymS0rf9NeL5yxKDt24EhiKfMDcRNzVO79HcX8RLdvLfZBGa_KtFx2RKcpK7TZ3dTpZfWgskMAZ9jIXr94rW4PubM1RbBZOb-6NtcS9LpgBjlj_1w9QldbPjZHxQ5pg_GC0" alt="uml diagram" />␊
    `
--- a/tests/lib/snapshots/markdown-test.js.snap
+++ b/tests/lib/snapshots/markdown-test.js.snap
--- 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
@@ -6784,8 +6784,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"
@@ -7495,6 +7495,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"