Only dismiss the Table Mover if the end of the drag is not in the Tab…

…le Mover div #2727
microsoft · Jun 25, 2024 · bddd1d9 · bddd1d9
1 parent 9dc5f50
commit bddd1d9
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 8 deletions.
diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/TableEditor.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/TableEditor.ts
@@ -379,8 +379,10 @@ export class TableEditor {
         this.editor.takeSnapshot();
     }
 
-    private onEndTableMove = () => {
-        this.disposeTableMover();
+    private onEndTableMove = (disposeHandler: boolean) => {
+        if (disposeHandler) {
+            this.disposeTableMover();
+        }
         return this.onFinishEditing();
     };
 

diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableMover.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableMover.ts
@@ -44,7 +44,7 @@ export function createTableMover(
     isRTL: boolean,
     onFinishDragging: (table: HTMLTableElement) => void,
     onStart: () => void,
-    onEnd: () => void,
+    onEnd: (disposeHandler: boolean) => void,
     contentDiv?: EventTarget | null,
     anchorContainer?: HTMLElement,
     onTableEditorCreated?: OnTableEditorCreatedCallback,
@@ -118,7 +118,7 @@ export interface TableMoverContext {
     div: HTMLElement;
     onFinishDragging: (table: HTMLTableElement) => void;
     onStart: () => void;
-    onEnd: () => void;
+    onEnd: (disposeHandler: boolean) => void;
     disableMovement?: boolean;
 }
 
@@ -298,9 +298,9 @@ export function onDragEnd(
     setTableMoverCursor(editor, false);
 
     if (element == context.div) {
-        // Table mover was only clicked, select whole table
+        // Table mover was only clicked, select whole table and do not dismiss the handler element.
         selectWholeTable(table);
-        context.onEnd();
+        context.onEnd(false /* disposeHandler */);
         return true;
     } else {
         // Check if table was dragged on itself, element is not in editor, or movement is disabled
@@ -310,7 +310,7 @@ export function onDragEnd(
             disableMovement
         ) {
             editor.setDOMSelection(initValue?.initialSelection ?? null);
-            context.onEnd();
+            context.onEnd(true /* disposeHandler */);
             return false;
         }
 
@@ -376,7 +376,7 @@ export function onDragEnd(
             // No movement, restore initial selection
             editor.setDOMSelection(initValue?.initialSelection ?? null);
         }
-        context.onEnd();
+        context.onEnd(true /* disposeHandler */);
         return insertionSuccess;
     }
 }
diff --git a/packages/roosterjs-content-model-plugins/test/tableEdit/tableMoverTest.ts b/packages/roosterjs-content-model-plugins/test/tableEdit/tableMoverTest.ts
@@ -365,6 +365,70 @@ describe('Table Mover Tests', () => {
         expect(parseFloat(divRect.style.left)).toBeGreaterThan(0);
     });
 
+    it('Do not dismiss the TableMover if only clicking the handler element', () => {
+        //Act
+        const table = document.createElement('table');
+        const div = document.createElement('div');
+        const onFinishDragging = jasmine.createSpy('onFinishDragging');
+        const onStart = jasmine.createSpy('onStart');
+        const onEnd = jasmine.createSpy('onEnd');
+
+        const context: TableMoverContext = {
+            table,
+            zoomScale: 1,
+            rect: null,
+            isRTL: true,
+            editor,
+            div,
+            onFinishDragging,
+            onStart,
+            onEnd,
+            disableMovement: false,
+        };
+
+        onDragEnd(
+            context,
+            <any>{
+                target: div,
+            },
+            undefined
+        );
+
+        expect(onEnd).toHaveBeenCalledWith(false);
+    });
+
+    it('Dismiss the TableMover if drag end did not end in the handler element', () => {
+        //Act
+        const table = document.createElement('table');
+        const div = document.createElement('div');
+        const onFinishDragging = jasmine.createSpy('onFinishDragging');
+        const onStart = jasmine.createSpy('onStart');
+        const onEnd = jasmine.createSpy('onEnd');
+
+        const context: TableMoverContext = {
+            table,
+            zoomScale: 1,
+            rect: null,
+            isRTL: true,
+            editor,
+            div,
+            onFinishDragging,
+            onStart,
+            onEnd,
+            disableMovement: false,
+        };
+
+        onDragEnd(
+            context,
+            <any>{
+                target: table,
+            },
+            undefined
+        );
+
+        expect(onEnd).toHaveBeenCalledWith(true);
+    });
+
     describe('Move - onDragEnd', () => {
         let target: HTMLTableElement;
         const nodeHeight = 300;