Merge pull request #663 from BoostIO/feature-v0-8-11

v0.8.11

.travis.yml

@@ -1,6 +1,26 @@
 language: node_js
-node_js:
-  - 'stable'
-  - 'lts/*'
-
-script: npm run lint && npm run test
+# To fix the npm version in 4.x
+# refs: https://github.com/travis-ci/travis-ci/issues/4653#issuecomment-194051953
+before_install: 'if [[ `npm -v` != 4* ]]; then npm i -g npm@4; fi'
+matrix:
+  include:
+    - os: osx
+      install:
+        - 'if [[ ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} = "master" ]]; then yarn; fi'
+      node_js:
+        - 'stable'
+        - 'lts/*'
+      script:
+        - 'if [[ ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} = "master" && ${TRAVIS_NODE_VERSION} = "stable" ]]; then
+             npm run lint;
+             npm run test;
+             ./script/e2e-runner.sh;
+           fi'
+    - os: linux
+      node_js:
+        - 'stable'
+        - 'lts/*'
+      script:
+        - 'npm run lint'
+        - 'npm run test'
+        - 'if [[ ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} = "master" && ${TRAVIS_NODE_VERSION} = "stable" ]]; then ./script/e2e-runner.sh; fi'

Backers.md

@@ -0,0 +1,5 @@
+Become a [backer](https://salt.bountysource.com/teams/boostnote) and support Boostnote!
+You can support Boostnote from $ 5 a month!
+
+# Backers
+[Kazu Yokomizo](https://twitter.com/kazup_bot)

browser/components/CodeEditor.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
 import path from 'path'
+import copyImage from 'browser/main/lib/dataApi/copyImage'
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
@@ -83,7 +84,13 @@ export default class CodeEditor extends React.Component {
         'Cmd-T': function (cm) {
           // Do nothing
         },
-        Enter: 'newlineAndIndentContinueMarkdownList'
+        Enter: 'newlineAndIndentContinueMarkdownList',
+        'Ctrl-C': (cm) => {
+          if (cm.getOption('keyMap').substr(0, 3) === 'vim') {
+            document.execCommand('copy')
+          }
+          return CodeMirror.Pass
+        }
       }
     })
 
@@ -184,13 +191,16 @@ export default class CodeEditor extends React.Component {
     e.preventDefault()
     const imagePath = e.dataTransfer.files[0].path
     const filename = path.basename(imagePath)
-    const imageMd = `![${encodeURI(filename)}](${encodeURI(imagePath)})`
-    this.insertImage(imageMd)
+
+    copyImage(imagePath, this.props.storageKey).then((imagePathInTheStorage) => {
+      const imageMd = `![${encodeURI(filename)}](${imagePathInTheStorage})`
+      this.insertImageMd(imageMd)
+    })
   }
 
