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,
+ },
+ };
+ };
});