diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/TableEditor.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/TableEditor.ts index ed296dc3900..818f11056c5 100644 --- 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 index 6cef76ca3a3..0585e056fac 100644 --- 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 index 481444eedb3..a2da136c503 100644 --- 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, + { + 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, + { + target: table, + }, + undefined + ); + + expect(onEnd).toHaveBeenCalledWith(true); + }); + describe('Move - onDragEnd', () => { let target: HTMLTableElement; const nodeHeight = 300;