Merge pull request #2131 from microsoft/u/juliaroldi/image-select-copy

Fix copy/cut images
microsoft · Oct 6, 2023 · b6f6961 · b6f6961
2 parents 1ba8d4a + 32f3c2f
commit b6f6961
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/packages/roosterjs-editor-core/lib/corePlugins/ImageSelection.ts b/packages/roosterjs-editor-core/lib/corePlugins/ImageSelection.ts
@@ -60,9 +60,16 @@ export default class ImageSelection implements EditorPlugin {
                     }
                     break;
                 case PluginEventType.KeyDown:
-                    const key = event.rawEvent.key;
+                    const rawEvent = event.rawEvent;
+                    const key = rawEvent.key;
                     const keyDownSelection = this.editor.getSelectionRangeEx();
-                    if (keyDownSelection.type === SelectionRangeTypes.ImageSelection) {
+                    if (
+                        !rawEvent.ctrlKey &&
+                        !rawEvent.altKey &&
+                        !rawEvent.shiftKey &&
+                        !rawEvent.metaKey &&
+                        keyDownSelection.type === SelectionRangeTypes.ImageSelection
+                    ) {
                         if (key === Escape) {
                             this.editor.select(keyDownSelection.image, PositionType.Before);
                             this.editor.getSelectionRange()?.collapse();

diff --git a/packages/roosterjs-editor-core/test/corePlugins/imageSelectionTest.ts b/packages/roosterjs-editor-core/test/corePlugins/imageSelectionTest.ts
@@ -110,6 +110,21 @@ describe('ImageSelectionPlugin |', () => {
         expect(selection.areAllCollapsed).toBe(true);
     });
 
+    it('should not handle any key in a image in ctrl', () => {
+        editor.setContent(`<img id=${imageId}></img>`);
+        const target = document.getElementById(imageId);
+        editorIsFeatureEnabled.and.returnValue(true);
+        editor.focus();
+        editor.select(target);
+        const range = document.createRange();
+        range.selectNode(target!);
+        imageSelection.onPluginEvent(keyDown(Space, true));
+        imageSelection.onPluginEvent(keyUp(Space, true));
+        const selection = editor.getSelectionRangeEx();
+        expect(selection.type).toBe(SelectionRangeTypes.ImageSelection);
+        expect(selection.areAllCollapsed).toBe(false);
+    });
+
     it('should handle contextMenu', () => {
         editor.setContent(`<img id=${imageId}></img>`);
         const target = document.getElementById(imageId);
@@ -149,24 +164,32 @@ describe('ImageSelectionPlugin |', () => {
         expect(editor.select).not.toHaveBeenCalled();
     });
 
-    const keyDown = (key: string): PluginEvent => {
+    const keyDown = (key: string, ctrlKey: boolean = false): PluginEvent => {
         return {
             eventType: PluginEventType.KeyDown,
             rawEvent: <KeyboardEvent>{
                 key: key,
                 preventDefault: () => {},
                 stopPropagation: () => {},
+                shiftKey: false,
+                ctrlKey: ctrlKey,
+                altKey: false,
+                metaKey: false,
             },
         };
     };
 
-    const keyUp = (key: string): PluginEvent => {
+    const keyUp = (key: string, ctrlKey: boolean = false): PluginEvent => {
         return {
             eventType: PluginEventType.KeyUp,
             rawEvent: <KeyboardEvent>{
                 key: key,
                 preventDefault: () => {},
                 stopPropagation: () => {},
+                shiftKey: false,
+                ctrlKey: ctrlKey,
+                altKey: false,
+                metaKey: false,
             },
         };
     };