diff --git a/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts b/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts index 554941a44f2..ec6dfe6047f 100644 --- a/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts +++ b/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts @@ -121,6 +121,16 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin { } }, }, + dragend: { + beforeDispatch: ev => { + if (this.editor) { + const target = ev.target as Node; + if (this.isImageSelection(target) && target.id.includes(DRAG_ID)) { + target.id = target.id.replace(DRAG_ID, '').trim(); + } + } + }, + }, }); } diff --git a/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts b/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts index 9bcaabf2f3a..9fa5393fe0d 100644 --- a/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts +++ b/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts @@ -9,6 +9,7 @@ import { initEditor } from '../TestHelper'; import { ContentModelDocument, ContentModelFormatter, + DOMEventRecord, EditorEnvironment, FormatContentModelOptions, IEditor, @@ -64,7 +65,6 @@ describe('ImageEditPlugin', () => { }; let editor: IEditor; let mockedEnvironment: EditorEnvironment; - let attachDomEventSpy: jasmine.Spy; let getDOMSelectionSpy: jasmine.Spy; let formatContentModelSpy: jasmine.Spy; let focusSpy: jasmine.Spy; @@ -76,8 +76,9 @@ describe('ImageEditPlugin', () => { let setEditorStyleSpy: jasmine.Spy; let triggerEventSpy: jasmine.Spy; let getAttributeSpy: jasmine.Spy; + let domEvents: Record = {}; + beforeEach(() => { - attachDomEventSpy = jasmine.createSpy('attachDomEvent'); getDOMSelectionSpy = jasmine.createSpy('getDOMSelection'); mockedEnvironment = { isSafari: false, @@ -124,7 +125,9 @@ describe('ImageEditPlugin', () => { }); editor = { getEnvironment: () => mockedEnvironment, - attachDomEvent: attachDomEventSpy, + attachDomEvent: (eventMap: Record) => { + domEvents = eventMap; + }, getDOMSelection: getDOMSelectionSpy, formatContentModel: formatContentModelSpy, focus: focusSpy, @@ -560,6 +563,35 @@ describe('ImageEditPlugin', () => { plugin.dispose(); }); + it('dragImage only', () => { + const plugin = new ImageEditPlugin(); + plugin.initialize(editor); + const draggedImage = document.createElement('img'); + draggedImage.id = 'image_0'; + triggerEventSpy.and.callThrough(); + domEvents.dragstart?.beforeDispatch?.({ + target: draggedImage, + } as any); + expect(draggedImage.id).toBe('image_0_dragging'); + plugin.dispose(); + }); + + it('dragImage at same place', () => { + const plugin = new ImageEditPlugin(); + plugin.initialize(editor); + const draggedImage = document.createElement('img'); + draggedImage.id = 'image_0'; + triggerEventSpy.and.callThrough(); + domEvents.dragstart?.beforeDispatch?.({ + target: draggedImage, + } as any); + domEvents.dragend?.beforeDispatch?.({ + target: draggedImage, + } as any); + expect(draggedImage.id).toBe('image_0'); + plugin.dispose(); + }); + it('flip setEditorStyle', () => { const model: ContentModelDocument = { blockGroupType: 'Document',