Merge pull request #2224 from microsoft/u/juliaroldi/click-image

Only select image on click
microsoft · Nov 22, 2023 · 3f7cba1 · 3f7cba1
2 parents 2699cf9 + 006fcae
commit 3f7cba1
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 15 deletions.
diff --git a/packages/roosterjs-editor-core/lib/corePlugins/ImageSelection.ts b/packages/roosterjs-editor-core/lib/corePlugins/ImageSelection.ts
@@ -43,7 +43,8 @@ export default class ImageSelection implements EditorPlugin {
                     if (
                         safeInstanceOf(target, 'HTMLImageElement') &&
                         target.isContentEditable &&
-                        event.rawEvent.button != mouseMiddleButton
+                        event.rawEvent.button != mouseMiddleButton &&
+                        event.isClicking
                     ) {
                         this.editor.select(target);
                     }

diff --git a/packages/roosterjs-editor-core/test/corePlugins/imageSelectionTest.ts b/packages/roosterjs-editor-core/test/corePlugins/imageSelectionTest.ts
@@ -7,6 +7,8 @@ import {
     ImageSelectionRange,
     PluginEvent,
     PluginEventType,
+    PluginMouseUpEvent,
+    PluginMouseDownEvent,
 } from 'roosterjs-editor-types';
 export * from 'roosterjs-editor-dom/test/DomTestHelper';
 
@@ -58,15 +60,28 @@ describe('ImageSelectionPlugin |', () => {
         editor.setContent(`<img id=${imageId}></img>`);
         const target = document.getElementById(imageId);
         editorIsFeatureEnabled.and.returnValue(true);
-        simulateMouseEvent('mousedown', target!, 0);
-        simulateMouseEvent('mouseup', target!, 0);
+        imageSelection.onPluginEvent(mouseDown(target!, 0));
+        imageSelection.onPluginEvent(mouseup(target!, 0, true));
         editor.focus();
 
         const selection = editor.getSelectionRangeEx();
         expect(selection.type).toBe(SelectionRangeTypes.ImageSelection);
         expect(selection.areAllCollapsed).toBe(false);
     });
 
+    it('should not be triggered in mouse up left click', () => {
+        editor.setContent(`<img id=${imageId}></img>`);
+        const target = document.getElementById(imageId);
+        editorIsFeatureEnabled.and.returnValue(true);
+        imageSelection.onPluginEvent(mouseDown(target!, 0));
+        imageSelection.onPluginEvent(mouseup(target!, 0, false));
+        editor.focus();
+
+        const selection = editor.getSelectionRangeEx();
+        expect(selection.type).toBe(SelectionRangeTypes.Normal);
+        expect(selection.areAllCollapsed).toBe(true);
+    });
+
     it('should handle a ESCAPE KEY in a image', () => {
         editor.setContent(`<img id=${imageId}></img>`);
         const target = document.getElementById(imageId);
@@ -204,17 +219,42 @@ describe('ImageSelectionPlugin |', () => {
         };
     };
 
-    function simulateMouseEvent(mouseEvent: string, target: HTMLElement, keyNumber: number) {
+    const mouseup = (
+        target: HTMLElement,
+        keyNumber: number,
+        isClicking: boolean
+    ): PluginMouseUpEvent => {
+        const rect = target.getBoundingClientRect();
+        return {
+            eventType: PluginEventType.MouseUp,
+            rawEvent: <any>{
+                target: target,
+                view: window,
+                bubbles: true,
+                cancelable: true,
+                clientX: rect.left,
+                clientY: rect.top,
+                shiftKey: false,
+                button: keyNumber,
+            },
+            isClicking,
+        };
+    };
+
+    const mouseDown = (target: HTMLElement, keyNumber: number): PluginMouseDownEvent => {
         const rect = target.getBoundingClientRect();
-        var event = new MouseEvent(mouseEvent, {
-            view: window,
-            bubbles: true,
-            cancelable: true,
-            clientX: rect.left,
-            clientY: rect.top,
-            shiftKey: false,
-            button: keyNumber,
-        });
-        target.dispatchEvent(event);
-    }
+        return {
+            eventType: PluginEventType.MouseDown,
+            rawEvent: <any>{
+                target: target,
+                view: window,
+                bubbles: true,
+                cancelable: true,
+                clientX: rect.left,
+                clientY: rect.top,
+                shiftKey: false,
+                button: keyNumber,
+            },
+        };
+    };
 });