Added tests and applied fixes after review.

LICENSE.md

@@ -20,7 +20,7 @@ The following libraries are included in CKEditor under the [MIT license](https:/
 * turndown - turndown is copyright © Dom Christie and released under the MIT license.
 * turndown-plugin-gfm - turndown-plugin-gfm is copyright © Dom Christie and released under the MIT license.
 * vanilla-colorful - Copyright (c) 2020 Serhii Kulykov <[email protected]> (MIT license).
-* blurhash - ... TODO
+* blurhash - Copyright (c) 2018 Wolt Enterprises (MIT license).
 
 Trademarks
 ----------

packages/ckeditor5-ckbox/LICENSE.md

@@ -13,7 +13,7 @@ Where not otherwise indicated, all CKEditor content is authored by CKSource engi
 
 The following libraries are included in CKEditor under the [MIT license](https://opensource.org/licenses/MIT):
 
-* blurhash - ... TODO
+* blurhash - Copyright (c) 2018 Wolt Enterprises (MIT license).
 
 Trademarks
 ----------

packages/ckeditor5-ckbox/src/ckboxcommand.ts

@@ -22,7 +22,7 @@ import type {
 	CKBoxRawAssetDefinition
 } from './ckboxconfig';
 
-import { base64FromBlurHash, getImageUrls } from './utils';
+import { blurHashToDataUrl, getImageUrls } from './utils';
 
 declare global {
 	// eslint-disable-next-line no-var
@@ -379,7 +379,7 @@ function prepareAssets(
 function prepareImageAssetAttributes( asset: CKBoxRawAssetDefinition ): CKBoxAssetImageAttributesDefinition {
 	const { imageFallbackUrl, imageSources } = getImageUrls( asset.data.imageUrls! );
 	const { description, width, height, blurHash } = asset.data.metadata!;
-	const imagePlaceholder = base64FromBlurHash( blurHash );
+	const imagePlaceholder = blurHashToDataUrl( blurHash );
 
 	return {
 		imageFallbackUrl,

packages/ckeditor5-ckbox/src/utils.ts

@@ -84,9 +84,9 @@ export function getWorkspaceId( token: InitializedToken, defaultWorkspaceId?: st
 const BLUR_RESOLUTION = 32;
 
 /**
- * Generates base64-encoded image from its `blurhash` representation.
+ * Generates an image data URL from its `blurhash` representation.
  */
-export function base64FromBlurHash( hash?: string ): string | undefined {
+export function blurHashToDataUrl( hash?: string ): string | undefined {
 	if ( !hash ) {
 		return;
 	}

packages/ckeditor5-ckbox/tests/ckboxcommand.js

@@ -25,7 +25,7 @@ import TokenMock from '@ckeditor/ckeditor5-cloud-services/tests/_utils/tokenmock
 
 import CKBoxEditing from '../src/ckboxediting';
 import CKBoxCommand from '../src/ckboxcommand';
-import { base64FromBlurHash } from '../src/utils';
+import { blurHashToDataUrl } from '../src/utils';
 
 describe( 'CKBoxCommand', () => {
 	let editor, model, command, originalCKBox;
@@ -599,7 +599,7 @@ describe( 'CKBoxCommand', () => {
 
 			it( 'should insert an image inline (with blurhash placeholder)', () => {
 				const spy = sinon.spy( editor, 'execute' );
-				const placeholder = base64FromBlurHash( assets.imagesWithBlurHash[ 0 ].data.metadata.blurHash );
+				const placeholder = blurHashToDataUrl( assets.imagesWithBlurHash[ 0 ].data.metadata.blurHash );
 
 				onChoose( [ assets.imagesWithBlurHash[ 0 ] ] );
 
@@ -681,7 +681,7 @@ describe( 'CKBoxCommand', () => {
 
 			it( 'should insert an image block (with blurhash placeholder)', () => {
 				const spy = sinon.spy( editor, 'execute' );
-				const placeholder = base64FromBlurHash( assets.imagesWithBlurHash[ 0 ].data.metadata.blurHash );
+				const placeholder = blurHashToDataUrl( assets.imagesWithBlurHash[ 0 ].data.metadata.blurHash );
 
 				setModelData( model, '<paragraph>[]</paragraph>' );
 

packages/ckeditor5-ckbox/tests/utils.js

@@ -7,7 +7,7 @@
 
 import TokenMock from '@ckeditor/ckeditor5-cloud-services/tests/_utils/tokenmock';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
-import { getWorkspaceId, getImageUrls, base64FromBlurHash } from '../src/utils';
+import { getWorkspaceId, getImageUrls, blurHashToDataUrl } from '../src/utils';
 
 describe( 'utils', () => {
 	testUtils.createSinonSandbox();
@@ -171,17 +171,17 @@ describe( 'utils', () => {
 
 	describe( 'base64FromBlurHash()', () => {
 		it( 'should return undefined if no blurHash', () => {
-			expect( base64FromBlurHash( undefined ) ).to.be.undefined;
-			expect( base64FromBlurHash( null ) ).to.be.undefined;
-			expect( base64FromBlurHash( '' ) ).to.be.undefined;
+			expect( blurHashToDataUrl( undefined ) ).to.be.undefined;
+			expect( blurHashToDataUrl( null ) ).to.be.undefined;
+			expect( blurHashToDataUrl( '' ) ).to.be.undefined;
 		} );
 
 		it( 'should return undefined if invalid blurHash', () => {
-			expect( base64FromBlurHash( '123' ) ).to.be.undefined;
+			expect( blurHashToDataUrl( '123' ) ).to.be.undefined;
 		} );
 
 		it( 'should generate image data url', () => {
-			const result = base64FromBlurHash( 'KTF55N=ZR4PXSirp5ZOZW9' );
+			const result = blurHashToDataUrl( 'KTF55N=ZR4PXSirp5ZOZW9' );
 			const prefix = 'data:image/png;base64,';
 			const binary = atob( result.substring( prefix.length ) );
 

packages/ckeditor5-image/tests/image/imageplaceholder.js

@@ -8,7 +8,7 @@
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
-import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import { setData as setModelData, getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
 
 import ImagePlaceholder from '../../src/image/imageplaceholder';
@@ -92,6 +92,72 @@ describe( 'ImagePlaceholder', () => {
 			);
 		} );
 
+		it( 'should remove placeholder when the image is loaded', () => {
+			setModelData( model, '<imageBlock src="/assets/sample.png" placeholder="#blurImage"></imageBlock>' );
+
+			const modelElement = doc.getRoot().getChild( 0 );
+			const viewElement = editor.editing.mapper.toViewElement( modelElement ).getChild( 0 );
+			const domElement = editor.editing.view.domConverter.mapViewToDom( viewElement );
+
+			expect( domElement.tagName ).to.equal( 'IMG' );
+
+			expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
+				'<figure class="ck-widget ck-widget_selected image" contenteditable="false">' +
+					'<img class="image_placeholder" src="/assets/sample.png" style="background-image:url(#blurImage)"></img>' +
+					'<div class="ck ck-reset_all ck-widget__type-around"></div>' +
+				'</figure>'
+			);
+
+			expect( editor.getData() ).to.equal(
+				'<figure class="image"><img src="/assets/sample.png"></figure>'
+			);
+
+			view.document.fire( 'imageLoaded', {
+				target: domElement
+			} );
+
+			expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
+				'<imageBlock src="/assets/sample.png"></imageBlock>'
+			);
+
+			expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
+				'<figure class="ck-widget ck-widget_selected image" contenteditable="false">' +
+					'<img src="/assets/sample.png"></img>' +
+					'<div class="ck ck-reset_all ck-widget__type-around"></div>' +
+				'</figure>'
+			);
+		} );
+
+		it( 'should not remove placeholder when some other image is loaded', () => {
+			setModelData( model, '<imageBlock src="/assets/sample.png" placeholder="#blurImage"></imageBlock>' );
+
+			expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
+				'<figure class="ck-widget ck-widget_selected image" contenteditable="false">' +
+					'<img class="image_placeholder" src="/assets/sample.png" style="background-image:url(#blurImage)"></img>' +
+					'<div class="ck ck-reset_all ck-widget__type-around"></div>' +
+				'</figure>'
+			);
+
+			expect( editor.getData() ).to.equal(
+				'<figure class="image"><img src="/assets/sample.png"></figure>'
+			);
+
+			view.document.fire( 'imageLoaded', {
+				target: document.createElement( 'img' )
+			} );
+
+			expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
+				'<imageBlock placeholder="#blurImage" src="/assets/sample.png"></imageBlock>'
+			);
+
+			expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
+				'<figure class="ck-widget ck-widget_selected image" contenteditable="false">' +
+					'<img class="image_placeholder" src="/assets/sample.png" style="background-image:url(#blurImage)"></img>' +
+					'<div class="ck ck-reset_all ck-widget__type-around"></div>' +
+				'</figure>'
+			);
+		} );
+
 		it( 'should not apply placeholder to other elements than image', () => {
 			model.schema.register( 'test', { inheritAllFrom: '$blockObject', allowAttributes: [ 'src', 'placeholder' ] } );
 			editor.conversion.elementToElement( { model: 'test', view: 'div' } );
@@ -158,6 +224,143 @@ describe( 'ImagePlaceholder', () => {
 			expect( model.schema.checkAttribute( 'imageBlock', 'placeholder' ) ).to.be.false;
 		} );
 
-		// TODO
+		it( 'should apply placeholder to the img in the editing view (only)', () => {
+			setModelData( model, '<paragraph><imageInline src="/assets/sample.png" placeholder="#blurImage"></imageInline></paragraph>' );
+
+			expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
+				'<p>' +
+					'<span class="ck-widget image-inline" contenteditable="false">' +
+						'<img class="image_placeholder" src="/assets/sample.png" style="background-image:url(#blurImage)"></img>' +
+					'</span>' +
+				'</p>'
+			);
+
+			expect( editor.getData() ).to.equal(
+				'<p><img src="/assets/sample.png"></p>'
+			);
+		} );
+
+		it( 'should remove placeholder from the img in the editing view (only)', () => {
+			setModelData( model, '<paragraph><imageInline src="/assets/sample.png" placeholder="#blurImage"></imageInline></paragraph>' );
+
+			model.change( writer => writer.removeAttribute( 'placeholder', doc.getRoot().getChild( 0 ).getChild( 0 ) ) );
+
+			expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
+				'<p>' +
+					'<span class="ck-widget image-inline" contenteditable="false">' +
+						'<img src="/assets/sample.png"></img>' +
+					'</span>' +
+				'</p>'
+			);
+
+			expect( editor.getData() ).to.equal(
+				'<p><img src="/assets/sample.png"></p>'
+			);
+		} );
+
+		it( 'should remove placeholder when the image is loaded', () => {
+			setModelData( model, '<paragraph><imageInline src="/assets/sample.png" placeholder="#blurImage"></imageInline></paragraph>' );
+
+			const modelElement = doc.getRoot().getChild( 0 ).getChild( 0 );
+			const viewElement = editor.editing.mapper.toViewElement( modelElement ).getChild( 0 );
+			const domElement = editor.editing.view.domConverter.mapViewToDom( viewElement );
+
+			expect( domElement.tagName ).to.equal( 'IMG' );
+
+			expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
+				'<p>' +
+					'<span class="ck-widget image-inline" contenteditable="false">' +
+						'<img class="image_placeholder" src="/assets/sample.png" style="background-image:url(#blurImage)"></img>' +
+					'</span>' +
+				'</p>'
+			);
+
+			expect( editor.getData() ).to.equal(
+				'<p><img src="/assets/sample.png"></p>'
+			);
+
+			view.document.fire( 'imageLoaded', {
+				target: domElement
+			} );
+
+			expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
+				'<paragraph><imageInline src="/assets/sample.png"></imageInline></paragraph>'
+			);
+
+			expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
+				'<p>' +
+					'<span class="ck-widget image-inline" contenteditable="false">' +
+						'<img src="/assets/sample.png"></img>' +
+					'</span>' +
+				'</p>'
+			);
+		} );
+
+		it( 'should not remove placeholder when some other image is loaded', () => {
+			setModelData( model, '<paragraph><imageInline src="/assets/sample.png" placeholder="#blurImage"></imageInline></paragraph>' );
+
+			expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
+				'<p>' +
+					'<span class="ck-widget image-inline" contenteditable="false">' +
+						'<img class="image_placeholder" src="/assets/sample.png" style="background-image:url(#blurImage)"></img>' +
+					'</span>' +
+				'</p>'
+			);
+
+			expect( editor.getData() ).to.equal(
+				'<p><img src="/assets/sample.png"></p>'
+			);
+
+			view.document.fire( 'imageLoaded', {
+				target: document.createElement( 'img' )
+			} );
+
+			expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
+				'<paragraph><imageInline placeholder="#blurImage" src="/assets/sample.png"></imageInline></paragraph>'
+			);
+
+			expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
+				'<p>' +
+					'<span class="ck-widget image-inline" contenteditable="false">' +
+						'<img class="image_placeholder" src="/assets/sample.png" style="background-image:url(#blurImage)"></img>' +
+					'</span>' +
+				'</p>'
+			);
+		} );
+
+		it( 'should not apply placeholder to other elements than image', () => {
+			model.schema.register( 'test', { inheritAllFrom: '$inlineObject', allowAttributes: [ 'src', 'placeholder' ] } );
+			editor.conversion.elementToElement( { model: 'test', view: 'span' } );
+			editor.conversion.attributeToAttribute( { model: 'src', view: 'data-src' } );
+			editor.conversion.attributeToAttribute( { model: 'placeholder', view: 'data-placeholder' } );
+
+			setModelData( model, '<paragraph><test src="/assets/sample.png" placeholder="#blurImage"></test></paragraph>' );
+
+			expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
+				'<p><span data-placeholder="#blurImage" data-src="/assets/sample.png"></span></p>'
+			);
+
+			expect( editor.getData() ).to.equal(
+				'<p><span data-src="/assets/sample.png" data-placeholder="#blurImage">&nbsp;</span></p>'
+			);
+		} );
+
+		it( 'should not apply placeholder consumed by other converter', () => {
+			editor.conversion.attributeToAttribute( { model: 'placeholder', view: 'data-placeholder', converterPriority: 'high' } );
+
+			setModelData( model, '<paragraph><imageInline src="/assets/sample.png" placeholder="#blurImage"></imageInline></paragraph>' );
+
+			expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
+				'<p>' +
+					'<span class="ck-widget image-inline" contenteditable="false" data-placeholder="#blurImage">' +
+						'<img src="/assets/sample.png"></img>' +
+					'</span>' +
+				'</p>'
+			);
+
+			expect( editor.getData() ).to.equal(
+				'<p><img src="/assets/sample.png" data-placeholder="#blurImage"></p>'
+			);
+		} );
 	} );
 } );