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

package/dist/cjs/{table-extension-2a20da57.js → table-extension-5f27207f.js}

@@ -5,20 +5,19 @@ const ui = require('./ui-9e181079.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-11937d6f.js');
-const darkModeStyleController = require('./dark-mode-style-controller-c21172aa.js');
-const internalVegaEventManager = require('./internal-vega-event-manager-d587a33c.js');
+const internalVegaEventManager = require('./internal-vega-event-manager-6befeb34.js');
 const number = require('./number-4816603d.js');
-const contentState = require('./content-state-0be6fda3.js');
-const codeBlock = require('./code-block-22ee2550.js');
-const typeGuard = require('./type-guard-69d2cf01.js');
+const contentState = require('./content-state-466f277f.js');
+const codeBlock = require('./code-block-d9001f03.js');
+const typeGuard = require('./type-guard-a0f026d8.js');
 require('./translation-5f9f9c0c.js');
 const internalIconManager = require('./internal-icon-manager-32f9ed63.js');
-const styles_constants = require('./styles.constants-3aff0b56.js');
+const splitCellOperation = require('./split-cell-operation-9930fde8.js');
 const object = require('./object-e2e28e3d.js');
 const dtoRendererManager = require('./dto-renderer-manager-ae5fcbba.js');
 const baseRenderer = require('./base-renderer-0a3b62b7.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-1c8f7880.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-b5e71bf6.js');
 const vegaInternalEventId = require('./vega-internal-event-id-73334b4b.js');
 const tryGetDocument = require('./try-get-document-c0ebd39a.js');
 const pixel = require('./pixel-98f2a10c.js');
@@ -68,7 +67,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;
@@ -190,7 +189,7 @@ class VegaLoaderController {
   }
 }
 VegaLoaderController.SPECIAL_ELEMENT_TO_WRAP_FULL_BODY = ['VEGA-MODAL'];
