Merge pull request #17101 from ckeditor/ck/17056

Fix (ckbox): Editing inline images using `CKBox` no longer changes and reinserts them simultaneously. Closes #17056
ckeditor · Sep 16, 2024 · 90d69bf · 90d69bf
2 parents c65b09d + 6b9de7b
commit 90d69bf
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 3 deletions.
diff --git 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
@@ -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, '<paragraph>[<imageInline ' +
+						'alt="alt text" ckboxImageId="example-id" height="50" src="/assets/sample.png" width="50">' +
+					'</imageInline>]</paragraph>' );
+
+				const imageElement = editor.model.document.selection.getSelectedElement();
+
+				command._replaceImage( imageElement, dataMock );
+
+				expect( getModelData( model ) ).to.equal(
+					'<paragraph>[<imageInline ' +
+						'alt="alt text" ' +
+						'ckboxImageId="image-id1" ' +
+						'height="100" ' +
+						'sources="[object Object]" ' +
+						'src="https://example.com/workspace1/assets/image-id1/images/100.png" ' +
+						'width="100">' +
+					'</imageInline>]</paragraph>'
+				);
+			} );
+
 			it( 'should replace image with saved one after it is processed', () => {
 				setModelData( model, '[<imageBlock ' +
 						'alt="alt text" ckboxImageId="example-id" height="50" src="/assets/sample.png" width="50">' +

diff --git 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<string | Record<string, unknown>> } ): void {
+	public override execute(
+		options: {
+			source: ArrayOrItem<string | Record<string, unknown>>;
+			imageType?: 'imageBlock' | 'imageInline' | null;
+		}
+	): void {
 		const sourceDefinitions = toArray<string | Record<string, unknown>>( 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
@@ -134,6 +134,37 @@ describe( 'InsertImageCommand', () => {
 			expect( getModelData( model ) ).to.equal( `<paragraph>f[<imageInline src="${ imgSrc }"></imageInline>]o</paragraph>` );
 		} );
 
+		it( 'should be possible to specify image type as image (imageBlock)', () => {
+			const imgSrc = 'foo/bar.jpg';
+
+			setModelData( model, '<paragraph>f[o]o</paragraph>' );
+
+			command.execute( {
+				imageType: 'imageBlock',
+				source: imgSrc
+			} );
+
+			expect( getModelData( model ) ).to.equal( `[<imageBlock src="${ imgSrc }"></imageBlock>]<paragraph>foo</paragraph>` );
+		} );
+
+		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(
+					`<paragraph><imageInline src="${ imgSrc1 }"></imageInline>` +
+					`[<imageInline src="${ imgSrc2 }"></imageInline>]</paragraph>`
+				);
+		} );
+
 		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';