From 5ece566371ebfcebfbe298b43e1c22f0677bd94d Mon Sep 17 00:00:00 2001
From: morgan <morgan.smith@ephox.com>
Date: Fri, 1 Dec 2017 15:25:05 +1000
Subject: [PATCH] Initial drop event, and trasnform for images in HTML mode

---
 blocks/library/image/index.js              | 19 ++++++++++++++
 editor/components/block-drop-zone/index.js | 29 ++++++++++++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
index 4c94d5f26de71b..4d49b59e67441e 100644
--- a/blocks/library/image/index.js
+++ b/blocks/library/image/index.js
@@ -71,6 +71,25 @@ registerBlockType( 'core/image', {
 					return tag === 'img' || ( hasImage && ! hasText ) || ( hasImage && tag === 'figure' );
 				},
 			},
+			{
+				type: 'html',
+				isMatch( html ) {
+					const wrapper = document.createElement( 'div' );
+					wrapper.innerHTML = html;
+					return wrapper.childNodes.length === 1 && wrapper.childNodes[ 0 ].nodeName.toLowerCase() === 'img';
+				},
+				transform( html ) {
+					const wrapper = document.createElement( 'div' );
+					wrapper.innerHTML = html;
+					const img = wrapper.querySelector( 'img' );
+					return Promise.resolve(
+						createBlock( 'core/image', {
+							id: img.id,
+							url: img.src,
+						} )
+					);
+				},
+			},
 			{
 				type: 'files',
 				isMatch( files ) {
diff --git a/editor/components/block-drop-zone/index.js b/editor/components/block-drop-zone/index.js
index ef8da49f0e459d..7ba94544797d89 100644
--- a/editor/components/block-drop-zone/index.js
+++ b/editor/components/block-drop-zone/index.js
@@ -38,9 +38,38 @@ function BlockDropZone( { index, ...props } ) {
 		}
 	};
 
+	const drop = ( event, position ) => {
+		const numFiles = event.dataTransfer ? event.dataTransfer.files.length : 0;
+
+		if ( numFiles === 0 ) {
+			const html = event.dataTransfer.getData( 'text/html' );
+			const transformation = reduce( getBlockTypes(), ( ret, blockType ) => {
+				if ( ret ) {
+					return ret;
+				}
+
+				return find( get( blockType, 'transforms.from', [] ), ( transform ) => {
+					return transform.type === 'html' && transform.isMatch( html );
+				} );
+			}, false );
+
+			if ( transformation ) {
+				let insertPosition;
+				if ( index !== undefined ) {
+					insertPosition = position.y === 'top' ? index : index + 1;
+				}
+
+				transformation.transform( html ).then( ( blocks ) => {
+					props.insertBlocks( blocks, insertPosition );
+				} );
+			}
+		}
+	}
+
 	return (
 		<DropZone
 			onFilesDrop={ dropFiles }
+			onDrop={ drop }
 		/>
 	);
 }