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

package/dist/esm/{table-extension-c83b7a56.js → table-extension-6b31754b.js}

@@ -3,20 +3,19 @@ import { a as arrayToClassString, g as getDeviceType, D as DeviceType, f as find
 import { L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-8744cb44.js';
-import { V as VegaInternalThemeManager } from './dark-mode-style-controller-de88a117.js';
-import { i as internalVegaEventManager } from './internal-vega-event-manager-e799c54a.js';
+import { i as internalVegaEventManager } from './internal-vega-event-manager-2cbb828a.js';
 import { c as convertToNumber } from './number-4398f2e1.js';
-import { R as RTEDTOActionStrategyManager, E as ElementToDTOClassStrategyManager, h as htmlElementToAnnotationGenerator, U as UpdateCursorPositionAction, a as ElementToDTOStrategy, b as RTEListItemBlock, V as VegaRTEContent, B as BlockToRTEBlockStrategyAbstract, I as InsertNewParagraphAction, c as RTEImageBlock, d as InsertChildrenBeforeStrategy, P as PasteContentStrategy, A as AnnotationGeneratorStrategyAbstract } from './content-state-03f1d302.js';
-import { s as stateEntityRenderingRegistry, A as ActionHandleStrategyRegistry, a as ActionHandlerInterceptorRegistry, R as RTEDTOClassManager, M as ModifyContentAction, b as RTETextNode, c as ModifyContentActionType, d as ActionHandleStrategy, C as CustomAttributeAnnotation, e as RTETextBlock, f as RTEBlock, g as RTEAnnotationStyle, I as InsertChildrenAfterAction, h as AppendChildrenAction, i as RTENode, j as InsertChildrenBeforeAction, k as InternalAnnotationTypeEnum, B as BlockAnnotation, l as AnnotationAction, m as RemoveChildrenAction } from './code-block-76b29be1.js';
-import { i as isNonNullable } from './type-guard-b48aec98.js';
+import { R as RTEDTOActionStrategyManager, E as ElementToDTOClassStrategyManager, h as htmlElementToAnnotationGenerator, U as UpdateCursorPositionAction, a as ElementToDTOStrategy, b as RTEListItemBlock, V as VegaRTEContent, B as BlockToRTEBlockStrategyAbstract, I as InsertNewParagraphAction, c as RTEImageBlock, d as InsertChildrenBeforeStrategy, P as PasteContentStrategy, A as AnnotationGeneratorStrategyAbstract } from './content-state-e8ef033a.js';
+import { s as stateEntityRenderingRegistry, A as ActionHandleStrategyRegistry, a as ActionHandlerInterceptorRegistry, R as RTEDTOClassManager, M as ModifyContentAction, b as RTETextNode, c as ModifyContentActionType, d as ActionHandleStrategy, C as CustomAttributeAnnotation, e as RTETextBlock, f as RTEBlock, g as RTEAnnotationStyle, I as InsertChildrenAfterAction, h as AppendChildrenAction, i as RTENode, j as InsertChildrenBeforeAction, k as InternalAnnotationTypeEnum, B as BlockAnnotation, l as AnnotationAction, m as RemoveChildrenAction, n as CommonAnnotationTypeEnum } from './code-block-36393b45.js';
+import { i as isNonNullable } from './type-guard-c65a227d.js';
 import './translation-96e5debd.js';
 import { a as VegaInternalIconManager } from './internal-icon-manager-f0486245.js';
-import { R as RTETableExtensionAnnotationTypeEnum, S as SettingEventHandler, T as TableSettingType, a as RowOperationEventHandler, C as ColumnOperationEventHandler, b as RTETableAnnotation, c as RTETableCellAnnotation, d as RTETableHeadCellAnnotation, e as RTETableHeadCellBlock, f as RTETableBlock, g as generateTableBody, h as RTETableCellBlock, i as RTETableRowBlock, I as InsertTableRowDirection, j as RTETableBodyBlock, k as RTETableHeadBlock, l as getParentBlockByType, m as TableColumnStrategy, n as getAllTableRows, o as InsertTableColumnDirection, p as getDefaultCellBlockTemplate, q as getFirstNode, r as RTE_TABLE_DEFAULT_COLORS, s as INSERT_TABLE_ROW, D as DELETE_TABLE_ROW, t as TOGGLE_HEADER_ROW, u as INSERT_TABLE_COLUMN, v as DELETE_TABLE_COLUMN, w as TOGGLE_HEADER_TABLE_COLUMN, x as ToggleHeaderTableColumnStrategy, y as SELECT_TABLE_COLUMN } from './styles.constants-0dd6f7fa.js';
+import { R as RTETableExtensionAnnotationTypeEnum, S as SettingEventHandler, T as TableSettingType, a as RowOperationEventHandler, C as ColumnOperationEventHandler, M as MergeCellsOperationEventHandler, b as SplitCellOperationEventHandler, c as RTETableAnnotation, d as RTETableCellAnnotation, e as RTETableHeadCellAnnotation, f as RTETableHeadCellBlock, g as RTETableColorManager, h as RTETableBlock, i as generateTableBody, j as RTETableCellBlock, k as RTETableRowBlock, I as InsertTableRowDirection, l as RTETableBodyBlock, m as RTETableHeadBlock, n as getParentBlockByType, o as TableColumnStrategy, p as getAllTableRows, q as InsertTableColumnDirection, r as getDefaultCellBlockTemplate, s as getFirstNode, t as setSpanAttributes, u as MergeCellsOperationType, v as buildTableGrid, w as getCellSpan, x as getActualColumnPosition, y as createNewCell, z as RTE_TABLE_DEFAULT_COLORS, A as INSERT_TABLE_ROW, D as DELETE_TABLE_ROW, B as TOGGLE_HEADER_ROW, E as INSERT_TABLE_COLUMN, F as DELETE_TABLE_COLUMN, G as TOGGLE_HEADER_TABLE_COLUMN, H as ToggleHeaderTableColumnStrategy, J as SPLIT_CELL_HORIZONTALLY, K as SPLIT_CELL_VERTICALLY, L as SELECT_TABLE_COLUMN, N as MERGE_CELLS } from './split-cell-operation-6749f654.js';
 import { c as cleanObject } from './object-66c37948.js';
 import { R as RTEDTORendererManager } from './dto-renderer-manager-12bc9121.js';
 import { V as VegaRTEBaseRenderer } from './base-renderer-101f6d04.js';
 import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
-import { D as DomNodeSubjectObserverFactory, V as VegaDropdownClick, a as VegaClick, d as domNodeSubjectFactory, b as VegaPopoverShow, c as VegaPopoverHide } from './dom-node-subject-observer-factory-e998eba4.js';
+import { D as DomNodeSubjectObserverFactory, V as VegaDropdownClick, a as VegaClick, d as domNodeSubjectFactory, b as VegaPopoverShow, c as VegaPopoverHide } from './dom-node-subject-observer-factory-d4e16f66.js';
 import { V as VegaInternalPopoverUpdateTarget, a as VegaInternalRTEExtensionTableCellsSelectionAnchor, b as VegaInternalRTEExtensionTableCellSelectionChange } from './vega-internal-event-id-3edc9b4e.js';
 import { t as tryGetDocument } from './try-get-document-bef0f526.js';
 import { p as parseToPixelString } from './pixel-f32c07ce.js';
@@ -66,7 +65,7 @@ const VegaLoaderRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -188,7 +187,7 @@ class VegaLoaderController {
   }
 }
 VegaLoaderController.SPECIAL_ELEMENT_TO_WRAP_FULL_BODY = ['VEGA-MODAL'];
-__decorate$6([
+__decorate$5([
   InjectVegaTelemetrySlimmer()
 ], VegaLoaderController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 const VegaLoader = new VegaLoaderController();
@@ -430,7 +429,7 @@ const VegaNotifyRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -541,183 +540,14 @@ class VegaNotifyController {
     return this.container;
   }
 }
-__decorate$5([
+__decorate$4([
   InjectVegaSlimmer()
 ], VegaNotifyController.prototype, "resizeObserverSlimmer", void 0);
-__decorate$5([
+__decorate$4([
   InjectVegaTelemetrySlimmer()
 ], VegaNotifyController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 const VegaNotify = new VegaNotifyController();
 
-const ThemeManagerRuntimeMetricsPayloadDefinition = [
-  {
-    payloadKey: 'IS_OVERRIDECOLORS_METHOD_CALLED',
-    payloadDescription: 'Indicate if the method overrideColors of public API ThemeManager is called',
-    /**
-     * Indicate whether the method is collected when the method been called .
-     *
-     * @param {string} scope - The class name of public api
-     * @param {string} methodName - The method name called by the public api
-     * @returns {boolean} A boolean value
-     */
-    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'overrideColors',
-    /**
-     * The function checks if the method is be called.
-     *
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: () => {
-      return true;
-    },
-  },
-  {
-    payloadKey: 'IS_RESET_METHOD_CALLED',
-    payloadDescription: 'Indicate if the method reset of public API ThemeManager is called',
-    /**
-     * Indicate whether the method is collected when the method been called .
-     *
-     * @param {string} scope - The class name of public api
-     * @param {string} methodName - The method name called by the public api
-     * @returns {boolean} A boolean value
-     */
-    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'reset',
-    /**
-     * The function checks if the method is be called.
-     *
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: () => {
-      return true;
-    },
-  },
-  {
-    payloadKey: 'IS_TOGGLEDARKMODE_METHOD_CALLED',
-    payloadDescription: 'Indicate if the method toggleDarkMode of public API ThemeManager is called',
-    /**
-     * Indicate whether the method is collected when the method been called .
-     *
-     * @param {string} scope - The class name of public api
-     * @param {string} methodName - The method name called by the public api
-     * @returns {boolean} A boolean value
-     */
-    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'toggleDarkMode',
-    /**
-     * The function checks if the method is be called.
-     *
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: () => {
-      return true;
-    },
-  },
-  {
-    payloadKey: 'IS_ISDARKMODE_METHOD_CALLED',
-    payloadDescription: 'Indicate if the method isDarkMode of public API ThemeManager is called',
-    /**
-     * Indicate whether the method is collected when the method been called .
-     *
-     * @param {string} scope - The class name of public api
-     * @param {string} methodName - The method name called by the public api
-     * @returns {boolean} A boolean value
-     */
-    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'isDarkMode',
-    /**
-     * The function checks if the method is be called.
-     *
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: () => {
-      return true;
-    },
-  },
-  {
-    payloadKey: 'IS_APPLY_BRANDING_METHOD_CALLED',
-    payloadDescription: 'Indicate if the method applyBranding of public API ThemeManager is called',
-    /**
-     * Indicate whether the method is collected when the method been called .
-     *
-     * @param {string} scope - The class name of public api
-     * @param {string} methodName - The method name called by the public api
-     * @returns {boolean} A boolean value
-     */
-    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'applyBranding',
-    /**
-     * The function checks if the method is be called.
-     *
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: () => {
-      return true;
-    },
-  },
-];
-
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/**
- * Vega components theme manager
- */
-class ThemeManager {
-  constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(ThemeManager, ['overrideColors', 'reset', 'toggleDarkMode', 'isDarkMode', 'applyBranding'], ThemeManagerRuntimeMetricsPayloadDefinition);
-  }
-  /**
-   * It takes the colors you passed in, parses them into the correct format, and then applies them to the theme
-   *
-   * @param {VegaThemeOverrideColors} overrideColors - OverrideColors - This is the object that you pass to the function.
-   * @vegaVersion 1.20.0
-   */
-  async overrideColors(overrideColors) {
-    void VegaInternalThemeManager.overrideColors(overrideColors);
-  }
-  /**
-   * It removes all the custom override theme styles from the DOM
-   *
-   * @vegaVersion 1.20.0
-   */
-  async reset() {
-    void VegaInternalThemeManager.reset();
-  }
-  /**
-   * This function toggles the dark mode of a webpage by adding or removing a 'dark' class to the HTML element.
-   *
-   * @param {boolean | undefined} darkMode - A boolean or undefined value that determines whether to enable or disable dark mode.
-   * If it is true, dark mode is enabled.
-   * If it is false, dark mode is disabled.
-   * @vegaVersion 1.32.0
-   */
-  toggleDarkMode(darkMode) {
-    VegaInternalThemeManager.toggleDarkMode(darkMode);
-  }
-  /**
-   * The function checks if the HTML element has a class of "dark" and returns a boolean value accordingly.
-   *
-   * @returns {boolean} A boolean value indicating whether the HTML element has a class of "dark", which is
-   * typically used to indicate that the website is in dark mode.
-   * @vegaVersion 1.32.0
-   */
-  isDarkMode() {
-    return VegaInternalThemeManager.isDarkMode();
-  }
-  /**
-   * This function switches the Vega theme to a brand theme based on the provided options.
-   *
-   * @param {BrandOptions} options - The options includes 'gp', 'genius' and 'heartland' options
-   * @vegaVersion 2.47.0
-   */
-  applyBranding(options) {
-    VegaInternalThemeManager.applyBranding(options);
-  }
-}
-__decorate$4([
-  InjectVegaTelemetrySlimmer()
-], ThemeManager.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
-const VegaThemeManager = new ThemeManager();
-
 const VegaDialogRuntimeMetricsPayloadDefinition = [
   {
     payloadKey: 'IS_OPEN_METHOD_CALLED',
@@ -3159,6 +2989,8 @@ class TableSettingPopoverRenderer {
       new RowOperationEventHandler(),
       new CaptionOperationEventHandler(),
       new ColumnOperationEventHandler(),
+      new MergeCellsOperationEventHandler(),
+      new SplitCellOperationEventHandler(),
     ];
     /**
      * Show table setting popover when table is clicked.
@@ -3489,14 +3321,17 @@ class CellPropertiesEventHandler {
   static getStyleCollectionFromCell(selectedCells) {
     return selectedCells.reduce((accumulator, cell) => {
       const annotation = cell.getAnnotationByType(RTETableExtensionAnnotationTypeEnum.CELL);
-      const _a = annotation.toJSON().tableCell, { border } = _a, restProps = __rest(_a, ["border"]);
-      const formattedBorder = {};
-      if (border) {
-        formattedBorder.borderStyle = border.style;
-        formattedBorder.borderColor = border.color;
-        formattedBorder.borderWidth = border.width;
+      accumulator[cell.id] = {};
+      if (annotation) {
+        const _a = annotation.toJSON().tableCell, { border } = _a, restProps = __rest(_a, ["border"]);
+        const formattedBorder = {};
+        if (border) {
+          formattedBorder.borderStyle = border.style;
+          formattedBorder.borderColor = border.color;
+          formattedBorder.borderWidth = border.width;
+        }
+        accumulator[cell.id] = cleanObject(Object.assign(Object.assign({}, restProps), formattedBorder));
       }
-      accumulator[cell.id] = cleanObject(Object.assign(Object.assign({}, restProps), formattedBorder));
       return accumulator;
     }, {});
   }
@@ -3528,7 +3363,7 @@ class CellPropertiesEventHandler {
         mergedStyles[key] = styleValues[0];
       }
     }
-    return Object.assign({ borderColor: RTETableCellAnnotation.DEFAULT_BORDER.color, borderStyle: RTETableCellAnnotation.DEFAULT_BORDER.style, borderWidth: RTETableCellAnnotation.DEFAULT_BORDER.width, textAlign: RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN, verticalAlign: RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN }, mergedStyles);
+    return mergedStyles;
   }
   /**
    * Apply the given properties to the selected cells
@@ -3566,12 +3401,14 @@ class CellPropertiesEventHandler {
    */
   convertToVegaTableCellAnnotation(originalStyles) {
     const { borderStyle, borderWidth, borderColor } = originalStyles, restStyles = __rest(originalStyles, ["borderStyle", "borderWidth", "borderColor"]);
-    const border = {
-      style: borderStyle || RTETableCellAnnotation.DEFAULT_BORDER.style,
-      width: parseToPixelString(borderWidth || RTETableCellAnnotation.DEFAULT_BORDER.width),
-      color: borderColor || RTETableCellAnnotation.DEFAULT_BORDER.color,
-    };
-    return Object.assign(Object.assign({}, restStyles), { padding: restStyles.padding ? parseToPixelString(restStyles.padding) : '', width: restStyles.width ? parseToPixelString(restStyles.width) : '', height: restStyles.height ? parseToPixelString(restStyles.height) : '', border });
+    const border = borderStyle || borderColor || borderWidth
+      ? cleanObject({
+        style: borderStyle,
+        width: borderWidth ? parseToPixelString(borderWidth) : '',
+        color: borderColor,
+      })
+      : null;
+    return cleanObject(Object.assign(Object.assign({}, restStyles), { padding: restStyles.padding ? parseToPixelString(restStyles.padding) : '', width: restStyles.width ? parseToPixelString(restStyles.width) : '', height: restStyles.height ? parseToPixelString(restStyles.height) : '', border }));
   }
   /**
    * Apply the given annotation to the specified table cell
@@ -3892,7 +3729,7 @@ class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
    */
   doRender(h, renderData, rteContext) {
     const tableSettingPopoverRenderer = new TableSettingPopoverRenderer();
-    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer(this.tableColorSchema);
+    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer(RTETableColorManager.getTableColors());
     this.injectExtensionContextToRenderers(this.extensionContext, [
       tableDynamicPopoverRenderer,
       tableSettingPopoverRenderer,
@@ -3952,14 +3789,6 @@ class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
     this.extensionContext = context;
     this.injectExtensionContextToRenderers(context, this.popoverRenders);
   }
-  /**
-   * Updates the table color schema.
-   *
-   * @param {RTETableColorSchema[]} colors - The new table color schema.
-   */
-  updateTableColorSchema(colors) {
-    this.tableColorSchema = colors;
-  }
   /**
    * Renders the table element.
    *
@@ -4078,7 +3907,9 @@ class RTETableCellRenderer extends VegaRTEExtensionRenderer {
    */
   renderByCellType(h, renderData, rteContext, elementType) {
     var _a;
-    return h(elementType, Object.assign(Object.assign(Object.assign({ key: renderData.id, ref: this.useRef(renderData) }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(rteContext), class: renderData.getClasses() }), (rteContext.editable ? this.onSelectionListeners(renderData) : undefined)));
+    return h(elementType, Object.assign(Object.assign(Object.assign({ key: renderData.id, 
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: this.useRef(renderData) }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(rteContext), class: renderData.getClasses() }), (rteContext.editable ? this.onSelectionListeners(renderData) : undefined)));
   }
   /**
    * Returns the mouse event listeners for selection handling.
@@ -4530,57 +4361,52 @@ 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)));
       }
     }
   }
@@ -4605,11 +4431,17 @@ 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: [
@@ -4626,6 +4458,49 @@ 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;
   }
 }
 
@@ -4813,25 +4688,113 @@ class RTETableSelection {
     tableChildren.forEach((section) => {
       section.children.forEach((row) => allRows.push(row));
     });
-    const anchorRowIndex = allRows.indexOf(anchorRow);
-    const focusRowIndex = allRows.indexOf(focusRow);
-    const startRow = Math.min(anchorRowIndex, focusRowIndex);
-    const endRow = Math.max(anchorRowIndex, focusRowIndex);
-    const anchorColIndex = anchorRow.children.indexOf(anchor);
-    const focusColIndex = focusRow.children.indexOf(focus);
-    const startCol = Math.min(anchorColIndex, focusColIndex);
-    const endCol = Math.max(anchorColIndex, focusColIndex);
-    const result = [];
+    const { grid, cellMeta } = RTETableSelection.buildCellGrid(allRows);
+    const anchorMeta = cellMeta.get(anchor);
+    const focusMeta = cellMeta.get(focus);
+    if (!anchorMeta || !focusMeta) {
+      return [];
+    }
+    const anchorStartRow = anchorMeta.row;
+    const anchorEndRow = anchorMeta.row + anchorMeta.rowSpan - 1;
+    const anchorStartCol = anchorMeta.col;
+    const anchorEndCol = anchorMeta.col + anchorMeta.colSpan - 1;
+    const focusStartRow = focusMeta.row;
+    const focusEndRow = focusMeta.row + focusMeta.rowSpan - 1;
+    const focusStartCol = focusMeta.col;
+    const focusEndCol = focusMeta.col + focusMeta.colSpan - 1;
+    const startRow = Math.min(anchorStartRow, focusStartRow);
+    const endRow = Math.max(anchorEndRow, focusEndRow);
+    const startCol = Math.min(anchorStartCol, focusStartCol);
+    const endCol = Math.max(anchorEndCol, focusEndCol);
+    const result = new Set();
     for (let r = startRow; r <= endRow; r++) {
-      const row = allRows[r];
+      const row = grid[r];
       for (let c = startCol; c <= endCol; c++) {
-        const cell = row.children[c];
+        const cell = row[c];
         if (cell) {
-          result.push(cell);
+          result.add(cell);
         }
       }
     }
-    return result;
+    return Array.from(result);
+  }
+  /**
+   * Get the rowSpan and colSpan attributes from a cell's DOM element.
+   *
+   * @param {RTETableCellBlock} cell - The cell to get span values from.
+   * @returns {CellSpanType} Object with rowSpan and colSpan properties.
+   */
+  static getCellSpan(cell) {
+    let rowSpan = 1;
+    let colSpan = 1;
+    // First, try to get from customAttribute annotation (this works even without DOM)
+    const customAttr = cell.getAnnotationByType(CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE);
+    if (customAttr && customAttr.customAttribute) {
+      const attrs = customAttr.customAttribute;
+      if (attrs.rowSpan) {
+        rowSpan = parseInt(attrs.rowSpan, 10);
+      }
+      if (attrs.colSpan) {
+        colSpan = parseInt(attrs.colSpan, 10);
+      }
+    }
+    // Fallback to DOM attributes if annotation didn't have the values
+    if (rowSpan === 1 && colSpan === 1) {
+      const cellDOMElement = stateEntityRenderingRegistry.getDOMByEntity(cell);
+      if (cellDOMElement) {
+        const rowSpanAttr = cellDOMElement.getAttribute('rowSpan');
+        const colSpanAttr = cellDOMElement.getAttribute('colSpan');
+        if (rowSpanAttr) {
+          rowSpan = parseInt(rowSpanAttr, 10);
+        }
+        if (colSpanAttr) {
+          colSpan = parseInt(colSpanAttr, 10);
+        }
+      }
+    }
+    return {
+      rowSpan: Number.isFinite(rowSpan) && rowSpan > 0 ? rowSpan : 1,
+      colSpan: Number.isFinite(colSpan) && colSpan > 0 ? colSpan : 1,
+    };
+  }
+  /**
+   * Build a grid representation of the table that accounts for rowSpan and colSpan.
+   * Each cell in the grid array points to the actual cell block that occupies that position.
+   *
+   * @param {RTETableRowBlock[]} allRows - All rows in the table.
+   * @returns {CellGridMetaType} Object with grid and cellMeta properties.
+   */
+  static buildCellGrid(allRows) {
+    const grid = [];
+    const cellMeta = new Map();
+    for (let r = 0; r < allRows.length; r++) {
+      const row = allRows[r];
+      if (!grid[r]) {
+        grid[r] = [];
+      }
+      let col = 0;
+      for (let c = 0; c < row.children.length; c++) {
+        const cell = row.children[c];
+        // Find the next available column (skip cells occupied by rowSpan from previous rows)
+        while (grid[r][col]) {
+          col += 1;
+        }
+        const { rowSpan, colSpan } = RTETableSelection.getCellSpan(cell);
+        cellMeta.set(cell, { row: r, col, rowSpan, colSpan });
+        // Fill the grid for all positions this cell occupies
+        for (let rowOffset = 0; rowOffset < rowSpan; rowOffset++) {
+          const targetRow = r + rowOffset;
+          if (!grid[targetRow]) {
+            grid[targetRow] = [];
+          }
+          for (let colOffset = 0; colOffset < colSpan; colOffset++) {
+            grid[targetRow][col + colOffset] = cell;
+          }
+        }
+        col += colSpan;
+      }
+    }
+    return { grid, cellMeta };
   }
   /**
    * Clean up event listeners.
@@ -5317,6 +5280,122 @@ class PreventRowInsertInterceptor extends ActionHandlerInterceptor {
   }
 }
 
+/**
+ * Strategy to handle the merging of table cells.
+ */
+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);
+            }
+          });
+        });
+      }
+    }
+  }
+}
+
 /**
  * Strategy to convert a native HTML table element into an RTETableBlock DTO.
  */
@@ -5519,7 +5598,7 @@ class TdToTableCellBlockStrategy extends BlockToRTEBlockStrategyAbstract {
     return RTETableCellBlock.from({
       id: generateUUID(),
       type: 'table-cell',
-      annotations: htmlElementToAnnotationGenerator.generate(RTETableHeadCellBlock, element),
+      annotations: htmlElementToAnnotationGenerator.generate(RTETableHeadCellBlock, element, options),
       children: defaultChildren,
     }, options);
   }
@@ -5599,7 +5678,7 @@ class TableAnnotationHandlerBase extends AnnotationGeneratorStrategyAbstract {
    */
   getBackgroundColor(element) {
     if (element.style.backgroundColor) {
-      return element.style.backgroundColor;
+      return RTETableColorManager.getColorKey(element.style.backgroundColor);
     }
     return null;
   }
@@ -5611,37 +5690,15 @@ class TableAnnotationHandlerBase extends AnnotationGeneratorStrategyAbstract {
    */
   getBorder(element) {
     const style = element.style;
-    // Check if border is defined
-    if (style.border) {
-      return this.parseBorderString(style.border);
-    }
     // Check individual border properties
-    const borderStyle = style.borderStyle || style.borderTopStyle;
-    const borderWidth = style.borderWidth || style.borderTopWidth;
-    const borderColor = style.borderColor || style.borderTopColor;
-    if (borderStyle && borderWidth && borderColor) {
-      return {
-        style: borderStyle,
-        width: borderWidth,
-        color: borderColor,
-      };
-    }
-    return null;
-  }
-  /**
-   * Parse border string into structured border type.
-   *
-   * @param {string} borderStr - Border CSS string.
-   * @returns {Nullable<VegaRTETableBorderType>} Parsed border properties.
-   */
-  parseBorderString(borderStr) {
-    // Expected format: "style width color" (e.g., "solid 1px #ddd")
-    const parts = borderStr.trim().split(/\s+/);
-    if (parts.length >= 3) {
+    const borderStyle = style.borderStyle;
+    const borderWidth = style.borderWidth;
+    const borderColor = style.borderColor;
+    if (borderColor || borderStyle || borderWidth) {
       return {
-        style: parts[0],
-        width: parts[1],
-        color: parts.slice(2).join(' '), // Handle colors with spaces like "rgb(0, 0, 0)"
+        style: borderStyle === 'initial' ? '' : borderStyle,
+        width: borderWidth === 'initial' ? '' : borderWidth,
+        color: RTETableColorManager.getColorKey(borderColor === 'initial' ? '' : borderColor),
       };
     }
     return null;
@@ -5777,11 +5834,37 @@ class TableCellAnnotationHandler extends TableAnnotationHandlerBase {
       height: this.getHeight(element),
       textAlign: this.getTextAlign(element),
       verticalAlign: this.getVerticalAlign(element),
+      minWidth: this.getMinWidth(element),
+      boxSizing: this.getBoxSizing(element),
     });
     return Object.keys(cellAnnotation).length > 0
       ? { tableCell: cellAnnotation }
       : {};
   }
+  /**
+   * Extract minimum width from element.
+   *
+   * @param {HTMLElement} element - Table cell element.
+   * @returns {Nullable<string>} Minimum width value.
+   */
+  getMinWidth(element) {
+    if (element.style.minWidth) {
+      return element.style.minWidth;
+    }
+    return null;
+  }
+  /**
+   * Extract box sizing from element.
+   *
+   * @param {HTMLElement} element - Table cell element.
+   * @returns {Nullable<string>} Box sizing value.
+   */
+  getBoxSizing(element) {
+    if (element.style.boxSizing) {
+      return element.style.boxSizing;
+    }
+    return null;
+  }
   /**
    * Extract padding from element.
    *
@@ -5860,8 +5943,8 @@ 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;
@@ -5887,7 +5970,8 @@ 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;
@@ -5899,6 +5983,221 @@ class UpdateTableCellPropertiesStrategy extends ActionHandleStrategy {
   }
 }
 
+/**
+ * Strategy to handle horizontal split of a table cell (splits top/bottom).
+ */
+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);
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Strategy to handle vertical split of a table cell (splits left/right).
+ */
+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
+        }
+      }
+    }
+  }
+}
+
 /**
  * Function extension class for Vega Rich Text Editor.
  */
