Merge pull request #8444 from ckeditor/i/8433

Fix (image): Don't attach the image resizer to images inside the HTML embed preview. Closes #8433.

packages/ckeditor5-image/package.json

@@ -27,6 +27,7 @@
     "@ckeditor/ckeditor5-enter": "^23.1.0",
     "@ckeditor/ckeditor5-easy-image": "^23.1.0",
     "@ckeditor/ckeditor5-heading": "^23.1.0",
+    "@ckeditor/ckeditor5-html-embed": "^23.1.0",
     "@ckeditor/ckeditor5-indent": "^23.1.0",
     "@ckeditor/ckeditor5-link": "^23.1.0",
     "@ckeditor/ckeditor5-list": "^23.1.0",

packages/ckeditor5-image/src/imageresize/imageresizehandles.js

@@ -45,7 +45,7 @@ export default class ImageResizeHandles extends Plugin {
 	}
 
 	/**
-	 * Attaches the listeners responsible for creating a resizer for each image.
+	 * Attaches the listeners responsible for creating a resizer for each image, except for images inside the HTML embed preview.
 	 *
 	 * @private
 	 */
@@ -56,6 +56,11 @@ 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' ) ) {
+				return;
+			}
+
 			const imageView = editor.editing.view.domConverter.domToView( domEvent.target );
 			const widgetView = imageView.findAncestor( 'figure' );
 			let resizer = this.editor.plugins.get( WidgetResize ).getResizerByViewElement( widgetView );

packages/ckeditor5-image/tests/imageresize/imageresizehandles.js

@@ -18,6 +18,7 @@ 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 Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
@@ -446,6 +447,32 @@ describe( 'ImageResizeHandles', () => {
 		} );
 	} );
 
+	describe( 'HTML embed integration', () => {
+		it( 'does not attach the resizer to the image inside the HTML embed preview', async () => {
+			editor = await createEditor( {
+				plugins: [ Image, ImageResizeEditing, ImageResizeHandles, HtmlEmbedEditing ],
+				htmlEmbed: {
+					showPreviews: true,
+					sanitizeHtml: input => ( { html: input, hasChanged: false } )
+				}
+			} );
+
+			const attachToSpy = sinon.spy( editor.plugins.get( WidgetResize ), 'attachTo' );
+
+			setData( editor.model, '[<rawHtml></rawHtml>]' );
+
+			editor.model.change( writer => {
+				writer.setAttribute( 'value', `<img src="${ IMAGE_SRC_FIXTURE }">`, editor.model.document.getRoot().getChild( 0 ) );
+			} );
+
+			await waitForAllImagesLoaded( editor );
+
+			expect( attachToSpy ).not.called;
+
+			attachToSpy.restore();
+		} );
+	} );
+
 	function getDomWidth( domElement ) {
 		return new Rect( domElement ).width;
 	}

packages/ckeditor5-image/tests/manual/tickets/8433/1.html

@@ -0,0 +1,12 @@
+<div id="editor">
+	<h3>Regular image</h3>
+	<figure class="image">
+		<img alt="sample" src="sample.jpg">
+		<figcaption>Caption</figcaption>
+	</figure>
+
+	<h3>HTML embed preview</h3>
+	<div class="raw-html-embed">
+		<img alt="sample" src="sample.jpg">
+	</div>
+</div>

packages/ckeditor5-image/tests/manual/tickets/8433/1.js

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';
+import ImageInsert from '../../../../src/imageinsert';
+import ImageResize from '../../../../src/imageresize';
+
+import { UploadAdapterMock } from '@ckeditor/ckeditor5-upload/tests/_utils/mocks';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ ArticlePluginSet, HtmlEmbed, ImageInsert, ImageResize ],
+		toolbar: [ 'imageInsert', '|', 'htmlEmbed' ],
+		htmlEmbed: {
+			showPreviews: true
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		editor.plugins.get( 'FileRepository' ).createUploadAdapter = loader => {
+			return new UploadAdapterMock( loader );
+		};
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-image/tests/manual/tickets/8433/1.md

@@ -0,0 +1,7 @@
+### The ImageResize plugin crashes if HtmlEmbed plugin has enabled showPreviews option [#8433](https://github.com/ckeditor/ckeditor5/issues/8433)
+
+1. Confirm that there is no error in the console.
+2. Confirm that the image in "Regular image" section can be resized: focus the image (four image resizers should be visible) and then resize the image using any of the resizer.
+3. Confirm that the image in "HTML embed preview" can't be resized.
+4. Insert new image and confirm that it can be resized.
+5. Add new HTML code containing an image (e.g. `<img src="sample.jpg">`) and confirm that it is not possible to resize it.