8
0
Pārlūkot izejas kodu

Fixed test after changes in engine view. Tests from src/image/.

Szymon Kupś 8 gadi atpakaļ
vecāks
revīzija
1c7381836e

+ 10 - 8
packages/ckeditor5-image/src/image/converters.js

@@ -80,6 +80,7 @@ export function srcsetAttributeConverter() {
 			return;
 			return;
 		}
 		}
 
 
+		const writer = conversionApi.writer;
 		const figure = conversionApi.mapper.toViewElement( data.item );
 		const figure = conversionApi.mapper.toViewElement( data.item );
 		const img = figure.getChild( 0 );
 		const img = figure.getChild( 0 );
 
 
@@ -87,23 +88,23 @@ export function srcsetAttributeConverter() {
 			const srcset = data.attributeOldValue;
 			const srcset = data.attributeOldValue;
 
 
 			if ( srcset.data ) {
 			if ( srcset.data ) {
-				img.removeAttribute( 'srcset' );
-				img.removeAttribute( 'sizes' );
+				writer.removeAttribute( 'srcset', img );
+				writer.removeAttribute( 'sizes', img );
 
 
 				if ( srcset.width ) {
 				if ( srcset.width ) {
-					img.removeAttribute( 'width' );
+					writer.removeAttribute( 'width', img );
 				}
 				}
 			}
 			}
 		} else {
 		} else {
 			const srcset = data.attributeNewValue;
 			const srcset = data.attributeNewValue;
 
 
 			if ( srcset.data ) {
 			if ( srcset.data ) {
-				img.setAttribute( 'srcset', srcset.data );
+				writer.setAttribute( 'srcset', srcset.data, img );
 				// Always outputting `100vw`. See https://github.com/ckeditor/ckeditor5-image/issues/2.
 				// Always outputting `100vw`. See https://github.com/ckeditor/ckeditor5-image/issues/2.
-				img.setAttribute( 'sizes', '100vw' );
+				writer.setAttribute( 'sizes', '100vw', img );
 
 
 				if ( srcset.width ) {
 				if ( srcset.width ) {
-					img.setAttribute( 'width', srcset.width );
+					writer.setAttribute( 'width', srcset.width, img );
 				}
 				}
 			}
 			}
 		}
 		}
@@ -120,13 +121,14 @@ export function modelToViewAttributeConverter( attributeKey ) {
 			return;
 			return;
 		}
 		}
 
 
+		const viewWriter = conversionApi.writer;
 		const figure = conversionApi.mapper.toViewElement( data.item );
 		const figure = conversionApi.mapper.toViewElement( data.item );
 		const img = figure.getChild( 0 );
 		const img = figure.getChild( 0 );
 
 
 		if ( data.attributeNewValue !== null ) {
 		if ( data.attributeNewValue !== null ) {
-			img.setAttribute( data.attributeKey, data.attributeNewValue );
+			viewWriter.setAttribute( data.attributeKey, data.attributeNewValue, img );
 		} else {
 		} else {
-			img.removeAttribute( data.attributeKey );
+			viewWriter.removeAttribute( data.attributeKey, img );
 		}
 		}
 	}
 	}
 }
 }

+ 1 - 1
packages/ckeditor5-image/src/image/imageengine.js

@@ -54,7 +54,7 @@ export default class ImageEngine extends Plugin {
 		} ) );
 		} ) );
 
 
 		const editingElementCreator = ( item, consumable, api ) =>
 		const editingElementCreator = ( item, consumable, api ) =>
