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
Merged

Remove table format #2225

Show file tree
Hide file tree
Changes from 2 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
64 changes: 51 additions & 13 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 @@ -8,14 +8,17 @@ const DARK_COLORS_LIGHTNESS = 20;
const BRIGHT_COLORS_LIGHTNESS = 80;
const White = '#ffffff';
const Black = '#000000';
const DEFAULT_COLORS = ['rgb(0,0,0', '#000000', '#ffffff', 'rgb(255, 255, 255)'];
Copy link
Collaborator

Choose a reason for hiding this comment

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

rgb(0,0,0) ?

Copy link
Collaborator

Choose a reason for hiding this comment

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

Why need this?

It is possible user's default color is not black/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 think DEFAULT_COLORS is a bad name. The DEFAULT_COLORS is not the user default color, but the colors that we use when we adapt the text color.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If we are removing the background color, we also need remove this textColor that we added before.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Hmm, how can we know if this color is added by the code when we add background color, or added by user's manual action?

Copy link
Collaborator

Choose a reason for hiding this comment

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

Maybe check the color override flag from cell metadata. If there is color override flag, background color is added from table cell shade feature, then text color on table cell is also added there. Otherwise, the text color may be from original table. In that case, should we still change the color?

Copy link
Collaborator

Choose a reason for hiding this comment

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

And in this change do you also need to clear that flag?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

To avoid matching text and background colors, I checked if they were equal and also equal to the adaptive text color. I tried metadata approach and it did not work, because it erased the text color when I did these steps:

  • Add a header row
  • Change the header text color
  • Delete the header row
  • The text color was gone.


/**
* Set shade color of table cell
* @param cell The cell to set shade color to
* @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 +46,63 @@ 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 &&
DEFAULT_COLORS.indexOf(block.segmentFormat?.textColor) > 0
Copy link
Collaborator

Choose a reason for hiding this comment

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

>=0?

) {
delete block.segmentFormat.textColor;
}
block.segments.forEach(segment => {
if (
segment.format.textColor &&
DEFAULT_COLORS.indexOf(segment.format.textColor) > 0
) {
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;
}

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);
});
}
});
});
});