Merge remote-tracking branch 'upstream/master' into allow-no-html-escape

browser/components/CodeEditor.js

@@ -7,14 +7,16 @@ import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'
 import convertModeName from 'browser/lib/convertModeName'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import iconv from 'iconv-lite'
-
+import crypto from 'crypto'
+import consts from 'browser/lib/consts'
+import fs from 'fs'
 const { ipcRenderer } = require('electron')
+import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
-const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
 const buildCMRulers = (rulers, enableRulers) =>
-  enableRulers ? rulers.map(ruler => ({ column: ruler })) : []
+  enableRulers ? rulers.map(ruler => ({column: ruler})) : []
 
 export default class CodeEditor extends React.Component {
   constructor (props) {
@@ -81,8 +83,21 @@ export default class CodeEditor extends React.Component {
 
   componentDidMount () {
     const { rulers, enableRulers } = this.props
-    this.value = this.props.value
+    const expandSnippet = this.expandSnippet.bind(this)
 
+    const defaultSnippet = [
+      {
+        id: crypto.randomBytes(16).toString('hex'),
+        name: 'Dummy text',
+        prefix: ['lorem', 'ipsum'],
+        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+      }
+    ]
+    if (!fs.existsSync(consts.SNIPPET_FILE)) {
+      fs.writeFileSync(consts.SNIPPET_FILE, JSON.stringify(defaultSnippet, null, 4), 'utf8')
+    }
+
+    this.value = this.props.value
     this.editor = CodeMirror(this.refs.root, {
       rulers: buildCMRulers(rulers, enableRulers),
       value: this.props.value,
@@ -103,6 +118,8 @@ export default class CodeEditor extends React.Component {
         Tab: function (cm) {
           const cursor = cm.getCursor()
           const line = cm.getLine(cursor.line)
+          const cursorPosition = cursor.ch
+          const charBeforeCursor = line.substr(cursorPosition - 1, 1)
           if (cm.somethingSelected()) cm.indentSelection('add')
           else {
             const tabs = cm.getOption('indentWithTabs')
@@ -114,6 +131,16 @@ export default class CodeEditor extends React.Component {
                 cm.execCommand('insertSoftTab')
               }
               cm.execCommand('goLineEnd')
+            } else if (!charBeforeCursor.match(/\t|\s|\r|\n/) && cursor.ch > 1) {
+              // text expansion on tab key if the char before is alphabet
+              const snippets = JSON.parse(fs.readFileSync(consts.SNIPPET_FILE, 'utf8'))
+              if (expandSnippet(line, cursor, cm, snippets) === false) {
+                if (tabs) {
+                  cm.execCommand('insertTab')
+                } else {
+                  cm.execCommand('insertSoftTab')
+                }
+              }
             } else {
               if (tabs) {
                 cm.execCommand('insertTab')
@@ -157,6 +184,73 @@ export default class CodeEditor extends React.Component {
     CodeMirror.Vim.map('ZZ', ':q', 'normal')
   }
 
+  expandSnippet (line, cursor, cm, snippets) {
+    const wordBeforeCursor = this.getWordBeforeCursor(line, cursor.line, cursor.ch)
+    const templateCursorString = ':{}'
+    for (let i = 0; i < snippets.length; i++) {
+      if (snippets[i].prefix.indexOf(wordBeforeCursor.text) !== -1) {
+        if (snippets[i].content.indexOf(templateCursorString) !== -1) {
+          const snippetLines = snippets[i].content.split('\n')
+          let cursorLineNumber = 0
+          let cursorLinePosition = 0
+          for (let j = 0; j < snippetLines.length; j++) {
+            const cursorIndex = snippetLines[j].indexOf(templateCursorString)
+            if (cursorIndex !== -1) {
+              cursorLineNumber = j
+              cursorLinePosition = cursorIndex
+              cm.replaceRange(
+                snippets[i].content.replace(templateCursorString, ''),
+                wordBeforeCursor.range.from,
+                wordBeforeCursor.range.to
+              )
+              cm.setCursor({ line: cursor.line + cursorLineNumber, ch: cursorLinePosition })
+            }
+          }
+        } else {
+          cm.replaceRange(
+            snippets[i].content,
+            wordBeforeCursor.range.from,
+            wordBeforeCursor.range.to
+          )
+        }
+        return true
+      }
+    }
+
+    return false
+  }
+
+  getWordBeforeCursor (line, lineNumber, cursorPosition) {
+    let wordBeforeCursor = ''
+    const originCursorPosition = cursorPosition
+    const emptyChars = /\t|\s|\r|\n/
+
+    // to prevent the word to expand is long that will crash the whole app
+    // the safeStop is there to stop user to expand words that longer than 20 chars
+    const safeStop = 20
+
+    while (cursorPosition > 0) {
+      const currentChar = line.substr(cursorPosition - 1, 1)
+      // if char is not an empty char
+      if (!emptyChars.test(currentChar)) {
+        wordBeforeCursor = currentChar + wordBeforeCursor
+      } else if (wordBeforeCursor.length >= safeStop) {
+        throw new Error('Your snippet trigger is too long !')
+      } else {
+        break
+      }
+      cursorPosition--
+    }
+
+    return {
+      text: wordBeforeCursor,
+      range: {
+        from: {line: lineNumber, ch: originCursorPosition},
+        to: {line: lineNumber, ch: cursorPosition}
+      }
+    }
+  }
+
   quitEditor () {
     document.querySelector('textarea').blur()
   }
@@ -174,7 +268,7 @@ export default class CodeEditor extends React.Component {
 
   componentDidUpdate (prevProps, prevState) {
     let needRefresh = false
-    const { rulers, enableRulers } = this.props
+    const {rulers, enableRulers} = this.props
     if (prevProps.mode !== this.props.mode) {
       this.setMode(this.props.mode)
     }
@@ -274,6 +368,7 @@ export default class CodeEditor extends React.Component {
 
   handlePaste (editor, e) {
     const clipboardData = e.clipboardData
+    const {storageKey, noteKey} = this.props
     const dataTransferItem = clipboardData.items[0]
     const pastedTxt = clipboardData.getData('text')
     const isURL = (str) => {
@@ -283,22 +378,28 @@ export default class CodeEditor extends React.Component {
     const isInLinkTag = (editor) => {
       const startCursor = editor.getCursor('start')
       const prevChar = editor.getRange(
-        { line: startCursor.line, ch: startCursor.ch - 2 },
-        { line: startCursor.line, ch: startCursor.ch }
+        {line: startCursor.line, ch: startCursor.ch - 2},
+        {line: startCursor.line, ch: startCursor.ch}
       )
       const endCursor = editor.getCursor('end')
       const nextChar = editor.getRange(
-        { line: endCursor.line, ch: endCursor.ch },
-        { line: endCursor.line, ch: endCursor.ch + 1 }
+        {line: endCursor.line, ch: endCursor.ch},
+        {line: endCursor.line, ch: endCursor.ch + 1}
       )
       return prevChar === '](' && nextChar === ')'
     }
     if (dataTransferItem.type.match('image')) {
-      const {storageKey, noteKey} = this.props
       attachmentManagement.handlePastImageEvent(this, storageKey, noteKey, dataTransferItem)
     } else if (this.props.fetchUrlTitle && isURL(pastedTxt) && !isInLinkTag(editor)) {
       this.handlePasteUrl(e, editor, pastedTxt)
     }
+    if (attachmentManagement.isAttachmentLink(pastedTxt)) {
+      attachmentManagement.handleAttachmentLinkPaste(storageKey, noteKey, pastedTxt)
+        .then((modifiedText) => {
+          this.editor.replaceSelection(modifiedText)
+        })
+      e.preventDefault()
+    }
   }
 
   handleScroll (e) {
@@ -312,24 +413,58 @@ export default class CodeEditor extends React.Component {
     const taggedUrl = `<${pastedTxt}>`
     editor.replaceSelection(taggedUrl)
 
+    const isImageReponse = (response) => {
+      return response.headers.has('content-type') &&
+        response.headers.get('content-type').match(/^image\/.+$/)
+    }
+    const replaceTaggedUrl = (replacement) => {
+      const value = editor.getValue()
+      const cursor = editor.getCursor()
+      const newValue = value.replace(taggedUrl, replacement)
+      const newCursor = Object.assign({}, cursor, { ch: cursor.ch + newValue.length - value.length })
+      editor.setValue(newValue)
+      editor.setCursor(newCursor)
+    }
+
     fetch(pastedTxt, {
       method: 'get'
     }).then((response) => {
-      return this.decodeResponse(response)
-    }).then((response) => {
-      const parsedResponse = (new window.DOMParser()).parseFromString(response, 'text/html')
-      const value = editor.getValue()
-      const cursor = editor.getCursor()
-      const LinkWithTitle = `[${parsedResponse.title}](${pastedTxt})`
-      const newValue = value.replace(taggedUrl, LinkWithTitle)
-      editor.setValue(newValue)
-      editor.setCursor(cursor)
+      if (isImageReponse(response)) {
+        return this.mapImageResponse(response, pastedTxt)
+      } else {
+        return this.mapNormalResponse(response, pastedTxt)
+      }
+    }).then((replacement) => {
+      replaceTaggedUrl(replacement)
     }).catch((e) => {
-      const value = editor.getValue()
-      const newValue = value.replace(taggedUrl, pastedTxt)
-      const cursor = editor.getCursor()
-      editor.setValue(newValue)
-      editor.setCursor(cursor)
+      replaceTaggedUrl(pastedTxt)
+    })
+  }
+
+  mapNormalResponse (response, pastedTxt) {
+    return this.decodeResponse(response).then((body) => {
+      return new Promise((resolve, reject) => {
+        try {
+          const parsedBody = (new window.DOMParser()).parseFromString(body, 'text/html')
+          const linkWithTitle = `[${parsedBody.title}](${pastedTxt})`
+          resolve(linkWithTitle)
+        } catch (e) {
+          reject(e)
+        }
+      })
+    })
+  }
+
+  mapImageResponse (response, pastedTxt) {
+    return new Promise((resolve, reject) => {
+      try {
+        const url = response.url
+        const name = url.substring(url.lastIndexOf('/') + 1)
+        const imageLinkWithName = `![${name}](${pastedTxt})`
+        resolve(imageLinkWithName)
+      } catch (e) {
+        reject(e)
+      }
     })
   }
 
@@ -359,11 +494,9 @@ export default class CodeEditor extends React.Component {
   }
 
   render () {
-    const { className, fontSize } = this.props
-    let fontFamily = this.props.fontFamily
-    fontFamily = _.isString(fontFamily) && fontFamily.length > 0
-      ? [fontFamily].concat(defaultEditorFontFamily)
-      : defaultEditorFontFamily
+    const {className, fontSize} = this.props
+    const fontFamily = normalizeEditorFontFamily(this.props.fontFamily)
+    const width = this.props.width
     return (
       <div
         className={className == null
@@ -373,8 +506,9 @@ export default class CodeEditor extends React.Component {
         ref='root'
         tabIndex='-1'
         style={{
-          fontFamily: fontFamily.join(', '),
-          fontSize: fontSize
+          fontFamily,
+          fontSize: fontSize,
+          width: width
         }}
         onDrop={(e) => this.handleDropImage(e)}
       />

browser/components/MarkdownEditor.js

@@ -283,6 +283,8 @@ class MarkdownEditor extends React.Component {
           indentSize={editorIndentSize}
           scrollPastEnd={config.preview.scrollPastEnd}
           smartQuotes={config.preview.smartQuotes}
+          smartArrows={config.preview.smartArrows}
+          breaks={config.preview.breaks}
           sanitize={config.preview.sanitize}
           ref='preview'
           onContextMenu={(e) => this.handleContextMenu(e)}
@@ -295,6 +297,8 @@ class MarkdownEditor extends React.Component {
           showCopyNotification={config.ui.showCopyNotification}
           storagePath={storage.path}
           noteKey={noteKey}
+          customCSS={config.preview.customCSS}
+          allowCustomCSS={config.preview.allowCustomCSS}
         />
       </div>
     )

browser/components/MarkdownPreview.js

@@ -22,10 +22,12 @@ const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
 
 const { app } = remote
 const path = require('path')
+const fileUrl = require('file-url')
+
 const dialog = remote.dialog
 
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
-const appPath = 'file://' + (process.env.NODE_ENV === 'production'
+const appPath = fileUrl(process.env.NODE_ENV === 'production'
   ? app.getAppPath()
   : path.resolve())
 const CSS_FILES = [
@@ -33,7 +35,7 @@ const CSS_FILES = [
   `${appPath}/node_modules/codemirror/lib/codemirror.css`
 ]
 
-function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme) {
+function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme, allowCustomCSS, customCSS) {
   return `
 @font-face {
   font-family: 'Lato';
@@ -53,7 +55,19 @@ function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scro
   font-weight: 700;
   text-rendering: optimizeLegibility;
 }
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url('${appPath}/resources/fonts/MaterialIcons-Regular.woff2') format('woff2'),
+       url('${appPath}/resources/fonts/MaterialIcons-Regular.woff') format('woff'),
+       url('${appPath}/resources/fonts/MaterialIcons-Regular.ttf') format('truetype');
+}
+${allowCustomCSS ? customCSS : ''}
 ${markdownStyle}
+
 body {
   font-family: '${fontFamily.join("','")}';
   font-size: ${fontSize}px;
@@ -111,6 +125,9 @@ body p {
     color: #000;
     background-color: #fff;
   }
+  .clipboardButton {
+    display: none
+  }
 }
 `
 }
@@ -133,7 +150,6 @@ export default class MarkdownPreview extends React.Component {
     this.mouseUpHandler = (e) => this.handleMouseUp(e)
     this.DoubleClickHandler = (e) => this.handleDoubleClick(e)
     this.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {leading: false, trailing: true})
-    this.anchorClickHandler = (e) => this.handlePreviewAnchorClick(e)
     this.checkboxClickHandler = (e) => this.handleCheckboxClick(e)
     this.saveAsTextHandler = () => this.handleSaveAsText()
     this.saveAsMdHandler = () => this.handleSaveAsMd()
@@ -146,29 +162,14 @@ export default class MarkdownPreview extends React.Component {
   }
 
   initMarkdown () {
-    const { smartQuotes, sanitize } = this.props
+    const { smartQuotes, sanitize, breaks } = this.props
     this.markdown = new Markdown({
       typographer: smartQuotes,
-      sanitize
+      sanitize,
+      breaks
     })
   }
 
-  handlePreviewAnchorClick (e) {
-    e.preventDefault()
-    e.stopPropagation()
-
-    const anchor = e.target.closest('a')
-    const href = anchor.getAttribute('href')
-    if (_.isString(href) && href.match(/^#/)) {
-      const targetElement = this.refs.root.contentWindow.document.getElementById(href.substring(1, href.length))
-      if (targetElement != null) {
-        this.getWindow().scrollTo(0, targetElement.offsetTop)
-      }
-    } else {
-      shell.openExternal(href)
-    }
-  }
-
   handleCheckboxClick (e) {
     this.props.onCheckboxClick(e)
   }
@@ -216,9 +217,9 @@ export default class MarkdownPreview extends React.Component {
 
   handleSaveAsHtml () {
     this.exportAsDocument('html', (noteContent, exportTasks) => {
-      const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme} = this.getStyleParams()
+      const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS} = this.getStyleParams()
 
-      const inlineStyles = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme)
+      const inlineStyles = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme, allowCustomCSS, customCSS)
       let body = this.markdown.render(escapeHtmlCharacters(noteContent))
 
       const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
@@ -341,7 +342,10 @@ export default class MarkdownPreview extends React.Component {
 
   componentDidUpdate (prevProps) {
     if (prevProps.value !== this.props.value) this.rewriteIframe()
-    if (prevProps.smartQuotes !== this.props.smartQuotes || prevProps.sanitize !== this.props.sanitize) {
+    if (prevProps.smartQuotes !== this.props.smartQuotes ||
+        prevProps.sanitize !== this.props.sanitize ||
+        prevProps.smartArrows !== this.props.smartArrows ||
+        prevProps.breaks !== this.props.breaks) {
       this.initMarkdown()
       this.rewriteIframe()
     }
@@ -352,14 +356,16 @@ export default class MarkdownPreview extends React.Component {
       prevProps.lineNumber !== this.props.lineNumber ||
       prevProps.showCopyNotification !== this.props.showCopyNotification ||
       prevProps.theme !== this.props.theme ||
-      prevProps.scrollPastEnd !== this.props.scrollPastEnd) {
+      prevProps.scrollPastEnd !== this.props.scrollPastEnd ||
+      prevProps.allowCustomCSS !== this.props.allowCustomCSS ||
+      prevProps.customCSS !== this.props.customCSS) {
       this.applyStyle()
       this.rewriteIframe()
     }
   }
 
   getStyleParams () {
-    const { fontSize, lineNumber, codeBlockTheme, scrollPastEnd, theme } = this.props
+    const { fontSize, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS } = this.props
     let { fontFamily, codeBlockFontFamily } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
         ? fontFamily.split(',').map(fontName => fontName.trim()).concat(defaultFontFamily)
@@ -368,14 +374,14 @@ export default class MarkdownPreview extends React.Component {
         ? codeBlockFontFamily.split(',').map(fontName => fontName.trim()).concat(defaultCodeBlockFontFamily)
         : defaultCodeBlockFontFamily
 
-    return {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme}
+    return {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS}
   }
 
   applyStyle () {
-    const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme} = this.getStyleParams()
+    const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS} = this.getStyleParams()
 
     this.getWindow().document.getElementById('codeTheme').href = this.GetCodeThemeLink(codeBlockTheme)
-    this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme)
+    this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme, allowCustomCSS, customCSS)
   }
 
   GetCodeThemeLink (theme) {
@@ -388,9 +394,6 @@ export default class MarkdownPreview extends React.Component {
   }
 
   rewriteIframe () {
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
-      el.removeEventListener('click', this.anchorClickHandler)
-    })
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
       el.removeEventListener('click', this.checkboxClickHandler)
     })
@@ -399,7 +402,7 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', this.linkClickHandler)
     })
 
-    const { theme, indentSize, showCopyNotification, storagePath } = this.props
+    const { theme, indentSize, showCopyNotification, storagePath, noteKey } = this.props
     let { value, codeBlockTheme } = this.props
 
     this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
@@ -411,18 +414,15 @@ export default class MarkdownPreview extends React.Component {
       })
     }
     let renderedHTML = this.markdown.render(value)
+    attachmentManagement.migrateAttachments(renderedHTML, storagePath, noteKey)
     this.refs.root.contentWindow.document.body.innerHTML = attachmentManagement.fixLocalURLS(renderedHTML, storagePath)
 
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
-      this.fixDecodedURI(el)
-      el.addEventListener('click', this.anchorClickHandler)
-    })
-
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
       el.addEventListener('click', this.checkboxClickHandler)
     })
 
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      this.fixDecodedURI(el)
       el.addEventListener('click', this.linkClickHandler)
     })
 
@@ -473,7 +473,7 @@ export default class MarkdownPreview extends React.Component {
         el.innerHTML = ''
         diagram.drawSVG(el, opts)
         _.forEach(el.querySelectorAll('a'), (el) => {
-          el.addEventListener('click', this.anchorClickHandler)
+          el.addEventListener('click', this.linkClickHandler)
         })
       } catch (e) {
         console.error(e)
@@ -489,7 +489,7 @@ export default class MarkdownPreview extends React.Component {
         el.innerHTML = ''
         diagram.drawSVG(el, {theme: 'simple'})
         _.forEach(el.querySelectorAll('a'), (el) => {
-          el.addEventListener('click', this.anchorClickHandler)
+          el.addEventListener('click', this.linkClickHandler)
         })
       } catch (e) {
         console.error(e)
@@ -538,11 +538,6 @@ export default class MarkdownPreview extends React.Component {
     e.stopPropagation()
 
     const href = e.target.href
-    if (href.match(/^http/i)) {
-      shell.openExternal(href)
-      return
-    }
-
     const linkHash = href.split('/').pop()
 
     const regexNoteInternalLink = /main.html#(.+)/
@@ -574,6 +569,9 @@ export default class MarkdownPreview extends React.Component {
       eventEmitter.emit('list:jump', linkHash.split('-')[1])
       return
     }
+
+    // other case
+    shell.openExternal(href)
   }
 
   render () {
@@ -596,9 +594,12 @@ MarkdownPreview.propTypes = {
   onDoubleClick: PropTypes.func,
   onMouseUp: PropTypes.func,
   onMouseDown: PropTypes.func,
+  onContextMenu: PropTypes.func,
   className: PropTypes.string,
   value: PropTypes.string,
   showCopyNotification: PropTypes.bool,
   storagePath: PropTypes.string,
-  smartQuotes: PropTypes.bool
+  smartQuotes: PropTypes.bool,
+  smartArrows: PropTypes.bool,
+  breaks: PropTypes.bool
 }

browser/components/MarkdownSplitEditor.js

@@ -14,6 +14,10 @@ class MarkdownSplitEditor extends React.Component {
     this.focus = () => this.refs.code.focus()
     this.reload = () => this.refs.code.reload()
     this.userScroll = true
+    this.state = {
+      isSliderFocused: false,
+      codeEditorWidthInPercent: 50
+    }
   }
 
   handleOnChange () {
@@ -87,6 +91,42 @@ class MarkdownSplitEditor extends React.Component {
     }
   }
 
+  handleMouseMove (e) {
+    if (this.state.isSliderFocused) {
+      const rootRect = this.refs.root.getBoundingClientRect()
+      const rootWidth = rootRect.width
+      const offset = rootRect.left
+      let newCodeEditorWidthInPercent = (e.pageX - offset) / rootWidth * 100
+
+      // limit minSize to 10%, maxSize to 90%
+      if (newCodeEditorWidthInPercent <= 10) {
+        newCodeEditorWidthInPercent = 10
+      }
+
+      if (newCodeEditorWidthInPercent >= 90) {
+        newCodeEditorWidthInPercent = 90
+      }
+
+      this.setState({
+        codeEditorWidthInPercent: newCodeEditorWidthInPercent
+      })
+    }
+  }
+
+  handleMouseUp (e) {
+    e.preventDefault()
+    this.setState({
+      isSliderFocused: false
+    })
+  }
+
+  handleMouseDown (e) {
+    e.preventDefault()
+    this.setState({
+      isSliderFocused: true
+    })
+  }
+
   render () {
     const {config, value, storageKey, noteKey} = this.props
     const storage = findStorage(storageKey)
@@ -95,12 +135,16 @@ class MarkdownSplitEditor extends React.Component {
     let editorIndentSize = parseInt(config.editor.indentSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
     const previewStyle = {}
-    if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
+    previewStyle.width = (100 - this.state.codeEditorWidthInPercent) + '%'
+    if (this.props.ignorePreviewPointerEvents || this.state.isSliderFocused) previewStyle.pointerEvents = 'none'
     return (
-      <div styleName='root'>
+      <div styleName='root' ref='root'
+        onMouseMove={e => this.handleMouseMove(e)}
+        onMouseUp={e => this.handleMouseUp(e)}>
         <CodeEditor
           styleName='codeEditor'
           ref='code'
+          width={this.state.codeEditorWidthInPercent + '%'}
           mode='GitHub Flavored Markdown'
           value={value}
           theme={config.editor.theme}
@@ -119,6 +163,9 @@ class MarkdownSplitEditor extends React.Component {
           onChange={this.handleOnChange.bind(this)}
           onScroll={this.handleScroll.bind(this)}
        />
+        <div styleName='slider' style={{left: this.state.codeEditorWidthInPercent + '%'}} onMouseDown={e => this.handleMouseDown(e)} >
+          <div styleName='slider-hitbox' />
+        </div>
         <MarkdownPreview
           style={previewStyle}
           styleName='preview'
@@ -131,6 +178,8 @@ class MarkdownSplitEditor extends React.Component {
           lineNumber={config.preview.lineNumber}
           scrollPastEnd={config.preview.scrollPastEnd}
           smartQuotes={config.preview.smartQuotes}
+          smartArrows={config.preview.smartArrows}
+          breaks={config.preview.breaks}
           sanitize={config.preview.sanitize}
           ref='preview'
           tabInde='0'
@@ -140,6 +189,8 @@ class MarkdownSplitEditor extends React.Component {
           showCopyNotification={config.ui.showCopyNotification}
           storagePath={storage.path}
           noteKey={noteKey}
+          customCSS={config.preview.customCSS}
+          allowCustomCSS={config.preview.allowCustomCSS}
        />
       </div>
     )

browser/components/MarkdownSplitEditor.styl

@@ -3,7 +3,14 @@
   height 100%
   font-size 30px
   display flex
-  .codeEditor
-    width 50%
-  .preview
-    width 50%
+  .slider
+    absolute top bottom
+    top -2px
+    width 0
+    z-index 0
+  .slider-hitbox
+    absolute top bottom left right
+    width 7px
+    left -3px
+    z-index 10
+    cursor col-resize

browser/components/NoteItemSimple.styl

@@ -134,6 +134,7 @@ body[data-theme="dark"]
     .item-simple-wrapper
       border-color transparent
     .item-simple-title
+    .item-simple-title-empty
     .item-simple-title-icon
     .item-simple-bottom-time
       color $ui-dark-text-color

browser/components/SideNavFilter.styl

@@ -18,7 +18,7 @@
 .iconWrap
   width 20px
   text-align center
-  
+
 .counters
   float right
   color $ui-inactive-text-color
@@ -68,10 +68,9 @@
   .menu-button-label
     position fixed
     display inline-block
-    height 32px
+    height 36px
     left 44px
     padding 0 10px
-    margin-top -8px
     margin-left 0
     overflow ellipsis
     z-index 10

browser/components/StorageItem.styl

@@ -58,8 +58,8 @@
   opacity 0
   border-top-right-radius 2px
   border-bottom-right-radius 2px
-  height 26px
-  line-height 26px
+  height 34px
+  line-height 32px
 
 .folderList-item:hover, .folderList-item--active:hover
   .folderList-item-tooltip

browser/components/markdown.styl

@@ -293,6 +293,84 @@ kbd
   line-height 1
   padding 3px 5px
 
+$admonition
+    box-shadow 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)
+    position relative
+    margin 1.5625em 0
+    padding 0 1.2rem
+    border-left .4rem solid #448aff
+    border-radius .2rem
+    overflow auto
+
+html .admonition>:last-child
+    margin-bottom 1.2rem
+
+.admonition .admonition
+    margin 1em 0
+
+.admonition p
+    margin-top: 0.5em
+
+$admonition-icon
+    position absolute
+    left 1.2rem
+    font-family: "Material Icons"
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+
+$admonition-title
+    margin 0 -1.2rem
+    padding .8rem 1.2rem .8rem 4rem
+    border-bottom .1rem solid rgba(68,138,255,.1)
+    background-color rgba(68,138,255,.1)
+    font-weight 700
+
+.admonition>.admonition-title:last-child
+    margin-bottom 0
+
+admonition_types = {
+    note: {color: #0288D1, icon: "note"},
+    hint: {color: #009688, icon: "info_outline"},
+    danger: {color: #c2185b, icon: "block"},
+    caution: {color: #ffa726, icon: "warning"},
+    error: {color: #d32f2f, icon: "error_outline"},
+    attention: {color: #455a64, icon: "priority_high"}
+}
+
+for name, val in admonition_types
+    .admonition.{name}
+        @extend $admonition
+        border-left-color: val[color]
+    
+    .admonition.{name}>.admonition-title
+        @extend $admonition-title
+        border-bottom-color: .1rem solid rgba(val[color], 0.2)
+        background-color: rgba(val[color], 0.2)
+
+    .admonition.{name}>.admonition-title:before
+        @extend $admonition-icon
+        color: val[color]
+        content: val[icon]
+
 themeDarkBackground = darken(#21252B, 10%)
 themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
@@ -396,4 +474,6 @@ body[data-theme="monokai"]
       td
         border-color themeMonokaiTableBorder
         &:last-child
-          border-right solid 1px themeMonokaiTableBorder
+          border-right solid 1px themeMonokaiTableBorder
+  kbd
+    background-color themeDarkBackground

browser/lib/Languages.js

@@ -58,6 +58,9 @@ const languages = [
   {
     name: 'Spanish',
     locale: 'es-ES'
+  }, {
+    name: 'Turkish',
+    locale: 'tr'
   }
 ]
 

browser/lib/consts.js

@@ -12,6 +12,10 @@ const themes = fs.readdirSync(themePath)
   })
 themes.splice(themes.indexOf('solarized'), 1, 'solarized dark', 'solarized light')
 
+const snippetFile = process.env.NODE_ENV !== 'test'
+  ? path.join(app.getPath('userData'), 'snippets.json')
+  : '' // return nothing as we specified different path to snippets.json in test
+
 const consts = {
   FOLDER_COLORS: [
     '#E10051',
@@ -31,7 +35,16 @@ const consts = {
     'Dodger Blue',
     'Violet Eggplant'
   ],
-  THEMES: ['default'].concat(themes)
+  THEMES: ['default'].concat(themes),
+  SNIPPET_FILE: snippetFile,
+  DEFAULT_EDITOR_FONT_FAMILY: [
+    'Monaco',
+    'Menlo',
+    'Ubuntu Mono',
+    'Consolas',
+    'source-code-pro',
+    'monospace'
+  ]
 }
 
 module.exports = consts

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 smartArrows from 'markdown-it-smartarrows'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import katex from 'katex'
@@ -25,7 +26,7 @@ class Markdown {
       linkify: true,
       html: true,
       xhtmlOut: true,
-      breaks: true,
+      breaks: config.preview.breaks,
       highlight: function (str, lang) {
         const delimiter = ':'
         const langInfo = lang.split(delimiter)
@@ -141,6 +142,7 @@ class Markdown {
       }
     })
     this.md.use(require('markdown-it-kbd'))
+    this.md.use(require('markdown-it-admonition'))
 
     const deflate = require('markdown-it-plantuml/lib/deflate')
     this.md.use(require('markdown-it-plantuml'), '', {
@@ -213,6 +215,10 @@ class Markdown {
       return true
     })
 
+    if (config.preview.smartArrows) {
+      this.md.use(smartArrows)
+    }
+
     // Add line number attribute for scrolling
     const originalRender = this.md.renderer.render
     this.md.renderer.render = (tokens, options, env) => {

browser/lib/normalizeEditorFontFamily.js

@@ -0,0 +1,9 @@
+import consts from 'browser/lib/consts'
+import isString from 'lodash/isString'
+
+export default function normalizeEditorFontFamily (fontFamily) {
+  const defaultEditorFontFamily = consts.DEFAULT_EDITOR_FONT_FAMILY
+  return isString(fontFamily) && fontFamily.length > 0
+    ? [fontFamily].concat(defaultEditorFontFamily).join(', ')
+    : defaultEditorFontFamily.join(', ')
+}

browser/lib/utils.js

@@ -47,7 +47,25 @@ function escapeHtmlCharacters (html) {
   return html
 }
 
+export function isObjectEqual (a, b) {
+  const aProps = Object.getOwnPropertyNames(a)
+  const bProps = Object.getOwnPropertyNames(b)
+
+  if (aProps.length !== bProps.length) {
+    return false
+  }
+
+  for (var i = 0; i < aProps.length; i++) {
+    const propName = aProps[i]
+    if (a[propName] !== b[propName]) {
+      return false
+    }
+  }
+  return true
+}
+
 export default {
   lastFindInArray,
-  escapeHtmlCharacters
+  escapeHtmlCharacters,
+  isObjectEqual
 }

browser/main/Detail/InfoPanel.styl

@@ -11,6 +11,7 @@
 .control-infoButton-panel
   z-index 200
   margin-top 0px
+  top: 50px
   right 25px
   position absolute
   padding 20px 25px 0 25px

browser/main/Detail/MarkdownNoteDetail.js

@@ -55,6 +55,10 @@ class MarkdownNoteDetail extends React.Component {
 
   componentDidMount () {
     ee.on('topbar:togglelockbutton', this.toggleLockButton)
+    ee.on('topbar:togglemodebutton', () => {
+      const reversedType = this.state.editorType === 'SPLIT' ? 'EDITOR_PREVIEW' : 'SPLIT'
+      this.handleSwitchMode(reversedType)
+    })
   }
 
   componentWillReceiveProps (nextProps) {
@@ -273,6 +277,7 @@ class MarkdownNoteDetail extends React.Component {
 
   handleSwitchMode (type) {
     this.setState({ editorType: type }, () => {
+      this.focus()
       const newConfig = Object.assign({}, this.props.config)
       newConfig.editor.type = type
       ConfigManager.set(newConfig)

browser/main/Detail/SnippetNoteDetail.js

@@ -32,7 +32,7 @@ import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
 
 const electron = require('electron')
 const { remote } = electron
-const { Menu, MenuItem, dialog } = remote
+const { dialog } = remote
 
 class SnippetNoteDetail extends React.Component {
   constructor (props) {
@@ -451,14 +451,14 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleModeButtonClick (e, index) {
-    const menu = new Menu()
+    const templetes = []
     CodeMirror.modeInfo.sort(function (a, b) { return a.name.localeCompare(b.name) }).forEach((mode) => {
-      menu.append(new MenuItem({
+      templetes.push({
         label: mode.name,
         click: (e) => this.handleModeOptionClick(index, mode.name)(e)
-      }))
+      })
     })
-    menu.popup(remote.getCurrentWindow())
+    context.popup(templetes)
   }
 
   handleIndentTypeButtonClick (e) {

browser/main/Detail/TagSelect.js

@@ -44,16 +44,9 @@ class TagSelect extends React.Component {
   }
 
   removeLastTag () {
-    let { value } = this.props
-
-    value = _.isArray(value)
-      ? value.slice()
-      : []
-    value.pop()
-    value = _.uniq(value)
-
-    this.value = value
-    this.props.onChange()
+    this.removeTagByCallback((value) => {
+      value.pop()
+    })
   }
 
   reset () {
@@ -96,15 +89,22 @@ class TagSelect extends React.Component {
   }
 
   handleTagRemoveButtonClick (tag) {
-    return (e) => {
-      let { value } = this.props
-
+    this.removeTagByCallback((value, tag) => {
       value.splice(value.indexOf(tag), 1)
-      value = _.uniq(value)
+    }, tag)
+  }
 
-      this.value = value
-      this.props.onChange()
-    }
+  removeTagByCallback (callback, tag = null) {
+    let { value } = this.props
+
+    value = _.isArray(value)
+      ? value.slice()
+      : []
+    callback(value, tag)
+    value = _.uniq(value)
+
+    this.value = value
+    this.props.onChange()
   }
 
   render () {
@@ -118,7 +118,7 @@ class TagSelect extends React.Component {
           >
             <span styleName='tag-label'>#{tag}</span>
             <button styleName='tag-removeButton'
-              onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
+              onClick={(e) => this.handleTagRemoveButtonClick(tag)}
             >
               <img className='tag-removeButton-icon' src='../resources/icon/icon-x.svg' width='8px' />
             </button>

browser/main/Detail/index.js

@@ -8,6 +8,7 @@ import SnippetNoteDetail from './SnippetNoteDetail'
 import ee from 'browser/main/lib/eventEmitter'
 import StatusBar from '../StatusBar'
 import i18n from 'browser/lib/i18n'
+import debounceRender from 'react-debounce-render'
 
 const OSX = global.process.platform === 'darwin'
 
@@ -99,4 +100,4 @@ Detail.propTypes = {
   ignorePreviewPointerEvents: PropTypes.bool
 }
 
-export default CSSModules(Detail, styles)
+export default debounceRender(CSSModules(Detail, styles))

browser/main/Main.js

@@ -16,6 +16,7 @@ import { hashHistory } from 'react-router'
 import store from 'browser/main/store'
 import i18n from 'browser/lib/i18n'
 import { getLocales } from 'browser/lib/Languages'
+import applyShortcuts from 'browser/main/lib/shortcutManager'
 const path = require('path')
 const electron = require('electron')
 const { remote } = electron
@@ -159,7 +160,7 @@ class Main extends React.Component {
     } else {
       i18n.setLocale('en')
     }
-
+    applyShortcuts()
     // Reload all data
     dataApi.init()
       .then((data) => {

browser/main/NoteList/index.js

@@ -2,11 +2,13 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
+import debounceRender from 'react-debounce-render'
 import styles from './NoteList.styl'
 import moment from 'moment'
 import _ from 'lodash'
 import ee from 'browser/main/lib/eventEmitter'
 import dataApi from 'browser/main/lib/dataApi'
+import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import NoteItem from 'browser/components/NoteItem'
 import NoteItemSimple from 'browser/components/NoteItemSimple'
@@ -19,9 +21,10 @@ import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import Markdown from '../../lib/markdown'
 import i18n from 'browser/lib/i18n'
 import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
+import context from 'browser/lib/context'
 
 const { remote } = require('electron')
-const { Menu, MenuItem, dialog } = remote
+const { dialog } = remote
 const WP_POST_PATH = '/wp/v2/posts'
 
 function sortByCreatedAt (a, b) {
@@ -489,55 +492,51 @@ class NoteList extends React.Component {
     const updateLabel = i18n.__('Update Blog')
     const openBlogLabel = i18n.__('Open Blog')
 
-    const menu = new Menu()
+    const templates = []
 
     if (location.pathname.match(/\/trash/)) {
-      menu.append(new MenuItem({
+      templates.push({
         label: restoreNote,
         click: this.restoreNote
-      }))
-      menu.append(new MenuItem({
+      }, {
         label: deleteLabel,
         click: this.deleteNote
-      }))
+      })
     } else {
       if (!location.pathname.match(/\/starred/)) {
-        menu.append(new MenuItem({
+        templates.push({
           label: pinLabel,
           click: this.pinToTop
-        }))
+        })
       }
-      menu.append(new MenuItem({
+      templates.push({
         label: deleteLabel,
         click: this.deleteNote
-      }))
-      menu.append(new MenuItem({
+      }, {
         label: cloneNote,
         click: this.cloneNote.bind(this)
-      }))
-      menu.append(new MenuItem({
+      }, {
         label: copyNoteLink,
         click: this.copyNoteLink(note)
-      }))
+      })
       if (note.type === 'MARKDOWN_NOTE') {
         if (note.blog && note.blog.blogLink && note.blog.blogId) {
-          menu.append(new MenuItem({
+          templates.push({
             label: updateLabel,
             click: this.publishMarkdown.bind(this)
-          }))
-          menu.append(new MenuItem({
+          }, {
             label: openBlogLabel,
             click: () => this.openBlog.bind(this)(note)
-          }))
+          })
         } else {
-          menu.append(new MenuItem({
+          templates.push({
             label: publishLabel,
             click: this.publishMarkdown.bind(this)
-          }))
+          })
         }
       }
     }
-    menu.popup()
+    context.popup(templates)
   }
 
   updateSelectedNotes (updateFunc, cleanSelection = true) {
@@ -662,6 +661,10 @@ class NoteList extends React.Component {
         title: firstNote.title + ' ' + i18n.__('copy'),
         content: firstNote.content
       })
+      .then((note) => {
+        attachmentManagement.cloneAttachments(firstNote, note)
+        return note
+      })
       .then((note) => {
         dispatch({
           type: 'UPDATE_NOTE',
@@ -943,15 +946,24 @@ class NoteList extends React.Component {
 
     const viewType = this.getViewType()
 
+    const autoSelectFirst =
+      notes.length === 1 ||
+      selectedNoteKeys.length === 0 ||
+      notes.every(note => !selectedNoteKeys.includes(note.key))
+
     const noteList = notes
-      .map(note => {
+      .map((note, index) => {
         if (note == null) {
           return null
         }
 
         const isDefault = config.listStyle === 'DEFAULT'
         const uniqueKey = getNoteKey(note)
-        const isActive = selectedNoteKeys.includes(uniqueKey)
+
+        const isActive =
+          selectedNoteKeys.includes(uniqueKey) ||
+          notes.length === 1 ||
+          (autoSelectFirst && index === 0)
         const dateDisplay = moment(
           config.sortBy === 'CREATED_AT'
             ? note.createdAt : note.updatedAt
@@ -1053,4 +1065,4 @@ NoteList.propTypes = {
   })
 }
 
-export default CSSModules(NoteList, styles)
+export default debounceRender(CSSModules(NoteList, styles))

browser/main/SideNav/PreferenceButton.styl

@@ -48,4 +48,5 @@ body[data-theme="dark"]
   line-height normal
   border-radius 2px
   opacity 0
-  transition 0.1s
+  transition 0.1s
+  white-space nowrap

browser/main/SideNav/StorageItem.js

@@ -11,21 +11,26 @@ import StorageItemChild from 'browser/components/StorageItem'
 import _ from 'lodash'
 import { SortableElement } from 'react-sortable-hoc'
 import i18n from 'browser/lib/i18n'
+import context from 'browser/lib/context'
 
 const { remote } = require('electron')
-const { Menu, dialog } = remote
+const { dialog } = remote
+const escapeStringRegexp = require('escape-string-regexp')
+const path = require('path')
 
 class StorageItem extends React.Component {
   constructor (props) {
     super(props)
 
+    const { storage } = this.props
+
     this.state = {
-      isOpen: true
+      isOpen: !!storage.isOpen
     }
   }
 
   handleHeaderContextMenu (e) {
-    const menu = Menu.buildFromTemplate([
+    context.popup([
       {
         label: i18n.__('Add Folder'),
         click: (e) => this.handleAddFolderButtonClick(e)
@@ -38,8 +43,6 @@ class StorageItem extends React.Component {
         click: (e) => this.handleUnlinkStorageClick(e)
       }
     ])
-
-    menu.popup()
   }
 
   handleUnlinkStorageClick (e) {
@@ -66,8 +69,18 @@ class StorageItem extends React.Component {
   }
 
   handleToggleButtonClick (e) {
+    const { storage, dispatch } = this.props
+    const isOpen = !this.state.isOpen
+    dataApi.toggleStorage(storage.key, isOpen)
+      .then((storage) => {
+        dispatch({
+          type: 'EXPAND_STORAGE',
+          storage,
+          isOpen
+        })
+      })
     this.setState({
-      isOpen: !this.state.isOpen
+      isOpen: isOpen
     })
   }
 
@@ -92,7 +105,7 @@ class StorageItem extends React.Component {
   }
 
   handleFolderButtonContextMenu (e, folder) {
-    const menu = Menu.buildFromTemplate([
+    context.popup([
       {
         label: i18n.__('Rename Folder'),
         click: (e) => this.handleRenameFolderClick(e, folder)
@@ -121,8 +134,6 @@ class StorageItem extends React.Component {
         click: (e) => this.handleFolderDeleteClick(e, folder)
       }
     ])
-
-    menu.popup()
   }
 
   handleRenameFolderClick (e, folder) {
@@ -201,7 +212,7 @@ class StorageItem extends React.Component {
       createdNoteData.forEach((newNote) => {
         dispatch({
           type: 'MOVE_NOTE',
-          originNote: noteData.find((note) => note.content === newNote.content),
+          originNote: noteData.find((note) => note.content === newNote.oldContent),
           note: newNote
         })
       })
@@ -223,7 +234,8 @@ class StorageItem extends React.Component {
     const { folderNoteMap, trashedSet } = data
     const SortableStorageItemChild = SortableElement(StorageItemChild)
     const folderList = storage.folders.map((folder, index) => {
-      const isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
+      let folderRegex = new RegExp(escapeStringRegexp(path.sep) + 'storages' + escapeStringRegexp(path.sep) + storage.key + escapeStringRegexp(path.sep) + 'folders' + escapeStringRegexp(path.sep) + folder.key)
+      const isActive = !!(location.pathname.match(folderRegex))
       const noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
 
       let noteCount = 0
@@ -253,7 +265,7 @@ class StorageItem extends React.Component {
       )
     })
 
-    const isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '$'))
+    const isActive = location.pathname.match(new RegExp(escapeStringRegexp(path.sep) + 'storages' + escapeStringRegexp(path.sep) + storage.key + '$'))
 
     return (
       <div styleName={isFolded ? 'root--folded' : 'root'}

browser/main/SideNav/StorageItem.styl

@@ -44,7 +44,7 @@
   height 36px
   padding-left 25px
   padding-right 15px
-  line-height 22px
+  line-height 36px
   cursor pointer
   font-size 14px
   border none
@@ -147,7 +147,7 @@ body[data-theme="dark"]
       background-color $ui-dark-button--active-backgroundColor
       &:active
         color $ui-dark-text-color
-        background-color $ui-dark-button--active-backgroundColor  
+        background-color $ui-dark-button--active-backgroundColor
 
   .header--active
     .header-addFolderButton
@@ -180,7 +180,7 @@ body[data-theme="dark"]
     &:active, &:active:hover
       color $ui-dark-text-color
       background-color $ui-dark-button--active-backgroundColor
-      
+
 
 
 

browser/main/SideNav/SwitchButton.styl

@@ -29,6 +29,7 @@
   border-radius 2px
   opacity 0
   transition 0.1s
+  white-space nowrap
 
 body[data-theme="white"]
   .non-active-button

browser/main/SideNav/index.js

@@ -1,8 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
-const { remote } = require('electron')
-const { Menu } = remote
 import dataApi from 'browser/main/lib/dataApi'
 import styles from './SideNav.styl'
 import { openModal } from 'browser/main/lib/modal'
@@ -19,6 +17,7 @@ import ListButton from './ListButton'
 import TagButton from './TagButton'
 import {SortableContainer} from 'react-sortable-hoc'
 import i18n from 'browser/lib/i18n'
+import context from 'browser/lib/context'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
@@ -185,7 +184,7 @@ class SideNav extends React.Component {
     ).filter(
       note => activeTags.every(tag => note.tags.includes(tag))
     )
-    let relatedTags = new Set()
+    const relatedTags = new Set()
     relatedNotes.forEach(note => note.tags.map(tag => relatedTags.add(tag)))
     return relatedTags
   }
@@ -224,7 +223,7 @@ class SideNav extends React.Component {
   handleClickNarrowToTag (tag) {
     const { router } = this.context
     const { location } = this.props
-    let listOfTags = this.getActiveTags(location.pathname)
+    const listOfTags = this.getActiveTags(location.pathname)
     const indexOfTag = listOfTags.indexOf(tag)
     if (indexOfTag > -1) {
       listOfTags.splice(indexOfTag, 1)
@@ -254,10 +253,9 @@ class SideNav extends React.Component {
   handleFilterButtonContextMenu (event) {
     const { data } = this.props
     const trashedNotes = data.trashedSet.toJS().map((uniqueKey) => data.noteMap.get(uniqueKey))
-    const menu = Menu.buildFromTemplate([
+    context.popup([
       { label: i18n.__('Empty Trash'), click: () => this.emptyTrash(trashedNotes) }
     ])
-    menu.popup()
   }
 
   render () {

browser/main/StatusBar/index.js

@@ -4,10 +4,11 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
 import i18n from 'browser/lib/i18n'
+import context from 'browser/lib/context'
 
 const electron = require('electron')
 const { remote, ipcRenderer } = electron
-const { Menu, MenuItem, dialog } = remote
+const { dialog } = remote
 
 const zoomOptions = [0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2.0]
 
@@ -26,16 +27,16 @@ class StatusBar extends React.Component {
   }
 
   handleZoomButtonClick (e) {
-    const menu = new Menu()
+    const templates = []
 
     zoomOptions.forEach((zoom) => {
-      menu.append(new MenuItem({
+      templates.push({
         label: Math.floor(zoom * 100) + '%',
         click: () => this.handleZoomMenuItemClick(zoom)
-      }))
+      })
     })
 
-    menu.popup(remote.getCurrentWindow())
+    context.popup(templates)
   }
 
   handleZoomMenuItemClick (zoomFactor) {

browser/main/lib/ConfigManager.js

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import RcParser from 'browser/lib/RcParser'
 import i18n from 'browser/lib/i18n'
+import ee from 'browser/main/lib/eventEmitter'
 
 const OSX = global.process.platform === 'darwin'
 const win = global.process.platform === 'win32'
@@ -20,7 +21,8 @@ export const DEFAULT_CONFIG = {
   listStyle: 'DEFAULT', // 'DEFAULT', 'SMALL'
   amaEnabled: true,
   hotkey: {
-    toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E'
+    toggleMain: OSX ? 'Command + Alt + L' : 'Super + Alt + E',
+    toggleMode: OSX ? 'Command + M' : 'Ctrl + M'
   },
   ui: {
     language: 'en',
@@ -56,6 +58,10 @@ export const DEFAULT_CONFIG = {
     plantUMLServerAddress: 'http://www.plantuml.com/plantuml',
     scrollPastEnd: false,
     smartQuotes: true,
+    breaks: true,
+    smartArrows: false,
+    allowCustomCSS: false,
+    customCSS: '',
     sanitize: 'STRICT' // 'STRICT', 'ALLOW_STYLES', 'NONE'
   },
   blog: {
@@ -166,6 +172,7 @@ function set (updates) {
   ipcRenderer.send('config-renew', {
     config: get()
   })
+  ee.emit('config-renew')
 }
 
 function assignConfigValues (originalConfig, rcConfig) {
@@ -175,6 +182,17 @@ function assignConfigValues (originalConfig, rcConfig) {
   config.ui = Object.assign({}, DEFAULT_CONFIG.ui, originalConfig.ui, rcConfig.ui)
   config.editor = Object.assign({}, DEFAULT_CONFIG.editor, originalConfig.editor, rcConfig.editor)
   config.preview = Object.assign({}, DEFAULT_CONFIG.preview, originalConfig.preview, rcConfig.preview)
+
+  rewriteHotkey(config)
+
+  return config
+}
+
+function rewriteHotkey (config) {
+  const keys = [...Object.keys(config.hotkey)]
+  keys.forEach(key => {
+    config.hotkey[key] = config.hotkey[key].replace(/Cmd/g, 'Command')
+  })
   return config
 }
 

browser/main/lib/dataApi/addStorage.js

@@ -37,7 +37,8 @@ function addStorage (input) {
     key,
     name: input.name,
     type: input.type,
-    path: input.path
+    path: input.path,
+    isOpen: false
   }
 
   return Promise.resolve(newStorage)
@@ -48,7 +49,8 @@ function addStorage (input) {
         key: newStorage.key,
         type: newStorage.type,
         name: newStorage.name,
-        path: newStorage.path
+        path: newStorage.path,
+        isOpen: false
       })
 
       localStorage.setItem('storages', JSON.stringify(rawStorages))

browser/main/lib/dataApi/attachmentManagement.js

@@ -3,7 +3,10 @@ const fs = require('fs')
 const path = require('path')
 const findStorage = require('browser/lib/findStorage')
 const mdurl = require('mdurl')
+const fse = require('fs-extra')
 const escapeStringRegexp = require('escape-string-regexp')
+const sander = require('sander')
+import i18n from 'browser/lib/i18n'
 
 const STORAGE_FOLDER_PLACEHOLDER = ':storage'
 const DESTINATION_FOLDER = 'attachments'
@@ -40,7 +43,7 @@ function copyAttachment (sourceFilePath, storageKey, noteKey, useRandomName = tr
 
       const targetStorage = findStorage.findStorage(storageKey)
 
-      const inputFile = fs.createReadStream(sourceFilePath)
+      const inputFileStream = fs.createReadStream(sourceFilePath)
       let destinationName
       if (useRandomName) {
         destinationName = `${uniqueSlug()}${path.extname(sourceFilePath)}`
@@ -50,8 +53,10 @@ function copyAttachment (sourceFilePath, storageKey, noteKey, useRandomName = tr
       const destinationDir = path.join(targetStorage.path, DESTINATION_FOLDER, noteKey)
       createAttachmentDestinationFolder(targetStorage.path, noteKey)
       const outputFile = fs.createWriteStream(path.join(destinationDir, destinationName))
-      inputFile.pipe(outputFile)
-      resolve(destinationName)
+      inputFileStream.pipe(outputFile)
+      inputFileStream.on('end', () => {
+        resolve(destinationName)
+      })
     } catch (e) {
       return reject(e)
     }
@@ -69,6 +74,31 @@ function createAttachmentDestinationFolder (destinationStoragePath, noteKey) {
   }
 }
 
+/**
+ * @description Moves attachments from the old location ('/images') to the new one ('/attachments/noteKey)
+ * @param renderedHTML HTML of the current note
+ * @param storagePath Storage path of the current note
+ * @param noteKey Key of the current note
+ */
+function migrateAttachments (renderedHTML, storagePath, noteKey) {
+  if (sander.existsSync(path.join(storagePath, 'images'))) {
+    const attachments = getAttachmentsInContent(renderedHTML) || []
+    if (attachments !== []) {
+      createAttachmentDestinationFolder(storagePath, noteKey)
+    }
+    for (const attachment of attachments) {
+      const attachmentBaseName = path.basename(attachment)
+      const possibleLegacyPath = path.join(storagePath, 'images', attachmentBaseName)
+      if (sander.existsSync(possibleLegacyPath)) {
+        const destinationPath = path.join(storagePath, DESTINATION_FOLDER, attachmentBaseName)
+        if (!sander.existsSync(destinationPath)) {
+          sander.copyFileSync(possibleLegacyPath).to(destinationPath)
+        }
+      }
+    }
+  }
+}
+
 /**
  * @description Fixes the URLs embedded in the generated HTML so that they again refer actual local files.
  * @param {String} renderedHTML HTML in that the links should be fixed
@@ -76,7 +106,7 @@ function createAttachmentDestinationFolder (destinationStoragePath, noteKey) {
  * @returns {String} postprocessed HTML in which all :storage references are mapped to the actual paths.
  */
 function fixLocalURLS (renderedHTML, storagePath) {
-  return renderedHTML.replace(new RegExp(mdurl.encode(path.sep), 'g'), path.sep).replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER, 'g'), 'file:///' + path.join(storagePath, DESTINATION_FOLDER))
+  return renderedHTML.replace(new RegExp(mdurl.encode(path.sep), 'g'), path.sep).replace(new RegExp('/?' + STORAGE_FOLDER_PLACEHOLDER, 'g'), 'file:///' + path.join(storagePath, DESTINATION_FOLDER))
 }
 
 /**
@@ -147,8 +177,9 @@ function handlePastImageEvent (codeEditor, storageKey, noteKey, dataTransferItem
     base64data = reader.result.replace(/^data:image\/png;base64,/, '')
     base64data += base64data.replace('+', ' ')
     const binaryData = new Buffer(base64data, 'base64').toString('binary')
-    fs.writeFile(imagePath, binaryData, 'binary')
-    const imageMd = generateAttachmentMarkdown(imageName, imagePath, true)
+    fs.writeFileSync(imagePath, binaryData, 'binary')
+    const imageReferencePath = path.join(STORAGE_FOLDER_PLACEHOLDER, noteKey, imageName)
+    const imageMd = generateAttachmentMarkdown(imageName, imageReferencePath, true)
     codeEditor.insertAttachmentMd(imageMd)
   }
   reader.readAsDataURL(blob)
@@ -161,7 +192,7 @@ function handlePastImageEvent (codeEditor, storageKey, noteKey, dataTransferItem
  */
 function getAttachmentsInContent (markdownContent) {
   const preparedInput = markdownContent.replace(new RegExp(mdurl.encode(path.sep), 'g'), path.sep)
-  const regexp = new RegExp(STORAGE_FOLDER_PLACEHOLDER + escapeStringRegexp(path.sep) + '([a-zA-Z0-9]|-)+' + escapeStringRegexp(path.sep) + '[a-zA-Z0-9]+(\\.[a-zA-Z0-9]+)?', 'g')
+  const regexp = new RegExp('/?' + STORAGE_FOLDER_PLACEHOLDER + '(' + escapeStringRegexp(path.sep) + '|/)' + '?([a-zA-Z0-9]|-)*' + '(' + escapeStringRegexp(path.sep) + '|/)' + '([a-zA-Z0-9]|\\.)+(\\.[a-zA-Z0-9]+)?', 'g')
   return preparedInput.match(regexp)
 }
 
@@ -180,6 +211,39 @@ function getAbsolutePathsOfAttachmentsInContent (markdownContent, storagePath) {
   return result
 }
 
+/**
+ * @description Moves the attachments of the current note to the new location.
+ * Returns a modified version of the given content so that the links to the attachments point to the new note key.
+ * @param {String} oldPath Source of the note to be moved
+ * @param {String} newPath Destination of the note to be moved
+ * @param {String} noteKey Old note key
+ * @param {String} newNoteKey New note key
+ * @param {String} noteContent Content of the note to be moved
+ * @returns {String} Modified version of noteContent in which the paths of the attachments are fixed
+ */
+function moveAttachments (oldPath, newPath, noteKey, newNoteKey, noteContent) {
+  const src = path.join(oldPath, DESTINATION_FOLDER, noteKey)
+  const dest = path.join(newPath, DESTINATION_FOLDER, newNoteKey)
+  if (fse.existsSync(src)) {
+    fse.moveSync(src, dest)
+  }
+  return replaceNoteKeyWithNewNoteKey(noteContent, noteKey, newNoteKey)
+}
+
+/**
+ * Modifies the given content so that in all attachment references the oldNoteKey is replaced by the new one
+ * @param noteContent content that should be modified
+ * @param oldNoteKey note key to be replaced
+ * @param newNoteKey note key serving as a replacement
+ * @returns {String} modified note content
+ */
+function replaceNoteKeyWithNewNoteKey (noteContent, oldNoteKey, newNoteKey) {
+  if (noteContent) {
+    return noteContent.replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + escapeStringRegexp(path.sep) + oldNoteKey, 'g'), path.join(STORAGE_FOLDER_PLACEHOLDER, newNoteKey))
+  }
+  return noteContent
+}
+
 /**
  * @description Deletes all :storage and noteKey references from the given input.
  * @param input Input in which the references should be deleted
@@ -187,7 +251,18 @@ function getAbsolutePathsOfAttachmentsInContent (markdownContent, storagePath) {
  * @returns {String} Input without the references
  */
 function removeStorageAndNoteReferences (input, noteKey) {
-  return input.replace(new RegExp(mdurl.encode(path.sep), 'g'), path.sep).replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + escapeStringRegexp(path.sep) + noteKey, 'g'), DESTINATION_FOLDER)
+  return input.replace(new RegExp(mdurl.encode(path.sep), 'g'), path.sep).replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + '(' + escapeStringRegexp(path.sep) + noteKey + ')?', 'g'), DESTINATION_FOLDER)
+}
+
+/**
+ * @description Deletes the attachment folder specified by the given storageKey and noteKey
+ * @param storageKey Key of the storage of the note to be deleted
+ * @param noteKey Key of the note to be deleted
+ */
+function deleteAttachmentFolder (storageKey, noteKey) {
+  const storagePath = findStorage.findStorage(storageKey)
+  const noteAttachmentPath = path.join(storagePath.path, DESTINATION_FOLDER, noteKey)
+  sander.rimrafSync(noteAttachmentPath)
 }
 
 /**
@@ -197,6 +272,9 @@ function removeStorageAndNoteReferences (input, noteKey) {
  * @param noteKey NoteKey of the current note. Is used to determine the belonging attachment folder.
  */
 function deleteAttachmentsNotPresentInNote (markdownContent, storageKey, noteKey) {
+  if (storageKey == null || noteKey == null || markdownContent == null) {
+    return
+  }
   const targetStorage = findStorage.findStorage(storageKey)
   const attachmentFolder = path.join(targetStorage.path, DESTINATION_FOLDER, noteKey)
   const attachmentsInNote = getAttachmentsInContent(markdownContent)
@@ -206,11 +284,10 @@ function deleteAttachmentsNotPresentInNote (markdownContent, storageKey, noteKey
       attachmentsInNoteOnlyFileNames.push(attachmentsInNote[i].replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER + escapeStringRegexp(path.sep) + noteKey + escapeStringRegexp(path.sep), 'g'), ''))
     }
   }
-
   if (fs.existsSync(attachmentFolder)) {
     fs.readdir(attachmentFolder, (err, files) => {
       if (err) {
-        console.error("Error reading directory '" + attachmentFolder + "'. Error:")
+        console.error('Error reading directory "' + attachmentFolder + '". Error:')
         console.error(err)
         return
       }
@@ -219,17 +296,109 @@ function deleteAttachmentsNotPresentInNote (markdownContent, storageKey, noteKey
           const absolutePathOfFile = path.join(targetStorage.path, DESTINATION_FOLDER, noteKey, file)
           fs.unlink(absolutePathOfFile, (err) => {
             if (err) {
-              console.error("Could not delete '%s'", absolutePathOfFile)
+              console.error('Could not delete "%s"', absolutePathOfFile)
               console.error(err)
               return
             }
-            console.info("File '" + absolutePathOfFile + "' deleted because it was not included in the content of the note")
+            console.info('File "' + absolutePathOfFile + '" deleted because it was not included in the content of the note')
           })
         }
       })
     })
   } else {
-    console.info("Attachment folder ('" + attachmentFolder + "') did not exist..")
+    console.info('Attachment folder ("' + attachmentFolder + '") did not exist..')
+  }
+}
+
+/**
+ * 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.
+ * @param oldNote Note that is being cloned
+ * @param newNote Clone of the note
+ */
+function cloneAttachments (oldNote, newNote) {
+  if (newNote.type === 'MARKDOWN_NOTE') {
+    const oldStorage = findStorage.findStorage(oldNote.storage)
+    const newStorage = findStorage.findStorage(newNote.storage)
+    const attachmentsPaths = getAbsolutePathsOfAttachmentsInContent(oldNote.content, oldStorage.path) || []
+
+    const destinationFolder = path.join(newStorage.path, DESTINATION_FOLDER, newNote.key)
+    if (!sander.existsSync(destinationFolder)) {
+      sander.mkdirSync(destinationFolder)
+    }
+
+    for (const attachment of attachmentsPaths) {
+      const destination = path.join(newStorage.path, DESTINATION_FOLDER, newNote.key, path.basename(attachment))
+      sander.copyFileSync(attachment).to(destination)
+    }
+    newNote.content = replaceNoteKeyWithNewNoteKey(newNote.content, oldNote.key, newNote.key)
+  } else {
+    console.debug('Cloning of the attachment was skipped since it only works for MARKDOWN_NOTEs')
+  }
+}
+
+function generateFileNotFoundMarkdown () {
+  return '**' + i18n.__('⚠ 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! ⚠') + '**'
+}
+
+/**
+ * Determines whether a given text is a link to an boostnote attachment
+ * @param text Text that might contain a attachment link
+ * @return {Boolean} Result of the test
+ */
+function isAttachmentLink (text) {
+  if (text) {
+    return text.match(new RegExp('.*\\[.*\\]\\( *' + escapeStringRegexp(STORAGE_FOLDER_PLACEHOLDER) + escapeStringRegexp(path.sep) + '.*\\).*', 'gi')) != null
+  }
+  return false
+}
+
+/**
+ * @description Handles the paste of an attachment link. Copies the referenced attachment to the location belonging to the new note.
+ *  Returns a modified version of the pasted text so that it matches the copied attachment (resp. the new location)
+ * @param storageKey StorageKey of the current note
+ * @param noteKey NoteKey of the currentNote
+ * @param linkText Text that was pasted
+ * @return {Promise<String>} Promise returning the modified text
+ */
+function handleAttachmentLinkPaste (storageKey, noteKey, linkText) {
+  if (storageKey != null && noteKey != null && linkText != null) {
+    const storagePath = findStorage.findStorage(storageKey).path
+    const attachments = getAttachmentsInContent(linkText) || []
+    const replaceInstructions = []
+    const copies = []
+    for (const attachment of attachments) {
+      const absPathOfAttachment = attachment.replace(new RegExp(STORAGE_FOLDER_PLACEHOLDER, 'g'), path.join(storagePath, DESTINATION_FOLDER))
+      copies.push(
+        sander.exists(absPathOfAttachment)
+          .then((fileExists) => {
+            if (!fileExists) {
+              const fileNotFoundRegexp = new RegExp('!?' + escapeStringRegexp('[') + '[\\w|\\d|\\s|\\.]*\\]\\(\\s*' + STORAGE_FOLDER_PLACEHOLDER + '[\\w|\\d|\\-|' + escapeStringRegexp(path.sep) + ']*' + escapeStringRegexp(path.basename(absPathOfAttachment)) + escapeStringRegexp(')'))
+              replaceInstructions.push({regexp: fileNotFoundRegexp, replacement: this.generateFileNotFoundMarkdown()})
+              return Promise.resolve()
+            }
+            return this.copyAttachment(absPathOfAttachment, storageKey, noteKey)
+              .then((fileName) => {
+                const replaceLinkRegExp = new RegExp(escapeStringRegexp('(') + ' *' + STORAGE_FOLDER_PLACEHOLDER + '[\\w|\\d|\\-|' + escapeStringRegexp(path.sep) + ']*' + escapeStringRegexp(path.basename(absPathOfAttachment)) + ' *' + escapeStringRegexp(')'))
+                replaceInstructions.push({
+                  regexp: replaceLinkRegExp,
+                  replacement: '(' + path.join(STORAGE_FOLDER_PLACEHOLDER, noteKey, fileName) + ')'
+                })
+                return Promise.resolve()
+              })
+          })
+      )
+    }
+    return Promise.all(copies).then(() => {
+      let modifiedLinkText = linkText
+      for (const replaceInstruction of replaceInstructions) {
+        modifiedLinkText = modifiedLinkText.replace(replaceInstruction.regexp, replaceInstruction.replacement)
+      }
+      return modifiedLinkText
+    })
+  } else {
+    console.log('One if the parameters was null -> Do nothing..')
+    return Promise.resolve(linkText)
   }
 }
 
@@ -242,7 +411,14 @@ module.exports = {
   getAttachmentsInContent,
   getAbsolutePathsOfAttachmentsInContent,
   removeStorageAndNoteReferences,
+  deleteAttachmentFolder,
   deleteAttachmentsNotPresentInNote,
+  moveAttachments,
+  cloneAttachments,
+  isAttachmentLink,
+  handleAttachmentLinkPaste,
+  generateFileNotFoundMarkdown,
+  migrateAttachments,
   STORAGE_FOLDER_PLACEHOLDER,
   DESTINATION_FOLDER
 }

browser/main/lib/dataApi/copyImage.js

@@ -1,38 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-const { findStorage } = require('browser/lib/findStorage')
-
-// TODO: ehhc: delete this
-
-/**
- * @description Copy an image and return the path.
- * @param {String} filePath
- * @param {String} storageKey
- * @param {Boolean} rename create new filename or leave the old one
- * @return {Promise<any>} an image path
- */
-function copyImage (filePath, storageKey, rename = true) {
-  return new Promise((resolve, reject) => {
-    try {
-      const targetStorage = findStorage(storageKey)
-
-      const inputImage = fs.createReadStream(filePath)
-      const imageExt = path.extname(filePath)
-      const imageName = rename ? Math.random().toString(36).slice(-16) : path.basename(filePath, imageExt)
-      const basename = `${imageName}${imageExt}`
-      const imageDir = path.join(targetStorage.path, 'images')
-      if (!fs.existsSync(imageDir)) fs.mkdirSync(imageDir)
-      const outputImage = fs.createWriteStream(path.join(imageDir, basename))
-      outputImage.on('error', reject)
-      inputImage.on('error', reject)
-      inputImage.on('end', () => {
-        resolve(basename)
-      })
-      inputImage.pipe(outputImage)
-    } catch (e) {
-      return reject(e)
-    }
-  })
-}
-
-module.exports = copyImage

browser/main/lib/dataApi/createSnippet.js

@@ -0,0 +1,26 @@
+import fs from 'fs'
+import crypto from 'crypto'
+import consts from 'browser/lib/consts'
+import fetchSnippet from 'browser/main/lib/dataApi/fetchSnippet'
+
+function createSnippet (snippetFile) {
+  return new Promise((resolve, reject) => {
+    const newSnippet = {
+      id: crypto.randomBytes(16).toString('hex'),
+      name: 'Unnamed snippet',
+      prefix: [],
+      content: ''
+    }
+    fetchSnippet(null, snippetFile).then((snippets) => {
+      snippets.push(newSnippet)
+      fs.writeFile(snippetFile || consts.SNIPPET_FILE, JSON.stringify(snippets, null, 4), (err) => {
+        if (err) reject(err)
+        resolve(newSnippet)
+      })
+    }).catch((err) => {
+      reject(err)
+    })
+  })
+}
+
+module.exports = createSnippet

browser/main/lib/dataApi/deleteFolder.js

@@ -5,6 +5,7 @@ const resolveStorageNotes = require('./resolveStorageNotes')
 const CSON = require('@rokt33r/season')
 const sander = require('sander')
 const { findStorage } = require('browser/lib/findStorage')
+const deleteSingleNote = require('./deleteNote')
 
 /**
  * @param {String} storageKey
@@ -49,11 +50,7 @@ function deleteFolder (storageKey, folderKey) {
 
       const deleteAllNotes = targetNotes
         .map(function deleteNote (note) {
-          const notePath = path.join(storage.path, 'notes', note.key + '.cson')
-          return sander.unlink(notePath)
-            .catch(function (err) {
-              console.warn('Failed to delete', notePath, err)
-            })
+          return deleteSingleNote(storageKey, note.key)
         })
       return Promise.all(deleteAllNotes)
         .then(() => storage)

browser/main/lib/dataApi/deleteNote.js

@@ -1,6 +1,7 @@
 const resolveStorageData = require('./resolveStorageData')
 const path = require('path')
 const sander = require('sander')
+const attachmentManagement = require('./attachmentManagement')
 const { findStorage } = require('browser/lib/findStorage')
 
 function deleteNote (storageKey, noteKey) {
@@ -25,6 +26,10 @@ function deleteNote (storageKey, noteKey) {
         storageKey
       }
     })
+    .then(function deleteAttachments (storageInfo) {
+      attachmentManagement.deleteAttachmentFolder(storageInfo.storageKey, storageInfo.noteKey)
+      return storageInfo
+    })
 }
 
 module.exports = deleteNote

browser/main/lib/dataApi/deleteSnippet.js

@@ -0,0 +1,17 @@
+import fs from 'fs'
+import consts from 'browser/lib/consts'
+import fetchSnippet from 'browser/main/lib/dataApi/fetchSnippet'
+
+function deleteSnippet (snippet, snippetFile) {
+  return new Promise((resolve, reject) => {
+    fetchSnippet(null, snippetFile).then((snippets) => {
+      snippets = snippets.filter(currentSnippet => currentSnippet.id !== snippet.id)
+      fs.writeFile(snippetFile || consts.SNIPPET_FILE, JSON.stringify(snippets, null, 4), (err) => {
+        if (err) reject(err)
+        resolve(snippet)
+      })
+    })
+  })
+}
+
+module.exports = deleteSnippet

browser/main/lib/dataApi/fetchSnippet.js

@@ -0,0 +1,20 @@
+import fs from 'fs'
+import consts from 'browser/lib/consts'
+
+function fetchSnippet (id, snippetFile) {
+  return new Promise((resolve, reject) => {
+    fs.readFile(snippetFile || consts.SNIPPET_FILE, 'utf8', (err, data) => {
+      if (err) {
+        reject(err)
+      }
+      const snippets = JSON.parse(data)
+      if (id) {
+        const snippet = snippets.find(snippet => { return snippet.id === id })
+        resolve(snippet)
+      }
+      resolve(snippets)
+    })
+  })
+}
+
+module.exports = fetchSnippet

browser/main/lib/dataApi/index.js

@@ -1,5 +1,6 @@
 const dataApi = {
   init: require('./init'),
+  toggleStorage: require('./toggleStorage'),
   addStorage: require('./addStorage'),
   renameStorage: require('./renameStorage'),
   removeStorage: require('./removeStorage'),
@@ -13,6 +14,10 @@ const dataApi = {
   deleteNote: require('./deleteNote'),
   moveNote: require('./moveNote'),
   migrateFromV5Storage: require('./migrateFromV5Storage'),
+  createSnippet: require('./createSnippet'),
+  deleteSnippet: require('./deleteSnippet'),
+  updateSnippet: require('./updateSnippet'),
+  fetchSnippet: require('./fetchSnippet'),
 
   _migrateFromV6Storage: require('./migrateFromV6Storage'),
   _resolveStorageData: require('./resolveStorageData'),

browser/main/lib/dataApi/moveNote.js

@@ -6,6 +6,7 @@ const CSON = require('@rokt33r/season')
 const keygen = require('browser/lib/keygen')
 const sander = require('sander')
 const { findStorage } = require('browser/lib/findStorage')
+const attachmentManagement = require('./attachmentManagement')
 
 function moveNote (storageKey, noteKey, newStorageKey, newFolderKey) {
   let oldStorage, newStorage
@@ -63,36 +64,20 @@ function moveNote (storageKey, noteKey, newStorageKey, newFolderKey) {
           noteData.key = newNoteKey
           noteData.storage = newStorageKey
           noteData.updatedAt = new Date()
+          noteData.oldContent = noteData.content
 
           return noteData
         })
-        .then(function moveImages (noteData) {
-          if (oldStorage.path === newStorage.path) return noteData
-
-          const searchImagesRegex = /!\[.*\]\(:storage\/(.+)\)/gi
-          let match = searchImagesRegex.exec(noteData.content)
-
-          const moveTasks = []
-          while (match != null) {
-            const [, filename] = match
-            const oldPath = path.join(oldStorage.path, 'attachments', filename)
-            const newPath = path.join(newStorage.path, 'attachments', filename)
-            // TODO: ehhc: attachmentManagement
-            moveTasks.push(
-              sander.copyFile(oldPath).to(newPath)
-                .then(() => {
-                  fs.unlinkSync(oldPath)
-                })
-            )
-
-            // find next occurence
-            match = searchImagesRegex.exec(noteData.content)
+        .then(function moveAttachments (noteData) {
+          if (oldStorage.path === newStorage.path) {
+            return noteData
           }
 
-          return Promise.all(moveTasks).then(() => noteData)
+          noteData.content = attachmentManagement.moveAttachments(oldStorage.path, newStorage.path, noteKey, newNoteKey, noteData.content)
+          return noteData
         })
         .then(function writeAndReturn (noteData) {
-          CSON.writeFileSync(path.join(newStorage.path, 'notes', noteData.key + '.cson'), _.omit(noteData, ['key', 'storage']))
+          CSON.writeFileSync(path.join(newStorage.path, 'notes', noteData.key + '.cson'), _.omit(noteData, ['key', 'storage', 'oldContent']))
           return noteData
         })
         .then(function deleteOldNote (data) {

browser/main/lib/dataApi/resolveStorageData.js

@@ -8,7 +8,8 @@ function resolveStorageData (storageCache) {
     key: storageCache.key,
     name: storageCache.name,
     type: storageCache.type,
-    path: storageCache.path
+    path: storageCache.path,
+    isOpen: storageCache.isOpen
   }
 
   const boostnoteJSONPath = path.join(storageCache.path, 'boostnote.json')

browser/main/lib/dataApi/toggleStorage.js

@@ -0,0 +1,28 @@
+const _ = require('lodash')
+const resolveStorageData = require('./resolveStorageData')
+
+/**
+ * @param {String} key
+ * @param {Boolean} isOpen
+ * @return {Object} Storage meta data
+ */
+function toggleStorage (key, isOpen) {
+  let cachedStorageList
+  try {
+    cachedStorageList = JSON.parse(localStorage.getItem('storages'))
+    if (!_.isArray(cachedStorageList)) throw new Error('invalid storages')
+  } catch (err) {
+    console.log('error got')
+    console.error(err)
+    return Promise.reject(err)
+  }
+  const targetStorage = _.find(cachedStorageList, {key: key})
+  if (targetStorage == null) return Promise.reject('Storage')
+
+  targetStorage.isOpen = isOpen
+  localStorage.setItem('storages', JSON.stringify(cachedStorageList))
+
+  return resolveStorageData(targetStorage)
+}
+
+module.exports = toggleStorage

browser/main/lib/dataApi/updateSnippet.js

@@ -0,0 +1,33 @@
+import fs from 'fs'
+import consts from 'browser/lib/consts'
+
+function updateSnippet (snippet, snippetFile) {
+  return new Promise((resolve, reject) => {
+    const snippets = JSON.parse(fs.readFileSync(snippetFile || consts.SNIPPET_FILE, 'utf-8'))
+
+    for (let i = 0; i < snippets.length; i++) {
+      const currentSnippet = snippets[i]
+
+      if (currentSnippet.id === snippet.id) {
+        if (
+          currentSnippet.name === snippet.name &&
+          currentSnippet.prefix === snippet.prefix &&
+          currentSnippet.content === snippet.content
+        ) {
+          // if everything is the same then don't write to disk
+          resolve(snippets)
+        } else {
+          currentSnippet.name = snippet.name
+          currentSnippet.prefix = snippet.prefix
+          currentSnippet.content = snippet.content
+          fs.writeFile(snippetFile || consts.SNIPPET_FILE, JSON.stringify(snippets, null, 4), (err) => {
+            if (err) reject(err)
+            resolve(snippets)
+          })
+        }
+      }
+    }
+  })
+}
+
+module.exports = updateSnippet

browser/main/lib/shortcut.js

@@ -0,0 +1,7 @@
+import ee from 'browser/main/lib/eventEmitter'
+
+module.exports = {
+  'toggleMode': () => {
+    ee.emit('topbar:togglemodebutton')
+  }
+}

browser/main/lib/shortcutManager.js

@@ -0,0 +1,40 @@
+import Mousetrap from 'mousetrap'
+import CM from 'browser/main/lib/ConfigManager'
+import ee from 'browser/main/lib/eventEmitter'
+import { isObjectEqual } from 'browser/lib/utils'
+require('mousetrap-global-bind')
+import functions from './shortcut'
+
+let shortcuts = CM.get().hotkey
+
+ee.on('config-renew', function () {
+  // only update if hotkey changed !
+  const newHotkey = CM.get().hotkey
+  if (!isObjectEqual(newHotkey, shortcuts)) {
+    updateShortcut(newHotkey)
+  }
+})
+
+function updateShortcut (newHotkey) {
+  Mousetrap.reset()
+  shortcuts = newHotkey
+  applyShortcuts(newHotkey)
+}
+
+function formatShortcut (shortcut) {
+  return shortcut.toLowerCase().replace(/ /g, '')
+}
+
+function applyShortcuts (shortcuts) {
+  for (const shortcut in shortcuts) {
+    const toggler = formatShortcut(shortcuts[shortcut])
+    // only bind if the function for that shortcut exists
+    if (functions[shortcut]) {
+      Mousetrap.bindGlobal(toggler, functions[shortcut])
+    }
+  }
+}
+
+applyShortcuts(CM.get().hotkey)
+
+module.exports = applyShortcuts

browser/main/modals/PreferencesModal/Crowdfunding.styl

@@ -11,11 +11,12 @@ p
   font-size 16px
 
 .cf-link
-  width 250px
   height 35px
   border-radius 2px
   border none
   background-color alpha(#1EC38B, 90%)
+  padding-left 20px
+  padding-right 20px
   &:hover
     background-color #1EC38B
     transition 0.2s

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -67,7 +67,8 @@ class HotkeyTab extends React.Component {
   handleHotkeyChange (e) {
     const { config } = this.state
     config.hotkey = {
-      toggleMain: this.refs.toggleMain.value
+      toggleMain: this.refs.toggleMain.value,
+      toggleMode: this.refs.toggleMode.value
     }
     this.setState({
       config
@@ -115,6 +116,17 @@ class HotkeyTab extends React.Component {
               />
             </div>
           </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Toggle editor mode')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='toggleMode'
+                value={config.hotkey.toggleMode}
+                type='text'
+              />
+            </div>
+          </div>
           <div styleName='group-control'>
             <button styleName='group-control-leftButton'
               onClick={(e) => this.handleHintToggleButtonClick(e)}

browser/main/modals/PreferencesModal/SnippetEditor.js

@@ -0,0 +1,90 @@
+import CodeMirror from 'codemirror'
+import React from 'react'
+import _ from 'lodash'
+import styles from './SnippetTab.styl'
+import CSSModules from 'browser/lib/CSSModules'
+import dataApi from 'browser/main/lib/dataApi'
+
+const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
+const buildCMRulers = (rulers, enableRulers) =>
+  enableRulers ? rulers.map(ruler => ({ column: ruler })) : []
+
+class SnippetEditor extends React.Component {
+
+  componentDidMount () {
+    this.props.onRef(this)
+    const { rulers, enableRulers } = this.props
+    this.cm = CodeMirror(this.refs.root, {
+      rulers: buildCMRulers(rulers, enableRulers),
+      lineNumbers: this.props.displayLineNumbers,
+      lineWrapping: true,
+      theme: this.props.theme,
+      indentUnit: this.props.indentSize,
+      tabSize: this.props.indentSize,
+      indentWithTabs: this.props.indentType !== 'space',
+      keyMap: this.props.keyMap,
+      scrollPastEnd: this.props.scrollPastEnd,
+      dragDrop: false,
+      foldGutter: true,
+      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+      autoCloseBrackets: true,
+      mode: 'null'
+    })
+    this.cm.setSize('100%', '100%')
+    let changeDelay = null
+
+    this.cm.on('change', () => {
+      this.snippet.content = this.cm.getValue()
+
+      clearTimeout(changeDelay)
+      changeDelay = setTimeout(() => {
+        this.saveSnippet()
+      }, 500)
+    })
+  }
+
+  componentWillUnmount () {
+    this.props.onRef(undefined)
+  }
+
+  onSnippetChanged (newSnippet) {
+    this.snippet = newSnippet
+    this.cm.setValue(this.snippet.content)
+  }
+
+  onSnippetNameOrPrefixChanged (newSnippet) {
+    this.snippet.name = newSnippet.name
+    this.snippet.prefix = newSnippet.prefix.toString().replace(/\s/g, '').split(',')
+    this.saveSnippet()
+  }
+
+  saveSnippet () {
+    dataApi.updateSnippet(this.snippet).catch((err) => { throw err })
+  }
+
+  render () {
+    const { fontSize } = this.props
+    let fontFamily = this.props.fontFamily
+    fontFamily = _.isString(fontFamily) && fontFamily.length > 0
+      ? [fontFamily].concat(defaultEditorFontFamily)
+      : defaultEditorFontFamily
+    return (
+      <div styleName='SnippetEditor' ref='root' tabIndex='-1' style={{
+        fontFamily: fontFamily.join(', '),
+        fontSize: fontSize
+      }} />
+    )
+  }
+}
+
+SnippetEditor.defaultProps = {
+  readOnly: false,
+  theme: 'xcode',
+  keyMap: 'sublime',
+  fontSize: 14,
+  fontFamily: 'Monaco, Consolas',
+  indentSize: 4,
+  indentType: 'space'
+}
+
+export default CSSModules(SnippetEditor, styles)

browser/main/modals/PreferencesModal/SnippetList.js

@@ -0,0 +1,95 @@
+import React from 'react'
+import styles from './SnippetTab.styl'
+import CSSModules from 'browser/lib/CSSModules'
+import dataApi from 'browser/main/lib/dataApi'
+import i18n from 'browser/lib/i18n'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+import context from 'browser/lib/context'
+
+class SnippetList extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      snippets: []
+    }
+  }
+
+  componentDidMount () {
+    this.reloadSnippetList()
+    eventEmitter.on('snippetList:reload', this.reloadSnippetList.bind(this))
+  }
+
+  reloadSnippetList () {
+    dataApi.fetchSnippet().then(snippets => {
+      this.setState({snippets})
+      this.props.onSnippetSelect(snippets[0])
+    })
+  }
+
+  handleSnippetContextMenu (snippet) {
+    context.popup([{
+      label: i18n.__('Delete snippet'),
+      click: () => this.deleteSnippet(snippet)
+    }])
+  }
+
+  deleteSnippet (snippet) {
+    dataApi.deleteSnippet(snippet).then(() => {
+      this.reloadSnippetList()
+      this.props.onSnippetDeleted(snippet)
+    }).catch(err => { throw err })
+  }
+
+  handleSnippetClick (snippet) {
+    this.props.onSnippetSelect(snippet)
+  }
+
+  createSnippet () {
+    dataApi.createSnippet().then(() => {
+      this.reloadSnippetList()
+      // scroll to end of list when added new snippet
+      const snippetList = document.getElementById('snippets')
+      snippetList.scrollTop = snippetList.scrollHeight
+    }).catch(err => { throw err })
+  }
+
+  defineSnippetStyleName (snippet) {
+    const { currentSnippet } = this.props
+    if (currentSnippet == null) return
+    if (currentSnippet.id === snippet.id) {
+      return 'snippet-item-selected'
+    } else {
+      return 'snippet-item'
+    }
+  }
+
+  render () {
+    const { snippets } = this.state
+    return (
+      <div styleName='snippet-list'>
+        <div styleName='group-section'>
+          <div styleName='group-section-control'>
+            <button styleName='group-control-button' onClick={() => this.createSnippet()}>
+              <i className='fa fa-plus' /> {i18n.__('New Snippet')}
+            </button>
+          </div>
+        </div>
+        <ul id='snippets' styleName='snippets'>
+          {
+            snippets.map((snippet) => (
+              <li
+                styleName={this.defineSnippetStyleName(snippet)}
+                key={snippet.id}
+                onContextMenu={() => this.handleSnippetContextMenu(snippet)}
+                onClick={() => this.handleSnippetClick(snippet)}>
+                {snippet.name}
+              </li>
+            ))
+          }
+        </ul>
+      </div>
+    )
+  }
+}
+
+export default CSSModules(SnippetList, styles)

browser/main/modals/PreferencesModal/SnippetTab.js

@@ -0,0 +1,117 @@
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SnippetTab.styl'
+import SnippetEditor from './SnippetEditor'
+import i18n from 'browser/lib/i18n'
+import dataApi from 'browser/main/lib/dataApi'
+import SnippetList from './SnippetList'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+
+class SnippetTab extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      currentSnippet: null
+    }
+    this.changeDelay = null
+  }
+
+  handleSnippetNameOrPrefixChange () {
+    clearTimeout(this.changeDelay)
+    this.changeDelay = setTimeout(() => {
+      // notify the snippet editor that the name or prefix of snippet has been changed
+      this.snippetEditor.onSnippetNameOrPrefixChanged(this.state.currentSnippet)
+      eventEmitter.emit('snippetList:reload')
+    }, 500)
+  }
+
+  handleSnippetSelect (snippet) {
+    const { currentSnippet } = this.state
+    if (currentSnippet === null || currentSnippet.id !== snippet.id) {
+      dataApi.fetchSnippet(snippet.id).then(changedSnippet => {
+        // notify the snippet editor to load the content of the new snippet
+        this.snippetEditor.onSnippetChanged(changedSnippet)
+        this.setState({currentSnippet: changedSnippet})
+      })
+    }
+  }
+
+  onSnippetNameOrPrefixChanged (e, type) {
+    const newSnippet = Object.assign({}, this.state.currentSnippet)
+    if (type === 'name') {
+      newSnippet.name = e.target.value
+    } else {
+      newSnippet.prefix = e.target.value
+    }
+    this.setState({ currentSnippet: newSnippet })
+    this.handleSnippetNameOrPrefixChange()
+  }
+
+  handleDeleteSnippet (snippet) {
+    // prevent old snippet still display when deleted
+    if (snippet.id === this.state.currentSnippet.id) {
+      this.setState({currentSnippet: null})
+    }
+  }
+
+  render () {
+    const { config, storageKey } = this.props
+    const { currentSnippet } = this.state
+
+    let editorFontSize = parseInt(config.editor.fontSize, 10)
+    if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
+    let editorIndentSize = parseInt(config.editor.indentSize, 10)
+    if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
+    return (
+      <div styleName='root'>
+        <div styleName='header'>{i18n.__('Snippets')}</div>
+        <SnippetList
+          onSnippetSelect={this.handleSnippetSelect.bind(this)}
+          onSnippetDeleted={this.handleDeleteSnippet.bind(this)}
+          currentSnippet={currentSnippet} />
+        <div styleName='snippet-detail' style={{visibility: currentSnippet ? 'visible' : 'hidden'}}>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Snippet name')}</div>
+            <div styleName='group-section-control'>
+              <input
+                styleName='group-section-control-input'
+                value={currentSnippet ? currentSnippet.name : ''}
+                onChange={e => { this.onSnippetNameOrPrefixChanged(e, 'name') }}
+                type='text' />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Snippet prefix')}</div>
+            <div styleName='group-section-control'>
+              <input
+                styleName='group-section-control-input'
+                value={currentSnippet ? currentSnippet.prefix : ''}
+                onChange={e => { this.onSnippetNameOrPrefixChanged(e, 'prefix') }}
+                type='text' />
+            </div>
+          </div>
+          <div styleName='snippet-editor-section'>
+            <SnippetEditor
+              storageKey={storageKey}
+              theme={config.editor.theme}
+              keyMap={config.editor.keyMap}
+              fontFamily={config.editor.fontFamily}
+              fontSize={editorFontSize}
+              indentType={config.editor.indentType}
+              indentSize={editorIndentSize}
+              enableRulers={config.editor.enableRulers}
+              rulers={config.editor.rulers}
+              displayLineNumbers={config.editor.displayLineNumbers}
+              scrollPastEnd={config.editor.scrollPastEnd}
+              onRef={ref => { this.snippetEditor = ref }} />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+SnippetTab.PropTypes = {
+}
+
+export default CSSModules(SnippetTab, styles)

browser/main/modals/PreferencesModal/SnippetTab.styl

@@ -0,0 +1,198 @@
+@import('./Tab')
+@import('./ConfigTab')
+
+.root
+  padding 15px
+  white-space pre
+  line-height 1.4
+  color alpha($ui-text-color, 90%)
+  width 100%
+  font-size 14px
+
+.group
+  margin-bottom 45px
+
+.group-header
+  @extend .header
+  color $ui-text-color
+
+.group-header2
+  font-size 20px
+  color $ui-text-color
+  margin-bottom 15px
+  margin-top 30px
+
+.group-section
+  margin-bottom 20px
+  display flex
+  line-height 30px
+
+.group-section-label
+  width 150px
+  text-align left
+  margin-right 10px
+  font-size 14px
+
+.group-section-control
+  flex 1
+  margin-left 5px
+
+.group-section-control select
+  outline none
+  border 1px solid $ui-borderColor
+  font-size 16px
+  height 30px
+  width 250px
+  margin-bottom 5px
+  background-color transparent
+
+.group-section-control-input
+  height 30px
+  vertical-align middle
+  width 400px
+  font-size $tab--button-font-size
+  border solid 1px $border-color
+  border-radius 2px
+  padding 0 5px
+  outline none
+  &:disabled
+    background-color $ui-input--disabled-backgroundColor
+
+.group-control-button
+  height 30px
+  border none
+  border-top-right-radius 2px
+  border-bottom-right-radius 2px
+  colorPrimaryButton()
+  vertical-align middle
+  padding 0 20px
+
+.group-checkBoxSection
+  margin-bottom 15px
+  display flex
+  line-height 30px
+  padding-left 15px
+
+.group-control
+  padding-top 10px
+  box-sizing border-box
+  height 40px
+  text-align right
+  :global
+    .alert
+      display inline-block
+      position absolute
+      top 60px
+      right 15px
+      font-size 14px
+    .success
+      color #1EC38B
+    .error
+      color red
+    .warning
+      color #FFA500
+
+.snippet-list
+  width 30%
+  height calc(100% - 200px)
+  position absolute
+
+  .snippets
+    height calc(100% - 8px)
+    overflow scroll
+    background: #f5f5f5
+
+  .snippet-item
+    height 50px
+    font-size 15px
+    line-height 50px
+    padding 0 5%
+    cursor pointer
+    position relative
+
+    &::after
+      width 90%
+      height 1px
+      background rgba(0, 0, 0, 0.1)
+      position absolute
+      top 100%
+      left 5%
+      content ''
+
+    &:hover
+      background darken(#f5f5f5, 5)
+
+  .snippet-item-selected
+    @extend .snippet-list .snippet-item
+    background darken(#f5f5f5, 5)
+
+.snippet-detail
+  width 70%
+  height calc(100% - 200px)
+  position absolute
+  left 33%
+
+.SnippetEditor
+  position absolute
+  width 100%
+  height 90%
+
+body[data-theme="default"], body[data-theme="white"]
+  .snippets
+    background $ui-backgroundColor
+    .snippet-item
+      color black
+      &::after
+        background $ui-borderColor
+      &:hover
+        background darken($ui-backgroundColor, 5)
+    .snippet-item-selected
+      background darken($ui-backgroundColor, 5)
+
+body[data-theme="dark"]
+  .snippets
+    background $ui-dark-backgroundColor
+    .snippet-item
+      color white
+      &::after
+        background $ui-dark-borderColor
+      &:hover
+        background darken($ui-dark-backgroundColor, 5)
+    .snippet-item-selected
+      background darken($ui-dark-backgroundColor, 5)
+  .snippet-detail
+    color white
+  .group-control-button
+    colorDarkPrimaryButton()
+
+body[data-theme="solarized-dark"]
+  .snippets
+    background $ui-solarized-dark-backgroundColor
+    .snippet-item
+      color white
+      &::after
+        background $ui-solarized-dark-borderColor
+      &:hover
+        background darken($ui-solarized-dark-backgroundColor, 5)
+    .snippet-item-selected
+      background darken($ui-solarized-dark-backgroundColor, 5)
+  .snippet-detail
+    color white
+  .group-control-button
+    colorSolarizedDarkPrimaryButton()
+
+body[data-theme="monokai"]
+  .snippets
+    background $ui-monokai-backgroundColor
+    .snippet-item
+      color White
+      &::after
+        background $ui-monokai-borderColor
+      &:hover
+        background darken($ui-monokai-backgroundColor, 5)
+    .snippet-item-selected
+      background darken($ui-monokai-backgroundColor, 5)
+  .snippet-detail
+    color white
+  .group-control-button
+    colorMonokaiPrimaryButton()

browser/main/modals/PreferencesModal/StoragesTab.js

@@ -182,7 +182,7 @@ class StoragesTab extends React.Component {
             <div styleName='addStorage-body-section-path'>
               <input styleName='addStorage-body-section-path-input'
                 ref='addStoragePath'
-                placeholder='Select Folder'
+                placeholder={i18n.__('Select Folder')}
                 value={this.state.newStorage.path}
                 onChange={(e) => this.handleAddStorageChange(e)}
               />

browser/main/modals/PreferencesModal/UiTab.js

@@ -11,6 +11,7 @@ import 'codemirror-mode-elixir'
 import _ from 'lodash'
 import i18n from 'browser/lib/i18n'
 import { getLanguages } from 'browser/lib/Languages'
+import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
 
 const OSX = global.process.platform === 'darwin'
 
@@ -28,6 +29,8 @@ class UiTab extends React.Component {
 
   componentDidMount () {
     CodeMirror.autoLoadMode(this.codeMirrorInstance.getCodeMirror(), 'javascript')
+    CodeMirror.autoLoadMode(this.customCSSCM.getCodeMirror(), 'css')
+    this.customCSSCM.getCodeMirror().setSize('400px', '400px')
     this.handleSettingDone = () => {
       this.setState({UiAlert: {
         type: 'success',
@@ -97,7 +100,11 @@ class UiTab extends React.Component {
         plantUMLServerAddress: this.refs.previewPlantUMLServerAddress.value,
         scrollPastEnd: this.refs.previewScrollPastEnd.checked,
         smartQuotes: this.refs.previewSmartQuotes.checked,
-        sanitize: this.refs.previewSanitize.value
+        breaks: this.refs.previewBreaks.checked,
+        smartArrows: this.refs.previewSmartArrows.checked,
+        sanitize: this.refs.previewSanitize.value,
+        allowCustomCSS: this.refs.previewAllowCustomCSS.checked,
+        customCSS: this.customCSSCM.getCodeMirror().getValue()
       }
     }
 
@@ -158,6 +165,7 @@ class UiTab extends React.Component {
     const { config, codemirrorTheme } = this.state
     const codemirrorSampleCode = 'function iamHappy (happy) {\n\tif (happy) {\n\t  console.log("I am Happy!")\n\t} else {\n\t  console.log("I am not Happy!")\n\t}\n};'
     const enableEditRulersStyle = config.editor.enableRulers ? 'block' : 'none'
+    const fontFamily = normalizeEditorFontFamily(config.editor.fontFamily)
     return (
       <div styleName='root'>
         <div styleName='group'>
@@ -233,7 +241,7 @@ class UiTab extends React.Component {
                   disabled={OSX}
                   type='checkbox'
                 />&nbsp;
-                Disable Direct Write(It will be applied after restarting)
+                {i18n.__('Disable Direct Write (It will be applied after restarting)')}
               </label>
             </div>
             : null
@@ -255,8 +263,16 @@ class UiTab extends React.Component {
                   })
                 }
               </select>
-              <div styleName='code-mirror'>
-                <ReactCodeMirror ref={e => (this.codeMirrorInstance = e)} value={codemirrorSampleCode} options={{ lineNumbers: true, readOnly: true, mode: 'javascript', theme: codemirrorTheme }} />
+              <div styleName='code-mirror' style={{fontFamily}}>
+                <ReactCodeMirror
+                  ref={e => (this.codeMirrorInstance = e)}
+                  value={codemirrorSampleCode}
+                  options={{
+                    lineNumbers: true,
+                    readOnly: true,
+                    mode: 'javascript',
+                    theme: codemirrorTheme
+                  }} />
               </div>
             </div>
           </div>
@@ -473,7 +489,27 @@ class UiTab extends React.Component {
                 ref='previewSmartQuotes'
                 type='checkbox'
               />&nbsp;
-              Enable smart quotes
+              {i18n.__('Enable smart quotes')}
+            </label>
+          </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.breaks}
+                ref='previewBreaks'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Render newlines in Markdown paragraphs as <br>')}
+            </label>
+          </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.smartArrows}
+                ref='previewSmartArrows'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Convert textual arrows to beautiful signs. ⚠ This will interfere with using HTML comments in your Markdown.')}
             </label>
           </div>
 
@@ -558,6 +594,32 @@ class UiTab extends React.Component {
               />
             </div>
           </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Custom CSS')}
+            </div>
+            <div styleName='group-section-control'>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={config.preview.allowCustomCSS}
+                ref='previewAllowCustomCSS'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Allow custom CSS for preview')}
+              <div style={{fontFamily}}>
+                <ReactCodeMirror
+                  width='400px'
+                  height='400px'
+                  onChange={e => this.handleUIChange(e)}
+                  ref={e => (this.customCSSCM = e)}
+                  value={config.preview.customCSS}
+                  options={{
+                    lineNumbers: true,
+                    mode: 'css',
+                    theme: codemirrorTheme
+                  }} />
+              </div>
+            </div>
+          </div>
 
           <div styleName='group-control'>
             <button styleName='group-control-rightButton'

browser/main/modals/PreferencesModal/index.js

@@ -6,6 +6,7 @@ import UiTab from './UiTab'
 import InfoTab from './InfoTab'
 import Crowdfunding from './Crowdfunding'
 import StoragesTab from './StoragesTab'
+import SnippetTab from './SnippetTab'
 import Blog from './Blog'
 import ModalEscButton from 'browser/components/ModalEscButton'
 import CSSModules from 'browser/lib/CSSModules'
@@ -86,6 +87,14 @@ class Preferences extends React.Component {
             haveToSave={alert => this.setState({BlogAlert: alert})}
           />
         )
+      case 'SNIPPET':
+        return (
+          <SnippetTab
+            dispatch={dispatch}
+            config={config}
+            data={data}
+          />
+        )
       case 'STORAGES':
       default:
         return (
@@ -123,7 +132,8 @@ class Preferences extends React.Component {
       {target: 'UI', label: i18n.__('Interface'), UI: this.state.UIAlert},
       {target: 'INFO', label: i18n.__('About')},
       {target: 'CROWDFUNDING', label: i18n.__('Crowdfunding')},
-      {target: 'BLOG', label: i18n.__('Blog'), Blog: this.state.BlogAlert}
+      {target: 'BLOG', label: i18n.__('Blog'), Blog: this.state.BlogAlert},
+      {target: 'SNIPPET', label: i18n.__('Snippets')}
     ]
 
     const navButtons = tabs.map((tab) => {

browser/main/store.js

@@ -38,29 +38,13 @@ function data (state = defaultDataMap(), action) {
         if (note.isTrashed) {
           state.trashedSet.add(uniqueKey)
         }
-
-        let storageNoteList = state.storageNoteMap.get(note.storage)
-        if (storageNoteList == null) {
-          storageNoteList = new Set(storageNoteList)
-          state.storageNoteMap.set(note.storage, storageNoteList)
-        }
+        const storageNoteList = getOrInitItem(state.storageNoteMap, note.storage)
         storageNoteList.add(uniqueKey)
 
-        let folderNoteSet = state.folderNoteMap.get(folderKey)
-        if (folderNoteSet == null) {
-          folderNoteSet = new Set(folderNoteSet)
-          state.folderNoteMap.set(folderKey, folderNoteSet)
-        }
+        const folderNoteSet = getOrInitItem(state.folderNoteMap, folderKey)
         folderNoteSet.add(uniqueKey)
 
-        note.tags.forEach((tag) => {
-          let tagNoteList = state.tagNoteMap.get(tag)
-          if (tagNoteList == null) {
-            tagNoteList = new Set(tagNoteList)
-            state.tagNoteMap.set(tag, tagNoteList)
-          }
-          tagNoteList.add(uniqueKey)
-        })
+        assignToTags(note.tags, state, uniqueKey)
       })
       return state
     case 'UPDATE_NOTE':
@@ -74,40 +58,18 @@ function data (state = defaultDataMap(), action) {
         state.noteMap = new Map(state.noteMap)
         state.noteMap.set(uniqueKey, note)
 
-        if (oldNote == null || oldNote.isStarred !== note.isStarred) {
-          state.starredSet = new Set(state.starredSet)
-          if (note.isStarred) {
-            state.starredSet.add(uniqueKey)
-          } else {
-            state.starredSet.delete(uniqueKey)
-          }
-        }
+        updateStarredChange(oldNote, note, state, uniqueKey)
 
         if (oldNote == null || oldNote.isTrashed !== note.isTrashed) {
           state.trashedSet = new Set(state.trashedSet)
           if (note.isTrashed) {
             state.trashedSet.add(uniqueKey)
             state.starredSet.delete(uniqueKey)
-
-            note.tags.forEach(tag => {
-              let tagNoteList = state.tagNoteMap.get(tag)
-              if (tagNoteList != null) {
-                tagNoteList = new Set(tagNoteList)
-                tagNoteList.delete(uniqueKey)
-                state.tagNoteMap.set(tag, tagNoteList)
-              }
-            })
+            removeFromTags(note.tags, state, uniqueKey)
           } else {
             state.trashedSet.delete(uniqueKey)
 
-            note.tags.forEach(tag => {
-              let tagNoteList = state.tagNoteMap.get(tag)
-              if (tagNoteList != null) {
-                tagNoteList = new Set(tagNoteList)
-                tagNoteList.add(uniqueKey)
-                state.tagNoteMap.set(tag, tagNoteList)
-              }
-            })
+            assignToTags(note.tags, state, uniqueKey)
 
             if (note.isStarred) {
               state.starredSet.add(uniqueKey)
@@ -125,54 +87,12 @@ function data (state = defaultDataMap(), action) {
         }
 
         // Update foldermap if folder changed or post created
-        if (oldNote == null || oldNote.folder !== note.folder) {
-          state.folderNoteMap = new Map(state.folderNoteMap)
-          let folderNoteSet = state.folderNoteMap.get(folderKey)
-          folderNoteSet = new Set(folderNoteSet)
-          folderNoteSet.add(uniqueKey)
-          state.folderNoteMap.set(folderKey, folderNoteSet)
-
-          if (oldNote != null) {
-            const oldFolderKey = oldNote.storage + '-' + oldNote.folder
-            let oldFolderNoteList = state.folderNoteMap.get(oldFolderKey)
-            oldFolderNoteList = new Set(oldFolderNoteList)
-            oldFolderNoteList.delete(uniqueKey)
-            state.folderNoteMap.set(oldFolderKey, oldFolderNoteList)
-          }
-        }
+        updateFolderChange(oldNote, note, state, folderKey, uniqueKey)
 
         if (oldNote != null) {
-          const discardedTags = _.difference(oldNote.tags, note.tags)
-          const addedTags = _.difference(note.tags, oldNote.tags)
-          if (discardedTags.length + addedTags.length > 0) {
-            state.tagNoteMap = new Map(state.tagNoteMap)
-
-            discardedTags.forEach((tag) => {
-              let tagNoteList = state.tagNoteMap.get(tag)
-              if (tagNoteList != null) {
-                tagNoteList = new Set(tagNoteList)
-                tagNoteList.delete(uniqueKey)
-                state.tagNoteMap.set(tag, tagNoteList)
-              }
-            })
-            addedTags.forEach((tag) => {
-              let tagNoteList = state.tagNoteMap.get(tag)
-              tagNoteList = new Set(tagNoteList)
-              tagNoteList.add(uniqueKey)
-
-              state.tagNoteMap.set(tag, tagNoteList)
-            })
-          }
+          updateTagChanges(oldNote, note, state, uniqueKey)
         } else {
-          state.tagNoteMap = new Map(state.tagNoteMap)
-          note.tags.forEach((tag) => {
-            let tagNoteList = state.tagNoteMap.get(tag)
-            if (tagNoteList == null) {
-              tagNoteList = new Set(tagNoteList)
-              state.tagNoteMap.set(tag, tagNoteList)
-            }
-            tagNoteList.add(uniqueKey)
-          })
+          assignToTags(note.tags, state, uniqueKey)
         }
 
         return state
@@ -220,26 +140,10 @@ function data (state = defaultDataMap(), action) {
           originFolderList.delete(originKey)
           state.folderNoteMap.set(originFolderKey, originFolderList)
 
-          // From tagMap
-          if (originNote.tags.length > 0) {
-            state.tagNoteMap = new Map(state.tagNoteMap)
-            originNote.tags.forEach((tag) => {
-              let noteSet = state.tagNoteMap.get(tag)
-              noteSet = new Set(noteSet)
-              noteSet.delete(originKey)
-              state.tagNoteMap.set(tag, noteSet)
-            })
-          }
+          removeFromTags(originNote.tags, state, originKey)
         }
 
-        if (oldNote == null || oldNote.isStarred !== note.isStarred) {
-          state.starredSet = new Set(state.starredSet)
-          if (note.isStarred) {
-            state.starredSet.add(uniqueKey)
-          } else {
-            state.starredSet.delete(uniqueKey)
-          }
-        }
+        updateStarredChange(oldNote, note, state, uniqueKey)
 
         if (oldNote == null || oldNote.isTrashed !== note.isTrashed) {
           state.trashedSet = new Set(state.trashedSet)
@@ -260,55 +164,13 @@ function data (state = defaultDataMap(), action) {
         }
 
         // Update foldermap if folder changed or post created
-        if (oldNote == null || oldNote.folder !== note.folder) {
-          state.folderNoteMap = new Map(state.folderNoteMap)
-          let folderNoteList = state.folderNoteMap.get(folderKey)
-          folderNoteList = new Set(folderNoteList)
-          folderNoteList.add(uniqueKey)
-          state.folderNoteMap.set(folderKey, folderNoteList)
-
-          if (oldNote != null) {
-            const oldFolderKey = oldNote.storage + '-' + oldNote.folder
-            let oldFolderNoteList = state.folderNoteMap.get(oldFolderKey)
-            oldFolderNoteList = new Set(oldFolderNoteList)
-            oldFolderNoteList.delete(uniqueKey)
-            state.folderNoteMap.set(oldFolderKey, oldFolderNoteList)
-          }
-        }
+        updateFolderChange(oldNote, note, state, folderKey, uniqueKey)
 
         // Remove from old folder map
         if (oldNote != null) {
-          const discardedTags = _.difference(oldNote.tags, note.tags)
-          const addedTags = _.difference(note.tags, oldNote.tags)
-          if (discardedTags.length + addedTags.length > 0) {
-            state.tagNoteMap = new Map(state.tagNoteMap)
-
-            discardedTags.forEach((tag) => {
-              let tagNoteList = state.tagNoteMap.get(tag)
-              if (tagNoteList != null) {
-                tagNoteList = new Set(tagNoteList)
-                tagNoteList.delete(uniqueKey)
-                state.tagNoteMap.set(tag, tagNoteList)
-              }
-            })
-            addedTags.forEach((tag) => {
-              let tagNoteList = state.tagNoteMap.get(tag)
-              tagNoteList = new Set(tagNoteList)
-              tagNoteList.add(uniqueKey)
-
-              state.tagNoteMap.set(tag, tagNoteList)
-            })
-          }
+          updateTagChanges(oldNote, note, state, uniqueKey)
         } else {
-          state.tagNoteMap = new Map(state.tagNoteMap)
-          note.tags.forEach((tag) => {
-            let tagNoteList = state.tagNoteMap.get(tag)
-            if (tagNoteList == null) {
-              tagNoteList = new Set(tagNoteList)
-              state.tagNoteMap.set(tag, tagNoteList)
-            }
-            tagNoteList.add(uniqueKey)
-          })
+          assignToTags(note.tags, state, uniqueKey)
         }
 
         return state
@@ -347,16 +209,7 @@ function data (state = defaultDataMap(), action) {
           folderSet.delete(uniqueKey)
           state.folderNoteMap.set(folderKey, folderSet)
 
-          // From tagMap
-          if (targetNote.tags.length > 0) {
-            state.tagNoteMap = new Map(state.tagNoteMap)
-            targetNote.tags.forEach((tag) => {
-              let noteSet = state.tagNoteMap.get(tag)
-              noteSet = new Set(noteSet)
-              noteSet.delete(uniqueKey)
-              state.tagNoteMap.set(tag, noteSet)
-            })
-          }
+          removeFromTags(targetNote.tags, state, uniqueKey)
         }
         state.noteMap = new Map(state.noteMap)
         state.noteMap.delete(uniqueKey)
@@ -420,9 +273,7 @@ function data (state = defaultDataMap(), action) {
               // Delete key from tag map
               state.tagNoteMap = new Map(state.tagNoteMap)
               note.tags.forEach((tag) => {
-                let tagNoteSet = state.tagNoteMap.get(tag)
-                tagNoteSet = new Set(tagNoteSet)
-                state.tagNoteMap.set(tag, tagNoteSet)
+                const tagNoteSet = getOrInitItem(state.tagNoteMap, tag)
                 tagNoteSet.delete(noteKey)
               })
             }
@@ -449,11 +300,7 @@ function data (state = defaultDataMap(), action) {
           state.starredSet.add(uniqueKey)
         }
 
-        let storageNoteList = state.storageNoteMap.get(note.storage)
-        if (storageNoteList == null) {
-          storageNoteList = new Set(storageNoteList)
-          state.storageNoteMap.set(note.storage, storageNoteList)
-        }
+        const storageNoteList = getOrInitItem(state.tagNoteMap, note.storage)
         storageNoteList.add(uniqueKey)
 
         let folderNoteSet = state.folderNoteMap.get(folderKey)
@@ -464,11 +311,7 @@ function data (state = defaultDataMap(), action) {
         folderNoteSet.add(uniqueKey)
 
         note.tags.forEach((tag) => {
-          let tagNoteSet = state.tagNoteMap.get(tag)
-          if (tagNoteSet == null) {
-            tagNoteSet = new Set(tagNoteSet)
-            state.tagNoteMap.set(tag, tagNoteSet)
-          }
+          const tagNoteSet = getOrInitItem(state.tagNoteMap, tag)
           tagNoteSet.add(uniqueKey)
         })
       })
@@ -517,6 +360,12 @@ function data (state = defaultDataMap(), action) {
       state.storageMap = new Map(state.storageMap)
       state.storageMap.set(action.storage.key, action.storage)
       return state
+    case 'EXPAND_STORAGE':
+      state = Object.assign({}, state)
+      state.storageMap = new Map(state.storageMap)
+      action.storage.isOpen = action.isOpen
+      state.storageMap.set(action.storage.key, action.storage)
+      return state
   }
   return state
 }
@@ -559,6 +408,73 @@ function status (state = defaultStatus, action) {
   return state
 }
 
+function updateStarredChange (oldNote, note, state, uniqueKey) {
+  if (oldNote == null || oldNote.isStarred !== note.isStarred) {
+    state.starredSet = new Set(state.starredSet)
+    if (note.isStarred) {
+      state.starredSet.add(uniqueKey)
+    } else {
+      state.starredSet.delete(uniqueKey)
+    }
+  }
+}
+
+function updateFolderChange (oldNote, note, state, folderKey, uniqueKey) {
+  if (oldNote == null || oldNote.folder !== note.folder) {
+    state.folderNoteMap = new Map(state.folderNoteMap)
+    let folderNoteList = state.folderNoteMap.get(folderKey)
+    folderNoteList = new Set(folderNoteList)
+    folderNoteList.add(uniqueKey)
+    state.folderNoteMap.set(folderKey, folderNoteList)
+
+    if (oldNote != null) {
+      const oldFolderKey = oldNote.storage + '-' + oldNote.folder
+      let oldFolderNoteList = state.folderNoteMap.get(oldFolderKey)
+      oldFolderNoteList = new Set(oldFolderNoteList)
+      oldFolderNoteList.delete(uniqueKey)
+      state.folderNoteMap.set(oldFolderKey, oldFolderNoteList)
+    }
+  }
+}
+
+function updateTagChanges (oldNote, note, state, uniqueKey) {
+  const discardedTags = _.difference(oldNote.tags, note.tags)
+  const addedTags = _.difference(note.tags, oldNote.tags)
+  if (discardedTags.length + addedTags.length > 0) {
+    removeFromTags(discardedTags, state, uniqueKey)
+    assignToTags(addedTags, state, uniqueKey)
+  }
+}
+
+function assignToTags (tags, state, uniqueKey) {
+  state.tagNoteMap = new Map(state.tagNoteMap)
+  tags.forEach((tag) => {
+    const tagNoteList = getOrInitItem(state.tagNoteMap, tag)
+    tagNoteList.add(uniqueKey)
+  })
+}
+
+function removeFromTags (tags, state, uniqueKey) {
+  state.tagNoteMap = new Map(state.tagNoteMap)
+  tags.forEach(tag => {
+    let tagNoteList = state.tagNoteMap.get(tag)
+    if (tagNoteList != null) {
+      tagNoteList = new Set(tagNoteList)
+      tagNoteList.delete(uniqueKey)
+      state.tagNoteMap.set(tag, tagNoteList)
+    }
+  })
+}
+
+function getOrInitItem (target, key) {
+  let results = target.get(key)
+  if (results == null) {
+    results = new Set()
+    target.set(key, results)
+  }
+  return results
+}
+
 const reducer = combineReducers({
   data,
   config,