From 461ef559b3e7d31b600900fbc8f26d79830f2b32 Mon Sep 17 00:00:00 2001 From: Marta Motyczynska Date: Fri, 7 Jul 2023 12:52:59 +0200 Subject: [PATCH 1/7] Fix appearance of inline images in editing, which are wider than editor and have height set. --- packages/ckeditor5-image/theme/image.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/ckeditor5-image/theme/image.css b/packages/ckeditor5-image/theme/image.css index 0d857998e19..f8c43e4a432 100644 --- a/packages/ckeditor5-image/theme/image.css +++ b/packages/ckeditor5-image/theme/image.css @@ -105,6 +105,12 @@ } } + /* Keep proportions of the inline image if the height is set and the image is wider than the editor width. + See https://github.com/ckeditor/ckeditor5/issues/14542. */ + & .image-inline img { + height: auto; + } + /* The inline image nested in the table should have its original size if not resized. See https://github.com/ckeditor/ckeditor5/issues/9117. */ & td, From f22ff3cd6faa6d1e20bd2cce1df7bc76f99e48e5 Mon Sep 17 00:00:00 2001 From: Marta Motyczynska Date: Fri, 7 Jul 2023 12:59:57 +0200 Subject: [PATCH 2/7] Fix appearance of block images (editing & data), which are wider than editor and have height set. --- packages/ckeditor5-image/theme/image.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/ckeditor5-image/theme/image.css b/packages/ckeditor5-image/theme/image.css index f8c43e4a432..8051a285114 100644 --- a/packages/ckeditor5-image/theme/image.css +++ b/packages/ckeditor5-image/theme/image.css @@ -29,6 +29,10 @@ /* Make sure the image is never smaller than the parent container (See: https://github.com/ckeditor/ckeditor5/issues/9300). */ min-width: 100%; + + /* Keep proportions of the block image if the height is set and the image is wider than the editor width. + See https://github.com/ckeditor/ckeditor5/issues/14542. */ + height: auto; } } From e18fa9531d47d6f1b5914305850bcb21dbee3922 Mon Sep 17 00:00:00 2001 From: Marta Motyczynska Date: Fri, 7 Jul 2023 13:04:21 +0200 Subject: [PATCH 3/7] Add inline aspect-ratio for inline (editing) and block (editing & data) images which have width & height set. --- .../src/imagesizeattributes.ts | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/ckeditor5-image/src/imagesizeattributes.ts b/packages/ckeditor5-image/src/imagesizeattributes.ts index c438e2eb72a..c8886d340cd 100644 --- a/packages/ckeditor5-image/src/imagesizeattributes.ts +++ b/packages/ckeditor5-image/src/imagesizeattributes.ts @@ -127,14 +127,19 @@ export default class ImageSizeAttributes extends Plugin { } } ); - // Dedicated converter to propagate attributes to the element. - editor.conversion.for( 'downcast' ).add( dispatcher => { - attachDowncastConverter( dispatcher, 'width', 'width' ); - attachDowncastConverter( dispatcher, 'height', 'height' ); + // Dedicated converters to propagate attributes to the element. + editor.conversion.for( 'editingDowncast' ).add( dispatcher => { + attachDowncastConverter( dispatcher, 'width', 'width', true ); + attachDowncastConverter( dispatcher, 'height', 'height', true ); + } ); + + editor.conversion.for( 'dataDowncast' ).add( dispatcher => { + attachDowncastConverter( dispatcher, 'width', 'width', false ); + attachDowncastConverter( dispatcher, 'height', 'height', false ); } ); function attachDowncastConverter( - dispatcher: DowncastDispatcher, modelAttributeName: string, viewAttributeName: string + dispatcher: DowncastDispatcher, modelAttributeName: string, viewAttributeName: string, setRatioForInlineImage: boolean ) { dispatcher.on( `attribute:${ modelAttributeName }:${ imageType }`, ( evt, data, conversionApi ) => { if ( !conversionApi.consumable.consume( data.item, evt.name ) ) { @@ -151,12 +156,15 @@ export default class ImageSizeAttributes extends Plugin { viewWriter.removeAttribute( viewAttributeName, img ); } + if ( imageType === 'imageInline' && !setRatioForInlineImage ) { + return; + } + const width = data.item.getAttribute( 'width' ); const height = data.item.getAttribute( 'height' ); - const isResized = data.item.hasAttribute( 'resizedWidth' ); const aspectRatio = img.getStyle( 'aspect-ratio' ); - if ( width && height && !aspectRatio && isResized ) { + if ( width && height && !aspectRatio ) { viewWriter.setStyle( 'aspect-ratio', `${ width }/${ height }`, img ); } } ); From d74868b1a2a0d8b75a96ef7c58a2b20ac9430efc Mon Sep 17 00:00:00 2001 From: Marta Motyczynska Date: Fri, 7 Jul 2023 13:25:41 +0200 Subject: [PATCH 4/7] Add aspect ratio for inline images which are resized (data). --- packages/ckeditor5-image/src/imagesizeattributes.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/ckeditor5-image/src/imagesizeattributes.ts b/packages/ckeditor5-image/src/imagesizeattributes.ts index c8886d340cd..5331cf081d7 100644 --- a/packages/ckeditor5-image/src/imagesizeattributes.ts +++ b/packages/ckeditor5-image/src/imagesizeattributes.ts @@ -156,7 +156,10 @@ export default class ImageSizeAttributes extends Plugin { viewWriter.removeAttribute( viewAttributeName, img ); } - if ( imageType === 'imageInline' && !setRatioForInlineImage ) { + const isResized = data.item.hasAttribute( 'resizedWidth' ); + + // Do not set aspect ratio for inline images which are not resized (data pipeline). + if ( imageType === 'imageInline' && !isResized && !setRatioForInlineImage ) { return; } From a1b88a54044ae7e0fc37ec8c2846607c03b47998 Mon Sep 17 00:00:00 2001 From: Marta Motyczynska Date: Fri, 7 Jul 2023 13:30:33 +0200 Subject: [PATCH 5/7] Remove css rules which are already covered in image.css file. --- packages/ckeditor5-image/theme/imageresize.css | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/ckeditor5-image/theme/imageresize.css b/packages/ckeditor5-image/theme/imageresize.css index 15351410a77..ad86a3b6b16 100644 --- a/packages/ckeditor5-image/theme/imageresize.css +++ b/packages/ckeditor5-image/theme/imageresize.css @@ -4,7 +4,6 @@ */ /* Preserve aspect ratio of the resized image after introducing image height attribute. */ -.ck-content figure.image_resized img, .ck-content img.image_resized { height: auto; } @@ -31,12 +30,6 @@ } .ck.ck-editor__editable { - /* Preserve aspect ratio of the resized image after introducing image height attribute. */ - & .image.image_resized img, - & .image-inline.image_resized img { - height: auto; - } - /* The resized inline image nested in the table should respect its parent size. See https://github.com/ckeditor/ckeditor5/issues/9117. */ & td, From 174443f0e57bc5abe580278ee7e275cd6d35186d Mon Sep 17 00:00:00 2001 From: Marta Motyczynska Date: Fri, 7 Jul 2023 14:49:03 +0200 Subject: [PATCH 6/7] Tests: update after setting aspect-ratio for more use cases. --- packages/ckeditor5-image/tests/imagesizeattributes.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/ckeditor5-image/tests/imagesizeattributes.js b/packages/ckeditor5-image/tests/imagesizeattributes.js index adf13c5d061..903ecb4715a 100644 --- a/packages/ckeditor5-image/tests/imagesizeattributes.js +++ b/packages/ckeditor5-image/tests/imagesizeattributes.js @@ -288,14 +288,14 @@ describe( 'ImageSizeAttributes', () => { ); } ); - it( 'should not add aspect-ratio if attributes are set but image is not resized', () => { + it( 'should add aspect-ratio if attributes are set but image is not resized (but to editing view only)', () => { editor.setData( '

