Implement Table Movement (#2599)

* isNodeEditor * domHelper test * implementation and test fix * fix undefined * isNodeEditor * implement live focus, restore initial selection on cancel * broswer drag and drop attempt * use getNodePositionFromEvent, add move cursor while dragging * restore class * fix import * restore DOMHelper * remove unneeded snapshots and checks, add copy feature * cleanup * fix merge * cursor change on copy, remove onEditorCreated * fix disposal issue * removed unused forEach, * export formatInsertPointWithContentModel * use formatInsertPointWithContentModel for table movement * reorder function * Add tests for table movement * optimisations and exports for testing * restore final table selection after move * added test * fix and add more tests * comments, remove copy feature, fix tests * fix test * fix test * implement disable movement
microsoft · May 10, 2024 · 01b4f1c · 01b4f1c
1 parent b1d4bab
commit 01b4f1c
Show file tree

Hide file tree

Showing 5 changed files with 934 additions and 135 deletions.
diff --git a/packages/roosterjs-content-model-api/lib/index.ts b/packages/roosterjs-content-model-api/lib/index.ts
@@ -49,6 +49,7 @@ export { formatImageWithContentModel } from './publicApi/utils/formatImageWithCo
 export { formatParagraphWithContentModel } from './publicApi/utils/formatParagraphWithContentModel';
 export { formatSegmentWithContentModel } from './publicApi/utils/formatSegmentWithContentModel';
 export { formatTextSegmentBeforeSelectionMarker } from './publicApi/utils/formatTextSegmentBeforeSelectionMarker';
+export { formatInsertPointWithContentModel } from './publicApi/utils/formatInsertPointWithContentModel';
 
 export { setListType } from './modelApi/list/setListType';
 export { setModelListStyle } from './modelApi/list/setModelListStyle';

diff --git a/...ages/roosterjs-content-model-api/lib/publicApi/utils/formatInsertPointWithContentModel.ts b/...ages/roosterjs-content-model-api/lib/publicApi/utils/formatInsertPointWithContentModel.ts
@@ -18,7 +18,11 @@ import type {
 } from 'roosterjs-content-model-types';
 
 /**
- * @internal
+ * Format content model at a given insert point with a callback function
+ * @param editor The editor object
+ * @param insertPoint The insert point to format
+ * @param callback The callback function to format the content model
+ * @param options Options to control the behavior of the formatting
  */
 export function formatInsertPointWithContentModel(
     editor: IEditor,

diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/TableEditor.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/TableEditor.ts
@@ -147,7 +147,7 @@ export class TableEditor {
                     if (i === 0 && topOrSide == TOP_OR_SIDE.top) {
                         const center = (tdRect.left + tdRect.right) / 2;
                         const isOnRightHalf = this.isRTL ? x < center : x > center;
-                        !this.disableFeatures?.includes('VerticalTableInserter') &&
+                        !this.isFeatureDisabled('VerticalTableInserter') &&
                             this.setInserterTd(
                                 isOnRightHalf ? td : tr.cells[j - 1],
                                 false /*isHorizontal*/
@@ -164,7 +164,7 @@ export class TableEditor {
                             ? tdAboveRect.right === tdRect.right
                             : tdAboveRect.left === tdRect.left;
 
-                        !this.disableFeatures?.includes('HorizontalTableInserter') &&
+                        !this.isFeatureDisabled('HorizontalTableInserter') &&
                             this.setInserterTd(
                                 y < (tdRect.top + tdRect.bottom) / 2 && isTdNotAboveMerged
                                     ? tdAbove
@@ -175,7 +175,7 @@ export class TableEditor {
                         this.setInserterTd(null);
                     }
 
-                    !this.disableFeatures?.includes('CellResizer') && this.setResizingTd(td);
+                    !this.isFeatureDisabled('CellResizer') && this.setResizingTd(td);
 
                     //Cell found
                     break;
@@ -192,22 +192,24 @@ export class TableEditor {
     }
 
     private setEditorFeatures() {
-        const disableSelector = this.disableFeatures?.includes('TableSelector');
-        const disableMovement = this.disableFeatures?.includes('TableMover');
+        const disableSelector = this.isFeatureDisabled('TableSelector');
+        const disableMovement = this.isFeatureDisabled('TableMover');
         if (!this.tableMover && !(disableSelector && disableMovement)) {
             this.tableMover = createTableMover(
                 this.table,
                 this.editor,
                 this.isRTL,
                 disableSelector ? () => {} : this.onSelect,
+                this.onStartTableMove,
+                this.onEndTableMove,
                 this.contentDiv,
                 this.anchorContainer,
                 this.onEditorCreated,
                 disableMovement
             );
         }
 
-        if (!this.tableResizer && !this.disableFeatures?.includes('TableResizer')) {
+        if (!this.tableResizer && !this.isFeatureDisabled('TableResizer')) {
             this.tableResizer = createTableResizer(
                 this.table,
                 this.editor,
@@ -355,6 +357,13 @@ export class TableEditor {
         this.onStartResize();
     };
 
+    private onStartTableMove = () => {
+        this.isCurrentlyEditing = true;
+        this.disposeTableResizer();
+        this.disposeTableInserter();
+        this.disposeCellResizers();
+    };
+
     private onStartResize() {
         this.isCurrentlyEditing = true;
         const range = this.editor.getDOMSelection();
@@ -366,6 +375,11 @@ export class TableEditor {
         this.editor.takeSnapshot();
     }
 
+    private onEndTableMove = () => {
+        this.disposeTableMover();
+        return this.onFinishEditing();
+    };
+
     private onInserted = () => {
         this.disposeTableResizer();
         this.onFinishEditing();
@@ -400,10 +414,15 @@ export class TableEditor {
                 ev.relatedTarget != feature &&
                 isNodeOfType(this.contentDiv as Node, 'ELEMENT_NODE') &&
                 isNodeOfType(ev.relatedTarget as Node, 'ELEMENT_NODE') &&
-                !(this.contentDiv == ev.relatedTarget)
+                !(this.contentDiv == ev.relatedTarget) &&
+                !this.isEditing()
             ) {
                 this.dispose();
             }
         };
     };
+
+    private isFeatureDisabled(feature: TableEditFeatureName) {
+        return this.disableFeatures?.includes(feature);
+    }
 }