clean info when delete image

microsoft · Oct 1, 2024 · 46e343f · 46e343f
1 parent 73809cb
commit 46e343f
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 3 deletions.
diff --git 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
@@ -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,