@@ -5906,7 +6205,7 @@ class VegaRTETableExtension extends VegaRTEExtension {
   /**
    * Instantiate the table extension
    *
-   * @param {RTETableColorSchema[]} colors - The table border color and background color list.
+   * @param {VegaRTEColorSchema[]} colors - The table border color and background color list.
    */
   constructor(colors = RTE_TABLE_DEFAULT_COLORS) {
     super();
@@ -5916,6 +6215,7 @@ class VegaRTETableExtension extends VegaRTEExtension {
     this.tableCellRenderer = new RTETableCellRenderer();
     this.tableHeadCellRenderer = new RTETableHeadCellRenderer();
     this.tableSelection = new RTETableSelection();
+    RTETableColorManager.setTableColors(colors);
     this.registerToolbarButtonRenderer('table', this.toolbarButtonRenderer);
     this.registerBlockBasicStrategies(RTETableBlock.name);
     this.registerBlockBasicStrategies(RTETableHeadBlock.name);
@@ -5947,7 +6247,6 @@ class VegaRTETableExtension extends VegaRTEExtension {
     this.registerAnnotationHandler(new TableAnnotationHandler());
     this.registerAnnotationHandler(new TableCellAnnotationHandler());
     this.registerAnnotationHandler(new TableHeadCellAnnotationHandler());
-    this.tableBlockRenderer.updateTableColorSchema(colors);
   }
   /**
    * Initializes the extension with the given context
@@ -5985,7 +6284,12 @@ class VegaRTETableExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, INSERT_TABLE_COLUMN, new InsertTableColumnStrategy());
   VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, DELETE_TABLE_COLUMN, new DeleteTableColumnStrategy());
   VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, TOGGLE_HEADER_TABLE_COLUMN, new ToggleHeaderTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableCellBlock.name, SPLIT_CELL_HORIZONTALLY, new SplitCellHorizontallyStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableCellBlock.name, SPLIT_CELL_VERTICALLY, new SplitCellVerticallyStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableHeadCellBlock.name, SPLIT_CELL_HORIZONTALLY, new SplitCellHorizontallyStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableHeadCellBlock.name, SPLIT_CELL_VERTICALLY, new SplitCellVerticallyStrategy());
   VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, SELECT_TABLE_COLUMN, new SelectTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, MERGE_CELLS, new MergeCellsStrategy());
   VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, UpdateTablePropertiesAction.name, new UpdateTablePropertiesStrategy());
   VegaRTEExtension.registerActionHandleStrategy(RTETableCellBlock.name, RTETableCellAnnotationsAction.name, new UpdateTableCellPropertiesStrategy());
   VegaRTEExtension.registerActionHandleStrategy(RTETableHeadCellBlock.name, RTETableHeadCellAnnotationsAction.name, new UpdateTableCellPropertiesStrategy());
@@ -5995,4 +6299,4 @@ class VegaRTETableExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandlerInterceptor(RTETableHeadCellBlock.name, ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
 })();
 
-export { ActionHandlerInterceptor as A, InsertNodeToNearestRootAction as I, RTETokenToolbarButtonRenderer as R, VegaLoader as V, VegaNotify as a, VegaThemeManager as b, VegaDialog as c, VegaEventManager$1 as d, VegaZIndexManager$1 as e, VegaSkeletonLoader as f, VegaRTETokenExtension as g, VegaRTEFunctionExtension as h, VegaRTETableExtension as i, VegaRTEToolbarButtonRenderer as j, VegaRTEExtension as k, VegaRTEExtensionRenderer as l, RTETokenNode as m, RTETokenNodeRenderer as n, InternalVegaZIndexManager$1 as o };
+export { ActionHandlerInterceptor as A, InsertNodeToNearestRootAction as I, RTETokenToolbarButtonRenderer as R, VegaLoader as V, VegaNotify as a, VegaDialog as b, VegaEventManager$1 as c, VegaZIndexManager$1 as d, VegaSkeletonLoader as e, VegaRTETokenExtension as f, VegaRTEFunctionExtension as g, VegaRTETableExtension as h, VegaRTEToolbarButtonRenderer as i, VegaRTEExtension as j, VegaRTEExtensionRenderer as k, RTETokenNode as l, RTETokenNodeRenderer as m, InternalVegaZIndexManager$1 as n };