Merge pasted adjacent tables

packages/roosterjs-content-model-dom/lib/modelApi/editing/mergeModel.ts

@@ -30,6 +30,7 @@ import type {
     ReadonlyContentModelDocument,
     ReadonlyContentModelTable,
     ShallowMutableContentModelParagraph,
+    ShallowMutableContentModelTable,
 } from 'roosterjs-content-model-types';
 
 const HeadingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -332,11 +333,65 @@ function mergeTables(
 
         normalizeTable(table, markerPosition.marker.format);
         applyTableFormat(table, undefined /*newFormat*/, true /*keepCellShade*/);
-    } else {
+    } else if (!mergeTableAfterPreviousTable(markerPosition, newTable)) {
         insertBlock(markerPosition, newTable);
     }
 }
 
+function mergeTableAfterPreviousTable(
+    markerPosition: InsertPoint,
+    newTable: ContentModelTable
+): boolean {
+    const { marker, paragraph, path } = markerPosition;
+    const parent = path[0];
+    const paragraphIndex = parent.blocks.indexOf(paragraph);
+    const previousBlock = parent.blocks[paragraphIndex - 1];
+
+    if (
+        paragraphIndex > 0 &&
+        paragraph.segments.indexOf(marker) == 0 &&
+        previousBlock?.blockType == 'Table' &&
+        previousBlock.rows[0]?.cells.length > 0 &&
+        newTable.rows[0]?.cells.length > 0
+    ) {
+        const table = mutateBlock(previousBlock);
+        const columnCount = Math.max(
+            ...table.rows.map(row => row.cells.length),
+            ...newTable.rows.map(row => row.cells.length)
+        );
+
+        extendTableRows(table, columnCount);
+        extendTableRows(newTable, columnCount);
+
+        table.rows.push(...newTable.rows);
+
+        return true;
+    }
+
+    return false;
+}
+
+function extendTableRows(table: ShallowMutableContentModelTable, columnCount: number) {
+    table.rows.forEach(row => {
+        const currentColumnCount = row.cells.length;
+        const lastCell = row.cells[currentColumnCount - 1];
+
+        if (lastCell) {
+            for (let col = currentColumnCount; col < columnCount; col++) {
+                const spanCell = createTableCell(
+                    true /* spanLeft */,
+                    false /* spanAbove */,
+                    lastCell.isHeader,
+                    lastCell.format,
+                    lastCell.dataset
+                );
+
+                row.cells.push(spanCell);
+            }
+        }
+    });
+}
+
 function mergeList(markerPosition: InsertPoint, newList: ContentModelListItem) {
     splitParagraph(markerPosition, newList.format);
 

packages/roosterjs-content-model-dom/test/modelApi/editing/mergeModelTest.ts

@@ -4415,6 +4415,142 @@ describe('mergeModel', () => {
         });
     });
 
