Standalone editor: TableOperation (#2149)

* Standalone editor: TableOperation

* fix build

demo/scripts/controls/ribbonButtons/contentModel/tableEditButtons.ts

@@ -1,5 +1,4 @@
-import { editTable, isContentModelEditor } from 'roosterjs-content-model-editor';
-import { TableOperation } from 'roosterjs-editor-types';
+import { editTable, isContentModelEditor, TableOperation } from 'roosterjs-content-model-editor';
 import {
     RibbonButton,
     TableEditAlignMenuItemStringKey,
@@ -12,29 +11,29 @@ import {
 } from 'roosterjs-react';
 
 const TableEditOperationMap: Partial<Record<TableEditMenuItemStringKey, TableOperation>> = {
-    menuNameTableInsertAbove: TableOperation.InsertAbove,
-    menuNameTableInsertBelow: TableOperation.InsertBelow,
-    menuNameTableInsertLeft: TableOperation.InsertLeft,
-    menuNameTableInsertRight: TableOperation.InsertRight,
-    menuNameTableDeleteTable: TableOperation.DeleteTable,
-    menuNameTableDeleteColumn: TableOperation.DeleteColumn,
-    menuNameTableDeleteRow: TableOperation.DeleteRow,
-    menuNameTableMergeAbove: TableOperation.MergeAbove,
-    menuNameTableMergeBelow: TableOperation.MergeBelow,
-    menuNameTableMergeLeft: TableOperation.MergeLeft,
-    menuNameTableMergeRight: TableOperation.MergeRight,
-    menuNameTableMergeCells: TableOperation.MergeCells,
-    menuNameTableSplitHorizontally: TableOperation.SplitHorizontally,
-    menuNameTableSplitVertically: TableOperation.SplitVertically,
-    menuNameTableAlignLeft: TableOperation.AlignCellLeft,
-    menuNameTableAlignCenter: TableOperation.AlignCellCenter,
-    menuNameTableAlignRight: TableOperation.AlignCellRight,
-    menuNameTableAlignTop: TableOperation.AlignCellTop,
-    menuNameTableAlignMiddle: TableOperation.AlignCellMiddle,
-    menuNameTableAlignBottom: TableOperation.AlignCellBottom,
-    menuNameTableAlignTableLeft: TableOperation.AlignLeft,
-    menuNameTableAlignTableCenter: TableOperation.AlignCenter,
-    menuNameTableAlignTableRight: TableOperation.AlignRight,
+    menuNameTableInsertAbove: 'insertAbove',
+    menuNameTableInsertBelow: 'insertBelow',
+    menuNameTableInsertLeft: 'insertLeft',
+    menuNameTableInsertRight: 'insertRight',
+    menuNameTableDeleteTable: 'deleteTable',
+    menuNameTableDeleteColumn: 'deleteColumn',
+    menuNameTableDeleteRow: 'deleteRow',
+    menuNameTableMergeAbove: 'mergeAbove',
+    menuNameTableMergeBelow: 'mergeBelow',
+    menuNameTableMergeLeft: 'mergeLeft',
+    menuNameTableMergeRight: 'mergeRight',
+    menuNameTableMergeCells: 'mergeCells',
+    menuNameTableSplitHorizontally: 'splitHorizontally',
+    menuNameTableSplitVertically: 'splitVertically',
+    menuNameTableAlignLeft: 'alignCellLeft',
+    menuNameTableAlignCenter: 'alignCellCenter',
+    menuNameTableAlignRight: 'alignCellRight',
+    menuNameTableAlignTop: 'alignCellTop',
+    menuNameTableAlignMiddle: 'alignCellMiddle',
+    menuNameTableAlignBottom: 'alignCellBottom',
+    menuNameTableAlignTableLeft: 'alignLeft',
+    menuNameTableAlignTableCenter: 'alignCenter',
+    menuNameTableAlignTableRight: 'alignRight',
 };
 
 export const tableInsertButton: RibbonButton<

packages-content-model/roosterjs-content-model-editor/lib/index.ts

@@ -34,6 +34,19 @@ export {
     InsertEntityOptions,
     InsertEntityPosition,
 } from './publicTypes/parameter/InsertEntityOptions';
+export {
+    TableOperation,
+    TableVerticalInsertOperation,
+    TableHorizontalInsertOperation,
+    TableDeleteOperation,
+    TableVerticalMergeOperation,
+    TableHorizontalMergeOperation,
+    TableCellMergeOperation,
+    TableSplitOperation,
+    TableAlignOperation,
+    TableCellHorizontalAlignOperation,
+    TableCellVerticalAlignOperation,
+} from './publicTypes/parameter/TableOperation';
 
 export { default as insertTable } from './publicApi/table/insertTable';
 export { default as formatTable } from './publicApi/table/formatTable';

packages-content-model/roosterjs-content-model-editor/lib/modelApi/block/setModelAlignment.ts

@@ -1,6 +1,6 @@
 import { alignTable } from '../table/alignTable';
 import { getOperationalBlocks } from '../selection/collectSelections';
-import { TableOperation } from 'roosterjs-editor-types';
+import type { TableAlignOperation } from '../../publicTypes/parameter/TableOperation';
 import type { ContentModelDocument, ContentModelListItem } from 'roosterjs-content-model-types';
 
 const ResultMap: Record<
@@ -23,22 +23,19 @@ const ResultMap: Record<
 
 const TableAlignMap: Record<
     'left' | 'center' | 'right',
-    Record<
-        'ltr' | 'rtl',
-        TableOperation.AlignLeft | TableOperation.AlignCenter | TableOperation.AlignRight
-    >
+    Record<'ltr' | 'rtl', TableAlignOperation>
 > = {
     left: {
-        ltr: TableOperation.AlignLeft,
-        rtl: TableOperation.AlignRight,
+        ltr: 'alignLeft',
+        rtl: 'alignRight',
     },
     center: {
-        ltr: TableOperation.AlignCenter,
-        rtl: TableOperation.AlignCenter,
+        ltr: 'alignCenter',
+        rtl: 'alignCenter',
     },
     right: {
-        ltr: TableOperation.AlignRight,
-        rtl: TableOperation.AlignLeft,
+        ltr: 'alignRight',
+        rtl: 'alignLeft',
     },
 };
 

packages-content-model/roosterjs-content-model-editor/lib/modelApi/table/alignTable.ts

@@ -1,22 +1,12 @@
-import { TableOperation } from 'roosterjs-editor-types';
+import type { TableAlignOperation } from '../../publicTypes/parameter/TableOperation';
 import type { ContentModelTable } from 'roosterjs-content-model-types';
-import type { CompatibleTableOperation } from 'roosterjs-editor-types/lib/compatibleTypes';
 
 /**
  * @internal
  */
-export function alignTable(
-    table: ContentModelTable,
-    operation:
-        | TableOperation.AlignCenter
-        | TableOperation.AlignLeft
-        | TableOperation.AlignRight
-        | CompatibleTableOperation.AlignCenter
-        | CompatibleTableOperation.AlignLeft
-        | CompatibleTableOperation.AlignRight
-) {
-    table.format.marginLeft = operation == TableOperation.AlignLeft ? '' : 'auto';
-    table.format.marginRight = operation == TableOperation.AlignRight ? '' : 'auto';
+export function alignTable(table: ContentModelTable, operation: TableAlignOperation) {
+    table.format.marginLeft = operation == 'alignLeft' ? '' : 'auto';
+    table.format.marginRight = operation == 'alignRight' ? '' : 'auto';
 
     delete table.cachedElement;
 }

packages-content-model/roosterjs-content-model-editor/lib/modelApi/table/alignTableCell.ts

@@ -1,46 +1,66 @@
 import { getSelectedCells } from './getSelectedCells';
-import { TableOperation } from 'roosterjs-editor-types';
 import { updateTableCellMetadata } from '../../domUtils/metadata/updateTableCellMetadata';
-import type { ContentModelTable } from 'roosterjs-content-model-types';
-import type { CompatibleTableOperation } from 'roosterjs-editor-types/lib/compatibleTypes';
+import type {
+    TableCellHorizontalAlignOperation,
+    TableCellVerticalAlignOperation,
+} from '../../publicTypes/parameter/TableOperation';
+import type { ContentModelTable, ContentModelTableCell } from 'roosterjs-content-model-types';
 
-const TextAlignValueMap: Partial<Record<TableOperation, 'start' | 'center' | 'end'>> = {
-    [TableOperation.AlignCellLeft]: 'start',
-    [TableOperation.AlignCellCenter]: 'center',
-    [TableOperation.AlignCellRight]: 'end',
+const TextAlignValueMap: Partial<Record<
+    TableCellHorizontalAlignOperation,
+    'start' | 'center' | 'end'
+>> = {
+    alignCellLeft: 'start',
+    alignCellCenter: 'center',
+    alignCellRight: 'end',
 };
 
-const VerticalAlignValueMap: Partial<Record<TableOperation, 'top' | 'middle' | 'bottom'>> = {
-    [TableOperation.AlignCellTop]: 'top',
-    [TableOperation.AlignCellMiddle]: 'middle',
-    [TableOperation.AlignCellBottom]: 'bottom',
+const VerticalAlignValueMap: Partial<Record<
+    TableCellVerticalAlignOperation,
+    'top' | 'middle' | 'bottom'
+>> = {
+    alignCellTop: 'top',
+    alignCellMiddle: 'middle',
+    alignCellBottom: 'bottom',
 };
 
 /**
  * @internal
  */
-export function alignTableCell(
+export function alignTableCellHorizontally(
     table: ContentModelTable,
-    operation:
-        | TableOperation.AlignCellCenter
-        | TableOperation.AlignCellLeft
-        | TableOperation.AlignCellRight
-        | TableOperation.AlignCellTop
-        | TableOperation.AlignCellMiddle
-        | TableOperation.AlignCellBottom
-        | CompatibleTableOperation.AlignCellCenter
-        | CompatibleTableOperation.AlignCellLeft
-        | CompatibleTableOperation.AlignCellRight
-        | CompatibleTableOperation.AlignCellTop
-        | CompatibleTableOperation.AlignCellMiddle
-        | CompatibleTableOperation.AlignCellBottom
+    operation: TableCellHorizontalAlignOperation
+) {
+    alignTableCellInternal(table, cell => {
+        cell.format.textAlign = TextAlignValueMap[operation];
+    });
+}
+
+/**
+ * @internal
+ */
+export function alignTableCellVertically(
+    table: ContentModelTable,
+    operation: TableCellVerticalAlignOperation
+) {
+    alignTableCellInternal(table, cell => {
+        cell.format.verticalAlign = VerticalAlignValueMap[operation];
+
+        updateTableCellMetadata(cell, metadata => {
+            metadata = metadata || {};
+            metadata.vAlignOverride = true;
+            return metadata;
+        });
+    });
+}
+
+function alignTableCellInternal(
+    table: ContentModelTable,
+    callback: (cell: ContentModelTableCell) => void
 ) {
     const sel = getSelectedCells(table);
 
     if (sel) {
-        const textAlign = TextAlignValueMap[operation];
-        const verticalAlign = VerticalAlignValueMap[operation];
-
         for (let rowIndex = sel.firstRow; rowIndex <= sel.lastRow; rowIndex++) {
             for (let colIndex = sel.firstCol; colIndex <= sel.lastCol; colIndex++) {
                 const cell = table.rows[rowIndex]?.cells[colIndex];
@@ -49,16 +69,7 @@ export function alignTableCell(
                 if (format) {
                     delete cell.cachedElement;
 
-                    format.textAlign = textAlign || format.textAlign;
-                    format.verticalAlign = verticalAlign || format.verticalAlign;
-
-                    if (verticalAlign) {
-                        updateTableCellMetadata(cell, metadata => {
-                            metadata = metadata || {};
-                            metadata.vAlignOverride = true;
-                            return metadata;
-                        });
-                    }
+                    callback(cell);
 
                     cell.blocks.forEach(block => {
                         if (block.blockType === 'Paragraph') {

packages-content-model/roosterjs-content-model-editor/lib/modelApi/table/insertTableColumn.ts

@@ -1,22 +1,17 @@
 import { createTableCell } from 'roosterjs-content-model-dom';
 import { getSelectedCells } from './getSelectedCells';
-import { TableOperation } from 'roosterjs-editor-types';
+import type { TableHorizontalInsertOperation } from '../../publicTypes/parameter/TableOperation';
 import type { ContentModelTable } from 'roosterjs-content-model-types';
-import type { CompatibleTableOperation } from 'roosterjs-editor-types/lib/compatibleTypes';
 
 /**
  * @internal
  */
 export function insertTableColumn(
     table: ContentModelTable,
-    operation:
-        | TableOperation.InsertLeft
-        | TableOperation.InsertRight
-        | CompatibleTableOperation.InsertLeft
-        | CompatibleTableOperation.InsertRight
+    operation: TableHorizontalInsertOperation
 ) {
     const sel = getSelectedCells(table);
-    const insertLeft = operation == TableOperation.InsertLeft;
+    const insertLeft = operation == 'insertLeft';
 
     if (sel) {
         for (let i = sel?.firstCol; i <= sel.lastCol; i++) {

packages-content-model/roosterjs-content-model-editor/lib/modelApi/table/insertTableRow.ts

@@ -1,22 +1,14 @@
 import { createTableCell } from 'roosterjs-content-model-dom';
 import { getSelectedCells } from './getSelectedCells';
-import { TableOperation } from 'roosterjs-editor-types';
+import type { TableVerticalInsertOperation } from '../../publicTypes/parameter/TableOperation';
 import type { ContentModelTable } from 'roosterjs-content-model-types';
-import type { CompatibleTableOperation } from 'roosterjs-editor-types/lib/compatibleTypes';
 
 /**
  * @internal
  */
-export function insertTableRow(
-    table: ContentModelTable,
-    operation:
-        | TableOperation.InsertAbove
-        | TableOperation.InsertBelow
-        | CompatibleTableOperation.InsertAbove
-        | CompatibleTableOperation.InsertBelow
-) {
+export function insertTableRow(table: ContentModelTable, operation: TableVerticalInsertOperation) {
     const sel = getSelectedCells(table);
-    const insertAbove = operation == TableOperation.InsertAbove;
+    const insertAbove = operation == 'insertAbove';
 
     if (sel) {
         for (let i = sel.firstRow; i <= sel.lastRow; i++) {

packages-content-model/roosterjs-content-model-editor/lib/modelApi/table/mergeTableColumn.ts

@@ -1,22 +1,17 @@
 import { canMergeCells } from './canMergeCells';
 import { getSelectedCells } from './getSelectedCells';
-import { TableOperation } from 'roosterjs-editor-types';
+import type { TableHorizontalMergeOperation } from '../../publicTypes/parameter/TableOperation';
 import type { ContentModelTable } from 'roosterjs-content-model-types';
-import type { CompatibleTableOperation } from 'roosterjs-editor-types/lib/compatibleTypes';
 
 /**
  * @internal
  */
 export function mergeTableColumn(
     table: ContentModelTable,
-    operation:
-        | TableOperation.MergeLeft
-        | TableOperation.MergeRight
-        | CompatibleTableOperation.MergeLeft
-        | CompatibleTableOperation.MergeRight
+    operation: TableHorizontalMergeOperation
 ) {
     const sel = getSelectedCells(table);
-    const mergeLeft = operation == TableOperation.MergeLeft;
+    const mergeLeft = operation == 'mergeLeft';
 
     if (sel) {
         const mergingColIndex = mergeLeft ? sel.firstCol : sel.lastCol + 1;

packages-content-model/roosterjs-content-model-editor/lib/modelApi/table/mergeTableRow.ts

@@ -1,22 +1,14 @@
 import { canMergeCells } from './canMergeCells';
 import { getSelectedCells } from './getSelectedCells';
-import { TableOperation } from 'roosterjs-editor-types';
+import type { TableVerticalMergeOperation } from '../../publicTypes/parameter/TableOperation';
 import type { ContentModelTable } from 'roosterjs-content-model-types';
-import type { CompatibleTableOperation } from 'roosterjs-editor-types/lib/compatibleTypes';
 
 /**
  * @internal
  */
-export function mergeTableRow(
-    table: ContentModelTable,
-    operation:
-        | TableOperation.MergeAbove
-        | TableOperation.MergeBelow
-        | CompatibleTableOperation.MergeAbove
-        | CompatibleTableOperation.MergeBelow
-) {
+export function mergeTableRow(table: ContentModelTable, operation: TableVerticalMergeOperation) {
     const sel = getSelectedCells(table);
-    const mergeAbove = operation == TableOperation.MergeAbove;
+    const mergeAbove = operation == 'mergeAbove';
 
     if (sel) {
         const mergingRowIndex = mergeAbove ? sel.firstRow : sel.lastRow + 1;