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

browser/components/CodeEditor.js

@@ -20,7 +20,7 @@ import styles from '../components/CodeEditor.styl'
 const { ipcRenderer, remote, clipboard } = require('electron')
 import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
 const spellcheck = require('browser/lib/spellcheck')
-const buildEditorContextMenu = require('browser/lib/contextMenuBuilder')
+const buildEditorContextMenu = require('browser/lib/contextMenuBuilder').buildEditorContextMenu
 import { createTurndownService } from '../lib/turndown'
 import {languageMaps} from '../lib/CMLanguageList'
 import snippetManager from '../lib/SnippetManager'
@@ -53,6 +53,7 @@ export default class CodeEditor extends React.Component {
     this.focusHandler = () => {
       ipcRenderer.send('editor:focused', true)
     }
+    const debouncedDeletionOfAttachments = _.debounce(attachmentManagement.deleteAttachmentsNotPresentInNote, 30000)
     this.blurHandler = (editor, e) => {
       ipcRenderer.send('editor:focused', false)
       if (e == null) return null
@@ -64,16 +65,11 @@ export default class CodeEditor extends React.Component {
         el = el.parentNode
       }
       this.props.onBlur != null && this.props.onBlur(e)
-
       const {
         storageKey,
         noteKey
       } = this.props
-      attachmentManagement.deleteAttachmentsNotPresentInNote(
+      debouncedDeletionOfAttachments(this.editor.getValue(), storageKey, noteKey)
-        this.editor.getValue(),
-        storageKey,
-        noteKey
-      )
     }
     this.pasteHandler = (editor, e) => {
       e.preventDefault()
@@ -205,23 +201,11 @@ export default class CodeEditor extends React.Component {
       'Cmd-T': function (cm) {
         // Do nothing
       },
-      'Ctrl-/': function (cm) {
+      [translateHotkey(hotkey.insertDate)]: function (cm) {
-        if (global.process.platform === 'darwin') { return }
         const dateNow = new Date()
         cm.replaceSelection(dateNow.toLocaleDateString())
       },
-      'Cmd-/': function (cm) {
+      [translateHotkey(hotkey.insertDateTime)]: function (cm) {
-        if (global.process.platform !== 'darwin') { return }
-        const dateNow = new Date()
-        cm.replaceSelection(dateNow.toLocaleDateString())
-      },
-      'Shift-Ctrl-/': function (cm) {
-        if (global.process.platform === 'darwin') { return }
-        const dateNow = new Date()
-        cm.replaceSelection(dateNow.toLocaleString())
-      },
-      'Shift-Cmd-/': function (cm) {
-        if (global.process.platform !== 'darwin') { return }
         const dateNow = new Date()
         cm.replaceSelection(dateNow.toLocaleString())
       },
@@ -267,7 +251,7 @@ export default class CodeEditor extends React.Component {
       value: this.props.value,
       linesHighlighted: this.props.linesHighlighted,
       lineNumbers: this.props.displayLineNumbers,
-      lineWrapping: true,
+      lineWrapping: this.props.lineWrapping,
       theme: this.props.theme,
       indentUnit: this.props.indentSize,
       tabSize: this.props.indentSize,
@@ -566,6 +550,10 @@ export default class CodeEditor extends React.Component {
       this.editor.setOption('lineNumbers', this.props.displayLineNumbers)
     }
 
+    if (prevProps.lineWrapping !== this.props.lineWrapping) {
+      this.editor.setOption('lineWrapping', this.props.lineWrapping)
+    }
+
     if (prevProps.scrollPastEnd !== this.props.scrollPastEnd) {
       this.editor.setOption('scrollPastEnd', this.props.scrollPastEnd)
     }

browser/components/MarkdownEditor.js

@@ -304,6 +304,7 @@ class MarkdownEditor extends React.Component {
           enableRulers={config.editor.enableRulers}
           rulers={config.editor.rulers}
           displayLineNumbers={config.editor.displayLineNumbers}
+          lineWrapping
           matchingPairs={config.editor.matchingPairs}
           matchingTriples={config.editor.matchingTriples}
           explodingPairs={config.editor.explodingPairs}
@@ -340,6 +341,7 @@ class MarkdownEditor extends React.Component {
           smartArrows={config.preview.smartArrows}
           breaks={config.preview.breaks}
           sanitize={config.preview.sanitize}
+          mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
           ref='preview'
           onContextMenu={(e) => this.handleContextMenu(e)}
           onDoubleClick={(e) => this.handleDoubleClick(e)}

browser/components/MarkdownPreview.js

@@ -18,15 +18,13 @@ import mdurl from 'mdurl'
 import exportNote from 'browser/main/lib/dataApi/exportNote'
 import { escapeHtmlCharacters } from 'browser/lib/utils'
 import yaml from 'js-yaml'
-import context from 'browser/lib/context'
-import i18n from 'browser/lib/i18n'
-import fs from 'fs'
 import { render } from 'react-dom'
 import Carousel from 'react-image-carousel'
 import ConfigManager from '../main/lib/ConfigManager'
 
 const { remote, shell } = require('electron')
 const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
+const buildMarkdownPreviewContextMenu = require('browser/lib/contextMenuBuilder').buildMarkdownPreviewContextMenu
 
 const { app } = remote
 const path = require('path')
@@ -34,8 +32,6 @@ const fileUrl = require('file-url')
 
 const dialog = remote.dialog
 
-const uri2path = require('file-uri-to-path')
-
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
 const appPath = fileUrl(
   process.env.NODE_ENV === 'production' ? app.getAppPath() : path.resolve()
@@ -45,6 +41,7 @@ const CSS_FILES = [
   `${appPath}/node_modules/codemirror/lib/codemirror.css`,
   `${appPath}/node_modules/react-image-carousel/lib/css/main.min.css`
 ]
+const win = global.process.platform === 'win32'
 
 function buildStyle (
   fontFamily,
@@ -249,30 +246,9 @@ export default class MarkdownPreview extends React.Component {
   }
 
   handleContextMenu (event) {
-    // If a contextMenu handler was passed to us, use it instead of the self-defined one -> return
+    const menu = buildMarkdownPreviewContextMenu(this, event)
-    if (_.isFunction(this.props.onContextMenu)) {
+    if (menu != null) {
-      this.props.onContextMenu(event)
+      menu.popup(remote.getCurrentWindow())
-      return
-    }
-    // No contextMenu was passed to us -> execute our own link-opener
-    if (event.target.tagName.toLowerCase() === 'a' && event.target.getAttribute('href')) {
-      const href = event.target.href
-      const isLocalFile = href.startsWith('file:')
-      if (isLocalFile) {
-        const absPath = uri2path(href)
-        try {
-          if (fs.lstatSync(absPath).isFile()) {
-            context.popup([
-              {
-                label: i18n.__('Show in explorer'),
-                click: (e) => shell.showItemInFolder(absPath)
-              }
-            ])
-          }
-        } catch (e) {
-          console.log('Error while evaluating if the file is locally available', e)
-        }
-      }
     }
   }
 
@@ -345,7 +321,11 @@ export default class MarkdownPreview extends React.Component {
       customCSS
     )
     let body = this.markdown.render(noteContent)
-    const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
+    body = attachmentManagement.fixLocalURLS(
+      body,
+      this.props.storagePath
+    )
+    const files = [this.getCodeThemeLink(codeBlockTheme), ...CSS_FILES]
     files.forEach(file => {
       if (global.process.platform === 'win32') {
         file = file.replace('file:///', '')
@@ -580,6 +560,7 @@ export default class MarkdownPreview extends React.Component {
     if (
       prevProps.smartQuotes !== this.props.smartQuotes ||
       prevProps.sanitize !== this.props.sanitize ||
+      prevProps.mermaidHTMLLabel !== this.props.mermaidHTMLLabel ||
       prevProps.smartArrows !== this.props.smartArrows ||
       prevProps.breaks !== this.props.breaks ||
       prevProps.lineThroughCheckbox !== this.props.lineThroughCheckbox
@@ -657,7 +638,7 @@ export default class MarkdownPreview extends React.Component {
 
     this.getWindow().document.getElementById(
       'codeTheme'
-    ).href = this.GetCodeThemeLink(codeBlockTheme)
+    ).href = this.getCodeThemeLink(codeBlockTheme)
     this.getWindow().document.getElementById('style').innerHTML = buildStyle(
       fontFamily,
       fontSize,
@@ -670,14 +651,12 @@ export default class MarkdownPreview extends React.Component {
     )
   }
 
-  GetCodeThemeLink (name) {
+  getCodeThemeLink (name) {
     const theme = consts.THEMES.find(theme => theme.name === name)
 
-    if (theme) {
+    return theme != null
-      return `${appPath}/${theme.path}`
+      ? theme.path
-    } else {
+      : `${appPath}/node_modules/codemirror/theme/elegant.css`
-      return `${appPath}/node_modules/codemirror/theme/elegant.css`
-    }
   }
 
   rewriteIframe () {
@@ -703,7 +682,8 @@ export default class MarkdownPreview extends React.Component {
       showCopyNotification,
       storagePath,
       noteKey,
-      sanitize
+      sanitize,
+      mermaidHTMLLabel
     } = this.props
     let { value, codeBlockTheme } = this.props
 
@@ -845,7 +825,7 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(
       this.refs.root.contentWindow.document.querySelectorAll('.mermaid'),
       el => {
-        mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme)
+        mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme, mermaidHTMLLabel)
       }
     )
 

browser/components/MarkdownSplitEditor.js

@@ -150,7 +150,6 @@ class MarkdownSplitEditor extends React.Component {
         onMouseMove={e => this.handleMouseMove(e)}
         onMouseUp={e => this.handleMouseUp(e)}>
         <CodeEditor
-          styleName='codeEditor'
           ref='code'
           width={this.state.codeEditorWidthInPercent + '%'}
           mode='Boost Flavored Markdown'
@@ -160,6 +159,7 @@ class MarkdownSplitEditor extends React.Component {
           fontFamily={config.editor.fontFamily}
           fontSize={editorFontSize}
           displayLineNumbers={config.editor.displayLineNumbers}
+          lineWrapping
           matchingPairs={config.editor.matchingPairs}
           matchingTriples={config.editor.matchingTriples}
           explodingPairs={config.editor.explodingPairs}
@@ -187,7 +187,6 @@ class MarkdownSplitEditor extends React.Component {
         </div>
         <MarkdownPreview
           style={previewStyle}
-          styleName='preview'
           theme={config.ui.theme}
           keyMap={config.editor.keyMap}
           fontSize={config.preview.fontSize}
@@ -200,6 +199,7 @@ class MarkdownSplitEditor extends React.Component {
           smartArrows={config.preview.smartArrows}
           breaks={config.preview.breaks}
           sanitize={config.preview.sanitize}
+          mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
           ref='preview'
           tabInde='0'
           value={value}

browser/components/MarkdownSplitEditor.styl

@@ -8,9 +8,30 @@
     top -2px
     width 0
     z-index 0
+    border-left 1px solid $ui-borderColor
   .slider-hitbox
     absolute top bottom left right
     width 7px
     left -3px
     z-index 10
     cursor col-resize
+
+body[data-theme="dark"]
+  .root
+    .slider
+      border-left 1px solid $ui-dark-borderColor
+
+body[data-theme="solarized-dark"]
+  .root
+    .slider
+      border-left 1px solid $ui-solarized-dark-borderColor
+
+body[data-theme="monokai"]
+  .root
+    .slider
+      border-left 1px solid $ui-monokai-borderColor
+
+body[data-theme="dracula"]
+  .root
+    .slider
+      border-left 1px solid $ui-dracula-borderColor

browser/components/ModalEscButton.js

@@ -8,7 +8,7 @@ const ModalEscButton = ({
 }) => (
   <button styleName='escButton' onClick={handleEscButtonClick}>
     <div styleName='esc-mark'>×</div>
-    <div styleName='esc-text'>esc</div>
+    <div>esc</div>
   </button>
 )
 

browser/components/NoteItem.js

@@ -148,15 +148,14 @@ NoteItem.propTypes = {
     tags: PropTypes.array,
     isStarred: PropTypes.bool.isRequired,
     isTrashed: PropTypes.bool.isRequired,
-    blog: {
+    blog: PropTypes.shape({
       blogLink: PropTypes.string,
       blogId: PropTypes.number
-    }
+    })
   }),
   handleNoteClick: PropTypes.func.isRequired,
   handleNoteContextMenu: PropTypes.func.isRequired,
-  handleDragStart: PropTypes.func.isRequired,
+  handleDragStart: PropTypes.func.isRequired
-  handleDragEnd: PropTypes.func.isRequired
 }
 
 export default CSSModules(NoteItem, styles)

browser/components/SideNavFilter.js

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

browser/components/SnippetTab.js

@@ -114,7 +114,7 @@ class SnippetTab extends React.Component {
           >
             {snippet.name.trim().length > 0
               ? snippet.name
-              : <span styleName='button-unnamed'>
+              : <span>
                 {i18n.__('Unnamed')}
               </span>
             }

browser/components/TodoProcess.js

@@ -25,10 +25,10 @@ const TodoProcess = ({
 )
 
 TodoProcess.propTypes = {
-  todoStatus: {
+  todoStatus: PropTypes.exact({
     total: PropTypes.number.isRequired,
     completed: PropTypes.number.isRequired
-  }
+  })
 }
 
 export default CSSModules(TodoProcess, styles)

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

browser/lib/consts.js

@@ -7,6 +7,7 @@ const CODEMIRROR_THEME_PATH = 'node_modules/codemirror/theme'
 const CODEMIRROR_EXTRA_THEME_PATH = 'extra_scripts/codemirror/theme'
 
 const isProduction = process.env.NODE_ENV === 'production'
+
 const paths = [
   isProduction ? path.join(app.getAppPath(), CODEMIRROR_THEME_PATH) : path.resolve(CODEMIRROR_THEME_PATH),
   isProduction ? path.join(app.getAppPath(), CODEMIRROR_EXTRA_THEME_PATH) : path.resolve(CODEMIRROR_EXTRA_THEME_PATH)
@@ -18,7 +19,7 @@ const themes = paths
 
     return {
       name,
-      path: path.join(directory.split(/\//g).slice(-3).join('/'), file),
+      path: path.join(directory, file),
       className: `cm-s-${name}`
     }
   }))
@@ -27,17 +28,16 @@ const themes = paths
 
 themes.splice(themes.findIndex(({ name }) => name === 'solarized'), 1, {
   name: 'solarized dark',
-  path: `${CODEMIRROR_THEME_PATH}/solarized.css`,
+  path: path.join(paths[0], 'solarized.css'),
   className: `cm-s-solarized cm-s-dark`
 }, {
   name: 'solarized light',
-  path: `${CODEMIRROR_THEME_PATH}/solarized.css`,
+  path: path.join(paths[0], 'solarized.css'),
   className: `cm-s-solarized cm-s-light`
 })
-
 themes.splice(0, 0, {
   name: 'default',
-  path: `${CODEMIRROR_THEME_PATH}/elegant.css`,
+  path: path.join(paths[0], 'elegant.css'),
   className: `cm-s-default`
 })
 

browser/lib/contextMenuBuilder.js

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

browser/lib/customMeta.js

@@ -1,5 +1,10 @@
 import CodeMirror from 'codemirror'
 import 'codemirror-mode-elixir'
 
+const stylusCodeInfo = CodeMirror.modeInfo.find(info => info.name === 'Stylus')
+if (stylusCodeInfo == null) {
   CodeMirror.modeInfo.push({name: 'Stylus', mime: 'text/x-styl', mode: 'stylus', ext: ['styl'], alias: ['styl']})
+} else {
+  stylusCodeInfo.alias = ['styl']
+}
 CodeMirror.modeInfo.push({name: 'Elixir', mime: 'text/x-elixir', mode: 'elixir', ext: ['ex']})

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,

browser/lib/markdown.js

@@ -2,6 +2,7 @@ import markdownit from 'markdown-it'
 import sanitize from './markdown-it-sanitize-html'
 import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
+import mdurl from 'mdurl'
 import smartArrows from 'markdown-it-smartarrows'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
@@ -150,9 +151,9 @@ class Markdown {
         const content = token.content.split('\n').slice(0, -1).map(line => {
           const match = /!\[[^\]]*]\(([^\)]*)\)/.exec(line)
           if (match) {
-            return match[1]
+            return mdurl.encode(match[1])
           } else {
-            return line
+            return mdurl.encode(line)
           }
         }).join('\n')
 
@@ -288,8 +289,10 @@ class Markdown {
           case 'list_item_open':
           case 'paragraph_open':
           case 'table_open':
+            if (token.map) {
               token.attrPush(['data-line', token.map[0]])
             }
+        }
       })
       const result = originalRender.call(this.md.renderer, tokens, options, env)
       return result

browser/main/Detail/FullscreenButton.js

@@ -11,7 +11,7 @@ const FullscreenButton = ({
   const hotkey = (OSX ? i18n.__('Command(⌘)') : i18n.__('Ctrl(^)')) + '+B'
   return (
     <button styleName='control-fullScreenButton' title={i18n.__('Fullscreen')} onMouseDown={(e) => onClick(e)}>
-      <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
+      <img src='../resources/icon/icon-full.svg' />
       <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Fullscreen')}({hotkey})</span>
     </button>
   )

browser/main/Detail/InfoPanel.js

@@ -60,7 +60,7 @@ class InfoPanel extends React.Component {
         </div>
 
         <div>
-          <input styleName='infoPanel-noteLink' ref='noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
+          <input styleName='infoPanel-noteLink' ref='noteLink' defaultValue={noteLink} onClick={(e) => { e.target.select() }} />
           <button onClick={() => this.copyNoteLink()} styleName='infoPanel-copyButton'>
             <i className='fa fa-clipboard' />
           </button>

browser/main/Detail/MarkdownNoteDetail.js

@@ -311,7 +311,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   getToggleLockButton () {
-    return this.state.isLocked ? '../resources/icon/icon-previewoff-on.svg' : '../resources/icon/icon-previewoff-off.svg'
+    return this.state.isLocked ? '../resources/icon/icon-lock.svg' : '../resources/icon/icon-unlock.svg'
   }
 
   handleDeleteKeyDown (e) {
@@ -450,7 +450,7 @@ class MarkdownNoteDetail extends React.Component {
 
     const detailTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <div styleName='info-left-top'>
+        <div>
           <FolderSelect styleName='info-left-top-folderSelect'
             value={this.state.note.storage + '-' + this.state.note.folder}
             ref='folder'
@@ -485,7 +485,7 @@ class MarkdownNoteDetail extends React.Component {
               onFocus={(e) => this.handleFocus(e)}
               onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
             >
-              <img styleName='iconInfo' src={imgSrc} />
+              <img src={imgSrc} />
               {this.state.isLocked ? <span styleName='tooltip'>Unlock</span> : <span styleName='tooltip'>Lock</span>}
             </button>
 

browser/main/Detail/PermanentDeleteButton.js

@@ -10,7 +10,7 @@ const PermanentDeleteButton = ({
   <button styleName='control-trashButton--in-trash'
     onClick={(e) => onClick(e)}
   >
-    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+    <img src='../resources/icon/icon-trash.svg' />
     <span styleName='tooltip'>{i18n.__('Permanent Delete')}</span>
   </button>
 )

browser/main/Detail/SnippetNoteDetail.js

@@ -518,6 +518,19 @@ class SnippetNoteDetail extends React.Component {
     ])
   }
 
+  handleWrapLineButtonClick (e) {
+    context.popup([
+      {
+        label: 'on',
+        click: (e) => this.handleWrapLineItemClick(e, true)
+      },
+      {
+        label: 'off',
+        click: (e) => this.handleWrapLineItemClick(e, false)
+      }
+    ])
+  }
+
   handleIndentSizeItemClick (e, indentSize) {
     const { config, dispatch } = this.props
     const editor = Object.assign({}, config.editor, {
@@ -550,6 +563,22 @@ class SnippetNoteDetail extends React.Component {
     })
   }
 
+  handleWrapLineItemClick (e, lineWrapping) {
+    const { config, dispatch } = this.props
+    const editor = Object.assign({}, config.editor, {
+      lineWrapping
+    })
+    ConfigManager.set({
+      editor
+    })
+    dispatch({
+      type: 'SET_CONFIG',
+      config: {
+        editor
+      }
+    })
+  }
+
   focus () {
     this.refs.description.focus()
   }
@@ -720,6 +749,7 @@ class SnippetNoteDetail extends React.Component {
             mode={snippet.mode || (autoDetect ? null : config.editor.snippetDefaultLanguage)}
             value={snippet.content}
             linesHighlighted={snippet.linesHighlighted}
+            lineWrapping={config.editor.lineWrapping}
             theme={config.editor.theme}
             fontFamily={config.editor.fontFamily}
             fontSize={editorFontSize}
@@ -778,7 +808,7 @@ class SnippetNoteDetail extends React.Component {
 
     const detailTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <div styleName='info-left-top'>
+        <div>
           <FolderSelect styleName='info-left-top-folderSelect'
             value={this.state.note.storage + '-' + this.state.note.folder}
             ref='folder'
@@ -899,6 +929,12 @@ class SnippetNoteDetail extends React.Component {
             size: {config.editor.indentSize}&nbsp;
             <i className='fa fa-caret-down' />
           </button>
+          <button
+            onClick={(e) => this.handleWrapLineButtonClick(e)}
+          >
+            Wrap Line: {config.editor.lineWrapping ? 'on' : 'off'}&nbsp;
+            <i className='fa fa-caret-down' />
+          </button>
         </div>
 
         <StatusBar

browser/main/Detail/ToggleModeButton.js

@@ -8,11 +8,11 @@ const ToggleModeButton = ({
   onClick, editorType
 }) => (
   <div styleName='control-toggleModeButton'>
-    <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => onClick('SPLIT')}>
+    <div styleName={editorType === 'SPLIT' ? 'active' : undefined} onClick={() => onClick('SPLIT')}>
-      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : ''} />
+      <img src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : ''} />
     </div>
-    <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
+    <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : undefined} onClick={() => onClick('EDITOR_PREVIEW')}>
-      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
+      <img src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
     </div>
     <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Toggle Mode')}</span>
   </div>
@@ -20,7 +20,7 @@ const ToggleModeButton = ({
 
 ToggleModeButton.propTypes = {
   onClick: PropTypes.func.isRequired,
-  editorType: PropTypes.string.Required
+  editorType: PropTypes.string.isRequired
 }
 
 export default CSSModules(ToggleModeButton, styles)

browser/main/Detail/TrashButton.js

@@ -10,7 +10,7 @@ const TrashButton = ({
   <button styleName='control-trashButton'
     onClick={(e) => onClick(e)}
   >
-    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+    <img src='../resources/icon/icon-trash.svg' />
     <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Trash')}</span>
   </button>
 )

browser/main/DevTools/index.js

@@ -1,8 +1,8 @@
 /* eslint-disable no-undef */
-if (process.env.NODE_ENV === 'production') {
+if (process.env.NODE_ENV === 'development') {
-  // eslint-disable-next-line global-require
-  module.exports = require('./index.prod').default
-} else {
   // eslint-disable-next-line global-require
   module.exports = require('./index.dev').default
+} else {
+  // eslint-disable-next-line global-require
+  module.exports = require('./index.prod').default
 }

browser/main/NewNoteButton/index.js

@@ -90,7 +90,7 @@ class NewNoteButton extends React.Component {
         <div styleName='control'>
           <button styleName='control-newNoteButton'
             onClick={this.handleNewNoteButtonClick}>
-            <img styleName='iconTag' src='../resources/icon/icon-newnote.svg' />
+            <img src='../resources/icon/icon-newnote.svg' />
             <span styleName='control-newNoteButton-tooltip'>
               {i18n.__('Make a note')} {OSX ? '⌘' : i18n.__('Ctrl')} + N
             </span>

browser/main/NoteList/index.js

@@ -1138,7 +1138,7 @@ class NoteList extends React.Component {
               }
               onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
             >
-              <img styleName='iconTag' src='../resources/icon/icon-column.svg' />
+              <img src='../resources/icon/icon-column.svg' />
             </button>
             <button title={i18n.__('Compressed View')} styleName={config.listStyle === 'SMALL'
                 ? 'control-button--active'
@@ -1146,7 +1146,7 @@ class NoteList extends React.Component {
               }
               onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
             >
-              <img styleName='iconTag' src='../resources/icon/icon-column-list.svg' />
+              <img src='../resources/icon/icon-column-list.svg' />
             </button>
           </div>
         </div>

browser/main/SideNav/PreferenceButton.js

@@ -8,7 +8,7 @@ const PreferenceButton = ({
   onClick
 }) => (
   <button styleName='top-menu-preference' onClick={(e) => onClick(e)}>
-    <img styleName='iconTag' src='../resources/icon/icon-setting.svg' />
+    <img src='../resources/icon/icon-setting.svg' />
     <span styleName='tooltip'>{i18n.__('Preferences')}</span>
   </button>
 )

browser/main/SideNav/StorageItem.js

@@ -362,14 +362,14 @@ class StorageItem extends React.Component {
             <button styleName='header-addFolderButton'
               onClick={(e) => this.handleAddFolderButtonClick(e)}
             >
-              <img styleName='iconTag' src='../resources/icon/icon-plus.svg' />
+              <img src='../resources/icon/icon-plus.svg' />
             </button>
           }
 
           <button styleName='header-info'
             onClick={(e) => this.handleHeaderInfoClick(e)}
           >
-            <span styleName='header-info-name'>
+            <span>
               {isFolded ? _.truncate(storage.name, {length: 1, omission: ''}) : storage.name}
             </span>
             {isFolded &&
@@ -380,7 +380,7 @@ class StorageItem extends React.Component {
           </button>
         </div>
         {this.state.isOpen &&
-          <div styleName='folderList' >
+          <div>
             {folderList}
           </div>
         }

browser/main/SideNav/index.js

@@ -440,7 +440,7 @@ class SideNav extends React.Component {
 
     const style = {}
     if (!isFolded) style.width = this.props.width
-    const isTagActive = location.pathname.match(/tag/)
+    const isTagActive = /tag/.test(location.pathname)
     return (
       <div className='SideNav'
         styleName={isFolded ? 'root--folded' : 'root'}

browser/main/TopBar/index.js

@@ -71,6 +71,7 @@ class TopBar extends React.Component {
     this.refs.search.childNodes[0].blur
     dispatch(push('/searched'))
     e.preventDefault()
+    this.debouncedUpdateKeyword('')
   }
 
   handleKeyDown (e) {

browser/main/lib/ConfigManager.js

@@ -31,6 +31,8 @@ export const DEFAULT_CONFIG = {
     toggleMode: OSX ? 'Command + Alt + M' : 'Ctrl + M',
     deleteNote: OSX ? 'Command + Shift + Backspace' : 'Ctrl + Shift + Backspace',
     pasteSmartly: OSX ? 'Command + Shift + V' : 'Ctrl + Shift + V',
+    insertDate: OSX ? 'Command + /' : 'Ctrl + /',
+    insertDateTime: OSX ? 'Command + Alt + /' : 'Ctrl + Shift + /',
     toggleMenuBar: 'Alt'
   },
   ui: {
@@ -48,6 +50,7 @@ export const DEFAULT_CONFIG = {
     fontFamily: win ? 'Consolas' : 'Monaco',
     indentType: 'space',
     indentSize: '2',
+    lineWrapping: true,
     enableRulers: false,
     rulers: [80, 120],
     displayLineNumbers: true,
@@ -83,8 +86,10 @@ export const DEFAULT_CONFIG = {
     breaks: true,
     smartArrows: false,
     allowCustomCSS: false,
-    customCSS: '',
+
+    customCSS: '/* Drop Your Custom CSS Code Here */',
     sanitize: 'STRICT', // 'STRICT', 'ALLOW_STYLES', 'NONE'
+    mermaidHTMLLabel: false,
     lineThroughCheckbox: true
   },
   blog: {
@@ -108,7 +113,6 @@ function validate (config) {
 }
 
 function _save (config) {
-  console.log(config)
   window.localStorage.setItem('config', JSON.stringify(config))
 }
 
@@ -141,7 +145,7 @@ function get () {
     const theme = consts.THEMES.find(theme => theme.name === config.editor.theme)
 
     if (theme) {
-      editorTheme.setAttribute('href', `../${theme.path}`)
+      editorTheme.setAttribute('href', theme.path)
     } else {
       config.editor.theme = 'default'
     }
@@ -152,7 +156,13 @@ function get () {
 
 function set (updates) {
   const currentConfig = get()
-  const newConfig = Object.assign({}, DEFAULT_CONFIG, currentConfig, updates)
+
+  const arrangedUpdates = updates
+  if (updates.preview !== undefined && updates.preview.customCSS === '') {
+    arrangedUpdates.preview.customCSS = DEFAULT_CONFIG.preview.customCSS
+  }
+
+  const newConfig = Object.assign({}, DEFAULT_CONFIG, currentConfig, arrangedUpdates)
   if (!validate(newConfig)) throw new Error('INVALID CONFIG')
   _save(newConfig)
 
@@ -183,7 +193,7 @@ function set (updates) {
   const newTheme = consts.THEMES.find(theme => theme.name === newConfig.editor.theme)
 
   if (newTheme) {
-    editorTheme.setAttribute('href', `../${newTheme.path}`)
+    editorTheme.setAttribute('href', newTheme.path)
   }
 
   ipcRenderer.send('config-renew', {

browser/main/lib/dataApi/attachmentManagement.js

@@ -241,6 +241,10 @@ function migrateAttachments (markdownContent, storagePath, noteKey) {
  * @returns {String} postprocessed HTML in which all :storage references are mapped to the actual paths.
  */
 function fixLocalURLS (renderedHTML, storagePath) {
+  const encodedWin32SeparatorRegex = /%5C/g
+  const storageRegex = new RegExp('/?' + STORAGE_FOLDER_PLACEHOLDER, 'g')
+  const storageUrl = 'file:///' + path.join(storagePath, DESTINATION_FOLDER).replace(/\\/g, '/')
+
   /*
     A :storage reference is like `:storage/3b6f8bd6-4edd-4b15-96e0-eadc4475b564/f939b2c3.jpg`.
 
@@ -250,8 +254,7 @@ function fixLocalURLS (renderedHTML, storagePath) {
     - `(?:\\\/|%5C)` match the path seperator. `\\\/` for posix systems and `%5C` for windows.
   */
   return renderedHTML.replace(new RegExp('/?' + STORAGE_FOLDER_PLACEHOLDER + '(?:(?:\\\/|%5C)[-.\\w]+)+', 'g'), function (match) {
-    var encodedPathSeparators = new RegExp(mdurl.encode(path.win32.sep) + '|' + mdurl.encode(path.posix.sep), 'g')
+    return match.replace(encodedWin32SeparatorRegex, '/').replace(storageRegex, storageUrl)
-    return match.replace(encodedPathSeparators, path.sep).replace(new RegExp('/?' + STORAGE_FOLDER_PLACEHOLDER, 'g'), 'file:///' + path.join(storagePath, DESTINATION_FOLDER))
   })
 }
 
@@ -617,8 +620,6 @@ function deleteAttachmentsNotPresentInNote (markdownContent, storageKey, noteKey
         }
       })
     })
-  } else {
-    console.info('Attachment folder ("' + attachmentFolder + '") did not exist..')
   }
 }
 

browser/main/modals/NewNoteModal.styl

@@ -19,6 +19,7 @@
 .control
   padding 25px 0px
   text-align center
+  display: flex
 
 .control-button
   width 240px

browser/main/modals/PreferencesModal/FolderItem.js

@@ -225,7 +225,7 @@ class FolderItem extends React.Component {
         <div styleName='folderItem-left'
           style={{borderColor: folder.color}}
         >
-          <span styleName='folderItem-left-name'>{folder.name}</span>
+          <span>{folder.name}</span>
           <span styleName='folderItem-left-key'>({folder.key})</span>
         </div>
         <div styleName='folderItem-right'>
@@ -288,10 +288,10 @@ class Handle extends React.Component {
 
 class SortableFolderItemComponent extends React.Component {
   render () {
-    const StyledHandle = CSSModules(Handle, this.props.styles)
+    const StyledHandle = CSSModules(Handle, styles)
     const DragHandle = SortableHandle(StyledHandle)
 
-    const StyledFolderItem = CSSModules(FolderItem, this.props.styles)
+    const StyledFolderItem = CSSModules(FolderItem, styles)
 
     return (
       <div>

browser/main/modals/PreferencesModal/FolderList.js

@@ -22,7 +22,7 @@ class FolderList extends React.Component {
     })
 
     return (
-      <div styleName='folderList'>
+      <div>
         {folderList.length > 0
           ? folderList
           : <div styleName='folderList-empty'>{i18n.__('No Folders')}</div>

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -173,6 +173,26 @@ class HotkeyTab extends React.Component {
               />
             </div>
           </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Insert Current Date')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                value={config.hotkey.insertDate}
+                type='text'
+                disabled='true'
+              />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Insert Current Date and Time')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                value={config.hotkey.insertDateTime}
+                type='text'
+                disabled='true'
+              />
+            </div>
+          </div>
           <div styleName='group-control'>
             <button styleName='group-control-leftButton'
               onClick={(e) => this.handleHintToggleButtonClick(e)}

browser/main/modals/PreferencesModal/UiTab.js

@@ -14,6 +14,7 @@ import { getLanguages } from 'browser/lib/Languages'
 import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
 
 const OSX = global.process.platform === 'darwin'
+const WIN = global.process.platform === 'win32'
 
 const electron = require('electron')
 const ipc = electron.ipcRenderer
@@ -91,6 +92,7 @@ class UiTab extends React.Component {
         enableRulers: this.refs.enableEditorRulers.value === 'true',
         rulers: this.refs.editorRulers.value.replace(/[^0-9,]/g, '').split(','),
         displayLineNumbers: this.refs.editorDisplayLineNumbers.checked,
+        lineWrapping: this.refs.editorLineWrapping.checked,
         switchPreview: this.refs.editorSwitchPreview.value,
         keyMap: this.refs.editorKeyMap.value,
         snippetDefaultLanguage: this.refs.editorSnippetDefaultLanguage.value,
@@ -123,6 +125,7 @@ class UiTab extends React.Component {
         breaks: this.refs.previewBreaks.checked,
         smartArrows: this.refs.previewSmartArrows.checked,
         sanitize: this.refs.previewSanitize.value,
+        mermaidHTMLLabel: this.refs.previewMermaidHTMLLabel.checked,
         allowCustomCSS: this.refs.previewAllowCustomCSS.checked,
         lineThroughCheckbox: this.refs.lineThroughCheckbox.checked,
         customCSS: this.customCSSCM.getCodeMirror().getValue()
@@ -135,7 +138,7 @@ class UiTab extends React.Component {
       const theme = consts.THEMES.find(theme => theme.name === newCodemirrorTheme)
 
       if (theme) {
-        checkHighLight.setAttribute('href', `../${theme.path}`)
+        checkHighLight.setAttribute('href', theme.path)
       }
     }
 
@@ -545,6 +548,17 @@ class UiTab extends React.Component {
             </label>
           </div>
 
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.lineWrapping}
+                ref='editorLineWrapping'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Wrap line in Snippet Note')}
+            </label>
+          </div>
+
           <div styleName='group-checkBoxSection'>
             <label>
               <input onChange={(e) => this.handleUIChange(e)}
@@ -800,6 +814,16 @@ class UiTab extends React.Component {
               </select>
             </div>
           </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.mermaidHTMLLabel}
+                ref='previewMermaidHTMLLabel'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Enable HTML label in mermaid flowcharts')}
+            </label>
+          </div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>
               {i18n.__('LaTeX Inline Open Delimiter')}
@@ -883,7 +907,6 @@ class UiTab extends React.Component {
                   onChange={e => this.handleUIChange(e)}
                   ref={e => (this.customCSSCM = e)}
                   value={config.preview.customCSS}
-                  defaultValue={'/* Drop Your Custom CSS Code Here */\n'}
                   options={{
                     lineNumbers: true,
                     mode: 'css',

browser/main/modals/PreferencesModal/index.js

@@ -147,7 +147,7 @@ class Preferences extends React.Component {
           key={tab.target}
           onClick={(e) => this.handleNavButtonClick(tab.target)(e)}
         >
-          <span styleName='nav-button-label'>
+          <span>
             {tab.label}
           </span>
           {isUiHotkeyTab ? this.haveToSaveNotif(tab[tab.label].type, tab[tab.label].message) : null}

browser/main/store.js

@@ -476,7 +476,8 @@ const reducer = combineReducers({
   router: connectRouter(history)
 })
 
-const store = createStore(reducer, undefined, compose(
+const store = createStore(reducer, undefined, process.env.NODE_ENV === 'development'
-  applyMiddleware(routerMiddleware(history)), DevTools.instrument()))
+  ? compose(applyMiddleware(routerMiddleware(history)), DevTools.instrument())
+  : applyMiddleware(routerMiddleware(history)))
 
 export { store, history }

lib/main-menu.js

@@ -3,6 +3,7 @@ const BrowserWindow = electron.BrowserWindow
 const shell = electron.shell
 const ipc = electron.ipcMain
 const mainWindow = require('./main-window')
+const os = require('os')
 
 const macOS = process.platform === 'darwin'
 // const WIN = process.platform === 'win32'
@@ -411,6 +412,28 @@ const help = {
           click () { shell.openExternal('https://github.com/TobseF/boostnote-markdown-cheatsheet/blob/master/BOOSTNOTE_MARKDOWN_CHEAT_SHEET.md') }
         }
       ]
+    },
+    {
+      type: 'separator'
+    },
+    {
+      label: 'About',
+      click () {
+        const version = electron.app.getVersion()
+        const electronVersion = process.versions.electron
+        const chromeVersion = process.versions.chrome
+        const nodeVersion = process.versions.node
+        const v8Version = process.versions.v8
+        const OSInfo = `${os.type()} ${os.arch()} ${os.release()}`
+        const detail = `Version: ${version}\nElectron: ${electronVersion}\nChrome: ${chromeVersion}\nNode.js: ${nodeVersion}\nV8: ${v8Version}\nOS: ${OSInfo}`
+        electron.dialog.showMessageBox(BrowserWindow.getFocusedWindow(),
+          {
+            title: 'BoostNote',
+            message: 'BoostNote',
+            type: 'info',
+            detail: `\n${detail}`
+          })
+      }
     }
   ]
 }

lib/main-window.js

@@ -54,7 +54,7 @@ const mainWindow = new BrowserWindow({
   },
   icon: path.resolve(__dirname, '../resources/app.png')
 })
-const url = path.resolve(__dirname, process.env.NODE_ENV === 'production' ? './main.production.html' : './main.development.html')
+const url = path.resolve(__dirname, process.env.NODE_ENV === 'development' ? './main.development.html' : './main.production.html')
 
 mainWindow.loadURL('file://' + url)
 mainWindow.setMenuBarVisibility(false)

lib/main.development.html

@@ -110,7 +110,6 @@
   <script src="../extra_scripts/boost/boostNewLineIndentContinueMarkdownList.js"></script>
   <script src="../extra_scripts/codemirror/mode/bfm/bfm.js"></script>
   <script src="../extra_scripts/codemirror/addon/hyperlink/hyperlink.js"></script>
-  <script src="../extra_scripts/codemirror/mode/bfm/bfm.js"></script>
 
   <script src="../node_modules/codemirror/addon/edit/closebrackets.js"></script>
   <script src="../node_modules/codemirror/addon/edit/matchbrackets.js"></script>

lib/main.production.html

@@ -105,7 +105,6 @@
   <script src="../extra_scripts/boost/boostNewLineIndentContinueMarkdownList.js"></script>
   <script src="../extra_scripts/codemirror/mode/bfm/bfm.js"></script>
   <script src="../extra_scripts/codemirror/addon/hyperlink/hyperlink.js"></script>
-  <script src="../extra_scripts/codemirror/mode/bfm/bfm.js"></script>
 
   <script src="../node_modules/codemirror/addon/edit/closebrackets.js"></script>
   <script src="../node_modules/codemirror/addon/edit/matchbrackets.js"></script>

locales/da.json

@@ -156,5 +156,7 @@
 	"⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/de.json

@@ -212,5 +212,7 @@
 	"⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/en.json

@@ -187,5 +187,7 @@
 	"Snippet Default Language": "Snippet Default Language",
 	"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"
+	"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"
 }

locales/es-ES.json

@@ -158,5 +158,7 @@
 	"Spellcheck disabled": "Deshabilitar corrector ortográfico",
 	"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"
+	"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"
 }

locales/fa.json

@@ -160,5 +160,7 @@
 	"⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/fr.json

@@ -172,5 +172,7 @@
 	"Snippet name": "Nom du snippet",
 	"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"
+	"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"
 }

locales/hu.json

@@ -180,5 +180,7 @@
 	"⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/it.json

@@ -160,5 +160,7 @@
 	"⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/ja.json

@@ -219,5 +219,7 @@
 	"⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ このノートのストレージに存在しない添付ファイルへのリンクを貼り付けました。添付ファイルへのリンクの貼り付けは同一ストレージ内でのみサポートされています。代わりに添付ファイルをドラッグアンドドロップしてください！ ⚠",
 	"Spellcheck disabled": "スペルチェック無効",
 	"Show menu bar": "メニューバーを表示",
-	"Auto Detect": "自動検出"
+	"Auto Detect": "自動検出",
+	"Enable HTML label in mermaid flowcharts": "mermaid flowchartでHTMLラベルを有効にする  ⚠ このオプションには潜在的なXSSの危険性があります。",
+	"Wrap line in Snippet Note": "行を右端で折り返す（Snippet Note）"
 }

locales/ko.json

@@ -163,5 +163,7 @@
 	"⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/no.json

@@ -156,5 +156,7 @@
 	"⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/pl.json

@@ -165,5 +165,7 @@
 	"Add tag...": "Dodaj tag...",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/pt-BR.json

@@ -156,5 +156,7 @@
 	"⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/pt-PT.json

@@ -155,5 +155,7 @@
 	"⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ Você colou um link referente a um anexo que não pôde ser encontrado no local de armazenamento desta nota. A vinculação de anexos de referência de links só é suportada se o local de origem e de destino for o mesmo de armazenamento. Por favor, arraste e solte o anexo na nota! ⚠",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/ru.json

@@ -153,5 +153,7 @@
 	"⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/sq.json

@@ -155,5 +155,7 @@
 	"⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/th.json

@@ -182,5 +182,7 @@
 	"Snippet Default Language": "ทำการ Snippet ภาษาที่เป็นค่าเริ่มต้น",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/tr.json

@@ -155,5 +155,7 @@
 	"Allow dangerous html tags": "Tehlikeli html etiketlerine izin ver",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/zh-CN.json

@@ -220,5 +220,7 @@
 	"Render newlines in Markdown paragraphs as <br>":"在 Markdown 段落中使用 <br> 换行",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

locales/zh-TW.json

@@ -164,5 +164,7 @@
 	"⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠",
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
-	"Auto Detect": "Auto Detect"
+	"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"
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "boost",
   "productName": "Boostnote",
-  "version": "0.11.17",
+  "version": "0.12.1",
   "main": "index.js",
   "description": "Boostnote",
   "license": "GPL-3.0",

tests/dataApi/attachmentManagement.test.js

@@ -287,7 +287,11 @@ it('should replace the all ":storage" path with the actual storage path', functi
     '        </p>\n' +
     '        <pre class="fence" data-line="8">\n' +
     '            <span class="filename"></span>\n' +
-    '            <div class="gallery" data-autoplay="undefined" data-height="undefined">:storage' + mdurl.encode(path.sep) + noteKey + mdurl.encode(path.sep) + 'f939b2c3.jpg</div>\n' +
+    '            <div class="gallery" data-autoplay="undefined" data-height="undefined">:storage' + mdurl.encode(path.win32.sep) + noteKey + mdurl.encode(path.win32.sep) + 'f939b2c3.jpg</div>\n' +
+    '        </pre>\n' +
+    '        <pre class="fence" data-line="10">\n' +
+    '            <span class="filename"></span>\n' +
+    '            <div class="gallery" data-autoplay="undefined" data-height="undefined">:storage' + mdurl.encode(path.posix.sep) + noteKey + mdurl.encode(path.posix.sep) + 'f939b2c3.jpg</div>\n' +
     '        </pre>\n' +
     '    </body>\n' +
     '</html>'
@@ -300,17 +304,21 @@ it('should replace the all ":storage" path with the actual storage path', functi
     '    <body data-theme="default">\n' +
     '        <h2 data-line="0" id="Headline">Headline</h2>\n' +
     '        <p data-line="2">\n' +
-    '            <img src="file:///' + storagePath + path.sep + storageFolder + path.sep + noteKey + path.sep + '0.6r4zdgc22xp.png" alt="dummyImage.png" >\n' +
+    '            <img src="file:///' + storagePath + '/' + storageFolder + '/' + noteKey + '/' + '0.6r4zdgc22xp.png" alt="dummyImage.png" >\n' +
     '        </p>\n' +
     '        <p data-line="4">\n' +
-    '            <a href="file:///' + storagePath + path.sep + storageFolder + path.sep + noteKey + path.sep + '0.q2i4iw0fyx.pdf">dummyPDF.pdf</a>\n' +
+    '            <a href="file:///' + storagePath + '/' + storageFolder + '/' + noteKey + '/' + '0.q2i4iw0fyx.pdf">dummyPDF.pdf</a>\n' +
     '        </p>\n' +
     '        <p data-line="6">\n' +
-    '            <img src="file:///' + storagePath + path.sep + storageFolder + path.sep + noteKey + path.sep + 'd6c5ee92.jpg" alt="dummyImage2.jpg">\n' +
+    '            <img src="file:///' + storagePath + '/' + storageFolder + '/' + noteKey + '/' + 'd6c5ee92.jpg" alt="dummyImage2.jpg">\n' +
     '        </p>\n' +
     '        <pre class="fence" data-line="8">\n' +
     '            <span class="filename"></span>\n' +
-    '            <div class="gallery" data-autoplay="undefined" data-height="undefined">file:///' + storagePath + path.sep + storageFolder + path.sep + noteKey + path.sep + 'f939b2c3.jpg</div>\n' +
+    '            <div class="gallery" data-autoplay="undefined" data-height="undefined">file:///' + storagePath + '/' + storageFolder + '/' + noteKey + '/' + 'f939b2c3.jpg</div>\n' +
+    '        </pre>\n' +
+    '        <pre class="fence" data-line="10">\n' +
+    '            <span class="filename"></span>\n' +
+    '            <div class="gallery" data-autoplay="undefined" data-height="undefined">file:///' + storagePath + '/' + storageFolder + '/' + noteKey + '/' + 'f939b2c3.jpg</div>\n' +
     '        </pre>\n' +
     '    </body>\n' +
     '</html>'
@@ -345,10 +353,10 @@ it('should replace the ":storage" path with the actual storage path when they ha
     '    <body data-theme="default">\n' +
     '        <h2 data-line="0" id="Headline">Headline</h2>\n' +
     '        <p data-line="2">\n' +
-    '            <img src="file:///' + storagePath + path.sep + storageFolder + path.sep + noteKey + path.sep + '0.6r4zdgc22xp.png" alt="dummyImage.png" >\n' +
+    '            <img src="file:///' + storagePath + '/' + storageFolder + '/' + noteKey + '/' + '0.6r4zdgc22xp.png" alt="dummyImage.png" >\n' +
     '        </p>\n' +
     '        <p data-line="4">\n' +
-    '            <a href="file:///' + storagePath + path.sep + storageFolder + path.sep + noteKey + path.sep + '0.q2i4iw0fyx.pdf">dummyPDF.pdf</a>\n' +
+    '            <a href="file:///' + storagePath + '/' + storageFolder + '/' + noteKey + '/' + '0.q2i4iw0fyx.pdf">dummyPDF.pdf</a>\n' +
     '        </p>\n' +
     '    </body>\n' +
     '</html>'

tests/dataApi/copyFile-test.js

@@ -3,6 +3,9 @@ const copyFile = require('browser/main/lib/dataApi/copyFile')
 
 const path = require('path')
 const fs = require('fs')
+const os = require('os')
+const execSync = require('child_process').execSync
+const removeDirCommand = os.platform() === 'win32' ? 'rmdir /s /q ' : 'rm -rf '
 
 const testFile = 'test.txt'
 const srcFolder = path.join(__dirname, '🤔')
@@ -29,7 +32,7 @@ test('`copyFile` should handle encoded URI on src path', (t) => {
 test.after((t) => {
   fs.unlinkSync(srcPath)
   fs.unlinkSync(dstPath)
-  fs.rmdirSync(srcFolder)
+  execSync(removeDirCommand + '"' + srcFolder + '"')
-  fs.rmdirSync(dstFolder)
+  execSync(removeDirCommand + '"' + dstFolder + '"')
 })
 

tests/fixtures/markdowns.js

@@ -104,6 +104,11 @@ Term 2 with *inline markup*
 `
 const shortcuts = '<kbd>Ctrl</kbd>\n\n[[Ctrl]]'
 
+const footnote = `
+^[hello-world]
+hello-world: https://github.com/BoostIO/Boostnote/
+`
+
 export default {
   basic,
   codeblock,
@@ -115,5 +120,6 @@ export default {
   subTexts,
   supTexts,
   deflists,
-  shortcuts
+  shortcuts,
+  footnote
 }

tests/lib/contextMenuBuilder.test.js

@@ -4,12 +4,14 @@ jest.mock('electron', () => {
 })
 
 const spellcheck = require('browser/lib/spellcheck')
-const buildEditorContextMenu = require('browser/lib/contextMenuBuilder')
+const buildEditorContextMenu = require('browser/lib/contextMenuBuilder').buildEditorContextMenu
+const buildMarkdownPreviewContextMenu = require('browser/lib/contextMenuBuilder').buildMarkdownPreviewContextMenu
 
 beforeEach(() => {
   menuBuilderParameter = null
 })
 
+// Editor Context Menu
 it('should make sure that no context menu is build if the passed editor instance was null', function () {
   const event = {
     pageX: 12,
@@ -124,3 +126,13 @@ it('should make sure that word suggestions creates a correct menu if there was a
   expect(menuBuilderParameter[7].role).toEqual('selectall')
   expect(spellcheck.getSpellingSuggestion).toHaveBeenCalledWith(wordToCorrect)
 })
+
+// Markdown Preview Context Menu
+it('should make sure that no context menu is built if the Markdown Preview instance was null', function () {
+  const event = {
+    pageX: 12,
+    pageY: 12
+  }
+  buildMarkdownPreviewContextMenu(null, event)
+  expect(menuBuilderParameter).toEqual(null)
+})

tests/lib/markdown-test.js

@@ -68,3 +68,8 @@ test('Markdown.render() should render shortcuts correctly', t => {
   const rendered = md.render(markdownFixtures.shortcuts)
   t.snapshot(rendered)
 })
+
+test('Markdown.render() should render footnote correctly', t => {
+  const rendered = md.render(markdownFixtures.footnote)
+  t.snapshot(rendered)
+})

tests/lib/snapshots/markdown-test.js.md

@@ -4,6 +4,21 @@ The actual snapshot is saved in `markdown-test.js.snap`.
 
 Generated by [AVA](https://ava.li).
 
+## Markdown.render() should render footnote correctly
+
+> Snapshot 1
+
+    `<p data-line="1"><sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup><br />␊
+    hello-world: <a href="https://github.com/BoostIO/Boostnote/">https://github.com/BoostIO/Boostnote/</a></p>␊
+    <hr class="footnotes-sep" />␊
+    <section class="footnotes">␊
+    <ol class="footnotes-list">␊
+    <li id="fn1" class="footnote-item"><p>hello-world <a href="#fnref1" class="footnote-backref">↩︎</a></p>␊
+    </li>␊
+    </ol>␊
+    </section>␊
+    `
+
 ## Markdown.render() should render line breaks correctly
 
 > Snapshot 1