+    it('Merge table after a table with the same number of columns', () => {
+        const target = createContentModelDocument();
+        const targetTable = createTable(1);
+        const targetRow = {
+            cells: [createTableCell(), createTableCell()],
+            format: {},
+            height: 0,
+        };
+        const paragraph = createParagraph();
+        const marker = createSelectionMarker();
+
+        targetTable.rows = [targetRow];
+        paragraph.segments.push(marker);
+        target.blocks.push(targetTable, paragraph);
+
+        const source = createContentModelDocument();
+        const sourceTable = createTable(1);
+        const sourceRow = {
+            cells: [
+                createTableCell(false, false, false, {
+                    borderTop: '1px solid red',
+                    borderRight: '1px solid green',
+                    borderBottom: '1px solid blue',
+                    borderLeft: '1px solid yellow',
+                }),
+                createTableCell(),
+            ],
+            format: {},
+            height: 0,
+        };
+
+        sourceTable.rows = [sourceRow];
+        source.blocks.push(sourceTable);
+
+        spyOn(applyTableFormat, 'applyTableFormat');
+
+        const result = mergeModel(target, source, undefined, {
+            mergeTable: true,
+        });
+
+        expect(target.blocks).toEqual([targetTable, paragraph]);
+        expect(targetTable.rows).toEqual([targetRow, sourceRow]);
+        expect(sourceRow.cells[0].format).toEqual({
+            borderTop: '1px solid red',
+            borderRight: '1px solid green',
+            borderBottom: '1px solid blue',
+            borderLeft: '1px solid yellow',
+        });
+        expect(applyTableFormat.applyTableFormat).not.toHaveBeenCalled();
+        expect(result?.marker).toBe(marker);
+    });
+
+    it('Merge table after a table with a different number of columns', () => {
+        const target = createContentModelDocument();
+        const targetTable = createTable(1);
+        const paragraph = createParagraph();
+        const targetRow = {
+            cells: [
+                createTableCell(),
+                createTableCell(),
+                createTableCell(),
+                createTableCell(),
+                createTableCell(),
+            ],
+            format: {},
+            height: 0,
+        };
+
+        targetTable.rows = [targetRow];
+        paragraph.segments.push(createSelectionMarker());
+        target.blocks.push(targetTable, paragraph);
+
+        const source = createContentModelDocument();
+        const sourceTable = createTable(1);
+        const sourceRow = {
+            cells: [createTableCell(), createTableCell(), createTableCell()],
+            format: {},
+            height: 0,
+        };
+
+        sourceTable.rows = [sourceRow];
+        source.blocks.push(sourceTable);
+
+        mergeModel(target, source, undefined, {
+            mergeTable: true,
+        });
+
+        expect(target.blocks).toEqual([targetTable, paragraph]);
+        expect(targetTable.rows).toEqual([targetRow, sourceRow]);
+        expect(sourceRow.cells.length).toBe(5);
+        expect(sourceRow.cells[3].spanLeft).toBeTrue();
+        expect(sourceRow.cells[4].spanLeft).toBeTrue();
+    });
+
+    it('Merge table after a table with more columns', () => {
+        const target = createContentModelDocument();
+        const targetTable = createTable(1);
+        const paragraph = createParagraph();
+        const targetRow = {
+            cells: [createTableCell(), createTableCell(), createTableCell()],
+            format: {},
+            height: 0,
+        };
+
+        targetTable.rows = [targetRow];
+        paragraph.segments.push(createSelectionMarker());
+        target.blocks.push(targetTable, paragraph);
+
+        const source = createContentModelDocument();
+        const sourceTable = createTable(1);
+        const sourceRow = {
+            cells: [
+                createTableCell(),
+                createTableCell(),
+                createTableCell(),
+                createTableCell(),
+                createTableCell(),
+            ],
+            format: {},
+            height: 0,
+        };
+
+        sourceTable.rows = [sourceRow];
+        source.blocks.push(sourceTable);
+
+        mergeModel(target, source, undefined, {
+            mergeTable: true,
+        });
+
+        expect(target.blocks).toEqual([targetTable, paragraph]);
+        expect(targetTable.rows).toEqual([targetRow, sourceRow]);
+        expect(targetRow.cells.length).toBe(5);
+        expect(targetRow.cells[3].spanLeft).toBeTrue();
+        expect(targetRow.cells[4].spanLeft).toBeTrue();
+    });
+
     // #region preferTarget
 
     it('Use customized insert position', () => {

packages/roosterjs-content-model-types/lib/parameter/MergeModelOption.ts

@@ -5,7 +5,9 @@ import type { InsertPoint } from '../selection/InsertPoint';
  */
 export interface MergeModelOption {
     /**
-     * When there is only a table to merge, whether merge this table into current table (if any), or just directly insert (nested table).
+     * When there is only a table to merge, whether to merge this table into the current table,
+     * or into the table immediately before the insert position. Otherwise, insert it as a
+     * separate or nested table.
      * This is usually used when paste table inside a table
      * @default false
      */