align cell RTL

Author: juliaroldi

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<Record<
+const TextAlignValueMap: Record<
     TableCellHorizontalAlignOperation,
-    'start' | 'center' | 'end'
->> = {
-    alignCellLeft: 'start',
-    alignCellCenter: 'center',
-    alignCellRight: 'end',
+    Record<'ltr' | 'rtl', 'start' | 'center' | 'end' | 'initial' | 'justify'>
+> = {
+    alignCellLeft: {
+        ltr: 'start',
+        rtl: 'end',
+    },
+    alignCellCenter: {
+        ltr: 'center',
+        rtl: 'center',
+    },
+    alignCellRight: {
+        ltr: 'end',
+        rtl: 'start',
+    },
 };
 
 const VerticalAlignValueMap: Partial<Record<
@@ -36,7 +45,8 @@ export function alignTableCellHorizontally(
     operation: TableCellHorizontalAlignOperation
 ) {
     alignTableCellInternal(table, cell => {
-        cell.format.textAlign = TextAlignValueMap[operation];
+        cell.format.textAlign =
+            TextAlignValueMap[operation][cell.format.direction == 'rtl' ? 'rtl' : 'ltr'];
     });
 }
 

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', () => {