@heartlandone/vega 2.78.0 → 2.80.0

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

@@ -0,0 +1,274 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { rgbToHex } from '../../../../../utils/ui';
+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 { RTETableHeadCellAnnotation } from '../annotations/table-head-cell-annotation';
+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';
+import { TableRowCommonUtilitiesStrategy } from './table-row-strategy.abstract';
+/**
+ * Strategy class for handling converting selected rows to header rows or reverting them back to normal rows.
+ */
+export class ToggleHeaderRowStrategy extends TableRowCommonUtilitiesStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { selectedRows } = action;
+    const [headerRows, bodyRows] = this.splitRowsBySection(selectedRows);
+    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);
+    const rowsToBeConvertedIndices = this.buildSelectedIndices(shouldConvertRows, tableBody.children);
+    const firstSelectedIndex = Math.min(...rowsToBeConvertedIndices);
+    const lastSelectedIndex = Math.max(...rowsToBeConvertedIndices);
+    if (rowsToBeConvertedIndices.size > 0) {
+      if (rowsToBeConvertedIndices.size < tableBody.children.length) {
+        const rowCellStartCols = this.getRowCellStartCols(tableBody.children);
+        const cellsToMove = this.collectCellsToMove(tableBody.children, rowCellStartCols, rowsToBeConvertedIndices, firstSelectedIndex, lastSelectedIndex);
+        this.insertMovedCells(cellsToMove, tableBody.children, rowCellStartCols);
+      }
+      this.convertBodyRowsToHeaderRows(tableBody, tableHead, shouldConvertRows);
+    }
+  }
+  /**
+   * Converts body rows to header rows.
+   *
+   * @param {RTETableBodyBlock} tableBody - The table body block containing the rows to be converted.
+   * @param {RTETableHeadBlock} tableHead - The table head block to which the rows will be moved.
+   * @param {RTETableRowBlock[]} shouldConvertRows - The rows to be converted.
+   */
+  convertBodyRowsToHeaderRows(tableBody, tableHead, shouldConvertRows) {
+    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 startIndex = tableHead.children.indexOf(rows[0]);
+    const shouldConvertRows = tableHead.children.slice(startIndex);
+    const rowsToBeConvertedIndices = this.buildSelectedIndices(shouldConvertRows, tableHead.children);
+    if (rowsToBeConvertedIndices.size > 0) {
+      const rowCellStartCols = this.getRowCellStartCols(tableHead.children);
+      const cellsToMove = this.collectCellsToMove(tableHead.children, rowCellStartCols, rowsToBeConvertedIndices, Math.min(...rowsToBeConvertedIndices), Math.max(...rowsToBeConvertedIndices));
+      this.insertMovedCells(cellsToMove, tableHead.children, rowCellStartCols);
+      this.convertHeadRowsToBodyRows(tableHead, tableBody, shouldConvertRows);
+    }
+  }
+  /**
+   * Convert header rows to body rows.
+   *
+   * @param {RTETableHeadBlock} tableHead - The table head block containing the rows to be converted.
+   * @param {RTETableBodyBlock} tableBody - The table body block to which the rows will be moved.
+   * @param {RTETableRowBlock[]} shouldConvertRows - The rows to be converted.
+   */
+  convertHeadRowsToBodyRows(tableHead, tableBody, shouldConvertRows) {
+    const firstBodyRow = tableBody.children[0];
+    const rowCellStartCols = this.getRowCellStartCols(shouldConvertRows);
+    for (let i = 0; i < shouldConvertRows.length; i++) {
+      const rowBlock = shouldConvertRows[i];
+      tableHead.apply(new RemoveChildrenAction(rowBlock));
+      const headCellLength = firstBodyRow ? this.getHeadCellLength(firstBodyRow) : 0;
+      rowBlock.children = this.convertThToTd(rowBlock, rowCellStartCols[i], headCellLength);
+      if (firstBodyRow) {
+        tableBody.apply(new InsertChildrenBeforeAction(firstBodyRow, rowBlock));
+      }
+    }
+    if (!firstBodyRow) {
+      tableBody.apply(new AppendChildrenAction(shouldConvertRows));
+    }
+  }
+  /**
+   * Collect cells that need to be moved to the next remaining row.
+   *
+   * @param {RTETableRowBlock[]} allRows - All rows in the section.
+   * @param {number[][]} rowCellStartCols - Logical start columns per row.
+   * @param {Set<number>} selectedIndices - Indices of selected rows.
+   * @param {number} firstSelectedIndex - First selected row index.
+   * @param {number} lastSelectedIndex - Last selected row index.
+   * @returns {Map<number, CellToMove[]>} Map of target row index to cells to move.
+   */
+  collectCellsToMove(allRows, rowCellStartCols, selectedIndices, firstSelectedIndex, lastSelectedIndex) {
+    const cellsToMove = new Map();
+    const rowCount = allRows.length;
+    for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+      const row = allRows[rowIndex];
+      const cellCount = row.children.length;
+      for (let cellIndex = 0; cellIndex < cellCount; cellIndex++) {
+        const cell = row.children[cellIndex];
+        const cellRowSpan = cell.rowSpan;
+        // Skip cells without rowspan
+        if (cellRowSpan <= TableRowCommonUtilitiesStrategy.DEFAULT_CELLSPAN)
+          continue;
+        const cellEndIndex = rowIndex + cellRowSpan - 1;
+        // If the cell's row span does not intersect with the removal range, skip it
+        if (!this.intersectsRemovalRange(rowIndex, cellEndIndex, firstSelectedIndex, lastSelectedIndex)) {
+          continue;
+        }
+        const selectedRowsCount = this.countRemovedRows(rowIndex, cellEndIndex, selectedIndices);
+        const newRowSpan = cellRowSpan - selectedRowsCount;
+        // Scenario 1: Cell starts before selected range and spans into it, head row convert to body row
+        if (rowIndex < firstSelectedIndex && cellEndIndex >= firstSelectedIndex) {
+          this.updateCellSpan(cell, 'rowspan', newRowSpan);
+          const targetRowIndex = firstSelectedIndex;
+          if (targetRowIndex < rowCount && selectedIndices.has(targetRowIndex)) {
+            const logicalStartCol = rowCellStartCols[rowIndex][cellIndex];
+            if (!cellsToMove.has(targetRowIndex)) {
+              cellsToMove.set(targetRowIndex, []);
+            }
+            cellsToMove.get(targetRowIndex).push({
+              cell: this.cloneCellWithRowSpan(cell, selectedRowsCount),
+              newRowSpan: selectedRowsCount,
+              cellIndex,
+              logicalStartCol,
+            });
+          }
+          continue;
+        }
+        // Scenario 2: Cell starts in selected row and spans beyond, we need to move it to the next remaining row and update rowspan. body row convert to head row.
+        if (rowIndex >= firstSelectedIndex && cellEndIndex > lastSelectedIndex) {
+          this.updateCellSpan(cell, 'rowspan', selectedRowsCount);
+          const targetRowIndex = lastSelectedIndex + 1;
+          if (targetRowIndex < rowCount && !selectedIndices.has(targetRowIndex)) {
+            const logicalStartCol = rowCellStartCols[rowIndex][cellIndex];
+            if (!cellsToMove.has(targetRowIndex)) {
+              cellsToMove.set(targetRowIndex, []);
+            }
+            cellsToMove.get(targetRowIndex).push({
+              cell: this.cloneCellWithRowSpan(cell, newRowSpan),
+              newRowSpan,
+              cellIndex,
+              logicalStartCol,
+            });
+          }
+        }
+      }
+    }
+    return cellsToMove;
+  }
+  /**
+   * 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.
+   * Need to check each cell's logical column index to determine whether it should be converted or not.
+   *
+   * @param {RTETableRowBlock} row - The table row block containing the cells.
+   * @param {number[]} rowCellStartCol - The starting column indices for each cell in the row.
+   * @param {number} headCellLength - The number of header cells in the reference row.
+   * @returns {RTETableCellBlock[]} The converted table body cell blocks.
+   */
+  convertThToTd(row, rowCellStartCol, headCellLength) {
+    return row.children.map((cell, index) => {
+      let bodyCell = cell;
+      const isHeadCell = rowCellStartCol[index] < headCellLength ? true : false;
+      const cellJSON = cell.toJSON();
+      bodyCell = isHeadCell
+        ? cell
+        : RTETableCellBlock.from(this.deleteHeadCellDefaultBackground(cellJSON));
+      bodyCell.parent = row;
+      return bodyCell;
+    });
+  }
+  /**
+   * Clones a table cell with a new rowspan value, used when moving cells during row conversion.
+   * For example, when converting body rows contains a cell with rowspan, we need to clone a new empty cell with same colspan and insert it into the remaining row, and update the original cell's rowspan to make sure the table structure is correct after conversion.
+   *
+   * @param {RTETableCellBlock} cell - The cell to clone.
+   * @param {number} newRowSpan - The new rowspan value for the cloned cell.
+   * @returns {RTETableCellBlock} The cloned cell with updated rowspan.
+   */
+  cloneCellWithRowSpan(cell, newRowSpan) {
+    // Clone the cell (parent will be updated when inserted)
+    const clonedCell = cell.clone(cell.parent);
+    clonedCell.id = generateUUID();
+    clonedCell.children = []; // Clear children to make it an empty cell
+    const paragraph = this.createNewParagraph('');
+    paragraph && clonedCell.apply(new AppendChildrenAction([paragraph]));
+    // Update the rowspan of the cloned cell
+    this.updateCellSpan(clonedCell, 'rowspan', newRowSpan);
+    return clonedCell;
+  }
+  /**
+   * Delete the default background color annotation from a header cell when converting it to a body cell.
+   *
+   * @param {VegaRTETableHeadCellBlock} cell - The table head cell block to process.
+   * @returns {VegaRTETableCellBlock} The processed table cell block with default background color annotation removed if applicable.
+   */
+  deleteHeadCellDefaultBackground(cell) {
+    var _a;
+    if (cell && cell.annotations && cell.annotations.customStyle) {
+      delete cell.annotations.tableCell;
+      const backgroundColor = cell.annotations.customStyle.backgroundColor;
+      const defaultBackgroundColor = RTETableHeadCellAnnotation.getDefaultBackgroundColor();
+      if (backgroundColor &&
+        (backgroundColor === defaultBackgroundColor ||
+          ((_a = rgbToHex(backgroundColor)) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === defaultBackgroundColor)) {
+        delete cell.annotations.customStyle.backgroundColor;
+      }
+    }
+    return cell;
+  }
+}

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

