Fix resize table with width (#2940)

* Fix resize table with width * fix test
microsoft · Feb 7, 2025 · 6388b93 · 6388b93
1 parent 9dbe329
commit 6388b93
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
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
@@ -8,6 +8,7 @@ import {
     MIN_ALLOWED_TABLE_CELL_WIDTH,
     mutateBlock,
     MIN_ALLOWED_TABLE_CELL_HEIGHT,
+    parseValueWithUnit,
 } from 'roosterjs-content-model-dom';
 import type { DragAndDropHandler } from '../../../pluginUtils/DragAndDrop/DragAndDropHandler';
 import type { IEditor, ReadonlyContentModelTable } from 'roosterjs-content-model-types';
@@ -46,7 +47,15 @@ export function createCellResizer(
 
     (anchorContainer || document.body).appendChild(div);
 
-    const context: CellResizerContext = { editor, td, table, isRTL, zoomScale, onStart };
+    const context: CellResizerContext = {
+        editor,
+        td,
+        table,
+        isRTL,
+        zoomScale,
+        onStart,
+        originalWidth: parseValueWithUnit(table.style.width),
+    };
     const setPosition = isHorizontal ? setHorizontalPosition : setVerticalPosition;
     setPosition(context, div);
 
@@ -79,6 +88,7 @@ export interface CellResizerContext {
     table: HTMLTableElement;
     isRTL: boolean;
     zoomScale: number;
+    originalWidth: number;
     onStart: () => void;
 }
 
@@ -230,6 +240,13 @@ export function onDraggingVertical(
             }
         }
 
+        if (context.originalWidth > 0) {
+            const newWidth = context.originalWidth + change + 'px';
+
+            mutableTable.format.width = newWidth;
+            table.style.width = newWidth;
+        }
+
         return true;
     } else {
         return false;

diff --git a/packages/roosterjs-content-model-plugins/test/tableEdit/cellResizerTest.ts b/packages/roosterjs-content-model-plugins/test/tableEdit/cellResizerTest.ts
@@ -69,6 +69,7 @@ describe('Cell Resizer tests', () => {
             isRTL: false,
             zoomScale: 1,
             onStart: onStartSpy,
+            originalWidth: 0,
         };
         const editorCMTable = getCMTableFromTable(editor, target as HTMLTableElement);
 
@@ -119,6 +120,7 @@ describe('Cell Resizer tests', () => {
                 isRTL: false,
                 zoomScale: 1,
                 onStart: onStartSpy,
+                originalWidth: 0,
             };
             const delta = 10 * growth;
             const beforeHeight = getCurrentTable(editor).rows[cellRow].getBoundingClientRect()
@@ -194,6 +196,7 @@ describe('Cell Resizer tests', () => {
                 isRTL: false,
                 zoomScale: 1,
                 onStart: onStartSpy,
+                originalWidth: 0,
             };
             const delta = 10 * growth;
             const beforeWidth = getCurrentTable(editor).rows[cellRow].cells[