@heartlandone/vega 2.74.0 → 2.75.0-RTE-table-preview

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/column-operation.js

@@ -0,0 +1,109 @@
+import { ToggleHeaderTableColumnStrategy } from '../action-handler-strategies/toggle-header-table-column-strategy';
+import { DeleteTableColumnAction } from '../actions/delete-table-column-action';
+import { InsertTableColumnDirection, InsertTableColumnAction } from '../actions/insert-table-column-action';
+import { SelectTableColumnAction } from '../actions/select-table-column-action';
+import { ToggleHeaderTableColumnAction } from '../actions/toggle-header-table-column-action';
+import { RTETableBlock } from '../dto/table-block';
+import { getParentBlockByType } from '../utils/utils';
+import { SettingEventHandler, TableSettingType } from './setting-event-handler.abstract';
+export var ColumnOperationType;
+(function (ColumnOperationType) {
+  ColumnOperationType["HEADER_COLUMN"] = "HEADER_COLUMN";
+  ColumnOperationType["ADD_COLUMN_LEFT"] = "ADD_COLUMN_LEFT";
+  ColumnOperationType["ADD_COLUMN_RIGHT"] = "ADD_COLUMN_RIGHT";
+  ColumnOperationType["DELETE_COLUMN"] = "DELETE_COLUMN";
+  ColumnOperationType["SELECT_COLUMN"] = "SELECT_COLUMN";
+})(ColumnOperationType || (ColumnOperationType = {}));
+/**
+ * Event handler for column operations in a table.
+ */
+export class ColumnOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === TableSettingType.COLUMN;
+  }
+  /**
+   * @inheritDoc
+   */
+  execute(action, extensionContext) {
+    const selectedCells = extensionContext.tableSelection.getSelectedCells();
+    if (!selectedCells || selectedCells.length === 0) {
+      return;
+    }
+    const operation = action[1];
+    switch (operation) {
+      case ColumnOperationType.ADD_COLUMN_LEFT:
+      case ColumnOperationType.ADD_COLUMN_RIGHT:
+        this.handleInsertColumn(operation, selectedCells);
+        break;
+      case ColumnOperationType.DELETE_COLUMN:
+        this.handleDeleteColumn(selectedCells);
+        break;
+      case ColumnOperationType.SELECT_COLUMN:
+        this.handleSelectColumn(selectedCells, extensionContext);
+        break;
+      case ColumnOperationType.HEADER_COLUMN:
+        this.handleToggleHeaderColumn(selectedCells);
+        break;
+      default:
+        break;
+    }
+  }
+  /**
+   * Adds a new column to the table at the specified position.
+   *
+   * @param {ColumnOperationType} direction - The position to insert the new column (left or right).
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - The selected table cells.
+   */
+  handleInsertColumn(direction, selectedCells) {
+    const action = new InsertTableColumnAction(direction === ColumnOperationType.ADD_COLUMN_LEFT
+      ? InsertTableColumnDirection.LEFT
+      : InsertTableColumnDirection.RIGHT, selectedCells);
+    this.applyActionOnTable(action, selectedCells[0]);
+  }
+  /**
+   * Deletes the selected column from the table.
+   *
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - The selected table cells.
+   */
+  handleDeleteColumn(selectedCells) {
+    const action = new DeleteTableColumnAction(selectedCells);
+    this.applyActionOnTable(action, selectedCells[0]);
+  }
+  /**
+   * Selects the entire column in the table.
+   *
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - The selected table cells.
+   * @param {RTETableExtensionContext} extensionContext - The table extension context.
+   */
+  handleSelectColumn(selectedCells, extensionContext) {
+    const action = new SelectTableColumnAction(selectedCells, (allSelectedCells) => {
+      extensionContext.tableSelection.setSelectedCells(allSelectedCells);
+    });
+    this.applyActionOnTable(action, selectedCells[0]);
+  }
+  /**
+   * Toggles the header state of the selected column in the table.
+   *
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - The selected table cells.
+   */
+  handleToggleHeaderColumn(selectedCells) {
+    const headerOn = !ToggleHeaderTableColumnStrategy.isFullHeaderSelection(selectedCells);
+    const action = new ToggleHeaderTableColumnAction(selectedCells, headerOn);
+    this.applyActionOnTable(action, selectedCells[0]);
+  }
+  /**
+   * Apply the specified action on the table containing the selected cell.
+   *
+   * @param {DeleteTableColumnAction | InsertTableColumnAction} action - The action to apply.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} selectedCell - The selected table cell.
+   */
+  applyActionOnTable(action, selectedCell) {
+    const table = getParentBlockByType(selectedCell, RTETableBlock);
+    if (table) {
+      table.apply(action);
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/merge-cells-operation.js

@@ -0,0 +1,100 @@
+import { SettingEventHandler, TableSettingType } from './setting-event-handler.abstract';
+import { RTETableBlock } from '../dto/table-block';
+import { MergeCellsAction } from '../actions/merge-cells-action';
+import { getRectangularBounds, getParentBlockByType, getAdjacentCell, } from '../utils/utils';
+export var MergeCellsOperationType;
+(function (MergeCellsOperationType) {
+  MergeCellsOperationType["MERGE_CELLS"] = "MERGE_CELLS";
+  MergeCellsOperationType["MERGE_CELL_UP"] = "MERGE_CELL_UP";
+  MergeCellsOperationType["MERGE_CELL_RIGHT"] = "MERGE_CELL_RIGHT";
+  MergeCellsOperationType["MERGE_CELL_DOWN"] = "MERGE_CELL_DOWN";
+  MergeCellsOperationType["MERGE_CELL_LEFT"] = "MERGE_CELL_LEFT";
+})(MergeCellsOperationType || (MergeCellsOperationType = {}));
+/**
+ * Event handler for merge cells operations in a table.
+ */
+export class MergeCellsOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === TableSettingType.MERGE_CELLS;
+  }
+  /**
+   * @inheritDoc
+   */
+  execute(action, extensionContext) {
+    const selectedCells = extensionContext.tableSelection.getSelectedCells();
+    const operation = action[1];
+    switch (operation) {
+      case MergeCellsOperationType.MERGE_CELL_UP:
+      case MergeCellsOperationType.MERGE_CELL_RIGHT:
+      case MergeCellsOperationType.MERGE_CELL_DOWN:
+      case MergeCellsOperationType.MERGE_CELL_LEFT:
+        {
+          const mergeCells = this.getDirectionMergeCells(operation, selectedCells[0]);
+          this.handleMergeCells(mergeCells, operation);
+        }
+        break;
+      default:
+        {
+          if (selectedCells.length > 1) {
+            this.handleMergeCells(selectedCells, MergeCellsOperationType.MERGE_CELLS);
+          }
+        }
+        break;
+    }
+  }
+  /**
+   * Get the adjacent cell in the specified direction.
+   *
+   * @param {MergeCellsOperationType} direction - The direction to look for the adjacent cell.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} cell - The current cell.
+   * @returns {Array<RTETableCellBlock | RTETableHeadCellBlock>} Array containing the cells to merge.
+   */
+  getDirectionMergeCells(direction, cell) {
+    const adjacent = getAdjacentCell(cell, direction);
+    if (!adjacent) {
+      return [cell];
+    }
+    switch (direction) {
+      case MergeCellsOperationType.MERGE_CELL_UP:
+        return [adjacent, cell];
+      case MergeCellsOperationType.MERGE_CELL_DOWN:
+        return [cell, adjacent];
+      case MergeCellsOperationType.MERGE_CELL_LEFT:
+        return [adjacent, cell];
+      default:
+        return [cell, adjacent];
+    }
+  }
+  /**
+   * Handle the merge cells operation by creating and applying a MergeCellsAction.
+   *
+   * @param {Array<RTETableCellBlock | RTETableHeadCellBlock>} mergeCells - The cells to merge.
+   * @param {MergeCellsOperationType} direction - The merge cell direction.
+   */
+  handleMergeCells(mergeCells, direction) {
+    if (mergeCells.length < 2) {
+      return;
+    }
+    const rectInfo = getRectangularBounds(mergeCells);
+    const { minRow, maxRow, minCol, maxCol, targetCell } = rectInfo;
+    const colSpan = maxCol - minCol + 1;
+    const rowSpan = maxRow - minRow + 1;
+    const action = new MergeCellsAction(targetCell, mergeCells, colSpan, rowSpan, direction);
+    this.applyActionOnTable(action, targetCell);
+  }
+  /**
+   * Apply the specified action on the table containing the selected cell.
+   *
+   * @param {MergeCellsAction} action - The action to apply.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} selectedCell - The selected table cell.
+   */
+  applyActionOnTable(action, selectedCell) {
+    const table = getParentBlockByType(selectedCell, RTETableBlock);
+    if (table) {
+      table.apply(action);
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/row-operation.js

@@ -0,0 +1,132 @@
+import { DeleteTableRowAction } from '../actions/delete-table-row-action';
+import { InsertTableRowAction, InsertTableRowDirection } from '../actions/insert-table-row-action';
+import { ToggleHeaderRowAction } from '../actions/toggle-header-row-action';
+import { RTETableBlock } from '../dto/table-block';
+import { RTETableRowBlock } from '../dto/table-row-block';
+import { getParentBlockByType } from '../utils/utils';
+import { SettingEventHandler, TableSettingType } from './setting-event-handler.abstract';
+export var RowOperationType;
+(function (RowOperationType) {
+  RowOperationType["HEADER_ROW"] = "HEADER_ROW";
+  RowOperationType["ADD_ROW_ABOVE"] = "ADD_ROW_ABOVE";
+  RowOperationType["ADD_ROW_BELOW"] = "ADD_ROW_BELOW";
+  RowOperationType["DELETE_ROW"] = "DELETE_ROW";
+  RowOperationType["SELECT_ROW"] = "SELECT_ROW";
+})(RowOperationType || (RowOperationType = {}));
+/**
+ * Event handler for row operations in a table.
+ */
+export class RowOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === TableSettingType.ROW;
+  }
+  /**
+   * @inheritDoc
+   */
+  execute(action, extensionContext) {
+    const operation = action[1];
+    switch (operation) {
+      case RowOperationType.ADD_ROW_ABOVE:
+      case RowOperationType.ADD_ROW_BELOW:
+        this.handleInsertRow(operation, extensionContext);
+        break;
+      case RowOperationType.DELETE_ROW:
+        this.handleDeleteRow(extensionContext);
+        break;
+      case RowOperationType.HEADER_ROW:
+        this.handleToggleHeader(extensionContext);
+        break;
+      case RowOperationType.SELECT_ROW:
+        this.handleSelectRow(extensionContext);
+        break;
+      default:
+        break;
+    }
+  }
+  /**
+   * Adds a new row to the table at the specified position.
+   *
+   * @param {RowOperationType} direction - The position to insert the new row (above or below).
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   */
+  handleInsertRow(direction, extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length > 0) {
+      const action = new InsertTableRowAction(direction === RowOperationType.ADD_ROW_ABOVE
+        ? InsertTableRowDirection.ABOVE
+        : InsertTableRowDirection.BELOW, selectedRows);
+      this.applyActionToTable(selectedRows[0], action);
+    }
+  }
+  /**
+   * Deletes the selected row(s) from the table.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   */
+  handleDeleteRow(extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length) {
+      const action = new DeleteTableRowAction(selectedRows);
+      this.applyActionToTable(selectedRows[0], action);
+    }
+  }
+  /**
+   * Converts selected rows to header rows or reverts them back to normal rows.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   */
+  handleToggleHeader(extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length > 0) {
+      const action = new ToggleHeaderRowAction(selectedRows);
+      this.applyActionToTable(selectedRows[0], action);
+    }
+  }
+  /**
+   * Selects the focus row(s) in the table.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   */
+  handleSelectRow(extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length > 0 && extensionContext && extensionContext.tableSelection) {
+      const allCells = selectedRows.flatMap((row) => row.children);
+      extensionContext.tableSelection.setSelectedCells(allCells);
+    }
+  }
+  /**
+   * Get all selected table rows.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   * @returns {RTETableRowBlock[]} The selected table row blocks.
+   */
+  getAllSelectedRows(extensionContext) {
+    const selectedRows = new Set();
+    if (extensionContext && extensionContext.tableSelection) {
+      const { tableSelection } = extensionContext;
+      const selectedCells = tableSelection.getSelectedCells();
+      selectedCells.forEach((cell) => {
+        const rowBlock = getParentBlockByType(cell, RTETableRowBlock);
+        if (rowBlock) {
+          selectedRows.add(rowBlock);
+        }
+      });
+    }
+    return Array.from(selectedRows);
+  }
+  /**
+   * Applies the given action to the table containing the reference block.
+   *
+   * @param {RTEBlock} refBlock - The reference block within the table.
+   * @param {ModifyContentAction} action - The action to apply to the table.
+   */
+  applyActionToTable(refBlock, action) {
+    const table = getParentBlockByType(refBlock, RTETableBlock);
+    if (table) {
+      table.apply(action);
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/setting-event-handler.abstract.js

@@ -0,0 +1,45 @@
+import { VegaRTEContent } from '../../../dto/content-state';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+export var TableSettingType;
+(function (TableSettingType) {
+  TableSettingType["ROW"] = "ROW";
+  TableSettingType["CAPTION"] = "CAPTION";
+  TableSettingType["COLUMN"] = "COLUMN";
+  TableSettingType["MERGE_CELLS"] = "MERGE_CELLS";
+  TableSettingType["TABLE"] = "TABLE";
+  TableSettingType["CELL"] = "CELL";
+  TableSettingType["SPLIT_CELL"] = "SPLIT_CELL";
+})(TableSettingType || (TableSettingType = {}));
+/**
+ * Abstract class for setting event handlers.
+ */
+export class SettingEventHandler {
+  /**
+   * Applies a cursor update action so the editor focuses on the resolved node.
+   *
+   * @param {RTETableBlock} block - Table block currently being toggled.
+   * @param {Nullable<RTENode>} focusNode - Target node that should receive the caret.
+   */
+  syncCursorPosition(block, focusNode) {
+    const rootContent = this.findRootContent(block);
+    if (focusNode && rootContent) {
+      const offset = focusNode.getRangeEndOffset();
+      rootContent.apply(new UpdateCursorPositionAction(focusNode, offset));
+    }
+  }
+  /**
+   * Walks up the parent chain to locate the nearest VegaRTEContent root.
+   *
+   * @param {RTETableBlock} block - Table block used as the starting point.
+   * @returns {Nullable<VegaRTEContent>} Content root containing the table, if found.
+   */
+  findRootContent(block) {
+    let currentParent = block.parent;
+    while (currentParent) {
+      if (currentParent instanceof VegaRTEContent) {
+        return currentParent;
+      }
+      currentParent = currentParent.parent;
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/split-cell-operation.js

@@ -0,0 +1,57 @@
+import { SplitCellHorizontallyAction } from '../actions/split-cell-horizontally-action';
+import { SplitCellVerticallyAction } from '../actions/split-cell-vertically-action';
+import { SettingEventHandler, TableSettingType } from './setting-event-handler.abstract';
+export var SplitCellOperationType;
+(function (SplitCellOperationType) {
+  SplitCellOperationType["SPLIT_CELL_HORIZONTALLY"] = "SPLIT_CELL_HORIZONTALLY";
+  SplitCellOperationType["SPLIT_CELL_VERTICALLY"] = "SPLIT_CELL_VERTICALLY";
+})(SplitCellOperationType || (SplitCellOperationType = {}));
+/**
+ * Event handler for split cell operations in a table.
+ */
+export class SplitCellOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === TableSettingType.SPLIT_CELL;
+  }
+  /**
+   * @inheritDoc
+   */
+  execute(action, extensionContext) {
+    const selectedCells = extensionContext.tableSelection.getSelectedCells();
+    if (selectedCells && selectedCells.length === 1) {
+      const targetCell = selectedCells[0];
+      const operation = action[1];
+      switch (operation) {
+        case SplitCellOperationType.SPLIT_CELL_HORIZONTALLY:
+          this.handleSplitCellHorizontally(targetCell);
+          break;
+        case SplitCellOperationType.SPLIT_CELL_VERTICALLY:
+          this.handleSplitCellVertically(targetCell);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+  /**
+   * Splits the selected table cell horizontally (split top/bottom).
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} selectedCell - The table cell block to split.
+   */
+  handleSplitCellHorizontally(selectedCell) {
+    const action = new SplitCellHorizontallyAction();
+    selectedCell.apply(action);
+  }
+  /**
+   * Splits the selected table cell vertically (split left/right).
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} selectedCell - The table cell block to split.
+   */
+  handleSplitCellVertically(selectedCell) {
+    const action = new SplitCellVerticallyAction();
+    selectedCell.apply(action);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/table-properties-cancel-event-handler.js

@@ -0,0 +1,19 @@
+import { UpdateTablePropertiesAction } from '../actions/update-table-properties-action';
+import { TablePropertiesEventHandler } from './table-properties';
+/**
+ * Cancel Event handler for the table properties.
+ */
+export class TablePropertiesCancelEventHandler extends TablePropertiesEventHandler {
+  /**
+   * Cancel table properties changes
+   *
+   * @param {RTETableExtensionContext} extensionContext - The table extension context.
+   * @param {RTETableBlock} tableBlock - The table block that owns the properties.
+   * @param {RTETablePropertiesType} data - The origin of the properties.
+   * @param {RTENode} focusNode - The node to focus on.
+   */
+  handle(extensionContext, tableBlock, data, focusNode) {
+    tableBlock.apply(new UpdateTablePropertiesAction(data));
+    this.updateCursorPosition(extensionContext, focusNode);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/table-properties-change-event-handler.js

@@ -0,0 +1,20 @@
+import { UpdateTablePropertiesAction } from '../actions/update-table-properties-action';
+import { TablePropertiesEventHandler } from './table-properties';
+/**
+ * Change Event handler for the table properties.
+ */
+export class TablePropertiesChangeEventHandler extends TablePropertiesEventHandler {
+  /**
+   * Update the table properties based on the provided data.
+   *
+   * @param {RTETableExtensionContext} _extensionContext - The table extension context.
+   * @param {RTETableBlock} tableBlock - The table block to update
+   * @param {RTETablePropertiesType} [data] - The new table properties data
+   */
+  handle(_extensionContext, tableBlock, data) {
+    const action = new UpdateTablePropertiesAction(data);
+    // Prevent automatic flushing of the action
+    action.isFlushable = false;
+    tableBlock.apply(action);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/table-properties-save-event-handler.js

@@ -0,0 +1,20 @@
+import { TablePropertiesEventHandler } from './table-properties';
+/**
+ * Save Event handler for the table properties.
+ */
+export class TablePropertiesSaveEventHandler extends TablePropertiesEventHandler {
+  /**
+   * Commit the table properties changes
+   *
+   * @param {RTETableExtensionContext} extensionContext - The table extension context.
+   * @param {unknown} _tableBlock - The table block.
+   * @param {unknown} _data - The table properties data.
+   * @param {RTENode} focusNode - The focus node.
+   */
+  handle(extensionContext, _tableBlock, _data, focusNode) {
+    if (extensionContext && extensionContext.host) {
+      extensionContext.flushValue(extensionContext.host.value);
+      this.updateCursorPosition(extensionContext, focusNode);
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/table-properties.js

@@ -0,0 +1,50 @@
+import { RTETableExtensionAnnotationTypeEnum, } from '../annotations/table-annotation';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+/**
+ * Event handler for row operations in a table.
+ */
+export class TablePropertiesEventHandler {
+  /**
+   * Generate form object from table block
+   *
+   * @param {RTETableBlock} tableBlock - The table block
+   * @returns {RTETablePropertiesType} The generated form object
+   */
+  static generateTablePropertiesForm(tableBlock) {
+    const annotation = tableBlock.annotationMap.get(RTETableExtensionAnnotationTypeEnum.TABLE);
+    let result = {
+      borderStyle: 'none',
+      borderColor: '',
+      borderWidth: '',
+      backgroundColor: '',
+      width: '',
+      height: '',
+      textAlign: 'center',
+    };
+    if (annotation) {
+      const annotationJSON = annotation.toJSON().table;
+      const { style = 'none', color = '', width = '', } = annotationJSON.border || { style: 'none', color: '', width: '' };
+      result = {
+        backgroundColor: annotationJSON.backgroundColor || '',
+        width: annotationJSON.width || '',
+        height: annotationJSON.height || '',
+        textAlign: annotationJSON.alignment,
+        borderStyle: style,
+        borderColor: color,
+        borderWidth: width,
+      };
+    }
+    return result;
+  }
+  /**
+   * Update the rich text editor cursor position
+   *
+   * @param {RTETableExtensionContext} extensionContext - The table extension context.
+   * @param {Nullable<RTENode>} focusNode - The node to focus on.
+   */
+  updateCursorPosition(extensionContext, focusNode) {
+    if (extensionContext && focusNode) {
+      extensionContext.host.value.apply(new UpdateCursorPositionAction(focusNode, 0));
+    }
+  }
+}