@@ -0,0 +1,159 @@
+import { RTETableBlock } from '../dto/table-block';
+import { RTETableCellBlock } from '../dto/table-cell-block';
+import { RTETableBodyBlock } from '../dto/table-body-block';
+import { RTETableHeadBlock } from '../dto/table-head-block';
+import { RTETableHeadCellBlock } from '../dto/table-head-cell-block';
+import { ReplaceTableCellAction } from '../actions/replace-table-cell-action';
+import { SplitTableCellAction } from '../actions/split-table-cell-action';
+import { TableColumnStrategy } from './table-column-strategy.abstract';
+import { getAllTableRows, buildTableGrid, getParentBlockByType, findFirstBodyColIndex, getSelectedCellsBoundary, } 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 cells in the column containing the selected cell are head cells.
+   *
+   * @param {(RTETableCellBlock | RTETableHeadCellBlock)[]} selectedCellRange - The range of selected table cell blocks.
+   * @returns {boolean} True if all cells in the column containing the selected cell are head cells, false otherwise.
+   */
+  static isFullHeaderSelection(selectedCellRange) {
+    if (selectedCellRange.length === 0) {
+      return false;
+    }
+    const firstSelectedCell = selectedCellRange[0];
+    const table = getParentBlockByType(firstSelectedCell, RTETableBlock);
+    if (table) {
+      const allTableRows = getAllTableRows(table);
+      const tableGrid = buildTableGrid(allTableRows);
+      const tableCellsById = new Map();
+      allTableRows.forEach((row) => {
+        row.children.forEach((cell) => tableCellsById.set(cell.id, cell));
+      });
+      const [minCol, maxCol] = getSelectedCellsBoundary(selectedCellRange, table, allTableRows, tableGrid);
+      for (const gridRow of tableGrid) {
+        for (let col = minCol; col <= maxCol; col++) {
+          const cell = tableCellsById.get(gridRow[col]);
+          if (cell && !(cell instanceof RTETableHeadCellBlock)) {
+            return false;
+          }
+        }
+      }
+      return true;
+    }
+    return false;
+  }
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const headerOn = action.headerOn;
+    const allTableRows = getAllTableRows(target);
+    const tableGrid = buildTableGrid(allTableRows);
+    const [minSelectCellCol, maxSelectCellCol] = this.getBoundaryCellColumnRange(action.tableCellHeaderRange, allTableRows, tableGrid);
+    const shouldSplitHeadCells = headerOn || (!headerOn && minSelectCellCol > 0);
+    if (shouldSplitHeadCells) {
+      this.toggleHeadRows(target, allTableRows, tableGrid, headerOn, maxSelectCellCol, minSelectCellCol);
+    }
+    this.toggleBodyRows(target, allTableRows, tableGrid, headerOn, minSelectCellCol, maxSelectCellCol);
+    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));
+    }
+  }
+  /**
+   * Toggle header cells within existing table-head rows.
+   *
+   * @param {RTETableBlock} table - The target table block.
+   * @param {RTETableRowBlock[]} allTableRows - All table rows in order.
+   * @param {string[][]} tableGrid - Table grid representation.
+   * @param {boolean} headerOn - Whether header mode is being enabled.
+   * @param {number} maxSelectCellCol - Maximum selected logical column.
+   * @param {number} minSelectCellCol - Minimum selected logical column.
+   */
+  toggleHeadRows(table, allTableRows, tableGrid, headerOn, maxSelectCellCol, minSelectCellCol) {
+    var _a;
+    const allTableHeadRows = ((_a = table.children.find((head) => head instanceof RTETableHeadBlock)) === null || _a === void 0 ? void 0 : _a.children) || [];
+    const headRowLength = allTableHeadRows.length;
+    for (let rowIndex = 0; rowIndex < headRowLength; rowIndex++) {
+      const row = allTableRows[rowIndex];
+      const endColIndex = headerOn ? maxSelectCellCol : minSelectCellCol - 1;
+      this.toggleCellType(table, row, tableGrid[rowIndex], 0, endColIndex, () => true, (cell) => RTETableHeadCellBlock.from(cell.toJSON()));
+    }
+  }
+  /**
+   * Toggle header cells within body rows.
+   *
+   * @param {RTETableBlock} table - The target table block.
+   * @param {RTETableRowBlock[]} allTableRows - All table rows in order.
+   * @param {string[][]} tableGrid - Table grid representation.
+   * @param {boolean} headerOn - Whether header mode is being enabled.
+   * @param {number} minSelectCellCol - Minimum selected logical column.
+   * @param {number} maxSelectCellCol - Maximum selected logical column.
+   */
+  toggleBodyRows(table, allTableRows, tableGrid, headerOn, minSelectCellCol, maxSelectCellCol) {
+    var _a;
+    const tableColLength = tableGrid[0].length;
+    const allTableBodyRows = ((_a = table.children.find((body) => body instanceof RTETableBodyBlock)) === null || _a === void 0 ? void 0 : _a.children) || [];
+    const headRowLength = allTableRows.length - allTableBodyRows.length;
+    for (let i = 0; i < allTableBodyRows.length; i++) {
+      const rowIndex = i + headRowLength;
+      const row = allTableRows[rowIndex];
+      const gridRow = tableGrid[rowIndex];
+      const startColIndex = findFirstBodyColIndex(gridRow, row, tableColLength);
+      if (headerOn) {
+        if (startColIndex > -1) {
+          this.toggleCellType(table, row, gridRow, startColIndex, maxSelectCellCol, (cell) => !(cell instanceof RTETableHeadCellBlock), (cell) => RTETableHeadCellBlock.from(cell.toJSON()));
+        }
+        continue;
+      }
+      const lastHeaderCol = startColIndex === -1 ? tableColLength - 1 : startColIndex - 1;
+      this.toggleCellType(table, row, gridRow, minSelectCellCol, lastHeaderCol, (cell) => cell instanceof RTETableHeadCellBlock, (cell) => RTETableCellBlock.from(cell.toJSON()));
+    }
+  }
+  /**
+   * Toggle cell types in a row within a logical column range.
+   *
+   * @param {RTETableBlock} table - The table block containing the target row.
+   * @param {RTETableRowBlock} row - The table row block.
+   * @param {string[]} gridRow - The grid row array.
+   * @param {number} startCol - Start logical column.
+   * @param {number} endCol - End logical column.
+   * @param {(cell: RTETableCellBlock | RTETableHeadCellBlock) => boolean} shouldConvert - Predicate to determine if a cell should be converted.
+   * @param {(cell: RTETableCellBlock | RTETableHeadCellBlock) => RTETableCellBlock | RTETableHeadCellBlock} convert - Function to convert the cell.
+   */
+  toggleCellType(table, row, gridRow, startCol, endCol, shouldConvert, convert) {
+    for (let col = startCol; col <= endCol; col++) {
+      const cellId = gridRow[col];
+      const cell = row.children.find((c) => c.id === cellId);
+      if (cell && shouldConvert(cell)) {
+        const cellStartCol = gridRow.indexOf(cellId);
+        const targetCellType = convert(cell).type;
+        const payload = {
+          table,
+          cell,
+          col,
+          cellStartCol,
+          endCol,
+          targetCellType,
+        };
+        const cellEndCol = cellStartCol + cell.colSpan - 1;
+        const shouldSplit = cellEndCol > endCol || cellStartCol < col;
+        if (shouldSplit) {
+          row.apply(new SplitTableCellAction(payload));
+          if (cellEndCol > endCol) {
+            return;
+          }
+          col = cellEndCol;
+          continue;
+        }
+        row.apply(new ReplaceTableCellAction(payload));
+      }
+      if (cell) {
+        col += cell.colSpan - 1;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+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 { width, height, borderStr, padding, textAlign, verticalAlign } = annotation;
+      const backgroundColor = annotation.renderStyle().backgroundColor || '';
+      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;
+      this.updateCustomStyleAnnotation(target, [
+        'backgroundColor',
+        'border',
+        'width',
+        'height',
+        'padding',
+        'textAlign',
+        'verticalAlign',
+      ]);
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+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 { backgroundColorAnnotation, width, height } = annotation;
+      tableRef.style.backgroundColor = backgroundColorAnnotation.renderStyle().color;
+      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;
+      }
+      this.updateCustomStyleAnnotation(target, [
+        'backgroundColor',
+        'border',
+        'width',
+        'height',
+        'margin',
+      ]);
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/actions/create-segment-table-cell-action.js

@@ -0,0 +1,13 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const CREATE_SEGMENT_TABLE_CELL = 'CREATE_SEGMENT_TABLE_CELL';
+/**
+ * Action to create a split segment table cell.
+ */
+export class CreateSegmentTableCellAction extends ModifyContentAction {
+  constructor(payload) {
+    super();
+    this.isFlushable = true;
+    this.type = CREATE_SEGMENT_TABLE_CELL;
+    this.payload = payload;
+  }
+}

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;
+  }
+}

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

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

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