-			toImageWidget( createImageViewElement( api.writer ), t( 'image widget' ) );
+			toImageWidget( createImageViewElement( api.writer ), api.writer, t( 'image widget' ) );
 
 
 		editor.conversion.for( 'editingDowncast' ).add( downcastElementToElement( {
 		editor.conversion.for( 'editingDowncast' ).add( downcastElementToElement( {
 			model: 'image',
 			model: 'image',

+ 4 - 3
packages/ckeditor5-image/src/image/utils.js

@@ -18,13 +18,14 @@ const imageSymbol = Symbol( 'isImage' );
  * * calls the {@link module:widget/utils~toWidget toWidget} function with the proper element's label creator.
  * * calls the {@link module:widget/utils~toWidget toWidget} function with the proper element's label creator.
  *
  *
  * @param {module:engine/view/element~Element} viewElement
  * @param {module:engine/view/element~Element} viewElement
+ * @param {module:engine/view/writer~Writer} writer Instance of view writer.
  * @param {String} label Element's label. It will be concatenated with the image `alt` attribute if one is present.
  * @param {String} label Element's label. It will be concatenated with the image `alt` attribute if one is present.
  * @returns {module:engine/view/element~Element}
  * @returns {module:engine/view/element~Element}
  */
  */
-export function toImageWidget( viewElement, label ) {
-	viewElement.setCustomProperty( imageSymbol, true );
+export function toImageWidget( viewElement, writer, label ) {
+	writer.setCustomProperty( imageSymbol, true, viewElement );
 
 
-	return toWidget( viewElement, { label: labelCreator } );
+	return toWidget( viewElement, writer, { label: labelCreator } );
 
 
 	function labelCreator() {
 	function labelCreator() {
 		const imgElement = viewElement.getChild( 0 );
 		const imgElement = viewElement.getChild( 0 );

+ 2 - 2
packages/ckeditor5-image/src/imageupload/imageuploadediting.js

@@ -134,8 +134,8 @@ export default class ImageUploadEditing extends Plugin {
 				const viewImg = viewFigure.getChild( 0 );
 				const viewImg = viewFigure.getChild( 0 );
 				const promise = loader.upload();
 				const promise = loader.upload();
 
 
-				editor.editing.view.change( () => {
-					viewImg.setAttribute( 'src', data );
+				editor.editing.view.change( writer => {
+					writer.setAttribute( 'src', data, viewImg );
 				} );
 				} );
 
 
 				model.enqueueChange( 'transparent', writer => {
 				model.enqueueChange( 'transparent', writer => {

+ 20 - 15
packages/ckeditor5-image/src/imageupload/imageuploadprogress.js

@@ -10,7 +10,8 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
 import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
 import uploadingPlaceholder from '../../theme/icons/image_placeholder.svg';
 import uploadingPlaceholder from '../../theme/icons/image_placeholder.svg';
-import UIElement from '@ckeditor/ckeditor5-engine/src/view/uielement';
+import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
+import ViewRange from '@ckeditor/ckeditor5-engine/src/view/range';
 
 
 import '../../theme/imageuploadprogress.css';
 import '../../theme/imageuploadprogress.css';
 
 
@@ -52,8 +53,9 @@ export default class ImageUploadProgress extends Plugin {
 	 * @param {module:utils/eventinfo~EventInfo} evt Object containing information about the fired event.
 	 * @param {module:utils/eventinfo~EventInfo} evt Object containing information about the fired event.
 	 * @param {Object} data Additional information about the change.
 	 * @param {Object} data Additional information about the change.
 	 * @param {module:engine/conversion/modelconsumable~ModelConsumable} consumable Values to consume.
 	 * @param {module:engine/conversion/modelconsumable~ModelConsumable} consumable Values to consume.
+	 * @param {Object} conversionApi
 	 */
 	 */
-	uploadStatusChange( evt, data, consumable ) {
+	uploadStatusChange( evt, data, consumable, conversionApi ) {
 		const editor = this.editor;
 		const editor = this.editor;
 		const modelImage = data.item;
 		const modelImage = data.item;
 		const uploadId = modelImage.getAttribute( 'uploadId' );
 		const uploadId = modelImage.getAttribute( 'uploadId' );
@@ -66,12 +68,13 @@ export default class ImageUploadProgress extends Plugin {
 		const placeholder = this.placeholder;
 		const placeholder = this.placeholder;
 		const status = data.attributeNewValue;
 		const status = data.attributeNewValue;
 		const viewFigure = editor.editing.mapper.toViewElement( modelImage );
 		const viewFigure = editor.editing.mapper.toViewElement( modelImage );
+		const viewWriter = conversionApi.writer;
 
 
 		// Show placeholder with infinite progress bar on the top while image is read from disk.
 		// Show placeholder with infinite progress bar on the top while image is read from disk.
 		if ( status == 'reading' ) {
 		if ( status == 'reading' ) {
-			viewFigure.addClass( 'ck-appear', 'ck-infinite-progress', 'ck-image-upload-placeholder' );
+			viewWriter.addClass( [ 'ck-appear', 'ck-infinite-progress', 'ck-image-upload-placeholder' ], viewFigure );
 			const viewImg = viewFigure.getChild( 0 );
 			const viewImg = viewFigure.getChild( 0 );
-			viewImg.setAttribute( 'src', placeholder );
+			viewWriter.setAttribute( 'src', placeholder, viewImg );
 
 
 			return;
 			return;
 		}
 		}
@@ -81,15 +84,16 @@ export default class ImageUploadProgress extends Plugin {
 			const loader = fileRepository.loaders.get( uploadId );
 			const loader = fileRepository.loaders.get( uploadId );
 
 
 			if ( loader ) {
 			if ( loader ) {
-				const progressBar = createProgressBar();
+				const progressBar = createProgressBar( viewWriter );
 
 
-				viewFigure.removeClass( 'ck-infinite-progress', 'ck-image-upload-placeholder' );
-				viewFigure.appendChildren( progressBar );
+				viewWriter.removeClass( [ 'ck-infinite-progress', 'ck-image-upload-placeholder' ], viewFigure );
+				viewWriter.insert( ViewPosition.createAt( viewFigure, 'end' ), progressBar );
 
 
 				// Update progress bar width when uploadedPercent is changed.
 				// Update progress bar width when uploadedPercent is changed.
 				loader.on( 'change:uploadedPercent', ( evt, name, value ) => {
 				loader.on( 'change:uploadedPercent', ( evt, name, value ) => {
-					progressBar.setStyle( 'width', value + '%' );
-					editor.editing.view.render();
+					editor.editing.view.change( writer => {
+						writer.setStyle( 'width', value + '%', progressBar );
+					} );
 				} );
 				} );
 			}
 			}
 
 
@@ -100,12 +104,12 @@ export default class ImageUploadProgress extends Plugin {
 		const progressBar = getProgressBar( viewFigure );
 		const progressBar = getProgressBar( viewFigure );
 
 
 		if ( progressBar ) {
 		if ( progressBar ) {
-			progressBar.remove();
+			viewWriter.remove( ViewRange.createOn( progressBar ) );
 		} else {
 		} else {
-			viewFigure.removeClass( 'ck-infinite-progress' );
+			viewWriter.removeClass( 'ck-infinite-progress', viewFigure );
 		}
 		}
 
 
-		viewFigure.removeClass( 'ck-appear', 'ck-image-upload-placeholder' );
+		viewWriter.removeClass( [ 'ck-appear', 'ck-image-upload-placeholder' ], viewFigure );
 	}
 	}
 }
 }
 
 
@@ -115,10 +119,11 @@ const progressBarSymbol = Symbol( 'progress-bar' );
 // Create progress bar element using {@link module:engine/view/uielement~UIElement}.
 // Create progress bar element using {@link module:engine/view/uielement~UIElement}.
 //
 //
 // @private
 // @private
+// @param {module:engine/view/writer~Writer} writer
 // @returns {module:engine/view/uielement~UIElement}
 // @returns {module:engine/view/uielement~UIElement}
-function createProgressBar() {
-	const progressBar = new UIElement( 'div', { class: 'ck-progress-bar' } );
-	progressBar.setCustomProperty( progressBarSymbol, true );
+function createProgressBar( writer ) {
+	const progressBar = writer.createUIElement( 'div', { class: 'ck-progress-bar' } );
+	writer.setCustomProperty( progressBarSymbol, true, progressBar );
 
 
 	return progressBar;
 	return progressBar;
 }
 }

+ 1 - 1
packages/ckeditor5-image/tests/image/converters.js

@@ -40,7 +40,7 @@ describe( 'Image converters', () => {
 				} );
 				} );
 
 
 				const editingElementCreator = ( item, consumable, api ) =>
 				const editingElementCreator = ( item, consumable, api ) =>
-					toImageWidget( createImageViewElement( api.writer ), '' );
+					toImageWidget( createImageViewElement( api.writer ), api.writer, '' );
 
 
 				editor.conversion.for( 'editingDowncast' ).add( downcastElementToElement( {
 				editor.conversion.for( 'editingDowncast' ).add( downcastElementToElement( {
 					model: 'image',
 					model: 'image',

+ 7 - 4
packages/ckeditor5-image/tests/image/utils.js

@@ -6,18 +6,21 @@
 import ViewElement from '@ckeditor/ckeditor5-engine/src/view/element';
 import ViewElement from '@ckeditor/ckeditor5-engine/src/view/element';
 import ViewSelection from '@ckeditor/ckeditor5-engine/src/view/selection';
 import ViewSelection from '@ckeditor/ckeditor5-engine/src/view/selection';
 import ViewDocumentFragment from '@ckeditor/ckeditor5-engine/src/view/documentfragment';
 import ViewDocumentFragment from '@ckeditor/ckeditor5-engine/src/view/documentfragment';
+import ViewWriter from '@ckeditor/ckeditor5-engine/src/view/writer';
+import ViewDocument from '@ckeditor/ckeditor5-engine/src/view/document';
 import ViewRange from '@ckeditor/ckeditor5-engine/src/view/range';
 import ViewRange from '@ckeditor/ckeditor5-engine/src/view/range';
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
 import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
 import { toImageWidget, isImageWidget, isImageWidgetSelected, isImage } from '../../src/image/utils';
 import { toImageWidget, isImageWidget, isImageWidgetSelected, isImage } from '../../src/image/utils';
 import { isWidget, getLabel } from '@ckeditor/ckeditor5-widget/src/utils';
 import { isWidget, getLabel } from '@ckeditor/ckeditor5-widget/src/utils';
 
 
 describe( 'image widget utils', () => {
 describe( 'image widget utils', () => {
-	let element, image;
+	let element, image, writer;
 
 
 	beforeEach( () => {
 	beforeEach( () => {
+		writer = new ViewWriter( new ViewDocument() );
 		image = new ViewElement( 'img' );
 		image = new ViewElement( 'img' );
 		element = new ViewElement( 'figure', null, image );
 		element = new ViewElement( 'figure', null, image );
-		toImageWidget( element, 'image widget' );
+		toImageWidget( element, writer, 'image widget' );
 	} );
 	} );
 
 
 	describe( 'toImageWidget()', () => {
 	describe( 'toImageWidget()', () => {
@@ -30,12 +33,12 @@ describe( 'image widget utils', () => {
 		} );
 		} );
 
 
 		it( 'should set element\'s label combined with alt attribute', () => {
 		it( 'should set element\'s label combined with alt attribute', () => {
-			image.setAttribute( 'alt', 'foo bar baz' );
+			writer.setAttribute( 'alt', 'foo bar baz', image );
 			expect( getLabel( element ) ).to.equal( 'foo bar baz image widget' );
 			expect( getLabel( element ) ).to.equal( 'foo bar baz image widget' );
 		} );
 		} );
 
 
 		it( 'provided label creator should always return same label', () => {
 		it( 'provided label creator should always return same label', () => {
-			image.setAttribute( 'alt', 'foo bar baz' );
+			writer.setAttribute( 'alt', 'foo bar baz', image );
 
 
 			expect( getLabel( element ) ).to.equal( 'foo bar baz image widget' );
 			expect( getLabel( element ) ).to.equal( 'foo bar baz image widget' );
 			expect( getLabel( element ) ).to.equal( 'foo bar baz image widget' );
 			expect( getLabel( element ) ).to.equal( 'foo bar baz image widget' );

+ 10 - 10
packages/ckeditor5-image/tests/imageupload/imageuploadprogress.js

@@ -25,7 +25,7 @@ describe( 'ImageUploadProgress', () => {
 
 
 	// eslint-disable-next-line max-len
 	// eslint-disable-next-line max-len
 	const base64Sample = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
 	const base64Sample = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
-	let editor, model, document, fileRepository, viewDocument, nativeReaderMock, loader, adapterMock;
+	let editor, model, document, fileRepository, view, nativeReaderMock, loader, adapterMock;
 
 
 	class UploadAdapterPluginMock extends Plugin {
 	class UploadAdapterPluginMock extends Plugin {
 		init() {
 		init() {
@@ -56,7 +56,7 @@ describe( 'ImageUploadProgress', () => {
 				editor = newEditor;
 				editor = newEditor;
 				model = editor.model;
 				model = editor.model;
 				document = model.document;
 				document = model.document;
-				viewDocument = editor.editing.view;
+				view = editor.editing.view;
 
 
 				fileRepository = editor.plugins.get( FileRepository );
 				fileRepository = editor.plugins.get( FileRepository );
 				fileRepository.createUploadAdapter = newLoader => {
 				fileRepository.createUploadAdapter = newLoader => {
@@ -72,7 +72,7 @@ describe( 'ImageUploadProgress', () => {
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
 		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 
 
-		expect( getViewData( viewDocument ) ).to.equal(
+		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-appear ck-image-upload-placeholder ck-infinite-progress ck-widget image" contenteditable="false">' +
 			'[<figure class="ck-appear ck-image-upload-placeholder ck-infinite-progress ck-widget image" contenteditable="false">' +
 				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
 				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
 			'</figure>]<p>foo</p>'
 			'</figure>]<p>foo</p>'
@@ -84,7 +84,7 @@ describe( 'ImageUploadProgress', () => {
 		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 
 
 		model.document.once( 'change', () => {
 		model.document.once( 'change', () => {
-			expect( getViewData( viewDocument ) ).to.equal(
+			expect( getViewData( view ) ).to.equal(
 				'[<figure class="ck-appear ck-widget image" contenteditable="false">' +
 				'[<figure class="ck-appear ck-widget image" contenteditable="false">' +
 					`<img src="${ base64Sample }"></img>` +
 					`<img src="${ base64Sample }"></img>` +
 					'<div class="ck-progress-bar"></div>' +
 					'<div class="ck-progress-bar"></div>' +
@@ -104,7 +104,7 @@ describe( 'ImageUploadProgress', () => {
 		model.document.once( 'change', () => {
 		model.document.once( 'change', () => {
 			adapterMock.mockProgress( 40, 100 );
 			adapterMock.mockProgress( 40, 100 );
 
 
-			expect( getViewData( viewDocument ) ).to.equal(
+			expect( getViewData( view ) ).to.equal(
 				'[<figure class="ck-appear ck-widget image" contenteditable="false">' +
 				'[<figure class="ck-appear ck-widget image" contenteditable="false">' +
 				`<img src="${ base64Sample }"></img>` +
 				`<img src="${ base64Sample }"></img>` +
 				'<div class="ck-progress-bar" style="width:40%"></div>' +
 				'<div class="ck-progress-bar" style="width:40%"></div>' +
@@ -123,7 +123,7 @@ describe( 'ImageUploadProgress', () => {
 
 
 		model.document.once( 'change', () => {
 		model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
 			model.document.once( 'change', () => {
-				expect( getViewData( viewDocument ) ).to.equal(
+				expect( getViewData( view ) ).to.equal(
 					'[<figure class="ck-widget image" contenteditable="false">' +
 					'[<figure class="ck-widget image" contenteditable="false">' +
 						'<img src="image.png"></img>' +
 						'<img src="image.png"></img>' +
 					'</figure>]<p>foo</p>'
 					'</figure>]<p>foo</p>'
@@ -145,7 +145,7 @@ describe( 'ImageUploadProgress', () => {
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
 		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 
 
-		expect( getViewData( viewDocument ) ).to.equal(
+		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-appear ck-image-upload-placeholder ck-infinite-progress ck-widget image" contenteditable="false">' +
 			'[<figure class="ck-appear ck-image-upload-placeholder ck-infinite-progress ck-widget image" contenteditable="false">' +
 				`<img src="${ base64Sample }"></img>` +
 				`<img src="${ base64Sample }"></img>` +
 			'</figure>]<p>foo</p>'
 			'</figure>]<p>foo</p>'
@@ -160,7 +160,7 @@ describe( 'ImageUploadProgress', () => {
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
 		setModelData( model, '<paragraph>[]foo</paragraph>' );
 		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
 
 
-		expect( getViewData( viewDocument ) ).to.equal(
+		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-widget image" contenteditable="false"><img></img></figure>]<p>foo</p>'
 			'[<figure class="ck-widget image" contenteditable="false"><img></img></figure>]<p>foo</p>'
 		);
 		);
 	} );
 	} );
@@ -174,7 +174,7 @@ describe( 'ImageUploadProgress', () => {
 			writer.setAttribute( 'uploadStatus', 'uploading', image );
 			writer.setAttribute( 'uploadStatus', 'uploading', image );
 		} );
 		} );
 
 
-		expect( getViewData( viewDocument ) ).to.equal(
+		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-appear ck-image-upload-placeholder ck-infinite-progress ck-widget image" contenteditable="false">' +
 			'[<figure class="ck-appear ck-image-upload-placeholder ck-infinite-progress ck-widget image" contenteditable="false">' +
 				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
 				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
 			'</figure>]'
 			'</figure>]'
@@ -184,7 +184,7 @@ describe( 'ImageUploadProgress', () => {
 			writer.setAttribute( 'uploadStatus', 'complete', image );
 			writer.setAttribute( 'uploadStatus', 'complete', image );
 		} );
 		} );
 
 
-		expect( getViewData( viewDocument ) ).to.equal(
+		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-widget image" contenteditable="false">' +
 			'[<figure class="ck-widget image" contenteditable="false">' +
 				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
 				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
 			'</figure>]'
 			'</figure>]'