Merge pull request #2091 from microsoft/u/juliaroldi/background-table

Fix text color in in cells with shade.
microsoft · Sep 22, 2023 · 0e6ac85 · 0e6ac85
2 parents 31fa011 + 3d640fa
commit 0e6ac85
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 10 deletions.
diff --git a/packages-content-model/roosterjs-content-model-editor/lib/modelApi/table/applyTableFormat.ts b/packages-content-model/roosterjs-content-model-editor/lib/modelApi/table/applyTableFormat.ts
@@ -206,7 +206,12 @@ function formatCells(
                             : bgColorEven
                         : bgColorEven; /* bgColorEven is the default color */
 
-                setTableCellBackgroundColor(cell, color);
+                setTableCellBackgroundColor(
+                    cell,
+                    color,
+                    false /*isColorOverride*/,
+                    true /*applyToSegments*/
+                );
             }
 
             // Format Vertical Align
@@ -229,7 +234,12 @@ function setFirstColumnFormat(
 
                 if (rowIndex !== 0 && !metaOverrides.bgColorOverrides[rowIndex][cellIndex]) {
                     setBorderColor(cell.format, 'borderTop');
-                    setTableCellBackgroundColor(cell, null /*color*/);
+                    setTableCellBackgroundColor(
+                        cell,
+                        null /*color*/,
+                        false /*isColorOverride*/,
+                        true /*applyToSegments*/
+                    );
                 }
 
                 if (rowIndex !== rows.length - 1 && rowIndex !== 0) {
@@ -254,7 +264,12 @@ function setHeaderRowFormat(
 
         if (format.hasHeaderRow && format.headerRowColor) {
             if (!metaOverrides.bgColorOverrides[rowIndex][cellIndex]) {
-                setTableCellBackgroundColor(cell, format.headerRowColor);
+                setTableCellBackgroundColor(
+                    cell,
+                    format.headerRowColor,
+                    false /*isColorOverride*/,
+                    true /*applyToSegments*/
+                );
             }
 
             setBorderColor(cell.format, 'borderTop', format.headerRowColor);

diff --git a/packages-content-model/roosterjs-content-model-editor/lib/modelApi/table/normalizeTable.ts b/packages-content-model/roosterjs-content-model-editor/lib/modelApi/table/normalizeTable.ts
@@ -30,15 +30,17 @@ export function normalizeTable(
     table.rows.forEach((row, rowIndex) => {
         row.cells.forEach((cell, colIndex) => {
             if (cell.blocks.length == 0) {
+                const format = cell.format.textColor
+                    ? {
+                          ...defaultSegmentFormat,
+                          textColor: cell.format.textColor,
+                      }
+                    : defaultSegmentFormat;
                 addBlock(
                     cell,
-                    createParagraph(
-                        undefined /*isImplicit*/,
-                        undefined /*blockFormat*/,
-                        defaultSegmentFormat
-                    )
+                    createParagraph(undefined /*isImplicit*/, undefined /*blockFormat*/, format)
                 );
-                addSegment(cell, createBr(defaultSegmentFormat));
+                addSegment(cell, createBr(format));
             }
 
             if (rowIndex == 0) {

diff --git a/...nt-model/roosterjs-content-model-editor/lib/modelApi/table/setTableCellBackgroundColor.ts b/...nt-model/roosterjs-content-model-editor/lib/modelApi/table/setTableCellBackgroundColor.ts
@@ -16,7 +16,8 @@ const Black = '#000000';
 export function setTableCellBackgroundColor(
     cell: ContentModelTableCell,
     color: string | null | undefined,
-    isColorOverride?: boolean
+    isColorOverride?: boolean,
+    applyToSegments?: boolean
 ) {
     if (color) {
         cell.format.backgroundColor = color;
@@ -38,6 +39,23 @@ export function setTableCellBackgroundColor(
         } else {
             delete cell.format.textColor;
         }
+
+        if (applyToSegments && cell.format.textColor) {
+            cell.blocks.forEach(block => {
+                if (block.blockType == 'Paragraph') {
+                    block.segmentFormat = {
+                        ...block.segmentFormat,
+                        textColor: cell.format.textColor,
+                    };
+                    block.segments.forEach(segment => {
+                        segment.format = {
+                            ...segment.format,
+                            textColor: cell.format.textColor,
+                        };
+                    });
+                }
+            });
+        }
     } else {
         delete cell.format.backgroundColor;
         delete cell.format.textColor;