From 68bfc3388f6b4e8b5dfc02c35c5b41089a248a4f Mon Sep 17 00:00:00 2001 From: Andres-CT98 <107568016+Andres-CT98@users.noreply.github.com> Date: Tue, 4 Jun 2024 15:56:04 -0600 Subject: [PATCH] Fix cell resizer normalisation (#2678) * export min height * only normalise height * move undefined check * fix table and cell resizer * use Math.max --- .../roosterjs-content-model-dom/lib/index.ts | 6 +++++- .../lib/modelApi/editing/normalizeTable.ts | 9 ++++++--- .../tableEdit/editors/features/CellResizer.ts | 20 ++++++++++--------- .../editors/features/TableResizer.ts | 16 +++++++++------ 4 files changed, 32 insertions(+), 19 deletions(-) diff --git a/packages/roosterjs-content-model-dom/lib/index.ts b/packages/roosterjs-content-model-dom/lib/index.ts index 00eaa77bd95..f10c7245898 100644 --- 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 index 1fd69175cf6..fc96d72af64 100644 --- 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 index 8bf50431012..fa2d8f79e0c 100644 --- 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 index 144af8ea229..af2e67f0ba3 100644 --- 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;