@the-grid/ed - npm Package Compare versions

Comparing version 0.13.1 to 0.13.2

CHANGES.md

 ## dev
 
+## 0.13.2 - 2016-06-02
+
+* Render image with hover `title`
+* Attribution `via` can be added and edited (#114)
+* Open urls in new tab (#130)
+* Placeholder cancel button style tweak (#218)
+* Media / attribution style tweak, put image back in box (#226)
+* Remove attribution (#225)
+
 ## 0.13.1 - 2016-05-31
@@ -4,0 +13,0 @@

demo/fixture.js

@@ -623,2 +623,14 @@ /*eslint quotes: [0], comma-style: [0]*/
     {
+      'type': 'text',
+      'html': '<p>Placeholder with preview:</p>',
+      'metadata': {'starred': true}
+    },
+    {
+      'id': '0000-placeholder-preview',
+      'type': 'placeholder',
+      'html': '',
+      'metadata': {starred: true, status: 'Uploading...', progress: 85},
+      'cover': {src: 'https://pbs.twimg.com/profile_images/674936695830282240/np255F6b_400x400.jpg'}
+    },
+    {
       'id': 'abc-00000000-h1',
@@ -625,0 +637,0 @@ 'type': 'h1',

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "the grid api with prosemirror",
@@ -8,0 +8,0 @@ "main": "dist/ed.js",

src/components/attribution-editor.js

@@ -38,5 +38,11 @@ // Copy style to head
 
-    return el(
-      'div'
-      , { className: 'AttributionEditor' }
+    return el('div'
+      , { className: 'AttributionEditor'
+        , style:
+          { padding: '1rem 1rem 0'
+          , background: '#fff'
+          , border: '1px solid #ddd'
+          , borderRadius: 2
+          }
+        }
       , this.renderCover()
@@ -48,11 +54,3 @@ , this.renderUnsalvageable()
           , style:
-            { width: '90%'
-            , margin: '0 auto 36px'
-            , padding: '1.5em 3em 0'
-            , background: '#fff'
-            , border: '1px solid #ddd'
-            , opacity: '.96'
-            , transition: '.1s all ease-out'
-            , position: 'relative'
-            , borderRadius: 2
+            { position: 'relative'
             }
@@ -64,3 +62,3 @@ }
             , style:
-              { margin: '2em -3em 0'
+              { margin: '1em -1em 0'
               , position: 'relative'
@@ -88,7 +86,7 @@ , top: 1
     if (!block) return
-    const {id, cover} = block
+    const {id, cover, metadata} = block
     const {store} = this.context
     const preview = store.getCoverPreview(id)
     if (!cover && !preview) return
-    let src, width, height
+    let src, width, height, title
     if (cover) {
@@ -99,2 +97,5 @@ src = cover.src
     }
+    if (metadata) {
+      title = metadata.title
+    }
     if (preview) {
@@ -104,3 +105,3 @@ src = preview
     if (!src) return
-    let props = {src, width, height}
+    let props = {src, width, height, title}
     return el('div'
@@ -111,2 +112,3 @@ , { className: 'AttributionEditor-cover'
         , position: 'relative'
+        , marginBottom: '1rem'
         }
@@ -174,3 +176,3 @@ }
       case 'isBasedOnUrl':
-        path = [key]
+        path = ['isBasedOnUrl']
         value = ''
@@ -180,3 +182,3 @@ block = store.routeChange('MEDIA_BLOCK_UPDATE_META', {id, path, value})
       case 'author':
-        path = [key]
+        path = ['author']
         // TODO smarter when we support multiple
@@ -186,4 +188,9 @@ value = [{}]
         break
+      case 'via':
+        path = ['via']
+        value = {}
+        block = store.routeChange('MEDIA_BLOCK_UPDATE_META', {id, path, value})
+        break
       case 'publisher':
-        path = [key]
+        path = ['publisher']
         value = {}
@@ -255,2 +262,3 @@ block = store.routeChange('MEDIA_BLOCK_UPDATE_META', {id, path, value})
   }
+  // TODO support >1 author
   if (schema.author && metadata.author && metadata.author[0]) {
@@ -261,2 +269,7 @@ menus.push(
   }
+  if (schema.via && metadata.via) {
+    menus.push(
+      renderCreditEditor(false, 'via', 'Via', metadata.via, onChange, ['via'])
+    )
+  }
   if (schema.publisher && metadata.publisher) {
@@ -308,4 +321,5 @@ menus.push(
     , name: 'Image'
+    , label: 'Image'
     }
   )
 }

src/components/credit-add.js

@@ -25,2 +25,5 @@ import {createElement as el} from 'react'
   }
+  if (schema.via && !metadata.via) {
+    links.push(makeLink('via', 'Add Via', onClick))
+  }
   if (schema.publisher && !metadata.publisher) {
@@ -27,0 +30,0 @@ links.push(makeLink('publisher', 'Add Publisher', onClick))

src/components/credit-editor.js

@@ -8,2 +8,3 @@ import React, {createElement as el} from 'react'
 import Avatar from 'rebass/dist/Avatar'
+import ButtonOutline from 'rebass/dist/ButtonOutline'
 
@@ -20,3 +21,3 @@ function isUrlOrBlank (string) {
   , { style:
-      { padding: '1rem 1rem 0 1rem'
+      { padding: '1rem'
       , minWidth: 360
@@ -26,3 +27,3 @@ }
   , renderAvatar(avatar, context.imgfloConfig)
-  , renderLabel(label)
+  , (onlyUrl ? '' : renderLabel(label))
   , (onlyUrl
@@ -32,2 +33,3 @@ ? renderBasedOnUrl(url, onChange, path)
     )
+  , renderRemove(onChange, path)
   )
@@ -56,2 +58,13 @@ }
 
+function renderRemove (onChange, path) {
+  return el(ButtonOutline
+  , { onClick: makeRemove(onChange, path)
+    , style: {float: 'right'}
+    , theme: 'warning'
+    , title: 'delete attribution from block'
+    }
+  , 'Remove'
+  )
+}
+
 function renderLabel (label) {
@@ -73,3 +86,3 @@ return el('div'
 function renderBasedOnUrl (value, onChange, path) {
-  return renderTextField('url', '', value, onChange, path, true, isUrlOrBlank, 'https...')
+  return renderTextField('url', 'Link', value, onChange, path, true, isUrlOrBlank, 'https...')
 }
@@ -87,3 +100,3 @@
     , style: {width: '100%'}
-    , onChange: makeChange(path, onChange)
+    , onChange: makeChange(onChange, path)
     , validator
@@ -95,3 +108,3 @@ , placeholder
 
-function makeChange (path, onChange) {
+function makeChange (onChange, path) {
   return function (event) {
@@ -102,1 +115,7 @@ const {value} = event.target
 }
+
+function makeRemove (onChange, path) {
+  return function () {
+    onChange(path, undefined)
+  }
+}

src/components/dropdown-group.js

@@ -20,3 +20,3 @@ import React, {createElement as el} from 'react'
     // Find and open new menu
-    if (nextProps.menus.length !== this.props.menus.length) {
+    if (nextProps.menus.length > this.props.menus.length) {
       for (let i = 0, len = nextProps.menus.length; i < len; i++) {
@@ -31,2 +31,6 @@ const menu = this.props.menus[i]
     }
+    // Close if removed
+    if (nextProps.menus.length < this.props.menus.length) {
+      this.setState({openMenu: null})
+    }
   }
@@ -33,0 +37,0 @@ componentDidUpdate (_, prevState) {

src/components/image.js

@@ -13,3 +13,3 @@ /*
 export default function Image (props, context) {
-  let {src} = props
+  let {src, title} = props
   const {width, height} = props
@@ -24,3 +24,3 @@ if (context && context.imgfloConfig) {
   return el('div', {className: 'Image'}
-    , el('img', {src: src})
+    , el('img', {src, title})
   )
@@ -27,0 +27,0 @@ }

src/components/textarea-autosize.js

@@ -70,2 +70,3 @@ require('./textarea-autosize.css')
       , label
+      , this.renderLink()
       , el('textarea'
@@ -85,2 +86,22 @@ , { ref: 'textarea'
   }
+  renderLink () {
+    const {label} = this.props
+    if (label !== 'Link') return
+    const {value, valid} = this.state
+    if (!value) return
+    if (!valid) {
+      return el('span', {}, ' - must be a valid url starting with "http"')
+    }
+    return el('a'
+    , { href: value
+      , target: '_blank'
+      , rel: 'noreferrer noopener'
+      , style:
+        { marginLeft: '0.5rem'
+        , textDecoration: 'none'
+        }
+      }
+    , 'open'
+    )
+  }
   onKeyDown (event) {
@@ -87,0 +108,0 @@ if (this.props.onKeyDown) {

src/ed.js

@@ -168,2 +168,5 @@ import {createElement as el} from 'react'
     }
+    if (!path || !path.length) {
+      throw new Error('Invalid metadata update path')
+    }
     // MUTATION
@@ -178,4 +181,14 @@ let parent = block.metadata
     }
-    parent[path[path.length - 1]] = value
+    const key = path[path.length - 1]
+    parent[key] = value
 
+    if (value === undefined) {
+      if (key === 0) {
+        // HACK only for author array
+        parent.shift()
+      } else {
+        delete parent[key]
+      }
+    }
+
     return block
@@ -182,0 +195,0 @@ }

src/schema/block-meta.js

@@ -14,2 +14,3 @@ // Used to define what fields are available in metadata editor
     , publisher: true
+    , via: true
     , makeHtml: makeImage
@@ -26,2 +27,3 @@ }
     , publisher: true
+    , via: true
     }
@@ -37,2 +39,3 @@ , article:
     , publisher: true
+    , via: true
     , makeHtml: makeArticle
@@ -49,2 +52,3 @@ }
     , publisher: true
+    , via: true
     }
@@ -60,2 +64,3 @@ , default:
     , publisher: true
+    , via: true
     }
@@ -62,0 +67,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

6766645

increased by0.13%

Lines of code

8707

increased by0.94%

No dependency changes