Merge branch 'master' into new-snippet-tabbar

# Conflicts: # browser/main/Detail/SnippetNoteDetail.js
2025-12-25 15:41:42 +00:00 · 2018-03-18 21:26:12 +03:00
parent a222fd0786 222de03ea3
commit 2811843e70
86 changed files with 5089 additions and 1004 deletions
--- a/browser/main/Detail/InfoPanel.js
+++ b/browser/main/Detail/InfoPanel.js
@@ -3,6 +3,7 @@ import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
 import copy from 'copy-to-clipboard'
+import i18n from 'browser/lib/i18n'

 class InfoPanel extends React.Component {
  copyNoteLink () {
@@ -19,7 +20,7 @@ class InfoPanel extends React.Component {
      <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
        <div>
          <p styleName='modification-date'>{updatedAt}</p>
-          <p styleName='modification-date-desc'>MODIFICATION DATE</p>
+          <p styleName='modification-date-desc'>{i18n.__('MODIFICATION DATE')}</p>
        </div>

        <hr />
@@ -29,11 +30,11 @@ class InfoPanel extends React.Component {
          : <div styleName='count-wrap'>
            <div styleName='count-number'>
              <p styleName='infoPanel-defaul-count'>{wordCount}</p>
-              <p styleName='infoPanel-sub-count'>Words</p>
+              <p styleName='infoPanel-sub-count'>{i18n.__('Words')}</p>
            </div>
            <div styleName='count-number'>
              <p styleName='infoPanel-defaul-count'>{letterCount}</p>
-              <p styleName='infoPanel-sub-count'>Letters</p>
+              <p styleName='infoPanel-sub-count'>{i18n.__('Letters')}</p>
            </div>
          </div>
        }
@@ -45,17 +46,17 @@ class InfoPanel extends React.Component {

        <div>
          <p styleName='infoPanel-default'>{storageName}</p>
-          <p styleName='infoPanel-sub'>STORAGE</p>
+          <p styleName='infoPanel-sub'>{i18n.__('STORAGE')}</p>
        </div>

        <div>
          <p styleName='infoPanel-default'>{folderName}</p>
-          <p styleName='infoPanel-sub'>FOLDER</p>
+          <p styleName='infoPanel-sub'>{i18n.__('FOLDER')}</p>
        </div>

        <div>
          <p styleName='infoPanel-default'>{createdAt}</p>
-          <p styleName='infoPanel-sub'>CREATION DATE</p>
+          <p styleName='infoPanel-sub'>{i18n.__('CREATION DATE')}</p>
        </div>

        <div>
@@ -63,7 +64,7 @@ class InfoPanel extends React.Component {
          <button onClick={() => this.copyNoteLink()} styleName='infoPanel-copyButton'>
            <i className='fa fa-clipboard' />
          </button>
-          <p styleName='infoPanel-sub'>NOTE LINK</p>
+          <p styleName='infoPanel-sub'>{i18n.__('NOTE LINK')}</p>
        </div>

        <hr />
@@ -71,22 +72,22 @@ class InfoPanel extends React.Component {
        <div id='export-wrap'>
          <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
            <i className='fa fa-file-code-o' />
-            <p>.md</p>
+            <p>{i18n.__('.md')}</p>
          </button>

          <button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
            <i className='fa fa-file-text-o' />
-            <p>.txt</p>
+            <p>{i18n.__('.txt')}</p>
          </button>

          <button styleName='export--enable' onClick={(e) => exportAsHtml(e)}>
            <i className='fa fa-html5' />
-            <p>.html</p>
+            <p>{i18n.__('.html')}</p>
          </button>

          <button styleName='export--enable' onClick={(e) => print(e)}>
            <i className='fa fa-print' />
-            <p>Print</p>
+            <p>{i18n.__('Print')}</p>
          </button>
        </div>
      </div>
--- a/browser/main/Detail/InfoPanelTrashed.js
+++ b/browser/main/Detail/InfoPanelTrashed.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
+import i18n from 'browser/lib/i18n'

 const InfoPanelTrashed = ({
  storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml
@@ -9,24 +10,24 @@ const InfoPanelTrashed = ({
  <div className='infoPanel' styleName='control-infoButton-panel-trash' style={{display: 'none'}}>
    <div>
      <p styleName='modification-date'>{updatedAt}</p>
-      <p styleName='modification-date-desc'>MODIFICATION DATE</p>
+      <p styleName='modification-date-desc'>{i18n.__('MODIFICATION DATE')}</p>
    </div>

    <hr />

    <div>
      <p styleName='infoPanel-default'>{storageName}</p>
-      <p styleName='infoPanel-sub'>STORAGE</p>
+      <p styleName='infoPanel-sub'>{i18n.__('STORAGE')}</p>
    </div>

    <div>
      <p styleName='infoPanel-default'><text styleName='infoPanel-trash'>Trash</text>{folderName}</p>
-      <p styleName='infoPanel-sub'>FOLDER</p>
+      <p styleName='infoPanel-sub'>{i18n.__('FOLDER')}</p>
    </div>

    <div>
      <p styleName='infoPanel-default'>{createdAt}</p>
-      <p styleName='infoPanel-sub'>CREATION DATE</p>
+      <p styleName='infoPanel-sub'>{i18n.__('CREATION DATE')}</p>
    </div>

    <div id='export-wrap'>
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -139,7 +139,7 @@ class MarkdownNoteDetail extends React.Component {
          hashHistory.replace({
            pathname: location.pathname,
            query: {
-              key: newNote.storage + '-' + newNote.key
+              key: newNote.key
            }
          })
          this.setState({
@@ -393,7 +393,7 @@ class MarkdownNoteDetail extends React.Component {
        <InfoPanel
          storageName={currentOption.storage.name}
          folderName={currentOption.folder.name}
-          noteLink={`[${note.title}](${location.query.key})`}
+          noteLink={`[${note.title}](:note:${location.query.key})`}
          updatedAt={formatDate(note.updatedAt)}
          createdAt={formatDate(note.createdAt)}
          exportAsMd={this.exportAsMd}
--- a/browser/main/Detail/PermanentDeleteButton.js
+++ b/browser/main/Detail/PermanentDeleteButton.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TrashButton.styl'
+import i18n from 'browser/lib/i18n'

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

--- a/browser/main/Detail/RestoreButton.js
+++ b/browser/main/Detail/RestoreButton.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './RestoreButton.styl'
+import i18n from 'browser/lib/i18n'

 const RestoreButton = ({
  onClick
@@ -10,7 +11,7 @@ const RestoreButton = ({
    onClick={onClick}
  >
    <i className='fa fa-undo fa-fw' styleName='iconRestore' />
-    <span styleName='tooltip'>Restore</span>
+    <span styleName='tooltip'>{i18n.__('Restore')}</span>
  </button>
 )

--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -25,7 +25,8 @@ import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
 import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
-import {formatDate} from 'browser/lib/date-formatter'
+import { formatDate } from 'browser/lib/date-formatter'
+import i18n from 'browser/lib/i18n'

 function pass (name) {
  switch (name) {
@@ -166,7 +167,7 @@ class SnippetNoteDetail extends React.Component {
          hashHistory.replace({
            pathname: location.pathname,
            query: {
-              key: newNote.storage + '-' + newNote.key
+              key: newNote.key
            }
          })
          this.setState({
@@ -328,9 +329,9 @@ class SnippetNoteDetail extends React.Component {
      if (this.state.note.snippets[index].content.trim().length > 0) {
        const dialogIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
          type: 'warning',
-          message: 'Delete a snippet',
-          detail: 'This work cannot be undone.',
-          buttons: ['Confirm', 'Cancel']
+          message: i18n.__('Delete a snippet'),
+          detail: i18n.__('This work cannot be undone.'),
+          buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
        })
        if (dialogIndex === 0) {
          this.deleteSnippetByIndex(index)
@@ -422,6 +423,7 @@ class SnippetNoteDetail extends React.Component {

  handleKeyDown (e) {
    switch (e.keyCode) {
+      // tab key
      case 9:
        if (e.ctrlKey && !e.shiftKey) {
          e.preventDefault()
@@ -434,6 +436,7 @@ class SnippetNoteDetail extends React.Component {
          this.focusEditor()
        }
        break
+      // L key
      case 76:
        {
          const isSuper = global.process.platform === 'darwin'
@@ -445,6 +448,7 @@ class SnippetNoteDetail extends React.Component {
          }
        }
        break
+      // T key
      case 84:
        {
          const isSuper = global.process.platform === 'darwin'
@@ -634,8 +638,8 @@ class SnippetNoteDetail extends React.Component {
  showWarning () {
    dialog.showMessageBox(remote.getCurrentWindow(), {
      type: 'warning',
-      message: 'Sorry!',
-      detail: 'md/text import is available only a markdown note.',
+      message: i18n.__('Sorry!'),
+      detail: i18n.__('md/text import is available only a markdown note.'),
      buttons: ['OK']
    })
  }
@@ -777,7 +781,7 @@ class SnippetNoteDetail extends React.Component {
        <InfoPanel
          storageName={currentOption.storage.name}
          folderName={currentOption.folder.name}
-          noteLink={`[${note.title}](${location.query.key})`}
+          noteLink={`[${note.title}](:note:${location.query.key})`}
          updatedAt={formatDate(note.updatedAt)}
          createdAt={formatDate(note.createdAt)}
          exportAsMd={this.showWarning}
--- a/browser/main/Detail/ToggleModeButton.js
+++ b/browser/main/Detail/ToggleModeButton.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ToggleModeButton.styl'
+import i18n from 'browser/lib/i18n'

 const ToggleModeButton = ({
  onClick, editorType
@@ -13,7 +14,7 @@ const ToggleModeButton = ({
    <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
    </div>
-    <span styleName='tooltip'>Toggle Mode</span>
+    <span styleName='tooltip'>{i18n.__('Toggle Mode')}</span>
  </div>
 )

--- a/browser/main/Detail/TrashButton.js
+++ b/browser/main/Detail/TrashButton.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TrashButton.styl'
+import i18n from 'browser/lib/i18n'

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

--- a/browser/main/Detail/index.js
+++ b/browser/main/Detail/index.js
@@ -7,6 +7,7 @@ import MarkdownNoteDetail from './MarkdownNoteDetail'
 import SnippetNoteDetail from './SnippetNoteDetail'
 import ee from 'browser/main/lib/eventEmitter'
 import StatusBar from '../StatusBar'
+import i18n from 'browser/lib/i18n'

 const OSX = global.process.platform === 'darwin'

@@ -40,9 +41,9 @@ class Detail extends React.Component {

      const alertConfig = {
        type: 'warning',
-        message: 'Confirm note deletion',
-        detail: 'This will permanently remove this note.',
-        buttons: ['Confirm', 'Cancel']
+        message: i18n.__('Confirm note deletion'),
+        detail: i18n.__('This will permanently remove this note.'),
+        buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
      }

      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), alertConfig)
@@ -56,11 +57,8 @@ class Detail extends React.Component {
    const { location, data, config } = this.props
    let note = null
    if (location.query.key != null) {
-      const splitted = location.query.key.split('-')
-      const storageKey = splitted.shift()
-      const noteKey = splitted.shift()
-
-      note = data.noteMap.get(storageKey + '-' + noteKey)
+      const noteKey = location.query.key
+      note = data.noteMap.get(noteKey)
    }

    if (note == null) {
@@ -70,7 +68,7 @@ class Detail extends React.Component {
          tabIndex='0'
        >
          <div styleName='empty'>
-            <div styleName='empty-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br />to create a new note</div>
+            <div styleName='empty-message'>{OSX ? i18n.__('Command(⌘)') : i18n.__('Ctrl(^)')} + N<br />{i18n.__('to create a new note')}</div>
          </div>
          <StatusBar
            {..._.pick(this.props, ['config', 'location', 'dispatch'])}
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -14,6 +14,7 @@ import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import { hashHistory } from 'react-router'
 import store from 'browser/main/store'
+import i18n from 'browser/lib/i18n'
 const path = require('path')
 const electron = require('electron')
 const { remote } = electron
@@ -148,6 +149,35 @@ class Main extends React.Component {
    } else {
      document.body.setAttribute('data-theme', 'default')
    }
+    if (config.ui.language === 'sq') {
+      i18n.setLocale('sq')
+    } else if (config.ui.language === 'zh-CN') {
+      i18n.setLocale('zh-CN')
+    } else if (config.ui.language === 'zh-TW') {
+      i18n.setLocale('zh-TW')
+    } else if (config.ui.language === 'da') {
+      i18n.setLocale('da')
+    } else if (config.ui.language === 'fr') {
+      i18n.setLocale('fr')
+    } else if (config.ui.language === 'de') {
+      i18n.setLocale('de')
+    } else if (config.ui.language === 'ja') {
+      i18n.setLocale('ja')
+    } else if (config.ui.language === 'ko') {
+      i18n.setLocale('ko')
+    } else if (config.ui.language === 'no') {
+      i18n.setLocale('no')
+    } else if (config.ui.language === 'pl') {
+      i18n.setLocale('pl')
+    } else if (config.ui.language === 'pt') {
+      i18n.setLocale('pt')
+    } else if (config.ui.language === 'ru') {
+      i18n.setLocale('ru')
+    } else if (config.ui.language === 'es') {
+      i18n.setLocale('es')
+    } else {
+      i18n.setLocale('en')
+    }

    // Reload all data
    dataApi.init()
--- a/browser/main/NewNoteButton/index.js
+++ b/browser/main/NewNoteButton/index.js
@@ -6,6 +6,7 @@ import _ from 'lodash'
 import modal from 'browser/main/lib/modal'
 import NewNoteModal from 'browser/main/modals/NewNoteModal'
 import eventEmitter from 'browser/main/lib/eventEmitter'
+import i18n from 'browser/lib/i18n'

 const { remote } = require('electron')
 const { dialog } = remote
@@ -86,7 +87,7 @@ class NewNoteButton extends React.Component {
            onClick={(e) => this.handleNewNoteButtonClick(e)}>
            <img styleName='iconTag' src='../resources/icon/icon-newnote.svg' />
            <span styleName='control-newNoteButton-tooltip'>
-              Make a note {OSX ? '⌘' : 'Ctrl'} + N
+              {i18n.__('Make a note')} {OSX ? '⌘' : i18n.__('Ctrl')} + N
            </span>
          </button>
        </div>
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -1,3 +1,4 @@
+/* global electron */
 import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
@@ -13,10 +14,14 @@ import searchFromNotes from 'browser/lib/search'
 import fs from 'fs'
 import path from 'path'
 import { hashHistory } from 'react-router'
+import copy from 'copy-to-clipboard'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import Markdown from '../../lib/markdown'
+import i18n from 'browser/lib/i18n'

 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
+const WP_POST_PATH = '/wp/v2/posts'

 function sortByCreatedAt (a, b) {
  return new Date(b.createdAt) - new Date(a.createdAt)
@@ -31,7 +36,7 @@ function sortByUpdatedAt (a, b) {
 }

 function findNoteByKey (notes, noteKey) {
-  return notes.find((note) => `${note.storage}-${note.key}` === noteKey)
+  return notes.find((note) => note.key === noteKey)
 }

 function findNotesByKeys (notes, noteKeys) {
@@ -39,7 +44,7 @@ function findNotesByKeys (notes, noteKeys) {
 }

 function getNoteKey (note) {
-  return `${note.storage}-${note.key}`
+  return note.key
 }

 class NoteList extends React.Component {
@@ -70,6 +75,7 @@ class NoteList extends React.Component {
    this.getNoteFolder = this.getNoteFolder.bind(this)
    this.getViewType = this.getViewType.bind(this)
    this.restoreNote = this.restoreNote.bind(this)
+    this.copyNoteLink = this.copyNoteLink.bind(this)

    // TODO: not Selected noteKeys but SelectedNote(for reusing)
    this.state = {
@@ -114,10 +120,10 @@ class NoteList extends React.Component {
  componentDidUpdate (prevProps) {
    const { location } = this.props
    const { selectedNoteKeys } = this.state
-    const visibleNoteKeys = this.notes.map(note => `${note.storage}-${note.key}`)
+    const visibleNoteKeys = this.notes.map(note => note.key)
    const note = this.notes[0]
    const prevKey = prevProps.location.query.key
-    const noteKey = visibleNoteKeys.includes(prevKey) ? prevKey : note && `${note.storage}-${note.key}`
+    const noteKey = visibleNoteKeys.includes(prevKey) ? prevKey : note && note.key

    if (note && location.query.key == null) {
      const { router } = this.context
@@ -257,27 +263,38 @@ class NoteList extends React.Component {
  handleNoteListKeyDown (e) {
    if (e.metaKey || e.ctrlKey) return true

+    // A key
    if (e.keyCode === 65 && !e.shiftKey) {
      e.preventDefault()
      ee.emit('top:new-note')
    }

+    // D key
    if (e.keyCode === 68) {
      e.preventDefault()
      this.deleteNote()
    }

+    // E key
    if (e.keyCode === 69) {
      e.preventDefault()
      ee.emit('detail:focus')
    }

-    if (e.keyCode === 38) {
+    // F or S key
+    if (e.keyCode === 70 || e.keyCode === 83) {
+      e.preventDefault()
+      ee.emit('top:focus-search')
+    }
+
+    // UP or K key
+    if (e.keyCode === 38 || e.keyCode === 75) {
      e.preventDefault()
      this.selectPriorNote()
    }

-    if (e.keyCode === 40) {
+    // DOWN or J key
+    if (e.keyCode === 40 || e.keyCode === 74) {
      e.preventDefault()
      this.selectNextNote()
    }
@@ -458,6 +475,10 @@ class NoteList extends React.Component {
    const deleteLabel = 'Delete Note'
    const cloneNote = 'Clone Note'
    const restoreNote = 'Restore Note'
+    const copyNoteLink = 'Copy Note Link'
+    const publishLabel = 'Publish Blog'
+    const updateLabel = 'Update Blog'
+    const openBlogLabel = 'Open Blog'

    const menu = new Menu()
    if (!location.pathname.match(/\/starred|\/trash/)) {
@@ -482,6 +503,28 @@ class NoteList extends React.Component {
      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({
+          label: updateLabel,
+          click: this.publishMarkdown.bind(this)
+        }))
+        menu.append(new MenuItem({
+          label: openBlogLabel,
+          click: () => this.openBlog.bind(this)(note)
+        }))
+      } else {
+        menu.append(new MenuItem({
+          label: publishLabel,
+          click: this.publishMarkdown.bind(this)
+        }))
+      }
+    }
+
    menu.popup()
  }

@@ -548,11 +591,9 @@ class NoteList extends React.Component {
      })
      if (dialogueButtonIndex === 1) return
      Promise.all(
-        selectedNoteKeys.map((uniqueKey) => {
-          const storageKey = uniqueKey.split('-')[0]
-          const noteKey = uniqueKey.split('-')[1]
+        selectedNotes.map((note) => {
          return dataApi
-            .deleteNote(storageKey, noteKey)
+            .deleteNote(note.storage, note.key)
        })
      )
      .then((data) => {
@@ -613,23 +654,134 @@ class NoteList extends React.Component {
        content: firstNote.content
      })
      .then((note) => {
-        const uniqueKey = note.storage + '-' + note.key
        dispatch({
          type: 'UPDATE_NOTE',
          note: note
        })

        this.setState({
-          selectedNoteKeys: [uniqueKey]
+          selectedNoteKeys: [note.key]
        })

        hashHistory.push({
          pathname: location.pathname,
-          query: {key: uniqueKey}
+          query: {key: note.key}
        })
      })
  }

+  copyNoteLink (note) {
+    const noteLink = `[${note.title}](${note.key})`
+    return copy(noteLink)
+  }
+
+  save (note) {
+    const { dispatch } = this.props
+    dataApi
+      .updateNote(note.storage, note.key, note)
+      .then((note) => {
+        dispatch({
+          type: 'UPDATE_NOTE',
+          note: note
+        })
+      })
+  }
+
+  publishMarkdown () {
+    if (this.pendingPublish) {
+      clearTimeout(this.pendingPublish)
+    }
+    this.pendingPublish = setTimeout(() => {
+      this.publishMarkdownNow()
+    }, 1000)
+  }
+
+  publishMarkdownNow () {
+    const {selectedNoteKeys} = this.state
+    const notes = this.notes.map((note) => Object.assign({}, note))
+    const selectedNotes = findNotesByKeys(notes, selectedNoteKeys)
+    const firstNote = selectedNotes[0]
+    const config = ConfigManager.get()
+    const {address, token, authMethod, username, password} = config.blog
+    let authToken = ''
+    if (authMethod === 'USER') {
+      authToken = `Basic ${window.btoa(`${username}:${password}`)}`
+    } else {
+      authToken = `Bearer ${token}`
+    }
+    const contentToRender = firstNote.content.replace(`# ${firstNote.title}`, '')
+    const markdown = new Markdown()
+    const data = {
+      title: firstNote.title,
+      content: markdown.render(contentToRender),
+      status: 'publish'
+    }
+
+    let url = ''
+    let method = ''
+    if (firstNote.blog && firstNote.blog.blogId) {
+      url = `${address}${WP_POST_PATH}/${firstNote.blog.blogId}`
+      method = 'PUT'
+    } else {
+      url = `${address}${WP_POST_PATH}`
+      method = 'POST'
+    }
+    // eslint-disable-next-line no-undef
+    fetch(url, {
+      method: method,
+      body: JSON.stringify(data),
+      headers: {
+        'Authorization': authToken,
+        'Content-Type': 'application/json'
+      }
+    }).then(res => res.json())
+      .then(response => {
+        if (_.isNil(response.link) || _.isNil(response.id)) {
+          return Promise.reject()
+        }
+        firstNote.blog = {
+          blogLink: response.link,
+          blogId: response.id
+        }
+        this.save(firstNote)
+        this.confirmPublish(firstNote)
+      })
+      .catch((error) => {
+        console.error(error)
+        this.confirmPublishError()
+      })
+  }
+
+  confirmPublishError () {
+    const { remote } = electron
+    const { dialog } = remote
+    const alertError = {
+      type: 'warning',
+      message: 'Publish Failed',
+      detail: 'Check and update your blog setting and try again.',
+      buttons: ['Confirm']
+    }
+    dialog.showMessageBox(remote.getCurrentWindow(), alertError)
+  }
+
+  confirmPublish (note) {
+    const buttonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: 'Publish Succeeded',
+      detail: `${note.title} is published at ${note.blog.blogLink}`,
+      buttons: ['Confirm', 'Open Blog']
+    })
+
+    if (buttonIndex === 1) {
+      this.openBlog(note)
+    }
+  }
+
+  openBlog (note) {
+    const { shell } = electron
+    shell.openExternal(note.blog.blogLink)
+  }
+
  importFromFile () {
    const options = {
      filters: [
@@ -844,13 +996,13 @@ class NoteList extends React.Component {
              value={config.sortBy}
              onChange={(e) => this.handleSortByChange(e)}
            >
-              <option title='Sort by update time' value='UPDATED_AT'>Updated</option>
-              <option title='Sort by create time' value='CREATED_AT'>Created</option>
-              <option title='Sort alphabetically' value='ALPHABETICAL'>Alphabetically</option>
+              <option title='Sort by update time' value='UPDATED_AT'>{i18n.__('Updated')}</option>
+              <option title='Sort by create time' value='CREATED_AT'>{i18n.__('Created')}</option>
+              <option title='Sort alphabetically' value='ALPHABETICAL'>{i18n.__('Alphabetically')}</option>
            </select>
          </div>
          <div styleName='control-button-area'>
-            <button title='Default View' styleName={config.listStyle === 'DEFAULT'
+            <button title={i18n.__('Default View')} styleName={config.listStyle === 'DEFAULT'
                ? 'control-button--active'
                : 'control-button'
              }
@@ -858,7 +1010,7 @@ class NoteList extends React.Component {
            >
              <img styleName='iconTag' src='../resources/icon/icon-column.svg' />
            </button>
-            <button title='Compressed View' styleName={config.listStyle === 'SMALL'
+            <button title={i18n.__('Compressed View')} styleName={config.listStyle === 'SMALL'
                ? 'control-button--active'
                : 'control-button'
              }
--- a/browser/main/SideNav/ListButton.js
+++ b/browser/main/SideNav/ListButton.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SwitchButton.styl'
+import i18n from 'browser/lib/i18n'

 const ListButton = ({
  onClick, isTagActive
@@ -12,7 +13,7 @@ const ListButton = ({
        : '../resources/icon/icon-list-active.svg'
    }
    />
-    <span styleName='tooltip'>Notes</span>
+    <span styleName='tooltip'>{i18n.__('Notes')}</span>
  </button>
 )

--- a/browser/main/SideNav/PreferenceButton.js
+++ b/browser/main/SideNav/PreferenceButton.js
@@ -2,13 +2,14 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './PreferenceButton.styl'
+import i18n from 'browser/lib/i18n'

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

--- a/browser/main/SideNav/StorageItem.js
+++ b/browser/main/SideNav/StorageItem.js
@@ -9,6 +9,8 @@ import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
 import dataApi from 'browser/main/lib/dataApi'
 import StorageItemChild from 'browser/components/StorageItem'
 import _ from 'lodash'
+import { SortableElement } from 'react-sortable-hoc'
+import i18n from 'browser/lib/i18n'

 const { remote } = require('electron')
 const { Menu, dialog } = remote
@@ -43,9 +45,9 @@ class StorageItem extends React.Component {
  handleUnlinkStorageClick (e) {
    const index = dialog.showMessageBox(remote.getCurrentWindow(), {
      type: 'warning',
-      message: 'Unlink Storage',
-      detail: 'This work will just detatches a storage from Boostnote. (Any data won\'t be deleted.)',
-      buttons: ['Confirm', 'Cancel']
+      message: i18n.__('Unlink Storage'),
+      detail: i18n.__('This work will just detatches a storage from Boostnote. (Any data won\'t be deleted.)'),
+      buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
    })

    if (index === 0) {
@@ -159,9 +161,9 @@ class StorageItem extends React.Component {
  handleFolderDeleteClick (e, folder) {
    const index = dialog.showMessageBox(remote.getCurrentWindow(), {
      type: 'warning',
-      message: 'Delete Folder',
-      detail: 'This will delete all notes in the folder and can not be undone.',
-      buttons: ['Confirm', 'Cancel']
+      message: i18n.__('Delete Folder'),
+      detail: i18n.__('This will delete all notes in the folder and can not be undone.'),
+      buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
    })

    if (index === 0) {
@@ -191,33 +193,16 @@ class StorageItem extends React.Component {
  dropNote (storage, folder, dispatch, location, noteData) {
    noteData = noteData.filter((note) => folder.key !== note.folder)
    if (noteData.length === 0) return
-    const newNoteData = noteData.map((note) => Object.assign({}, note, {storage: storage, folder: folder.key}))

    Promise.all(
-      newNoteData.map((note) => dataApi.createNote(storage.key, note))
+      noteData.map((note) => dataApi.moveNote(note.storage, note.key, storage.key, folder.key))
    )
    .then((createdNoteData) => {
-      createdNoteData.forEach((note) => {
+      createdNoteData.forEach((newNote) => {
        dispatch({
-          type: 'UPDATE_NOTE',
-          note: note
-        })
-      })
-    })
-    .catch((err) => {
-      console.error(`error on create notes: ${err}`)
-    })
-    .then(() => {
-      return Promise.all(
-        noteData.map((note) => dataApi.deleteNote(note.storage, note.key))
-      )
-    })
-    .then((deletedNoteData) => {
-      deletedNoteData.forEach((note) => {
-        dispatch({
-          type: 'DELETE_NOTE',
-          storageKey: note.storageKey,
-          noteKey: note.noteKey
+          type: 'MOVE_NOTE',
+          originNote: noteData.find((note) => note.content === newNote.content),
+          note: newNote
        })
      })
    })
@@ -236,7 +221,8 @@ class StorageItem extends React.Component {
  render () {
    const { storage, location, isFolded, data, dispatch } = this.props
    const { folderNoteMap, trashedSet } = data
-    const folderList = storage.folders.map((folder) => {
+    const SortableStorageItemChild = SortableElement(StorageItemChild)
+    const folderList = storage.folders.map((folder, index) => {
      const isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
      const noteSet = folderNoteMap.get(storage.key + '-' + folder.key)

@@ -250,8 +236,9 @@ class StorageItem extends React.Component {
        noteCount = noteSet.size - trashedNoteCount
      }
      return (
-        <StorageItemChild
+        <SortableStorageItemChild
          key={folder.key}
+          index={index}
          isActive={isActive}
          handleButtonClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
          handleContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
@@ -273,9 +260,9 @@ class StorageItem extends React.Component {
        key={storage.key}
      >
        <div styleName={isActive
-            ? 'header--active'
-            : 'header'
-          }
+          ? 'header--active'
+          : 'header'
+        }
          onContextMenu={(e) => this.handleHeaderContextMenu(e)}
        >
          <button styleName='header-toggleButton'
@@ -284,7 +271,7 @@ class StorageItem extends React.Component {
            <img src={this.state.isOpen
              ? '../resources/icon/icon-down.svg'
              : '../resources/icon/icon-right.svg'
-              }
+            }
            />
          </button>

--- a/browser/main/SideNav/TagButton.js
+++ b/browser/main/SideNav/TagButton.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SwitchButton.styl'
+import i18n from 'browser/lib/i18n'

 const TagButton = ({
  onClick, isTagActive
@@ -12,7 +13,7 @@ const TagButton = ({
        : '../resources/icon/icon-tag.svg'
    }
    />
-    <span styleName='tooltip'>Tags</span>
+    <span styleName='tooltip'>{i18n.__('Tags')}</span>
  </button>
 )

--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -17,6 +17,7 @@ import EventEmitter from 'browser/main/lib/eventEmitter'
 import PreferenceButton from './PreferenceButton'
 import ListButton from './ListButton'
 import TagButton from './TagButton'
+import {SortableContainer} from 'react-sortable-hoc'

 class SideNav extends React.Component {
  // TODO: should not use electron stuff v0.7
@@ -68,6 +69,17 @@ class SideNav extends React.Component {
    router.push('/alltags')
  }

+  onSortEnd (storage) {
+    return ({oldIndex, newIndex}) => {
+      const { dispatch } = this.props
+      dataApi
+        .reorderFolder(storage.key, oldIndex, newIndex)
+        .then((data) => {
+          dispatch({ type: 'REORDER_FOLDER', storage: data.storage })
+        })
+    }
+  }
+
  SideNavComponent (isFolded, storageList) {
    const { location, data } = this.props

@@ -117,9 +129,9 @@ class SideNav extends React.Component {

  tagListComponent () {
    const { data, location } = this.props
-    const tagList = data.tagNoteMap.map((tag, name) => {
+    const tagList = _.sortBy(data.tagNoteMap.map((tag, name) => {
      return { name, size: tag.size }
-    })
+    }), ['name'])
    return (
      tagList.map(tag => {
        return (
@@ -148,10 +160,8 @@ class SideNav extends React.Component {

  emptyTrash (entries) {
    const { dispatch } = this.props
-    const deletionPromises = entries.map((storageAndNoteKey) => {
-      const storageKey = storageAndNoteKey.split('-')[0]
-      const noteKey = storageAndNoteKey.split('-')[1]
-      return dataApi.deleteNote(storageKey, noteKey)
+    const deletionPromises = entries.map((note) => {
+      return dataApi.deleteNote(note.storage, note.key)
    })
    Promise.all(deletionPromises)
    .then((arrayOfStorageAndNoteKeys) => {
@@ -167,9 +177,9 @@ class SideNav extends React.Component {

  handleFilterButtonContextMenu (event) {
    const { data } = this.props
-    const entries = data.trashedSet.toJS()
+    const trashedNotes = data.trashedSet.toJS().map((uniqueKey) => data.noteMap.get(uniqueKey))
    const menu = Menu.buildFromTemplate([
-      { label: 'Empty Trash', click: () => this.emptyTrash(entries) }
+      { label: 'Empty Trash', click: () => this.emptyTrash(trashedNotes) }
    ])
    menu.popup()
  }
@@ -180,13 +190,16 @@ class SideNav extends React.Component {
    const isFolded = config.isSideNavFolded

    const storageList = data.storageMap.map((storage, key) => {
-      return <StorageItem
+      const SortableStorageItem = SortableContainer(StorageItem)
+      return <SortableStorageItem
        key={storage.key}
        storage={storage}
        data={data}
        location={location}
        isFolded={isFolded}
        dispatch={dispatch}
+        onSortEnd={this.onSortEnd.bind(this)(storage)}
+        useDragHandle
      />
    })
    const style = {}
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -21,20 +21,19 @@
    color white

 .zoom
-  display none
-  // navButtonColor()
-  // color rgba(0,0,0,.54)
-  // height 20px
-  // display flex
-  // padding 0
-  // align-items center
-  // background-color transparent
-  // &:hover
-  //   color $ui-active-color
-  // &:active
-  //   color $ui-active-color
-  // span
-  //   margin-left 5px
+  navButtonColor()
+  color rgba(0,0,0,.54)
+  height 20px
+  display flex
+  padding 0
+  align-items center
+  background-color transparent
+  &:hover
+    color $ui-active-color
+  &:active
+    color $ui-active-color
+  span
+    margin-left 5px
  
 .update
  navButtonColor()
--- a/browser/main/StatusBar/index.js
+++ b/browser/main/StatusBar/index.js
@@ -3,6 +3,7 @@ import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
+import i18n from 'browser/lib/i18n'

 const electron = require('electron')
 const { remote, ipcRenderer } = electron
@@ -14,9 +15,9 @@ class StatusBar extends React.Component {
  updateApp () {
    const index = dialog.showMessageBox(remote.getCurrentWindow(), {
      type: 'warning',
-      message: 'Update Boostnote',
-      detail: 'New Boostnote is ready to be installed.',
-      buttons: ['Restart & Install', 'Not Now']
+      message: i18n.__('Update Boostnote'),
+      detail: i18n.__('New Boostnote is ready to be installed.'),
+      buttons: [i18n.__('Restart & Install'), i18n.__('Not Now')]
    })

    if (index === 0) {
@@ -62,7 +63,7 @@ class StatusBar extends React.Component {

        {status.updateReady
          ? <button onClick={this.updateApp} styleName='update'>
-            <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
+            <i styleName='update-icon' className='fa fa-cloud-download' /> {i18n.__('Ready to Update!')}
          </button>
          : null
        }
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -40,6 +40,32 @@ $control-height = 34px
    padding-bottom 2px
    background-color $ui-noteList-backgroundColor

+.control-search-input-clear
+  height 16px
+  width 16px
+  position absolute
+  right 40px
+  top 10px
+  z-index 300
+  border none
+  background-color transparent
+  color #999
+  &:hover .control-search-input-clear-tooltip
+    opacity 1
+
+.control-search-input-clear-tooltip
+  tooltip()
+  position fixed
+  pointer-events none
+  top 50px
+  left 433px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
 .control-search-optionList
  position fixed
  z-index 200
@@ -207,4 +233,4 @@ body[data-theme="solarized-dark"]
    background-color $ui-solarized-dark-noteList-backgroundColor
    input
      background-color $ui-solarized-dark-noteList-backgroundColor
-      color $ui-solarized-dark-text-color
+      color $ui-solarized-dark-text-color
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -5,6 +5,7 @@ import styles from './TopBar.styl'
 import _ from 'lodash'
 import ee from 'browser/main/lib/eventEmitter'
 import NewNoteButton from 'browser/main/NewNoteButton'
+import i18n from 'browser/lib/i18n'

 class TopBar extends React.Component {
  constructor (props) {
@@ -36,6 +37,17 @@ class TopBar extends React.Component {
    ee.off('code:init', this.codeInitHandler)
  }

+  handleSearchClearButton (e) {
+    const { router } = this.context
+    this.setState({
+      search: '',
+      isSearching: false
+    })
+    this.refs.search.childNodes[0].blur
+    router.push('/searched')
+    e.preventDefault()
+  }
+
  handleKeyDown (e) {
    // reset states
    this.setState({
@@ -43,6 +55,23 @@ class TopBar extends React.Component {
      isIME: false
    })

+    // Clear search on ESC
+    if (e.keyCode === 27) {
+      return this.handleSearchClearButton(e)
+    }
+
+    // Next note on DOWN key
+    if (e.keyCode === 40) {
+      ee.emit('list:next')
+      e.preventDefault()
+    }
+
+    // Prev note on UP key
+    if (e.keyCode === 38) {
+      ee.emit('list:prior')
+      e.preventDefault()
+    }
+
    // When the key is an alphabet, del, enter or ctr
    if (e.keyCode <= 90 || e.keyCode >= 186 && e.keyCode <= 222) {
      this.setState({
@@ -114,10 +143,12 @@ class TopBar extends React.Component {
  }

  handleOnSearchFocus () {
+    const el = this.refs.search.childNodes[0]
    if (this.state.isSearching) {
-      this.refs.search.childNodes[0].blur()
+      el.blur()
    } else {
-      this.refs.search.childNodes[0].focus()
+      el.focus()
+      el.setSelectionRange(0, el.value.length)
    }
  }

@@ -146,19 +177,19 @@ class TopBar extends React.Component {
                onChange={(e) => this.handleSearchChange(e)}
                onKeyDown={(e) => this.handleKeyDown(e)}
                onKeyUp={(e) => this.handleKeyUp(e)}
-                placeholder='Search'
+                placeholder={i18n.__('Search')}
                type='text'
                className='searchInput'
              />
+              {this.state.search !== '' &&
+                <button styleName='control-search-input-clear'
+                  onClick={(e) => this.handleSearchClearButton(e)}
+                >
+                  <i className='fa fa-fw fa-times' />
+                  <span styleName='control-search-input-clear-tooltip'>{i18n.__('Clear Search')}</span>
+                </button>
+              }
            </div>
-            {this.state.search > 0 &&
-              <button styleName='left-search-clearButton'
-                onClick={(e) => this.handleSearchClearButton(e)}
-              >
-                <i className='fa fa-times' />
-              </button>
-            }
-
          </div>
        </div>
        {location.pathname === '/trashed' ? ''
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -8,6 +8,7 @@ import { Router, Route, IndexRoute, IndexRedirect, hashHistory } from 'react-rou
 import { syncHistoryWithStore } from 'react-router-redux'
 require('./lib/ipcClient')
 require('../lib/customMeta')
+import i18n from 'browser/lib/i18n'

 const electron = require('electron')

@@ -46,9 +47,9 @@ function notify (...args) {
 function updateApp () {
  const index = dialog.showMessageBox(remote.getCurrentWindow(), {
    type: 'warning',
-    message: 'Update Boostnote',
-    detail: 'New Boostnote is ready to be installed.',
-    buttons: ['Restart & Install', 'Not Now']
+    message: i18n.__('Update Boostnote'),
+    detail: i18n.__('New Boostnote is ready to be installed.'),
+    buttons: [i18n.__('Restart & Install'), i18n.__('Not Now')]
  })

  if (index === 0) {
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import RcParser from 'browser/lib/RcParser'
+import i18n from 'browser/lib/i18n'

 const OSX = global.process.platform === 'darwin'
 const win = global.process.platform === 'win32'
@@ -21,6 +22,7 @@ export const DEFAULT_CONFIG = {
    toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E'
  },
  ui: {
+    language: 'en',
    theme: 'default',
    showCopyNotification: true,
    disableDirectWrite: false,
@@ -48,7 +50,16 @@ export const DEFAULT_CONFIG = {
    latexInlineClose: '$',
    latexBlockOpen: '$$',
    latexBlockClose: '$$',
-    scrollPastEnd: false
+    scrollPastEnd: false,
+    smartQuotes: true
+  },
+  blog: {
+    type: 'wordpress', // Available value: wordpress, add more types in the future plz
+    address: 'http://wordpress.com/wp-json',
+    authMethod: 'JWT', // Available value: JWT, USER
+    token: '',
+    username: '',
+    password: ''
  }
 }

@@ -124,6 +135,36 @@ function set (updates) {
    document.body.setAttribute('data-theme', 'default')
  }

+  if (newConfig.ui.language === 'sq') {
+    i18n.setLocale('sq')
+  } else if (newConfig.ui.language === 'zh-CN') {
+    i18n.setLocale('zh-CN')
+  } else if (newConfig.ui.language === 'zh-TW') {
+    i18n.setLocale('zh-TW')
+  } else if (newConfig.ui.language === 'da') {
+    i18n.setLocale('da')
+  } else if (newConfig.ui.language === 'fr') {
+    i18n.setLocale('fr')
+  } else if (newConfig.ui.language === 'de') {
+    i18n.setLocale('de')
+  } else if (newConfig.ui.language === 'ja') {
+    i18n.setLocale('ja')
+  } else if (newConfig.ui.language === 'ko') {
+    i18n.setLocale('ko')
+  } else if (newConfig.ui.language === 'no') {
+    i18n.setLocale('no')
+  } else if (newConfig.ui.language === 'pl') {
+    i18n.setLocale('pl')
+  } else if (newConfig.ui.language === 'pt') {
+    i18n.setLocale('pt')
+  } else if (newConfig.ui.language === 'ru') {
+    i18n.setLocale('ru')
+  } else if (newConfig.ui.language === 'es') {
+    i18n.setLocale('es')
+  } else {
+    i18n.setLocale('en')
+  }
+
  let editorTheme = document.getElementById('editorTheme')
  if (editorTheme == null) {
    editorTheme = document.createElement('link')
@@ -151,6 +192,7 @@ function set (updates) {
 function assignConfigValues (originalConfig, rcConfig) {
  const config = Object.assign({}, DEFAULT_CONFIG, originalConfig, rcConfig)
  config.hotkey = Object.assign({}, DEFAULT_CONFIG.hotkey, originalConfig.hotkey, rcConfig.hotkey)
+  config.blog = Object.assign({}, DEFAULT_CONFIG.blog, originalConfig.blog, rcConfig.blog)
  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)
--- a/browser/main/lib/dataApi/copyImage.js
+++ b/browser/main/lib/dataApi/copyImage.js
@@ -3,19 +3,20 @@ const path = require('path')
 const { findStorage } = require('browser/lib/findStorage')

 /**
- * @description To copy an image and return the path.
+ * @description Copy an image and return the path.
 * @param {String} filePath
 * @param {String} storageKey
- * @return {String} an image path
+ * @param {Boolean} rename create new filename or leave the old one
+ * @return {Promise<any>} an image path
 */
-function copyImage (filePath, storageKey) {
+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 = Math.random().toString(36).slice(-16)
+      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)
--- a/browser/main/lib/dataApi/createNote.js
+++ b/browser/main/lib/dataApi/createNote.js
@@ -52,12 +52,12 @@ function createNote (storageKey, input) {
      return storage
    })
    .then(function saveNote (storage) {
-      let key = keygen()
+      let key = keygen(true)
      let isUnique = false
      while (!isUnique) {
        try {
          sander.statSync(path.join(storage.path, 'notes', key + '.cson'))
-          key = keygen()
+          key = keygen(true)
        } catch (err) {
          if (err.code === 'ENOENT') {
            isUnique = true
--- a/browser/main/lib/dataApi/exportNote.js
+++ b/browser/main/lib/dataApi/exportNote.js
@@ -4,7 +4,7 @@ import {findStorage} from 'browser/lib/findStorage'
 const fs = require('fs')
 const path = require('path')

-const LOCAL_STORED_REGEX = /!\[(.*?)\]\(\s*?\/:storage\/(.*\.\S*?)\)/gi
+const LOCAL_STORED_REGEX = /!\[(.*?)]\(\s*?\/:storage\/(.*\.\S*?)\)/gi
 const IMAGES_FOLDER_NAME = 'images'

 /**
--- a/browser/main/lib/dataApi/moveNote.js
+++ b/browser/main/lib/dataApi/moveNote.js
@@ -1,10 +1,12 @@
 const resolveStorageData = require('./resolveStorageData')
 const _ = require('lodash')
 const path = require('path')
+const fs = require('fs')
 const CSON = require('@rokt33r/season')
 const keygen = require('browser/lib/keygen')
 const sander = require('sander')
 const { findStorage } = require('browser/lib/findStorage')
+const copyImage = require('./copyImage')

 function moveNote (storageKey, noteKey, newStorageKey, newFolderKey) {
  let oldStorage, newStorage
@@ -37,12 +39,12 @@ function moveNote (storageKey, noteKey, newStorageKey, newFolderKey) {
          return resolveStorageData(newStorage)
            .then(function findNewNoteKey (_newStorage) {
              newStorage = _newStorage
-              newNoteKey = keygen()
+              newNoteKey = keygen(true)
              let isUnique = false
              while (!isUnique) {
                try {
                  sander.statSync(path.join(newStorage.path, 'notes', newNoteKey + '.cson'))
-                  newNoteKey = keygen()
+                  newNoteKey = keygen(true)
                } catch (err) {
                  if (err.code === 'ENOENT') {
                    isUnique = true
@@ -65,6 +67,27 @@ function moveNote (storageKey, noteKey, newStorageKey, newFolderKey) {

          return noteData
        })
+        .then(function moveImages (noteData) {
+          const searchImagesRegex = /!\[.*?]\(\s*?\/:storage\/(.*\.\S*?)\)/gi
+          let match = searchImagesRegex.exec(noteData.content)
+
+          const moveTasks = []
+          while (match != null) {
+            const [, filename] = match
+            const oldPath = path.join(oldStorage.path, 'images', filename)
+            moveTasks.push(
+                copyImage(oldPath, noteData.storage, false)
+                .then(() => {
+                  fs.unlinkSync(oldPath)
+                })
+            )
+
+            // find next occurence
+            match = searchImagesRegex.exec(noteData.content)
+          }
+
+          return Promise.all(moveTasks).then(() => noteData)
+        })
        .then(function writeAndReturn (noteData) {
          CSON.writeFileSync(path.join(newStorage.path, 'notes', noteData.key + '.cson'), _.omit(noteData, ['key', 'storage']))
          return noteData
--- a/browser/main/lib/dataApi/updateNote.js
+++ b/browser/main/lib/dataApi/updateNote.js
@@ -30,6 +30,9 @@ function validateInput (input) {
    validatedInput.isPinned = !!input.isPinned
  }

+  if (!_.isNil(input.blog)) {
+    validatedInput.blog = input.blog
+  }
  validatedInput.type = input.type
  switch (input.type) {
    case 'MARKDOWN_NOTE':
--- a/browser/main/modals/NewNoteModal.js
+++ b/browser/main/modals/NewNoteModal.js
@@ -6,6 +6,7 @@ import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
 import ModalEscButton from 'browser/components/ModalEscButton'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import i18n from 'browser/lib/i18n'

 class NewNoteModal extends React.Component {
  constructor (props) {
@@ -35,7 +36,7 @@ class NewNoteModal extends React.Component {
        content: ''
      })
      .then((note) => {
-        const noteHash = `${note.storage}-${note.key}`
+        const noteHash = note.key
        dispatch({
          type: 'UPDATE_NOTE',
          note: note
@@ -75,7 +76,7 @@ class NewNoteModal extends React.Component {
        }]
      })
      .then((note) => {
-        const noteHash = `${note.storage}-${note.key}`
+        const noteHash = note.key
        dispatch({
          type: 'UPDATE_NOTE',
          note: note
@@ -122,8 +123,8 @@ class NewNoteModal extends React.Component {
            <i styleName='control-button-icon'
              className='fa fa-file-text-o'
            /><br />
-            <span styleName='control-button-label'>Markdown Note</span><br />
-            <span styleName='control-button-description'>This format is for creating text documents. Checklists, code blocks and Latex blocks are available.</span>
+            <span styleName='control-button-label'>{i18n.__('Markdown Note')}</span><br />
+            <span styleName='control-button-description'>{i18n.__('This format is for creating text documents. Checklists, code blocks and Latex blocks are available.')}</span>
          </button>

          <button styleName='control-button'
@@ -134,13 +135,13 @@ class NewNoteModal extends React.Component {
            <i styleName='control-button-icon'
              className='fa fa-code'
            /><br />
-            <span styleName='control-button-label'>Snippet Note</span><br />
-            <span styleName='control-button-description'>This format is for creating code snippets. Multiple snippets can be grouped into a single note.
+            <span styleName='control-button-label'>{i18n.__('Snippet Note')}</span><br />
+            <span styleName='control-button-description'>{i18n.__('This format is for creating code snippets. Multiple snippets can be grouped into a single note.')}
            </span>
          </button>

        </div>
-        <div styleName='description'><i className='fa fa-arrows-h' /> Tab to switch format</div>
+        <div styleName='description'><i className='fa fa-arrows-h' />{i18n.__('Tab to switch format')}</div>

      </div>
    )
--- a/browser/main/modals/PreferencesModal/Blog.js
+++ b/browser/main/modals/PreferencesModal/Blog.js
@@ -0,0 +1,199 @@
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ConfigTab.styl'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import store from 'browser/main/store'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import i18n from 'browser/lib/i18n'
+
+const electron = require('electron')
+const { shell } = electron
+const ipc = electron.ipcRenderer
+class Blog extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      config: props.config,
+      BlogAlert: null
+    }
+  }
+
+  handleLinkClick (e) {
+    shell.openExternal(e.currentTarget.href)
+    e.preventDefault()
+  }
+
+  clearMessage () {
+    _.debounce(() => {
+      this.setState({
+        BlogAlert: null
+      })
+    }, 2000)()
+  }
+
+  componentDidMount () {
+    this.handleSettingDone = () => {
+      this.setState({BlogAlert: {
+        type: 'success',
+        message: i18n.__('Successfully applied!')
+      }})
+    }
+    this.handleSettingError = (err) => {
+      this.setState({BlogAlert: {
+        type: 'error',
+        message: err.message != null ? err.message : 'Error occurs!'
+      }})
+    }
+    this.oldBlog = this.state.config.blog
+    ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
+  handleBlogChange (e) {
+    const { config } = this.state
+    config.blog = {
+      password: !_.isNil(this.refs.passwordInput) ? this.refs.passwordInput.value : config.blog.password,
+      username: !_.isNil(this.refs.usernameInput) ? this.refs.usernameInput.value : config.blog.username,
+      token: !_.isNil(this.refs.tokenInput) ? this.refs.tokenInput.value : config.blog.token,
+      authMethod: this.refs.authMethodDropdown.value,
+      address: this.refs.addressInput.value,
+      type: this.refs.typeDropdown.value
+    }
+    this.setState({
+      config
+    })
+    if (_.isEqual(this.oldBlog, config.blog)) {
+      this.props.haveToSave()
+    } else {
+      this.props.haveToSave({
+        tab: 'Blog',
+        type: 'warning',
+        message: 'You have to save!'
+      })
+    }
+  }
+
+  handleSaveButtonClick (e) {
+    const newConfig = {
+      blog: this.state.config.blog
+    }
+
+    ConfigManager.set(newConfig)
+
+    store.dispatch({
+      type: 'SET_UI',
+      config: newConfig
+    })
+    this.clearMessage()
+    this.props.haveToSave()
+  }
+
+  render () {
+    const {config, BlogAlert} = this.state
+    const blogAlertElement = BlogAlert != null
+      ? <p className={`alert ${BlogAlert.type}`}>
+        {BlogAlert.message}
+      </p>
+      : null
+    return (
+      <div styleName='root'>
+        <div styleName='group'>
+          <div styleName='group-header'>{i18n.__('Blog')}</div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Blog Type')}
+            </div>
+            <div styleName='group-section-control'>
+              <select
+                value={config.blog.type}
+                ref='typeDropdown'
+                onChange={(e) => this.handleBlogChange(e)}
+              >
+                <option value='wordpress' key='wordpress'>wordpress</option>
+              </select>
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Blog Address')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleBlogChange(e)}
+                ref='addressInput'
+                value={config.blog.address}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-control'>
+            <button styleName='group-control-rightButton'
+              onClick={(e) => this.handleSaveButtonClick(e)}>{i18n.__('Save')}
+            </button>
+            {blogAlertElement}
+          </div>
+        </div>
+        <div styleName='group-header2'>{i18n.__('Auth')}</div>
+
+        <div styleName='group-section'>
+          <div styleName='group-section-label'>
+            {i18n.__('Authentication Method')}
+          </div>
+          <div styleName='group-section-control'>
+            <select
+              value={config.blog.authMethod}
+              ref='authMethodDropdown'
+              onChange={(e) => this.handleBlogChange(e)}
+            >
+              <option value='JWT' key='JWT'>{i18n.__('JWT')}</option>
+              <option value='USER' key='USER'>{i18n.__('USER')}</option>
+            </select>
+          </div>
+        </div>
+        { config.blog.authMethod === 'JWT' &&
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Token')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleBlogChange(e)}
+                ref='tokenInput'
+                value={config.blog.token}
+                type='text' />
+            </div>
+          </div>
+        }
+        { config.blog.authMethod === 'USER' &&
+          <div>
+            <div styleName='group-section'>
+              <div styleName='group-section-label'>{i18n.__('UserName')}</div>
+              <div styleName='group-section-control'>
+                <input styleName='group-section-control-input'
+                  onChange={(e) => this.handleBlogChange(e)}
+                  ref='usernameInput'
+                  value={config.blog.username}
+                  type='text' />
+              </div>
+            </div>
+            <div styleName='group-section'>
+              <div styleName='group-section-label'>{i18n.__('Password')}</div>
+              <div styleName='group-section-control'>
+                <input styleName='group-section-control-input'
+                  onChange={(e) => this.handleBlogChange(e)}
+                  ref='passwordInput'
+                  value={config.blog.password}
+                  type='password' />
+              </div>
+            </div>
+          </div>
+        }
+      </div>
+    )
+  }
+}
+
+Blog.propTypes = {
+  dispatch: PropTypes.func,
+  haveToSave: PropTypes.func
+}
+
+export default CSSModules(Blog, styles)
--- a/browser/main/modals/PreferencesModal/Crowdfunding.js
+++ b/browser/main/modals/PreferencesModal/Crowdfunding.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './Crowdfunding.styl'
+import i18n from 'browser/lib/i18n'

 const electron = require('electron')
 const { shell } = electron
@@ -21,22 +22,22 @@ class Crowdfunding extends React.Component {
  render () {
    return (
      <div styleName='root'>
-        <div styleName='header'>Crowdfunding</div>
-        <p>Dear everyone,</p>
+        <div styleName='header'>{i18n.__('Crowdfunding')}</div>
+        <p>{i18n.__('Dear everyone,')}</p>
        <br />
-        <p>Thank you for using Boostnote!</p>
-        <p>Boostnote is used in about 200 different countries and regions by an awesome community of developers.</p>
+        <p>{i18n.__('Thank you for using Boostnote!')}</p>
+        <p>{i18n.__('Boostnote is used in about 200 different countries and regions by an awesome community of developers.')}</p>
        <br />
-        <p>To continue supporting this growth, and to satisfy community expectations,</p>
-        <p>we would like to invest more time and resources in this project.</p>
+        <p>{i18n.__('To continue supporting this growth, and to satisfy community expectations,')}</p>
+        <p>{i18n.__('we would like to invest more time and resources in this project.')}</p>
        <br />
-        <p>If you like this project and see its potential, you can help by supporting us on OpenCollective!</p>
+        <p>{i18n.__('If you like this project and see its potential, you can help by supporting us on OpenCollective!')}</p>
        <br />
-        <p>Thanks,</p>
-        <p>Boostnote maintainers</p>
+        <p>{i18n.__('Thanks,')}</p>
+        <p>{i18n.__('Boostnote maintainers')}</p>
        <br />
        <button styleName='cf-link'>
-          <a href='https://opencollective.com/boostnoteio' onClick={(e) => this.handleLinkClick(e)}>Support via OpenCollective</a>
+          <a href='https://opencollective.com/boostnoteio' onClick={(e) => this.handleLinkClick(e)}>{i18n.__('Support via OpenCollective')}</a>
        </button>
      </div>
    )
--- a/browser/main/modals/PreferencesModal/FolderItem.js
+++ b/browser/main/modals/PreferencesModal/FolderItem.js
@@ -7,6 +7,7 @@ import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import { SketchPicker } from 'react-color'
 import { SortableElement, SortableHandle } from 'react-sortable-hoc'
+import i18n from 'browser/lib/i18n'

 class FolderItem extends React.Component {
  constructor (props) {
@@ -179,18 +180,18 @@ class FolderItem extends React.Component {
    return (
      <div styleName='folderItem'>
        <div styleName='folderItem-left'>
-          Are you sure to <span styleName='folderItem-left-danger'>delete</span> this folder?
+          {i18n.__('Are you sure to ')} <span styleName='folderItem-left-danger'>{i18n.__(' delete')}</span> {i18n.__('this folder?')}
        </div>
        <div styleName='folderItem-right'>
          <button styleName='folderItem-right-dangerButton'
            onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
          >
-            Confirm
+            {i18n.__('Confirm')}
          </button>
          <button styleName='folderItem-right-button'
            onClick={(e) => this.handleCancelButtonClick(e)}
          >
-            Cancel
+            {i18n.__('Cancel')}
          </button>
        </div>
      </div>
@@ -231,12 +232,12 @@ class FolderItem extends React.Component {
          <button styleName='folderItem-right-button'
            onClick={(e) => this.handleEditButtonClick(e)}
          >
-            Edit
+            {i18n.__('Edit')}
          </button>
          <button styleName='folderItem-right-button'
            onClick={(e) => this.handleDeleteButtonClick(e)}
          >
-            Delete
+            {i18n.__('Delete')}
          </button>
        </div>
      </div>
--- a/browser/main/modals/PreferencesModal/HotkeyTab.js
+++ b/browser/main/modals/PreferencesModal/HotkeyTab.js
@@ -5,6 +5,7 @@ import styles from './ConfigTab.styl'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
 import _ from 'lodash'
+import i18n from 'browser/lib/i18n'

 const electron = require('electron')
 const ipc = electron.ipcRenderer
@@ -23,7 +24,7 @@ class HotkeyTab extends React.Component {
    this.handleSettingDone = () => {
      this.setState({keymapAlert: {
        type: 'success',
-        message: 'Successfully applied!'
+        message: i18n.__('Successfully applied!')
      }})
    }
    this.handleSettingError = (err) => {
@@ -77,7 +78,7 @@ class HotkeyTab extends React.Component {
      this.props.haveToSave({
        tab: 'Hotkey',
        type: 'warning',
-        message: 'You have to save!'
+        message: i18n.__('You have to save!')
      })
    }
  }
@@ -102,9 +103,9 @@ class HotkeyTab extends React.Component {
    return (
      <div styleName='root'>
        <div styleName='group'>
-          <div styleName='group-header'>Hotkeys</div>
+          <div styleName='group-header'>{i18n.__('Hotkeys')}</div>
          <div styleName='group-section'>
-            <div styleName='group-section-label'>Show/Hide Boostnote</div>
+            <div styleName='group-section-label'>{i18n.__('Show/Hide Boostnote')}</div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
                onChange={(e) => this.handleHotkeyChange(e)}
@@ -124,7 +125,7 @@ class HotkeyTab extends React.Component {
              }
            </button>
            <button styleName='group-control-rightButton'
-              onClick={(e) => this.handleSaveButtonClick(e)}>Save
+              onClick={(e) => this.handleSaveButtonClick(e)}>{i18n.__('Save')}
            </button>
            {keymapAlertElement}
          </div>
--- a/browser/main/modals/PreferencesModal/InfoTab.js
+++ b/browser/main/modals/PreferencesModal/InfoTab.js
@@ -5,6 +5,7 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import _ from 'lodash'
+import i18n from 'browser/lib/i18n'

 const electron = require('electron')
 const { shell, remote } = electron
@@ -38,11 +39,11 @@ class InfoTab extends React.Component {
    if (!newConfig.amaEnabled) {
      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('DISABLE_AMA')
      this.setState({
-        amaMessage: 'We hope we will gain your trust'
+        amaMessage: i18n.__('We hope we will gain your trust')
      })
    } else {
      this.setState({
-        amaMessage: 'Thank\'s for trust us'
+        amaMessage: i18n.__('Thank\'s for trusting us')
      })
    }

@@ -69,48 +70,48 @@ class InfoTab extends React.Component {
    return (
      <div styleName='root'>

-        <div styleName='header--sub'>Community</div>
+        <div styleName='header--sub'>{i18n.__('Community')}</div>
        <div styleName='top'>
          <ul styleName='list'>
            <li>
              <a href='https://boostnote.io/#subscribe'
                onClick={(e) => this.handleLinkClick(e)}
-              >Subscribe to Newsletter</a>
+              >{i18n.__('Subscribe to Newsletter')}</a>
            </li>
            <li>
              <a href='https://github.com/BoostIO/Boostnote/issues'
                onClick={(e) => this.handleLinkClick(e)}
-              >GitHub</a>
+              >{i18n.__('GitHub')}</a>
            </li>
            <li>
              <a href='https://boostlog.io/@junp1234'
                onClick={(e) => this.handleLinkClick(e)}
-              >Blog</a>
+              >{i18n.__('Blog')}</a>
            </li>
            <li>
              <a href='https://www.facebook.com/groups/boostnote'
                onClick={(e) => this.handleLinkClick(e)}
-              >Facebook Group</a>
+              >{i18n.__('Facebook Group')}</a>
            </li>
            <li>
              <a href='https://twitter.com/boostnoteapp'
                onClick={(e) => this.handleLinkClick(e)}
-              >Twitter</a>
+              >{i18n.__('Twitter')}</a>
            </li>
          </ul>
        </div>

        <hr />

-        <div styleName='header--sub'>About</div>
+        <div styleName='header--sub'>{i18n.__('About')}</div>

        <div styleName='top'>
          <div styleName='icon-space'>
            <img styleName='icon' src='../resources/app.png' width='92' height='92' />
            <div styleName='icon-right'>
-              <div styleName='appId'>Boostnote {appVersion}</div>
+              <div styleName='appId'>{i18n.__('Boostnote')} {appVersion}</div>
              <div styleName='description'>
-                An open source note-taking app made for programmers just like you.
+                {i18n.__('An open source note-taking app made for programmers just like you.')}
              </div>
            </div>
          </div>
@@ -120,35 +121,35 @@ class InfoTab extends React.Component {
          <li>
            <a href='https://boostnote.io'
              onClick={(e) => this.handleLinkClick(e)}
-            >Website</a>
+            >{i18n.__('Website')}</a>
          </li>
          <li>
            <a href='https://github.com/BoostIO/Boostnote/blob/master/docs/build.md'
              onClick={(e) => this.handleLinkClick(e)}
-            >Development</a> : Development configurations for Boostnote.
+            >{i18n.__('Development')}</a>{i18n.__(' : Development configurations for Boostnote.')}
          </li>
          <li styleName='cc'>
-            Copyright (C) 2017 - 2018 BoostIO
+            {i18n.__('Copyright (C) 2017 - 2018 BoostIO')}
          </li>
          <li styleName='cc'>
-            License: GPL v3
+            {i18n.__('License: GPL v3')}
          </li>
        </ul>

        <hr styleName='separate-line' />

-        <div styleName='policy'>Analytics</div>
-        <div>Boostnote collects anonymous data for the sole purpose of improving the application, and strictly does not collect any personal information such the contents of your notes.</div>
-        <div>You can see how it works on <a href='https://github.com/BoostIO/Boostnote' onClick={(e) => this.handleLinkClick(e)}>GitHub</a>.</div>
+        <div styleName='policy'>{i18n.__('Analytics')}</div>
+        <div>{i18n.__('Boostnote collects anonymous data for the sole purpose of improving the application, and strictly does not collect any personal information such the contents of your notes.')}</div>
+        <div>{i18n.__('You can see how it works on ')}<a href='https://github.com/BoostIO/Boostnote' onClick={(e) => this.handleLinkClick(e)}>GitHub</a>.</div>
        <br />
-        <div>You can choose to enable or disable this option.</div>
+        <div>{i18n.__('You can choose to enable or disable this option.')}</div>
        <input onChange={(e) => this.handleConfigChange(e)}
          checked={this.state.config.amaEnabled}
          ref='amaEnabled'
          type='checkbox'
        />
-        Enable analytics to help improve Boostnote<br />
-        <button styleName='policy-submit' onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
+        {i18n.__('Enable analytics to help improve Boostnote')}<br />
+        <button styleName='policy-submit' onClick={(e) => this.handleSaveButtonClick(e)}>{i18n.__('Save')}</button>
        <br />
        {this.infoMessage()}
      </div>
--- a/browser/main/modals/PreferencesModal/StorageItem.js
+++ b/browser/main/modals/PreferencesModal/StorageItem.js
@@ -6,6 +6,7 @@ import consts from 'browser/lib/consts'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import FolderList from './FolderList'
+import i18n from 'browser/lib/i18n'

 const { shell, remote } = require('electron')
 const { dialog } = remote
@@ -46,9 +47,9 @@ class StorageItem extends React.Component {
  handleUnlinkButtonClick (e) {
    const index = dialog.showMessageBox(remote.getCurrentWindow(), {
      type: 'warning',
-      message: 'Unlink Storage',
-      detail: 'Unlinking removes this linked storage from Boostnote. No data is removed, please manually delete the folder from your hard drive if needed.',
-      buttons: ['Unlink', 'Cancel']
+      message: i18n.__('Unlink Storage'),
+      detail: i18n.__('Unlinking removes this linked storage from Boostnote. No data is removed, please manually delete the folder from your hard drive if needed.'),
+      buttons: [i18n.__('Unlink'), i18n.__('Cancel')]
    })

    if (index === 0) {
@@ -127,7 +128,7 @@ class StorageItem extends React.Component {
              <i className='fa fa-plus' />
              <span styleName='header-control-button-tooltip'
                style={{left: -20}}
-              >Add Folder</span>
+              >{i18n.__('Add Folder')}</span>
            </button>
            <button styleName='header-control-button'
              onClick={(e) => this.handleExternalButtonClick(e)}
@@ -135,7 +136,7 @@ class StorageItem extends React.Component {
              <i className='fa fa-external-link' />
              <span styleName='header-control-button-tooltip'
                style={{left: -50}}
-              >Open Storage folder</span>
+              >{i18n.__('Open Storage folder')}</span>
            </button>
            <button styleName='header-control-button'
              onClick={(e) => this.handleUnlinkButtonClick(e)}
@@ -143,7 +144,7 @@ class StorageItem extends React.Component {
              <i className='fa fa-unlink' />
              <span styleName='header-control-button-tooltip'
                style={{left: -10}}
-              >Unlink</span>
+              >{i18n.__('Unlink')}</span>
            </button>
          </div>
        </div>
--- a/browser/main/modals/PreferencesModal/StoragesTab.js
+++ b/browser/main/modals/PreferencesModal/StoragesTab.js
@@ -4,6 +4,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './StoragesTab.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import StorageItem from './StorageItem'
+import i18n from 'browser/lib/i18n'

 const electron = require('electron')
 const { shell, remote } = electron
@@ -69,16 +70,16 @@ class StoragesTab extends React.Component {
    })
    return (
      <div styleName='list'>
-        <div styleName='header'>Storages</div>
+        <div styleName='header'>{i18n.__('Storages')}</div>
        {storageList.length > 0
          ? storageList
-          : <div styleName='list-empty'>No storage found.</div>
+          : <div styleName='list-empty'>{i18n.__('No storage found.')}</div>
        }
        <div styleName='list-control'>
          <button styleName='list-control-addStorageButton'
            onClick={(e) => this.handleAddStorageButton(e)}
          >
-            <i className='fa fa-plus' /> Add Storage Location
+            <i className='fa fa-plus' /> {i18n.__('Add Storage Location')}
          </button>
        </div>
      </div>
@@ -140,13 +141,13 @@ class StoragesTab extends React.Component {
    return (
      <div styleName='addStorage'>

-        <div styleName='addStorage-header'>Add Storage</div>
+        <div styleName='addStorage-header'>{i18n.__('Add Storage')}</div>

        <div styleName='addStorage-body'>

          <div styleName='addStorage-body-section'>
            <div styleName='addStorage-body-section-label'>
-              Name
+              {i18n.__('Name')}
            </div>
            <div styleName='addStorage-body-section-name'>
              <input styleName='addStorage-body-section-name-input'
@@ -158,25 +159,25 @@ class StoragesTab extends React.Component {
          </div>

          <div styleName='addStorage-body-section'>
-            <div styleName='addStorage-body-section-label'>Type</div>
+            <div styleName='addStorage-body-section-label'>{i18n.__('Type')}</div>
            <div styleName='addStorage-body-section-type'>
              <select styleName='addStorage-body-section-type-select'
                value={this.state.newStorage.type}
                readOnly
              >
-                <option value='FILESYSTEM'>File System</option>
+                <option value='FILESYSTEM'>{i18n.__('File System')}</option>
              </select>
              <div styleName='addStorage-body-section-type-description'>
-                Setting up 3rd-party cloud storage integration:{' '}
+                {i18n.__('Setting up 3rd-party cloud storage integration:')}{' '}
                <a href='https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup'
                  onClick={(e) => this.handleLinkClick(e)}
-                >Cloud-Syncing-and-Backup</a>
+                >{i18n.__('Cloud-Syncing-and-Backup')}</a>
              </div>
            </div>
          </div>

          <div styleName='addStorage-body-section'>
-            <div styleName='addStorage-body-section-label'>Location
+            <div styleName='addStorage-body-section-label'>{i18n.__('Location')}
            </div>
            <div styleName='addStorage-body-section-path'>
              <input styleName='addStorage-body-section-path-input'
@@ -196,10 +197,10 @@ class StoragesTab extends React.Component {
          <div styleName='addStorage-body-control'>
            <button styleName='addStorage-body-control-createButton'
              onClick={(e) => this.handleAddStorageCreateButton(e)}
-            >Add</button>
+            >{i18n.__('Add')}</button>
            <button styleName='addStorage-body-control-cancelButton'
              onClick={(e) => this.handleAddStorageCancelButton(e)}
-            >Cancel</button>
+            >{i18n.__('Cancel')}</button>
          </div>

        </div>
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -9,6 +9,7 @@ import ReactCodeMirror from 'react-codemirror'
 import CodeMirror from 'codemirror'
 import 'codemirror-mode-elixir'
 import _ from 'lodash'
+import i18n from 'browser/lib/i18n'

 const OSX = global.process.platform === 'darwin'

@@ -29,7 +30,7 @@ class UiTab extends React.Component {
    this.handleSettingDone = () => {
      this.setState({UiAlert: {
        type: 'success',
-        message: 'Successfully applied!'
+        message: i18n.__('Successfully applied!')
      }})
    }
    this.handleSettingError = (err) => {
@@ -61,6 +62,7 @@ class UiTab extends React.Component {
    const newConfig = {
      ui: {
        theme: this.refs.uiTheme.value,
+        language: this.refs.uiLanguage.value,
        showCopyNotification: this.refs.showCopyNotification.checked,
        confirmDeletion: this.refs.confirmDeletion.checked,
        disableDirectWrite: this.refs.uiD2w != null
@@ -88,7 +90,8 @@ class UiTab extends React.Component {
        latexInlineClose: this.refs.previewLatexInlineClose.value,
        latexBlockOpen: this.refs.previewLatexBlockOpen.value,
        latexBlockClose: this.refs.previewLatexBlockClose.value,
-        scrollPastEnd: this.refs.previewScrollPastEnd.checked
+        scrollPastEnd: this.refs.previewScrollPastEnd.checked,
+        smartQuotes: this.refs.previewSmartQuotes.checked
      }
    }

@@ -106,7 +109,7 @@ class UiTab extends React.Component {
        this.props.haveToSave({
          tab: 'UI',
          type: 'warning',
-          message: 'You have to save!'
+          message: i18n.__('You have to save!')
        })
      }
    })
@@ -151,22 +154,48 @@ class UiTab extends React.Component {
    return (
      <div styleName='root'>
        <div styleName='group'>
-          <div styleName='group-header'>Interface</div>
+          <div styleName='group-header'>{i18n.__('Interface')}</div>

          <div styleName='group-section'>
-            Interface Theme
+            {i18n.__('Interface Theme')}
            <div styleName='group-section-control'>
              <select value={config.ui.theme}
                onChange={(e) => this.handleUIChange(e)}
                ref='uiTheme'
              >
-                <option value='default'>Default</option>
-                <option value='white'>White</option>
-                <option value='solarized-dark'>Solarized Dark</option>
-                <option value='dark'>Dark</option>
+                <option value='default'>{i18n.__('Default')}</option>
+                <option value='white'>{i18n.__('White')}</option>
+                <option value='solarized-dark'>{i18n.__('Solarized Dark')}</option>
+                <option value='dark'>{i18n.__('Dark')}</option>
              </select>
            </div>
          </div>
+
+          <div styleName='group-section'>
+            {i18n.__('Language')}
+            <div styleName='group-section-control'>
+              <select value={config.ui.language}
+                onChange={(e) => this.handleUIChange(e)}
+                ref='uiLanguage'
+              >
+                <option value='sq'>{i18n.__('Albanian')}</option>
+                <option value='zh-CN'>{i18n.__('Chinese (zh-CN)')}</option>
+                <option value='zh-TW'>{i18n.__('Chinese (zh-TW)')}</option>
+                <option value='da'>{i18n.__('Danish')}</option>
+                <option value='en'>{i18n.__('English')}</option>
+                <option value='fr'>{i18n.__('French')}</option>
+                <option value='de'>{i18n.__('German')}</option>
+                <option value='ja'>{i18n.__('Japanese')}</option>
+                <option value='ko'>{i18n.__('Korean')}</option>
+                <option value='no'>{i18n.__('Norwegian')}</option>
+                <option value='pl'>{i18n.__('Polish')}</option>
+                <option value='pt'>{i18n.__('Portuguese')}</option>
+                <option value='ru'>{i18n.__('Russian')}</option>
+                <option value='es'>{i18n.__('Spanish')}</option>
+              </select>
+            </div>
+          </div>
+
          <div styleName='group-checkBoxSection'>
            <label>
              <input onChange={(e) => this.handleUIChange(e)}
@@ -174,7 +203,7 @@ class UiTab extends React.Component {
                ref='showCopyNotification'
                type='checkbox'
              />&nbsp;
-              Show &quot;Saved to Clipboard&quot; notification when copying
+              {i18n.__('Show "Saved to Clipboard" notification when copying')}
            </label>
          </div>
          <div styleName='group-checkBoxSection'>
@@ -184,7 +213,7 @@ class UiTab extends React.Component {
                ref='confirmDeletion'
                type='checkbox'
              />&nbsp;
-              Show a confirmation dialog when deleting notes
+              {i18n.__('Show a confirmation dialog when deleting notes')}
            </label>
          </div>
          {
@@ -206,7 +235,7 @@ class UiTab extends React.Component {

          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Editor Theme
+              {i18n.__('Editor Theme')}
            </div>
            <div styleName='group-section-control'>
              <select value={config.editor.theme}
@@ -226,7 +255,7 @@ class UiTab extends React.Component {
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Editor Font Size
+              {i18n.__('Editor Font Size')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -239,7 +268,7 @@ class UiTab extends React.Component {
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Editor Font Family
+              {i18n.__('Editor Font Family')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -252,7 +281,7 @@ class UiTab extends React.Component {
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Editor Indent Style
+              {i18n.__('Editor Indent Style')}
            </div>
            <div styleName='group-section-control'>
              <select value={config.editor.indentSize}
@@ -268,42 +297,42 @@ class UiTab extends React.Component {
                ref='editorIndentType'
                onChange={(e) => this.handleUIChange(e)}
              >
-                <option value='space'>Spaces</option>
-                <option value='tab'>Tabs</option>
+                <option value='space'>{i18n.__('Spaces')}</option>
+                <option value='tab'>{i18n.__('Tabs')}</option>
              </select>
            </div>
          </div>

          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Switch to Preview
+              {i18n.__('Switch to Preview')}
            </div>
            <div styleName='group-section-control'>
              <select value={config.editor.switchPreview}
                ref='editorSwitchPreview'
                onChange={(e) => this.handleUIChange(e)}
              >
-                <option value='BLUR'>When Editor Blurred</option>
-                <option value='DBL_CLICK'>When Editor Blurred, Edit On Double Click</option>
-                <option value='RIGHTCLICK'>On Right Click</option>
+                <option value='BLUR'>{i18n.__('When Editor Blurred')}</option>
+                <option value='DBL_CLICK'>{i18n.__('When Editor Blurred, Edit On Double Click')}</option>
+                <option value='RIGHTCLICK'>{i18n.__('On Right Click')}</option>
              </select>
            </div>
          </div>

          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Editor Keymap
+              {i18n.__('Editor Keymap')}
            </div>
            <div styleName='group-section-control'>
              <select value={config.editor.keyMap}
                ref='editorKeyMap'
                onChange={(e) => this.handleUIChange(e)}
              >
-                <option value='sublime'>default</option>
-                <option value='vim'>vim</option>
-                <option value='emacs'>emacs</option>
+                <option value='sublime'>{i18n.__('default')}</option>
+                <option value='vim'>{i18n.__('vim')}</option>
+                <option value='emacs'>{i18n.__('emacs')}</option>
              </select>
-              <p styleName='note-for-keymap'>⚠️ Please restart boostnote after you change the keymap</p>
+              <p styleName='note-for-keymap'>{i18n.__('⚠️ Please restart boostnote after you change the keymap')}</p>
            </div>
          </div>

@@ -314,7 +343,7 @@ class UiTab extends React.Component {
                ref='editorDisplayLineNumbers'
                type='checkbox'
              />&nbsp;
-              Show line numbers in the editor
+              {i18n.__('Show line numbers in the editor')}
            </label>
          </div>

@@ -325,7 +354,7 @@ class UiTab extends React.Component {
                ref='scrollPastEnd'
                type='checkbox'
              />&nbsp;
-              Allow editor to scroll past the last line
+              {i18n.__('Allow editor to scroll past the last line')}
            </label>
          </div>

@@ -336,14 +365,14 @@ class UiTab extends React.Component {
                ref='editorFetchUrlTitle'
                type='checkbox'
              />&nbsp;
-              Bring in web page title when pasting URL on editor
+              {i18n.__('Bring in web page title when pasting URL on editor')}
            </label>
          </div>

-          <div styleName='group-header2'>Preview</div>
+          <div styleName='group-header2'>{i18n.__('Preview')}</div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Preview Font Size
+              {i18n.__('Preview Font Size')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -356,7 +385,7 @@ class UiTab extends React.Component {
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              Preview Font Family
+              {i18n.__('Preview Font Family')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -368,7 +397,7 @@ class UiTab extends React.Component {
            </div>
          </div>
          <div styleName='group-section'>
-            <div styleName='group-section-label'>Code block Theme</div>
+            <div styleName='group-section-label'>{i18n.__('Code block Theme')}</div>
            <div styleName='group-section-control'>
              <select value={config.preview.codeBlockTheme}
                ref='previewCodeBlockTheme'
@@ -389,7 +418,7 @@ class UiTab extends React.Component {
                ref='previewScrollPastEnd'
                type='checkbox'
              />&nbsp;
-              Allow preview to scroll past the last line
+              {i18n.__('Allow preview to scroll past the last line')}
            </label>
          </div>
          <div styleName='group-checkBoxSection'>
@@ -399,12 +428,22 @@ class UiTab extends React.Component {
                ref='previewLineNumber'
                type='checkbox'
              />&nbsp;
-              Show line numbers for preview code blocks
+              {i18n.__('Show line numbers for preview code blocks')}
+            </label>
+          </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.smartQuotes}
+                ref='previewSmartQuotes'
+                type='checkbox'
+              />&nbsp;
+              Enable smart quotes
            </label>
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              LaTeX Inline Open Delimiter
+              {i18n.__('LaTeX Inline Open Delimiter')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -417,7 +456,7 @@ class UiTab extends React.Component {
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              LaTeX Inline Close Delimiter
+              {i18n.__('LaTeX Inline Close Delimiter')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -430,7 +469,7 @@ class UiTab extends React.Component {
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              LaTeX Block Open Delimiter
+              {i18n.__('LaTeX Block Open Delimiter')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -443,7 +482,7 @@ class UiTab extends React.Component {
          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
-              LaTeX Block Close Delimiter
+              {i18n.__('LaTeX Block Close Delimiter')}
            </div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
@@ -457,7 +496,7 @@ class UiTab extends React.Component {

          <div styleName='group-control'>
            <button styleName='group-control-rightButton'
-              onClick={(e) => this.handleSaveUIClick(e)}>Save
+              onClick={(e) => this.handleSaveUIClick(e)}>{i18n.__('Save')}
            </button>
            {UiAlertElement}
          </div>
--- a/browser/main/modals/PreferencesModal/index.js
+++ b/browser/main/modals/PreferencesModal/index.js
@@ -6,11 +6,13 @@ import UiTab from './UiTab'
 import InfoTab from './InfoTab'
 import Crowdfunding from './Crowdfunding'
 import StoragesTab from './StoragesTab'
+import Blog from './Blog'
 import ModalEscButton from 'browser/components/ModalEscButton'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './PreferencesModal.styl'
 import RealtimeNotification from 'browser/components/RealtimeNotification'
 import _ from 'lodash'
+import i18n from 'browser/lib/i18n'

 class Preferences extends React.Component {
  constructor (props) {
@@ -19,7 +21,8 @@ class Preferences extends React.Component {
    this.state = {
      currentTab: 'STORAGES',
      UIAlert: '',
-      HotkeyAlert: ''
+      HotkeyAlert: '',
+      BlogAlert: ''
    }
  }

@@ -75,6 +78,14 @@ class Preferences extends React.Component {
        return (
          <Crowdfunding />
        )
+      case 'BLOG':
+        return (
+          <Blog
+            dispatch={dispatch}
+            config={config}
+            haveToSave={alert => this.setState({BlogAlert: alert})}
+          />
+        )
      case 'STORAGES':
      default:
        return (
@@ -107,11 +118,12 @@ class Preferences extends React.Component {
    const content = this.renderContent()

    const tabs = [
-      {target: 'STORAGES', label: 'Storage'},
-      {target: 'HOTKEY', label: 'Hotkeys', Hotkey: this.state.HotkeyAlert},
-      {target: 'UI', label: 'Interface', UI: this.state.UIAlert},
-      {target: 'INFO', label: 'About'},
-      {target: 'CROWDFUNDING', label: 'Crowdfunding'}
+      {target: 'STORAGES', label: i18n.__('Storage')},
+      {target: 'HOTKEY', label: i18n.__('Hotkeys'), Hotkey: this.state.HotkeyAlert},
+      {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}
    ]

    const navButtons = tabs.map((tab) => {
@@ -140,7 +152,7 @@ class Preferences extends React.Component {
        onKeyDown={(e) => this.handleKeyDown(e)}
      >
        <div styleName='top-bar'>
-          <p>Your preferences for Boostnote</p>
+          <p>{i18n.__('Your preferences for Boostnote')}</p>
        </div>
        <ModalEscButton handleEscButtonClick={(e) => this.handleEscButtonClick(e)} />
        <div styleName='nav'>
--- a/browser/main/modals/RenameFolderModal.js
+++ b/browser/main/modals/RenameFolderModal.js
@@ -5,6 +5,7 @@ import styles from './RenameFolderModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import ModalEscButton from 'browser/components/ModalEscButton'
+import i18n from 'browser/lib/i18n'

 class RenameFolderModal extends React.Component {
  constructor (props) {
@@ -72,7 +73,7 @@ class RenameFolderModal extends React.Component {
        onKeyDown={(e) => this.handleKeyDown(e)}
      >
        <div styleName='header'>
-          <div styleName='title'>Rename Folder</div>
+          <div styleName='title'>{i18n.__('Rename Folder')}</div>
        </div>
        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />

--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -27,7 +27,7 @@ function data (state = defaultDataMap(), action) {

      action.notes.some((note) => {
        if (note === undefined) return true
-        const uniqueKey = note.storage + '-' + note.key
+        const uniqueKey = note.key
        const folderKey = note.storage + '-' + note.folder
        state.noteMap.set(uniqueKey, note)

@@ -66,7 +66,7 @@ function data (state = defaultDataMap(), action) {
    case 'UPDATE_NOTE':
      {
        const note = action.note
-        const uniqueKey = note.storage + '-' + note.key
+        const uniqueKey = note.key
        const folderKey = note.storage + '-' + note.folder
        const oldNote = state.noteMap.get(uniqueKey)

@@ -162,9 +162,9 @@ function data (state = defaultDataMap(), action) {
    case 'MOVE_NOTE':
      {
        const originNote = action.originNote
-        const originKey = originNote.storage + '-' + originNote.key
+        const originKey = originNote.key
        const note = action.note
-        const uniqueKey = note.storage + '-' + note.key
+        const uniqueKey = note.key
        const folderKey = note.storage + '-' + note.folder
        const oldNote = state.noteMap.get(uniqueKey)

@@ -297,7 +297,7 @@ function data (state = defaultDataMap(), action) {
      }
    case 'DELETE_NOTE':
      {
-        const uniqueKey = action.storageKey + '-' + action.noteKey
+        const uniqueKey = action.noteKey
        const targetNote = state.noteMap.get(uniqueKey)

        state = Object.assign({}, state)
@@ -423,7 +423,7 @@ function data (state = defaultDataMap(), action) {
      state.folderNoteMap = new Map(state.folderNoteMap)
      state.tagNoteMap = new Map(state.tagNoteMap)
      action.notes.forEach((note) => {
-        const uniqueKey = note.storage + '-' + note.key
+        const uniqueKey = note.key
        const folderKey = note.storage + '-' + note.folder
        state.noteMap.set(uniqueKey, note)

@@ -483,7 +483,7 @@ function data (state = defaultDataMap(), action) {
        state.tagNoteMap = new Map(state.tagNoteMap)
        state.starredSet = new Set(state.starredSet)
        notes.forEach((note) => {
-          const noteKey = storage.key + '-' + note.key
+          const noteKey = note.key
          state.noteMap.delete(noteKey)
          state.starredSet.delete(noteKey)
          note.tags.forEach((tag) => {