RoosterJs 8.30.1 and Content Model 0.0.2 (#1217)

* Fix content model table bugs (#1214) * Fix content model table bugs * fix color bug * Fix merge table cell behavior for ContentModel (#1216) * Update version
microsoft · Aug 30, 2022 · d562875 · d562875
1 parent d37029a
commit d562875
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 26 deletions.
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelTableView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelTableView.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { applyTableFormat } from 'roosterjs-content-model/lib/modelApi/table/applyTableFormat';
 import { BackgroundColorFormatRenderer } from '../format/formatPart/BackgroundColorFormatRenderer';
 import { BorderFormatRenderers } from '../format/formatPart/BorderFormatRenderers';
 import { ContentModelBlockView } from './ContentModelBlockView';
@@ -55,8 +56,19 @@ export function ContentModelTableView(props: { table: ContentModelTable }) {
         );
     }, [table]);
 
+    const onApplyTableFormat = React.useCallback(() => {
+        applyTableFormat(table, undefined, true);
+    }, [table]);
+
     const getFormat = React.useCallback(() => {
-        return <FormatView format={table.format} renderers={TableFormatRenderers} />;
+        return (
+            <>
+                <div>
+                    <button onClick={onApplyTableFormat}>Apply table format</button>
+                </div>
+                <FormatView format={table.format} renderers={TableFormatRenderers} />
+            </>
+        );
     }, [table.format]);
 
     return (

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "roosterjs",
-    "version": "8.30.0",
+    "version": "8.30.1",
     "description": "Framework-independent javascript editor",
     "repository": {
         "type": "git",

diff --git a/packages/roosterjs-content-model/lib/formatHandlers/table/tableMetadataFormatHandler.ts b/packages/roosterjs-content-model/lib/formatHandlers/table/tableMetadataFormatHandler.ts
@@ -1,4 +1,5 @@
 import { createMetadataFormatHandler } from '../utils/createMetadataFormatHandler';
+import { TableBorderFormat } from 'roosterjs-editor-types';
 import { TableMetadataFormat } from '../../publicTypes/format/formatParts/TableMetadataFormat';
 import {
     createBooleanDefinition,
@@ -30,8 +31,8 @@ const TableFormatDefinition = createObjectDefinition<Required<TableMetadataForma
         tableBorderFormat: createNumberDefinition(
             false /** isOptional */,
             undefined /* value */,
-            0 /* first table border format */,
-            7 /* last table border format */
+            TableBorderFormat.DEFAULT /* first table border format, TODO: Use Min/Max to specify valid values */,
+            TableBorderFormat.CLEAR /* last table border format, , TODO: Use Min/Max to specify valid values */
         ),
     },
     false /* isOptional */,

diff --git a/packages/roosterjs-content-model/lib/modelApi/table/applyTableFormat.ts b/packages/roosterjs-content-model/lib/modelApi/table/applyTableFormat.ts
@@ -147,22 +147,17 @@ function getBorder(style: string | null | undefined, alwaysUseTransparent: boole
 
 function formatBackgroundColors(cells: ContentModelTableCell[][], format: TableMetadataFormat) {
     const { hasBandedRows, hasBandedColumns, bgColorOdd, bgColorEven } = format;
-    const shouldColorWholeTable = !hasBandedRows && bgColorOdd === bgColorEven;
 
     cells.forEach((row, rowIndex) => {
         row.forEach((cell, colIndex) => {
             if (!cell.format.bgColorOverride) {
-                const color = hasBandedColumns
-                    ? colIndex % 2 === 0
-                        ? format.bgColorEven
-                        : format.bgColorOdd
-                    : hasBandedRows
-                    ? rowIndex % 2 === 0
-                        ? format.bgColorEven
-                        : format.bgColorOdd
-                    : shouldColorWholeTable
-                    ? format.bgColorOdd
-                    : null;
+                const color =
+                    hasBandedRows || hasBandedColumns
+                        ? (hasBandedColumns && colIndex % 2 != 0) ||
+                          (hasBandedRows && rowIndex % 2 != 0)
+                            ? bgColorOdd
+                            : bgColorEven
+                        : bgColorEven;
 
                 setBackgroundColor(cell.format, color);
             }

diff --git a/packages/roosterjs-content-model/lib/modelApi/table/normalizeTable.ts b/packages/roosterjs-content-model/lib/modelApi/table/normalizeTable.ts
@@ -68,6 +68,11 @@ export function normalizeTable(table: ContentModelTable) {
 
         if (table.cells.every(row => row[colIndex]?.spanLeft)) {
             table.cells.forEach(row => row.splice(colIndex, 1));
+            table.widths.splice(
+                colIndex - 1,
+                2,
+                table.widths[colIndex - 1] + table.widths[colIndex]
+            );
         }
     }
 
@@ -83,6 +88,11 @@ export function normalizeTable(table: ContentModelTable) {
 
         if (row.every(cell => cell.spanAbove)) {
             table.cells.splice(rowIndex, 1);
+            table.heights.splice(
+                rowIndex - 1,
+                2,
+                table.heights[rowIndex - 1] + table.heights[rowIndex]
+            );
         }
     }
 }

diff --git a/packages/roosterjs-content-model/package.json b/packages/roosterjs-content-model/package.json
@@ -6,5 +6,5 @@
         "roosterjs-editor-dom": ""
     },
     "main": "./lib/index.ts",
-    "version": "0.0.1"
+    "version": "0.0.2"
 }
diff --git a/packages/roosterjs-content-model/test/modelApi/table/normalizeTableTest.ts b/packages/roosterjs-content-model/test/modelApi/table/normalizeTableTest.ts
@@ -214,7 +214,7 @@ describe('normalizeTable', () => {
                 borderCollapse: true,
                 useBorderBox: true,
             },
-            widths: [120, 120, 120],
+            widths: [240, 120],
             heights: [22],
         });
     });
@@ -260,7 +260,7 @@ describe('normalizeTable', () => {
                 borderCollapse: true,
                 useBorderBox: true,
             },
-            widths: [120, 120],
+            widths: [240],
             heights: [22],
         });
     });
