diff --git a/packages/ckeditor5-image/src/imageresize/imageresizehandles.ts b/packages/ckeditor5-image/src/imageresize/imageresizehandles.ts index f311ddaa700..479ec976ef8 100644 --- a/packages/ckeditor5-image/src/imageresize/imageresizehandles.ts +++ b/packages/ckeditor5-image/src/imageresize/imageresizehandles.ts @@ -101,8 +101,7 @@ export default class ImageResizeHandles extends Plugin { return domWidgetElement.querySelector( 'img' )!; }, getResizeHost() { - // Return the model image element parent to avoid setting an inline element (/) as a resize host. - return domConverter.mapViewToDom( mapper.toViewElement( imageModel.parent as Element )! ) as HTMLElement; + return domConverter.mapViewToDom( mapper.toViewElement( imageModel as Element )! ) as HTMLElement; }, isCentered() { diff --git a/packages/ckeditor5-image/tests/imageresize/imageresizehandles.js b/packages/ckeditor5-image/tests/imageresize/imageresizehandles.js index 8b05af6ec96..17e810cad26 100644 --- a/packages/ckeditor5-image/tests/imageresize/imageresizehandles.js +++ b/packages/ckeditor5-image/tests/imageresize/imageresizehandles.js @@ -3,7 +3,7 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -/* global document */ +/* global document, window */ // ClassicTestEditor can't be used, as it doesn't handle the focus, which is needed to test resizer visual cues. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js'; @@ -995,7 +995,7 @@ describe( 'ImageResizeHandles', () => { attachToSpy.restore(); } ); - it( 'should set the paragraph as the resize host for an image wrapped with a link', async () => { + it( 'should set non-inline element as the resize host for an image wrapped with a link', async () => { await setModelAndWaitForImages( editor, '' + `[]` + @@ -1004,7 +1004,7 @@ describe( 'ImageResizeHandles', () => { const resizer = Array.from( editor.plugins.get( 'WidgetResize' )._resizers.values() )[ 0 ]; - expect( resizer._getResizeHost().nodeName ).to.equal( 'P' ); + expect( window.getComputedStyle( resizer._getResizeHost() ).display ).not.to.equal( 'inline' ); } ); } ); @@ -1039,7 +1039,7 @@ describe( 'ImageResizeHandles', () => { } ); describe( 'to-do list integration', () => { - it( 'should set the list item as the resize host if an image is inside a to-do list', async () => { + it( 'should set non-inline as the resize host if an image is inside a to-do list', async () => { editor = await createEditor( { plugins: [ Image, ImageResizeEditing, ImageResizeHandles, LegacyTodoList, Paragraph ] } ); @@ -1052,7 +1052,7 @@ describe( 'ImageResizeHandles', () => { const resizer = Array.from( editor.plugins.get( 'WidgetResize' )._resizers.values() )[ 0 ]; - expect( resizer._getResizeHost().nodeName ).to.equal( 'LI' ); + expect( window.getComputedStyle( resizer._getResizeHost() ).display ).not.to.equal( 'inline' ); await editor.destroy(); } ); diff --git a/packages/ckeditor5-image/tests/imageresize/utils/getselectedimagepossibleresizerange.js b/packages/ckeditor5-image/tests/imageresize/utils/getselectedimagepossibleresizerange.js index 7755d1a7b35..62d3e32336f 100644 --- a/packages/ckeditor5-image/tests/imageresize/utils/getselectedimagepossibleresizerange.js +++ b/packages/ckeditor5-image/tests/imageresize/utils/getselectedimagepossibleresizerange.js @@ -91,7 +91,13 @@ describe( 'getSelectedImagePossibleResizeRange', () => { } ); editor.editing.view.change( writer => { - writer.setStyle( 'width', '500px', editor.editing.view.document.getRoot() ); + writer.setStyle( + { + width: '500px', + padding: '0px' + }, + editor.editing.view.document.getRoot() + ); } ); model = editor.model; diff --git a/packages/ckeditor5-image/tests/imageresize/utils/getselectedimagewidthinunits.js b/packages/ckeditor5-image/tests/imageresize/utils/getselectedimagewidthinunits.js index 7b2e89d5a30..ba711f948f6 100644 --- a/packages/ckeditor5-image/tests/imageresize/utils/getselectedimagewidthinunits.js +++ b/packages/ckeditor5-image/tests/imageresize/utils/getselectedimagewidthinunits.js @@ -59,17 +59,16 @@ describe( 'getSelectedImageWidthInUnits', () => { const { unit, value } = getSelectedImageWidthInUnits( editor, 'px' ); expect( unit ).to.be.equal( 'px' ); - expect( value ).to.be.greaterThan( 400 ); + expect( value ).to.be.equal( 310 ); } ); it( 'should return casted pixels value to percentage', () => { - setData( model, `[]` ); + setData( model, `[]` ); const { unit, value } = getSelectedImageWidthInUnits( editor, '%' ); expect( unit ).to.be.equal( '%' ); - expect( value ).to.be.greaterThan( 30 ); - expect( value ).to.be.lessThan( 40 ); + expect( value ).to.be.equal( 50 ); } ); async function createEditor( config ) { @@ -80,6 +79,16 @@ describe( 'getSelectedImageWidthInUnits', () => { } } ); + editor.editing.view.change( writer => { + writer.setStyle( + { + width: '500px', + padding: '0px' + }, + editor.editing.view.document.getRoot() + ); + } ); + model = editor.model; return editor; } diff --git a/packages/ckeditor5-widget/src/utils.ts b/packages/ckeditor5-widget/src/utils.ts index dc2eefaa8c5..fc712029cf3 100644 --- a/packages/ckeditor5-widget/src/utils.ts +++ b/packages/ckeditor5-widget/src/utils.ts @@ -453,12 +453,18 @@ function addSelectionHandle( widgetElement: ViewContainerElement, writer: Downca * Starting from a DOM resize host element (an element that receives dimensions as a result of resizing), * this helper returns the width of the found ancestor element. * - * **Note**: This helper searches up to 5 levels of ancestors only. + * * It searches up to 5 levels of ancestors only. * * @param domResizeHost Resize host DOM element that receives dimensions as a result of resizing. * @returns Width of ancestor element in pixels or 0 if no ancestor with a computed width has been found. */ export function calculateResizeHostAncestorWidth( domResizeHost: HTMLElement ): number { + const getElementComputedWidth = ( element: HTMLElement ) => { + const { width, paddingLeft, paddingRight } = element.ownerDocument.defaultView!.getComputedStyle( element! ); + + return parseFloat( width ) - ( parseFloat( paddingLeft ) || 0 ) - ( parseFloat( paddingRight ) || 0 ); + }; + const domResizeHostParent = domResizeHost.parentElement; if ( !domResizeHostParent ) { @@ -466,7 +472,7 @@ export function calculateResizeHostAncestorWidth( domResizeHost: HTMLElement ): } // Need to use computed style as it properly excludes parent's paddings from the returned value. - let parentWidth = parseFloat( domResizeHostParent!.ownerDocument.defaultView!.getComputedStyle( domResizeHostParent! ).width ); + let parentWidth = getElementComputedWidth( domResizeHostParent! ); // Sometimes parent width cannot be accessed. If that happens we should go up in the elements tree // and try to get width from next ancestor. @@ -483,9 +489,7 @@ export function calculateResizeHostAncestorWidth( domResizeHost: HTMLElement ): return 0; } - parentWidth = parseFloat( - domResizeHostParent!.ownerDocument.defaultView!.getComputedStyle( checkedElement ).width - ); + parentWidth = getElementComputedWidth( checkedElement ); } return parentWidth;