Fix pasting image copied from browser

build/squire-raw.js

@@ -2348,50 +2348,34 @@ var onPaste = function ( event ) {
     var fireDrop = false;
     var hasImage = false;
     var plainItem = null;
+    var htmlItem = null;
     var self = this;
     var l, item, type, types, data;
 
     // Current HTML5 Clipboard interface
     // ---------------------------------
     // https://html.spec.whatwg.org/multipage/interaction.html
-
-    // Edge only provides access to plain text as of 2016-03-11 and gives no
-    // indication there should be an HTML part. However, it does support access
-    // to image data, so check if this is present and use if so.
-    if ( isEdge && items ) {
-        l = items.length;
-        while ( l-- ) {
-            if ( !choosePlain && /^image\/.*/.test( items[l].type ) ) {
-                hasImage = true;
-            }
-        }
-        if ( !hasImage ) {
-            items = null;
-        }
-    }
     if ( items ) {
-        event.preventDefault();
         l = items.length;
         while ( l-- ) {
             item = items[l];
             type = item.type;
-            if ( !choosePlain && type === 'text/html' ) {
+            if ( type === 'text/html' ) {
-                /*jshint loopfunc: true */
+                htmlItem = item;
-                item.getAsString( function ( html ) {
+            } else if ( type === 'text/plain' ) {
-                    self.insertHTML( html, true );
-                });
-                /*jshint loopfunc: false */
-                return;
-            }
-            if ( type === 'text/plain' ) {
                 plainItem = item;
-            }
+            } else if ( /^image\/.*/.test( type ) ) {
-            if ( !choosePlain && /^image\/.*/.test( type ) ) {
                 hasImage = true;
             }
         }
-        // Treat image paste as a drop of an image file.
+
+        // Treat image paste as a drop of an image file. When you copy
+        // an image in Chrome/Firefox (at least), it copies the image data
+        // but also an HTML version (referencing the original URL of the image)
+        // and a plain text version. So we check for image data first, only if
+        // none look for text/html.
         if ( hasImage ) {
+            event.preventDefault();
             this.fireEvent( 'dragover', {
                 dataTransfer: clipboardData,
                 /*jshint loopfunc: true */
@@ -2405,6 +2389,19 @@ var onPaste = function ( event ) {
                     dataTransfer: clipboardData
                 });
             }
+            return;
+        }
+
+        // Edge only provides access to plain text as of 2016-03-11 and gives no
+        // indication there should be an HTML part. However, it does support
+        // access to image data, so we check for that first. Otherwise though,
+        // fall through to fallback clipboard handling methods
+        if ( !isEdge ) {
+            event.preventDefault();
+            if ( htmlItem && ( !choosePlain || !plainItem ) ) {
+                htmlItem.getAsString( function ( html ) {
+                    self.insertHTML( html, true );
+                });
             } else if ( plainItem ) {
                 plainItem.getAsString( function ( text ) {
                     self.insertPlainText( text, true );
@@ -2412,6 +2409,7 @@ var onPaste = function ( event ) {
             }
             return;
         }
+    }
 
     // Old interface
     // -------------

source/Clipboard.js

@@ -147,50 +147,34 @@ var onPaste = function ( event ) {
     var fireDrop = false;
     var hasImage = false;
     var plainItem = null;
+    var htmlItem = null;
     var self = this;
     var l, item, type, types, data;
 
     // Current HTML5 Clipboard interface
     // ---------------------------------
     // https://html.spec.whatwg.org/multipage/interaction.html
-
-    // Edge only provides access to plain text as of 2016-03-11 and gives no
-    // indication there should be an HTML part. However, it does support access
-    // to image data, so check if this is present and use if so.
-    if ( isEdge && items ) {
-        l = items.length;
-        while ( l-- ) {
-            if ( !choosePlain && /^image\/.*/.test( items[l].type ) ) {
-                hasImage = true;
-            }
-        }
-        if ( !hasImage ) {
-            items = null;
-        }
-    }
     if ( items ) {
-        event.preventDefault();
         l = items.length;
         while ( l-- ) {
             item = items[l];
             type = item.type;
-            if ( !choosePlain && type === 'text/html' ) {
+            if ( type === 'text/html' ) {
-                /*jshint loopfunc: true */
+                htmlItem = item;
-                item.getAsString( function ( html ) {
+            } else if ( type === 'text/plain' ) {
-                    self.insertHTML( html, true );
-                });
-                /*jshint loopfunc: false */
-                return;
-            }
-            if ( type === 'text/plain' ) {
                 plainItem = item;
-            }
+            } else if ( /^image\/.*/.test( type ) ) {
-            if ( !choosePlain && /^image\/.*/.test( type ) ) {
                 hasImage = true;
             }
         }
-        // Treat image paste as a drop of an image file.
+
+        // Treat image paste as a drop of an image file. When you copy
+        // an image in Chrome/Firefox (at least), it copies the image data
+        // but also an HTML version (referencing the original URL of the image)
+        // and a plain text version. So we check for image data first, only if
+        // none look for text/html.
         if ( hasImage ) {
+            event.preventDefault();
             this.fireEvent( 'dragover', {
                 dataTransfer: clipboardData,
                 /*jshint loopfunc: true */
@@ -204,6 +188,19 @@ var onPaste = function ( event ) {
                     dataTransfer: clipboardData
                 });
             }
+            return;
+        }
+
+        // Edge only provides access to plain text as of 2016-03-11 and gives no
+        // indication there should be an HTML part. However, it does support
+        // access to image data, so we check for that first. Otherwise though,
+        // fall through to fallback clipboard handling methods
+        if ( !isEdge ) {
+            event.preventDefault();
+            if ( htmlItem && ( !choosePlain || !plainItem ) ) {
+                htmlItem.getAsString( function ( html ) {
+                    self.insertHTML( html, true );
+                });
             } else if ( plainItem ) {
                 plainItem.getAsString( function ( text ) {
                     self.insertPlainText( text, true );
@@ -211,6 +208,7 @@ var onPaste = function ( event ) {
             }
             return;
         }
+    }
 
     // Old interface
     // -------------