@@ -0,0 +1,18 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const DELETE_TABLE_ROW = 'DELETE_TABLE_ROW';
+/**
+ * Action class for deleting a specific table row.
+ */
+export class DeleteTableRowAction extends ModifyContentAction {
+  /**
+   * Constructs an InsertTableRowAction.
+   *
+   * @param {RTETableRowBlock[]} rowsToBeRemoved - The rows to be removed from the table.
+   */
+  constructor(rowsToBeRemoved) {
+    super();
+    this.isFlushable = true;
+    this.type = DELETE_TABLE_ROW;
+    this.rowsToBeRemoved = rowsToBeRemoved;
+  }
+}

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

@@ -0,0 +1,13 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const INSERT_TABLE_BLOCK = 'INSERT_TABLE_BLOCK';
+/**
+ * Action to insert a table block into the rich text editor.
+ */
+export class InsertTableBlockAction extends ModifyContentAction {
+  constructor(rowCount, columnCount) {
+    super();
+    this.type = INSERT_TABLE_BLOCK;
+    this.rowCount = rowCount;
+    this.columnCount = columnCount;
+  }
+}

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

@@ -0,0 +1,19 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const INSERT_TABLE_COLUMN = 'INSERT_TABLE_COLUMN';
+export var InsertTableColumnDirection;
+(function (InsertTableColumnDirection) {
+  InsertTableColumnDirection["LEFT"] = "LEFT";
+  InsertTableColumnDirection["RIGHT"] = "RIGHT";
+})(InsertTableColumnDirection || (InsertTableColumnDirection = {}));
+/**
+ * Action to insert a table column into the RTETable.
+ */
+export class InsertTableColumnAction extends ModifyContentAction {
+  constructor(insertDirection, tableCellInsertRange) {
+    super();
+    this.isFlushable = true;
+    this.type = INSERT_TABLE_COLUMN;
+    this.tableCellInsertRange = tableCellInsertRange;
+    this.insertDirection = insertDirection;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/actions/insert-table-row-into-different-section-action.js

@@ -0,0 +1,21 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const INSERT_TABLE_ROW_INTO_DIFFERENT_SECTION = 'INSERT_TABLE_ROW_INTO_DIFFERENT_SECTION';
+/**
+ * Action class for inserting a new row into a table within the rich text editor.
+ */
+export class InsertTableRowIntoDifferentSectionAction extends ModifyContentAction {
+  /**
+   * Constructs an InsertTableRowIntoDifferentSectionAction.
+   *
+   * @param {InsertTableRowDirection} insertDirection - The direction to insert the new row (above or below the current row).
+   * @param {RTETableRowBlock[]} selectedRows - The currently selected rows in the table.
+   */
+  constructor(insertDirection, selectedRows = []) {
+    super();
+    this.isFlushable = true;
+    this.type = INSERT_TABLE_ROW_INTO_DIFFERENT_SECTION;
+    this.selectedRows = [];
+    this.insertDirection = insertDirection;
+    this.selectedRows = selectedRows;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/actions/insert-table-row-into-same-section-action.js

@@ -0,0 +1,27 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const INSERT_TABLE_ROW = 'INSERT_TABLE_ROW';
+export const INSERT_TABLE_ROW_INTO_SAME_SECTION = 'INSERT_TABLE_ROW_INTO_SAME_SECTION';
+export var InsertTableRowDirection;
+(function (InsertTableRowDirection) {
+  InsertTableRowDirection["ABOVE"] = "ABOVE";
+  InsertTableRowDirection["BELOW"] = "BELOW";
+})(InsertTableRowDirection || (InsertTableRowDirection = {}));
+/**
+ * Action class for inserting a new row into a table within the rich text editor.
+ */
+export class InsertTableRowIntoSameSectionAction extends ModifyContentAction {
+  /**
+   * Constructs an InsertTableRowIntoSameSectionAction.
+   *
+   * @param {InsertTableRowDirection} insertDirection - The direction to insert the new row (above or below the current row).
+   * @param {RTETableRowBlock[]} selectedRows - The currently selected rows in the table.
+   */
+  constructor(insertDirection, selectedRows = []) {
+    super();
+    this.isFlushable = true;
+    this.type = INSERT_TABLE_ROW_INTO_SAME_SECTION;
+    this.selectedRows = [];
+    this.insertDirection = insertDirection;
+    this.selectedRows = selectedRows;
+  }
+}

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

@@ -0,0 +1,17 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const MERGE_CELLS = 'MERGE_CELLS';
+/**
+ * Action to merge cells into the RTETable.
+ */
+export class MergeCellsAction extends ModifyContentAction {
+  constructor(targetCell, mergeCells, colSpan, rowSpan, direction) {
+    super();
+    this.type = MERGE_CELLS;
+    this.isFlushable = true;
+    this.targetCell = targetCell;
+    this.mergeCells = mergeCells;
+    this.colSpan = colSpan;
+    this.rowSpan = rowSpan;
+    this.direction = direction;
+  }
+}