Add possibility to break the current block by InsertImageCommand

packages/ckeditor5-image/src/image/insertimagecommand.ts

@@ -97,12 +97,14 @@ export default class InsertImageCommand extends Command {
 	 * @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.
+	 * @param options.breakBlock If set to `true`, the block at the selection start will be broken before inserting the image.
 	 * See the documentation of the command to learn more about accepted formats.
 	 */
 	public override execute(
 		options: {
 			source: ArrayOrItem<string | Record<string, unknown>>;
 			imageType?: 'imageBlock' | 'imageInline' | null;
+			breakBlock?: boolean;
 		}
 	): void {
 		const sourceDefinitions = toArray<string | Record<string, unknown>>( options.source );
@@ -132,6 +134,8 @@ export default class InsertImageCommand extends Command {
 				const position = this.editor.model.createPositionAfter( selectedElement );
 
 				imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes }, position, options.imageType );
+			} else if ( options.breakBlock ) {
+				imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes }, selection.getFirstPosition(), options.imageType );
 			} else {
 				imageUtils.insertImage( { ...sourceDefinition, ...selectionAttributes }, null, options.imageType );
 			}

packages/ckeditor5-image/tests/image/insertimagecommand.js

@@ -165,6 +165,22 @@ describe( 'InsertImageCommand', () => {
 				);
 		} );
 
+		it( 'should be possible to break the block with an inserted image', () => {
+			const imgSrc = 'foo/bar.jpg';
+
+			setModelData( model, '<paragraph>f[]oo</paragraph>' );
+
+			command.execute( {
+				imageType: 'imageBlock',
+				source: imgSrc,
+				breakBlock: true
+			} );
+
+			expect( getModelData( model ) ).to.equal(
+				`<paragraph>f</paragraph>[<imageBlock src="${ imgSrc }"></imageBlock>]<paragraph>oo</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';