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-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, '[' + diff --git a/packages/ckeditor5-image/src/image/insertimagecommand.ts b/packages/ckeditor5-image/src/image/insertimagecommand.ts index 9e4c135c85f..3fe27225c93 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 ); } else { - imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes } ); + imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes }, null, options.imageType ); } } ); } diff --git a/packages/ckeditor5-image/tests/image/insertimagecommand.js b/packages/ckeditor5-image/tests/image/insertimagecommand.js index 0820b6fc376..c0053361d25 100644 --- a/packages/ckeditor5-image/tests/image/insertimagecommand.js +++ b/packages/ckeditor5-image/tests/image/insertimagecommand.js @@ -134,6 +134,37 @@ describe( 'InsertImageCommand', () => { expect( getModelData( model ) ).to.equal( `f[]o` ); } ); + it( 'should be possible to specify image type as image (imageBlock)', () => { + const imgSrc = 'foo/bar.jpg'; + + setModelData( model, 'f[o]o' ); + + command.execute( { + imageType: 'imageBlock', + source: imgSrc + } ); + + 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';