Fix cell resizer normalisation (#2678)

* export min height * only normalise height * move undefined check * fix table and cell resizer * use Math.max
microsoft · Jun 4, 2024 · 68bfc33 · 68bfc33
1 parent db8e2da
commit 68bfc33
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 19 deletions.
diff --git a/packages/roosterjs-content-model-dom/lib/index.ts b/packages/roosterjs-content-model-dom/lib/index.ts
@@ -125,7 +125,11 @@ export { deleteSelection } from './modelApi/editing/deleteSelection';
 export { deleteSegment } from './modelApi/editing/deleteSegment';
 export { deleteBlock } from './modelApi/editing/deleteBlock';
 export { applyTableFormat, setFirstColumnFormatBorders } from './modelApi/editing/applyTableFormat';
-export { normalizeTable, MIN_ALLOWED_TABLE_CELL_WIDTH } from './modelApi/editing/normalizeTable';
+export {
+    normalizeTable,
+    MIN_ALLOWED_TABLE_CELL_WIDTH,
+    MIN_ALLOWED_TABLE_CELL_HEIGHT,
+} from './modelApi/editing/normalizeTable';
 export { setTableCellBackgroundColor } from './modelApi/editing/setTableCellBackgroundColor';
 export { retrieveModelFormatState } from './modelApi/editing/retrieveModelFormatState';
 export { getListStyleTypeFromString } from './modelApi/editing/getListStyleTypeFromString';

diff --git a/packages/roosterjs-content-model-dom/lib/modelApi/editing/normalizeTable.ts b/packages/roosterjs-content-model-dom/lib/modelApi/editing/normalizeTable.ts
@@ -14,7 +14,10 @@ import type {
  * Minimum width for a table cell
  */
 export const MIN_ALLOWED_TABLE_CELL_WIDTH: number = 30;
-const MIN_HEIGHT = 22;
+/**
+ * Minimum height for a table cell
+ */
+export const MIN_ALLOWED_TABLE_CELL_HEIGHT: number = 22;
 
 /**
  * Normalize a Content Model table, make sure:
@@ -76,8 +79,8 @@ export function normalizeTable(
         });
 
         // Make sure table has correct width and height array
-        if (row.height < MIN_HEIGHT) {
-            row.height = MIN_HEIGHT;
+        if (row.height < MIN_ALLOWED_TABLE_CELL_HEIGHT) {
+            row.height = MIN_ALLOWED_TABLE_CELL_HEIGHT;
         }
     });
 

diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts
@@ -6,8 +6,8 @@ import {
     isElementOfType,
     normalizeRect,
     MIN_ALLOWED_TABLE_CELL_WIDTH,
-    normalizeTable,
     mutateBlock,
+    MIN_ALLOWED_TABLE_CELL_HEIGHT,
 } from 'roosterjs-content-model-dom';
 import type { DragAndDropHandler } from '../../../pluginUtils/DragAndDrop/DragAndDropHandler';
 import type { IEditor, ReadonlyContentModelTable } from 'roosterjs-content-model-types';
@@ -159,18 +159,18 @@ export function onDraggingHorizontal(
     const { cmTable, anchorRow, anchorRowHeight } = initValue;
 
     // Assign new widths and heights to the CM table
-    if (cmTable && anchorRow != undefined) {
+    if (cmTable && anchorRow != undefined && cmTable.rows[anchorRow] != undefined) {
         // Modify the CM Table size
         mutateBlock(cmTable).rows[anchorRow].height = (anchorRowHeight ?? 0) + deltaY;
 
-        // Normalize the table
-        normalizeTable(cmTable);
+        // Normalize the new height value
+        const newHeight = Math.max(cmTable.rows[anchorRow].height, MIN_ALLOWED_TABLE_CELL_HEIGHT);
 
         // Writeback CM Table size changes to DOM Table
         const tableRow = table.rows[anchorRow];
         for (let col = 0; col < tableRow.cells.length; col++) {
             const td = tableRow.cells[col];
-            td.style.height = cmTable.rows[anchorRow].height + 'px';
+            td.style.height = newHeight + 'px';
         }
 
         return true;
@@ -202,7 +202,12 @@ export function onDraggingVertical(
         // This is the last column
         if (lastColumn) {
             // Only the last column changes
-            mutableTable.widths[anchorColumn] = allWidths[anchorColumn] + change;
+            // Normalize the new width value
+            const newWidth = Math.max(
+                allWidths[anchorColumn] + change,
+                MIN_ALLOWED_TABLE_CELL_WIDTH
+            );
+            mutableTable.widths[anchorColumn] = newWidth;
         } else {
             // Any other two columns
             const anchorChange = allWidths[anchorColumn] + change;
@@ -217,9 +222,6 @@ export function onDraggingVertical(
             mutableTable.widths[anchorColumn + 1] = nextAnchorChange;
         }
 
-        // Normalize the table
-        normalizeTable(cmTable);
-
         // Writeback CM Table size changes to DOM Table
         for (let row = 0; row < table.rows.length; row++) {
             const tableRow = table.rows[row];

diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts
@@ -2,10 +2,10 @@ import { createElement } from '../../../pluginUtils/CreateElement/createElement'
 import { DragAndDropHelper } from '../../../pluginUtils/DragAndDrop/DragAndDropHelper';
 import { getCMTableFromTable } from '../utils/getTableFromContentModel';
 import {
+    MIN_ALLOWED_TABLE_CELL_HEIGHT,
     isNodeOfType,
     mutateBlock,
     normalizeRect,
-    normalizeTable,
 } from 'roosterjs-content-model-dom';
 import type { TableEditFeature } from './TableEditFeature';
 import type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';
@@ -209,9 +209,6 @@ export function onDragging(
             }
         }
 
-        // Normalize the table
-        normalizeTable(cmTable);
-
         // Writeback CM Table size changes to DOM Table
         for (let row = 0; row < table.rows.length; row++) {
             const tableRow = table.rows[row];
@@ -221,10 +218,17 @@ export function onDragging(
                 continue;
             }
 
+            // Normalize the new height value
+            const newHeight = Math.max(cmTable.rows[row].height, MIN_ALLOWED_TABLE_CELL_HEIGHT);
+
             for (let col = 0; col < tableRow.cells.length; col++) {
                 const td = tableRow.cells[col];
-                td.style.width = cmTable.widths[col] + 'px';
-                td.style.height = cmTable.rows[row].height + 'px';
+
+                // Normalize the new width value
+                const newWidth = Math.max(cmTable.widths[col], MIN_ALLOWED_TABLE_CELL_HEIGHT);
+
+                td.style.width = newWidth + 'px';
+                td.style.height = newHeight + 'px';
             }
         }
         return true;