diff --git a/packages/roosterjs-editor-core/lib/corePlugins/ImageSelection.ts b/packages/roosterjs-editor-core/lib/corePlugins/ImageSelection.ts index 0041b247fc9..153602d4b31 100644 --- 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 index 60331218a62..c5ac7e4e940 100644 --- 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,8 +60,8 @@ describe('ImageSelectionPlugin |', () => { editor.setContent(``); 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(); @@ -67,6 +69,19 @@ describe('ImageSelectionPlugin |', () => { expect(selection.areAllCollapsed).toBe(false); }); + it('should not be triggered in mouse up left click', () => { + editor.setContent(``); + 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(``); 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: { + 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: { + target: target, + view: window, + bubbles: true, + cancelable: true, + clientX: rect.left, + clientY: rect.top, + shiftKey: false, + button: keyNumber, + }, + }; + }; });