From 46e343f049030473af668a820cb56ee83dbd0a00 Mon Sep 17 00:00:00 2001
From: "Julia Roldi (from Dev Box)" <juliaroldi@microsoft.com>
Date: Tue, 1 Oct 2024 11:56:05 -0300
Subject: [PATCH] clean info when delete image

---
 .../lib/imageEdit/ImageEditPlugin.ts          | 16 +++++++--
 .../test/imageEdit/ImageEditPluginTest.ts     | 34 +++++++++++++++++++
 2 files changed, 47 insertions(+), 3 deletions(-)

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,