Table Row/Column Selector

packages/roosterjs-content-model-plugins/lib/tableEdit/editors/TableEditor.ts

@@ -2,6 +2,7 @@ import { createCellResizer } from './features/CellResizer';
 import { createTableInserter } from './features/TableInserter';
 import { createTableMover } from './features/TableMover';
 import { createTableResizer } from './features/TableResizer';
+import { createTableRowColumnSelector } from './features/TableRowColumnSelector';
 import { disposeTableEditFeature } from './features/TableEditFeature';
 import { isNodeOfType, normalizeRect, parseTableCells } from 'roosterjs-content-model-dom';
 import type { OnTableEditorCreatedCallback } from '../OnTableEditorCreatedCallback';
@@ -58,6 +59,10 @@ export class TableEditor {
     // 6 - Move as well as select whole table
     private tableMover: TableEditFeature | null = null;
 
+    // 7 - Select whole column or row
+    private tableColumnSelector: TableEditFeature | null = null;
+    private tableRowSelector: TableEditFeature | null = null;
+
     private isRTL: boolean;
     private range: Range | null = null;
     private isCurrentlyEditing: boolean;
@@ -82,6 +87,7 @@ export class TableEditor {
         this.disposeCellResizers();
         this.disposeTableInserter();
         this.disposeTableMover();
+        this.disposeTableSelector();
     }
 
     isEditing(): boolean {
@@ -96,11 +102,12 @@ export class TableEditor {
             this.verticalInserter,
             this.horizontalResizer,
             this.verticalResizer,
+            this.tableColumnSelector,
+            this.tableRowSelector,
         ]
             .filter(feature => !!feature?.div)
-            .some(feature => feature?.div == node);
+            .some(feature => feature?.div == node || (feature?.div && feature.div.contains(node)));
     }
-
     /**
      * public only for testing purposes
      */
@@ -191,6 +198,16 @@ export class TableEditor {
             }
         }
 
+        if (topOrSide == TOP_OR_SIDE.top) {
+            !this.isFeatureDisabled('TableColumnSelector') &&
+                this.setSelectorRowColumn(false /*isRow*/);
+        } else if (topOrSide == TOP_OR_SIDE.side) {
+            !this.isFeatureDisabled('TableRowSelector') &&
+                this.setSelectorRowColumn(true /*isRow*/);
+        } else {
+            this.setSelectorRowColumn(null);
+        }
+
         // Create Mover and Resizer
         this.setEditorFeatures();
     }
@@ -303,6 +320,20 @@ export class TableEditor {
         }
     }
 
+    private setSelectorRowColumn(isRowSelector: boolean | null /*undefined means to clear both*/) {
+        if (isRowSelector !== null && !this.tableRowSelector && !this.tableColumnSelector) {
+            this.tableRowSelector = createTableRowColumnSelector(
+                this.editor,
+                this.table,
+                !!isRowSelector,
+                this.anchorContainer,
+                this.onEditorCreated
+            );
+        } else {
+            this.disposeTableSelector();
+        }
+    }
+
     private disposeTableResizer() {
         if (this.tableResizer) {
             disposeTableEditFeature(this.tableResizer);
@@ -321,6 +352,17 @@ export class TableEditor {
         }
     }
 
+    private disposeTableSelector() {
+        if (this.tableColumnSelector) {
+            disposeTableEditFeature(this.tableColumnSelector);
+            this.tableColumnSelector = null;
+        }
+        if (this.tableRowSelector) {
+            disposeTableEditFeature(this.tableRowSelector);
+            this.tableRowSelector = null;
+        }
+    }
+
     private disposeCellResizers() {
         if (this.horizontalResizer) {
             disposeTableEditFeature(this.horizontalResizer);
@@ -371,6 +413,7 @@ export class TableEditor {
         this.disposeTableResizer();
         this.disposeTableInserter();
         this.disposeCellResizers();
+        this.disposeTableSelector();
     };
 
     private onStartResize() {

packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableEditFeatureName.ts

@@ -7,4 +7,6 @@ export type TableEditFeatureName =
     | 'TableMover'
     | 'TableResizer'
     | 'TableSelector'
-    | 'CellResizer';
+    | 'CellResizer'
+    | 'TableRowSelector'
+    | 'TableColumnSelector';