-  insertImage (imageMd) {
-    const textarea = this.editor.getInputField()
-    textarea.value = textarea.value.substr(0, textarea.selectionStart) + imageMd + textarea.value.substr(textarea.selectionEnd)
+  insertImageMd (imageMd) {
+    const cm = this.editor
+    cm.setValue(cm.getValue() + imageMd)
   }
 
   render () {

browser/components/MarkdownEditor.js

@@ -9,14 +9,16 @@ class MarkdownEditor extends React.Component {
   constructor (props) {
     super(props)
 
-    this.escapeFromEditor = ['Control', 'w']
+    // char codes for ctrl + w
+    this.escapeFromEditor = [17, 87]
 
-    this.supportMdSelectionBold = ['Control', ':']
+    // ctrl + shift + ;
+    this.supportMdSelectionBold = [16, 17, 186]
 
     this.state = {
       status: 'PREVIEW',
       renderValue: props.value,
-      keyPressed: {},
+      keyPressed: new Set(),
       isLocked: false
     }
 
@@ -87,7 +89,7 @@ class MarkdownEditor extends React.Component {
 
   handleBlur (e) {
     if (this.state.isLocked) return
-    this.setState({ keyPressed: [] })
+    this.setState({ keyPressed: new Set() })
     let { config } = this.props
     if (config.editor.switchPreview === 'BLUR') {
       let cursorPosition = this.refs.code.editor.getCursor()
@@ -161,15 +163,16 @@ class MarkdownEditor extends React.Component {
 
   handleKeyDown (e) {
     if (this.state.status !== 'CODE') return false
-    const keyPressed = Object.assign(this.state.keyPressed, {
-      [e.key]: true
-    })
+    const keyPressed = this.state.keyPressed
+    keyPressed.add(e.keyCode)
     this.setState({ keyPressed })
-    let isNoteHandlerKey = (el) => { return this.state.keyPressed[el] }
-    if (!this.state.isLocked && this.state.status === 'CODE' && this.escapeFromEditor.every(isNoteHandlerKey)) {
+    let isNoteHandlerKey = (el) => { return keyPressed.has(el) }
+    if (keyPressed.size === this.escapeFromEditor.length &&
+        !this.state.isLocked && this.state.status === 'CODE' &&
+        this.escapeFromEditor.every(isNoteHandlerKey)) {
       document.activeElement.blur()
     }
-    if (this.supportMdSelectionBold.every(isNoteHandlerKey)) {
+    if (keyPressed.size === this.supportMdSelectionBold.length && this.supportMdSelectionBold.every(isNoteHandlerKey)) {
       this.addMdAroundWord('**')
     }
   }
@@ -190,9 +193,8 @@ class MarkdownEditor extends React.Component {
   }
 
   handleKeyUp (e) {
-    const keyPressed = Object.assign(this.state.keyPressed, {
-      [e.key]: false
-    })
+    const keyPressed = this.state.keyPressed
+    keyPressed.delete(e.keyCode)
     this.setState({ keyPressed })
   }
 
@@ -201,7 +203,7 @@ class MarkdownEditor extends React.Component {
   }
 
   render () {
-    let { className, value, config } = this.props
+    let { className, value, config, storageKey } = this.props
 
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
@@ -221,7 +223,10 @@ class MarkdownEditor extends React.Component {
         onKeyDown={(e) => this.handleKeyDown(e)}
         onKeyUp={(e) => this.handleKeyUp(e)}
       >
-        <CodeEditor styleName='codeEditor'
+        <CodeEditor styleName={this.state.status === 'CODE'
+            ? 'codeEditor'
+            : 'codeEditor--hide'
+          }
           ref='code'
           mode='GitHub Flavored Markdown'
           value={value}
@@ -231,6 +236,7 @@ class MarkdownEditor extends React.Component {
           fontSize={editorFontSize}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
+          storageKey={storageKey}
           onChange={(e) => this.handleChange(e)}
           onBlur={(e) => this.handleBlur(e)}
         />

browser/components/MarkdownEditor.styl

@@ -4,8 +4,14 @@
 .codeEditor
   absolute top bottom left right
 
+.hide
+  z-index 0
+  opacity 0
+  pointer-events none
+
 .codeEditor--hide
   @extend .codeEditor
+  @extend .hide
 
 .preview
   display block
@@ -17,7 +23,5 @@
 
 .preview--hide
   @extend .preview
-  z-index 0
-  opacity 0
-  pointer-events none
+  @extend .hide
 

browser/components/MarkdownPreview.js

@@ -9,6 +9,7 @@ import SequenceDiagram from 'js-sequence-diagrams'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import fs from 'fs'
 import htmlTextHelper from 'browser/lib/htmlTextHelper'
+import copy from 'copy-to-clipboard'
 
 const { remote } = require('electron')
 const { app } = remote
@@ -46,6 +47,26 @@ code {
   font-family: ${codeBlockFontFamily.join(', ')};
 }
 
+.clipboardButton {
+  color: rgba(147,147,149,0.8);;
+  fill: rgba(147,147,149,1);;
+  border-radius: 50%;
+  margin: 7px;
+  border: none;
+  background-color: transparent;
+  outline: none;
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+}
+
+.clipboardButton:hover {
+  transition: 0.2s;
+  color: #939395;
+  fill: #939395;
+  background-color: rgba(0,0,0,0.1);
+}
+
 h1, h2 {
   border: none;
 }
@@ -261,6 +282,16 @@ export default class MarkdownPreview extends React.Component {
       if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
       CodeMirror.requireMode(syntax.mode, () => {
         let content = htmlTextHelper.decodeEntities(el.innerHTML)
+        const copyIcon = document.createElement('i')
+        copyIcon.innerHTML = '<button class="clipboardButton"><svg width="13" height="13" viewBox="0 0 1792 1792" ><path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/></svg></button>'
+        copyIcon.onclick = (e) => {
+          copy(content)
+          this.notify('Saved to Clipboard!', {
+            body: 'Paste it wherever you want!',
+            silent: true
+          })
+        }
+        el.parentNode.appendChild(copyIcon)
         el.innerHTML = ''
         el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
         CodeMirror.runMode(content, syntax.mime, el, {
@@ -335,6 +366,13 @@ export default class MarkdownPreview extends React.Component {
     e.stopPropagation()
   }
 
+  notify (title, options) {
+    if (global.process.platform === 'win32') {
+      options.icon = path.join('file://', global.__dirname, '../../resources/app.png')
+    }
+    return new window.Notification(title, options)
+  }
+
   render () {
     let { className, style, tabIndex } = this.props
     return (

browser/components/ModalEscButton.js

@@ -0,0 +1,18 @@
+import React, {PropTypes} from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ModalEscButton.styl'
+
+const ModalEscButton = ({
+  handleEscButtonClick
+}) => (
+  <button styleName='escButton' onClick={handleEscButtonClick}>
+    <div styleName='esc-mark'>x</div>
+    <div styleName='esc-text'>esc</div>
+  </button>
+)
+
+ModalEscButton.propTypes = {
+  handleEscButtonClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(ModalEscButton, styles)

browser/components/ModalEscButton.styl

@@ -0,0 +1,14 @@
+.escButton
+  height 50px
+  position absolute
+  background-color transparent
+  color $ui-inactive-text-color
+  border none
+  top 1px
+  right 10px
+  text-align center
+  width top-bar--height
+  height top-bar-height
+
+.esc-mark
+  font-size 15px

browser/components/NoteItem.js

@@ -40,9 +40,10 @@ const TagElementList = (tags) => {
  * @param {Object} note
  * @param {Function} handleNoteClick
  * @param {Function} handleNoteContextMenu
+ * @param {Function} handleDragStart
  * @param {string} dateDisplay
  */
-const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu }) => (
+const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu, handleDragStart }) => (
   <div styleName={isActive
       ? 'item--active'
       : 'item'
@@ -50,6 +51,8 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
     key={`${note.storage}-${note.key}`}
     onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
     onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+    onDragStart={e => handleDragStart(e, note)}
+    draggable='true'
   >
     <div styleName='item-wrapper'>
       {note.type === 'SNIPPET_NOTE'
@@ -91,7 +94,9 @@ NoteItem.propTypes = {
     isStarred: PropTypes.bool.isRequired
   }),
   handleNoteClick: PropTypes.func.isRequired,
-  handleNoteContextMenu: PropTypes.func.isRequired
+  handleNoteContextMenu: PropTypes.func.isRequired,
+  handleDragStart: PropTypes.func.isRequired,
+  handleDragEnd: PropTypes.func.isRequired
 }
 
 export default CSSModules(NoteItem, styles)

browser/components/NoteItem.styl

@@ -83,7 +83,6 @@ $control-height = 30px
   position relative
   bottom 0px
   margin-top 2px
-  height 20px
   font-size 12px
   line-height 20px
   overflow ellipsis
@@ -93,6 +92,7 @@ $control-height = 30px
   flex 1
   overflow ellipsis
   line-height 20px
+  padding-top 2px
   padding-left 2px
 
 .item-bottom-tagList-item

browser/components/NoteItemSimple.js

@@ -11,8 +11,9 @@ import styles from './NoteItemSimple.styl'
  * @param {Object} note
  * @param {Function} handleNoteClick
  * @param {Function} handleNoteContextMenu
+ * @param {Function} handleDragStart
  */
-const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu }) => (
+const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenum, handleDragStart }) => (
   <div styleName={isActive
       ? 'item-simple--active'
       : 'item-simple'
@@ -20,6 +21,8 @@ const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu
     key={`${note.storage}-${note.key}`}
     onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
     onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+    onDragStart={e => handleDragStart(e, note)}
+    draggable='true'
   >
     <div styleName='item-simple-title'>
       {note.type === 'SNIPPET_NOTE'
@@ -43,7 +46,8 @@ NoteItemSimple.propTypes = {
     title: PropTypes.string.isrequired
   }),
   handleNoteClick: PropTypes.func.isRequired,
-  handleNoteContextMenu: PropTypes.func.isRequired
+  handleNoteContextMenu: PropTypes.func.isRequired,
+  handleDragStart: PropTypes.func.isRequired
 }
 
 export default CSSModules(NoteItemSimple, styles)

browser/components/ProfileImage.js

@@ -1,24 +0,0 @@
-import React, { PropTypes } from 'react'
-import md5 from 'md5'
-
-export default class ProfileImage extends React.Component {
-  render () {
-    let className = this.props.className == null ? 'ProfileImage' : 'ProfileImage ' + this.props.className
-    let email = this.props.email != null ? this.props.email : ''
-    let src = 'http://www.gravatar.com/avatar/' + md5(email.trim().toLowerCase()) + '?s=' + this.props.size
-
-    return (
-      <img
-        className={className}
-        width={this.props.size}
-        height={this.props.size}
-        src={src} />
-    )
-  }
-}
-
-ProfileImage.propTypes = {
-  email: PropTypes.string,
-  size: PropTypes.string,
-  className: PropTypes.string
-}

browser/components/StorageItem.js

@@ -14,11 +14,14 @@ import { isNumber } from 'lodash'
  * @param {string} folderColor
  * @param {boolean} isFolded
  * @param {number} noteCount
+ * @param {Function} handleDrop
+ * @param {Function} handleDragEnter
+ * @param {Function} handleDragOut
  * @return {React.Component}
  */
 const StorageItem = ({
   isActive, handleButtonClick, handleContextMenu, folderName,
-  folderColor, isFolded, noteCount
+  folderColor, isFolded, noteCount, handleDrop, handleDragEnter, handleDragLeave
 }) => (
   <button styleName={isActive
       ? 'folderList-item--active'
@@ -26,6 +29,9 @@ const StorageItem = ({
     }
     onClick={handleButtonClick}
     onContextMenu={handleContextMenu}
+    onDrop={handleDrop}
+    onDragEnter={handleDragEnter}
+    onDragLeave={handleDragLeave}
   >
     <span styleName={isFolded
       ? 'folderList-item-name--folded' : 'folderList-item-name'
@@ -52,6 +58,8 @@ StorageItem.propTypes = {
   folderName: PropTypes.string.isRequired,
   folderColor: PropTypes.string,
   isFolded: PropTypes.bool.isRequired,
+  handleDragEnter: PropTypes.func.isRequired,
+  handleDragLeave: PropTypes.func.isRequired,
   noteCount: PropTypes.number
 }
 

browser/components/TodoListPercentage.js

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview Percentage of todo achievement.
+ */
+
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TodoListPercentage.styl'
+
+/**
+ * @param {number} percentageOfTodo
+ */
+
+const TodoListPercentage = ({
+  percentageOfTodo
+}) => (
+  <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
+    <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
+      <p styleName='percentageText'>{percentageOfTodo}%</p>
+    </div>
+  </div>
+)
+
+TodoListPercentage.propTypes = {
+  percentageOfTodo: PropTypes.number.isRequired
+}
+
+export default CSSModules(TodoListPercentage, styles)

browser/components/TodoListPercentage.styl

@@ -0,0 +1,31 @@
+.percentageBar
+  position absolute
+  top 58px
+  right: 0px
+  left 0px
+  background-color #DADFE1
+  width 100%
+  height: 15px
+  font-size: 12px
+  z-index 100
+  border-radius 2px
+
+.progressBar
+  background-color: #6C7A89
+  height 15px
+  border-radius 2px
+  transition 0.3s
+
+.percentageText
+  color #f4f4f4
+  padding: 2px 43%
+
+body[data-theme="dark"]
+  .percentageBar
+    background-color #363A3D
+
+  .progressBar
+    background-color: alpha(#939395, 50%)
+
+  .percentageText
+    color $ui-dark-text-color

browser/components/markdown.styl

@@ -270,7 +270,7 @@ table
         border-right solid 1px borderColor
 
 themeDarkBackground = darken(#21252B, 10%)
-themeDarkText = #DDDDDD
+themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
 themeDarkPreview = $ui-dark-noteDetail-backgroundColor
 themeDarkTableOdd = themeDarkPreview
@@ -288,8 +288,9 @@ body[data-theme="dark"]
     background-color alpha(lighten(brandColor, 30%), 0.2) !important
 
   code
+    color #EA6730
     border-color darken(themeDarkBorder, 10%)
-    background-color lighten(themeDarkPreview, 10%)
+    background-color lighten(themeDarkPreview, 5%)
 
   pre
     border-color lighten(#21252B, 20%)

browser/finder/index.js

@@ -10,6 +10,7 @@ import StorageSection from './StorageSection'
 import NoteList from './NoteList'
 import NoteDetail from './NoteDetail'
 import SideNavFilter from 'browser/components/SideNavFilter'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 require('!!style!css!stylus?sourceMap!../main/global.styl')
 require('../lib/customMeta')
 
@@ -94,6 +95,7 @@ class FinderMain extends React.Component {
 
     if (e.keyCode === 13) {
       this.refs.detail.saveToClipboard()
+      AwsMobileAnalyticsConfig.recordDynamitCustomEvent('COPY_FINDER')
       hideFinder()
       e.preventDefault()
     }

browser/lib/findNoteTitle.js

@@ -0,0 +1,33 @@
+export function findNoteTitle (value) {
+  let splitted = value.split('\n')
+  let title = null
+  let isInsideCodeBlock = false
+
+  splitted.some((line, index) => {
+    let trimmedLine = line.trim()
+    let trimmedNextLine = splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()
+    if (trimmedLine.match('```')) {
+      isInsideCodeBlock = !isInsideCodeBlock
+    }
+    if (isInsideCodeBlock === false && (trimmedLine.match(/^# +/) || trimmedNextLine.match(/^=+$/))) {
+      title = trimmedLine
+      return true
+    }
+  })
+
+  if (title === null) {
+    title = ''
+    splitted.some((line) => {
+      if (line.trim().length > 0) {
+        title = line.trim()
+        return true
+      }
+    })
+  }
+
+  return title
+}
+
+export default {
+  findNoteTitle
+}

browser/lib/htmlTextHelper.js

@@ -13,7 +13,8 @@ export function decodeEntities (text) {
     ['amp', '&'],
     ['lt', '<'],
     ['gt', '>'],
-    ['#63', '\\?']
+    ['#63', '\\?'],
+    ['#36', '\\$']
   ]
 
   for (var i = 0, max = entities.length; i < max; ++i) {
@@ -28,7 +29,8 @@ export function encodeEntities (text) {
     ['\'', 'apos'],
     ['<', 'lt'],
     ['>', 'gt'],
-    ['\\?', '#63']
+    ['\\?', '#63'],
+    ['\\$', '#36']
   ]
 
   entities.forEach((entity) => {

browser/lib/markdown.js

@@ -57,6 +57,7 @@ md.use(math, {
     return output
   }
 })
+md.use(require('markdown-it-imsize'))
 md.use(require('markdown-it-footnote'))
 // Override task item
 md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {

browser/lib/search.js

@@ -0,0 +1,43 @@
+import _ from 'lodash'
+
+export default function searchFromNotes (data, search) {
+  let notes = data.noteMap.map((note) => note)
+  if (search.trim().length === 0) return []
+  let searchBlocks = search.split(' ')
+  searchBlocks.forEach((block) => {
+    if (block.match(/^#.+/)) {
+      notes = findByTag(notes, block)
+    } else {
+      notes = findByWord(notes, block)
+    }
+  })
+  return notes
+}
+
+function findByTag (notes, block) {
+  const tag = block.match(/#(.+)/)[1]
+  let regExp = new RegExp(_.escapeRegExp(tag), 'i')
+  return notes.filter((note) => {
+    if (!_.isArray(note.tags)) return false
+    return note.tags.some((_tag) => {
+      return _tag.match(regExp)
+    })
+  })
+}
+
+function findByWord (notes, block) {
+  let regExp = new RegExp(_.escapeRegExp(block), 'i')
+  return notes.filter((note) => {
+    if (_.isArray(note.tags) && note.tags.some((_tag) => {
+      return _tag.match(regExp)
+    })) {
+      return true
+    }
+    if (note.type === 'SNIPPET_NOTE') {
+      return note.description.match(regExp)
+    } else if (note.type === 'MARKDOWN_NOTE') {
+      return note.content.match(regExp)
+    }
+    return false
+  })
+}

browser/main/Detail/MarkdownNoteDetail.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
+import TodoListPercentage from 'browser/components/TodoListPercentage'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
@@ -11,6 +12,8 @@ import ee from 'browser/main/lib/eventEmitter'
 import markdown from 'browser/lib/markdown'
 import StatusBar from '../StatusBar'
 import _ from 'lodash'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 const electron = require('electron')
 const { remote } = electron
@@ -62,37 +65,22 @@ class MarkdownNoteDetail extends React.Component {
     ee.off('topbar:togglelockbutton', this.toggleLockButton)
   }
 
-  findTitle (value) {
-    let splitted = value.split('\n')
-    let title = null
-    let isMarkdownInCode = false
+  getPercentageOfCompleteTodo (noteContent) {
+    let splitted = noteContent.split('\n')
+    let numberOfTodo = 0
+    let numberOfCompletedTodo = 0
 
-    for (let i = 0; i < splitted.length; i++) {
-      let trimmedLine = splitted[i].trim()
-      if (trimmedLine.match('```')) {
-        isMarkdownInCode = !isMarkdownInCode
-      } else if (isMarkdownInCode === false && trimmedLine.match(/^# +/)) {
-        title = trimmedLine.substring(1, trimmedLine.length).trim()
-        break
+    splitted.forEach((line) => {
+      let trimmedLine = line.trim()
+      if (trimmedLine.match(/^[\+\-\*] \[\s|x\] ./)) {
+        numberOfTodo++
       }
-    }
-
-    if (title == null) {
-      for (let i = 0; i < splitted.length; i++) {
-        let trimmedLine = splitted[i].trim()
-        if (trimmedLine.length > 0) {
-          title = trimmedLine
-          break
-        }
+      if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
+        numberOfCompletedTodo++
       }
-      if (title == null) {
-        title = ''
-      }
-    }
+    })
 
-    title = markdown.strip(title)
-
-    return title
+    return Math.floor(numberOfCompletedTodo / numberOfTodo * 100)
   }
 
   handleChange (e) {
@@ -100,7 +88,7 @@ class MarkdownNoteDetail extends React.Component {
 
     note.content = this.refs.content.value
     note.tags = this.refs.tags.value
-    note.title = this.findTitle(note.content)
+    note.title = markdown.strip(findNoteTitle(note.content))
     note.updatedAt = new Date()
 
     this.setState({
@@ -129,6 +117,7 @@ class MarkdownNoteDetail extends React.Component {
           type: 'UPDATE_NOTE',
           note: note
         })
+        AwsMobileAnalyticsConfig.recordDynamitCustomEvent('EDIT_NOTE')
       })
   }
 
@@ -167,6 +156,7 @@ class MarkdownNoteDetail extends React.Component {
 
   handleStarButtonClick (e) {
     let { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
 
@@ -206,6 +196,10 @@ class MarkdownNoteDetail extends React.Component {
     }
   }
 
+  handleFullScreenButton (e) {
+    ee.emit('editor:fullscreen')
+  }
+
   handleLockButtonMouseDown (e) {
     e.preventDefault()
     ee.emit('editor:lock')
@@ -263,6 +257,9 @@ class MarkdownNoteDetail extends React.Component {
               value={this.state.note.tags}
               onChange={(e) => this.handleChange(e)}
             />
+            <TodoListPercentage
+              percentageOfTodo={this.getPercentageOfCompleteTodo(note.content)}
+            />
           </div>
           <div styleName='info-right'>
             {(() => {
@@ -294,6 +291,11 @@ class MarkdownNoteDetail extends React.Component {
                 </g>
               </svg>
             </button>
+            <button styleName='control-fullScreenButton'
+              onMouseDown={(e) => this.handleFullScreenButton(e)}
+            >
+              <i className='fa fa-arrows-alt' styleName='fullScreen-button' />
+            </button>
           </div>
         </div>
 
@@ -303,6 +305,7 @@ class MarkdownNoteDetail extends React.Component {
             styleName='body-noteEditor'
             config={config}
             value={this.state.note.content}
+            storageKey={this.state.note.storage}
             onChange={(e) => this.handleChange(e)}
             ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
           />

browser/main/Detail/MarkdownNoteDetail.styl

@@ -31,6 +31,11 @@
   float right
   topBarButtonLight()
 
+.control-fullScreenButton
+  float right
+  padding 7px
+  topBarButtonLight()
+
 .body
   absolute left right
   left $note-detail-left-margin
@@ -55,3 +60,6 @@ body[data-theme="dark"]
 
   .control-trashButton
     topBarButtonDark()
+
+  .control-fullScreenButton
+    topBarButtonDark()

browser/main/Detail/SnippetNoteDetail.js

@@ -15,6 +15,8 @@ import StatusBar from '../StatusBar'
 import context from 'browser/lib/context'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import _ from 'lodash'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 function pass (name) {
   switch (name) {
@@ -75,41 +77,13 @@ class SnippetNoteDetail extends React.Component {
     if (this.saveQueue != null) this.saveNow()
   }
 
-  findTitle (value) {
-    let splitted = value.split('\n')
-    let title = null
-
-    for (let i = 0; i < splitted.length; i++) {
-      let trimmedLine = splitted[i].trim()
-      if (trimmedLine.match(/^# .+/)) {
-        title = trimmedLine.substring(1, trimmedLine.length).trim()
-        break
-      }
-    }
-
-    if (title == null) {
-      for (let i = 0; i < splitted.length; i++) {
-        let trimmedLine = splitted[i].trim()
-        if (trimmedLine.length > 0) {
-          title = trimmedLine
-          break
-        }
-      }
-      if (title == null) {
-        title = ''
-      }
-    }
-
-    return title
-  }
-
   handleChange (e) {
     let { note } = this.state
 
     note.tags = this.refs.tags.value
     note.description = this.refs.description.value
     note.updatedAt = new Date()
-    note.title = this.findTitle(note.description)
+    note.title = findNoteTitle(note.description)
 
     this.setState({
       note
@@ -137,6 +111,7 @@ class SnippetNoteDetail extends React.Component {
           type: 'UPDATE_NOTE',
           note: note
         })
+        AwsMobileAnalyticsConfig.recordDynamitCustomEvent('EDIT_NOTE')
       })
   }
 
@@ -175,6 +150,7 @@ class SnippetNoteDetail extends React.Component {
 
   handleStarButtonClick (e) {
     let { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
 
@@ -214,6 +190,10 @@ class SnippetNoteDetail extends React.Component {
     }
   }
 
+  handleFullScreenButton (e) {
+    ee.emit('editor:fullscreen')
+  }
+
   handleTabPlusButtonClick (e) {
     this.addSnippet()
   }
@@ -551,6 +531,11 @@ class SnippetNoteDetail extends React.Component {
                 </g>
               </svg>
             </button>
+            <button styleName='control-fullScreenButton'
+              onMouseDown={(e) => this.handleFullScreenButton(e)}
+            >
+              <i className='fa fa-arrows-alt' styleName='fullScreen-button' />
+            </button>
           </div>
         </div>
 

browser/main/Detail/SnippetNoteDetail.styl

@@ -70,6 +70,11 @@
   float right
   topBarButtonLight()
 
+.control-fullScreenButton
+  float right
+  padding 7px
+  topBarButtonLight()
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
@@ -102,3 +107,6 @@ body[data-theme="dark"]
 
   .control-trashButton
     topBarButtonDark()
+
+  .control-fullScreenButton
+    topBarButtonDark()

browser/main/Detail/TagSelect.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TagSelect.styl'
 import _ from 'lodash'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 class TagSelect extends React.Component {
   constructor (props) {
@@ -56,6 +57,7 @@ class TagSelect extends React.Component {
   }
 
   submitTag () {
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_TAG')
     let { value } = this.props
     let newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
 

browser/main/Main.js

@@ -12,6 +12,8 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import modal from 'browser/main/lib/modal'
 import InitModal from 'browser/main/modals/InitModal'
 import mixpanel from 'browser/main/lib/mixpanel'
+import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import eventEmitter from 'browser/main/lib/eventEmitter'
 
 function focused () {
   mixpanel.track('MAIN_FOCUSED')
@@ -21,14 +23,23 @@ class Main extends React.Component {
   constructor (props) {
     super(props)
 
+    if (process.env.NODE_ENV === 'production') {
+      mobileAnalytics.initAwsMobileAnalytics()
+    }
+
     let { config } = props
 
     this.state = {
       isRightSliderFocused: false,
       listWidth: config.listWidth,
       navWidth: config.navWidth,
-      isLeftSliderFocused: false
+      isLeftSliderFocused: false,
+      fullScreen: false,
+      noteDetailWidth: 0,
+      mainBodyWidth: 0
     }
+
+    this.toggleFullScreen = () => this.handleFullScreenButton()
   }
 
   getChildContext () {
@@ -63,11 +74,13 @@ class Main extends React.Component {
         }
       })
 
+    eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
     window.addEventListener('focus', focused)
   }
 
   componentWillUnmount () {
     window.removeEventListener('focus', focused)
+    eventEmitter.off('editor:fullscreen', this.toggleFullScreen)
   }
 
   handleLeftSlideMouseDown (e) {
@@ -144,6 +157,34 @@ class Main extends React.Component {
     }
   }
 
+  handleFullScreenButton (e) {
+    this.setState({ fullScreen: !this.state.fullScreen }, () => {
+      const noteDetail = document.querySelector('.NoteDetail')
+      const noteList = document.querySelector('.NoteList')
+      const mainBody = document.querySelector('#main-body')
+
+      if (this.state.fullScreen) {
+        this.hideLeftLists(noteDetail, noteList, mainBody)
+      } else {
+        this.showLeftLists(noteDetail, noteList, mainBody)
+      }
+    })
+  }
+
+  hideLeftLists (noteDetail, noteList, mainBody) {
+    this.state.noteDetailWidth = noteDetail.style.left
+    this.state.mainBodyWidth = mainBody.style.left
+    noteDetail.style.left = '0px'
+    mainBody.style.left = '0px'
+    noteList.style.display = 'none'
+  }
+
+  showLeftLists (noteDetail, noteList, mainBody) {
+    noteDetail.style.left = this.state.noteDetailWidth
+    mainBody.style.left = this.state.mainBodyWidth
+    noteList.style.display = 'inline'
+  }
+
   render () {
     let { config } = this.props
 
@@ -173,6 +214,7 @@ class Main extends React.Component {
           </div>
         }
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
+          id='main-body'
           ref='body'
           style={{left: config.isSideNavFolded ? 44 : this.state.navWidth}}
         >

browser/main/Main.styl

@@ -13,10 +13,12 @@
   absolute top bottom
   top -2px
   width 0
+  z-index 0
 
 .slider-right
   @extend .slider
   width 1px
+  z-index 0
 
 .slider--active
   @extend .slider

browser/main/NoteList/index.js

@@ -8,6 +8,11 @@ import dataApi from 'browser/main/lib/dataApi'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import NoteItem from 'browser/components/NoteItem'
 import NoteItemSimple from 'browser/components/NoteItemSimple'
+import searchFromNotes from 'browser/lib/search'
+import fs from 'fs'
+import { hashHistory } from 'react-router'
+import markdown from 'browser/lib/markdown'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -41,6 +46,7 @@ class NoteList extends React.Component {
     this.alertIfSnippetHandler = () => {
       this.alertIfSnippet()
     }
+    this.importFromFileHandler = this.importFromFile.bind(this)
 
     this.jumpToTopHandler = () => {
       this.jumpToTop()
@@ -58,6 +64,7 @@ class NoteList extends React.Component {
     ee.on('list:isMarkdownNote', this.alertIfSnippetHandler)
     ee.on('list:top', this.jumpToTopHandler)
     ee.on('list:jumpToTop', this.jumpToTopHandler)
+    ee.on('import:file', this.importFromFileHandler)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -79,6 +86,7 @@ class NoteList extends React.Component {
     ee.off('list:isMarkdownNote', this.alertIfSnippetHandler)
     ee.off('list:top', this.jumpToTopHandler)
     ee.off('list:jumpToTop', this.jumpToTopHandler)
+    ee.off('import:file', this.importFromFileHandler)
   }
 
   componentDidUpdate (prevProps) {
@@ -202,6 +210,7 @@ class NoteList extends React.Component {
 
   getNotes () {
     let { data, params, location } = this.props
+    let { router } = this.context
 
     if (location.pathname.match(/\/home/)) {
       return data.noteMap.map((note) => note)
@@ -212,6 +221,14 @@ class NoteList extends React.Component {
         .map((uniqueKey) => data.noteMap.get(uniqueKey))
     }
 
+    if (location.pathname.match(/\/searched/)) {
+      const searchInputText = document.getElementsByClassName('searchInput')[0].value
+      if (searchInputText === '') {
+        router.push('/home')
+      }
+      return searchFromNotes(this.props.data, searchInputText)
+    }
+
     let storageKey = params.storageKey
     let folderKey = params.folderKey
     let storage = data.storageMap.get(storageKey)
@@ -327,7 +344,8 @@ class NoteList extends React.Component {
       dialog.showMessageBox(remote.getCurrentWindow(), {
         type: 'warning',
         message: 'Sorry!',
-        detail: 'md/text import is available only a markdown note.'
+        detail: 'md/text import is available only a markdown note.',
+        buttons: ['OK', 'Cancel']
       })
     }
   }
@@ -349,8 +367,58 @@ class NoteList extends React.Component {
     })
   }
 
+  handleDragStart (e, note) {
+    const noteData = JSON.stringify(note)
+    e.dataTransfer.setData('note', noteData)
+  }
+
+  importFromFile () {
+    const { dispatch, location } = this.props
+
+    const options = {
+      filters: [
+        { name: 'Documents', extensions: ['md', 'txt'] }
+      ],
+      properties: ['openFile', 'multiSelections']
+    }
+
+    const targetIndex = _.findIndex(this.notes, (note) => {
+      return note !== null && `${note.storage}-${note.key}` === location.query.key
+    })
+
+    const storageKey = this.notes[targetIndex].storage
+    const folderKey = this.notes[targetIndex].folder
+
+    dialog.showOpenDialog(remote.getCurrentWindow(), options, (filepaths) => {
+      if (filepaths === undefined) return
+      filepaths.forEach((filepath) => {
+        fs.readFile(filepath, (err, data) => {
+          if (err) throw Error('File reading error: ', err)
+          const content = data.toString()
+          const newNote = {
+            content: content,
+            folder: folderKey,
+            title: markdown.strip(findNoteTitle(content)),
+            type: 'MARKDOWN_NOTE'
+          }
+          dataApi.createNote(storageKey, newNote)
+          .then((note) => {
+            dispatch({
+              type: 'UPDATE_NOTE',
+              note: note
+            })
+            hashHistory.push({
+              pathname: location.pathname,
+              query: {key: `${note.storage}-${note.key}`}
+            })
+          })
+        })
+      })
+    })
+  }
+
   render () {
-    let { location, notes, config } = this.props
+    let { location, notes, config, dispatch } = this.props
     let sortFunc = config.sortBy === 'CREATED_AT'
       ? sortByCreatedAt
       : config.sortBy === 'ALPHABETICAL'
@@ -382,6 +450,7 @@ class NoteList extends React.Component {
               key={key}
               handleNoteClick={this.handleNoteClick.bind(this)}
               handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
+              handleDragStart={this.handleDragStart.bind(this)}
             />
           )
         }
@@ -393,6 +462,7 @@ class NoteList extends React.Component {
             key={key}
             handleNoteClick={this.handleNoteClick.bind(this)}
             handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
+            handleDragStart={this.handleDragStart.bind(this)}
           />
         )
       })

browser/main/SideNav/SideNav.styl

@@ -1,7 +1,7 @@
 .root
   absolute top left bottom
   width $sideNav-width
-  background-color $ui-backgroundColor
+  background-color #f9f9f9
   user-select none
   color $ui-text-color
 

browser/main/SideNav/StorageItem.js

@@ -7,6 +7,7 @@ import CreateFolderModal from 'browser/main/modals/CreateFolderModal'
 import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
 import dataApi from 'browser/main/lib/dataApi'
 import StorageItemChild from 'browser/components/StorageItem'
+import eventEmitter from 'browser/main/lib/eventEmitter'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -131,8 +132,54 @@ class StorageItem extends React.Component {
     }
   }
 
+  handleDragEnter (e) {
+    e.dataTransfer.setData('defaultColor', e.target.style.backgroundColor)
+    e.target.style.backgroundColor = 'rgba(129, 130, 131, 0.08)'
+  }
+
+  handleDragLeave (e) {
+    e.target.style.opacity = '1'
+    e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor')
+  }
+
+  handleDrop (e, storage, folder, dispatch, location) {
+    e.target.style.opacity = '1'
+    e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor')
+    const noteData = JSON.parse(e.dataTransfer.getData('note'))
+    const newNoteData = Object.assign({}, noteData, {storage: storage, folder: folder.key})
+    if (folder.key === noteData.folder) return
+    dataApi
+     .createNote(storage.key, newNoteData)
+     .then((note) => {
+       dataApi
+        .deleteNote(noteData.storage, noteData.key)
+        .then((data) => {
+          let dispatchHandler = () => {
+            dispatch({
+              type: 'DELETE_NOTE',
+              storageKey: data.storageKey,
+              noteKey: data.noteKey
+            })
+          }
+          eventEmitter.once('list:moved', dispatchHandler)
+          eventEmitter.emit('list:next')
+        })
+         .catch((err) => {
+           console.error(err)
+         })
+       dispatch({
+         type: 'UPDATE_NOTE',
+         note: note
+       })
+       hashHistory.push({
+         pathname: location.pathname,
+         query: {key: `${note.storage}-${note.key}`}
+       })
+     })
+  }
+
   render () {
-    let { storage, location, isFolded, data } = this.props
+    let { storage, location, isFolded, data, dispatch } = this.props
     let { folderNoteMap } = data
     let folderList = storage.folders.map((folder) => {
       let isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
@@ -151,6 +198,9 @@ class StorageItem extends React.Component {
           folderColor={folder.color}
           isFolded={isFolded}
           noteCount={noteCount}
+          handleDrop={(e) => this.handleDrop(e, storage, folder, dispatch, location)}
+          handleDragEnter={this.handleDragEnter}
+          handleDragLeave={this.handleDragLeave}
         />
       )
     })

browser/main/TopBar/index.js

@@ -18,7 +18,7 @@ class TopBar extends React.Component {
     this.state = {
       search: '',
       searchOptions: [],
-      searchPopupOpen: false
+      isSearching: false
     }
 
     this.newNoteHandler = () => {
@@ -87,79 +87,17 @@ class TopBar extends React.Component {
   }
 
   handleSearchChange (e) {
+    let { router } = this.context
+    router.push('/searched')
     this.setState({
       search: this.refs.searchInput.value
     })
   }
 
-  getOptions () {
-    let { data } = this.props
-    let { search } = this.state
-    let notes = data.noteMap.map((note) => note)
-    if (search.trim().length === 0) return []
-    let searchBlocks = search.split(' ')
-    searchBlocks.forEach((block) => {
-      if (block.match(/^!#.+/)) {
-        let tag = block.match(/^!#(.+)/)[1]
-        let regExp = new RegExp(_.escapeRegExp(tag), 'i')
-        notes = notes
-          .filter((note) => {
-            if (!_.isArray(note.tags)) return false
-            return note.tags.some((_tag) => {
-              return _tag.match(regExp)
-            })
-          })
-      } else if (block.match(/^!.+/)) {
-        let block = block.match(/^!(.+)/)[1]
-        let regExp = new RegExp(_.escapeRegExp(block), 'i')
-        notes = notes.filter((note) => {
-          if (!_.isArray(note.tags) || !note.tags.some((_tag) => {
-            return _tag.match(regExp)
-          })) {
-            return true
-          }
-          if (note.type === 'SNIPPET_NOTE') {
-            return !note.description.match(regExp)
-          } else if (note.type === 'MARKDOWN_NOTE') {
-            return !note.content.match(regExp)
-          }
-          return false
-        })
-      } else if (block.match(/^#.+/)) {
-        let tag = block.match(/#(.+)/)[1]
-        let regExp = new RegExp(_.escapeRegExp(tag), 'i')
-        notes = notes
-          .filter((note) => {
-            if (!_.isArray(note.tags)) return false
-            return note.tags.some((_tag) => {
-              return _tag.match(regExp)
-            })
-          })
-      } else {
-        let regExp = new RegExp(_.escapeRegExp(block), 'i')
-        notes = notes.filter((note) => {
-          if (_.isArray(note.tags) && note.tags.some((_tag) => {
-            return _tag.match(regExp)
-          })) {
-            return true
-          }
-          if (note.type === 'SNIPPET_NOTE') {
-            return note.description.match(regExp)
-          } else if (note.type === 'MARKDOWN_NOTE') {
-            return note.content.match(regExp)
-          }
-          return false
-        })
-      }
-    })
-
-    return notes
-  }
-
   handleOptionClick (uniqueKey) {
     return (e) => {
       this.setState({
-        searchPopupOpen: false
+        isSearching: false
       }, () => {
         let { location } = this.props
         hashHistory.push({
@@ -174,7 +112,7 @@ class TopBar extends React.Component {
 
   handleSearchFocus (e) {
     this.setState({
-      searchPopupOpen: true
+      isSearching: true
     })
   }
   handleSearchBlur (e) {
@@ -191,7 +129,7 @@ class TopBar extends React.Component {
     }
     if (!isStillFocused) {
       this.setState({
-        searchPopupOpen: false
+        isSearching: false
       })
     }
   }
@@ -251,7 +189,7 @@ class TopBar extends React.Component {
   }
 
   handleOnSearchFocus () {
-    if (this.state.searchPopupOpen) {
+    if (this.state.isSearching) {
       this.refs.search.childNodes[0].blur()
     } else {
       this.refs.search.childNodes[0].focus()
@@ -260,27 +198,6 @@ class TopBar extends React.Component {
 
   render () {
     let { config, style, data } = this.props
-    let searchOptionList = this.getOptions()
-      .map((note) => {
-        let storage = data.storageMap.get(note.storage)
-        let folder = _.find(storage.folders, {key: note.folder})
-        return <div styleName='control-search-optionList-item'
-          key={note.storage + '-' + note.key}
-          onClick={(e) => this.handleOptionClick(note.storage + '-' + note.key)(e)}
-        >
-          <div styleName='control-search-optionList-item-folder'
-            style={{borderColor: folder.color}}>
-            {folder.name}
-            <span styleName='control-search-optionList-item-folder-surfix'>in {storage.name}</span>
-          </div>
-          {note.type === 'SNIPPET_NOTE'
-            ? <i styleName='control-search-optionList-item-type' className='fa fa-code' />
-            : <i styleName='control-search-optionList-item-type' className='fa fa-file-text-o' />
-          }&nbsp;
-          {note.title}
-        </div>
-      })
-
     return (
       <div className='TopBar'
         styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
@@ -301,15 +218,8 @@ class TopBar extends React.Component {
                 onChange={(e) => this.handleSearchChange(e)}
                 placeholder='Search'
                 type='text'
+                className='searchInput'
               />
-              {this.state.searchPopupOpen &&
-                <div styleName='control-search-optionList'>
-                  {searchOptionList.length > 0
-                    ? searchOptionList
-                    : <div styleName='control-search-optionList-empty'>Empty List</div>
-                  }
-                </div>
-              }
             </div>
             {this.state.search > 0 &&
               <button styleName='left-search-clearButton'

browser/main/index.js

@@ -50,6 +50,7 @@ ReactDOM.render((
         <IndexRedirect to='/home' />
         <Route path='home' />
         <Route path='starred' />
+        <Route path='searched' />
         <Route path='storages'>
           <IndexRedirect to='/home' />
           <Route path=':storageKey'>

browser/main/lib/AwsMobileAnalyticsConfig.js

@@ -0,0 +1,37 @@
+const AWS = require('aws-sdk')
+const AMA = require('aws-sdk-mobile-analytics')
+const ConfigManager = require('browser/main/lib/ConfigManager')
+
+AWS.config.region = 'us-east-1'
+AWS.config.credentials = new AWS.CognitoIdentityCredentials({
+  IdentityPoolId: 'us-east-1:xxxxxxxxxxxxxxxxxxxxxxxxx'
+})
+
+const mobileAnalyticsClient = new AMA.Manager({
+  appId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+  appTitle: 'xxxxxxxxxx'
+})
+
+function initAwsMobileAnalytics () {
+  AWS.config.credentials.get((err) => {
+    if (!err) {
+      console.log('Cognito Identity ID: ' + AWS.config.credentials.identityId)
+    }
+  })
+  recordStaticCustomEvent()
+}
+
+function recordDynamitCustomEvent (type) {
+  mobileAnalyticsClient.recordEvent(type)
+}
+
+function recordStaticCustomEvent () {
+  mobileAnalyticsClient.recordEvent('UI_COLOR_THEME', {
+    uiColorTheme: ConfigManager.default.get().ui.theme
+  })
+}
+
+module.exports = {
+  initAwsMobileAnalytics,
+  recordDynamitCustomEvent
+}

browser/main/lib/dataApi/copyImage.js

@@ -0,0 +1,32 @@
+const fs = require('fs')
+const path = require('path')
+const _ = require('lodash')
+const sander = require('sander')
+
+/**
+ * @description To copy an image and return the path.
+ * @param {String} filePath
+ * @param {String} storageKey
+ * @return {String} an image path
+ */
+function copyImage (filePath, storageKey) {
+  return new Promise((resolve, reject) => {
+    try {
+      const cachedStorageList = JSON.parse(localStorage.getItem('storages'))
+      if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
+      const storage = _.find(cachedStorageList, {key: storageKey})
+      if (storage === undefined) throw new Error('Target storage doesn\'t exist.')
+      const targetStorage = storage
+
+      const inputImage = fs.createReadStream(filePath)
+      const imageName = path.basename(filePath)
+      const outputImage = fs.createWriteStream(path.join(targetStorage.path, 'images', imageName))
+      inputImage.pipe(outputImage)
+      resolve(`${encodeURI(targetStorage.path)}/images/${encodeURI(imageName)}`)
+    } catch (e) {
+      return reject(e)
+    }
+  })
+}
+
+module.exports = copyImage

browser/main/lib/dataApi/init.js

@@ -41,7 +41,7 @@ function init () {
           .then((notes) => {
             let unknownCount = 0
             notes.forEach((note) => {
-              if (!storage.folders.some((folder) => note.folder === folder.key)) {
+              if (note && !storage.folders.some((folder) => note.folder === folder.key)) {
                 unknownCount++
                 storage.folders.push({
                   key: note.folder,

browser/main/lib/dataApi/resolveStorageNotes.js

@@ -28,7 +28,6 @@ function resolveStorageNotes (storage) {
         return data
       } catch (err) {
         console.error(notePath)
-        throw err
       }
     })
 

browser/main/modals/CreateFolderModal.js

@@ -4,6 +4,8 @@ import styles from './CreateFolderModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import consts from 'browser/lib/consts'
+import ModalEscButton from 'browser/components/ModalEscButton'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 class CreateFolderModal extends React.Component {
   constructor (props) {
@@ -47,6 +49,7 @@ class CreateFolderModal extends React.Component {
   }
 
   confirm () {
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_FOLDER')
     if (this.state.name.trim().length > 0) {
       let { storage } = this.props
       let input = {
@@ -77,11 +80,7 @@ class CreateFolderModal extends React.Component {
         <div styleName='header'>
           <div styleName='title'>Create new folder</div>
         </div>
-        <button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}>
-          <div styleName='close-mark'>×</div>
-          <div styleName='close-text'>esc</div>
-        </button>
-
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
         <div styleName='control'>
           <div styleName='control-folder'>
             <div styleName='control-folder-label'>Folder name</div>

browser/main/modals/CreateFolderModal.styl

@@ -15,21 +15,6 @@
   background-color $ui-backgroundColor
   color $ui-text-color
 
-.close-mark
-  font-size 15px
-
-.close
-  height 70px
-  position absolute
-  background-color transparent
-  color $ui-inactive-text-color
-  border none
-  top 7px
-  right 30px
-  text-align center
-  width top-bar--height
-  height top-bar--height
-
 .control-folder-label
   text-align left
   font-size 12px
@@ -85,13 +70,8 @@ body[data-theme="dark"]
     border 1px solid #C9C9C9 // TODO: use variable.
     color white
 
-  .closeButton
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-    colorDarkDefaultButton()
-
-  .description
+   .description
     color $ui-inactive-text-color
 
   .control-confirmButton
-    colorDarkPrimaryButton()
+    colorDarkPrimaryButton()

browser/main/modals/InitModal.js

@@ -5,6 +5,7 @@ import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import { hashHistory } from 'react-router'
 import _ from 'lodash'
+import ModalEscButton from 'browser/components/ModalEscButton'
 
 const CSON = require('@rokt33r/season')
 const path = require('path')
@@ -199,6 +200,7 @@ class InitModal extends React.Component {
         <div styleName='header'>
           <div styleName='header-title'>Initialize Storage</div>
         </div>
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
         <div styleName='body'>
           <div styleName='body-welcome'>
             Welcome!

browser/main/modals/InitModal.styl

@@ -22,15 +22,6 @@
   border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
-  position absolute
-  top 10px
-  right 10px
-  height 30px
-  padding 0 25px
-  color $ui-text-color
-  colorDefaultButton()
-
 .body
   padding 30px
 

browser/main/modals/NewNoteModal.js

@@ -4,6 +4,8 @@ import styles from './NewNoteModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 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'
 
 class NewNoteModal extends React.Component {
   constructor (props) {
@@ -22,6 +24,8 @@ class NewNoteModal extends React.Component {
   }
 
   handleMarkdownNoteButtonClick (e) {
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_MARKDOWN')
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_ALLNOTE')
     let { storage, folder, dispatch, location } = this.props
     dataApi
       .createNote(storage, {
@@ -52,6 +56,8 @@ class NewNoteModal extends React.Component {
   }
 
   handleSnippetNoteButtonClick (e) {
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_SNIPPET')
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_ALLNOTE')
     let { storage, folder, dispatch, location } = this.props
 
     dataApi
@@ -102,11 +108,7 @@ class NewNoteModal extends React.Component {
         <div styleName='header'>
           <div styleName='title'>Make a Note</div>
         </div>
-        <button styleName='closeButton' onClick={(e) => this.handleCloseButtonClick(e)}>
-          <div styleName='close-mark'>×</div>
-          <div styleName='close-text'>esc</div>
-        </button>
-
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
         <div styleName='control'>
           <button styleName='control-button'
             onClick={(e) => this.handleMarkdownNoteButtonClick(e)}

browser/main/modals/NewNoteModal.styl

@@ -13,25 +13,10 @@
   border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
-  height 50px
-  position absolute
-  background-color transparent
-  color $ui-inactive-text-color
-  border none
-  top 1px
-  right 10px
-  text-align center
-  width top-bar--height
-  height top-bar--height
-
 .control
   padding 25px 15px 15px
   text-align center
 
-.close-mark
-  font-size 15px
-
 .control-button
   width 220px
   height 220px

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -20,17 +20,6 @@ top-bar--height = 50px
     font-size 18px
     line-height top-bar--height
 
-.top-bar-close
-  position absolute
-  background-color transparent
-  color $ui-inactive-text-color
-  border none
-  top 0
-  right 0
-  text-align center
-  width top-bar--height
-  height top-bar--height
-
 .nav
   absolute top left right
   top top-bar--height
@@ -95,4 +84,4 @@ body[data-theme="dark"]
     color white
     background-color $dark-primary-button-background--active
     &:hover
-      color white
+      color white

browser/main/modals/PreferencesModal/UiTab.js

@@ -216,6 +216,7 @@ class UiTab extends React.Component {
               >
                 <option value='sublime'>default</option>
                 <option value='vim'>vim</option>
+                <option value='emacs'>emacs</option>
               </select>
               <span styleName='note-for-keymap'>Please reload boostnote after you change the keymap</span>
             </div>

browser/main/modals/PreferencesModal/index.js

@@ -5,6 +5,7 @@ import HotkeyTab from './HotkeyTab'
 import UiTab from './UiTab'
 import InfoTab from './InfoTab'
 import StoragesTab from './StoragesTab'
+import ModalEscButton from 'browser/components/ModalEscButton'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './PreferencesModal.styl'
 
@@ -117,10 +118,7 @@ class Preferences extends React.Component {
         <div styleName='top-bar'>
           <p>Your menu for Boostnote</p>
         </div>
-        <button styleName='top-bar-close' onClick={(e) => this.handleEscButtonClick(e)}>
-          <div styleName='top-bar-close-mark'>×</div>
-          <div styleName='top-bar-close-text'>esc</div>
-        </button>
+        <ModalEscButton handleEscButtonClick={(e) => this.handleEscButtonClick(e)} />
         <div styleName='nav'>
           {navButtons}
         </div>

browser/main/modals/RenameFolderModal.js

@@ -3,6 +3,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './RenameFolderModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
+import ModalEscButton from 'browser/components/ModalEscButton'
 
 class RenameFolderModal extends React.Component {
   constructor (props) {
@@ -72,9 +73,7 @@ class RenameFolderModal extends React.Component {
         <div styleName='header'>
           <div styleName='title'>Rename Folder</div>
         </div>
-        <button styleName='closeButton'
-          onClick={(e) => this.handleCloseButtonClick(e)}
-        >Close</button>
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
 
         <div styleName='control'>
           <input styleName='control-input'

browser/main/modals/RenameFolderModal.styl

@@ -13,17 +13,6 @@
   border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
-  position absolute
-  top 10px
-  right 10px
-  height 30px
-  width 0 25px
-  border $ui-border
-  border-radius 2px
-  color $ui-text-color
-  colorDefaultButton()
-
 .control
   padding 25px 15px 15px
   text-align center
@@ -65,12 +54,7 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     color $ui-dark-text-color
 
-  .closeButton
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-    colorDarkDefaultButton()
-
-  .description
+   .description
     color $ui-inactive-text-color
 
   .control-input
@@ -78,4 +62,4 @@ body[data-theme="dark"]
     color $ui-dark-text-color
 
   .control-confirmButton
-    colorDarkPrimaryButton()
+    colorDarkPrimaryButton()

browser/main/store.js

@@ -24,7 +24,8 @@ function data (state = defaultDataMap(), action) {
         state.storageMap.set(storage.key, storage)
       })
 
-      action.notes.forEach((note) => {
+      action.notes.some((note) => {
+        if (note === undefined) return true
         let uniqueKey = note.storage + '-' + note.key
         let folderKey = note.storage + '-' + note.folder
         state.noteMap.set(uniqueKey, note)

browser/styles/index.styl

@@ -176,9 +176,9 @@ topBarButtonLight()
 // Dark theme
 $ui-dark-active-color = #3A404C
 $ui-dark-borderColor = lighten(#21252B, 20%)
-$ui-dark-backgroundColor = #1D1D1D
-$ui-dark-noteList-backgroundColor = #181818
-$ui-dark-noteDetail-backgroundColor = #0D0D0D
+$ui-dark-backgroundColor = #1E2124
+$ui-dark-noteList-backgroundColor = #282C30
+$ui-dark-noteDetail-backgroundColor = #2D3033
 $ui-dark-tag-backgroundColor = #3A404C
 $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-text-color = #DDDDDD

contributing.md

@@ -1,33 +1,69 @@
-# Contributing to Boostnote
+# Contributing to Boostnote (English)
 
-## When you open an issue of a bug report
+### When you open an issue of a bug report
 There are no issue template. But there is a request.
 
 **Please paste screenshots of Boostnote with developer tool open**
 
 Thank you for your help in advance.
 
-## About copyright of Pull Request
+### About copyright of Pull Request
 
-If you make a pull request, It means you agree to transfer the copyright of the code changes to MAISIN&CO.
+If you make a pull request, It means you agree to transfer the copyright of the code changes to Maisin&Co.
 
 It doesn't mean Boostnote will become a paid app. If we want to earn some money, We will try other way, which is some kind of cloud storage, Mobile app integration or some SPECIAL features.
 Because GPL v3 is too strict to be compatible with any other License, We thought this is needed to replace the license with much freer one(like BSD, MIT) somewhen.
 
 ---
 
-# Contributing to Boostnote(Japanese)
+# Contributing to Boostnote (Russian)
 
-## バグレポートに関してのissueを立てる時
+### Когда у вас появляется сообщение об ошибке
+У нас нет шаблона, по которому вы должны описать ошибку. Просто расскажите, как вы получили ее
+
+**Вставьте скриншот Boostnote с открытым инструментом разработчика (dev tools)**
+
+Благодарим Вас за помощь!
+
+### Об авторских правах Pull Request
+
+Если вы делаете pull request, значит вы согласны передать авторские права на изменения кода в Maisin&Co.
+
+Это не означает, что Boostnote станет платным приложением. Если мы захотим заработать немного денег, мы найдем другой способ. Например, использование облачного хранилища, интеграцией мобильных приложений или другими специальными функциями.
+Так как лицензия GPL v3 слишком строгая, чтобы быть совместимой с любой другой лицензией, мы думаем, что нужно заменить лицензию на более свободную (например, BSD, MIT).
+
+---
+
+# Contributing to Boostnote (Korean)
+
+### 버그 리포트를 보고할 때
+이슈의 양식은 없습니다. 하지만 부탁이 있습니다.
+
+**개발자 도구를 연 상태의 Boostnote 스크린샷을 첨부해주세요**
+
+도움을 주셔서 감사합니다.
+
+### Pull Request의 저작권에 관하여
+
+당신이 pull request를 요청하면, 코드 변경에 대한 저작권을 Maisin&Co에 양도한다는 것에 동의한다는 의미입니다.
+
+이것은 Boostnote가 유료화가 되는 것을 의미하는 건 아닙니다. 만약 우리가 자금이 필요하다면, 우리는 클라우드 연동, 모바일 앱 통합 혹은 특수한 기능 같은 것을 사용해 수입 창출을 시도할 것입니다.
+GPL v3 라이센스는 다른 라이센스와 혼합해 사용하기엔 너무 엄격하므로, 우리는 BSD, MIT 라이센스와 같은 더 자유로운 라이센스로 교체하는 것을 생각하고 있습니다.
+
+---
+
+# Contributing to Boostnote (Japanese)
+
+### バグレポートに関してのissueを立てる時
 イシューテンプレートはありませんが、1つお願いがあります。
 
 **開発者ツールを開いた状態のBoostnoteのスクリーンショットを貼ってください**
 
 よろしくお願いします。
 
-## Pull requestの著作権について
+### Pull requestの著作権について
 
-Pull requestをすることはその変化分のコードの著作権をMAISIN&CO.に譲渡することに同意することになります。
+Pull requestをすることはその変化分のコードの著作権をMaisin&Co.に譲渡することに同意することになります。
 
 アプリケーションのLicenseをいつでも変える選択肢を残したいと思うからです。
 これはいずれかBoostnoteが有料の商用アプリになる可能性がある話ではありません。

docs/build.md

@@ -1,5 +1,11 @@
 # Build
 
+## Environments
+* npm: 4.x
+* node: 7.x
+
+You should use `npm v4.x` because `$ grand pre-build` fails on `v5.x`.
+
 ## Development
 
 We use Webpack HMR to develop Boostnote.

docs/jp/testing.md

@@ -0,0 +1,15 @@
+# Testing for Boostnote
+## e2eテスト
+Boostnoteには[ava](https://github.com/avajs/ava)と[spectron](https://github.com/electron/spectron)で書かれたe2eテストがあります。
+
+### 実行方法
+以下のe2eテストのコマンドがあります。
+
+```
+$ yarn run test:e2e
+```
+
+もう一つのテストコマンドと分けた理由は、travisCIの都合です。
+
+### travisCIでは
+travisCIではmasterブランチで飲みe2eテストを実行するようにしています。もし興味がある方は `.travis.yml`をご覧ください。

docs/ru/build.md

@@ -0,0 +1,57 @@
+# Сборка
+
+## Используемые инструменты
+* npm: 4.x
+* node: 7.x
+
+Вы должны использовать `npm v4.x`, так как `$ grand pre-build` не работает в `v5.x`.
+
+## Разработка
+
+Мы используем Webpack HMR при разработке Boostnote.
+Выполнение следующих команд в корне проекта запустит Boostnote с настройками по умолчанию.
+
+Установите необходимые пакеты с помощью yarn.
+
+```
+$ yarn
+```
+
+Соберите и запустите.
+
+```
+$ yarn run dev-start
+```
+
+Эта команда выполняет `yarn run webpack` и `yarn run hot` параллельно. Результат будет такой же, если вы выполните эти две команды раздельно.
+
+`Webpack` будет следить за изменениями в коде и будет применять их автоматически.
+
+Если возникает следующая ошибка: `Failed to load resource: net::ERR_CONNECTION_REFUSED`, пожалуйста, перезапустите Boostnote.
+
+![net::ERR_CONNECTION_REFUSED](https://cloud.githubusercontent.com/assets/11307908/24343004/081e66ae-1279-11e7-8d9e-7f478043d835.png)
+
+> ### Примечание
+> В некоторых случаях вам необходимо обновить приложение вручную.
+> 1. При редактировании метода конструктора компонента
+> 2. При добавлении нового класса CSS (аналогично 1: Класс CSS перезаписывается каждым компонентом. Этот процесс выполняется в методе Constructor.)
+
+## Деплой
+
+Мы используем Grunt для автоматического деплоя.
+Вы можете создать задачу, используя `grunt`. Однако мы не рекомендуем этого делать, так как задача по умолчанию включает в себя код и аутентификацию.
+
+Мы подготовили отдельный скрипт, который просто создает исполняемый файл:
+
+```
+grunt pre-build
+```
+
+Вы найдете исполняемый файл в папке `dist`. Обратите внимание: автоматическое обновление не будет работать, потому что приложение не подписано.
+
+Если вам необходимо, вы можете использовать код или аутентификацию с помощью этого исполняемого файла.
+
+---
+
+Special thanks:
+Translated by @AlexanderBelkevich

docs/ru/debug.md

@@ -0,0 +1,25 @@
+# Как отладить Boostnote (приложение Electron)
+Boostnote - это программа, сделанная с помощью Electron, поэтому она базируется на Chromium. Разработчики могут использовать `Developer Tools` в Google Chrome для отладки.
+
+Вы можете переключиться в `Developer Tools` следующим образом:
+![how_to_toggle_devTools](https://cloud.githubusercontent.com/assets/11307908/24343585/162187e2-127c-11e7-9c01-23578db03ecf.png)
+
+`Developer Tools` будет выглядеть следующим образом:
+![Developer_Tools](https://cloud.githubusercontent.com/assets/11307908/24343545/eff9f3a6-127b-11e7-94cf-cb67bfda634a.png)
+
+Возможные ошибки отображаются во вкладке `console`.
+
+## Отладка
+Например, вы можете использовать `debugger`, чтобы установить точку остановы следующим образом:
+
+![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png)
+
+Это всего лишь пример. Вы можете использовать любой свой способ отладки. Тот, который вам будет удобен.
+
+## Рекомендации
+* [Официальная документация Google Chrome об отладке](https://developer.chrome.com/devtools)
+
+---
+
+Special thanks:
+Translated by @AlexanderBelkevich

docs/ru/testing.md

@@ -0,0 +1,20 @@
+# Тестирование для Boostnote
+## Тестирование e2e
+Существуют тесты e2e для Boostnote, написанные на [ava](https://github.com/avajs/ava) и [spectron](https://github.com/electron/spectron).
+
+### Как запустить
+Для тестирование e2e существует команда:
+
+```
+$ yarn run test:e2e
+```
+
+Причина, по которой я использую другую команду тестирования - это удобство travisCI.
+
+### TravisCI
+Я установил тесты e2e, запущенные на travisCI, только в ветке master. Если вас это интересует, ознакомьтесь с файлом .travis.yml
+
+---
+
+Special thanks:
+Translated by @AlexanderBelkevich

docs/testing.md

@@ -0,0 +1,15 @@
+# Testing for Boostnote
+## e2e testing
+There is e2e tests for Boostnote written in [ava](https://github.com/avajs/ava) and [spectron](https://github.com/electron/spectron).
+
+### How to run
+There is a command for e2e testing bellow:
+
+```
+$ yarn run test:e2e
+```
+
+The reason why I seperate aother test command is because of convenience of travisCI.
+
+### On travisCI
+I set e2e tests running on travisCI only master branch. If you're interested in it, please take a look at .travis.yml

gruntfile.js

@@ -259,6 +259,8 @@ module.exports = function (grunt) {
       case 'osx':
         grunt.task.run(['compile', 'pack:osx'])
         break
+      case 'linux':
+        grunt.task.run(['compile', 'pack:linux'])
     }
   })
 

lib/finder.html

@@ -32,6 +32,7 @@
   <script src="../node_modules/codemirror/addon/mode/loadmode.js"></script>
   <script src="../node_modules/codemirror/keymap/sublime.js"></script>
   <script src="../node_modules/codemirror/keymap/vim.js"></script>
+  <script src="../node_modules/codemirror/keymap/emacs.js"></script>
   <script src="../node_modules/codemirror/addon/runmode/runmode.js"></script>
 
   <script src="../node_modules/raphael/raphael.min.js"></script>

lib/main-menu.js

@@ -92,6 +92,20 @@ const file = {
     {
       type: 'separator'
     },
+    {
+      label: 'Import from',
+      submenu: [
+        {
+          label: 'Plain Text, MarkDown (.txt, .md)',
+          click () {
+            mainWindow.webContents.send('import:file')
+          }
+        }
+      ]
+    },
+    {
+      type: 'separator'
+    },
     {
       label: 'Delete Note',
       accelerator: macOS ? 'Control+Backspace' : 'Control+Delete',

lib/main.html

@@ -59,6 +59,7 @@
   <script src="../node_modules/codemirror/addon/mode/loadmode.js"></script>
   <script src="../node_modules/codemirror/keymap/sublime.js"></script>
   <script src="../node_modules/codemirror/keymap/vim.js"></script>
+  <script src="../node_modules/codemirror/keymap/emacs.js"></script>
   <script src="../node_modules/codemirror/addon/runmode/runmode.js"></script>
 
   <script src="../node_modules/codemirror/addon/edit/continuelist.js"></script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boost",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "main": "index.js",
   "description": "Boostnote",
   "license": "GPL-3.0",
@@ -10,6 +10,7 @@
     "webpack": "webpack-dev-server --hot --inline --config webpack.config.js",
     "compile": "grunt compile",
     "test": "PWD=$(pwd) NODE_ENV=test ava",
+    "test:e2e": "NODE_ENV=test ava tests/e2e/*",
     "fix": "npm run lint --fix",
     "lint": "eslint .",
     "dev-start": "concurrently --kill-others \"npm run webpack\" \"npm run hot\""
@@ -49,6 +50,8 @@
   "dependencies": {
     "@rokt33r/markdown-it-math": "^4.0.1",
     "@rokt33r/season": "^5.3.0",
+    "aws-sdk": "^2.48.0",
+    "aws-sdk-mobile-analytics": "^0.9.2",
     "codemirror": "^5.19.0",
     "electron-config": "^0.2.1",
     "electron-gh-releases": "^2.0.2",
@@ -62,6 +65,7 @@
     "markdown-it-checkbox": "^1.1.0",
     "markdown-it-emoji": "^1.1.1",
     "markdown-it-footnote": "^3.0.0",
+    "markdown-it-imsize": "^2.0.1",
     "md5": "^2.0.0",
     "mixpanel": "^0.4.1",
     "moment": "^2.10.3",
@@ -87,6 +91,7 @@
     "babel-preset-react-hmre": "^1.0.1",
     "babel-register": "^6.11.6",
     "concurrently": "^3.4.0",
+    "copy-to-clipboard": "^3.0.6",
     "css-loader": "^0.19.0",
     "devtron": "^1.1.0",
     "dom-storage": "^2.0.2",
@@ -100,6 +105,7 @@
     "grunt-electron-installer": "^1.2.0",
     "history": "^1.17.0",
     "jsdom": "^9.4.2",
+    "json-loader": "^0.5.4",
     "merge-stream": "^1.0.0",
     "nib": "^1.1.0",
     "react-color": "^2.2.2",
@@ -107,6 +113,7 @@
     "react-input-autosize": "^1.1.0",
     "react-router": "^2.4.0",
     "react-router-redux": "^4.0.4",
+    "spectron": "^3.6.2",
     "standard": "^8.4.0",
     "style-loader": "^0.12.4",
     "stylus": "^0.52.4",

readme-ja.md

@@ -25,7 +25,7 @@
 
 ## slack group
 私たちにはslack groupもあります！世界中のプログラマー達と、Boostnoteについてディスカッションをしましょう！ <br>
-[こちらから](https://join.slack.com/boostnote-group/shared_invite/MTc2NTc5MTkyMjc3LTE0OTM0NDI5MzgtNzdkNjZjMzJhNA)
+[こちらから](https://join.slack.com/boostnote-group/shared_invite/MjAwNTAwNzc4MDM0LTE0OTc5NjIzMDItZjcyOWIyOWY5YQ)
 
 ## More Information
 * Website: http://boostnote.io/

readme.md

@@ -25,7 +25,7 @@
 
 ## Slack Group
 Let's talk about Boostnote's great features, new feature requests and things like Japanese gourmet. 🍣 <br>
-[Join us](https://join.slack.com/boostnote-group/shared_invite/MTc2NTc5MTkyMjc3LTE0OTM0NDI5MzgtNzdkNjZjMzJhNA)
+[Join us](https://join.slack.com/boostnote-group/shared_invite/MjAwNTAwNzc4MDM0LTE0OTc5NjIzMDItZjcyOWIyOWY5YQ)
 
 ## More Information
 * [Website](https://boostnote.io)

script/e2e-runner.sh

@@ -0,0 +1,9 @@
+if [[ ${TRAVIS_OS_NAME} = "linux" ]]; then
+  export DISPLAY=:99.0
+  sh -e /etc/init.d/xvfb start;
+  sleep 3
+fi
+
+npm install grunt-cli -g
+grunt pre-build
+npm run test:e2e

tests/e2e/spectron.js

@@ -0,0 +1,39 @@
+import test from 'ava'
+import {Application} from 'spectron'
+import path from 'path'
+
+test.beforeEach(async t => {
+  const boostnotePath = ((platform) => {
+    switch (platform) {
+      case 'darwin':
+        return path.join('..', '..', 'dist', 'Boostnote-darwin-x64', 'Boostnote.app', 'Contents', 'MacOS', 'Boostnote')
+      case 'linux':
+        return path.join('..', '..', 'dist', 'Boostnote-linux-x64', 'Boostnote')
+    }
+  })(process.platform)
+  t.context.app = new Application({
+    path: boostnotePath
+  })
+
+  await t.context.app.start()
+})
+
+test.afterEach.always(async t => {
+  await t.context.app.stop()
+})
+
+test(async t => {
+  const app = t.context.app
+  await app.client.waitUntilWindowLoaded()
+
+  const win = app.browserWindow
+  t.is(await app.client.getWindowCount(), 1)
+  t.false(await win.isMinimized())
+  t.false(await win.isDevToolsOpened())
+  t.true(await win.isVisible())
+  t.true(await win.isFocused())
+
+  const {width, height} = await win.getBounds()
+  t.true(width > 0)
+  t.true(height > 0)
+})

tests/fixtures/TestDummy.js

@@ -175,5 +175,6 @@ module.exports = {
   dummyFolder,
   dummyBoostnoteJSONData,
   dummyStorage,
-  dummyLegacyStorage
+  dummyLegacyStorage,
+  dummyNote
 }

tests/lib/find-title-test.js

@@ -0,0 +1,25 @@
+/**
+ * @fileoverview Unit test for browser/lib/findTitle
+ */
+
+const test = require('ava')
+const { findNoteTitle } = require('browser/lib/findNoteTitle')
+
+// Unit test
+test('findNoteTitle#find  should return a correct title (string)', t => {
+  // [input, expected]
+  const testCases = [
+    ['# hoge\nfuga', '# hoge'],
+    ['# hoge_hoge_hoge', '# hoge_hoge_hoge'],
+    ['hoge\n====\nfuga', 'hoge'],
+    ['====', '===='],
+    ['```\n# hoge\n```', '```'],
+    ['hoge', 'hoge']
+  ]
+
+  testCases.forEach(testCase => {
+    const [input, expected] = testCase
+    t.is(findNoteTitle(input), expected, `Test for find() input: ${input} expected: ${expected}`)
+  })
+})
+

tests/lib/html-text-helper-test.js

@@ -12,7 +12,8 @@ test('htmlTextHelper#decodeEntities should return encoded text (string)', t => {
     ['var test = 'test'', 'var test = \'test\''],
     ['&lt;a href=&apos;https://boostnote.io&apos;&gt;Boostnote', '<a href=\'https://boostnote.io\'>Boostnote'],
     ['&lt;\\\\?php\n var = &apos;hoge&apos;;', '<\\\\?php\n var = \'hoge\';'],
-    ['&amp;', '&']
+    ['&amp;', '&'],
+    ['a&#36;&apos;', 'a\\$\'']
   ]
 
   testCases.forEach(testCase => {
@@ -27,7 +28,8 @@ test('htmlTextHelper#decodeEntities() should return decoded text (string)', t =>
     ['<a href=', '&lt;a href='],
     ['var test = \'test\'', 'var test = &apos;test&apos;'],
     ['<a href=\'https://boostnote.io\'>Boostnote', '&lt;a href=&apos;https://boostnote.io&apos;&gt;Boostnote'],
-    ['<?php\n var = \'hoge\';', '&lt;&#63;php\n var = &apos;hoge&apos;;']
+    ['<?php\n var = \'hoge\';', '&lt;&#63;php\n var = &apos;hoge&apos;;'],
+    ['a$\'', 'a&#36;&apos;']
   ]
 
   testCases.forEach(testCase => {

tests/lib/search-test.js

@@ -0,0 +1,36 @@
+import test from 'ava'
+import searchFromNotes from 'browser/lib/search'
+import { dummyNote } from '../fixtures/TestDummy'
+import _ from 'lodash'
+
+const pickContents = (notes) => notes.map((note) => { return note.content })
+
+let noteList = { noteMap: [] }
+let note1, note2
+
+test.before(t => {
+  const data1 = { type: 'MARKDOWN_NOTE', content: 'content1', tags: ['tag1'] }
+  const data2 = { type: 'MARKDOWN_NOTE', content: 'content1\ncontent2', tags: ['tag1', 'tag2'] }
+  note1 = dummyNote(data1)
+  note2 = dummyNote(data2)
+
+  noteList.noteMap = [note1, note2]
+})
+
+test('it can find notes by tags or words', t => {
+  // [input, expected content (Array)]
+  const testCases = [
+    ['#tag1', [note1.content, note2.content]],
+    ['#tag1 #tag2', [note2.content]],
+    ['#tag1 #tag2 #tag3', []],
+    ['content1', [note1.content, note2.content]],
+    ['content1 content2', [note2.content]],
+    ['content1 content2 content3', []]
+  ]
+
+  testCases.forEach((testCase) => {
+    const [input, expectedContents] = testCase
+    const results = searchFromNotes(noteList, input)
+    t.true(_.isEqual(pickContents(results).sort(), expectedContents.sort()))
+  })
+})

webpack-production.config.js

@@ -15,6 +15,10 @@ var config = Object.assign({}, skeleton, {
         test: /\.styl$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[path]!stylus?sourceMap'
+      },
+      {
+        test: /\.json$/,
+        loader: 'json'
       }
     ]
   },

webpack.config.js

@@ -13,6 +13,10 @@ var config = Object.assign({}, skeleton, {
         test: /\.styl$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[path]!stylus?sourceMap'
+      },
+      {
+        test: /\.json$/,
+        loader: 'json'
       }
     ]
   },