@@ -445,7 +445,7 @@ describe('normalizeTable', () => {
                 useBorderBox: true,
             },
             widths: [120, 120],
-            heights: [22, 22],
+            heights: [44],
         });
     });
 
@@ -535,8 +535,8 @@ describe('normalizeTable', () => {
                 borderCollapse: true,
                 useBorderBox: true,
             },
-            widths: [120, 120],
-            heights: [22, 22],
+            widths: [240],
+            heights: [44],
         });
     });
 });
diff --git a/packages/roosterjs-editor-dom/lib/table/tableFormatInfo.ts b/packages/roosterjs-editor-dom/lib/table/tableFormatInfo.ts
@@ -1,5 +1,5 @@
 import { getMetadata, setMetadata } from '../metadata/metadata';
-import { TableFormat } from 'roosterjs-editor-types';
+import { TableBorderFormat, TableFormat } from 'roosterjs-editor-types';
 import {
     createBooleanDefinition,
     createNumberDefinition,
@@ -30,10 +30,10 @@ const TableFormatMetadata = createObjectDefinition<Required<TableFormat>>(
         tableBorderFormat: createNumberDefinition(
             false /** isOptional */,
             undefined /* value */,
-            0 /* first table border format */,
-            7 /* last table border format */
+            TableBorderFormat.DEFAULT /* first table border format, TODO: Use Min/Max to specify valid values */,
+            TableBorderFormat.CLEAR /* last table border format, , TODO: Use Min/Max to specify valid values */
         ),
-        keepCellShade: BooleanDefinition,
+        keepCellShade: createBooleanDefinition(true /** isOptional */),
     },
     false /* isOptional */,
     true /** allowNull */