Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove table format #2225

Merged
merged 8 commits into from
Nov 29, 2023
+186 −12
Merged

Remove table format #2225

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f74149b
apply table format fix
juliaroldi Nov 24, 2023
7dce8ed
remove console.log
juliaroldi Nov 24, 2023
34519c3
fix comments
juliaroldi Nov 27, 2023
453c6e1
test
juliaroldi Nov 28, 2023
6c07965
add color spectrum check
juliaroldi Nov 29, 2023
263e6eb
remove empty line
juliaroldi Nov 29, 2023
82b1b5d
Merge branch 'master' into u/julairoldi/fix-table-header-color
juliaroldi Nov 29, 2023
2900d67
Merge branch 'master' into u/julairoldi/fix-table-header-color
juliaroldi Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 66 additions & 12 deletions ...ent-model/roosterjs-content-model-core/lib/publicApi/table/setTableCellBackgroundColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ const Black = '#000000';
* @param color The color to set
* @param isColorOverride @optional When pass true, it means this shade color is not part of table format, so it can be preserved when apply table format
* @param applyToSegments @optional When pass true, we will also apply text color from table cell to its child blocks and segments
*
*/

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove this empty line

export function setTableCellBackgroundColor(
cell: ContentModelTableCell,
color: string | null | undefined,
Expand Down Expand Up @@ -43,28 +45,80 @@ 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 white or black, 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) {
if (
([White, 'rgb(255,255,255)'].indexOf(textColor) > -1 &&
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems you are checking both text color and background color to be white (or black). Are you sure about that?
It only returns true when black on black, or white on white.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed to consider other bright or dark colors

[White, 'rgb(255,255,255)', ''].indexOf(cellBackgroundColor) > -1) ||
([Black, 'rgb(0,0,0)'].indexOf(textColor) > -1 &&
[Black, 'rgb(0,0,0)', ''].indexOf(cellBackgroundColor) > -1)
) {
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
Open in desktop
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);
});
}
});
});
});