diff --git a/packages/roosterjs-content-model-dom/lib/formatHandlers/block/paddingFormatHandler.ts b/packages/roosterjs-content-model-dom/lib/formatHandlers/block/paddingFormatHandler.ts index 11a06d48c61..5ed8cefefe2 100644 --- a/packages/roosterjs-content-model-dom/lib/formatHandlers/block/paddingFormatHandler.ts +++ b/packages/roosterjs-content-model-dom/lib/formatHandlers/block/paddingFormatHandler.ts @@ -2,7 +2,7 @@ import { directionFormatHandler } from './directionFormatHandler'; import type { FormatHandler } from '../FormatHandler'; import type { DirectionFormat, PaddingFormat } from 'roosterjs-content-model-types'; -export const PaddingKeys: (keyof PaddingFormat & keyof CSSStyleDeclaration)[] = [ +const PaddingKeys: (keyof PaddingFormat & keyof CSSStyleDeclaration)[] = [ 'paddingTop', 'paddingRight', 'paddingBottom', @@ -54,11 +54,19 @@ export const paddingFormatHandler: FormatHandler { + const tagName = element.tagName; + const isTableCell = tagName == 'TD' || tagName == 'TH'; + const isList = tagName == 'OL' || tagName == 'UL'; + + if (context.tableFormat?.alreadyWroteCellPadding && isTableCell) { + return; + } + PaddingKeys.forEach(key => { - const value = format[key]; + let value = format[key]; let defaultValue: string | undefined = undefined; - if (element.tagName == 'OL' || element.tagName == 'UL') { + if (isList) { if ( (format.direction == 'rtl' && key == 'paddingRight') || (format.direction != 'rtl' && key == 'paddingLeft') diff --git a/packages/roosterjs-content-model-dom/lib/formatHandlers/defaultFormatHandlers.ts b/packages/roosterjs-content-model-dom/lib/formatHandlers/defaultFormatHandlers.ts index 15ed34b7375..4d2ac993d31 100644 --- a/packages/roosterjs-content-model-dom/lib/formatHandlers/defaultFormatHandlers.ts +++ b/packages/roosterjs-content-model-dom/lib/formatHandlers/defaultFormatHandlers.ts @@ -25,7 +25,6 @@ import { paddingFormatHandler } from './block/paddingFormatHandler'; import { sizeFormatHandler } from './common/sizeFormatHandler'; import { strikeFormatHandler } from './segment/strikeFormatHandler'; import { superOrSubScriptFormatHandler } from './segment/superOrSubScriptFormatHandler'; -import { tableCellPaddingFormatHandler } from './table/tableCellPaddingFormatHandler'; import { tableLayoutFormatHandler } from './table/tableLayoutFormatHandler'; import { tableSpacingFormatHandler } from './table/tableSpacingFormatHandler'; import { textAlignFormatHandler } from './block/textAlignFormatHandler'; @@ -80,7 +79,6 @@ const defaultFormatHandlerMap: FormatHandlers = { superOrSubScript: superOrSubScriptFormatHandler, tableLayout: tableLayoutFormatHandler, tableSpacing: tableSpacingFormatHandler, - tableCellPadding: tableCellPaddingFormatHandler, textAlign: textAlignFormatHandler, textColor: textColorFormatHandler, textColorOnTableCell: textColorOnTableCellFormatHandler, @@ -154,7 +152,6 @@ export const defaultFormatKeysPerCategory: { tableCell: [ 'border', 'backgroundColor', - 'tableCellPadding', 'padding', 'verticalAlign', 'wordBreak', diff --git a/packages/roosterjs-content-model-dom/lib/formatHandlers/table/tableCellPaddingFormatHandler.ts b/packages/roosterjs-content-model-dom/lib/formatHandlers/table/tableCellPaddingFormatHandler.ts deleted file mode 100644 index 360573b6969..00000000000 --- a/packages/roosterjs-content-model-dom/lib/formatHandlers/table/tableCellPaddingFormatHandler.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { PaddingKeys } from '../block/paddingFormatHandler'; -import type { FormatHandler } from '../FormatHandler'; -import type { SpacingFormat } from 'roosterjs-content-model-types'; - -/** - * @internal - */ -export const tableCellPaddingFormatHandler: FormatHandler = { - parse: () => {}, - apply: (_format, element, context) => { - const cellPadding = context.tableFormat?.cellPadding; - if (cellPadding) { - const padding = cellPadding.concat(cellPadding.endsWith('%') ? '' : 'px'); - PaddingKeys.forEach(key => { - element.style[key] = padding; - }); - } - }, -}; diff --git a/packages/roosterjs-content-model-dom/lib/formatHandlers/table/tableSpacingFormatHandler.ts b/packages/roosterjs-content-model-dom/lib/formatHandlers/table/tableSpacingFormatHandler.ts index 0debfc06b76..ac02119833a 100644 --- a/packages/roosterjs-content-model-dom/lib/formatHandlers/table/tableSpacingFormatHandler.ts +++ b/packages/roosterjs-content-model-dom/lib/formatHandlers/table/tableSpacingFormatHandler.ts @@ -1,3 +1,4 @@ +import { isElementOfType } from '../../domUtils/isElementOfType'; import type { FormatHandler } from '../FormatHandler'; import type { SpacingFormat } from 'roosterjs-content-model-types'; @@ -47,9 +48,8 @@ export const tableSpacingFormatHandler: FormatHandler = { element.style.borderSpacing = cellSpacing; } - if (!context.tableFormat) { - context.tableFormat = {}; + if (format.cellPadding && isElementOfType(element, 'table')) { + element.cellPadding = format.cellPadding; } - context.tableFormat.cellPadding = format.cellPadding; }, }; diff --git a/packages/roosterjs-content-model-dom/lib/modelToDom/handlers/handleTable.ts b/packages/roosterjs-content-model-dom/lib/modelToDom/handlers/handleTable.ts index 3ef69356713..cc49a9d4061 100644 --- a/packages/roosterjs-content-model-dom/lib/modelToDom/handlers/handleTable.ts +++ b/packages/roosterjs-content-model-dom/lib/modelToDom/handlers/handleTable.ts @@ -46,6 +46,14 @@ export const handleTable: ContentModelBlockHandler = ( applyFormat(tableNode, context.formatAppliers.table, table.format, context); applyFormat(tableNode, context.formatAppliers.tableBorder, table.format, context); applyFormat(tableNode, context.formatAppliers.dataset, table.dataset, context); + + if (!tableNode.cellPadding) { + const cellPadding = getSameCellPadding(table); + if (cellPadding) { + tableNode.cellPadding = cellPadding; + context.tableFormat.alreadyWroteCellPadding = true; + } + } } context.onNodeCreated?.(table, tableNode); @@ -156,3 +164,35 @@ export const handleTable: ContentModelBlockHandler = ( return refNode; }; + +function getSameCellPadding(table: ContentModelTable) { + let cellPadding: string | undefined; + + const firstCell = table.rows[0]?.cells[0]; + const { paddingBottom, paddingLeft, paddingRight, paddingTop } = firstCell.format; + + if ( + paddingBottom == paddingLeft && + paddingBottom == paddingRight && + paddingBottom == paddingTop + ) { + cellPadding = paddingBottom; + } + + if ( + cellPadding && + table.rows.every(row => + row.cells.every( + cell => + cell.format.paddingBottom == cellPadding && + cell.format.paddingLeft == cellPadding && + cell.format.paddingRight == cellPadding && + cell.format.paddingTop == cellPadding + ) + ) + ) { + return cellPadding.match(/\d+/)?.[0]; + } + + return undefined; +} diff --git a/packages/roosterjs-content-model-types/lib/contentModel/format/FormatHandlerTypeMap.ts b/packages/roosterjs-content-model-types/lib/contentModel/format/FormatHandlerTypeMap.ts index 2032ea45776..d8c851be670 100644 --- a/packages/roosterjs-content-model-types/lib/contentModel/format/FormatHandlerTypeMap.ts +++ b/packages/roosterjs-content-model-types/lib/contentModel/format/FormatHandlerTypeMap.ts @@ -177,11 +177,6 @@ export interface FormatHandlerTypeMap { */ tableSpacing: SpacingFormat; - /** - * Table padding - */ - tableCellPadding: SpacingFormat; - /** * Format for TextAlignFormat */ diff --git a/packages/roosterjs-content-model-types/lib/context/ModelToDomFormatContext.ts b/packages/roosterjs-content-model-types/lib/context/ModelToDomFormatContext.ts index c70bb527ef2..6056cc986ce 100644 --- a/packages/roosterjs-content-model-types/lib/context/ModelToDomFormatContext.ts +++ b/packages/roosterjs-content-model-types/lib/context/ModelToDomFormatContext.ts @@ -32,11 +32,10 @@ export interface ModelToDomListContext { */ export interface ModelToDomTableFormatContext { /** - * This property holds the cellpadding attribute set in the table. - * And then it is used to set the padding property in each of the table cells. - * We do this as the cellpadding attribute in the table is deprecated. + * When true, it means that the padding of the inner cells of the table should not be set. + * As the value of all the inner cells padding is the same. So the cellpadding attribute was set in the table */ - cellPadding?: string; + alreadyWroteCellPadding?: boolean; } /**