Add minWidth cell to insertTable (#3239)

Add a new parameter, customCellFormat, to the insertTable function to allow custom styles for tables.

Author: juliaroldi

packages/roosterjs-content-model-api/lib/modelApi/table/createTableStructure.ts

@@ -1,21 +1,31 @@
 import { addBlock, createTable, createTableCell } from 'roosterjs-content-model-dom';
-import type { ContentModelBlockGroup, ContentModelTable } from 'roosterjs-content-model-types';
+import type {
+    ContentModelBlockGroup,
+    ContentModelTable,
+    ContentModelTableCellFormat,
+} from 'roosterjs-content-model-types';
 
 /**
  * @internal
  */
 export function createTableStructure(
     parent: ContentModelBlockGroup,
     columns: number,
-    rows: number
+    rows: number,
+    cellFormat?: ContentModelTableCellFormat
 ): ContentModelTable {
     const table = createTable(rows);
 
     addBlock(parent, table);
 
     table.rows.forEach(row => {
         for (let i = 0; i < columns; i++) {
-            const cell = createTableCell();
+            const cell = createTableCell(
+                undefined /*spanLeftOrColSpan */,
+                undefined /*spanAboveOrRowSpan */,
+                undefined /* isHeader */,
+                cellFormat
+            );
 
             row.cells.push(cell);
         }

packages/roosterjs-content-model-api/lib/publicApi/table/insertTable.ts

@@ -15,6 +15,7 @@ import type {
     ContentModelTableFormat,
     IEditor,
     TableMetadataFormat,
+    ContentModelTableCellFormat,
 } from 'roosterjs-content-model-types';
 
 /**
@@ -25,13 +26,15 @@ import type {
  * @param rows Number of rows in table
  * @param tableMetadataFormat (Optional) The table format that are stored as metadata. If not passed, the default format will be applied: background color: #FFF; border color: #ABABAB
  * @param format (Optional) The table format used for style attributes
+ * @param cellFormat (Optional) custom format for table cells, except for borders styles, for borders use tableMetadataFormat
  */
 export function insertTable(
     editor: IEditor,
     columns: number,
     rows: number,
     tableMetadataFormat?: Partial<TableMetadataFormat>,
-    format?: ContentModelTableFormat
+    format?: ContentModelTableFormat,
+    customCellFormat?: ContentModelTableCellFormat
 ) {
     editor.focus();
 
@@ -41,7 +44,7 @@ export function insertTable(
 
             if (insertPosition) {
                 const doc = createContentModelDocument();
-                const table = createTableStructure(doc, columns, rows);
+                const table = createTableStructure(doc, columns, rows, customCellFormat);
                 if (format) {
                     table.format = { ...format };
                 }

packages/roosterjs-content-model-api/test/modelApi/table/createTableStructureTest.ts

@@ -43,4 +43,18 @@ describe('createTableStructure', () => {
         expect(table.rows.length).toBe(2);
         expect(table.rows[0].cells.length).toBe(3);
     });
+
+    it('Create 2*3 table with cell format', () => {
+        const doc = createContentModelDocument();
+
+        createTableStructure(doc, 3, 2, {
+            minWidth: '15px',
+        });
+
+        const table = doc.blocks[0] as ContentModelTable;
+
+        expect(table.rows.length).toBe(2);
+        expect(table.rows[0].cells.length).toBe(3);
+        expect(table.rows[0].cells[0].format.minWidth).toBe('15px');
+    });
 });

packages/roosterjs-content-model-api/test/publicApi/table/insertTableTest.ts

@@ -326,5 +326,118 @@ describe('insertTable', () => {
                 ],
             });
         });
+        it('should insert table with minimum width', () => {
+            // Arrange
+            const model: ContentModelDocument = {
+                blockGroupType: 'Document',
+                blocks: [
+                    {
+                        blockType: 'Paragraph',
+                        segments: [
+                            {
+                                segmentType: 'SelectionMarker',
+                                isSelected: true,
+                                format: {},
+                            },
+                        ],
+                        format: {},
+                    },
+                ],
+            };
+
+            let resultModel: ContentModelDocument | null = null;
+
+            formatContentModelSpy.and.callFake((callback: any) => {
+                const result = callback(model, {
+                    newEntities: [],
+                    deletedEntities: [],
+                    newImages: [],
+                });
+                resultModel = model;
+                return result;
+            });
+
+            // Act
+            insertTable(
+                editor,
+                1,
+                1,
+                undefined,
+                {
+                    marginBottom: '1px',
+                },
+                {
+                    minWidth: '15px',
+                }
+            );
+
+            // Assert
+            expect(resultModel!).toEqual({
+                blockGroupType: 'Document',
+                blocks: [
+                    {
+                        blockType: 'Table',
+                        rows: [
+                            {
+                                format: {},
+                                height: jasmine.any(Number),
+                                cells: [
+                                    {
+                                        blockGroupType: 'TableCell',
+                                        blocks: [
+                                            {
+                                                blockType: 'Paragraph',
+                                                segments: [
+                                                    {
+                                                        segmentType: 'SelectionMarker',
+                                                        isSelected: true,
+                                                        format: {},
+                                                    },
+                                                    {
+                                                        segmentType: 'Br',
+                                                        format: {},
+                                                    },
+                                                ],
+                                                format: {},
+                                            },
+                                        ],
+                                        format: {
+                                            minWidth: '15px',
+                                            useBorderBox: true,
+                                            borderTop: '1px solid #ABABAB',
+                                            borderRight: '1px solid #ABABAB',
+                                            borderBottom: '1px solid #ABABAB',
+                                            borderLeft: '1px solid #ABABAB',
+                                            verticalAlign: 'top',
+                                        },
+                                        spanLeft: false,
+                                        spanAbove: false,
+                                        isHeader: false,
+                                        dataset: {},
+                                    },
+                                ],
+                            },
+                        ],
+                        format: {
+                            borderCollapse: true,
+                            useBorderBox: true,
+                            marginBottom: '1px',
+                        },
+                        widths: jasmine.any(Array),
+                        dataset: jasmine.any(Object),
+                    },
+                    {
+                        blockType: 'Paragraph',
+                        segments: [
+                            {
+                                segmentType: 'Br',
+                                format: {},
+                            },
+                        ],
+                        format: {},
+                    },
+                ],
+            });
+        });
     });
 });

packages/roosterjs-react/lib/ribbon/buttons/insertTableButton.tsx

@@ -70,6 +70,10 @@ export const insertTableButton: RibbonButton<InsertTableButtonStringKey> = {
                 : {},
             {
                 marginBottom: '1px',
+            },
+            {
+                minWidth: '15px',
+                borderBottom: '1px dotted red',
             }
         );
     },