diff --git a/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts b/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts index 2c9529e995a..fb3a13ef529 100644 --- a/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts +++ b/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts @@ -234,8 +234,15 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin { private keyDownHandler(editor: IEditor, event: KeyDownEvent) { if (this.isEditing) { - if (event.rawEvent.key === 'Escape') { - this.removeImageWrapper(); + if ( + event.rawEvent.key === 'Escape' || + event.rawEvent.key === 'Delete' || + event.rawEvent.key === 'Backspace' + ) { + if (event.rawEvent.key === 'Escape') { + this.removeImageWrapper(); + } + this.cleanInfo(); } else { this.applyFormatWithContentModel( editor, @@ -610,7 +617,10 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin { ); } - private cleanInfo() { + /** + * Exported for testing purpose only + */ + public cleanInfo() { this.editor?.setEditorStyle(IMAGE_EDIT_CLASS, null); this.editor?.setEditorStyle(IMAGE_EDIT_CLASS_CARET, null); this.selectedImage = null; diff --git a/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts b/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts index 1d8108ae389..c9a6851b20d 100644 --- a/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts +++ b/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts @@ -180,6 +180,40 @@ describe('ImageEditPlugin', () => { plugin.dispose(); }); + it('keyDown - DELETE', () => { + const mockedImage = { + getAttribute: getAttributeSpy, + }; + const plugin = new ImageEditPlugin(); + plugin.initialize(editor); + const cleanInfoSpy = spyOn(plugin, 'cleanInfo'); + getDOMSelectionSpy.and.returnValue({ + type: 'image', + image: mockedImage, + }); + const image = createImage(''); + const paragraph = createParagraph(); + paragraph.segments.push(image); + plugin.onPluginEvent({ + eventType: 'mouseUp', + rawEvent: { + button: 0, + target: mockedImage, + } as any, + }); + plugin.onPluginEvent({ + eventType: 'keyDown', + rawEvent: { + key: 'Delete', + target: mockedImage, + } as any, + }); + expect(cleanInfoSpy).toHaveBeenCalled(); + expect(cleanInfoSpy).toHaveBeenCalledTimes(1); + expect(formatContentModelSpy).toHaveBeenCalledTimes(1); + plugin.dispose(); + }); + it('mouseUp', () => { const mockedImage = { getAttribute: getAttributeSpy, diff --git a/versions.json b/versions.json index cfa95f8bea8..2c9dfe8810b 100644 --- a/versions.json +++ b/versions.json @@ -3,6 +3,7 @@ "main": "9.11.0", "legacyAdapter": "8.62.1", "overrides": { - "roosterjs-content-model-core": "9.11.1" + "roosterjs-content-model-core": "9.11.1", + "roosterjs-content-model-plugins": "9.11.1" } }