diff --git a/packages/ckeditor5-image/package.json b/packages/ckeditor5-image/package.json index 2ad268a3e97..187c5bc7736 100644 --- a/packages/ckeditor5-image/package.json +++ b/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", diff --git a/packages/ckeditor5-image/src/imageresize/imageresizehandles.js b/packages/ckeditor5-image/src/imageresize/imageresizehandles.js index be553d0d68f..2faa2eb7493 100644 --- a/packages/ckeditor5-image/src/imageresize/imageresizehandles.js +++ b/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 ); diff --git a/packages/ckeditor5-image/tests/imageresize/imageresizehandles.js b/packages/ckeditor5-image/tests/imageresize/imageresizehandles.js index b99b62bcd40..38f80802798 100644 --- a/packages/ckeditor5-image/tests/imageresize/imageresizehandles.js +++ b/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, '[]' ); + + editor.model.change( writer => { + writer.setAttribute( 'value', ``, editor.model.document.getRoot().getChild( 0 ) ); + } ); + + await waitForAllImagesLoaded( editor ); + + expect( attachToSpy ).not.called; + + attachToSpy.restore(); + } ); + } ); + function getDomWidth( domElement ) { return new Rect( domElement ).width; } diff --git a/packages/ckeditor5-image/tests/manual/tickets/8433/1.html b/packages/ckeditor5-image/tests/manual/tickets/8433/1.html new file mode 100644 index 00000000000..af58e32073d --- /dev/null +++ b/packages/ckeditor5-image/tests/manual/tickets/8433/1.html @@ -0,0 +1,12 @@ +
+

Regular image

+
+ sample +
Caption
+
+ +

HTML embed preview

+
+ sample +
+
diff --git a/packages/ckeditor5-image/tests/manual/tickets/8433/1.js b/packages/ckeditor5-image/tests/manual/tickets/8433/1.js new file mode 100644 index 00000000000..09af3d9647b --- /dev/null +++ b/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 ); + } ); diff --git a/packages/ckeditor5-image/tests/manual/tickets/8433/1.md b/packages/ckeditor5-image/tests/manual/tickets/8433/1.md new file mode 100644 index 00000000000..b4ca9065f07 --- /dev/null +++ b/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. ``) and confirm that it is not possible to resize it. \ No newline at end of file diff --git a/packages/ckeditor5-image/tests/manual/tickets/8433/sample.jpg b/packages/ckeditor5-image/tests/manual/tickets/8433/sample.jpg new file mode 100644 index 00000000000..b77d07e7bff Binary files /dev/null and b/packages/ckeditor5-image/tests/manual/tickets/8433/sample.jpg differ