add more changes

microsoft · Oct 1, 2024 · 8d69b03 · 8d69b03
1 parent 40db8f8
commit 8d69b03
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 37 deletions.
diff --git 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<PaddingFormat & DirectionFormat
         });
     },
     apply: (format, element, context) => {
+        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
@@ -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/...ges/roosterjs-content-model-dom/lib/formatHandlers/table/tableCellPaddingFormatHandler.ts b/...ges/roosterjs-content-model-dom/lib/formatHandlers/table/tableCellPaddingFormatHandler.ts
diff --git 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<SpacingFormat> = {
             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
@@ -46,6 +46,14 @@ export const handleTable: ContentModelBlockHandler<ContentModelTable> = (
         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<ContentModelTable> = (
 
     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
@@ -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
@@ -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;
 }
 
 /**