Skip to content

Commit

Permalink
Add possibility to break the current block by InsertImageCommand.
Browse files Browse the repository at this point in the history
  • Loading branch information
Dumluregn committed Sep 27, 2024
1 parent 8a0dd4b commit 22278a5
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 0 deletions.
4 changes: 4 additions & 0 deletions packages/ckeditor5-image/src/image/insertimagecommand.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -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 );
}
Expand Down
16 changes: 16 additions & 0 deletions packages/ckeditor5-image/tests/image/insertimagecommand.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down

0 comments on commit 22278a5

Please sign in to comment.