Merge branch 'master' into localization

browser/components/NoteItem.js

@@ -100,7 +100,7 @@ const NoteItem = ({
           {note.isStarred
             ? <img styleName='item-star' src='../resources/icon/icon-starred.svg' /> : ''
           }
-          {note.isPinned && !pathname.match(/\/home|\/starred|\/trash/)
+          {note.isPinned && !pathname.match(/\/starred|\/trash/)
             ? <i styleName='item-pin' className='fa fa-thumb-tack' /> : ''
           }
           {note.type === 'MARKDOWN_NOTE'

browser/components/NoteItem.styl

@@ -144,18 +144,18 @@ $control-height = 30px
   padding-bottom 2px
 
 .item-star
-  position relative
-  width 16px
-  height 16px
+  position absolute
+  right 2px
+  top 5px
   color alpha($ui-favorite-star-button-color, 60%)
   font-size 12px
   padding 0
   border-radius 17px
 
 .item-pin
-  position relative
-  width 34px
-  height 34px
+  position absolute
+  right 25px
+  top 7px
   color #E54D42
   font-size 14px
   padding 0

browser/components/StorageItem.js

@@ -8,6 +8,17 @@ import CSSModules from 'browser/lib/CSSModules'
 import _ from 'lodash'
 import { SortableHandle } from 'react-sortable-hoc'
 
+const DraggableIcon = SortableHandle(({ className }) => (
+  <i className={`fa ${className}`} />
+))
+
+const FolderIcon = ({ className, color, isActive }) => {
+  const iconStyle = isActive ? 'fa-folder-open-o' : 'fa-folder-o'
+  return (
+    <i className={`fa ${iconStyle} ${className}`} style={{ color: color }} />
+  )
+}
+
 /**
  * @param {boolean} isActive
  * @param {Function} handleButtonClick
@@ -22,34 +33,51 @@ import { SortableHandle } from 'react-sortable-hoc'
  * @return {React.Component}
  */
 const StorageItem = ({
-  isActive, handleButtonClick, handleContextMenu, folderName,
-  folderColor, isFolded, noteCount, handleDrop, handleDragEnter, handleDragLeave
+  styles,
+  isActive,
+  handleButtonClick,
+  handleContextMenu,
+  folderName,
+  folderColor,
+  isFolded,
+  noteCount,
+  handleDrop,
+  handleDragEnter,
+  handleDragLeave
 }) => {
-  const FolderDragger = SortableHandle(({ className }) => <i className={className} />)
   return (
-    <button styleName={isActive
-      ? 'folderList-item--active'
-      : 'folderList-item'
-    }
+    <button
+      styleName={isActive ? 'folderList-item--active' : 'folderList-item'}
       onClick={handleButtonClick}
       onContextMenu={handleContextMenu}
       onDrop={handleDrop}
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
     >
-      <span styleName={isFolded
-        ? 'folderList-item-name--folded' : 'folderList-item-name'
-      }>
-        <text style={{color: folderColor, paddingRight: '10px'}}>{isActive ? <FolderDragger className='fa fa-folder-open-o' /> : <FolderDragger className='fa fa-folder-o' />}</text>{isFolded ? _.truncate(folderName, {length: 1, omission: ''}) : folderName}
+      {!isFolded && (
+        <DraggableIcon className={styles['folderList-item-reorder']} />
+      )}
+      <span
+        styleName={
+          isFolded ? 'folderList-item-name--folded' : 'folderList-item-name'
+        }
+      >
+        <FolderIcon
+          styleName='folderList-item-icon'
+          color={folderColor}
+          isActive={isActive}
+        />
+        {isFolded
+          ? _.truncate(folderName, { length: 1, omission: '' })
+          : folderName}
       </span>
-      {(!isFolded && _.isNumber(noteCount)) &&
-        <span styleName='folderList-item-noteCount'>{noteCount}</span>
-      }
-      {isFolded &&
-        <span styleName='folderList-item-tooltip'>
-          {folderName}
-        </span>
-      }
+      {!isFolded &&
+        _.isNumber(noteCount) && (
+          <span styleName='folderList-item-noteCount'>{noteCount}</span>
+        )}
+      {isFolded && (
+        <span styleName='folderList-item-tooltip'>{folderName}</span>
+      )}
     </button>
   )
 }

browser/components/StorageItem.styl

@@ -13,6 +13,7 @@
   border none
   overflow ellipsis
   font-size 14px
+  align-items: center
   &:first-child
     margin-top 0
   &:hover
@@ -22,7 +23,7 @@
   &:active
     color $$ui-button-default-color
     background-color alpha($ui-button-default--active-backgroundColor, 20%)
-    
+
 .folderList-item--active
   @extend .folderList-item
   color #1EC38B
@@ -34,9 +35,7 @@
 .folderList-item-name
   display block
   flex 1
-  padding 0 12px
-  height 26px
-  line-height 26px
+  padding-right: 10px
   border-width 0 0 0 2px
   border-style solid
   border-color transparent
@@ -69,9 +68,20 @@
 .folderList-item-name--folded
   @extend .folderList-item-name
   padding-left 7px
-  text
+  .folderList-item-icon
     font-size 9px
 
+.folderList-item-icon
+  padding-right: 10px
+
+.folderList-item-reorder
+  font-size: 9px
+  padding: 10px 8px 10px 9px;
+  color: rgba(147, 147, 149, 0.3)
+  cursor: ns-resize
+  &:before
+    content: "\f142 \f142"
+
 body[data-theme="white"]
   .folderList-item
     color $ui-inactive-text-color
@@ -127,4 +137,4 @@ body[data-theme="solarized-dark"]
       background-color $ui-solarized-dark-button-backgroundColor
     &:hover
       color $ui-solarized-dark-text-color
-      background-color $ui-solarized-dark-button-backgroundColor
+      background-color $ui-solarized-dark-button-backgroundColor

browser/lib/markdown.js

@@ -55,9 +55,38 @@ class Markdown {
 
     // Sanitize use rinput before other plugins
     this.md.use(sanitize, {
-      allowedTags: ['img', 'iframe', 'input'],
+      allowedTags: ['iframe', 'input', 'b',
+        'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7', 'h8', 'br', 'b', 'i', 'strong', 'em', 'a', 'pre', 'code', 'img', 'tt',
+        'div', 'ins', 'del', 'sup', 'sub', 'p', 'ol', 'ul', 'table', 'thead', 'tbody', 'tfoot', 'blockquote',
+        'dl', 'dt', 'dd', 'kbd', 'q', 'samp', 'var', 'hr', 'ruby', 'rt', 'rp', 'li', 'tr', 'td', 'th', 's', 'strike', 'summary', 'details'
+      ],
       allowedAttributes: {
-        '*': ['alt', 'style'],
+        '*': [
+          'style',
+          'abbr', 'accept', 'accept-charset',
+          'accesskey', 'action', 'align', 'alt', 'axis',
+          'border', 'cellpadding', 'cellspacing', 'char',
+          'charoff', 'charset', 'checked',
+          'clear', 'cols', 'colspan', 'color',
+          'compact', 'coords', 'datetime', 'dir',
+          'disabled', 'enctype', 'for', 'frame',
+          'headers', 'height', 'hreflang',
+          'hspace', 'ismap', 'label', 'lang',
+          'maxlength', 'media', 'method',
+          'multiple', 'name', 'nohref', 'noshade',
+          'nowrap', 'open', 'prompt', 'readonly', 'rel', 'rev',
+          'rows', 'rowspan', 'rules', 'scope',
+          'selected', 'shape', 'size', 'span',
+          'start', 'summary', 'tabindex', 'target',
+          'title', 'type', 'usemap', 'valign', 'value',
+          'vspace', 'width', 'itemprop'
+        ],
+        'a': ['href'],
+        'div': ['itemscope', 'itemtype'],
+        'blockquote': ['cite'],
+        'del': ['cite'],
+        'ins': ['cite'],
+        'q': ['cite'],
         'img': ['src', 'width', 'height'],
         'iframe': ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
         'input': ['type', 'id', 'checked']

browser/main/NoteList/index.js

@@ -21,6 +21,7 @@ import i18n from 'browser/lib/i18n'
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
 const WP_POST_PATH = '/wp/v2/posts'
+const markdown = new Markdown()
 
 function sortByCreatedAt (a, b) {
   return new Date(b.createdAt) - new Date(a.createdAt)
@@ -670,7 +671,7 @@ class NoteList extends React.Component {
   }
 
   copyNoteLink (note) {
-    const noteLink = `[${note.title}](${note.storage}-${note.key})`
+    const noteLink = `[${note.title}](${note.key})`
     return copy(noteLink)
   }
 
@@ -709,7 +710,7 @@ class NoteList extends React.Component {
       authToken = `Bearer ${token}`
     }
     const contentToRender = firstNote.content.replace(`# ${firstNote.title}`, '')
-    var data = {
+    const data = {
       title: firstNote.title,
       content: markdown.render(contentToRender),
       status: 'publish'