-__decorate$6([
+__decorate$5([
   createPublicApiRuntimeMetricsSlimmer.InjectVegaTelemetrySlimmer()
 ], VegaLoaderController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 const VegaLoader = new VegaLoaderController();
@@ -432,7 +431,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;
@@ -543,183 +542,14 @@ class VegaNotifyController {
     return this.container;
   }
 }
-__decorate$5([
+__decorate$4([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaNotifyController.prototype, "resizeObserverSlimmer", void 0);
-__decorate$5([
+__decorate$4([
   createPublicApiRuntimeMetricsSlimmer.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.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 darkModeStyleController.VegaInternalThemeManager.overrideColors(overrideColors);
-  }
-  /**
-   * It removes all the custom override theme styles from the DOM
-   *
-   * @vegaVersion 1.20.0
-   */
-  async reset() {
-    void darkModeStyleController.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) {
-    darkModeStyleController.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 darkModeStyleController.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) {
-    darkModeStyleController.VegaInternalThemeManager.applyBranding(options);
-  }
-}
-__decorate$4([
-  createPublicApiRuntimeMetricsSlimmer.InjectVegaTelemetrySlimmer()
-], ThemeManager.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
-const VegaThemeManager = new ThemeManager();
-
 const VegaDialogRuntimeMetricsPayloadDefinition = [
   {
     payloadKey: 'IS_OPEN_METHOD_CALLED',
@@ -2951,7 +2781,7 @@ class DeleteTableBlockAction extends codeBlock.ModifyContentAction {
 class RTETableCaptionAnnotation extends codeBlock.BlockAnnotation {
   constructor() {
     super(...arguments);
-    this.type = styles_constants.RTETableExtensionAnnotationTypeEnum.CAPTION;
+    this.type = splitCellOperation.RTETableExtensionAnnotationTypeEnum.CAPTION;
   }
   /**
    * @inheritDoc
@@ -3010,7 +2840,7 @@ class RTETableCaptionBlock extends codeBlock.RTEBlock {
     this.type = 'table-caption';
     const { autoMatchFormat } = options || { autoMatchFormat: true };
     if (autoMatchFormat) {
-      this.annotationMap.set(styles_constants.RTETableExtensionAnnotationTypeEnum.CAPTION, new RTETableCaptionAnnotation());
+      this.annotationMap.set(splitCellOperation.RTETableExtensionAnnotationTypeEnum.CAPTION, new RTETableCaptionAnnotation());
     }
   }
   /**
@@ -3080,12 +2910,12 @@ class TableCaptionAction extends codeBlock.ModifyContentAction {
 /**
  * Event handler for row operations in a table.
  */
-class CaptionOperationEventHandler extends styles_constants.SettingEventHandler {
+class CaptionOperationEventHandler extends splitCellOperation.SettingEventHandler {
   /**
    * @inheritDoc
    */
   canHandle(action) {
-    return action[0] === styles_constants.TableSettingType.CAPTION;
+    return action[0] === splitCellOperation.TableSettingType.CAPTION;
   }
   /**
    * Toggle caption state for the target table block when the caption menu item is clicked.
@@ -3158,9 +2988,11 @@ class CaptionOperationEventHandler extends styles_constants.SettingEventHandler
 class TableSettingPopoverRenderer {
   constructor() {
     this.settingHandlers = [
-      new styles_constants.RowOperationEventHandler(),
+      new splitCellOperation.RowOperationEventHandler(),
       new CaptionOperationEventHandler(),
-      new styles_constants.ColumnOperationEventHandler(),
+      new splitCellOperation.ColumnOperationEventHandler(),
+      new splitCellOperation.MergeCellsOperationEventHandler(),
+      new splitCellOperation.SplitCellOperationEventHandler(),
     ];
     /**
      * Show table setting popover when table is clicked.
@@ -3202,11 +3034,11 @@ class TableSettingPopoverRenderer {
       const handler = this.settingHandlers.find((handler) => handler.canHandle(event.detail));
       if (handler) {
         handler.execute(event.detail, this.extensionContext, this.tableData);
-        if (event.detail[0] === styles_constants.TableSettingType.CAPTION) {
+        if (event.detail[0] === splitCellOperation.TableSettingType.CAPTION) {
           this.updateTableSettingCaption();
         }
       }
-      if (event.detail[0] === styles_constants.TableSettingType.TABLE || event.detail[0] === styles_constants.TableSettingType.CELL) {
+      if (event.detail[0] === splitCellOperation.TableSettingType.TABLE || event.detail[0] === splitCellOperation.TableSettingType.CELL) {
         void this.popoverRef.hide();
         void this.tableDynamicPopover.show(event.detail[0]);
       }
@@ -3303,7 +3135,7 @@ class TablePropertiesEventHandler {
    * @returns {RTETablePropertiesType} The generated form object
    */
   static generateTablePropertiesForm(tableBlock) {
-    const annotation = tableBlock.annotationMap.get(styles_constants.RTETableExtensionAnnotationTypeEnum.TABLE);
+    const annotation = tableBlock.annotationMap.get(splitCellOperation.RTETableExtensionAnnotationTypeEnum.TABLE);
     let result = {
       borderStyle: 'none',
       borderColor: '',
@@ -3372,7 +3204,7 @@ class UpdateTablePropertiesAction extends codeBlock.AnnotationAction {
    * @returns {RTETableAnnotation} The generated annotation
    */
   toAnnotation() {
-    return new styles_constants.RTETableAnnotation(this.tableProperties);
+    return new splitCellOperation.RTETableAnnotation(this.tableProperties);
   }
 }
 
@@ -3446,7 +3278,7 @@ class RTETableCellAnnotationsAction extends codeBlock.AnnotationAction {
    * @inheritDoc
    */
   toAnnotation() {
-    return new styles_constants.RTETableCellAnnotation(this.cellAnnotation);
+    return new splitCellOperation.RTETableCellAnnotation(this.cellAnnotation);
   }
 }
 
@@ -3463,7 +3295,7 @@ class RTETableHeadCellAnnotationsAction extends codeBlock.AnnotationAction {
    * @inheritDoc
    */
   toAnnotation() {
-    return new styles_constants.RTETableHeadCellAnnotation(this.tableCell);
+    return new splitCellOperation.RTETableHeadCellAnnotation(this.tableCell);
   }
 }
 
@@ -3490,15 +3322,18 @@ class CellPropertiesEventHandler {
    */
   static getStyleCollectionFromCell(selectedCells) {
     return selectedCells.reduce((accumulator, cell) => {
-      const annotation = cell.getAnnotationByType(styles_constants.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;
+      const annotation = cell.getAnnotationByType(splitCellOperation.RTETableExtensionAnnotationTypeEnum.CELL);
+      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] = object.cleanObject(Object.assign(Object.assign({}, restProps), formattedBorder));
       }
-      accumulator[cell.id] = object.cleanObject(Object.assign(Object.assign({}, restProps), formattedBorder));
       return accumulator;
     }, {});
   }
@@ -3530,7 +3365,7 @@ class CellPropertiesEventHandler {
         mergedStyles[key] = styleValues[0];
       }
     }
-    return Object.assign({ borderColor: styles_constants.RTETableCellAnnotation.DEFAULT_BORDER.color, borderStyle: styles_constants.RTETableCellAnnotation.DEFAULT_BORDER.style, borderWidth: styles_constants.RTETableCellAnnotation.DEFAULT_BORDER.width, textAlign: styles_constants.RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN, verticalAlign: styles_constants.RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN }, mergedStyles);
+    return mergedStyles;
   }
   /**
    * Apply the given properties to the selected cells
@@ -3568,12 +3403,14 @@ class CellPropertiesEventHandler {
    */
   convertToVegaTableCellAnnotation(originalStyles) {
     const { borderStyle, borderWidth, borderColor } = originalStyles, restStyles = __rest(originalStyles, ["borderStyle", "borderWidth", "borderColor"]);
-    const border = {
-      style: borderStyle || styles_constants.RTETableCellAnnotation.DEFAULT_BORDER.style,
-      width: pixel.parseToPixelString(borderWidth || styles_constants.RTETableCellAnnotation.DEFAULT_BORDER.width),
-      color: borderColor || styles_constants.RTETableCellAnnotation.DEFAULT_BORDER.color,
-    };
-    return Object.assign(Object.assign({}, restStyles), { padding: restStyles.padding ? pixel.parseToPixelString(restStyles.padding) : '', width: restStyles.width ? pixel.parseToPixelString(restStyles.width) : '', height: restStyles.height ? pixel.parseToPixelString(restStyles.height) : '', border });
+    const border = borderStyle || borderColor || borderWidth
+      ? object.cleanObject({
+        style: borderStyle,
+        width: borderWidth ? pixel.parseToPixelString(borderWidth) : '',
+        color: borderColor,
+      })
+      : null;
+    return object.cleanObject(Object.assign(Object.assign({}, restStyles), { padding: restStyles.padding ? pixel.parseToPixelString(restStyles.padding) : '', width: restStyles.width ? pixel.parseToPixelString(restStyles.width) : '', height: restStyles.height ? pixel.parseToPixelString(restStyles.height) : '', border }));
   }
   /**
    * Apply the given annotation to the specified table cell
@@ -3583,7 +3420,7 @@ class CellPropertiesEventHandler {
    * @param {boolean} isFlushable - Whether the action is flushable
    */
   applyAnnotation(cell, annotation, isFlushable) {
-    const action = cell instanceof styles_constants.RTETableHeadCellBlock
+    const action = cell instanceof splitCellOperation.RTETableHeadCellBlock
       ? new RTETableHeadCellAnnotationsAction(annotation)
       : new RTETableCellAnnotationsAction(annotation);
     action.isFlushable = isFlushable;
@@ -3719,13 +3556,13 @@ class TableDynamicPopoverRenderer {
   async show(type) {
     let target = this.getTableRef();
     const cells = this.extensionContext.tableSelection.getSelectedCells();
-    if (type === styles_constants.TableSettingType.CELL && cells.length > 1) {
+    if (type === splitCellOperation.TableSettingType.CELL && cells.length > 1) {
       const anchor = this.getOrCreateSelectionAnchor(cells, target);
       if (anchor) {
         target = anchor;
       }
     }
-    else if (type === styles_constants.TableSettingType.CELL && cells.length === 1) {
+    else if (type === splitCellOperation.TableSettingType.CELL && cells.length === 1) {
       target = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(cells[0]);
     }
     this.updateContent(type);
@@ -3780,7 +3617,7 @@ class TableDynamicPopoverRenderer {
           // eslint-disable-next-line jsdoc/require-jsdoc
           ref: (el) => (this.tablePropertiesFormRef = el),
           colors: this.tableColorSchema,
-          type: styles_constants.TableSettingType.TABLE,
+          type: splitCellOperation.TableSettingType.TABLE,
           onVegaCancel: this.handleTablePropertiesUpdate,
           onVegaChange: this.handleTablePropertiesUpdate,
           onVegaSave: this.handleTablePropertiesUpdate,
@@ -3789,7 +3626,7 @@ class TableDynamicPopoverRenderer {
           // eslint-disable-next-line jsdoc/require-jsdoc
           ref: (el) => (this.cellPropertiesFormRef = el),
           colors: this.tableColorSchema,
-          type: styles_constants.TableSettingType.CELL,
+          type: splitCellOperation.TableSettingType.CELL,
           onVegaCancel: this.handleCellPropertiesUpdate,
           onVegaChange: this.handleCellPropertiesUpdate,
           onVegaSave: this.handleCellPropertiesUpdate,
@@ -3894,7 +3731,7 @@ class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
    */
   doRender(h, renderData, rteContext) {
     const tableSettingPopoverRenderer = new TableSettingPopoverRenderer();
-    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer(this.tableColorSchema);
+    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer(splitCellOperation.RTETableColorManager.getTableColors());
     this.injectExtensionContextToRenderers(this.extensionContext, [
       tableDynamicPopoverRenderer,
       tableSettingPopoverRenderer,
@@ -3903,7 +3740,7 @@ class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
     const table = this.renderTable(h, renderData, (ref) => (tableRef = ref));
     const tableSettingPopover = tableSettingPopoverRenderer.render(h, renderData, () => tableRef, tableDynamicPopoverRenderer);
     const tableDynamicPopover = tableDynamicPopoverRenderer.render(h, () => tableRef, renderData);
-    const tableAnnotation = renderData.getAnnotationByType(styles_constants.RTETableExtensionAnnotationTypeEnum.TABLE);
+    const tableAnnotation = renderData.getAnnotationByType(splitCellOperation.RTETableExtensionAnnotationTypeEnum.TABLE);
     const children = rteContext.editable
       ? [
         h('vega-rich-text-table-selection-widget', {
@@ -3954,14 +3791,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.
    *
@@ -4080,7 +3909,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.
@@ -4420,10 +4251,10 @@ class InsertTableBlockStrategy extends codeBlock.ActionHandleStrategy {
   createTableBlock(row, column) {
     const normalizedRowCount = Math.max(row, 1);
     const normalizedColumnCount = Math.max(column, 1);
-    return styles_constants.RTETableBlock.from({
+    return splitCellOperation.RTETableBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'table-block',
-      children: [styles_constants.generateTableBody(normalizedRowCount, normalizedColumnCount)],
+      children: [splitCellOperation.generateTableBody(normalizedRowCount, normalizedColumnCount)],
     });
   }
   /**
@@ -4452,7 +4283,7 @@ class PreventCellContentDeleteInterceptor extends ActionHandlerInterceptor {
    */
   canIntercept(action, target) {
     const cell = target.parent;
-    const isSingleCellChild = cell instanceof styles_constants.RTETableCellBlock && cell.children.length === 1;
+    const isSingleCellChild = cell instanceof splitCellOperation.RTETableCellBlock && cell.children.length === 1;
     return isSingleCellChild && action.startOffset === 0;
   }
   /**
@@ -4532,57 +4363,52 @@ class InsertTableRowStrategy extends codeBlock.ActionHandleStrategy {
   handleAction(action, target) {
     const { insertDirection, selectedRows } = action;
     // The reference block will control where to insert the new row
-    let refBlock = insertDirection === styles_constants.InsertTableRowDirection.ABOVE
+    const refBlock = insertDirection === splitCellOperation.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 = styles_constants.RTETableRowBlock.from({
+    const refBlockIsHeaderRow = refBlock.parent instanceof splitCellOperation.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 = splitCellOperation.RTETableRowBlock.from({
         id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
         type: 'table-row',
         children: refBlock.children.map((item) => {
-          return this.getDefaultCellBlockTemplate(item.type);
+          return this.getDefaultCellBlockTemplate(item.type, item.colSpan);
         }),
       });
-      if (insertDirection === styles_constants.InsertTableRowDirection.ABOVE) {
-        refBlock.parent.apply(new codeBlock.InsertChildrenBeforeAction(refBlock, headerBlock));
+      if (insertDirection === splitCellOperation.InsertTableRowDirection.ABOVE) {
+        refBlock.parent.apply(new codeBlock.InsertChildrenBeforeAction(refBlock, rowBlock));
       }
       else {
-        refBlock.parent.apply(new codeBlock.InsertChildrenAfterAction(refBlock, headerBlock));
+        refBlock.parent.apply(new codeBlock.InsertChildrenAfterAction(refBlock, rowBlock));
       }
     }
     else {
-      let direction = insertDirection;
-      let tableBody = target.children.find((block) => block instanceof styles_constants.RTETableBodyBlock);
-      // Should insert into body if reference block is in head row and body exists
-      if (refBlock.parent instanceof styles_constants.RTETableHeadBlock && tableBody) {
-        refBlock = tableBody.children[0];
-        direction = styles_constants.InsertTableRowDirection.ABOVE;
-      }
-      const refBlockIsHeaderRow = refBlock.parent instanceof styles_constants.RTETableHeadBlock;
-      const rowBlock = styles_constants.RTETableRowBlock.from({
+      // The refBlock is a head row and new row is a body row
+      let tableBody = target.children.find((block) => block instanceof splitCellOperation.RTETableBodyBlock);
+      const rowBlockJSON = {
         id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
         type: 'table-row',
-        children: refBlock.children.map((item) => {
-          return this.getDefaultCellBlockTemplate(refBlockIsHeaderRow ? 'table-cell' : item.type);
-        }),
-      });
+        children: [],
+      };
       if (!tableBody) {
-        tableBody = styles_constants.RTETableBodyBlock.from({
+        rowBlockJSON.children = refBlock.children.map((item) => {
+          const { colSpan } = item;
+          return this.getDefaultCellBlockTemplate('table-cell', colSpan);
+        });
+        tableBody = splitCellOperation.RTETableBodyBlock.from({
           id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
           type: 'table-body',
           children: [],
         });
-        tableBody.apply(new codeBlock.AppendChildrenAction([rowBlock]));
+        tableBody.apply(new codeBlock.AppendChildrenAction([splitCellOperation.RTETableRowBlock.from(rowBlockJSON)]));
         target.apply(new codeBlock.AppendChildrenAction([tableBody]));
       }
       else {
-        if (direction === styles_constants.InsertTableRowDirection.ABOVE) {
-          tableBody.apply(new codeBlock.InsertChildrenBeforeAction(refBlock, rowBlock));
-        }
-        else {
-          tableBody.apply(new codeBlock.InsertChildrenAfterAction(refBlock, rowBlock));
-        }
+        const firstBodyRow = tableBody.children[0];
+        const headCellLength = this.getHeadCellLength(firstBodyRow);
+        rowBlockJSON.children = this.createTableCells(refBlock, headCellLength);
+        tableBody.apply(new codeBlock.InsertChildrenBeforeAction(firstBodyRow, splitCellOperation.RTETableRowBlock.from(rowBlockJSON)));
       }
     }
   }
@@ -4594,12 +4420,12 @@ class InsertTableRowStrategy extends codeBlock.ActionHandleStrategy {
    * @returns {boolean} True if a header row should be inserted, false otherwise.
    */
   shouldInsertHeaderRow(refBlock, direction) {
-    if (direction === styles_constants.InsertTableRowDirection.ABOVE) {
-      return refBlock.parent instanceof styles_constants.RTETableHeadBlock;
+    if (direction === splitCellOperation.InsertTableRowDirection.ABOVE) {
+      return refBlock.parent instanceof splitCellOperation.RTETableHeadBlock;
     }
     else {
       const parentBlock = refBlock.parent;
-      return (parentBlock instanceof styles_constants.RTETableHeadBlock &&
+      return (parentBlock instanceof splitCellOperation.RTETableHeadBlock &&
         parentBlock.children[parentBlock.children.length - 1] !== refBlock);
     }
   }
@@ -4607,11 +4433,17 @@ class InsertTableRowStrategy extends codeBlock.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 = object.cleanObject({
+      colspan: colSpan > 1 ? colSpan.toString() : null,
+      rowspan: rowSpan > 1 ? rowSpan.toString() : null,
+    });
     const id = createPublicApiRuntimeMetricsSlimmer.generateUUID();
-    return {
+    const cellBlock = {
       id,
       type: cellType,
       children: [
@@ -4628,6 +4460,49 @@ class InsertTableRowStrategy extends codeBlock.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 splitCellOperation.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;
   }
 }
 
@@ -4692,7 +4567,7 @@ class DeleteTableRowStrategy extends codeBlock.ActionHandleStrategy {
    */
   getFutureFocusRow(startRow, endRow, table) {
     const allRows = table.children
-      .filter((item) => item instanceof styles_constants.RTETableHeadBlock || item instanceof styles_constants.RTETableBodyBlock)
+      .filter((item) => item instanceof splitCellOperation.RTETableHeadBlock || item instanceof splitCellOperation.RTETableBodyBlock)
       .flatMap((block) => block.children);
     const startIndex = allRows.indexOf(startRow);
     const endIndex = allRows.indexOf(endRow);
@@ -4737,7 +4612,7 @@ class RTETableSelection {
         if (node.nodeType === Node.TEXT_NODE) {
           const focusedNodeDto = codeBlock.stateEntityRenderingRegistry.getEntityByDOM(node.parentElement);
           if (focusedNodeDto) {
-            const cell = styles_constants.getParentBlockByType(focusedNodeDto.parent, styles_constants.RTETableCellBlock);
+            const cell = splitCellOperation.getParentBlockByType(focusedNodeDto.parent, splitCellOperation.RTETableCellBlock);
             if (cell) {
               selectedCells.add(cell);
               return Array.from(selectedCells);
@@ -4815,25 +4690,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(codeBlock.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 = codeBlock.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.
@@ -4917,7 +4880,7 @@ class RTETableSelection {
    * @param {RTETableCellBlock[]} cells - The current selected table cells.
    */
   emitCellSelectionChange(firstCell, cells) {
-    const table = styles_constants.getParentBlockByType(firstCell, styles_constants.RTETableBlock);
+    const table = splitCellOperation.getParentBlockByType(firstCell, splitCellOperation.RTETableBlock);
     if (table) {
       const tableRef = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(table);
       if (tableRef) {
@@ -5077,7 +5040,7 @@ class ToggleHeaderRowStrategy extends codeBlock.ActionHandleStrategy {
     const headerRows = [];
     const bodyRows = [];
     for (const row of selectedRows) {
-      if (row.parent instanceof styles_constants.RTETableBodyBlock) {
+      if (row.parent instanceof splitCellOperation.RTETableBodyBlock) {
         bodyRows.push(row);
       }
       else {
@@ -5103,10 +5066,10 @@ class ToggleHeaderRowStrategy extends codeBlock.ActionHandleStrategy {
    * @param {RTETableBlock} table - The table block containing the rows.
    */
   convertToHeaderRows(rows, table) {
-    let tableHead = table.children.find((block) => block instanceof styles_constants.RTETableHeadBlock);
+    let tableHead = table.children.find((block) => block instanceof splitCellOperation.RTETableHeadBlock);
     const tableBody = rows[0].parent;
     if (!tableHead) {
-      tableHead = styles_constants.RTETableHeadBlock.from({
+      tableHead = splitCellOperation.RTETableHeadBlock.from({
         id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
         type: 'table-head',
         children: [],
@@ -5129,10 +5092,10 @@ class ToggleHeaderRowStrategy extends codeBlock.ActionHandleStrategy {
    * @param {RTETableBlock} table - The table block containing the rows.
    */
   revertToBodyRows(rows, table) {
-    let tableBody = table.children.find((block) => block instanceof styles_constants.RTETableBodyBlock);
+    let tableBody = table.children.find((block) => block instanceof splitCellOperation.RTETableBodyBlock);
     const tableHead = rows[0].parent;
     if (!tableBody) {
-      tableBody = styles_constants.RTETableBodyBlock.from({
+      tableBody = splitCellOperation.RTETableBodyBlock.from({
         id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
         type: 'table-body',
         children: [],
@@ -5161,10 +5124,10 @@ class ToggleHeaderRowStrategy extends codeBlock.ActionHandleStrategy {
    * @returns {RTETableHeadCellBlock} The converted table header cell block.
    */
   convertTdToTh(cell) {
-    if (cell instanceof styles_constants.RTETableHeadCellBlock) {
+    if (cell instanceof splitCellOperation.RTETableHeadCellBlock) {
       return cell;
     }
-    const headCell = styles_constants.RTETableHeadCellBlock.from(cell.toJSON());
+    const headCell = splitCellOperation.RTETableHeadCellBlock.from(cell.toJSON());
     headCell.parent = cell.parent;
     return headCell;
   }
@@ -5180,7 +5143,7 @@ class ToggleHeaderRowStrategy extends codeBlock.ActionHandleStrategy {
       let bodyCell = cell;
       if (!referenceRow || referenceRow.children[index].type !== cell.type) {
         const cellJSON = cell.toJSON();
-        bodyCell = styles_constants.RTETableCellBlock.from(cellJSON);
+        bodyCell = splitCellOperation.RTETableCellBlock.from(cellJSON);
       }
       bodyCell.parent = row;
       return bodyCell;
@@ -5191,16 +5154,16 @@ class ToggleHeaderRowStrategy extends codeBlock.ActionHandleStrategy {
 /**
  * Strategy to handle the insertion of a table column into the RTETable.
  */
-class InsertTableColumnStrategy extends styles_constants.TableColumnStrategy {
+class InsertTableColumnStrategy extends splitCellOperation.TableColumnStrategy {
   /**
    * @inheritDoc
    */
   handleAction(action, target) {
     const insertDirection = action.insertDirection;
     const [startCellIndex, endCellIndex] = this.getBoundaryCellIndexOfRow(action.tableCellInsertRange);
-    const allTableRows = styles_constants.getAllTableRows(target);
+    const allTableRows = splitCellOperation.getAllTableRows(target);
     allTableRows.forEach((row) => {
-      if (insertDirection === styles_constants.InsertTableColumnDirection.LEFT) {
+      if (insertDirection === splitCellOperation.InsertTableColumnDirection.LEFT) {
         const newCell = this.generateTableCell(row.children[startCellIndex]);
         row.apply(new codeBlock.InsertChildrenBeforeAction(row.children[startCellIndex], newCell));
       }
@@ -5217,17 +5180,17 @@ class InsertTableColumnStrategy extends styles_constants.TableColumnStrategy {
    * @returns {RTETableCellBlock | RTETableHeadCellBlock} The newly generated table cell block.
    */
   generateTableCell(originalCell) {
-    if (originalCell instanceof styles_constants.RTETableHeadCellBlock) {
-      return styles_constants.RTETableHeadCellBlock.from(styles_constants.getDefaultCellBlockTemplate(originalCell.type));
+    if (originalCell instanceof splitCellOperation.RTETableHeadCellBlock) {
+      return splitCellOperation.RTETableHeadCellBlock.from(splitCellOperation.getDefaultCellBlockTemplate(originalCell.type));
     }
-    return styles_constants.RTETableCellBlock.from(styles_constants.getDefaultCellBlockTemplate(originalCell.type));
+    return splitCellOperation.RTETableCellBlock.from(splitCellOperation.getDefaultCellBlockTemplate(originalCell.type));
   }
 }
 
 /**
  * Strategy to handle the deletion of table column from the parent.
  */
-class DeleteTableColumnStrategy extends styles_constants.TableColumnStrategy {
+class DeleteTableColumnStrategy extends splitCellOperation.TableColumnStrategy {
   /**
    * Deletes the specified table column and updates the cursor position.
    *
@@ -5236,14 +5199,14 @@ class DeleteTableColumnStrategy extends styles_constants.TableColumnStrategy {
    */
   handleAction(action, target) {
     const [startCellIndex, endCellIndex] = this.getBoundaryCellIndexOfRow(action.tableCellDeleteRange);
-    const allTableRows = styles_constants.getAllTableRows(target);
+    const allTableRows = splitCellOperation.getAllTableRows(target);
     // Find the next focusable cell before deletion
     const nextFocusableCell = this.findNextFocusableCell(action.tableCellDeleteRange, [startCellIndex, endCellIndex]);
     allTableRows.forEach((row) => {
       this.deleteCellsInRow(row, startCellIndex, endCellIndex);
     });
     const root = this.getRootContent(target);
-    const nextFocusNode = styles_constants.getFirstNode(nextFocusableCell);
+    const nextFocusNode = splitCellOperation.getFirstNode(nextFocusableCell);
     if (root && nextFocusNode) {
       root.apply(new contentState.UpdateCursorPositionAction(nextFocusNode));
     }
@@ -5281,13 +5244,13 @@ class DeleteTableColumnStrategy extends styles_constants.TableColumnStrategy {
 /**
  * Strategy to handle the selection of a table column.
  */
-class SelectTableColumnStrategy extends styles_constants.TableColumnStrategy {
+class SelectTableColumnStrategy extends splitCellOperation.TableColumnStrategy {
   /**
    * @inheritDoc
    */
   handleAction(action, target) {
     const [startCellIndex, endCellIndex] = this.getBoundaryCellIndexOfRow(action.tableCellSelectRange);
-    const allTableRows = styles_constants.getAllTableRows(target);
+    const allTableRows = splitCellOperation.getAllTableRows(target);
     const allNeedSelectedCells = [];
     allTableRows.forEach((row) => {
       for (let cellIndex = startCellIndex; cellIndex <= endCellIndex; cellIndex++) {
@@ -5310,7 +5273,7 @@ class PreventRowInsertInterceptor extends ActionHandlerInterceptor {
    * @returns {boolean} - true if the insertion should be intercepted, false otherwise
    */
   canIntercept(action) {
-    return action.childrenToBeInserted.some((item) => !(item instanceof styles_constants.RTETableCellBlock));
+    return action.childrenToBeInserted.some((item) => !(item instanceof splitCellOperation.RTETableCellBlock));
   }
   /**
    * @inheritDoc
@@ -5319,6 +5282,122 @@ class PreventRowInsertInterceptor extends ActionHandlerInterceptor {
   }
 }
 
+/**
+ * Strategy to handle the merging of table cells.
+ */
+class MergeCellsStrategy extends codeBlock.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);
+    splitCellOperation.setSpanAttributes(targetCell, colSpan, rowSpan, target);
+    this.deleteOtherSelectedCells(mergeCells, targetCell);
+    if (direction !== splitCellOperation.MergeCellsOperationType.MERGE_CELL_LEFT &&
+      direction !== splitCellOperation.MergeCellsOperationType.MERGE_CELL_RIGHT &&
+      rowSpan > 1) {
+      this.clearRowSpanIfUniformAcrossRow(targetCell, target, rowSpan);
+    }
+    const root = this.getRootContent(target);
+    const nextFocusNode = splitCellOperation.getFirstNode(targetCell);
+    if (root && nextFocusNode) {
+      root.apply(new contentState.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 codeBlock.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 = splitCellOperation.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 } = splitCellOperation.getCellSpan(cell);
+              const reducedRowSpan = rowSpan - minRowSpan + 1;
+              splitCellOperation.setSpanAttributes(cell, colSpan, reducedRowSpan, table);
+            }
+          });
+        });
+      }
+    }
+  }
+}
+
 /**
  * Strategy to convert a native HTML table element into an RTETableBlock DTO.
  */
@@ -5334,10 +5413,10 @@ class TableToTableBlockStrategy extends contentState.ElementToDTOStrategy {
    * @inheritDoc
    */
   handle(elementsArray, options) {
-    return styles_constants.RTETableBlock.from({
+    return splitCellOperation.RTETableBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'table-block',
-      annotations: contentState.htmlElementToAnnotationGenerator.generate(styles_constants.RTETableBlock, elementsArray[0], options),
+      annotations: contentState.htmlElementToAnnotationGenerator.generate(splitCellOperation.RTETableBlock, elementsArray[0], options),
       children: [],
     }, options);
   }
@@ -5373,10 +5452,10 @@ class TheadToTableHeadBlockStrategy extends contentState.BlockToRTEBlockStrategy
    * @inheritDoc
    */
   handle(elementsArray, options) {
-    return styles_constants.RTETableHeadBlock.from({
+    return splitCellOperation.RTETableHeadBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'table-head',
-      annotations: contentState.htmlElementToAnnotationGenerator.generate(styles_constants.RTETableHeadBlock, elementsArray[0], options),
+      annotations: contentState.htmlElementToAnnotationGenerator.generate(splitCellOperation.RTETableHeadBlock, elementsArray[0], options),
       children: [],
     }, options);
   }
@@ -5412,10 +5491,10 @@ class TbodyToTableBodyBlockStrategy extends contentState.BlockToRTEBlockStrategy
    * @inheritDoc
    */
   handle(elementsArray, options) {
-    return styles_constants.RTETableBodyBlock.from({
+    return splitCellOperation.RTETableBodyBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'table-body',
-      annotations: contentState.htmlElementToAnnotationGenerator.generate(styles_constants.RTETableBodyBlock, elementsArray[0], options),
+      annotations: contentState.htmlElementToAnnotationGenerator.generate(splitCellOperation.RTETableBodyBlock, elementsArray[0], options),
       children: [],
     }, options);
   }
@@ -5451,10 +5530,10 @@ class TrToTableRowBlockStrategy extends contentState.BlockToRTEBlockStrategyAbst
    * @inheritDoc
    */
   handle(elementsArray, options) {
-    return styles_constants.RTETableRowBlock.from({
+    return splitCellOperation.RTETableRowBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'table-row',
-      annotations: contentState.htmlElementToAnnotationGenerator.generate(styles_constants.RTETableRowBlock, elementsArray[0], options),
+      annotations: contentState.htmlElementToAnnotationGenerator.generate(splitCellOperation.RTETableRowBlock, elementsArray[0], options),
       children: [],
     }, options);
   }
@@ -5511,17 +5590,17 @@ class TdToTableCellBlockStrategy extends contentState.BlockToRTEBlockStrategyAbs
       },
     ];
     if (element.tagName === 'TH') {
-      return styles_constants.RTETableHeadCellBlock.from({
+      return splitCellOperation.RTETableHeadCellBlock.from({
         id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
         type: 'table-head-cell',
-        annotations: contentState.htmlElementToAnnotationGenerator.generate(styles_constants.RTETableCellBlock, element, options),
+        annotations: contentState.htmlElementToAnnotationGenerator.generate(splitCellOperation.RTETableCellBlock, element, options),
         children: defaultChildren,
       }, options);
     }
-    return styles_constants.RTETableCellBlock.from({
+    return splitCellOperation.RTETableCellBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'table-cell',
-      annotations: contentState.htmlElementToAnnotationGenerator.generate(styles_constants.RTETableHeadCellBlock, element),
+      annotations: contentState.htmlElementToAnnotationGenerator.generate(splitCellOperation.RTETableHeadCellBlock, element, options),
       children: defaultChildren,
     }, options);
   }
@@ -5601,7 +5680,7 @@ class TableAnnotationHandlerBase extends contentState.AnnotationGeneratorStrateg
    */
   getBackgroundColor(element) {
     if (element.style.backgroundColor) {
-      return element.style.backgroundColor;
+      return splitCellOperation.RTETableColorManager.getColorKey(element.style.backgroundColor);
     }
     return null;
   }
@@ -5613,37 +5692,15 @@ class TableAnnotationHandlerBase extends contentState.AnnotationGeneratorStrateg
    */
   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: splitCellOperation.RTETableColorManager.getColorKey(borderColor === 'initial' ? '' : borderColor),
       };
     }
     return null;
@@ -5779,11 +5836,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.
    *
@@ -5862,8 +5945,8 @@ class UpdateTablePropertiesStrategy extends codeBlock.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;
@@ -5889,7 +5972,8 @@ class UpdateTableCellPropertiesStrategy extends codeBlock.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;
@@ -5901,6 +5985,221 @@ class UpdateTableCellPropertiesStrategy extends codeBlock.ActionHandleStrategy {
   }
 }
 
+/**
+ * Strategy to handle horizontal split of a table cell (splits top/bottom).
+ */
+class SplitCellHorizontallyStrategy extends codeBlock.ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(_action, target) {
+    const row = target.parent;
+    const section = row.parent;
+    const table = splitCellOperation.getParentBlockByType(row, splitCellOperation.RTETableBlock);
+    const allRows = splitCellOperation.getAllTableRows(table);
+    const currentRowIndex = allRows.indexOf(row);
+    const { colSpan, rowSpan } = splitCellOperation.getCellSpan(target);
+    const cellColumnPosition = splitCellOperation.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)
+    splitCellOperation.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 = splitCellOperation.createNewCell(target.type);
+    splitCellOperation.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 codeBlock.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 } = splitCellOperation.getCellSpan(prevCell);
+        // Check if this cell extends into the target row
+        if (r + rowSpan > rowIndex) {
+          const prevCellColumnPosition = splitCellOperation.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 } = splitCellOperation.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: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'table-row',
+      children: [],
+    };
+    const newRow = splitCellOperation.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 } = splitCellOperation.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) {
+          splitCellOperation.setSpanAttributes(cell, colSpan, rowSpan + 1, table);
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Strategy to handle vertical split of a table cell (splits left/right).
+ */
+class SplitCellVerticallyStrategy extends codeBlock.ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(_action, target) {
+    const row = target.parent;
+    const table = splitCellOperation.getParentBlockByType(row, splitCellOperation.RTETableBlock);
+    const allRows = splitCellOperation.getAllTableRows(table);
+    const currentRowIndex = allRows.indexOf(row);
+    const { colSpan, rowSpan } = splitCellOperation.getCellSpan(target);
+    // Get the actual column position of the cell being split
+    const cellColumnStart = splitCellOperation.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)
+    splitCellOperation.setSpanAttributes(target, leftColSpan, rowSpan, table);
+    // Create new cell (right cell) with same type as original
+    const newCell = splitCellOperation.createNewCell(target.type);
+    splitCellOperation.setSpanAttributes(newCell, rightColSpan, rowSpan, table);
+    // Insert new cell after the original in the same row
+    row.apply(new codeBlock.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 = splitCellOperation.getActualColumnPosition(cell, allRows);
+        const { colSpan, rowSpan } = splitCellOperation.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
+          splitCellOperation.setSpanAttributes(cell, colSpan + newColumnsAdded, rowSpan, table);
+          break; // No need to check other cells in this row
+        }
+      }
+    }
+  }
+}
+
 /**
  * Function extension class for Vega Rich Text Editor.
  */
@@ -5908,9 +6207,9 @@ 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 = styles_constants.RTE_TABLE_DEFAULT_COLORS) {
+  constructor(colors = splitCellOperation.RTE_TABLE_DEFAULT_COLORS) {
     super();
     this.toolbarButtonRenderer = new RTETableToolbarButtonRenderer();
     this.tableBlockRenderer = new RTETableBlockRenderer();
@@ -5918,13 +6217,14 @@ class VegaRTETableExtension extends VegaRTEExtension {
     this.tableCellRenderer = new RTETableCellRenderer();
     this.tableHeadCellRenderer = new RTETableHeadCellRenderer();
     this.tableSelection = new RTETableSelection();
+    splitCellOperation.RTETableColorManager.setTableColors(colors);
     this.registerToolbarButtonRenderer('table', this.toolbarButtonRenderer);
-    this.registerBlockBasicStrategies(styles_constants.RTETableBlock.name);
-    this.registerBlockBasicStrategies(styles_constants.RTETableHeadBlock.name);
-    this.registerBlockBasicStrategies(styles_constants.RTETableHeadCellBlock.name);
-    this.registerBlockBasicStrategies(styles_constants.RTETableRowBlock.name);
-    this.registerBlockBasicStrategies(styles_constants.RTETableCellBlock.name);
-    this.registerBlockBasicStrategies(styles_constants.RTETableBodyBlock.name);
+    this.registerBlockBasicStrategies(splitCellOperation.RTETableBlock.name);
+    this.registerBlockBasicStrategies(splitCellOperation.RTETableHeadBlock.name);
+    this.registerBlockBasicStrategies(splitCellOperation.RTETableHeadCellBlock.name);
+    this.registerBlockBasicStrategies(splitCellOperation.RTETableRowBlock.name);
+    this.registerBlockBasicStrategies(splitCellOperation.RTETableCellBlock.name);
+    this.registerBlockBasicStrategies(splitCellOperation.RTETableBodyBlock.name);
     this.registerRenderer('table-block', this.tableBlockRenderer);
     this.registerRenderer('table-head', new RTETableHeadRenderer());
     this.registerRenderer('table-head-cell', this.tableHeadCellRenderer);
@@ -5932,12 +6232,12 @@ class VegaRTETableExtension extends VegaRTEExtension {
     this.registerRenderer('table-cell', this.tableCellRenderer);
     this.registerRenderer('table-body', new RTETableBodyRenderer());
     this.registerRenderer('table-caption', new RTETableCaptionRenderer());
-    this.registerNode('table-block', styles_constants.RTETableBlock);
-    this.registerNode('table-head', styles_constants.RTETableHeadBlock);
-    this.registerNode('table-head-cell', styles_constants.RTETableHeadCellBlock);
-    this.registerNode('table-row', styles_constants.RTETableRowBlock);
-    this.registerNode('table-cell', styles_constants.RTETableCellBlock);
-    this.registerNode('table-body', styles_constants.RTETableBodyBlock);
+    this.registerNode('table-block', splitCellOperation.RTETableBlock);
+    this.registerNode('table-head', splitCellOperation.RTETableHeadBlock);
+    this.registerNode('table-head-cell', splitCellOperation.RTETableHeadCellBlock);
+    this.registerNode('table-row', splitCellOperation.RTETableRowBlock);
+    this.registerNode('table-cell', splitCellOperation.RTETableCellBlock);
+    this.registerNode('table-body', splitCellOperation.RTETableBodyBlock);
     this.registerNode('table-caption', RTETableCaptionBlock);
     this.registerElementToBlockDTOClassStrategy(new TableToTableBlockStrategy());
     this.registerElementToBlockDTOClassStrategy(new TheadToTableHeadBlockStrategy());
@@ -5949,7 +6249,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
@@ -5977,24 +6276,29 @@ class VegaRTETableExtension extends VegaRTEExtension {
   const deleteTableBlockStrategy = new DeleteTableBlockStrategy();
   VegaRTEExtension.registerActionHandleStrategy(contentState.VegaRTEContent.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
   VegaRTEExtension.registerActionHandleStrategy(contentState.VegaRTEContent.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
-  VegaRTEExtension.registerActionHandleStrategy(styles_constants.RTETableCellBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
-  VegaRTEExtension.registerActionHandleStrategy(styles_constants.RTETableHeadCellBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableCellBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableHeadCellBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
   VegaRTEExtension.registerActionHandleStrategy(codeBlock.RTETextBlock.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
   VegaRTEExtension.registerActionHandleStrategy(contentState.RTEImageBlock.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
-  VegaRTEExtension.registerActionHandleStrategy(styles_constants.RTETableBlock.name, styles_constants.INSERT_TABLE_ROW, new InsertTableRowStrategy());
-  VegaRTEExtension.registerActionHandleStrategy(styles_constants.RTETableBlock.name, styles_constants.DELETE_TABLE_ROW, new DeleteTableRowStrategy());
-  VegaRTEExtension.registerActionHandleStrategy(styles_constants.RTETableBlock.name, styles_constants.TOGGLE_HEADER_ROW, new ToggleHeaderRowStrategy());
-  VegaRTEExtension.registerActionHandleStrategy(styles_constants.RTETableBlock.name, styles_constants.INSERT_TABLE_COLUMN, new InsertTableColumnStrategy());
-  VegaRTEExtension.registerActionHandleStrategy(styles_constants.RTETableBlock.name, styles_constants.DELETE_TABLE_COLUMN, new DeleteTableColumnStrategy());
-  VegaRTEExtension.registerActionHandleStrategy(styles_constants.RTETableBlock.name, styles_constants.TOGGLE_HEADER_TABLE_COLUMN, new styles_constants.ToggleHeaderTableColumnStrategy());
-  VegaRTEExtension.registerActionHandleStrategy(styles_constants.RTETableBlock.name, styles_constants.SELECT_TABLE_COLUMN, new SelectTableColumnStrategy());
-  VegaRTEExtension.registerActionHandleStrategy(styles_constants.RTETableBlock.name, UpdateTablePropertiesAction.name, new UpdateTablePropertiesStrategy());
-  VegaRTEExtension.registerActionHandleStrategy(styles_constants.RTETableCellBlock.name, RTETableCellAnnotationsAction.name, new UpdateTableCellPropertiesStrategy());
-  VegaRTEExtension.registerActionHandleStrategy(styles_constants.RTETableHeadCellBlock.name, RTETableHeadCellAnnotationsAction.name, new UpdateTableCellPropertiesStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableBlock.name, splitCellOperation.INSERT_TABLE_ROW, new InsertTableRowStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableBlock.name, splitCellOperation.DELETE_TABLE_ROW, new DeleteTableRowStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableBlock.name, splitCellOperation.TOGGLE_HEADER_ROW, new ToggleHeaderRowStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableBlock.name, splitCellOperation.INSERT_TABLE_COLUMN, new InsertTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableBlock.name, splitCellOperation.DELETE_TABLE_COLUMN, new DeleteTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableBlock.name, splitCellOperation.TOGGLE_HEADER_TABLE_COLUMN, new splitCellOperation.ToggleHeaderTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableCellBlock.name, splitCellOperation.SPLIT_CELL_HORIZONTALLY, new SplitCellHorizontallyStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableCellBlock.name, splitCellOperation.SPLIT_CELL_VERTICALLY, new SplitCellVerticallyStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableHeadCellBlock.name, splitCellOperation.SPLIT_CELL_HORIZONTALLY, new SplitCellHorizontallyStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableHeadCellBlock.name, splitCellOperation.SPLIT_CELL_VERTICALLY, new SplitCellVerticallyStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableBlock.name, splitCellOperation.SELECT_TABLE_COLUMN, new SelectTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableBlock.name, splitCellOperation.MERGE_CELLS, new MergeCellsStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableBlock.name, UpdateTablePropertiesAction.name, new UpdateTablePropertiesStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableCellBlock.name, RTETableCellAnnotationsAction.name, new UpdateTableCellPropertiesStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(splitCellOperation.RTETableHeadCellBlock.name, RTETableHeadCellAnnotationsAction.name, new UpdateTableCellPropertiesStrategy());
   VegaRTEExtension.registerActionHandlerInterceptor(codeBlock.RTETextBlock.name, codeBlock.ModifyContentActionType.DELETE_BLOCK_CONTENT, new PreventCellContentDeleteInterceptor());
-  VegaRTEExtension.registerActionHandlerInterceptor(styles_constants.RTETableRowBlock.name, codeBlock.ModifyContentActionType.INSERT_CHILDREN_BEFORE, new PreventRowInsertInterceptor());
-  VegaRTEExtension.registerActionHandlerInterceptor(styles_constants.RTETableCellBlock.name, codeBlock.ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
-  VegaRTEExtension.registerActionHandlerInterceptor(styles_constants.RTETableHeadCellBlock.name, codeBlock.ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(splitCellOperation.RTETableRowBlock.name, codeBlock.ModifyContentActionType.INSERT_CHILDREN_BEFORE, new PreventRowInsertInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(splitCellOperation.RTETableCellBlock.name, codeBlock.ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(splitCellOperation.RTETableHeadCellBlock.name, codeBlock.ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
 })();
 
 exports.ActionHandlerInterceptor = ActionHandlerInterceptor;
@@ -6014,5 +6318,4 @@ exports.VegaRTETableExtension = VegaRTETableExtension;
 exports.VegaRTETokenExtension = VegaRTETokenExtension;
 exports.VegaRTEToolbarButtonRenderer = VegaRTEToolbarButtonRenderer;
 exports.VegaSkeletonLoader = VegaSkeletonLoader;
-exports.VegaThemeManager = VegaThemeManager;
 exports.VegaZIndexManager = VegaZIndexManager$1;