Skip to content

Commit

Permalink
Add HTML handler to dropzone (#4577)
Browse files Browse the repository at this point in the history
* Add HTML handler to dropzone

* Add HTML handler to image placeholder

* Merge ifs
  • Loading branch information
ellatrix authored Jan 19, 2018
1 parent 993561d commit df24fd0
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 13 deletions.
16 changes: 14 additions & 2 deletions blocks/image-placeholder/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* External dependencies
*/
import { map } from 'lodash';

/**
* WordPress dependencies
*/
Expand All @@ -9,6 +14,7 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import MediaUpload from '../media-upload';
import { rawHandler } from '../api';

/**
* ImagePlaceHolder is a react component used by blocks containing user configurable images e.g: image and cover image.
Expand All @@ -19,7 +25,12 @@ import MediaUpload from '../media-upload';
*/
export default function ImagePlaceHolder( { className, icon, label, onSelectImage } ) {
const setImage = ( [ image ] ) => onSelectImage( image );
const dropFiles = ( files ) => mediaUpload( files, setImage );
const onFilesDrop = ( files ) => mediaUpload( files, setImage );
const onHTMLDrop = ( HTML ) => setImage( map(
rawHandler( { HTML, mode: 'BLOCKS' } )
.filter( ( { name } ) => name === 'core/image' ),
'attributes'
) );
const uploadFromFiles = ( event ) => mediaUpload( event.target.files, setImage );
return (
<Placeholder
Expand All @@ -28,7 +39,8 @@ export default function ImagePlaceHolder( { className, icon, label, onSelectImag
icon={ icon }
label={ label } >
<DropZone
onFilesDrop={ dropFiles }
onFilesDrop={ onFilesDrop }
onHTMLDrop={ onHTMLDrop }
/>
<FormFileUpload
isLarge
Expand Down
8 changes: 8 additions & 0 deletions components/drop-zone/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ class DropZone extends Component {
this.setZoneNode = this.setZoneNode.bind( this );
this.onDrop = this.onDrop.bind( this );
this.onFilesDrop = this.onFilesDrop.bind( this );
this.onHTMLDrop = this.onHTMLDrop.bind( this );

this.state = {
isDraggingOverDocument: false,
Expand All @@ -37,6 +38,7 @@ class DropZone extends Component {
updateState: this.setState.bind( this ),
onDrop: this.onDrop,
onFilesDrop: this.onFilesDrop,
onHTMLDrop: this.onHTMLDrop,
} );
}

Expand All @@ -56,6 +58,12 @@ class DropZone extends Component {
}
}

onHTMLDrop() {
if ( this.props.onHTMLDrop ) {
this.props.onHTMLDrop( ...arguments );
}
}

setZoneNode( node ) {
this.zone = node;
}
Expand Down
15 changes: 11 additions & 4 deletions components/drop-zone/provider.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ class DropZoneProvider extends Component {
getChildContext() {
return {
dropzones: {
add: ( { element, updateState, onDrop, onFilesDrop } ) => {
this.dropzones.push( { element, updateState, onDrop, onFilesDrop } );
add: ( { element, updateState, onDrop, onFilesDrop, onHTMLDrop } ) => {
this.dropzones.push( { element, updateState, onDrop, onFilesDrop, onHTMLDrop } );
},
remove: ( element ) => {
this.dropzones = filter( this.dropzones, ( dropzone ) => dropzone.element !== element );
Expand Down Expand Up @@ -174,8 +174,15 @@ class DropZoneProvider extends Component {
return;
}

if ( event.dataTransfer && !! dropzone && !! dropzone.onFilesDrop ) {
dropzone.onFilesDrop( Array.prototype.slice.call( event.dataTransfer.files ), position );
if ( event.dataTransfer && !! dropzone ) {
const files = event.dataTransfer.files;
const HTML = event.dataTransfer.getData( 'text/html' );

if ( files.length && dropzone.onFilesDrop ) {
dropzone.onFilesDrop( [ ...event.dataTransfer.files ], position );
} else if ( HTML && dropzone.onHTMLDrop ) {
dropzone.onHTMLDrop( HTML, position );
}
}

event.stopPropagation();
Expand Down
27 changes: 20 additions & 7 deletions editor/components/block-drop-zone/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { reduce, get, find } from 'lodash';
* WordPress dependencies
*/
import { DropZone, withContext } from '@wordpress/components';
import { getBlockTypes } from '@wordpress/blocks';
import { getBlockTypes, rawHandler } from '@wordpress/blocks';
import { compose } from '@wordpress/element';

/**
Expand All @@ -21,7 +21,13 @@ function BlockDropZone( { index, isLocked, ...props } ) {
return null;
}

const dropFiles = ( files, position ) => {
const getInsertPosition = ( position ) => {
if ( index !== undefined ) {
return position.y === 'top' ? index : index + 1;
}
};

const onDropFiles = ( files, position ) => {
const transformation = reduce( getBlockTypes(), ( ret, blockType ) => {
if ( ret ) {
return ret;
Expand All @@ -33,19 +39,26 @@ function BlockDropZone( { index, isLocked, ...props } ) {
}, false );

if ( transformation ) {
let insertPosition;
if ( index !== undefined ) {
insertPosition = position.y === 'top' ? index : index + 1;
}
const insertPosition = getInsertPosition( position );

transformation.transform( files ).then( ( blocks ) => {
props.insertBlocks( blocks, insertPosition );
} );
}
};

const onHTMLDrop = ( HTML, position ) => {
const blocks = rawHandler( { HTML, mode: 'BLOCKS' } );

if ( blocks.length ) {
props.insertBlocks( blocks, getInsertPosition( position ) );
}
};

return (
<DropZone
onFilesDrop={ dropFiles }
onFilesDrop={ onDropFiles }
onHTMLDrop={ onHTMLDrop }
/>
);
}
Expand Down

0 comments on commit df24fd0

Please sign in to comment.