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

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/delete-table-column-strategy.js

@@ -0,0 +1,57 @@
+import { RemoveChildrenAction } from '../../../dto/actions/remove-child-action';
+import { getAllTableRows, getFirstNode } from '../utils/utils';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { TableColumnStrategy } from './table-column-strategy.abstract';
+/**
+ * Strategy to handle the deletion of table column from the parent.
+ */
+export class DeleteTableColumnStrategy extends TableColumnStrategy {
+  /**
+   * Deletes the specified table column and updates the cursor position.
+   *
+   * @param {DeleteTableColumnAction} action - The action containing the table column to delete.
+   * @param {RTETableBlock} target - The target table block from which the column will be deleted.
+   */
+  handleAction(action, target) {
+    const [startCellIndex, endCellIndex] = this.getBoundaryCellIndexOfRow(action.tableCellDeleteRange);
+    const allTableRows = getAllTableRows(target);
+    // Find the next focusable cell before deletion
+    const nextFocusableCell = this.findNextFocusableCell(action.tableCellDeleteRange, [startCellIndex, endCellIndex]);
+    allTableRows.forEach((row) => {
+      this.deleteCellsInRow(row, startCellIndex, endCellIndex);
+    });
+    const root = this.getRootContent(target);
+    const nextFocusNode = getFirstNode(nextFocusableCell);
+    if (root && nextFocusNode) {
+      root.apply(new UpdateCursorPositionAction(nextFocusNode));
+    }
+  }
+  /**
+   * Find the next focusable cell either after the deleted range or before it.
+   *
+   * @param {RTETableCellBlock[]} tableCellBlockDeleteRange - The range of table cell blocks to be deleted.
+   * @param {number[]} indexRange - The start and end indices of the cells to be deleted.
+   * @returns {Nullable<RTETableCellBlock | RTETableHeadCellBlock>} The next focusable cell.
+   */
+  findNextFocusableCell(tableCellBlockDeleteRange, indexRange) {
+    const cellAfterEndOfRange = tableCellBlockDeleteRange[tableCellBlockDeleteRange.length - 1].parent.children[indexRange[indexRange.length - 1] + 1];
+    const cellBeforeStartOfRange = tableCellBlockDeleteRange[0].parent.children[indexRange[0] - 1];
+    return cellAfterEndOfRange !== null && cellAfterEndOfRange !== void 0 ? cellAfterEndOfRange : cellBeforeStartOfRange;
+  }
+  /**
+   * Deletes cells in a given row from start index to end index.
+   *
+   * @param {RTETableRowBlock} row - The table row block.
+   * @param {number} startCellIndex - The start index of the cell to delete.
+   * @param {number} endCellIndex - The end index of the cell to delete.
+   */
+  deleteCellsInRow(row, startCellIndex, endCellIndex) {
+    const needDeleteCells = [];
+    for (let index = startCellIndex; index <= endCellIndex; index++) {
+      needDeleteCells.push(row.children[index]);
+    }
+    needDeleteCells.forEach((cell) => {
+      row.apply(new RemoveChildrenAction(cell));
+    });
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/delete-table-row-strategy.js

@@ -0,0 +1,57 @@
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { RemoveChildrenAction } from '../../../dto/actions/remove-child-action';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { RTETableBodyBlock } from '../dto/table-body-block';
+import { RTETableHeadBlock } from '../dto/table-head-block';
+/**
+ * Strategy class for handling the deletion of table rows.
+ */
+export class DeleteTableRowStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { rowsToBeRemoved } = action;
+    const futureFocusRow = this.getFutureFocusRow(rowsToBeRemoved[0], rowsToBeRemoved[rowsToBeRemoved.length - 1], target);
+    rowsToBeRemoved.forEach((row) => {
+      this.removeRow(row);
+    });
+    if (futureFocusRow) {
+      const root = this.getRootContent(target);
+      if (root) {
+        const focusNode = futureFocusRow.getLastNode();
+        root.apply(new UpdateCursorPositionAction(focusNode, focusNode.getRangeEndOffset()));
+      }
+    }
+  }
+  /**
+   * Removes the specified row from its parent table section.
+   * // TODO: Add handling for when selected row has or in merge column.
+   *
+   * @param {RTETableRowBlock} rowToBeRemoved The row to be removed.
+   */
+  removeRow(rowToBeRemoved) {
+    rowToBeRemoved.parent.apply(new RemoveChildrenAction(rowToBeRemoved));
+  }
+  /**
+   * Get the future focus row after deletion.
+   *
+   * @param {RTETableRowBlock} startRow - The first row to be deleted.
+   * @param {RTETableRowBlock} endRow - The last row to be deleted.
+   * @param {RTETableBlock} table - The table containing the rows.
+   * @returns {Nullable<RTETableRowBlock>} The row to be focused after deletion.
+   */
+  getFutureFocusRow(startRow, endRow, table) {
+    const allRows = table.children
+      .filter((item) => item instanceof RTETableHeadBlock || item instanceof RTETableBodyBlock)
+      .flatMap((block) => block.children);
+    const startIndex = allRows.indexOf(startRow);
+    const endIndex = allRows.indexOf(endRow);
+    if (allRows[startIndex - 1]) {
+      return allRows[startIndex - 1];
+    }
+    else if (allRows[endIndex + 1]) {
+      return allRows[endIndex + 1];
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/insert-table-block-strategy.js

@@ -0,0 +1,54 @@
+import { AppendChildrenAction } from '../../../dto/actions/append-child-nodes-action';
+import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { generateUUID } from '../../../../../utils/misc';
+import { VegaRTEContent } from '../../../dto/content-state';
+import { RTETableBlock } from '../dto/table-block';
+import { generateTableBody } from '../utils/utils';
+/**
+ * Strategy to handle the insertion of a block into the rich text editor.
+ */
+export class InsertTableBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const tableBlock = this.createTableBlock(action.rowCount, action.columnCount);
+    const emptyParagraph = super.createNewParagraph('');
+    const referenceBlock = this.getReferenceBlock(target);
+    if (referenceBlock) {
+      referenceBlock.parent.apply(new InsertChildrenAfterAction(referenceBlock, tableBlock, emptyParagraph));
+    }
+    else {
+      target.apply(new AppendChildrenAction([tableBlock, emptyParagraph]));
+    }
+    action.nextFocusNode = tableBlock.getFirstNode();
+  }
+  /**
+   * Create a table block with the specified number of rows and columns.
+   *
+   * @param {number} row - The number of rows in the table.
+   * @param {number} column - The number of columns in the table.
+   * @returns {RTETableBlock} The created table block.
+   */
+  createTableBlock(row, column) {
+    const normalizedRowCount = Math.max(row, 1);
+    const normalizedColumnCount = Math.max(column, 1);
+    return RTETableBlock.from({
+      id: generateUUID(),
+      type: 'table-block',
+      children: [generateTableBody(normalizedRowCount, normalizedColumnCount)],
+    });
+  }
+  /**
+   * We need to get the correct block if the current target is a block element to avoid nesting blocks.
+   *
+   * @param {RTEBlock} currentTarget - The current target block or content.
+   * @returns {Nullable<RTEBlock>} The reference block.
+   */
+  getReferenceBlock(currentTarget) {
+    if (!(currentTarget instanceof VegaRTEContent)) {
+      return currentTarget;
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/insert-table-column-strategy.js

@@ -0,0 +1,42 @@
+import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
+import { RTETableCellBlock } from '../dto/table-cell-block';
+import { InsertTableColumnDirection } from '../actions/insert-table-column-action';
+import { InsertChildrenBeforeAction } from '../../../dto/actions/insert-children-before-block';
+import { getAllTableRows, getDefaultCellBlockTemplate } from '../utils/utils';
+import { RTETableHeadCellBlock } from '../dto/table-head-cell-block';
+import { TableColumnStrategy } from './table-column-strategy.abstract';
+/**
+ * Strategy to handle the insertion of a table column into the RTETable.
+ */
+export class InsertTableColumnStrategy extends TableColumnStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const insertDirection = action.insertDirection;
+    const [startCellIndex, endCellIndex] = this.getBoundaryCellIndexOfRow(action.tableCellInsertRange);
+    const allTableRows = getAllTableRows(target);
+    allTableRows.forEach((row) => {
+      if (insertDirection === InsertTableColumnDirection.LEFT) {
+        const newCell = this.generateTableCell(row.children[startCellIndex]);
+        row.apply(new InsertChildrenBeforeAction(row.children[startCellIndex], newCell));
+      }
+      else {
+        const newCell = this.generateTableCell(row.children[endCellIndex + 1] || row.children[endCellIndex]);
+        row.apply(new InsertChildrenAfterAction(row.children[endCellIndex], newCell));
+      }
+    });
+  }
+  /**
+   * Generate a new table cell based on the original cell type.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} originalCell The original table cell block to base the new cell on.
+   * @returns {RTETableCellBlock | RTETableHeadCellBlock} The newly generated table cell block.
+   */
+  generateTableCell(originalCell) {
+    if (originalCell instanceof RTETableHeadCellBlock) {
+      return RTETableHeadCellBlock.from(getDefaultCellBlockTemplate(originalCell.type));
+    }
+    return RTETableCellBlock.from(getDefaultCellBlockTemplate(originalCell.type));
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/insert-table-row-strategy.js

@@ -0,0 +1,117 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { AppendChildrenAction } from '../../../dto/actions/append-child-nodes-action';
+import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
+import { InsertChildrenBeforeAction } from '../../../dto/actions/insert-children-before-block';
+import { InsertTableRowDirection } from '../actions/insert-table-row-action';
+import { RTETableBodyBlock } from '../dto/table-body-block';
+import { RTETableHeadBlock } from '../dto/table-head-block';
+import { RTETableRowBlock } from '../dto/table-row-block';
+/**
+ * Strategy class for handling the insertion of a new row into a table.
+ */
+export class InsertTableRowStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { insertDirection, selectedRows } = action;
+    // The reference block will control where to insert the new row
+    let refBlock = insertDirection === InsertTableRowDirection.ABOVE
+      ? selectedRows[0]
+      : selectedRows[selectedRows.length - 1];
+    // The row need to be inserted is a header row
+    if (this.shouldInsertHeaderRow(refBlock, insertDirection)) {
+      const headerBlock = RTETableRowBlock.from({
+        id: generateUUID(),
+        type: 'table-row',
+        children: refBlock.children.map((item) => {
+          return this.getDefaultCellBlockTemplate(item.type);
+        }),
+      });
+      if (insertDirection === InsertTableRowDirection.ABOVE) {
+        refBlock.parent.apply(new InsertChildrenBeforeAction(refBlock, headerBlock));
+      }
+      else {
+        refBlock.parent.apply(new InsertChildrenAfterAction(refBlock, headerBlock));
+      }
+    }
+    else {
+      let direction = insertDirection;
+      let tableBody = target.children.find((block) => block instanceof RTETableBodyBlock);
+      // Should insert into body if reference block is in head row and body exists
+      if (refBlock.parent instanceof RTETableHeadBlock && tableBody) {
+        refBlock = tableBody.children[0];
+        direction = InsertTableRowDirection.ABOVE;
+      }
+      const refBlockIsHeaderRow = refBlock.parent instanceof RTETableHeadBlock;
+      const rowBlock = RTETableRowBlock.from({
+        id: generateUUID(),
+        type: 'table-row',
+        children: refBlock.children.map((item) => {
+          return this.getDefaultCellBlockTemplate(refBlockIsHeaderRow ? 'table-cell' : item.type);
+        }),
+      });
+      if (!tableBody) {
+        tableBody = RTETableBodyBlock.from({
+          id: generateUUID(),
+          type: 'table-body',
+          children: [],
+        });
+        tableBody.apply(new AppendChildrenAction([rowBlock]));
+        target.apply(new AppendChildrenAction([tableBody]));
+      }
+      else {
+        if (direction === InsertTableRowDirection.ABOVE) {
+          tableBody.apply(new InsertChildrenBeforeAction(refBlock, rowBlock));
+        }
+        else {
+          tableBody.apply(new InsertChildrenAfterAction(refBlock, rowBlock));
+        }
+      }
+    }
+  }
+  /**
+   * Checks if a header row should be inserted based on the selected rows and position.
+   *
+   * @param {RTETableRowBlock} refBlock - The reference table row block.
+   * @param {InsertTableRowDirection} direction - The direction to insert the new row (above or below).
+   * @returns {boolean} True if a header row should be inserted, false otherwise.
+   */
+  shouldInsertHeaderRow(refBlock, direction) {
+    if (direction === InsertTableRowDirection.ABOVE) {
+      return refBlock.parent instanceof RTETableHeadBlock;
+    }
+    else {
+      const parentBlock = refBlock.parent;
+      return (parentBlock instanceof RTETableHeadBlock &&
+        parentBlock.children[parentBlock.children.length - 1] !== refBlock);
+    }
+  }
+  /**
+   * Get the default cell block template.
+   *
+   * @param {string} cellType - The type of the cell block.
+   * @returns {VegaRTETableCellBlock | VegaRTETableHeadCellBlock} The default cell block template.
+   */
+  getDefaultCellBlockTemplate(cellType) {
+    const id = generateUUID();
+    return {
+      id,
+      type: cellType,
+      children: [
+        {
+          id: `${id}-p`,
+          type: 'paragraph',
+          nodes: [
+            {
+              id: `${id}-p-t`,
+              type: 'text',
+              text: '',
+            },
+          ],
+        },
+      ],
+    };
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/select-table-column-strategy.js

@@ -0,0 +1,22 @@
+import { getAllTableRows } from '../utils/utils';
+import { TableColumnStrategy } from './table-column-strategy.abstract';
+/**
+ * Strategy to handle the selection of a table column.
+ */
+export class SelectTableColumnStrategy extends TableColumnStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const [startCellIndex, endCellIndex] = this.getBoundaryCellIndexOfRow(action.tableCellSelectRange);
+    const allTableRows = getAllTableRows(target);
+    const allNeedSelectedCells = [];
+    allTableRows.forEach((row) => {
+      for (let cellIndex = startCellIndex; cellIndex <= endCellIndex; cellIndex++) {
+        const cellToSelect = row.children[cellIndex];
+        allNeedSelectedCells.push(cellToSelect);
+      }
+    });
+    action.selectCellCallback(allNeedSelectedCells);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/table-column-strategy.abstract.js

@@ -0,0 +1,19 @@
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+/**
+ * Abstract base strategy for handling table column operations.
+ * Provides common functionality for all column-related strategies.
+ */
+export class TableColumnStrategy extends ActionHandleStrategy {
+  /**
+   * Finds the index range of cells within a table row.
+   * Returns the start and end indices of the given cell range.
+   *
+   * @param {(RTETableCellBlock | RTETableHeadCellBlock)[]} cellRange - The range of table cells to find indices for.
+   * @returns {[number, number]} A tuple containing the start and end indices.
+   */
+  getBoundaryCellIndexOfRow(cellRange) {
+    const firstCell = cellRange[0];
+    const lastCell = cellRange[cellRange.length - 1];
+    return [firstCell.parent.children.indexOf(firstCell), lastCell.parent.children.indexOf(lastCell)];
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/toggle-header-row-strategy.js

@@ -0,0 +1,133 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { AppendChildrenAction } from '../../../dto/actions/append-child-nodes-action';
+import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
+import { InsertChildrenBeforeAction } from '../../../dto/actions/insert-children-before-block';
+import { RemoveChildrenAction } from '../../../dto/actions/remove-child-action';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { RTETableBodyBlock } from '../dto/table-body-block';
+import { RTETableCellBlock } from '../dto/table-cell-block';
+import { RTETableHeadBlock } from '../dto/table-head-block';
+import { RTETableHeadCellBlock } from '../dto/table-head-cell-block';
+/**
+ * Strategy class for handling converting selected rows to header rows or reverting them back to normal rows.
+ */
+export class ToggleHeaderRowStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { selectedRows } = action;
+    const headerRows = [];
+    const bodyRows = [];
+    for (const row of selectedRows) {
+      if (row.parent instanceof RTETableBodyBlock) {
+        bodyRows.push(row);
+      }
+      else {
+        headerRows.push(row);
+      }
+    }
+    if (bodyRows.length > 0) {
+      this.convertToHeaderRows(bodyRows, target);
+    }
+    else {
+      this.revertToBodyRows(headerRows, target);
+    }
+    const root = this.getRootContent(target);
+    if (root) {
+      const focusNode = selectedRows[0].getFirstNode();
+      focusNode && root.apply(new UpdateCursorPositionAction(focusNode, 0));
+    }
+  }
+  /**
+   * Converts normal rows to header rows.
+   *
+   * @param {RTETableRowBlock[]} rows - The table row blocks to convert.
+   * @param {RTETableBlock} table - The table block containing the rows.
+   */
+  convertToHeaderRows(rows, table) {
+    let tableHead = table.children.find((block) => block instanceof RTETableHeadBlock);
+    const tableBody = rows[0].parent;
+    if (!tableHead) {
+      tableHead = RTETableHeadBlock.from({
+        id: generateUUID(),
+        type: 'table-head',
+        children: [],
+      });
+      table.apply(new InsertChildrenBeforeAction(tableBody, tableHead));
+    }
+    const endIndex = tableBody.children.indexOf(rows[rows.length - 1]);
+    const shouldConvertRows = tableBody.children.slice(0, endIndex + 1);
+    for (let i = 0; i < shouldConvertRows.length; i++) {
+      const rowBlock = shouldConvertRows[i];
+      rowBlock.children = rowBlock.children.map((cell) => this.convertTdToTh(cell));
+      tableBody.apply(new RemoveChildrenAction(rowBlock));
+    }
+    tableHead.apply(new AppendChildrenAction(shouldConvertRows));
+  }
+  /**
+   * Converts header rows back to normal rows.
+   *
+   * @param {RTETableRowBlock[]} rows - The table row blocks to convert.
+   * @param {RTETableBlock} table - The table block containing the rows.
+   */
+  revertToBodyRows(rows, table) {
+    let tableBody = table.children.find((block) => block instanceof RTETableBodyBlock);
+    const tableHead = rows[0].parent;
+    if (!tableBody) {
+      tableBody = RTETableBodyBlock.from({
+        id: generateUUID(),
+        type: 'table-body',
+        children: [],
+      });
+      table.apply(new InsertChildrenAfterAction(tableHead, tableBody));
+    }
+    const firstBodyRow = tableBody.children[0];
+    const startIndex = tableHead.children.indexOf(rows[0]);
+    const shouldConvertRows = tableHead.children.slice(startIndex);
+    for (let i = 0; i < shouldConvertRows.length; i++) {
+      const rowBlock = shouldConvertRows[i];
+      tableHead.apply(new RemoveChildrenAction(rowBlock));
+      rowBlock.children = this.convertThToTd(rowBlock, firstBodyRow);
+      if (firstBodyRow) {
+        tableBody.apply(new InsertChildrenBeforeAction(firstBodyRow, rowBlock));
+      }
+    }
+    if (!firstBodyRow) {
+      tableBody.apply(new AppendChildrenAction(shouldConvertRows));
+    }
+  }
+  /**
+   * Converts a table data cell to a table header cell.
+   *
+   * @param {RTETableHeadCellBlock} cell - The table cell block to convert.
+   * @returns {RTETableHeadCellBlock} The converted table header cell block.
+   */
+  convertTdToTh(cell) {
+    if (cell instanceof RTETableHeadCellBlock) {
+      return cell;
+    }
+    const headCell = RTETableHeadCellBlock.from(cell.toJSON());
+    headCell.parent = cell.parent;
+    return headCell;
+  }
+  /**
+   * Converts table header cells to table body cells.
+   *
+   * @param {RTETableRowBlock} row - The table row block containing the cells.
+   * @param {Nullable<RTETableRowBlock>} referenceRow - The reference row for comparison.
+   * @returns {RTETableCellBlock[]} The converted table body cell blocks.
+   */
+  convertThToTd(row, referenceRow) {
+    return row.children.map((cell, index) => {
+      let bodyCell = cell;
+      if (!referenceRow || referenceRow.children[index].type !== cell.type) {
+        const cellJSON = cell.toJSON();
+        bodyCell = RTETableCellBlock.from(cellJSON);
+      }
+      bodyCell.parent = row;
+      return bodyCell;
+    });
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/toggle-header-table-column-strategy.js

@@ -0,0 +1,99 @@
+import { RTETableBlock } from '../dto/table-block';
+import { RTETableCellBlock } from '../dto/table-cell-block';
+import { RTETableBodyBlock } from '../dto/table-body-block';
+import { RTETableHeadCellBlock } from '../dto/table-head-cell-block';
+import { InsertChildrenBeforeAction } from '../../../dto/actions/insert-children-before-block';
+import { RemoveChildrenAction } from '../../../dto/actions/remove-child-action';
+import { TableColumnStrategy } from './table-column-strategy.abstract';
+import { getAllTableRows, getParentBlockByType } from '../utils/utils';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+/**
+ * Strategy to handle the toggle of header state of a table column.
+ */
+export class ToggleHeaderTableColumnStrategy extends TableColumnStrategy {
+  /**
+   * Check if all selected cells are header cells.
+   *
+   * @param {(RTETableCellBlock | RTETableHeadCellBlock)[]} selectedCellRange - The range of selected table cell blocks.
+   * @returns {boolean} True if all selected cells are header cells, false otherwise.
+   */
+  static isFullHeaderSelection(selectedCellRange) {
+    if (selectedCellRange.length === 0) {
+      return false;
+    }
+    const endSelectedCell = selectedCellRange[selectedCellRange.length - 1];
+    const endSelectedCellIndex = endSelectedCell.parent.children.findIndex((child) => child === endSelectedCell);
+    const table = getParentBlockByType(endSelectedCell, RTETableBlock);
+    if (table) {
+      const allTableRows = getAllTableRows(table);
+      return allTableRows.every((row) => {
+        const cell = row.children[endSelectedCellIndex];
+        return cell instanceof RTETableHeadCellBlock;
+      });
+    }
+    return false;
+  }
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    var _a;
+    const headerOn = action.headerOn;
+    const [startCellIndex, endCellIndex] = this.getBoundaryCellIndexOfRow(action.tableCellHeaderRange);
+    const allTableBodyRows = ((_a = target.children.find((body) => body instanceof RTETableBodyBlock)) === null || _a === void 0 ? void 0 : _a.children) || [];
+    allTableBodyRows.forEach((row) => {
+      const firstTableCellIndex = row.children.findIndex((cell) => !(cell instanceof RTETableHeadCellBlock));
+      if (headerOn) {
+        this.toggleCellsToHeader(firstTableCellIndex, endCellIndex, row);
+      }
+      else {
+        this.toggleHeaderCellsToCells(firstTableCellIndex, row, startCellIndex);
+      }
+    });
+    const root = this.getRootContent(target);
+    if (root && action.tableCellHeaderRange[0].parent) {
+      const focusNode = action.tableCellHeaderRange[0].parent.getFirstNode();
+      focusNode && root.apply(new UpdateCursorPositionAction(focusNode, 0));
+    }
+  }
+  /**
+   * Toggles the specified header cells in a row to cells.
+   *
+   * @param {number} firstTableCellIndex - The index of the first table cell in the row.
+   * @param {RTETableRowBlock} row - The table row block containing the cells to toggle.
+   * @param {number} startCellIndex - The index of the first cell to toggle.
+   */
+  toggleHeaderCellsToCells(firstTableCellIndex, row, startCellIndex) {
+    const lastTableHeaderCellIndex = firstTableCellIndex >= 0 ? firstTableCellIndex - 1 : row.children.length - 1;
+    for (let cellIndex = startCellIndex; cellIndex <= lastTableHeaderCellIndex; cellIndex++) {
+      const cellToToggle = row.children[cellIndex];
+      const newCell = RTETableCellBlock.from(cellToToggle.toJSON());
+      this.replaceCellInRow(row, cellToToggle, newCell);
+    }
+  }
+  /**
+   * Toggles the specified cells in a row to header cells.
+   *
+   * @param {number} firstTableCellIndex - The index of the first table cell in the row.
+   * @param {number} endCellIndex - The index of the last cell to toggle.
+   * @param {RTETableRowBlock} row - The table row block containing the cells to toggle.
+   */
+  toggleCellsToHeader(firstTableCellIndex, endCellIndex, row) {
+    for (let tableCellIndex = firstTableCellIndex; tableCellIndex <= endCellIndex; tableCellIndex++) {
+      const cellToToggle = row.children[tableCellIndex];
+      const newHeaderCell = RTETableHeadCellBlock.from(cellToToggle.toJSON());
+      this.replaceCellInRow(row, cellToToggle, newHeaderCell);
+    }
+  }
+  /**
+   * Replaces a cell in a given row at the specified index with a new cell.
+   *
+   * @param {RTETableRowBlock} row - The table row block containing the cell to replace.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} oldCell - The cell to replace.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} newCell - The new cell to insert.
+   */
+  replaceCellInRow(row, oldCell, newCell) {
+    row.apply(new InsertChildrenBeforeAction(oldCell, newCell));
+    row.apply(new RemoveChildrenAction(oldCell));
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/update-table-cell-properties-strategy.js

@@ -0,0 +1,23 @@
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+/**
+ * Update table cell properties action handler strategy
+ */
+export class UpdateTableCellPropertiesStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const annotation = action.toAnnotation();
+    const tableCellRef = this.getDOMByEntity(target);
+    if (tableCellRef) {
+      const { backgroundColor = '', width, height, borderStr, padding, textAlign, verticalAlign, } = annotation;
+      tableCellRef.style.backgroundColor = backgroundColor;
+      tableCellRef.style.border = borderStr;
+      tableCellRef.style.width = width;
+      tableCellRef.style.height = height;
+      tableCellRef.style.padding = padding;
+      tableCellRef.style.textAlign = textAlign;
+      tableCellRef.style.verticalAlign = verticalAlign;
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/update-table-properties-strategy.js

@@ -0,0 +1,29 @@
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+/**
+ * Update table properties action handler strategy
+ */
+export class UpdateTablePropertiesStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const annotation = action.toAnnotation();
+    const tableRef = this.getDOMByEntity(target);
+    if (tableRef) {
+      // Update the table styles directly on the DOM element if possible to avoid the component re-render
+      const tableContainer = tableRef.closest('.v-rte--extension-table-container');
+      const { backgroundColor, width, height } = annotation;
+      tableRef.style.backgroundColor = backgroundColor;
+      tableRef.style.border = annotation.borderStr;
+      tableRef.style.width = width;
+      tableRef.style.height = height;
+      const margin = annotation.renderAlignmentStyle().margin;
+      tableRef.style.margin = margin;
+      if (tableContainer) {
+        tableContainer.style.width = width;
+        tableContainer.style.height = height;
+        tableContainer.style.margin = margin;
+      }
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/actions/delete-table-block-action.js

@@ -0,0 +1,13 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const DELETE_TABLE_BLOCK = 'DELETE_TABLE_BLOCK';
+/**
+ * Action to delete a table block
+ */
+export class DeleteTableBlockAction extends ModifyContentAction {
+  constructor(target) {
+    super();
+    this.isFlushable = true;
+    this.type = DELETE_TABLE_BLOCK;
+    this.tableBlock = target;
+  }
+}