From eb26a37684e30d1fd826675baafc064c7ab4071c Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Mon, 16 Sep 2024 14:09:23 +0200 Subject: [PATCH 1/5] Fix duplicating images after ckbox edit. --- .../src/ckboximageedit/ckboximageeditcommand.ts | 1 + .../ckeditor5-image/src/image/insertimagecommand.ts | 12 +++++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/ckeditor5-ckbox/src/ckboximageedit/ckboximageeditcommand.ts b/packages/ckeditor5-ckbox/src/ckboximageedit/ckboximageeditcommand.ts index 906dcae8039..fa5e86ccd69 100644 --- a/packages/ckeditor5-ckbox/src/ckboximageedit/ckboximageeditcommand.ts +++ b/packages/ckeditor5-ckbox/src/ckboximageedit/ckboximageeditcommand.ts @@ -395,6 +395,7 @@ export default class CKBoxImageEditCommand extends Command { writer.setSelection( element, 'on' ); editor.execute( 'insertImage', { + imageType: element.is( 'element', 'imageInline' ) ? 'imageInline' : null, source: { src: imageFallbackUrl, sources: imageSources, diff --git a/packages/ckeditor5-image/src/image/insertimagecommand.ts b/packages/ckeditor5-image/src/image/insertimagecommand.ts index 9e4c135c85f..f4d53eed1de 100644 --- a/packages/ckeditor5-image/src/image/insertimagecommand.ts +++ b/packages/ckeditor5-image/src/image/insertimagecommand.ts @@ -95,10 +95,16 @@ export default class InsertImageCommand extends Command { * * @fires execute * @param options Options for the executed command. + * @param options.imageType The type of the image to insert. If not specified, the type will be determined automatically. * @param options.source The image source or an array of image sources to insert. * See the documentation of the command to learn more about accepted formats. */ - public override execute( options: { source: ArrayOrItem> } ): void { + public override execute( + options: { + source: ArrayOrItem>; + imageType?: 'imageBlock' | 'imageInline' | null; + } + ): void { const sourceDefinitions = toArray>( options.source ); const selection = this.editor.model.document.selection; const imageUtils: ImageUtils = this.editor.plugins.get( 'ImageUtils' ); @@ -125,9 +131,9 @@ export default class InsertImageCommand extends Command { if ( index && selectedElement && imageUtils.isImage( selectedElement ) ) { const position = this.editor.model.createPositionAfter( selectedElement ); - imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes }, position ); + imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes }, position, options.imageType || null ); } else { - imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes } ); + imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes }, null, options.imageType || null ); } } ); } From 9e1193d1e129003f9a6c83d7f0223ac75fd3c925 Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Mon, 16 Sep 2024 14:20:55 +0200 Subject: [PATCH 2/5] Remove unecessary null checks --- packages/ckeditor5-image/src/image/insertimagecommand.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ckeditor5-image/src/image/insertimagecommand.ts b/packages/ckeditor5-image/src/image/insertimagecommand.ts index f4d53eed1de..3fe27225c93 100644 --- a/packages/ckeditor5-image/src/image/insertimagecommand.ts +++ b/packages/ckeditor5-image/src/image/insertimagecommand.ts @@ -131,9 +131,9 @@ export default class InsertImageCommand extends Command { if ( index && selectedElement && imageUtils.isImage( selectedElement ) ) { const position = this.editor.model.createPositionAfter( selectedElement ); - imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes }, position, options.imageType || null ); + imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes }, position, options.imageType ); } else { - imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes }, null, options.imageType || null ); + imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes }, null, options.imageType ); } } ); } From 374c77e80e36c4e2982f53a67862c579d27ed8d7 Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Mon, 16 Sep 2024 14:37:48 +0200 Subject: [PATCH 3/5] Add image insert command test --- .../tests/image/insertimagecommand.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/ckeditor5-image/tests/image/insertimagecommand.js b/packages/ckeditor5-image/tests/image/insertimagecommand.js index 0820b6fc376..07d352c8693 100644 --- a/packages/ckeditor5-image/tests/image/insertimagecommand.js +++ b/packages/ckeditor5-image/tests/image/insertimagecommand.js @@ -134,6 +134,19 @@ describe( 'InsertImageCommand', () => { expect( getModelData( model ) ).to.equal( `f[]o` ); } ); + it( 'should be possible to specify image type', () => { + const imgSrc = 'foo/bar.jpg'; + + setModelData( model, 'f[o]o' ); + + command.execute( { + imageType: 'imageBlock', + source: imgSrc + } ); + + expect( getModelData( model ) ).to.equal( `[]foo` ); + } ); + it( 'should insert multiple images at selection position as other widgets for inline type images', () => { const imgSrc1 = 'foo/bar.jpg'; const imgSrc2 = 'foo/baz.jpg'; From 641771f5b0a6da19fe454034aa6ab66db12503c6 Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Mon, 16 Sep 2024 14:40:17 +0200 Subject: [PATCH 4/5] Add more image insert tests --- .../tests/image/insertimagecommand.js | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/ckeditor5-image/tests/image/insertimagecommand.js b/packages/ckeditor5-image/tests/image/insertimagecommand.js index 07d352c8693..c0053361d25 100644 --- a/packages/ckeditor5-image/tests/image/insertimagecommand.js +++ b/packages/ckeditor5-image/tests/image/insertimagecommand.js @@ -134,7 +134,7 @@ describe( 'InsertImageCommand', () => { expect( getModelData( model ) ).to.equal( `f[]o` ); } ); - it( 'should be possible to specify image type', () => { + it( 'should be possible to specify image type as image (imageBlock)', () => { const imgSrc = 'foo/bar.jpg'; setModelData( model, 'f[o]o' ); @@ -147,6 +147,24 @@ describe( 'InsertImageCommand', () => { expect( getModelData( model ) ).to.equal( `[]foo` ); } ); + it( 'should be possible to specify image type as image (imageInline)', () => { + const imgSrc1 = 'foo/bar.jpg'; + const imgSrc2 = 'foo/baz.jpg'; + + setModelData( model, '[]' ); + + command.execute( { + imageType: 'imageInline', + source: [ imgSrc1, imgSrc2 ] + } ); + + expect( getModelData( model ) ) + .to.equal( + `` + + `[]` + ); + } ); + it( 'should insert multiple images at selection position as other widgets for inline type images', () => { const imgSrc1 = 'foo/bar.jpg'; const imgSrc2 = 'foo/baz.jpg'; From 6b9de7bae3df43a0f9e6864c25ea54a092fb59a9 Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Mon, 16 Sep 2024 14:44:04 +0200 Subject: [PATCH 5/5] Add ckbox image edit command test --- .../ckboximageedit/ckboximageeditcommand.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/ckeditor5-ckbox/tests/ckboximageedit/ckboximageeditcommand.js b/packages/ckeditor5-ckbox/tests/ckboximageedit/ckboximageeditcommand.js index 53e07f1d08f..39b94370bb0 100644 --- a/packages/ckeditor5-ckbox/tests/ckboximageedit/ckboximageeditcommand.js +++ b/packages/ckeditor5-ckbox/tests/ckboximageedit/ckboximageeditcommand.js @@ -861,6 +861,27 @@ describe( 'CKBoxImageEditCommand', () => { expect( getModelData( model ) ).to.equal( modelData ); } ); + it( 'should replace inline image with saved one after it is processed', () => { + setModelData( model, '[' + + ']' ); + + const imageElement = editor.model.document.selection.getSelectedElement(); + + command._replaceImage( imageElement, dataMock ); + + expect( getModelData( model ) ).to.equal( + '[' + + ']' + ); + } ); + it( 'should replace image with saved one after it is processed', () => { setModelData( model, '[' +