Merge pull request #527 from BoostIO/fix-add-description

Add description for package.json

browser/components/MarkdownPreview.js

@@ -8,21 +8,7 @@ import flowchart from 'flowchart'
 import SequenceDiagram from 'js-sequence-diagrams'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import fs from 'fs'
-
+import htmlTextHelper from 'browser/lib/htmlTextHelper'
-function decodeHTMLEntities (text) {
-  var entities = [
-    ['apos', '\''],
-    ['amp', '&'],
-    ['lt', '<'],
-    ['gt', '>']
-  ]
-
-  for (var i = 0, max = entities.length; i < max; ++i) {
-    text = text.replace(new RegExp('&' + entities[i][0] + ';', 'g'), entities[i][1])
-  }
-
-  return text
-}
 
 const { remote } = require('electron')
 const { app } = remote
@@ -73,6 +59,10 @@ h2 {
   padding-bottom: 0.2em;
   margin: 1em 0 0.37em;
 }
+
+body p {
+  white-space: normal;
+}
 `
 }
 
@@ -241,6 +231,13 @@ export default class MarkdownPreview extends React.Component {
     let { value, theme, indentSize, codeBlockTheme } = this.props
 
     this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
+
+    const codeBlocks = value.match(/(```)(.|[\n])*?(```)/g)
+    if (codeBlocks !== null) {
+      codeBlocks.forEach((codeBlock) => {
+        value = value.replace(codeBlock, htmlTextHelper.encodeEntities(codeBlock))
+      })
+    }
     this.refs.root.contentWindow.document.body.innerHTML = markdown.render(value)
 
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.taskListItem'), (el) => {
@@ -263,7 +260,7 @@ export default class MarkdownPreview extends React.Component {
       let syntax = CodeMirror.findModeByName(el.className)
       if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
       CodeMirror.requireMode(syntax.mode, () => {
-        let content = decodeHTMLEntities(el.innerHTML)
+        let content = htmlTextHelper.decodeEntities(el.innerHTML)
         el.innerHTML = ''
         el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
         CodeMirror.runMode(content, syntax.mime, el, {
@@ -281,7 +278,7 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.flowchart'), (el) => {
       Raphael.setWindow(this.getWindow())
       try {
-        let diagram = flowchart.parse(decodeHTMLEntities(el.innerHTML))
+        let diagram = flowchart.parse(htmlTextHelper.decodeEntities(el.innerHTML))
         el.innerHTML = ''
         diagram.drawSVG(el, opts)
         _.forEach(el.querySelectorAll('a'), (el) => {
@@ -297,7 +294,7 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.sequence'), (el) => {
       Raphael.setWindow(this.getWindow())
       try {
-        let diagram = SequenceDiagram.parse(decodeHTMLEntities(el.innerHTML))
+        let diagram = SequenceDiagram.parse(htmlTextHelper.decodeEntities(el.innerHTML))
         el.innerHTML = ''
         diagram.drawSVG(el, {theme: 'simple'})
         _.forEach(el.querySelectorAll('a'), (el) => {

browser/components/NoteItem.styl

@@ -22,6 +22,8 @@ $control-height = 30px
     .item-bottom-tagList-item
       background-color alpha(white, 0.6)
       color $ui-text-color
+    .item-star
+      color $ui-favorite-star-button-color
   &:active
     background-color $ui-button--active-backgroundColor
     color $ui-text-color
@@ -53,6 +55,8 @@ $control-height = 30px
     color $ui-text-color
   .item-wrapper
     border-color transparent
+  .item-star
+    color $ui-favorite-star-button-color
   &:hover
     background-color $ui-button--active-backgroundColor
 
@@ -111,11 +115,11 @@ $control-height = 30px
 
 .item-star
   position absolute
-  top 19px
+  top 34px
   left 5px
   width 34px
   height 34px
-  color $ui-favorite-star-button-color
+  color alpha($ui-favorite-star-button-color, 60%)
   font-size 12px
   padding 0
   border-radius 17px
@@ -154,7 +158,7 @@ body[data-theme="dark"]
         color $ui-dark-text-color  
 
   .item-wrapper
-    border-color $ui-dark-borderColor
+    border-color alpha($ui-dark-button--active-backgroundColor, 60%)
 
   .item--active
     border-color $ui-dark-borderColor

browser/components/NoteItemSimple.styl

@@ -96,7 +96,7 @@ body[data-theme="dark"]
 
   .item-simple-title
     color $ui-inactive-text-color
-    border-color $ui-dark-borderColor
+    border-color alpha($ui-dark-button--active-backgroundColor, 60%)
 
   .item-simple-title-icon
     color $ui-darkinactive-text-color

browser/components/StorageItem.styl

@@ -35,7 +35,7 @@
 .folderList-item-name
   display block
   flex 1
-  padding 0 15px
+  padding 0 25px
   height 26px
   line-height 26px
   border-width 0 0 0 2px

browser/lib/htmlTextHelper.js

@@ -0,0 +1,43 @@
+/**
+ * @fileoverview Text trimmer for html.
+ */
+
+/**
+ * @param {string} text
+ * @return {string}
+ */
+
+export function decodeEntities (text) {
+  var entities = [
+    ['apos', '\''],
+    ['amp', '&'],
+    ['lt', '<'],
+    ['gt', '>'],
+    ['#63', '\\?']
+  ]
+
+  for (var i = 0, max = entities.length; i < max; ++i) {
+    text = text.replace(new RegExp(`&${entities[i][0]};`, 'g'), entities[i][1])
+  }
+
+  return text
+}
+
+export function encodeEntities (text) {
+  const entities = [
+    ['\'', 'apos'],
+    ['<', 'lt'],
+    ['>', 'gt'],
+    ['\\?', '#63']
+  ]
+
+  entities.forEach((entity) => {
+    text = text.replace(new RegExp(entity[0], 'g'), `&${entity[1]};`)
+  })
+  return text
+}
+
+export default {
+  decodeEntities,
+  encodeEntities
+}

browser/lib/markdown.js

@@ -19,6 +19,7 @@ var md = markdownit({
   linkify: true,
   html: true,
   xhtmlOut: true,
+  breaks: true,
   highlight: function (str, lang) {
     if (lang === 'flowchart') {
       return `<pre class="flowchart">${str}</pre>`

browser/main/Detail/index.js

@@ -17,7 +17,7 @@ class Detail extends React.Component {
       this.refs.root != null && this.refs.root.focus()
     }
     this.deleteHandler = () => {
-      this.refs.root != null && this.refs.root.handleDeleteMenuClick()
+      this.refs.root != null && this.refs.root.handleDeleteButtonClick()
     }
   }
 

browser/main/SideNav/StorageItem.styl

@@ -4,12 +4,13 @@
 
 .header
   position relative
-  height 26px
+  height 25px
   width 100%
   margin-bottom 5px
   transition 0.15s
 
 .header--active
+  margin-bottom 5px
   background-color $ui-button--active-backgroundColor
   transition color background-color  0.15s
 
@@ -30,26 +31,29 @@
   position absolute
   left 0
   width 25px
-  height 26px
+  height 25px
   padding 0
   border none
+  border-radius 50%
   &:hover
-    background-color transparent
+    transition 0.2s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
 
 .header-info
   navButtonColor()
   display block
   width 100%
-  height 30px
+  height 25px
-  padding-left 25px
+  padding-left 23px
   padding-right 10px
-  line-height 26px
+  line-height 22px
   cursor pointer
   font-size 13px
   border none
   overflow ellipsis
   text-align left
+  background-color alpha($ui-button--active-backgroundColor, 20%)
 
 .header-info-path
   font-size 10px
@@ -60,11 +64,14 @@
   position absolute
   right 0
   width 25px
-  height 26px
+  height 25px
   padding 0
   border none
+  margin-right 5px
+  border-radius 50%
   &:hover
-    background-color transparent
+    transition 0.2s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
 
 .root--folded
@@ -117,10 +124,17 @@ body[data-theme="dark"]
 
   .header-toggleButton
     &:hover
+      transition 0.2s
       color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
 
   .header-info
+    background-color alpha($ui-dark-button--active-backgroundColor, 20%)
     &:hover
+      transition 0.2s
       color $ui-dark-text-color
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
     &:active, &:active:hover
@@ -129,4 +143,9 @@ body[data-theme="dark"]
 
   .header-addFolderButton
     &:hover
-      color $ui-dark-text-color
+      transition 0.2s
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor

browser/main/lib/modal.js

@@ -15,6 +15,9 @@ class ModalBase extends React.Component {
 
   close () {
     if (modalBase != null) modalBase.setState({component: null, componentProps: null, isHidden: true})
+    // Toggle overflow style on NoteList
+    let list = document.querySelector('.NoteList__list___browser-main-NoteList-')
+    list.style.overflow = 'auto'
   }
 
   render () {
@@ -37,7 +40,9 @@ let modalBase = ReactDOM.render(<ModalBase />, el)
 
 export function openModal (component, props) {
   if (modalBase == null) { return }
-
+  // Hide scrollbar by removing overflow when modal opens
+  let list = document.querySelector('.NoteList__list___browser-main-NoteList-')
+  list.style.overflow = 'hidden'
   document.body.setAttribute('data-modal', 'open')
   modalBase.setState({component: component, componentProps: props, isHidden: false})
 }

browser/main/modals/NewNoteModal.js

@@ -117,7 +117,7 @@ class NewNoteModal extends React.Component {
               className='fa fa-file-text-o'
             /><br />
             <span styleName='control-button-label'>Markdown Note</span><br />
-            <span styleName='control-button-description'>It is good for any type of documents. Check List, Code block and Latex block are available.</span>
+            <span styleName='control-button-description'>This format is for creating text documents. Checklists, code blocks and Latex blocks are available.</span>
           </button>
 
           <button styleName='control-button'
@@ -129,7 +129,7 @@ class NewNoteModal extends React.Component {
               className='fa fa-code'
             /><br />
             <span styleName='control-button-label'>Snippet Note</span><br />
-            <span styleName='control-button-description'>This format is specialized on managing snippets like Gist. Multiple snippets can be grouped as a note.
+            <span styleName='control-button-description'>This format is for creating code snippets. Multiple snippets can be grouped into a single note.
             </span>
           </button>
 

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -139,6 +139,7 @@ class HotkeyTab extends React.Component {
                 <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
                 <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
                 <li><code>Control</code> (or <code>Ctrl</code> for short)</li>
+                <li><code>Shift</code></li>
               </ul>
             </div>
           }

browser/main/modals/PreferencesModal/InfoTab.js

@@ -47,9 +47,9 @@ class InfoTab extends React.Component {
             >Boostnote Shop</a> : Products are shipped to all over the world 🌏
           </li>
           <li>
-            <a href='https://www.patreon.com/boostnote'
+            <a href='https://salt.bountysource.com/teams/boostnote'
               onClick={(e) => this.handleLinkClick(e)}
-            >Donate via Patreon</a> : Thank you for your support 🎉
+            >Donate via Bountysource</a> : Thank you for your support 🎉
           </li>
           <li>
             <a href='https://github.com/BoostIO/Boostnote/issues'

package.json

@@ -1,8 +1,8 @@
 {
   "name": "boost",
-  "version": "0.8.8",
+  "version": "0.8.9",
-  "description": "Boostnote",
   "main": "index.js",
+  "description": "Boostnote",
   "license": "GPL-3.0",
   "scripts": {
     "start": "electron ./index.js",

readme-ja.md

@@ -25,13 +25,13 @@
 
 ## slack group
 私たちにはslack groupもあります！世界中のプログラマー達と、Boostnoteについてディスカッションをしましょう！ <br>
-[こちらから](https://boostnote-group.slack.com/shared_invite/MTcxMjIwODk5Mzk3LTE0OTI1NjQxNDUtMTkwZTBjOWFkMg)
+[こちらから](https://join.slack.com/boostnote-group/shared_invite/MTc2NTc5MTkyMjc3LTE0OTM0NDI5MzgtNzdkNjZjMzJhNA)
 
 ## More Information
 * Website: http://boostnote.io/
 * Roadmap(upcoming features and bug fixes): https://github.com/BoostIO/Boostnote/wiki/List-of-the-requested-features
 * Boostnote Shop(Products are shipped to all over the world :+1:): https://boostnote.paintory.com/
-* Donation: [Patreon](https://www.patreon.com/boostnote)
+* Donation: [Bountysource](https://salt.bountysource.com/teams/boostnote)
 * Development: https://github.com/BoostIO/Boostnote/blob/master/docs/build.md
 * Copyright (C) 2017 Maisin&Co.
 

readme.md

@@ -25,12 +25,12 @@
 
 ## Slack Group
 Let's talk about Boostnote's great features, new feature requests and things like Japanese gourmet. 🍣 <br>
-[Join us](https://boostnote-group.slack.com/shared_invite/MTcxMjIwODk5Mzk3LTE0OTI1NjQxNDUtMTkwZTBjOWFkMg)
+[Join us](https://join.slack.com/boostnote-group/shared_invite/MTc2NTc5MTkyMjc3LTE0OTM0NDI5MzgtNzdkNjZjMzJhNA)
 
 ## More Information
 * [Website](https://boostnote.io)
 * [Boostnote Shop](https://boostnote.paintory.com/) : Products are shipped to all over the world 🌏
-* [Donate via Patreon](https://www.patreon.com/boostnote) : Thank you for your support 🎉
+* [Donate via Bountysource](https://salt.bountysource.com/teams/boostnote) : Thank you for your support 🎉
 * [GitHub Issues](https://github.com/BoostIO/Boostnote/issues) : We'd love to hear your feedback 🙌
 * [Development](https://github.com/BoostIO/Boostnote/blob/master/docs/build.md) : Development configurations for Boostnote 🚀
 * Copyright (C) 2017 Maisin&Co.

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

@@ -0,0 +1,52 @@
+/**
+ * @fileoverview Unit test for browser/lib/htmlTextHelper
+ */
+const test = require('ava')
+const htmlTextHelper = require('browser/lib/htmlTextHelper')
+
+// Unit test
+test('htmlTextHelper#decodeEntities should return encoded text (string)', t => {
+  // [input, expected]
+  const testCases = [
+    ['&lt;a href=', '<a href='],
+    ['var test = &apos;test&apos;', '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;', '&']
+  ]
+
+  testCases.forEach(testCase => {
+    const [input, expected] = testCase
+    t.is(htmlTextHelper.decodeEntities(input), expected, `Test for decodeEntities() input: ${input} expected: ${expected}`)
+  })
+})
+
+test('htmlTextHelper#decodeEntities() should return decoded text (string)', t => {
+  // [input, expected]
+  const testCases = [
+    ['<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;;']
+  ]
+
+  testCases.forEach(testCase => {
+    const [input, expected] = testCase
+    t.is(htmlTextHelper.encodeEntities(input), expected, `Test for encodeEntities() input: ${input} expected: ${expected}`)
+  })
+})
+
+// Integration test
+test(t => {
+  const testCases = [
+    'var test = \'test\'',
+    '<a href=\'https://boostnote.io\'>Boostnote',
+    '<Component styleName=\'test\' />'
+  ]
+
+  testCases.forEach(testCase => {
+    const encodedText = htmlTextHelper.encodeEntities(testCase)
+    const decodedText = htmlTextHelper.decodeEntities(encodedText)
+    t.is(decodedText, testCase, 'Integration test through encodedText() and decodedText()')
+  })
+})