diff --git a/packages/roosterjs-content-model-api/lib/modelApi/table/alignTableCell.ts b/packages/roosterjs-content-model-api/lib/modelApi/table/alignTableCell.ts index a54c6ec1748..28b03d5e13d 100644 --- a/packages/roosterjs-content-model-api/lib/modelApi/table/alignTableCell.ts +++ b/packages/roosterjs-content-model-api/lib/modelApi/table/alignTableCell.ts @@ -10,13 +10,22 @@ import type { TableCellVerticalAlignOperation, } from 'roosterjs-content-model-types'; -const TextAlignValueMap: Partial> = { - alignCellLeft: 'start', - alignCellCenter: 'center', - alignCellRight: 'end', + Partial> +> = { + alignCellLeft: { + ltr: 'start', + rtl: 'end', + }, + alignCellCenter: { + ltr: 'center', + rtl: 'center', + }, + alignCellRight: { + ltr: 'end', + rtl: 'start', + }, }; const VerticalAlignValueMap: Partial { - cell.format.textAlign = TextAlignValueMap[operation]; + cell.format.textAlign = + TextAlignValueMap[operation][cell.format.direction == 'rtl' ? 'rtl' : 'ltr']; }); } diff --git a/packages/roosterjs-content-model-api/test/modelApi/table/alignTableCellTest.ts b/packages/roosterjs-content-model-api/test/modelApi/table/alignTableCellTest.ts index 5b987c81476..a943b4320f1 100644 --- a/packages/roosterjs-content-model-api/test/modelApi/table/alignTableCellTest.ts +++ b/packages/roosterjs-content-model-api/test/modelApi/table/alignTableCellTest.ts @@ -12,15 +12,82 @@ import { describe('alignTableCellHorizontally', () => { function runTest( operation: TableCellHorizontalAlignOperation, - expectedFormat: ContentModelTableCellFormat + expectedFormat: ContentModelTableCellFormat, + isRTL?: boolean ) { const table = createTable(2); - table.rows[0].cells.push(createTableCell(1, 1, false)); - table.rows[0].cells.push(createTableCell(1, 1, false)); - table.rows[0].cells.push(createTableCell(1, 1, false)); - table.rows[1].cells.push(createTableCell(1, 1, false)); - table.rows[1].cells.push(createTableCell(1, 1, false)); - table.rows[1].cells.push(createTableCell(1, 1, false)); + table.rows[0].cells.push( + createTableCell( + 1, + 1, + false, + isRTL + ? { + direction: 'rtl', + } + : undefined + ) + ); + table.rows[0].cells.push( + createTableCell( + 1, + 1, + false, + isRTL + ? { + direction: 'rtl', + } + : undefined + ) + ); + table.rows[0].cells.push( + createTableCell( + 1, + 1, + false, + isRTL + ? { + direction: 'rtl', + } + : undefined + ) + ); + table.rows[1].cells.push( + createTableCell( + 1, + 1, + false, + isRTL + ? { + direction: 'rtl', + } + : undefined + ) + ); + table.rows[1].cells.push( + createTableCell( + 1, + 1, + false, + isRTL + ? { + direction: 'rtl', + } + : undefined + ) + ); + table.rows[1].cells.push( + createTableCell( + 1, + 1, + false, + isRTL + ? { + direction: 'rtl', + } + : undefined + ) + ); table.rows[0].cells[1].isSelected = true; table.rows[0].cells[2].isSelected = true; table.rows[1].cells[1].isSelected = true; @@ -36,12 +103,20 @@ describe('alignTableCellHorizontally', () => { alignTableCellHorizontally(table, operation); expect(table.rows[0].cells.map(c => c.format)).toEqual([ - {}, + isRTL + ? { + direction: 'rtl', + } + : {}, expectedFormat, expectedFormat, ]); expect(table.rows[1].cells.map(c => c.format)).toEqual([ - {}, + isRTL + ? { + direction: 'rtl', + } + : {}, expectedFormat, expectedFormat, ]); @@ -87,6 +162,28 @@ describe('alignTableCellHorizontally', () => { textAlign: 'end', }); }); + + it('align to left - RTL', () => { + runTest( + 'alignCellLeft', + { + direction: 'rtl', + textAlign: 'end', + }, + true /* isRTL */ + ); + }); + + it('align to right - RTL ', () => { + runTest( + 'alignCellRight', + { + direction: 'rtl', + textAlign: 'start', + }, + true /* isRTL */ + ); + }); }); describe('alignTableCellVertically', () => {