8
0
Просмотр исходного кода

Internal (image): Fixed a case when multiple resizers could be created for a single widget.

Marek Lewandowski 5 лет назад
Родитель
Сommit
a0fd43642c

+ 10 - 2
packages/ckeditor5-image/src/imageresize/imageresizehandles.js

@@ -58,11 +58,19 @@ export default class ImageResizeHandles extends Plugin {
 		editingView.document.on( 'imageLoaded', ( evt, domEvent ) => {
 		editingView.document.on( 'imageLoaded', ( evt, domEvent ) => {
 			const imageView = editor.editing.view.domConverter.domToView( domEvent.target );
 			const imageView = editor.editing.view.domConverter.domToView( domEvent.target );
 			const widgetView = imageView.findAncestor( 'figure' );
 			const widgetView = imageView.findAncestor( 'figure' );
-			const mapper = editor.editing.mapper;
+			let resizer = this.editor.plugins.get( WidgetResize )._getResizerByViewElement( widgetView );
+
+			if ( resizer ) {
+				// There are rare cases when image will be triggered multiple times for the same widget, e.g. when
+				// image's src was changed after upload (https://github.com/ckeditor/ckeditor5/pull/8108#issuecomment-708302992).
+				resizer.redraw();
+				return;
+			}
 
 
+			const mapper = editor.editing.mapper;
 			const imageModel = mapper.toModelElement( widgetView );
 			const imageModel = mapper.toModelElement( widgetView );
 
 
-			const resizer = editor.plugins
+			resizer = editor.plugins
 				.get( WidgetResize )
 				.get( WidgetResize )
 				.attachTo( {
 				.attachTo( {
 					unit: editor.config.get( 'image.resizeUnit' ),
 					unit: editor.config.get( 'image.resizeUnit' ),

+ 17 - 0
packages/ckeditor5-image/tests/imageresize/imageresizehandles.js

@@ -262,6 +262,23 @@ describe( 'ImageResizeHandles', () => {
 		} );
 		} );
 	} );
 	} );
 
 
+	it( 'doesn\'t create multiple resizers for a single image widget', async () => {
+		// https://github.com/ckeditor/ckeditor5/pull/8108#issuecomment-708302992
+		editor = await createEditor();
+		await setModelAndWaitForImages( editor, `[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
+		widget = viewDocument.getRoot().getChild( 0 );
+
+		const domParts = getWidgetDomParts( editor, widget, 'bottom-right' );
+		const alternativeImageFixture =
+			'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
+
+		// Change the image so that load event triggers for the same img element again.
+		domParts.widget.querySelector( 'img' ).src = alternativeImageFixture;
+		await waitForAllImagesLoaded( editor );
+
+		expect( domParts.widget.querySelectorAll( '.ck-widget__resizer' ).length ).to.equal( 1 );
+	} );
+
 	describe( 'srcset integration', () => {
 	describe( 'srcset integration', () => {
 		// The image is 96x96 pixels.
 		// The image is 96x96 pixels.
 		const imageBaseUrl = '/assets/sample.png';
 		const imageBaseUrl = '/assets/sample.png';