diff --git a/packages/ckeditor5-ckbox/src/ckboxediting.ts b/packages/ckeditor5-ckbox/src/ckboxediting.ts index d9882fa59ac..a4881292038 100644 --- a/packages/ckeditor5-ckbox/src/ckboxediting.ts +++ b/packages/ckeditor5-ckbox/src/ckboxediting.ts @@ -23,12 +23,13 @@ import { type ViewElement, type Writer } from 'ckeditor5/src/engine'; -import { CKEditorError, logError } from 'ckeditor5/src/utils'; +import { CKEditorError, type DecoratedMethodEvent, logError } from 'ckeditor5/src/utils'; import type { CKBoxAssetDefinition } from './ckboxconfig'; import CKBoxCommand from './ckboxcommand'; import CKBoxUploadAdapter from './ckboxuploadadapter'; +import type { ReplaceImageSourceCommand } from '@ckeditor/ckeditor5-image'; const DEFAULT_CKBOX_THEME_NAME = 'lark'; @@ -66,10 +67,18 @@ export default class CKBoxEditing extends Plugin { const isLibraryLoaded = !!window.CKBox; if ( replaceImageSourceCommand ) { - // After replacing image, "ckboxImageId" attribute will be removed. - replaceImageSourceCommand.registerImageCallback( ( writer, image ) => { - writer.removeAttribute( 'ckboxImageId', image ); - } ); + // // After replacing image, "ckboxImageId" attribute will be removed. + // replaceImageSourceCommand.registerImageCallback( ( writer, image ) => { + // writer.removeAttribute( 'ckboxImageId', image ); + // } ); + + this.listenTo>( + replaceImageSourceCommand, + 'cleanupImage', + ( _, [ writer, image ] ) => { + writer.removeAttribute( 'ckboxImageId', image ); + } + ); } // Proceed with plugin initialization only when the integrator intentionally wants to use it, i.e. when the `config.ckbox` exists or diff --git a/packages/ckeditor5-image/src/image/replaceimagesourcecommand.ts b/packages/ckeditor5-image/src/image/replaceimagesourcecommand.ts index fbc30e42b78..fc30565d884 100644 --- a/packages/ckeditor5-image/src/image/replaceimagesourcecommand.ts +++ b/packages/ckeditor5-image/src/image/replaceimagesourcecommand.ts @@ -23,12 +23,10 @@ import type { Writer, Element } from 'ckeditor5/src/engine'; export default class ReplaceImageSourceCommand extends Command { declare public value: string | null; - declare private _imageCallbacks: Array<( writer: Writer, image: Element ) => void>; - constructor( editor: Editor ) { super( editor ); - this._imageCallbacks = []; + this.decorate( 'cleanupImage' ); } /** @@ -43,15 +41,6 @@ export default class ReplaceImageSourceCommand extends Command { this.value = this.isEnabled ? element.getAttribute( 'src' ) as string : null; } - /** - * Register callback which will be executed after command execution. - * - * @param callback Callback which will be called after command execution. - */ - public registerImageCallback( callback: ( writer: Writer, image: Element ) => void ): void { - this._imageCallbacks.push( callback ); - } - /** * Executes the command. * @@ -65,14 +54,14 @@ export default class ReplaceImageSourceCommand extends Command { this.editor.model.change( writer => { writer.setAttribute( 'src', options.source, image ); - this._cleanupImage( writer, image ); + this.cleanupImage( writer, image ); } ); } /** * Cleanup some image attributes. */ - private _cleanupImage( writer: Writer, image: Element ) { + public cleanupImage( writer: Writer, image: Element ): void { writer.removeAttribute( 'srcset', image ); writer.removeAttribute( 'sizes', image ); @@ -84,7 +73,5 @@ export default class ReplaceImageSourceCommand extends Command { writer.removeAttribute( 'width', image ); writer.removeAttribute( 'height', image ); writer.removeAttribute( 'alt', image ); - - this._imageCallbacks.forEach( callback => callback( writer, image ) ); } } diff --git a/packages/ckeditor5-image/tests/image/replaceimagesourcecommand.js b/packages/ckeditor5-image/tests/image/replaceimagesourcecommand.js index cf83dcc341d..ca0820062b3 100644 --- a/packages/ckeditor5-image/tests/image/replaceimagesourcecommand.js +++ b/packages/ckeditor5-image/tests/image/replaceimagesourcecommand.js @@ -48,9 +48,9 @@ describe( 'ReplaceImageSourceCommand', () => { it( 'should clean up some attributes in responsive image', () => { setModelData( model, `[]` ); @@ -62,7 +62,11 @@ describe( 'ReplaceImageSourceCommand', () => { expect( element.getAttribute( 'width' ) ).to.equal( 100 ); expect( element.getAttribute( 'height' ) ).to.equal( 200 ); expect( element.getAttribute( 'alt' ) ).to.equal( 'Example image' ); + expect( element.getAttribute( 'myCustomId' ) ).to.equal( 'id' ); + command.on( 'cleanupImage', ( eventInfo, [ writer, image ] ) => { + writer.removeAttribute( 'myCustomId', image ); + } ); command.execute( { source: 'bar/foo.jpg' } ); expect( element.getAttribute( 'src' ) ).to.equal( 'bar/foo.jpg' ); @@ -70,6 +74,7 @@ describe( 'ReplaceImageSourceCommand', () => { expect( element.getAttribute( 'width' ) ).to.be.undefined; expect( element.getAttribute( 'height' ) ).to.be.undefined; expect( element.getAttribute( 'alt' ) ).to.be.undefined; + expect( element.getAttribute( 'myCustomId' ) ).to.be.undefined; } ); } );