Merge pull request #8809 from ckeditor/i/8749

Fix (image): Fixed image resizer for images with links. Closes #8749.
ckeditor · Jan 12, 2021 · abd2c67 · abd2c67
2 parents e7c6939 + 7cac756
commit abd2c67
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/packages/ckeditor5-image/src/imageresize/imageresizehandles.js b/packages/ckeditor5-image/src/imageresize/imageresizehandles.js
@@ -56,8 +56,8 @@ export default class ImageResizeHandles extends Plugin {
 		editingView.addObserver( ImageLoadObserver );
 
 		this.listenTo( editingView.document, 'imageLoaded', ( evt, domEvent ) => {
-			// The resizer must be attached only to images loaded by the `ImageInsert` or `ImageUpload` plugins.
-			if ( !domEvent.target.matches( 'figure.image.ck-widget > img' ) ) {
+			// The resizer must be attached only to images loaded by the `ImageInsert`, `ImageUpload` or `LinkImage` plugins.
+			if ( !domEvent.target.matches( 'figure.image.ck-widget > img, figure.image.ck-widget > a > img' ) ) {
 				return;
 			}
 

diff --git a/packages/ckeditor5-image/tests/imageresize/imageresizehandles.js b/packages/ckeditor5-image/tests/imageresize/imageresizehandles.js
@@ -9,16 +9,17 @@
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 
 import Image from '../../src/image';
+import ImageStyle from '../../src/imagestyle';
 import ImageToolbar from '../../src/imagetoolbar';
 import ImageResizeEditing from '../../src/imageresize/imageresizeediting';
 import ImageResizeHandles from '../../src/imageresize/imageresizehandles';
 import ImageTextAlternative from '../../src/imagetextalternative';
 
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import ImageStyle from '../../src/imagestyle';
 import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Table from '@ckeditor/ckeditor5-table/src/table';
 import HtmlEmbedEditing from '@ckeditor/ckeditor5-html-embed/src/htmlembedediting';
+import LinkImageEditing from '@ckeditor/ckeditor5-link/src/linkimageediting';
 
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
@@ -473,6 +474,24 @@ describe( 'ImageResizeHandles', () => {
 		} );
 	} );
 
+	describe( 'Link image integration', () => {
+		it( 'should attach the resizer to the image inside the link', async () => {
+			editor = await createEditor( {
+				plugins: [ Image, ImageResizeEditing, ImageResizeHandles, LinkImageEditing ]
+			} );
+
+			const attachToSpy = sinon.spy( editor.plugins.get( 'WidgetResize' ), 'attachTo' );
+
+			setData( editor.model, `[<image linkHref="http://ckeditor.com" src="${ IMAGE_SRC_FIXTURE }" alt="alt text"></image>]` );
+
+			await waitForAllImagesLoaded( editor );
+
+			expect( attachToSpy ).calledOnce;
+
+			attachToSpy.restore();
+		} );
+	} );
+
 	function getDomWidth( domElement ) {
 		return new Rect( domElement ).width;
 	}