' ); expect( getViewData( view, { withoutSelection: true } ) ).to.equal( '

' + - '' + + '' + '

' ); @@ -424,20 +424,20 @@ describe( 'ImageSizeAttributes', () => { ); } ); - it( 'should not add aspect-ratio if attributes are set but image is not resized', () => { + it( 'should add aspect-ratio if attributes are set but image is not resized', () => { editor.setData( '
' ); expect( getViewData( view, { withoutSelection: true } ) ).to.equal( '
' + - '' + + '' + '
' ); expect( editor.getData() ).to.equal( '
' + - '' + + '' + '
' ); } ); From afc03de10e03d910a43fd55377294e490b7ae877 Mon Sep 17 00:00:00 2001 From: Marta Motyczynska Date: Fri, 7 Jul 2023 15:59:16 +0200 Subject: [PATCH 7/7] Remove code for setting aspect-ratio on starting resizng, as now we set it also for not resized images. --- .../src/imageresize/imageresizehandles.ts | 13 -------- .../tests/imageresize/imageresizehandles.js | 31 ------------------- 2 files changed, 44 deletions(-) diff --git a/packages/ckeditor5-image/src/imageresize/imageresizehandles.ts b/packages/ckeditor5-image/src/imageresize/imageresizehandles.ts index eab0555cc22..3c611ceef46 100644 --- a/packages/ckeditor5-image/src/imageresize/imageresizehandles.ts +++ b/packages/ckeditor5-image/src/imageresize/imageresizehandles.ts @@ -142,19 +142,6 @@ export default class ImageResizeHandles extends Plugin { } } ); - resizer.on( 'begin', () => { - const img = imageUtils.findViewImgElement( imageView )!; - const aspectRatio = img.getStyle( 'aspect-ratio' ); - const widthAttr = imageModel.getAttribute( 'width' ); - const heightAttr = imageModel.getAttribute( 'height' ); - - if ( widthAttr && heightAttr && !aspectRatio ) { - editingView.change( writer => { - writer.setStyle( 'aspect-ratio', `${ widthAttr }/${ heightAttr }`, img ); - } ); - } - } ); - resizer.bind( 'isEnabled' ).to( this ); } ); } diff --git a/packages/ckeditor5-image/tests/imageresize/imageresizehandles.js b/packages/ckeditor5-image/tests/imageresize/imageresizehandles.js index 89de2711284..8c596c15ba4 100644 --- a/packages/ckeditor5-image/tests/imageresize/imageresizehandles.js +++ b/packages/ckeditor5-image/tests/imageresize/imageresizehandles.js @@ -687,37 +687,6 @@ describe( 'ImageResizeHandles', () => { } ); } ); - describe( 'aspect-ratio style', () => { - beforeEach( async () => { - editor = await createEditor(); - - await setModelAndWaitForImages( editor, - '[' + - `` + - ']' - ); - - widget = viewDocument.getRoot().getChild( 0 ).getChild( 0 ); - } ); - - it( 'is added after starting resizing, if width & height attributes are set', () => { - const resizerPosition = 'bottom-left'; - const domParts = getWidgetDomParts( editor, widget, resizerPosition ); - const initialPointerPosition = getHandleCenterPoint( domParts.widget, resizerPosition ); - const viewImage = widget.getChild( 0 ); - - expect( viewImage.getStyle( 'aspec-ratio' ) ).to.be.undefined; - - resizerMouseSimulator.down( editor, domParts.resizeHandle ); - - resizerMouseSimulator.move( editor, domParts.resizeHandle, null, initialPointerPosition ); - - expect( viewImage.getStyle( 'aspect-ratio' ) ).to.equal( '100/50' ); - - resizerMouseSimulator.up( editor ); - } ); - } ); - describe( 'undo integration', () => { beforeEach( async () => { editor = await createEditor();