Merge pull request #57 from ckeditor/t/56

Fix: Placeholder is now correctly displayed on Firefox and Edge. Closes #56.

src/imageuploadprogress.js

@@ -39,7 +39,7 @@ export default class ImageUploadProgress extends Plugin {
 		 * @protected
 		 * @member {String} #placeholder
 		 */
-		this.placeholder = 'data:image/svg+xml;utf8,' + uploadingPlaceholder;
+		this.placeholder = 'data:image/svg+xml;utf8,' + encodeURIComponent( uploadingPlaceholder );
 	}
 
 	init() {

tests/imageuploadprogress.js

@@ -16,9 +16,10 @@ import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-util
 import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
 import { eventNameToConsumableType } from '@ckeditor/ckeditor5-engine/src/conversion/model-to-view-converters';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
-import imagePlaceholder from '../theme/icons/image_placeholder.svg';
+import svgPlaceholder from '../theme/icons/image_placeholder.svg';
 
 describe( 'ImageUploadProgress', () => {
+	const imagePlaceholder = encodeURIComponent( svgPlaceholder );
 	// eslint-disable-next-line max-len
 	const base64Sample = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
 	let editor, document, fileRepository, viewDocument, nativeReaderMock, loader, adapterMock;

tests/manual/imageplaceholder.html

@@ -0,0 +1,2 @@
+<div id="container">
+</div>

tests/manual/imageplaceholder.js

@@ -0,0 +1,21 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document */
+
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
+import ImageEngine from '@ckeditor/ckeditor5-image/src/image/imageengine';
+import ImageUploadEngine from '../../src/imageuploadengine';
+import ImageUploadProgress from '../../src/imageuploadprogress';
+
+ClassicTestEditor.create( { plugins: [ ImageEngine, ImageUploadEngine, ImageUploadProgress ] } )
+	.then( editor => {
+		const imageUploadProgress = editor.plugins.get( ImageUploadProgress );
+		const img = document.createElement( 'img' );
+
+		img.src = imageUploadProgress.placeholder;
+		document.getElementById( 'container' ).appendChild( img );
+	} );
+

tests/manual/imageplaceholder.md

@@ -0,0 +1,3 @@
+## Image placeholder
+
+Check if image placeholder is visible.