Merge branch 't/16705'

CHANGES.md

@@ -14,6 +14,7 @@ Fixed Issues:
 * [#10373](http://dev.ckeditor.com/ticket/10373): Fixed: Context menu items can be dragged into the editor.
 * [#16728](http://dev.ckeditor.com/ticket/16728): [IE] Fixed: [Copy Formatting](http://ckeditor.com/addon/copyformatting) breaks editor in Quirks Mode.
 * [#16753](http://dev.ckeditor.com/ticket/16753): Fixed: `element.setSize` sets wrong editor's dimensions if border's width is in fraction of pixels.
+* [#16705](http://dev.ckeditor.com/ticket/16705): [Firefox] Fixed: Unable to paste images as Base64 strings when using [Clipboard](http://ckeditor.com/addon/clipboard).
 
 ## CKEditor 4.6.1
 

plugins/clipboard/plugin.js

@@ -145,6 +145,50 @@
 
 			CKEDITOR.dialog.add( 'paste', CKEDITOR.getUrl( this.path + 'dialogs/paste.js' ) );
 
+			// Convert image file (if present) to base64 string for Firefox. Do it as the first
+			// step as the conversion is asynchronous and should hold all further paste processing.
+			if ( CKEDITOR.env.gecko ) {
+				var supportedImageTypes = [ 'image/png', 'image/jpeg', 'image/gif' ],
+					latestId;
+
+				editor.on( 'paste', function( evt ) {
+					var dataObj = evt.data,
+						data = dataObj.dataValue,
+						dataTransfer = dataObj.dataTransfer;
+
+					// If data empty check for image content inside data transfer. #16705
+					if ( !data && dataObj.method == 'paste' && dataTransfer && dataTransfer.getFilesCount() == 1 && latestId != dataTransfer.id ) {
+						var file = dataTransfer.getFile( 0 );
+
+						if ( CKEDITOR.tools.indexOf( supportedImageTypes, file.type ) != -1 ) {
+							var fileReader = new FileReader();
+
+							// Convert image file to img tag with base64 image.
+							fileReader.addEventListener( 'load', function() {
+								evt.data.dataValue = '<img src="' + fileReader.result + '" />';
+								editor.fire( 'paste', evt.data );
+							}, false );
+
+							// Proceed with normal flow if reading file was aborted.
+							fileReader.addEventListener( 'abort', function() {
+								editor.fire( 'paste', evt.data );
+							}, false );
+
+							// Proceed with normal flow if reading file failed.
+							fileReader.addEventListener( 'error', function() {
+								editor.fire( 'paste', evt.data );
+							}, false );
+
+							fileReader.readAsDataURL( file );
+
+							latestId = dataObj.dataTransfer.id;
+
+							evt.stop();
+						}
+					}
+				}, null, null, 1 );
+			}
+
 			editor.on( 'paste', function( evt ) {
 				// Init `dataTransfer` if `paste` event was fired without it, so it will be always available.
 				if ( !evt.data.dataTransfer ) {

tests/plugins/clipboard/manual/pasteimage.html

@@ -0,0 +1,11 @@
+<div id="editor">
+	<p>Paste image from clipboard here:</p>
+</div>
+
+<script>
+	if ( !CKEDITOR.env.gecko ) {
+		bender.ignore();
+	}
+
+	CKEDITOR.replace( 'editor' );
+</script>

tests/plugins/clipboard/manual/pasteimage.md

@@ -0,0 +1,10 @@
+@bender-ui: collapsed
+@bender-tags: 4.6.2, tc, clipboard
+@bender-ckeditor-plugins: wysiwygarea, toolbar, undo, basicstyles, image, clipboard, sourcearea
+
+## Scenario:
+
+ * Paste image from your clipboard into the editor.
+
+**Expected**: Image is pasted as base64 encoded file.
+

tests/plugins/clipboard/pasteimage.js

@@ -0,0 +1,158 @@
+/* bender-tags: editor,unit */
+/* bender-ckeditor-plugins: clipboard */
+
+( function() {
+	'use strict';
+
+	// Mock FileReader.
+	( function() {
+		var fileMockBase64 = ';base64,fileMockBase64=',
+			fileMockType,
+			readResultMock;
+
+		function FileReaderMock() {
+			this.listeners = {};
+		}
+
+		// Any MIME type.
+		FileReaderMock.setFileMockType = function( type ) {
+			fileMockType = type;
+		};
+
+		// Result can be: load, abort, error.
+		FileReaderMock.setReadResult = function( readResult ) {
+			readResultMock = readResult;
+			if ( !readResultMock ) {
+				readResultMock = 'load';
+			}
+		};
+
+		FileReaderMock.prototype.addEventListener = function( eventName, callback ) {
+			this.listeners[ eventName ] = callback;
+		};
+
+		FileReaderMock.prototype.readAsDataURL = function() {
+			CKEDITOR.tools.setTimeout( function() {
+				this.result = ( readResultMock == 'load' ? 'data:' + fileMockType + fileMockBase64 : null );
+
+				if ( this.listeners[ readResultMock ] ) {
+					this.listeners[ readResultMock ]();
+				}
+			}, 15, this );
+		};
+
+		/* jshint ignore:start */
+		FileReader = FileReaderMock;
+		/* jshint ignore:end */
+	} )();
+
+	// Mock paste file from clipboard.
+	function mockPasteFile( editor, type ) {
+		var nativeData = bender.tools.mockNativeDataTransfer(),
+			dataTransfer = new CKEDITOR.plugins.clipboard.dataTransfer( nativeData );
+
+		nativeData.files.push( {
+			name: 'mock.file',
+			type: type
+		} );
+
+		dataTransfer.cacheData();
+
+		editor.fire( 'paste', {
+			dataTransfer: dataTransfer,
+			dataValue: '',
+			method: 'paste',
+			type: 'auto'
+		} );
+	}
+
+
+	bender.editor = {
+		config: {
+			allowedContent: true
+		}
+	};
+
+	bender.test( {
+		setUp: function() {
+			if ( !CKEDITOR.env.gecko ) {
+				assert.ignore();
+			}
+			FileReader.setFileMockType();
+			FileReader.setReadResult();
+			this.editor.focus();
+		},
+
+		'test paste .png from clipboard': function() {
+			FileReader.setFileMockType( 'image/png' );
+			FileReader.setReadResult( 'load' );
+
+			bender.tools.selection.setWithHtml( this.editor, '<p>Paste image here: {}</p>' );
+			this.assertPaste( 'image/png',
+				'<p>Paste image here: <img data-cke-saved-src="data:image/png;base64,fileMockBase64=" src="data:image/png;base64,fileMockBase64=" />^@</p>' );
+		},
+
+		'test paste .jpeg from clipboard': function() {
+			FileReader.setFileMockType( 'image/jpeg' );
+			FileReader.setReadResult( 'load' );
+
+			bender.tools.selection.setWithHtml( this.editor, '<p>Paste image here: {}</p>' );
+			this.assertPaste( 'image/jpeg',
+				'<p>Paste image here: <img data-cke-saved-src="data:image/jpeg;base64,fileMockBase64=" src="data:image/jpeg;base64,fileMockBase64=" />^@</p>' );
+		},
+
+		'test paste .gif from clipboard': function() {
+			FileReader.setFileMockType( 'image/gif' );
+			FileReader.setReadResult( 'load' );
+
+			bender.tools.selection.setWithHtml( this.editor, '<p>Paste image here: {}</p>' );
+			this.assertPaste( 'image/gif',
+				'<p>Paste image here: <img data-cke-saved-src="data:image/gif;base64,fileMockBase64=" src="data:image/gif;base64,fileMockBase64=" />^@</p>' );
+		},
+
+		'test unsupported file type': function() {
+			FileReader.setFileMockType( 'application/pdf' );
+			FileReader.setReadResult( 'load' );
+
+			bender.tools.selection.setWithHtml( this.editor, '<p>Paste image here: {}</p>' );
+			this.assertPaste( 'application/pdf',
+				'<p>Paste image here: ^@</p>' );
+		},
+
+		'test aborted paste': function() {
+			FileReader.setFileMockType( 'image/png' );
+			FileReader.setReadResult( 'abort' );
+
+			bender.tools.selection.setWithHtml( this.editor, '<p>Paste image here: {}</p>' );
+			this.assertPaste( 'image/png',
+				'<p>Paste image here: ^@</p>' );
+		},
+
+		'test failed paste': function() {
+			FileReader.setFileMockType( 'image/png' );
+			FileReader.setReadResult( 'error' );
+
+			bender.tools.selection.setWithHtml( this.editor, '<p>Paste image here: {}</p>' );
+			this.assertPaste( 'image/png',
+				'<p>Paste image here: ^@</p>' );
+		},
+
+		assertPaste: function( type, expected ) {
+			this.editor.once( 'paste', function() {
+				resume( function() {
+					assert.isInnerHtmlMatching( expected, bender.tools.selection.getWithHtml( this.editor ), {
+						noTempElements: true,
+						fixStyles: true,
+						compareSelection: true,
+						normalizeSelection: true
+					} );
+				} );
+			}, this, null, 9999 );
+
+			mockPasteFile( this.editor, type );
+
+			wait();
+		}
+	} );
+
+} )();