Merge pull request #2893 from microsoft/u/juliaroldi/image-drag

Remove dragging suffix
microsoft · Nov 26, 2024 · 480c729 · 480c729
2 parents f6b5dca + 206e29e
commit 480c729
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git 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
@@ -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<string, DOMEventRecord> = {};
+
     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<string, DOMEventRecord>) => {
+                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',