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

package/dist/collection/components/vega-rich-text-content/vega-rich-text-content.js

@@ -13,6 +13,8 @@ import { VegaRichTextContentStateController } from './slimmers/controllers/vega-
 import { findParent } from '../../utils/ui';
 import { waitForComponentDidRender } from '../../helpers/common';
 import { RTEExtensionStylesController } from './slimmers/controllers/vega-rich-text-content-extensions-styles-controller';
+import { DarkModeStateControllerSlimmer } from '../../helpers/slimmers/dark-mode-state-controller-slimmer';
+import { VegaInternalThemeManager } from '../../helpers/theme/internal-theme-manager';
 /**
  * @vegaVersion 2.34.0
  */
@@ -23,6 +25,7 @@ export class VegaRichTextContent {
     this.vegaRichTextContentRenderer = new VegaRichTextContentRenderer();
     this.vegaRichTextContentStateController = new VegaRichTextContentStateController();
     this.vegaRichTextContentExtensionsStylesController = new RTEExtensionStylesController();
+    this.darkModeStateControllerSlimmer = new DarkModeStateControllerSlimmer();
     /**
      * Specifies whether the rich text content is editable.
      *
@@ -33,6 +36,7 @@ export class VegaRichTextContent {
      * Holds the custom styles generated by extensions.
      */
     this.extensionStyles = '';
+    this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
     /**
      * Defines the configuration for rich text content extensions.
      * It enables support for custom nodes, ensuring that extended content is rendered correctly.
@@ -122,7 +126,8 @@ export class VegaRichTextContent {
   static get states() { return {
     "placeholder": {},
     "contentEditable": {},
-    "extensionStyles": {}
+    "extensionStyles": {},
+    "isInDarkMode": {}
   }; }
   static get methods() { return {
     "vegaFocus": {
@@ -176,3 +181,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextContent.prototype, "vegaRichTextContentExtensionsStylesController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextContent.prototype, "darkModeStateControllerSlimmer", void 0);

package/dist/collection/components/vega-rich-text-editor/dto/renderers/nodes/text-node-renderer.js

@@ -2,22 +2,12 @@ import { h } from '@stencil/core';
 import { RTENodeRenderer } from './node-renderer.abstract';
 import { NodeAnnotationTypeEnum } from '../../annotations/node-annotation.abstract';
 import { ZERO_WIDTH_SPACE } from '../../../constants/constant';
-import TextNodeElementRenderingRegistry from '../../../slimmers/controllers/text-node-rendering-registry';
 class RTETextNodeRenderer extends RTENodeRenderer {
   render(node) {
     const inlineHtmlAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.INLINE_HTML);
     const textNodeDom = this.renderText(node);
     return inlineHtmlAnnotation ? this.renderWithWrapper(textNodeDom, inlineHtmlAnnotation) : textNodeDom;
   }
-  registerRef(ref, node) {
-    super.registerRef(ref, node);
-    if (ref) {
-      const textColorAnnotation = node.getAnnotationByType('TEXT_COLOR');
-      if (textColorAnnotation) {
-        TextNodeElementRenderingRegistry.register(ref, textColorAnnotation);
-      }
-    }
-  }
   renderWithWrapper(textNodeDom, inlineHtmlNode) {
     const { htmlTag: HtmlTag, customStyle, customAttribute, customClass, } = inlineHtmlNode;
     const attrs = Object.assign(Object.assign({}, customAttribute === null || customAttribute === void 0 ? void 0 : customAttribute.render()), { style: customStyle === null || customStyle === void 0 ? void 0 : customStyle.renderStyle(), class: customClass === null || customClass === void 0 ? void 0 : customClass.renderClass().join(' ') });

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

@@ -1,4 +1,5 @@
 import { generateUUID } from '../../../../../utils/misc';
+import { cleanObject } from '../../../../../utils/object';
 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';
@@ -6,6 +7,7 @@ import { InsertChildrenBeforeAction } from '../../../dto/actions/insert-children
 import { InsertTableRowDirection } from '../actions/insert-table-row-action';
 import { RTETableBodyBlock } from '../dto/table-body-block';
 import { RTETableHeadBlock } from '../dto/table-head-block';
+import { RTETableHeadCellBlock } from '../dto/table-head-cell-block';
 import { RTETableRowBlock } from '../dto/table-row-block';
 /**
  * Strategy class for handling the insertion of a new row into a table.
@@ -17,57 +19,52 @@ export class InsertTableRowStrategy extends ActionHandleStrategy {
   handleAction(action, target) {
     const { insertDirection, selectedRows } = action;
     // The reference block will control where to insert the new row
-    let refBlock = insertDirection === InsertTableRowDirection.ABOVE
+    const 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({
+    const refBlockIsHeaderRow = refBlock.parent instanceof RTETableHeadBlock;
+    // The refBlock is a head row and new row is also a head row or the refBlock is a body row and new row is also a body row
+    if (this.shouldInsertHeaderRow(refBlock, insertDirection) || !refBlockIsHeaderRow) {
+      const rowBlock = RTETableRowBlock.from({
         id: generateUUID(),
         type: 'table-row',
         children: refBlock.children.map((item) => {
-          return this.getDefaultCellBlockTemplate(item.type);
+          return this.getDefaultCellBlockTemplate(item.type, item.colSpan);
         }),
       });
       if (insertDirection === InsertTableRowDirection.ABOVE) {
-        refBlock.parent.apply(new InsertChildrenBeforeAction(refBlock, headerBlock));
+        refBlock.parent.apply(new InsertChildrenBeforeAction(refBlock, rowBlock));
       }
       else {
-        refBlock.parent.apply(new InsertChildrenAfterAction(refBlock, headerBlock));
+        refBlock.parent.apply(new InsertChildrenAfterAction(refBlock, rowBlock));
       }
     }
     else {
-      let direction = insertDirection;
+      // The refBlock is a head row and new row is a body row
       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({
+      const rowBlockJSON = {
         id: generateUUID(),
         type: 'table-row',
-        children: refBlock.children.map((item) => {
-          return this.getDefaultCellBlockTemplate(refBlockIsHeaderRow ? 'table-cell' : item.type);
-        }),
-      });
+        children: [],
+      };
       if (!tableBody) {
+        rowBlockJSON.children = refBlock.children.map((item) => {
+          const { colSpan } = item;
+          return this.getDefaultCellBlockTemplate('table-cell', colSpan);
+        });
         tableBody = RTETableBodyBlock.from({
           id: generateUUID(),
           type: 'table-body',
           children: [],
         });
-        tableBody.apply(new AppendChildrenAction([rowBlock]));
+        tableBody.apply(new AppendChildrenAction([RTETableRowBlock.from(rowBlockJSON)]));
         target.apply(new AppendChildrenAction([tableBody]));
       }
       else {
-        if (direction === InsertTableRowDirection.ABOVE) {
-          tableBody.apply(new InsertChildrenBeforeAction(refBlock, rowBlock));
-        }
-        else {
-          tableBody.apply(new InsertChildrenAfterAction(refBlock, rowBlock));
-        }
+        const firstBodyRow = tableBody.children[0];
+        const headCellLength = this.getHeadCellLength(firstBodyRow);
+        rowBlockJSON.children = this.createTableCells(refBlock, headCellLength);
+        tableBody.apply(new InsertChildrenBeforeAction(firstBodyRow, RTETableRowBlock.from(rowBlockJSON)));
       }
     }
   }
@@ -92,11 +89,17 @@ export class InsertTableRowStrategy extends ActionHandleStrategy {
    * Get the default cell block template.
    *
    * @param {string} cellType - The type of the cell block.
+   * @param {number} colSpan - The colspan attribute for the cell.
+   * @param {number} rowSpan - The rowspan attribute for the cell.
    * @returns {VegaRTETableCellBlock | VegaRTETableHeadCellBlock} The default cell block template.
    */
-  getDefaultCellBlockTemplate(cellType) {
+  getDefaultCellBlockTemplate(cellType, colSpan, rowSpan = 1) {
+    const customAttribute = cleanObject({
+      colspan: colSpan > 1 ? colSpan.toString() : null,
+      rowspan: rowSpan > 1 ? rowSpan.toString() : null,
+    });
     const id = generateUUID();
-    return {
+    const cellBlock = {
       id,
       type: cellType,
       children: [
@@ -113,5 +116,48 @@ export class InsertTableRowStrategy extends ActionHandleStrategy {
         },
       ],
     };
+    if (Object.keys(customAttribute).length > 0) {
+      cellBlock.annotations = {
+        customAttribute,
+      };
+    }
+    return cellBlock;
+  }
+  /**
+   * Get the column head end index in a table row.
+   *
+   * @param {RTETableRowBlock} tableRow - The table row block.
+   * @returns {number} The end index of the column head.
+   */
+  getHeadCellLength(tableRow) {
+    let length = 0;
+    for (let i = 0; i < tableRow.children.length; i++) {
+      const cellBlock = tableRow.children[i];
+      if (cellBlock instanceof RTETableHeadCellBlock) {
+        length += cellBlock.colSpan;
+      }
+      else {
+        break;
+      }
+    }
+    return length;
+  }
+  /**
+   * Create table cells based on reference row and head cell length.
+   *
+   * @param {RTETableRowBlock} refRow - The reference table row block.
+   * @param {number} headCellLength - The length of the head cells.
+   * @returns {VegaRTETableCellBlock[]} An array of table cell blocks.
+   */
+  createTableCells(refRow, headCellLength) {
+    const cells = [];
+    let currentHeadCellLength = 0;
+    for (const cell of refRow.children) {
+      const isHeadCell = currentHeadCellLength < headCellLength;
+      const cellType = isHeadCell ? 'table-head-cell' : 'table-cell';
+      cells.push(this.getDefaultCellBlockTemplate(cellType, cell.colSpan));
+      currentHeadCellLength += cell.colSpan;
+    }
+    return cells;
   }
 }

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

@@ -0,0 +1,120 @@
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { RemoveChildrenAction } from '../../../dto/actions/remove-child-action';
+import { getFirstNode, getCellSpan, buildTableGrid, setSpanAttributes } from '../utils/utils';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { MergeCellsOperationType } from '../setting-event-handlers/merge-cells-operation';
+/**
+ * Strategy to handle the merging of table cells.
+ */
+export class MergeCellsStrategy extends ActionHandleStrategy {
+  /**
+   * Handles the merge cells action.
+   *
+   * @param {MergeCellsAction} action - The action containing merge details.
+   * @param {RTETableBlock} target - The target table block.
+   */
+  handleAction(action, target) {
+    const { targetCell, mergeCells, colSpan, rowSpan, direction } = action;
+    this.mergeContentToTargetCell(targetCell, mergeCells);
+    setSpanAttributes(targetCell, colSpan, rowSpan, target);
+    this.deleteOtherSelectedCells(mergeCells, targetCell);
+    if (direction !== MergeCellsOperationType.MERGE_CELL_LEFT &&
+      direction !== MergeCellsOperationType.MERGE_CELL_RIGHT &&
+      rowSpan > 1) {
+      this.clearRowSpanIfUniformAcrossRow(targetCell, target, rowSpan);
+    }
+    const root = this.getRootContent(target);
+    const nextFocusNode = getFirstNode(targetCell);
+    if (root && nextFocusNode) {
+      root.apply(new UpdateCursorPositionAction(nextFocusNode));
+    }
+  }
+  /**
+   * Merge content from all selected cells to the target cell.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} targetCell - The target cell.
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - All selected cells.
+   */
+  mergeContentToTargetCell(targetCell, selectedCells) {
+    const allChildren = selectedCells.flatMap((cell) => cell.children);
+    const valueCells = allChildren.filter((child) => child.isNotEmpty());
+    const allChildrenBlocks = valueCells.length > 0 ? valueCells : [allChildren[0]];
+    targetCell.children = allChildrenBlocks.map((childBlock) => childBlock.clone(targetCell));
+  }
+  /**
+   * Delete all selected cells except the target cell.
+   *
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - All selected cells.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} targetCell - The target cell (should not be deleted).
+   */
+  deleteOtherSelectedCells(selectedCells, targetCell) {
+    selectedCells.forEach((cell) => {
+      if (cell !== targetCell) {
+        const row = cell.parent;
+        row.apply(new RemoveChildrenAction(cell));
+      }
+    });
+  }
+  /**
+   * Remove rowSpan from all cells in the target row when every cell shares the same rowSpan.
+   * This avoids keeping stale row spans after a merge operation that no longer spans rows.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} targetCell - The target cell to set attributes on.
+   * @param {RTETableBlock} table - The table block.
+   * @param {number} targetCellRowSpan - The target cell rowSpan.
+   */
+  clearRowSpanIfUniformAcrossRow(targetCell, table, targetCellRowSpan) {
+    const targetRow = targetCell.parent;
+    const allRows = targetRow.parent.children;
+    const grid = buildTableGrid(allRows);
+    const rowIndexes = [];
+    for (let r = 0; r < grid.length; r++) {
+      if (grid[r].includes(targetCell.id)) {
+        rowIndexes.push(r);
+      }
+    }
+    if (rowIndexes.length > 1) {
+      const windowStart = rowIndexes[0];
+      const windowEnd = windowStart + targetCellRowSpan - 1;
+      const uniformIds = new Set();
+      let minRowSpan = Number.POSITIVE_INFINITY;
+      for (let c = 0; c < grid[0].length; c++) {
+        let firstId = grid[windowStart][c];
+        let count = 1;
+        let isRowSpan = false;
+        for (let r = windowStart + 1; r <= windowEnd; r++) {
+          if (grid[r][c] === firstId) {
+            count++;
+            continue;
+          }
+          if (count > 1) {
+            isRowSpan = true;
+            minRowSpan = Math.min(minRowSpan, count);
+            uniformIds.add(firstId);
+          }
+          count = 1;
+          firstId = grid[r][c];
+        }
+        if (count < 2 && !isRowSpan) {
+          uniformIds.clear();
+          break;
+        }
+        if (count > 1) {
+          minRowSpan = Math.min(minRowSpan, count);
+          uniformIds.add(firstId);
+        }
+      }
+      if (uniformIds.size > 0) {
+        allRows.forEach((row) => {
+          row.children.forEach((cell) => {
+            if (uniformIds.has(cell.id)) {
+              const { rowSpan, colSpan } = getCellSpan(cell);
+              const reducedRowSpan = rowSpan - minRowSpan + 1;
+              setSpanAttributes(cell, colSpan, reducedRowSpan, table);
+            }
+          });
+        });
+      }
+    }
+  }
+}

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

@@ -0,0 +1,143 @@
+import { RTETableRowBlock } from '../dto/table-row-block';
+import { RTETableBlock } from '../dto/table-block';
+import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
+import { getCellSpan, getAllTableRows, getActualColumnPosition, getParentBlockByType, setSpanAttributes, createNewCell, } from '../utils/utils';
+import { generateUUID } from '../../../../../utils/misc';
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+/**
+ * Strategy to handle horizontal split of a table cell (splits top/bottom).
+ */
+export class SplitCellHorizontallyStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(_action, target) {
+    const row = target.parent;
+    const section = row.parent;
+    const table = getParentBlockByType(row, RTETableBlock);
+    const allRows = getAllTableRows(table);
+    const currentRowIndex = allRows.indexOf(row);
+    const { colSpan, rowSpan } = getCellSpan(target);
+    const cellColumnPosition = getActualColumnPosition(target, allRows);
+    // When rowSpan=1, we need to insert a new row and both cells have rowSpan=1
+    // When rowSpan>1, we split the existing rowSpan
+    const topRowSpan = Math.ceil(rowSpan / 2);
+    const bottomRowSpan = Math.max(1, rowSpan - topRowSpan);
+    const needsNewRow = rowSpan === 1;
+    // Update original cell's rowSpan (top cell)
+    setSpanAttributes(target, colSpan, topRowSpan, table);
+    // Determine where the bottom cell should be inserted
+    const bottomCellRowIndex = currentRowIndex + topRowSpan;
+    // Create the bottom cell with the same col span and type as the original
+    const bottomCell = createNewCell(target.type);
+    setSpanAttributes(bottomCell, colSpan, bottomRowSpan, table);
+    if (needsNewRow) {
+      // Need to create a new row for the bottom cell
+      const newRow = this.createNewRowWithCell(section, bottomCell);
+      // Find the correct position in the section to insert the new row
+      const rowIndexInSection = section.children.indexOf(row);
+      section.apply(new InsertChildrenAfterAction(section.children[rowIndexInSection], newRow));
+      // Update allRows
+      allRows.splice(bottomCellRowIndex, 0, newRow);
+      // Update all cells from all previous rows that span through the insertion point
+      // (except the split cell itself)
+      this.updateCellsSpanningThroughInsertionPoint(allRows, bottomCellRowIndex, target, table);
+    }
+    else {
+      // Row exists - insert the bottom cell at the correct position
+      const targetRow = allRows[bottomCellRowIndex];
+      const insertIndex = this.findInsertPosition(targetRow, cellColumnPosition, allRows, bottomCellRowIndex);
+      targetRow.children.splice(insertIndex, 0, bottomCell);
+      bottomCell.parent = targetRow;
+    }
+  }
+  /**
+   * Find the correct insertion position for a cell at a given column position in a row.
+   * Accounts for cells from previous rows with rowspan extending into the target row.
+   *
+   * @param {RTETableRowBlock} targetRow - The row to insert into.
+   * @param {number} targetColumnPosition - The target column position.
+   * @param {RTETableRowBlock[]} allRows - All rows in the table.
+   * @param {number} rowIndex - The index of the target row.
+   * @returns {number} The physical cell index to insert at.
+   */
+  findInsertPosition(targetRow, targetColumnPosition, allRows, rowIndex) {
+    // Calculate columns occupied by cells from previous rows extending into this row
+    let columnsOccupiedByPreviousRows = 0;
+    for (let r = 0; r < rowIndex; r++) {
+      const prevRow = allRows[r];
+      for (const prevCell of prevRow.children) {
+        const { colSpan, rowSpan } = getCellSpan(prevCell);
+        // Check if this cell extends into the target row
+        if (r + rowSpan > rowIndex) {
+          const prevCellColumnPosition = getActualColumnPosition(prevCell, allRows);
+          if (prevCellColumnPosition < targetColumnPosition) {
+            columnsOccupiedByPreviousRows += colSpan;
+          }
+        }
+      }
+    }
+    // Find the insertion position in the target row
+    let currentColumn = columnsOccupiedByPreviousRows;
+    for (let i = 0; i < targetRow.children.length; i++) {
+      if (currentColumn >= targetColumnPosition) {
+        return i;
+      }
+      const cell = targetRow.children[i];
+      const { colSpan } = getCellSpan(cell);
+      currentColumn += colSpan;
+    }
+    return targetRow.children.length;
+  }
+  /**
+   * Create a new row with only the bottom cell.
+   * Other columns will be covered by cells from the original row with increased rowSpan.
+   *
+   * @param {RTETableBodyBlock | RTETableHeadBlock} section - The section (thead or tbody).
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} bottomCell - The bottom cell to insert.
+   * @returns {RTETableRowBlock} The newly created row.
+   */
+  createNewRowWithCell(section, bottomCell) {
+    const rowTemplate = {
+      id: generateUUID(),
+      type: 'table-row',
+      children: [],
+    };
+    const newRow = RTETableRowBlock.from(rowTemplate);
+    newRow.parent = section;
+    // Add the bottom cell to the row
+    newRow.children.push(bottomCell);
+    bottomCell.parent = newRow;
+    return newRow;
+  }
+  /**
+   * Update all cells from all previous rows that span through the newly inserted row.
+   * When a new row is inserted at `insertionRowIndex`, any cell from a previous row
+   * that has rowSpan extending to or beyond that position needs rowSpan increased by 1.
+   *
+   * @param {RTETableRowBlock[]} allRows - All rows in the table (after insertion).
+   * @param {number} insertionRowIndex - The index where the new row was inserted.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} splitCell - The cell that was split (skip this one).
+   * @param {RTETableBlock} table - The table block.
+   */
+  updateCellsSpanningThroughInsertionPoint(allRows, insertionRowIndex, splitCell, table) {
+    // Check all rows before the insertion point (not including the inserted row itself)
+    for (let r = 0; r < insertionRowIndex; r++) {
+      const row = allRows[r];
+      for (const cell of row.children) {
+        // Skip the cell that was split - it already has the correct rowSpan
+        if (cell === splitCell) {
+          continue;
+        }
+        const { colSpan, rowSpan } = getCellSpan(cell);
+        // Calculate where this cell ends
+        const cellRowEnd = r + rowSpan;
+        // If this cell extends to or past where we inserted the row,
+        // it needs to span over the new row too
+        if (cellRowEnd >= insertionRowIndex) {
+          setSpanAttributes(cell, colSpan, rowSpan + 1, table);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,80 @@
+import { RTETableBlock } from '../dto/table-block';
+import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
+import { getCellSpan, getParentBlockByType, setSpanAttributes, getAllTableRows, getActualColumnPosition, createNewCell, } from '../utils/utils';
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+/**
+ * Strategy to handle vertical split of a table cell (splits left/right).
+ */
+export class SplitCellVerticallyStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(_action, target) {
+    const row = target.parent;
+    const table = getParentBlockByType(row, RTETableBlock);
+    const allRows = getAllTableRows(table);
+    const currentRowIndex = allRows.indexOf(row);
+    const { colSpan, rowSpan } = getCellSpan(target);
+    // Get the actual column position of the cell being split
+    const cellColumnStart = getActualColumnPosition(target, allRows);
+    const cellColumnEnd = cellColumnStart + colSpan - 1;
+    // Calculate new column spans (split the column span)
+    const leftColSpan = Math.ceil(colSpan / 2);
+    const rightColSpan = Math.floor(colSpan / 2);
+    // Update original cell's column spans (left cell)
+    setSpanAttributes(target, leftColSpan, rowSpan, table);
+    // Create new cell (right cell) with same type as original
+    const newCell = createNewCell(target.type);
+    setSpanAttributes(newCell, rightColSpan, rowSpan, table);
+    // Insert new cell after the original in the same row
+    row.apply(new InsertChildrenAfterAction(target, newCell));
+    // Only when splitting a cell with colSpan=1 do we add a new column to the table.
+    // When colSpan>1, we're just redistributing existing columns.
+    // For example:
+    //   colSpan=1: split into 1+1 → adds 1 new column
+    //   colSpan=2: split into 1+1 → just redistributes 2 existing columns
+    //   colSpan=3: split into 2+1 → just redistributes 3 existing columns
+    const newColumnsAdded = colSpan === 1 ? 1 : 0;
+    if (newColumnsAdded > 0) {
+      this.updateOtherRowsCells(allRows, currentRowIndex, cellColumnStart, cellColumnEnd, rowSpan, newColumnsAdded, table);
+    }
+  }
+  /**
+   * Update cells in other rows to account for the new columns added by the split.
+   * When a cell is split vertically and new columns are added to the table,
+   * cells in other rows that span across the position where the split happened
+   * need their colSpan increased.
+   *
+   * @param {RTETableRowBlock[]} allRows - All rows in the table.
+   * @param {number} splitRowIndex - The index of the row containing the split cell.
+   * @param {number} splitColumnStart - The starting column position of the split cell.
+   * @param {number} splitColumnEnd - The ending column position of the split cell.
+   * @param {number} splitCellRowSpan - The rowSpan of the split cell.
+   * @param {number} newColumnsAdded - The number of new columns added by the split.
+   * @param {RTETableBlock} table - The table block.
+   */
+  updateOtherRowsCells(allRows, splitRowIndex, splitColumnStart, splitColumnEnd, splitCellRowSpan, newColumnsAdded, table) {
+    // Iterate through all rows
+    for (let rowIndex = 0; rowIndex < allRows.length; rowIndex++) {
+      const currentRow = allRows[rowIndex];
+      // Skip rows that are spanned by the split cell itself
+      if (rowIndex >= splitRowIndex && rowIndex < splitRowIndex + splitCellRowSpan) {
+        continue;
+      }
+      // Check each cell in the current row
+      for (const cell of currentRow.children) {
+        const cellColumnStart = getActualColumnPosition(cell, allRows);
+        const { colSpan, rowSpan } = getCellSpan(cell);
+        const cellColumnEnd = cellColumnStart + colSpan - 1;
+        // Check if this cell spans across the columns where the split happened
+        // A cell needs updating if its column range overlaps with the split cell's column range
+        const overlaps = cellColumnEnd >= splitColumnStart && cellColumnStart <= splitColumnEnd;
+        if (overlaps) {
+          // Increase this cell's colSpan by the number of new columns added
+          setSpanAttributes(cell, colSpan + newColumnsAdded, rowSpan, table);
+          break; // No need to check other cells in this row
+        }
+      }
+    }
+  }
+}

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

@@ -10,7 +10,8 @@ export class UpdateTableCellPropertiesStrategy extends ActionHandleStrategy {
     const annotation = action.toAnnotation();
     const tableCellRef = this.getDOMByEntity(target);
     if (tableCellRef) {
-      const { backgroundColor = '', width, height, borderStr, padding, textAlign, verticalAlign, } = annotation;
+      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;

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

@@ -12,8 +12,8 @@ export class UpdateTablePropertiesStrategy extends ActionHandleStrategy {
     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;
+      const { backgroundColorAnnotation, width, height } = annotation;
+      tableRef.style.backgroundColor = backgroundColorAnnotation.renderStyle().color;
       tableRef.style.border = annotation.borderStr;
       tableRef.style.width = width;
       tableRef.style.height = height;

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

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

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

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

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