Skip to content

Commit

Permalink
Merge pull request #2225 from microsoft/u/julairoldi/fix-table-header…
Browse files Browse the repository at this point in the history 
…-color

Remove table format
  • Loading branch information
@juliaroldi
juliaroldi authored Nov 29, 2023
2 parents 6b02a3d + 2900d67 commit e03f3db
Show file tree
Hide file tree
Showing 2 changed files with 186 additions and 12 deletions.
77 changes: 65 additions & 12 deletions ...ent-model/roosterjs-content-model-core/lib/publicApi/table/setTableCellBackgroundColor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,28 +43,81 @@ export function setTableCellBackgroundColor(
delete cell.format.textColor;
}

if (applyToSegments && cell.format.textColor) {
cell.blocks.forEach(block => {
if (block.blockType == 'Paragraph') {
if (applyToSegments) {
setAdaptiveCellColor(cell);
}
} else {
delete cell.format.backgroundColor;
delete cell.format.textColor;
if (applyToSegments) {
removeAdaptiveCellColor(cell);
}
}

delete cell.cachedElement;
}

function removeAdaptiveCellColor(cell: ContentModelTableCell) {
cell.blocks.forEach(block => {
if (block.blockType == 'Paragraph') {
if (
block.segmentFormat?.textColor &&
shouldRemoveColor(block.segmentFormat?.textColor, cell.format.backgroundColor || '')
) {
delete block.segmentFormat.textColor;
}
block.segments.forEach(segment => {
if (
segment.format.textColor &&
shouldRemoveColor(segment.format.textColor, cell.format.backgroundColor || '')
) {
delete segment.format.textColor;
}
});
}
});
}

function setAdaptiveCellColor(cell: ContentModelTableCell) {
if (cell.format.textColor) {
cell.blocks.forEach(block => {
if (block.blockType == 'Paragraph') {
if (!block.segmentFormat?.textColor) {
block.segmentFormat = {
...block.segmentFormat,
textColor: cell.format.textColor,
};
block.segments.forEach(segment => {
}
block.segments.forEach(segment => {
if (!segment.format?.textColor) {
segment.format = {
...segment.format,
textColor: cell.format.textColor,
};
});
}
});
}
} else {
delete cell.format.backgroundColor;
delete cell.format.textColor;
}
});
}
});
}
}

delete cell.cachedElement;
/**
* If the cell background color is too dark or too bright, and the text color is white or black, we should remove the text color
* @param textColor the segment or block text color
* @param cellBackgroundColor the cell background color
* @returns
*/
function shouldRemoveColor(textColor: string, cellBackgroundColor: string) {
const lightness = calculateLightness(cellBackgroundColor);
if (
([White, 'rgb(255,255,255)'].indexOf(textColor) > -1 &&
(lightness > BRIGHT_COLORS_LIGHTNESS || cellBackgroundColor == '')) ||
([Black, 'rgb(0,0,0)'].indexOf(textColor) > -1 &&
(lightness < DARK_COLORS_LIGHTNESS || cellBackgroundColor == ''))
) {
return true;
}
return false;
}

function calculateLightness(color: string) {
Expand Down
121 changes: 121 additions & 0 deletions ...s-content-model/roosterjs-content-model-core/test/publicApi/table/applyTableFormatTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -486,6 +486,7 @@ describe('applyTableFormat', () => {
expect(table.rows[0].cells[0].format.backgroundColor).toBe('blue');
expect(table.rows[0].cells[0].dataset.editingInfo).toBe('{"bgColorOverride":true}');
});

it('Has borderOverride', () => {
const table = createTable(1, 1);
table.rows[0].cells[0].format.borderLeft = '1px solid red';
Expand All @@ -510,4 +511,124 @@ describe('applyTableFormat', () => {
expect(table.rows[0].cells[0].format.borderTop).toBe('1px solid green');
expect(table.rows[0].cells[0].dataset.editingInfo).toBe('{"borderOverride":true}');
});

it('Adaptive text color', () => {
const table = createTable(1, 1);

const format: TableMetadataFormat = {
topBorderColor: '#000000',
bottomBorderColor: '#000000',
verticalBorderColor: '#000000',
hasHeaderRow: false,
hasFirstColumn: false,
hasBandedRows: false,
hasBandedColumns: false,
bgColorEven: null,
bgColorOdd: '#00000020',
headerRowColor: '#000000',
tableBorderFormat: TableBorderFormat.Default,
verticalAlign: null,
};

// Try to apply default format black
applyTableFormat(table, format);

//apply HeaderRowColor
applyTableFormat(table, { ...format, hasHeaderRow: true });

//expect HeaderRowColor text color to be applied
table.rows[0].cells[0].blocks.forEach(block => {
if (block.blockType == 'Paragraph') {
expect(block.segmentFormat?.textColor).toBe('#ffffff');
block.segments.forEach(segment => {
expect(segment.format?.textColor).toBe('#ffffff');
});
}
});
});

it(' Should not set adaptive text color', () => {
const table = createTable(1, 1);
table.rows[0].cells[0].blocks.forEach(block => {
if (block.blockType == 'Paragraph') {
block.segmentFormat = {
textColor: '#ABABAB',
};
block.segments.forEach(segment => {
segment.format = {
textColor: '#ABABAB',
};
});
}
});

const format: TableMetadataFormat = {
topBorderColor: '#000000',
bottomBorderColor: '#000000',
verticalBorderColor: '#000000',
hasHeaderRow: false,
hasFirstColumn: false,
hasBandedRows: false,
hasBandedColumns: false,
bgColorEven: null,
bgColorOdd: '#00000020',
headerRowColor: '#000000',
tableBorderFormat: TableBorderFormat.Default,
verticalAlign: null,
};

// Try to apply default format black
applyTableFormat(table, format);

//apply HeaderRowColor
applyTableFormat(table, { ...format, hasHeaderRow: true });

//expect HeaderRowColor text color to be applied
table.rows[0].cells[0].blocks.forEach(block => {
if (block.blockType == 'Paragraph') {
expect(block.segmentFormat?.textColor).toBe('#ABABAB');
block.segments.forEach(segment => {
expect(segment.format?.textColor).toBe('#ABABAB');
});
}
});
});

it('Remove adaptive text color', () => {
const table = createTable(1, 1);

const format: TableMetadataFormat = {
topBorderColor: '#000000',
bottomBorderColor: '#000000',
verticalBorderColor: '#000000',
hasHeaderRow: false,
hasFirstColumn: false,
hasBandedRows: false,
hasBandedColumns: false,
bgColorEven: null,
bgColorOdd: '#00000020',
headerRowColor: '#000000',
tableBorderFormat: TableBorderFormat.Default,
verticalAlign: null,
};

// Try to apply default format black
applyTableFormat(table, format);

//apply HeaderRowColor
applyTableFormat(table, { ...format, hasHeaderRow: true });

//Toggle HeaderRowColor
applyTableFormat(table, { ...format, hasHeaderRow: false });

//expect HeaderRowColor text color to be applied
table.rows[0].cells[0].blocks.forEach(block => {
if (block.blockType == 'Paragraph') {
expect(block.segmentFormat?.textColor).toBe(undefined);
block.segments.forEach(segment => {
expect(segment.format?.textColor).toBe(undefined);
});
}
});
});
});

0 comments on commit e03f3db

Please sign in to comment.