Skip to content

Commit

Permalink
Fix normalisation and First Column issues (#2657)
Browse files Browse the repository at this point in the history 
* optimise cmTable fetching

* First Column not apply to very first cell

* fix normalisation

* fix first cell color for First Column

* fix and add test

* fix test

* fix tests

* fix test and hasHeaderRow case

* reorder rows
  • Loading branch information
@Andres-CT98
Andres-CT98 committed May 24, 2024
1 parent 40dec70 commit 2b5d0a5
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 11 deletions.
3 changes: 0 additions & 3 deletions packages/roosterjs-content-model-api/lib/publicApi/table/setTableCellShade.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {
hasSelectionInBlockGroup,
getFirstSelectedTable,
normalizeTable,
setTableCellBackgroundColor,
} from 'roosterjs-content-model-dom';
import type { IEditor } from 'roosterjs-content-model-types';
Expand All @@ -19,8 +18,6 @@ export function setTableCellShade(editor: IEditor, color: string | null) {
const [table] = getFirstSelectedTable(model);

if (table) {
normalizeTable(table);

table.rows.forEach(row =>
row.cells.forEach(cell => {
if (hasSelectionInBlockGroup(cell)) {
Expand Down
11 changes: 6 additions & 5 deletions packages/roosterjs-content-model-dom/lib/modelApi/editing/applyTableFormat.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ function formatCells(
// Format Background Color
if (!metaOverrides.bgColorOverrides[rowIndex][colIndex]) {
let color: string | null | undefined;
if (hasFirstColumn && colIndex == 0) {
if (hasFirstColumn && colIndex == 0 && rowIndex > 0) {
color = null;
} else {
color =
Expand Down Expand Up @@ -239,7 +239,7 @@ function formatCells(
}

/**
* Set the first column format borders for the table
* Set the first column format borders for the table as well as header property
* @param rows The rows of the table
* @param format The table metadata format
*/
Expand All @@ -261,13 +261,14 @@ export function setFirstColumnFormatBorders(

switch (rowIndex) {
case 0:
break;
case 1:
setBorderColor(cell.format, 'borderBottom');
cell.isHeader = !!format.hasHeaderRow;
break;
case rows.length - 1:
setBorderColor(cell.format, 'borderTop');
break;
case 1:
setBorderColor(cell.format, 'borderBottom');
break;
default:
setBorderColor(cell.format, 'borderTop');
setBorderColor(cell.format, 'borderBottom');
Expand Down
4 changes: 2 additions & 2 deletions packages/roosterjs-content-model-dom/lib/modelApi/editing/normalizeTable.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const MIN_HEIGHT = 22;
/**
* Normalize a Content Model table, make sure:
* 1. Fist cells are not spanned
* 2. Inner cells are not header
* 2. Only first column and row can have headers
* 3. All cells have content and width
* 4. Table and table row have correct width/height
* 5. Spanned cell has no child blocks
Expand Down Expand Up @@ -64,7 +64,7 @@ export function normalizeTable(

if (rowIndex == 0) {
cell.spanAbove = false;
} else if (rowIndex > 0 && cell.isHeader) {
} else if (rowIndex > 0 && colIndex > 0 && cell.isHeader) {
cell.isHeader = false;
delete cell.cachedElement;
}
Expand Down
129 changes: 128 additions & 1 deletion packages/roosterjs-content-model-dom/test/modelApi/editing/normalizeTableTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ describe('normalizeTable', () => {
blockGroupType: 'TableCell',
spanLeft: false,
spanAbove: false,
isHeader: false,
isHeader: true,
format: { useBorderBox: true },
blocks: [
{
Expand All @@ -183,6 +183,133 @@ describe('normalizeTable', () => {
});
});

it('Normalize a table with only TH', () => {
const table = createTable(2);

table.rows[0].cells.push(createTableCell(1, 1, true));
table.rows[0].cells.push(createTableCell(1, 1, true));
table.rows[1].cells.push(createTableCell(1, 1, true));
table.rows[1].cells.push(createTableCell(1, 1, true));

table.widths = [100, 100];
table.rows[0].height = 200;
table.rows[1].height = 200;

normalizeTable(table);

expect(table).toEqual({
blockType: 'Table',
rows: [
{
height: 200,
format: {},
cells: [
{
blockGroupType: 'TableCell',
blocks: [
{
blockType: 'Paragraph',
segments: [
{
segmentType: 'Br',
format: {},
},
],
format: {},
},
],
format: {
useBorderBox: true,
},
spanLeft: false,
spanAbove: false,
isHeader: true,
dataset: {},
},
{
blockGroupType: 'TableCell',
blocks: [
{
blockType: 'Paragraph',
segments: [
{
segmentType: 'Br',
format: {},
},
],
format: {},
},
],
format: {
useBorderBox: true,
},
spanLeft: false,
spanAbove: false,
isHeader: true,
dataset: {},
},
],
},
{
height: 200,
format: {},
cells: [
{
blockGroupType: 'TableCell',
blocks: [
{
blockType: 'Paragraph',
segments: [
{
segmentType: 'Br',
format: {},
},
],
format: {},
},
],
format: {
useBorderBox: true,
},
spanLeft: false,
spanAbove: false,
isHeader: true,
dataset: {},
},
{
blockGroupType: 'TableCell',
blocks: [
{
blockType: 'Paragraph',
segments: [
{
segmentType: 'Br',
format: {},
},
],
format: {},
},
],
format: {
useBorderBox: true,
},
spanLeft: false,
spanAbove: false,
isHeader: false,
dataset: {},
},
],
},
],
format: {
borderCollapse: true,
useBorderBox: true,
},
widths: [100, 100],
dataset: {},
});
});

it('Normalize a table with left-spanned cells', () => {
const table = createTable(1);

Expand Down

0 comments on commit 2b5d0a5

Please sign in to comment.