@the-grid/ed - npm Package Compare versions

Comparing version 0.13.0 to 0.13.1

CHANGES.md

 ## dev
 
+## 0.13.1 - 2016-05-31
+
+* "Image" menu on blocks
+  * "Upload New Image" button moved here
+  * `metadata.coverPrefs` checkboxen (#199)
+  * Image hover title editing
+* Image caption editing (#213)
+* Message and upload button for `cover.unsalvageable` (#195)
+
 ## 0.13.0 - 2016-05-30
@@ -4,0 +13,0 @@

demo/fixture.js

@@ -601,3 +601,3 @@ /*eslint quotes: [0], comma-style: [0]*/
       'type': 'text',
-      'html': '<p>Here\'s an article block with failed upload:</p>',
+      'html': '<p>Here\'s an article block with <b>failed</b> upload:</p>',
       'metadata': {'starred': true}
@@ -612,2 +612,14 @@ },
     {
+      'type': 'text',
+      'html': '<p>Here\'s an image block with <b>unsalvageable</b> cover:</p>',
+      'metadata': {'starred': true}
+    },
+    {
+      'id': '0000-image-unsalvageable',
+      'type': 'image',
+      'html': '',
+      'metadata': {starred: true, caption: 'Sometimes images go away :-('},
+      'cover': {unsalvageable: true}
+    },
+    {
       'id': 'abc-00000000-h1',
@@ -614,0 +626,0 @@ 'type': 'h1',

package.json

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

src/components/attribution-editor.js

@@ -5,8 +5,15 @@ // Copy style to head
 import React, {createElement as el} from 'react'
+
+import Progress from 'rebass/dist/Progress'
+import Message from 'rebass/dist/Message'
+import Button from 'rebass/dist/Button'
+import Space from 'rebass/dist/Space'
+
 import Image from './image'
 import DropdownGroup from './dropdown-group'
 import CreditEditor from './credit-editor'
+import ImageEditor from './image-editor'
 import CreditAdd from './credit-add'
 import TextareaAutosize from './textarea-autosize'
-import Progress from 'rebass/dist/Progress'
+
 import blockMetaSchema from '../schema/block-meta'
@@ -30,3 +37,3 @@
 
-    const menus = renderMenus(schema, metadata, this.onChange.bind(this), this.onMoreClick.bind(this))
+    const menus = renderMenus(type, schema, metadata, this.onChange.bind(this), this.onMoreClick.bind(this), this.onUploadRequest.bind(this))
 
@@ -37,2 +44,3 @@ return el(
       , this.renderCover()
+      , this.renderUnsalvageable()
       , this.renderProgress()
@@ -70,2 +78,9 @@ , el('div'
   }
+  canChangeCover () {
+    const {block} = this.state
+    if (!block) return false
+    const {type} = block
+    const schema = blockMetaSchema[type] || blockMetaSchema.default
+    return schema.changeCover
+  }
   renderCover () {
@@ -99,2 +114,20 @@ const {block} = this.state
   }
+  renderUnsalvageable () {
+    const {block} = this.state
+    if (!block || !block.cover || !block.cover.unsalvageable || !this.canChangeCover()) return
+
+    return el(Message
+    , {theme: 'error'}
+    , 'We were unable to find the image originally saved with this block.'
+    , el(Space, {auto: true})
+    , el(Button
+      , { onClick: () => this.onUploadRequest()
+        , rounded: true
+        , color: 'error'
+        , backgroundColor: 'white'
+        }
+      , 'Upload New Image'
+      )
+    )
+  }
   renderProgress () {
@@ -114,2 +147,7 @@ const {block} = this.state
   }
+  onUploadRequest () {
+    const {store} = this.context
+    const {id} = this.props
+    store.routeChange('MEDIA_BLOCK_REQUEST_COVER_UPLOAD', id)
+  }
   onChange (path, value) {
@@ -150,5 +188,2 @@ const {store} = this.context
         break
-      case 'changeCover':
-        store.routeChange('MEDIA_BLOCK_REQUEST_COVER_UPLOAD', id)
-        break
       default:
@@ -192,2 +227,5 @@ return
   }
+  if (schema.caption) {
+    fields.push(renderTextField('caption', 'CAPTION', metadata.caption, onChange))
+  }
   return fields
@@ -208,3 +246,3 @@ }
 
-function renderMenus (schema, metadata = {}, onChange, onMoreClick) {
+function renderMenus (type, schema, metadata = {}, onChange, onMoreClick, onUploadRequest) {
   let menus = []
@@ -218,3 +256,3 @@ if (schema.isBasedOnUrl && metadata.isBasedOnUrl != null) {
     menus.push(
-      renderCreditEditor(false, 'author.0', 'Author', metadata.author[0], onChange, ['author', 0])
+      renderCreditEditor(false, 'author.0', 'Credit', metadata.author[0], onChange, ['author', 0])
     )
@@ -227,2 +265,5 @@ }
   }
+  if (schema.changeCover) {
+    menus.push(renderImageEditor(type, metadata.title, metadata.coverPrefs, onChange, onUploadRequest))
+  }
   menus.push(
@@ -254,1 +295,16 @@ el(CreditAdd
 }
+
+function renderImageEditor (type, title, coverPrefs = {}, onChange, onUploadRequest) {
+  const {filter, crop, overlay} = coverPrefs
+  return el(ImageEditor
+  , { title
+    , filter
+    , crop
+    , overlay
+    , onChange
+    , onUploadRequest
+    , type
+    , name: 'Image'
+    }
+  )
+}

src/components/credit-add.js

@@ -23,3 +23,3 @@ import {createElement as el} from 'react'
   if (schema.author && (!metadata.author || !metadata.author[0])) {
-    links.push(makeLink('author', 'Add Author', onClick))
+    links.push(makeLink('author', 'Add Credit', onClick))
   }
@@ -29,5 +29,2 @@ if (schema.publisher && !metadata.publisher) {
   }
-  if (schema.changeCover) {
-    links.push(makeLink('changeCover', 'Upload New Image', onClick))
-  }
   links.push(makeLink('delete', 'Remove Block', onClick, true))
@@ -34,0 +31,0 @@ return links

src/ed.js

@@ -171,3 +171,7 @@ import {createElement as el} from 'react'
     for (let i = 0, length = path.length; i < length - 1; i++) {
-      parent = parent[path[i]]
+      const key = path[i]
+      if (!parent[key]) {
+        parent[key] = {}
+      }
+      parent = parent[key]
     }
@@ -174,0 +178,0 @@ parent[path[path.length - 1]] = value

src/schema/block-meta.js

@@ -6,4 +6,5 @@ // Used to define what fields are available in metadata editor
   { image:
-    { title: true
-    , description: true
+    { title: false
+    , description: false
+    , caption: true
     , isBasedOnUrl: true
@@ -19,2 +20,3 @@ , cover: true
     , description: true
+    , caption: false
     , isBasedOnUrl: true
@@ -29,2 +31,3 @@ , cover: true
     , description: true
+    , caption: false
     , isBasedOnUrl: true
@@ -40,2 +43,3 @@ , cover: true
     , description: false
+    , caption: false
     , isBasedOnUrl: true
@@ -50,2 +54,3 @@ , cover: false
     , description: true
+    , caption: false
     , isBasedOnUrl: true
@@ -67,4 +72,4 @@ , cover: true
   }
-  if (metadata && metadata.description) {
-    htmlString += ` alt="${encode(metadata.description)}"`
+  if (metadata && metadata.caption) {
+    htmlString += ` alt="${encode(metadata.caption)}"`
   }
@@ -71,0 +76,0 @@ htmlString += '>'

src/schema/ed-schema-full.js

@@ -21,3 +21,3 @@ // See also, PM's default schema:
   { nodes:
-    { doc: {type: Doc, content: '(paragraph | topblock | ordered_list | bullet_list)+'}
+    { doc: {type: Doc, content: '(block | topblock)+'}
     , paragraph: {type: Paragraph, content: 'inline<_>*', group: 'block'}
@@ -24,0 +24,0 @@ , blockquote: {type: BlockQuote, content: 'block+', group: 'topblock'}

test/schema/block-meta.js

@@ -20,3 +20,3 @@ import {expect} from 'chai'
         { title: 'Title'
-        , description: 'Description yö'
+        , caption: 'Description yö'
         }
@@ -23,0 +23,0 @@ , cover:

No alert changes

Improved metrics

Total package byte prevSize

6758043

increased by0.65%

Number of package files

85

increased by1.19%

Lines of code

8626

increased by1.88%

No dependency changes