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

package/dist/esm/{styles.constants-0dd6f7fa.js → split-cell-operation-6749f654.js}

@@ -1,33 +1,348 @@
-import { B as BlockAnnotation, f as RTEBlock, M as ModifyContentAction, i as RTENode, d as ActionHandleStrategy, j as InsertChildrenBeforeAction, m as RemoveChildrenAction } from './code-block-76b29be1.js';
+import { B as BlockAnnotation, f as RTEBlock, M as ModifyContentAction, n as CommonAnnotationTypeEnum, C as CustomAttributeAnnotation, i as RTENode, d as ActionHandleStrategy, j as InsertChildrenBeforeAction, m as RemoveChildrenAction } from './code-block-36393b45.js';
 import { c as cleanObject } from './object-66c37948.js';
-import { i as isNonNullable } from './type-guard-b48aec98.js';
-import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
-import { U as UpdateCursorPositionAction, V as VegaRTEContent } from './content-state-03f1d302.js';
+import { V as VegaInternalThemeManager } from './dark-mode-style-controller-de88a117.js';
+import './global-slimmer-registry-17c4efd4.js';
+import { I as InjectVegaTelemetrySlimmer, c as createPublicAPIRuntimeMetricsSlimmer, g as generateUUID } from './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
+import { r as rgbToHex } from './ui-bb99c0c2.js';
+import { i as isNonNullable } from './type-guard-c65a227d.js';
+import { U as UpdateCursorPositionAction, V as VegaRTEContent } from './content-state-e8ef033a.js';
+
+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 = (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([
+  InjectVegaTelemetrySlimmer()
+], ThemeManager.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaThemeManager = new ThemeManager();
+
+const RTE_TABLE_BORDER_STYLES = [
+  'none',
+  'solid',
+  'dashed',
+  'dotted',
+  'double',
+  'groove',
+  'ridge',
+  'inset',
+  'outset',
+];
+const RTE_TABLE_DEFAULT_COLORS = [
+  { key: 'white', dark: '#04041C', light: '#FCFCFC' },
+  { key: 'red', dark: '#AA091C', light: '#FF4C61' },
+  { key: 'orange', dark: '#974502', light: '#FDAB68' },
+  { key: 'yellow', dark: '#735C00', light: '#FFDC4C' },
+  { key: 'green', dark: '#2E6D18', light: '#7BDA58' },
+  { key: 'teal', dark: '#287171', light: '#7BD1D1' },
+  { key: 'gray', dark: '#595959', light: '#999999' },
+  { key: 'black', dark: '#FCFCFC', light: '#04041C' },
+];
+
+/**
+ * Manages table colors for the rich text editor.
+ */
+class RTETableColorManager {
+  /**
+   * Get the list of table colors.
+   *
+   * @returns {VegaRTEColorSchema[]} - Array of table colors.
+   */
+  static getTableColors() {
+    return RTETableColorManager.TABLE_COLORS;
+  }
+  /**
+   * Set the list of table colors.
+   *
+   * @param {VegaRTEColorSchema[]} colors - Array of table colors.
+   */
+  static setTableColors(colors) {
+    RTETableColorManager.TABLE_COLORS = colors;
+  }
+  /**
+   * Get color key from color value
+   *
+   * @param {string} colorValue - color value
+   * @returns {string} - color key
+   */
+  static getColorKey(colorValue) {
+    var _a;
+    let result = null;
+    const tableColors = RTETableColorManager.TABLE_COLORS;
+    if (tableColors) {
+      const hexColor = (_a = rgbToHex(colorValue)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+      if (hexColor) {
+        result = tableColors.find((schema) => VegaThemeManager.isDarkMode() ? schema.dark === hexColor : schema.light === hexColor);
+      }
+      else {
+        for (const color of tableColors) {
+          if (color.key === colorValue) {
+            result = color;
+            break;
+          }
+        }
+      }
+    }
+    return result ? result.key : '';
+  }
+}
+RTETableColorManager.TABLE_COLORS = RTE_TABLE_DEFAULT_COLORS;
+
+/**
+ * Class representing a table color annotation in the rich text editor.
+ */
+class RTETableColorAnnotation extends BlockAnnotation {
+  constructor(colorKey) {
+    super();
+    this.type = RTETableExtensionAnnotationTypeEnum.COLOR;
+    if (colorKey) {
+      this.color = this.formatColor(colorKey);
+    }
+  }
+  /**
+   * Render the style for the annotation
+   *
+   * @returns {AnnotationStyle} The style object containing the color
+   */
+  renderStyle() {
+    const color = this.color
+      ? VegaInternalThemeManager.isDarkMode()
+        ? this.color.dark
+        : this.color.light
+      : '';
+    return { color };
+  }
+  /**
+   * Render the CSS class for the annotation
+   *
+   * @returns {Nullable<string>} Always returns null as no CSS class is used
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * Convert the annotation to a JSON representation
+   *
+   * @returns {Record<string, string>} A JSON object containing the color key
+   */
+  toJSON() {
+    var _a;
+    return {
+      color: ((_a = this.color) === null || _a === void 0 ? void 0 : _a.key) || '',
+    };
+  }
+  /**
+   * Clone the current annotation
+   *
+   * @returns {BlockAnnotation<RTETableExtensionAnnotationTypeEnum.COLOR>} A new instance of RTETableColorAnnotation with the same color key
+   */
+  clone() {
+    var _a;
+    return new RTETableColorAnnotation((_a = this.color) === null || _a === void 0 ? void 0 : _a.key);
+  }
+  /**
+   * format table color
+   *
+   * @param {string} colorKey - table color
+   * @returns {Nullable<VegaRTEColorSchema>} - VegaRTEColorSchema
+   */
+  formatColor(colorKey) {
+    return RTETableColorManager.getTableColors().find((item) => item.key === colorKey);
+  }
+}
 
 var RTETableExtensionAnnotationTypeEnum;
 (function (RTETableExtensionAnnotationTypeEnum) {
   RTETableExtensionAnnotationTypeEnum["TABLE"] = "EXTENSION_TABLE";
   RTETableExtensionAnnotationTypeEnum["CELL"] = "EXTENSION_TABLE_CELL";
   RTETableExtensionAnnotationTypeEnum["CAPTION"] = "EXTENSION_TABLE_CAPTION";
+  RTETableExtensionAnnotationTypeEnum["COLOR"] = "EXTENSION_TABLE_COLOR";
 })(RTETableExtensionAnnotationTypeEnum || (RTETableExtensionAnnotationTypeEnum = {}));
 /**
  * Class representing a table annotation in the rich text editor.
  */
 class RTETableAnnotation extends BlockAnnotation {
-  constructor({ backgroundColor, border, width, height, alignment = 'center', } = {}) {
+  constructor({ backgroundColor, border, width, height, alignment, borderCollapse } = {}, useInternalStyle = true) {
     super();
     this.type = RTETableExtensionAnnotationTypeEnum.TABLE;
+    this.useInternalStyle = useInternalStyle;
     this.backgroundColor = backgroundColor;
     this.border = border;
     this.width = width;
     this.height = height;
-    this.alignment = alignment;
+    this.alignment =
+      useInternalStyle && alignment === undefined ? RTETableAnnotation.DEFAULT_ALIGNMENT : alignment;
+    this.backgroundColorAnnotation = new RTETableColorAnnotation(backgroundColor);
+    this.borderColorAnnotation = new RTETableColorAnnotation(border === null || border === void 0 ? void 0 : border.color);
+    this.borderCollapse =
+      useInternalStyle && borderCollapse === undefined
+        ? RTETableAnnotation.DEFAULT_BORDER_COLLAPSE
+        : borderCollapse;
   }
   /**
    * @inheritDoc
    */
-  static from(value) {
-    return [RTETableExtensionAnnotationTypeEnum.TABLE, new RTETableAnnotation(value)];
+  static from(value, useInternalStyle = true) {
+    return [RTETableExtensionAnnotationTypeEnum.TABLE, new RTETableAnnotation(value, useInternalStyle)];
   }
   /**
    * Generates the CSS border string from the border properties.
@@ -38,7 +353,7 @@ class RTETableAnnotation extends BlockAnnotation {
     if (!this.border) {
       return null;
     }
-    return `${this.border.style} ${this.border.width} ${this.border.color}`.trim();
+    return `${this.border.style} ${this.border.width} ${this.borderColorAnnotation.renderStyle().color}`.trim();
   }
   /**
    * @inheritDoc
@@ -50,7 +365,8 @@ class RTETableAnnotation extends BlockAnnotation {
       width: this.width,
       height: this.height,
       alignment: this.alignment,
-    });
+      borderCollapse: this.borderCollapse,
+    }, this.useInternalStyle);
   }
   /**
    * @inheritDoc
@@ -63,6 +379,7 @@ class RTETableAnnotation extends BlockAnnotation {
         width: this.width,
         height: this.height,
         alignment: this.alignment,
+        borderCollapse: this.borderCollapse,
       }),
     };
   }
@@ -70,11 +387,10 @@ class RTETableAnnotation extends BlockAnnotation {
    * @inheritDoc
    */
   renderStyle() {
-    const defaultStyles = {
-      borderCollapse: 'collapse',
-    };
-    const tableStyles = Object.assign({ backgroundColor: this.backgroundColor, border: this.borderStr, width: this.width, height: this.height }, this.renderAlignmentStyle());
-    return cleanObject(Object.assign(Object.assign({}, defaultStyles), tableStyles));
+    const backgroundColor = this.backgroundColorAnnotation.renderStyle().color;
+    const tableStyles = Object.assign({ border: this.borderStr, width: this.width, height: this.height, borderCollapse: this.borderCollapse }, this.renderAlignmentStyle());
+    backgroundColor && (tableStyles.backgroundColor = backgroundColor);
+    return cleanObject(tableStyles);
   }
   /**
    * @inheritDoc
@@ -88,11 +404,15 @@ class RTETableAnnotation extends BlockAnnotation {
    * @returns {Record<string, string>} The alignment styles.
    */
   renderAlignmentStyle() {
+    if (!this.alignment)
+      return {};
     return {
       margin: this.alignment === 'center' ? '0 auto' : this.alignment === 'left' ? '0' : '0 0 0 auto',
     };
   }
 }
+RTETableAnnotation.DEFAULT_BORDER_COLLAPSE = 'collapse';
+RTETableAnnotation.DEFAULT_ALIGNMENT = 'center';
 
 /**
  * Class representing a table block in the rich text editor.
@@ -116,7 +436,7 @@ class RTETableBlock extends RTEBlock {
     super.convertAnnotationsToMap(tableBlock.annotationMap, Object.assign({}, block.annotations));
     tableBlock.children = super.generateBlockChildren(block.children, options, tableBlock);
     if ((_a = block.annotations) === null || _a === void 0 ? void 0 : _a.table) {
-      tableBlock.annotationMap.set(...RTETableAnnotation.from(block.annotations.table));
+      tableBlock.annotationMap.set(...RTETableAnnotation.from(block.annotations.table, options === null || options === void 0 ? void 0 : options.autoMatchFormat));
     }
     return tableBlock;
   }
@@ -219,6 +539,7 @@ var TableSettingType;
   TableSettingType["MERGE_CELLS"] = "MERGE_CELLS";
   TableSettingType["TABLE"] = "TABLE";
   TableSettingType["CELL"] = "CELL";
+  TableSettingType["SPLIT_CELL"] = "SPLIT_CELL";
 })(TableSettingType || (TableSettingType = {}));
 /**
  * Abstract class for setting event handlers.
@@ -428,28 +749,194 @@ class RTETableBodyBlock extends RTEBlock {
 }
 
 /**
- * Class representing a table head block in the rich text editor.
+ * Class representing a table cell annotation in the rich text editor.
  */
-class RTETableHeadBlock extends RTEBlock {
-  constructor(id) {
+class RTETableCellAnnotation extends BlockAnnotation {
+  constructor({ backgroundColor, padding, border, width, height, textAlign, verticalAlign, minWidth, boxSizing, } = {}, useInternalStyle = true) {
+    super();
+    this.type = RTETableExtensionAnnotationTypeEnum.CELL;
+    this.useInternalStyle = useInternalStyle;
+    this.backgroundColor = backgroundColor;
+    this.width = width;
+    this.height = height;
+    this.backgroundColorAnnotation = new RTETableColorAnnotation(backgroundColor);
+    this.borderColorAnnotation = new RTETableColorAnnotation(border === null || border === void 0 ? void 0 : border.color);
+    this.padding =
+      useInternalStyle && padding === undefined ? RTETableCellAnnotation.DEFAULT_PADDING : padding;
+    this.border =
+      useInternalStyle && border === undefined ? RTETableCellAnnotation.DEFAULT_BORDER : border;
+    this.textAlign =
+      useInternalStyle && textAlign === undefined
+        ? RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN
+        : textAlign;
+    this.verticalAlign =
+      useInternalStyle && verticalAlign === undefined
+        ? RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN
+        : verticalAlign;
+    this.minWidth =
+      useInternalStyle && minWidth === undefined
+        ? RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH
+        : minWidth;
+    this.boxSizing =
+      useInternalStyle && boxSizing === undefined
+        ? RTETableCellAnnotation.DEFAULT_BOX_SIZING
+        : boxSizing;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(cellAnnotation, useInternalStyle) {
+    return [
+      RTETableExtensionAnnotationTypeEnum.CELL,
+      new RTETableCellAnnotation(cellAnnotation, useInternalStyle),
+    ];
+  }
+  /**
+   * Generates the CSS border string from the border properties.
+   *
+   * @returns {Nullable<string>} The CSS border string.
+   */
+  get borderStr() {
+    if (!this.border)
+      return null;
+    return `${this.border.style} ${this.border.width} ${this.borderColorAnnotation.renderStyle().color ||
+      RTETableCellAnnotation.DEFAULT_BORDER.color}`;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTETableCellAnnotation({
+      backgroundColor: this.backgroundColor,
+      padding: this.padding,
+      border: this.border,
+      width: this.width,
+      height: this.height,
+      textAlign: this.textAlign,
+      verticalAlign: this.verticalAlign,
+      minWidth: this.minWidth,
+      boxSizing: this.boxSizing,
+    }, this.useInternalStyle);
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return {
+      tableCell: cleanObject({
+        backgroundColor: this.backgroundColor,
+        padding: this.padding,
+        border: this.border,
+        width: this.width,
+        height: this.height,
+        textAlign: this.textAlign,
+        verticalAlign: this.verticalAlign,
+        minWidth: this.minWidth,
+        boxSizing: this.boxSizing,
+      }),
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    const backgroundColor = this.backgroundColorAnnotation.renderStyle().color;
+    const style = {
+      padding: this.padding,
+      border: this.borderStr,
+      width: this.width,
+      height: this.height,
+      textAlign: this.textAlign,
+      verticalAlign: this.verticalAlign,
+      minWidth: this.minWidth,
+      boxSizing: this.boxSizing,
+    };
+    if (backgroundColor) {
+      style.backgroundColor = backgroundColor;
+    }
+    if (!(options === null || options === void 0 ? void 0 : options.standalone)) {
+      return cleanObject(this.removeDefaultValues(style));
+    }
+    return cleanObject(style);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * Removes default values from the style object to avoid redundancy.
+   *
+   * @param {Record<string, Nullable<string>>} style - The style object to clean.
+   * @returns {Record<string, Nullable<string>>} The cleaned style object.
+   */
+  removeDefaultValues(style) {
+    const cleanedStyle = Object.assign({}, style);
+    if (cleanedStyle.padding === RTETableCellAnnotation.DEFAULT_PADDING) {
+      delete cleanedStyle.padding;
+    }
+    if (cleanedStyle.border ===
+      `${RTETableCellAnnotation.DEFAULT_BORDER.style} ${RTETableCellAnnotation.DEFAULT_BORDER.width} ${RTETableCellAnnotation.DEFAULT_BORDER.color}`) {
+      delete cleanedStyle.border;
+    }
+    if (cleanedStyle.textAlign === RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN) {
+      delete cleanedStyle.textAlign;
+    }
+    if (cleanedStyle.verticalAlign === RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN) {
+      delete cleanedStyle.verticalAlign;
+    }
+    if (cleanedStyle.minWidth === RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH) {
+      delete cleanedStyle.minWidth;
+    }
+    if (cleanedStyle.boxSizing === RTETableCellAnnotation.DEFAULT_BOX_SIZING) {
+      delete cleanedStyle.boxSizing;
+    }
+    return cleanedStyle;
+  }
+}
+RTETableCellAnnotation.DEFAULT_PADDING = '12px';
+RTETableCellAnnotation.DEFAULT_BORDER = {
+  style: 'solid',
+  width: '1px',
+  color: '#ddd',
+};
+RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN = 'left';
+RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN = 'middle';
+RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH = '55px';
+RTETableCellAnnotation.DEFAULT_BOX_SIZING = 'border-box';
+
+/**
+ * Class representing a table cell block in the rich text editor.
+ */
+class RTETableCellBlock extends RTEBlock {
+  constructor(id, options) {
     super(id);
-    this.type = 'table-head';
+    this.type = 'table-cell';
     this.children = [];
+    const { autoMatchFormat } = options || { autoMatchFormat: true };
+    if (autoMatchFormat) {
+      this.annotationMap.set(RTETableExtensionAnnotationTypeEnum.CELL, new RTETableCellAnnotation());
+    }
   }
   /**
    * @inheritDoc
    */
   static from(block, options) {
-    const headBlock = new RTETableHeadBlock(block.id);
-    super.convertAnnotationsToMap(headBlock.annotationMap, Object.assign({}, block.annotations));
-    headBlock.children = super.generateBlockChildren(block.children, options, headBlock);
-    return headBlock;
+    var _a;
+    const tableCellBlock = new RTETableCellBlock(block.id, options);
+    super.convertAnnotationsToMap(tableCellBlock.annotationMap, Object.assign({}, block.annotations));
+    if ((_a = block.annotations) === null || _a === void 0 ? void 0 : _a.tableCell) {
+      tableCellBlock.annotationMap.set(...RTETableCellAnnotation.from(block.annotations.tableCell, options === null || options === void 0 ? void 0 : options.autoMatchFormat));
+    }
+    tableCellBlock.children = super.generateBlockChildren(block.children, options, tableCellBlock);
+    return tableCellBlock;
   }
   /**
    * @inheritDoc
    */
   clone(parent) {
-    const clonedBlock = new RTETableHeadBlock(this.id);
+    const clonedBlock = new RTETableCellBlock(this.id);
     clonedBlock.children = this.children.map((child) => child.clone(clonedBlock));
     clonedBlock.parent = parent;
     clonedBlock.annotationMap = super.cloneAnnotations();
@@ -467,17 +954,31 @@ class RTETableHeadBlock extends RTEBlock {
   isNotEmpty() {
     return this.children.length > 0;
   }
+  /**
+   * Get the rowSpan of the table cell
+   *
+   * @returns {number} - rowSpan value
+   */
+  get rowSpan() {
+    const rowSpan = this.getCustomAttributeByName('rowspan');
+    return !isNaN(Number(rowSpan)) ? Math.max(Number(rowSpan), 1) : 1;
+  }
+  /**
+   * Get the colSpan of the table cell
+   *
+   * @returns {number} - colSpan value
+   */
+  get colSpan() {
+    const colSpan = this.getCustomAttributeByName('colspan');
+    return !isNaN(Number(colSpan)) ? Math.max(Number(colSpan), 1) : 1;
+  }
   /**
    * @inheritDoc
    */
   toHtml() {
-    const childrenHtml = this.children
-      .map((child) => {
-      return child.toHtml();
-    })
-      .join('');
+    const childrenHtml = this.children.map((child) => child.toHtml()).join('');
     const attrStr = super.generateAttributeString();
-    return `<thead${attrStr}>${childrenHtml}</thead>`;
+    return `<td${attrStr}>${childrenHtml}</td>`;
   }
   /**
    * @inheritDoc
@@ -485,9 +986,290 @@ class RTETableHeadBlock extends RTEBlock {
   toJSON() {
     return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
   }
-}
-
-/**
+  /**
+   * Get custom attribute by name
+   *
+   * @param {string} attrName - attribute name
+   * @returns {Nullable<string>} - attribute value
+   */
+  getCustomAttributeByName(attrName) {
+    const customAttrAnnotation = this.getCustomAttributesAnnotation();
+    if (customAttrAnnotation) {
+      const customAttributes = customAttrAnnotation.toJSON()['customAttribute'] || {};
+      return customAttributes[attrName];
+    }
+  }
+}
+
+/**
+ * Class representing a table head block in the rich text editor.
+ */
+class RTETableHeadBlock extends RTEBlock {
+  constructor(id) {
+    super(id);
+    this.type = 'table-head';
+    this.children = [];
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(block, options) {
+    const headBlock = new RTETableHeadBlock(block.id);
+    super.convertAnnotationsToMap(headBlock.annotationMap, Object.assign({}, block.annotations));
+    headBlock.children = super.generateBlockChildren(block.children, options, headBlock);
+    return headBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTETableHeadBlock(this.id);
+    clonedBlock.children = this.children.map((child) => child.clone(clonedBlock));
+    clonedBlock.parent = parent;
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    return clonedBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1].getLastNode();
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.children.length > 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const childrenHtml = this.children
+      .map((child) => {
+      return child.toHtml();
+    })
+      .join('');
+    const attrStr = super.generateAttributeString();
+    return `<thead${attrStr}>${childrenHtml}</thead>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
+  }
+}
+
+/**
+ * Class representing a table head cell annotation in the rich text editor.
+ */
+class RTETableHeadCellAnnotation extends RTETableCellAnnotation {
+  constructor(annotation = {}, useInternalStyle = true) {
+    super(annotation, useInternalStyle);
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(cellAnnotation, useInternalStyle) {
+    return [
+      RTETableExtensionAnnotationTypeEnum.CELL,
+      new RTETableHeadCellAnnotation(cellAnnotation, useInternalStyle),
+    ];
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTETableHeadCellAnnotation({
+      backgroundColor: this.backgroundColor,
+      padding: this.padding,
+      border: this.border,
+      width: this.width,
+      height: this.height,
+      textAlign: this.textAlign,
+      verticalAlign: this.verticalAlign,
+      minWidth: this.minWidth,
+      boxSizing: this.boxSizing,
+    }, this.useInternalStyle);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    var _a;
+    const styles = super.renderStyle(options);
+    return cleanObject(Object.assign(Object.assign({}, styles), { backgroundColor: (_a = styles.backgroundColor) !== null && _a !== void 0 ? _a : RTETableHeadCellAnnotation.DEFAULT_BACKGROUND_COLOR }));
+  }
+}
+RTETableHeadCellAnnotation.DEFAULT_BACKGROUND_COLOR = '#f2f2f2';
+
+/**
+ * Class representing a table head block in the rich text editor.
+ */
+class RTETableHeadCellBlock extends RTETableCellBlock {
+  constructor(id, options) {
+    super(id, options);
+    this.type = 'table-head-cell';
+    const { autoMatchFormat } = options || { autoMatchFormat: true };
+    if (autoMatchFormat) {
+      this.annotationMap.set(RTETableExtensionAnnotationTypeEnum.CELL, new RTETableHeadCellAnnotation());
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(block, options) {
+    var _a;
+    const headCellBlock = new RTETableHeadCellBlock(block.id, options);
+    super.convertAnnotationsToMap(headCellBlock.annotationMap, Object.assign({}, block.annotations));
+    if ((_a = block.annotations) === null || _a === void 0 ? void 0 : _a.tableCell) {
+      headCellBlock.annotationMap.set(...RTETableHeadCellAnnotation.from(block.annotations.tableCell, options === null || options === void 0 ? void 0 : options.autoMatchFormat));
+    }
+    headCellBlock.children = super.generateBlockChildren(block.children, options, headCellBlock);
+    return headCellBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTETableHeadCellBlock(this.id);
+    clonedBlock.children = this.children.map((child) => child.clone(clonedBlock));
+    clonedBlock.parent = parent;
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    return clonedBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const childrenHtml = this.children.map((child) => child.toHtml()).join('');
+    const attrStr = super.generateAttributeString();
+    return `<th${attrStr}>${childrenHtml}</th>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
+  }
+}
+
+const MERGE_CELLS = 'MERGE_CELLS';
+/**
+ * Action to merge cells into the RTETable.
+ */
+class MergeCellsAction extends ModifyContentAction {
+  constructor(targetCell, mergeCells, colSpan, rowSpan, direction) {
+    super();
+    this.type = MERGE_CELLS;
+    this.isFlushable = true;
+    this.targetCell = targetCell;
+    this.mergeCells = mergeCells;
+    this.colSpan = colSpan;
+    this.rowSpan = rowSpan;
+    this.direction = direction;
+  }
+}
+
+var MergeCellsOperationType;
+(function (MergeCellsOperationType) {
+  MergeCellsOperationType["MERGE_CELLS"] = "MERGE_CELLS";
+  MergeCellsOperationType["MERGE_CELL_UP"] = "MERGE_CELL_UP";
+  MergeCellsOperationType["MERGE_CELL_RIGHT"] = "MERGE_CELL_RIGHT";
+  MergeCellsOperationType["MERGE_CELL_DOWN"] = "MERGE_CELL_DOWN";
+  MergeCellsOperationType["MERGE_CELL_LEFT"] = "MERGE_CELL_LEFT";
+})(MergeCellsOperationType || (MergeCellsOperationType = {}));
+/**
+ * Event handler for merge cells operations in a table.
+ */
+class MergeCellsOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === TableSettingType.MERGE_CELLS;
+  }
+  /**
+   * @inheritDoc
+   */
+  execute(action, extensionContext) {
+    const selectedCells = extensionContext.tableSelection.getSelectedCells();
+    const operation = action[1];
+    switch (operation) {
+      case MergeCellsOperationType.MERGE_CELL_UP:
+      case MergeCellsOperationType.MERGE_CELL_RIGHT:
+      case MergeCellsOperationType.MERGE_CELL_DOWN:
+      case MergeCellsOperationType.MERGE_CELL_LEFT:
+        {
+          const mergeCells = this.getDirectionMergeCells(operation, selectedCells[0]);
+          this.handleMergeCells(mergeCells, operation);
+        }
+        break;
+      default:
+        {
+          if (selectedCells.length > 1) {
+            this.handleMergeCells(selectedCells, MergeCellsOperationType.MERGE_CELLS);
+          }
+        }
+        break;
+    }
+  }
+  /**
+   * Get the adjacent cell in the specified direction.
+   *
+   * @param {MergeCellsOperationType} direction - The direction to look for the adjacent cell.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} cell - The current cell.
+   * @returns {Array<RTETableCellBlock | RTETableHeadCellBlock>} Array containing the cells to merge.
+   */
+  getDirectionMergeCells(direction, cell) {
+    const adjacent = getAdjacentCell(cell, direction);
+    if (!adjacent) {
+      return [cell];
+    }
+    switch (direction) {
+      case MergeCellsOperationType.MERGE_CELL_UP:
+        return [adjacent, cell];
+      case MergeCellsOperationType.MERGE_CELL_DOWN:
+        return [cell, adjacent];
+      case MergeCellsOperationType.MERGE_CELL_LEFT:
+        return [adjacent, cell];
+      default:
+        return [cell, adjacent];
+    }
+  }
+  /**
+   * Handle the merge cells operation by creating and applying a MergeCellsAction.
+   *
+   * @param {Array<RTETableCellBlock | RTETableHeadCellBlock>} mergeCells - The cells to merge.
+   * @param {MergeCellsOperationType} direction - The merge cell direction.
+   */
+  handleMergeCells(mergeCells, direction) {
+    if (mergeCells.length < 2) {
+      return;
+    }
+    const rectInfo = getRectangularBounds(mergeCells);
+    const { minRow, maxRow, minCol, maxCol, targetCell } = rectInfo;
+    const colSpan = maxCol - minCol + 1;
+    const rowSpan = maxRow - minRow + 1;
+    const action = new MergeCellsAction(targetCell, mergeCells, colSpan, rowSpan, direction);
+    this.applyActionOnTable(action, targetCell);
+  }
+  /**
+   * Apply the specified action on the table containing the selected cell.
+   *
+   * @param {MergeCellsAction} action - The action to apply.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} selectedCell - The selected table cell.
+   */
+  applyActionOnTable(action, selectedCell) {
+    const table = getParentBlockByType(selectedCell, RTETableBlock);
+    if (table) {
+      table.apply(action);
+    }
+  }
+}
+
+/**
  * Recursively searches for a parent block of a specific type.
  *
  * @typedef T - Generic type extending RTEBlock.
@@ -585,400 +1367,376 @@ function getDefaultCellBlockTemplate(cellType) {
     ],
   };
 }
-
-var RowOperationType;
-(function (RowOperationType) {
-  RowOperationType["HEADER_ROW"] = "HEADER_ROW";
-  RowOperationType["ADD_ROW_ABOVE"] = "ADD_ROW_ABOVE";
-  RowOperationType["ADD_ROW_BELOW"] = "ADD_ROW_BELOW";
-  RowOperationType["DELETE_ROW"] = "DELETE_ROW";
-  RowOperationType["SELECT_ROW"] = "SELECT_ROW";
-})(RowOperationType || (RowOperationType = {}));
 /**
- * Event handler for row operations in a table.
+ * Get the actual col span and row span of a cell.
+ *
+ * @param {RTETableCellBlock | RTETableHeadCellBlock} cell - The cell to check.
+ * @returns {CellSpan} The actual span values.
  */
-class RowOperationEventHandler extends SettingEventHandler {
-  /**
-   * @inheritDoc
-   */
-  canHandle(action) {
-    return action[0] === TableSettingType.ROW;
-  }
-  /**
-   * @inheritDoc
-   */
-  execute(action, extensionContext) {
-    const operation = action[1];
-    switch (operation) {
-      case RowOperationType.ADD_ROW_ABOVE:
-      case RowOperationType.ADD_ROW_BELOW:
-        this.handleInsertRow(operation, extensionContext);
-        break;
-      case RowOperationType.DELETE_ROW:
-        this.handleDeleteRow(extensionContext);
-        break;
-      case RowOperationType.HEADER_ROW:
-        this.handleToggleHeader(extensionContext);
-        break;
-      case RowOperationType.SELECT_ROW:
-        this.handleSelectRow(extensionContext);
-        break;
-    }
-  }
-  /**
-   * Adds a new row to the table at the specified position.
-   *
-   * @param {RowOperationType} direction - The position to insert the new row (above or below).
-   * @param {RTETableExtensionContext} extensionContext - The extension context.
-   */
-  handleInsertRow(direction, extensionContext) {
-    const selectedRows = this.getAllSelectedRows(extensionContext);
-    if (selectedRows.length > 0) {
-      const action = new InsertTableRowAction(direction === RowOperationType.ADD_ROW_ABOVE
-        ? InsertTableRowDirection.ABOVE
-        : InsertTableRowDirection.BELOW, selectedRows);
-      this.applyActionToTable(selectedRows[0], action);
-    }
-  }
-  /**
-   * Deletes the selected row(s) from the table.
-   *
-   * @param {RTETableExtensionContext} extensionContext - The extension context.
-   */
-  handleDeleteRow(extensionContext) {
-    const selectedRows = this.getAllSelectedRows(extensionContext);
-    if (selectedRows.length) {
-      const action = new DeleteTableRowAction(selectedRows);
-      this.applyActionToTable(selectedRows[0], action);
-    }
-  }
-  /**
-   * Converts selected rows to header rows or reverts them back to normal rows.
-   *
-   * @param {RTETableExtensionContext} extensionContext - The extension context.
-   */
-  handleToggleHeader(extensionContext) {
-    const selectedRows = this.getAllSelectedRows(extensionContext);
-    if (selectedRows.length > 0) {
-      const action = new ToggleHeaderRowAction(selectedRows);
-      this.applyActionToTable(selectedRows[0], action);
-    }
-  }
-  /**
-   * Selects the focus row(s) in the table.
-   *
-   * @param {RTETableExtensionContext} extensionContext - The extension context.
-   */
-  handleSelectRow(extensionContext) {
-    const selectedRows = this.getAllSelectedRows(extensionContext);
-    if (selectedRows.length > 0 && extensionContext && extensionContext.tableSelection) {
-      const allCells = selectedRows.flatMap((row) => row.children);
-      extensionContext.tableSelection.setSelectedCells(allCells);
-    }
-  }
-  /**
-   * Get all selected table rows.
-   *
-   * @param {RTETableExtensionContext} extensionContext - The extension context.
-   * @returns {RTETableRowBlock[]} The selected table row blocks.
-   */
-  getAllSelectedRows(extensionContext) {
-    const selectedRows = new Set();
-    if (extensionContext && extensionContext.tableSelection) {
-      const { tableSelection } = extensionContext;
-      const selectedCells = tableSelection.getSelectedCells();
-      selectedCells.forEach((cell) => {
-        const rowBlock = getParentBlockByType(cell, RTETableRowBlock);
-        if (rowBlock) {
-          selectedRows.add(rowBlock);
-        }
-      });
-    }
-    return Array.from(selectedRows);
-  }
-  /**
-   * Applies the given action to the table containing the reference block.
-   *
-   * @param {RTEBlock} refBlock - The reference block within the table.
-   * @param {ModifyContentAction} action - The action to apply to the table.
-   */
-  applyActionToTable(refBlock, action) {
-    const table = getParentBlockByType(refBlock, RTETableBlock);
-    if (table) {
-      table.apply(action);
-    }
-  }
+function getCellSpan(cell) {
+  return { colSpan: cell.colSpan, rowSpan: cell.rowSpan };
 }
-
 /**
- * Class representing a table cell annotation in the rich text editor.
+ * Get the actual column position of a cell considering previous cells' colspan
+ * and cells from previous rows with rowspan that extend into the current row.
+ *
+ * @param {RTETableCellBlock | RTETableHeadCellBlock} cell - The cell to check.
+ * @param {RTETableRowBlock[]} allRows - The table all rows.
+ * @returns {number} The actual column position.
  */
-class RTETableCellAnnotation extends BlockAnnotation {
-  constructor({ backgroundColor, padding = RTETableCellAnnotation.DEFAULT_PADDING, border = RTETableCellAnnotation.DEFAULT_BORDER, width, height, textAlign = RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN, verticalAlign = RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN, } = {}) {
-    super();
-    this.type = RTETableExtensionAnnotationTypeEnum.CELL;
-    this.backgroundColor = backgroundColor;
-    this.padding = padding;
-    this.border = border;
-    this.width = width;
-    this.height = height;
-    this.textAlign = textAlign;
-    this.verticalAlign = verticalAlign;
-  }
-  /**
-   * @inheritDoc
-   */
-  static from(cellAnnotation) {
-    return [RTETableExtensionAnnotationTypeEnum.CELL, new RTETableCellAnnotation(cellAnnotation)];
-  }
-  /**
-   * Generates the CSS border string from the border properties.
-   *
-   * @returns {Nullable<string>} The CSS border string.
-   */
-  get borderStr() {
-    if (!this.border)
-      return null;
-    return `${this.border.style} ${this.border.width} ${this.border.color}`;
-  }
-  /**
-   * @inheritDoc
-   */
-  clone() {
-    return new RTETableCellAnnotation({
-      backgroundColor: this.backgroundColor,
-      padding: this.padding,
-      border: this.border,
-      width: this.width,
-      height: this.height,
-      textAlign: this.textAlign,
-      verticalAlign: this.verticalAlign,
-    });
-  }
-  /**
-   * @inheritDoc
-   */
-  toJSON() {
-    return {
-      tableCell: cleanObject({
-        backgroundColor: this.backgroundColor,
-        padding: this.padding,
-        border: this.border,
-        width: this.width,
-        height: this.height,
-        textAlign: this.textAlign,
-        verticalAlign: this.verticalAlign,
-      }),
-    };
-  }
-  /**
-   * @inheritDoc
-   */
-  renderStyle(options) {
-    const style = {
-      backgroundColor: this.backgroundColor,
-      padding: this.padding,
-      border: this.borderStr,
-      width: this.width,
-      height: this.height,
-      textAlign: this.textAlign,
-      verticalAlign: this.verticalAlign,
-    };
-    if (!(options === null || options === void 0 ? void 0 : options.standalone)) {
-      return cleanObject(this.removeDefaultValues(style));
-    }
-    return cleanObject(Object.assign(Object.assign({}, style), { minWidth: RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH }));
-  }
-  /**
-   * @inheritDoc
-   */
-  renderClass() {
-    return null;
-  }
-  /**
-   * Removes default values from the style object to avoid redundancy.
-   *
-   * @param {Record<string, Nullable<string>>} style - The style object to clean.
-   * @returns {Record<string, Nullable<string>>} The cleaned style object.
-   */
-  removeDefaultValues(style) {
-    const cleanedStyle = Object.assign({}, style);
-    if (cleanedStyle.padding === RTETableCellAnnotation.DEFAULT_PADDING) {
-      delete cleanedStyle.padding;
-    }
-    if (cleanedStyle.border ===
-      `${RTETableCellAnnotation.DEFAULT_BORDER.style} ${RTETableCellAnnotation.DEFAULT_BORDER.width} ${RTETableCellAnnotation.DEFAULT_BORDER.color}`) {
-      delete cleanedStyle.border;
-    }
-    if (cleanedStyle.textAlign === RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN) {
-      delete cleanedStyle.textAlign;
-    }
-    if (cleanedStyle.verticalAlign === RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN) {
-      delete cleanedStyle.verticalAlign;
+function getActualColumnPosition(cell, allRows) {
+  const tableGrid = buildTableGrid(allRows);
+  for (let row = 0; row < tableGrid.length; row++) {
+    const cols = tableGrid[row];
+    for (let col = 0; col < cols.length; col++) {
+      if (cols[col] === cell.id) {
+        return col;
+      }
     }
-    return cleanedStyle;
   }
+  return -1;
 }
-RTETableCellAnnotation.DEFAULT_PADDING = '12px';
-RTETableCellAnnotation.DEFAULT_BORDER = {
-  style: 'solid',
-  width: '1px',
-  color: '#ddd',
-};
-RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN = 'left';
-RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN = 'middle';
-RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH = '30px';
-
 /**
- * Class representing a table cell block in the rich text editor.
+ * Build a 2D grid representation of a table section where each occupied position
+ * contains the cell id covering that (row, col) coordinate, accounting for colSpan/rowSpan.
+ *
+ * @param {RTETableRowBlock[]} allRows - All rows in the current table section.
+ * @returns {string[][]} The table grid.
  */
-class RTETableCellBlock extends RTEBlock {
-  constructor(id, options) {
-    super(id);
-    this.type = 'table-cell';
-    this.children = [];
-    const { autoMatchFormat } = options || { autoMatchFormat: true };
-    if (autoMatchFormat) {
-      this.annotationMap.set(RTETableExtensionAnnotationTypeEnum.CELL, new RTETableCellAnnotation());
+function buildTableGrid(allRows) {
+  const grid = [];
+  allRows.forEach((row, rowIndex) => {
+    if (!grid[rowIndex]) {
+      grid[rowIndex] = [];
     }
+    let colIndex = 0;
+    row.children.forEach((cell) => {
+      const { colSpan, rowSpan } = getCellSpan(cell);
+      while (grid[rowIndex][colIndex] !== undefined) {
+        colIndex++;
+      }
+      for (let r = 0; r < rowSpan; r++) {
+        for (let c = 0; c < colSpan; c++) {
+          if (!grid[rowIndex + r]) {
+            grid[rowIndex + r] = [];
+          }
+          grid[rowIndex + r][colIndex + c] = cell.id;
+        }
+      }
+      colIndex += colSpan;
+    });
+  });
+  return grid;
+}
+/**
+ * Get the adjacent cell in the specified direction based on the table matrix.
+ *
+ * @param {RTETableCellBlock | RTETableHeadCellBlock} cell - The current cell.
+ * @param {AdjacentCellDirection} direction - The direction to locate the adjacent cell.
+ * @returns {RTETableCellBlock | RTETableHeadCellBlock | null} The adjacent cell or null.
+ */
+function getAdjacentCell(cell, direction) {
+  if (!cell) {
+    return null;
   }
-  /**
-   * @inheritDoc
-   */
-  static from(block, options) {
-    var _a;
-    const tableCellBlock = new RTETableCellBlock(block.id, options);
-    super.convertAnnotationsToMap(tableCellBlock.annotationMap, Object.assign({}, block.annotations));
-    if ((_a = block.annotations) === null || _a === void 0 ? void 0 : _a.tableCell) {
-      tableCellBlock.annotationMap.set(...RTETableCellAnnotation.from(block.annotations.tableCell));
-    }
-    tableCellBlock.children = super.generateBlockChildren(block.children, options, tableCellBlock);
-    return tableCellBlock;
-  }
-  /**
-   * @inheritDoc
-   */
-  clone(parent) {
-    const clonedBlock = new RTETableCellBlock(this.id);
-    clonedBlock.children = this.children.map((child) => child.clone(clonedBlock));
-    clonedBlock.parent = parent;
-    clonedBlock.annotationMap = super.cloneAnnotations();
-    return clonedBlock;
-  }
-  /**
-   * @inheritDoc
-   */
-  getLastNode() {
-    return this.children[this.children.length - 1].getLastNode();
+  const row = cell.parent;
+  const sectionRows = row.parent.children;
+  const rowIndex = sectionRows.indexOf(row);
+  const { colSpan, rowSpan } = getCellSpan(cell);
+  const cellColPosition = getActualColumnPosition(cell, sectionRows);
+  let targetRowIndex = rowIndex;
+  let targetColPosition = cellColPosition;
+  switch (direction) {
+    case MergeCellsOperationType.MERGE_CELL_LEFT:
+      targetColPosition = cellColPosition - 1;
+      break;
+    case MergeCellsOperationType.MERGE_CELL_RIGHT:
+      targetColPosition = cellColPosition + colSpan;
+      break;
+    case MergeCellsOperationType.MERGE_CELL_UP:
+      targetRowIndex = rowIndex - 1;
+      break;
+    default:
+      targetRowIndex = rowIndex + rowSpan;
+      break;
+  }
+  return findCellAtPosition(sectionRows, targetRowIndex, targetColPosition);
+}
+/**
+ * Find the cell that covers the specified matrix position.
+ *
+ * @param {RTETableRowBlock[]} rows - Rows in the current table section.
+ * @param {number} targetRowIndex - Target matrix row index.
+ * @param {number} targetColPosition - Target matrix column position.
+ * @returns {RTETableCellBlock | RTETableHeadCellBlock | null} The covering cell or null.
+ */
+function findCellAtPosition(rows, targetRowIndex, targetColPosition) {
+  for (let r = 0; r < rows.length; r++) {
+    const currentRow = rows[r];
+    for (const candidate of currentRow.children) {
+      const { colSpan, rowSpan } = getCellSpan(candidate);
+      const candidateColPosition = getActualColumnPosition(candidate, rows);
+      const candidateRowStart = r;
+      const candidateRowEnd = r + rowSpan - 1;
+      const candidateColEnd = candidateColPosition + colSpan - 1;
+      const isSameMatrixRow = targetRowIndex >= candidateRowStart && targetRowIndex <= candidateRowEnd;
+      const isTargetColumnCovered = targetColPosition >= candidateColPosition && targetColPosition <= candidateColEnd;
+      if (isSameMatrixRow && isTargetColumnCovered) {
+        return candidate;
+      }
+    }
   }
-  /**
-   * @inheritDoc
-   */
-  isNotEmpty() {
-    return this.children.length > 0;
+  return null;
+}
+/**
+ * Get the rectangular bounds of selected cells.
+ * Calculates the bounding box (minRow, maxRow, minCol, maxCol) and returns related information.
+ *
+ * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - The selected table cells.
+ * @returns {RectangularBounds} The rectangular bounds' information.
+ */
+function getRectangularBounds(selectedCells) {
+  const firstCell = selectedCells[0];
+  const firstRow = firstCell.parent;
+  const table = firstRow.parent;
+  const allRows = table.children;
+  let minRow = Number.POSITIVE_INFINITY;
+  let maxRow = -1;
+  let minCol = Number.POSITIVE_INFINITY;
+  let maxCol = -1;
+  const coveredPositions = new Set();
+  selectedCells.forEach((cell) => {
+    const row = cell.parent;
+    const rowIndex = allRows.indexOf(row);
+    const actualColPosition = getActualColumnPosition(cell, allRows);
+    const { colSpan, rowSpan } = getCellSpan(cell);
+    const cellMinRow = rowIndex;
+    const cellMaxRow = rowIndex + rowSpan - 1;
+    const cellMinCol = actualColPosition;
+    const cellMaxCol = actualColPosition + colSpan - 1;
+    for (let r = cellMinRow; r <= cellMaxRow; r++) {
+      for (let c = cellMinCol; c <= cellMaxCol; c++) {
+        coveredPositions.add(`${r},${c}`);
+      }
+    }
+    minRow = Math.min(minRow, cellMinRow);
+    maxRow = Math.max(maxRow, cellMaxRow);
+    minCol = Math.min(minCol, cellMinCol);
+    maxCol = Math.max(maxCol, cellMaxCol);
+  });
+  const targetCell = selectedCells[0];
+  return {
+    minRow,
+    maxRow,
+    minCol,
+    maxCol,
+    targetCell,
+    coveredPositions,
+  };
+}
+/**
+ * Calculate the total number of columns in the table.
+ * Accounts for cells with col span.
+ *
+ * @param {RTETableBlock} table - The table block.
+ * @returns {number} The total number of columns in the table.
+ */
+function getTableColumnCount(table) {
+  const rows = getAllTableRows(table);
+  // Calculate the total columns from the first row, accounting for col span
+  let totalColumns = 0;
+  const firstRow = rows[0];
+  for (const cell of firstRow.children) {
+    const { colSpan } = getCellSpan(cell);
+    totalColumns += colSpan;
+  }
+  return totalColumns;
+}
+/**
+ * Check if the selected cells form a rectangular area.
+ * Considers cells with col span and row span.
+ *
+ * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - The selected table cells.
+ * @returns {boolean} True if the selected cells form a rectangle, false otherwise.
+ */
+function isRectangularSelection(selectedCells) {
+  if (selectedCells.length === 1) {
+    return true;
+  }
+  const bounds = getRectangularBounds(selectedCells);
+  const { minRow, maxRow, minCol, maxCol, coveredPositions } = bounds;
+  const expectedPositions = (maxRow - minRow + 1) * (maxCol - minCol + 1);
+  if (coveredPositions.size !== expectedPositions) {
+    return false;
   }
-  /**
-   * @inheritDoc
-   */
-  toHtml() {
-    const childrenHtml = this.children.map((child) => child.toHtml()).join('');
-    const attrStr = super.generateAttributeString();
-    return `<td${attrStr}>${childrenHtml}</td>`;
+  return true;
+}
+/**
+ * Set the col span and row span attributes for a target cell.
+ * When colSpan equals the table's total columns, rowSpan is removed.
+ *
+ * @param {RTETableCellBlock | RTETableHeadCellBlock} targetCell - The target cell to set attributes on.
+ * @param {number} colSpan - The column span value.
+ * @param {number} rowSpan - The row span value.
+ * @param {RTETableBlock} table - The table block.
+ */
+function setSpanAttributes(targetCell, colSpan, rowSpan, table) {
+  const existingAnnotation = targetCell.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE);
+  const existingAttrs = existingAnnotation
+    ? Object.assign({}, existingAnnotation['customAttribute']) : {};
+  delete existingAttrs.colspan;
+  delete existingAttrs.rowspan;
+  if (colSpan > 1) {
+    existingAttrs.colspan = String(colSpan);
+  }
+  // When colspan equals table column count, don't set rowspan
+  const tableColumnCount = getTableColumnCount(table);
+  if (rowSpan > 1 && colSpan !== tableColumnCount) {
+    existingAttrs.rowspan = String(rowSpan);
+  }
+  if (Object.keys(existingAttrs).length > 0) {
+    const customAttributeAnnotation = new CustomAttributeAnnotation(existingAttrs);
+    targetCell.annotationMap.set(CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE, customAttributeAnnotation);
+  }
+  else {
+    targetCell.annotationMap.delete(CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE);
   }
-  /**
-   * @inheritDoc
-   */
-  toJSON() {
-    return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
+}
+/**
+ * Create a new cell of the specified type.
+ *
+ * @param {string} cellType - The type of cell ('table-cell' or 'table-head-cell').
+ * @returns {RTETableCellBlock | RTETableHeadCellBlock} The newly created cell.
+ */
+function createNewCell(cellType) {
+  const cellTemplate = getDefaultCellBlockTemplate(cellType);
+  if (cellType === 'table-head-cell') {
+    return RTETableHeadCellBlock.from(cellTemplate);
   }
+  return RTETableCellBlock.from(cellTemplate);
 }
 
+var RowOperationType;
+(function (RowOperationType) {
+  RowOperationType["HEADER_ROW"] = "HEADER_ROW";
+  RowOperationType["ADD_ROW_ABOVE"] = "ADD_ROW_ABOVE";
+  RowOperationType["ADD_ROW_BELOW"] = "ADD_ROW_BELOW";
+  RowOperationType["DELETE_ROW"] = "DELETE_ROW";
+  RowOperationType["SELECT_ROW"] = "SELECT_ROW";
+})(RowOperationType || (RowOperationType = {}));
 /**
- * Class representing a table head cell annotation in the rich text editor.
+ * Event handler for row operations in a table.
  */
-class RTETableHeadCellAnnotation extends RTETableCellAnnotation {
-  constructor(annotation = {}) {
-    super(annotation);
-  }
+class RowOperationEventHandler extends SettingEventHandler {
   /**
    * @inheritDoc
    */
-  static from(cellAnnotation) {
-    return [RTETableExtensionAnnotationTypeEnum.CELL, new RTETableHeadCellAnnotation(cellAnnotation)];
+  canHandle(action) {
+    return action[0] === TableSettingType.ROW;
   }
   /**
    * @inheritDoc
    */
-  clone() {
-    return new RTETableHeadCellAnnotation({
-      backgroundColor: this.backgroundColor,
-      padding: this.padding,
-      border: this.border,
-      width: this.width,
-      height: this.height,
-      textAlign: this.textAlign,
-      verticalAlign: this.verticalAlign,
-    });
+  execute(action, extensionContext) {
+    const operation = action[1];
+    switch (operation) {
+      case RowOperationType.ADD_ROW_ABOVE:
+      case RowOperationType.ADD_ROW_BELOW:
+        this.handleInsertRow(operation, extensionContext);
+        break;
+      case RowOperationType.DELETE_ROW:
+        this.handleDeleteRow(extensionContext);
+        break;
+      case RowOperationType.HEADER_ROW:
+        this.handleToggleHeader(extensionContext);
+        break;
+      case RowOperationType.SELECT_ROW:
+        this.handleSelectRow(extensionContext);
+        break;
+    }
   }
   /**
-   * @inheritDoc
+   * Adds a new row to the table at the specified position.
+   *
+   * @param {RowOperationType} direction - The position to insert the new row (above or below).
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
    */
-  renderStyle(options) {
-    var _a;
-    const styles = super.renderStyle(options);
-    return cleanObject(Object.assign(Object.assign({}, styles), { backgroundColor: (_a = this.backgroundColor) !== null && _a !== void 0 ? _a : RTETableHeadCellAnnotation.DEFAULT_BACKGROUND_COLOR }));
+  handleInsertRow(direction, extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length > 0) {
+      const action = new InsertTableRowAction(direction === RowOperationType.ADD_ROW_ABOVE
+        ? InsertTableRowDirection.ABOVE
+        : InsertTableRowDirection.BELOW, selectedRows);
+      this.applyActionToTable(selectedRows[0], action);
+    }
   }
-}
-RTETableHeadCellAnnotation.DEFAULT_BACKGROUND_COLOR = '#f2f2f2';
-
-/**
- * Class representing a table head block in the rich text editor.
- */
-class RTETableHeadCellBlock extends RTETableCellBlock {
-  constructor(id, options) {
-    super(id, options);
-    this.type = 'table-head-cell';
-    const { autoMatchFormat } = options || { autoMatchFormat: true };
-    if (autoMatchFormat) {
-      this.annotationMap.set(RTETableExtensionAnnotationTypeEnum.CELL, new RTETableHeadCellAnnotation());
+  /**
+   * Deletes the selected row(s) from the table.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   */
+  handleDeleteRow(extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length) {
+      const action = new DeleteTableRowAction(selectedRows);
+      this.applyActionToTable(selectedRows[0], action);
     }
   }
   /**
-   * @inheritDoc
+   * Converts selected rows to header rows or reverts them back to normal rows.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
    */
-  static from(block, options) {
-    var _a;
-    const headCellBlock = new RTETableHeadCellBlock(block.id, options);
-    super.convertAnnotationsToMap(headCellBlock.annotationMap, Object.assign({}, block.annotations));
-    if ((_a = block.annotations) === null || _a === void 0 ? void 0 : _a.tableCell) {
-      headCellBlock.annotationMap.set(...RTETableHeadCellAnnotation.from(block.annotations.tableCell));
+  handleToggleHeader(extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length > 0) {
+      const action = new ToggleHeaderRowAction(selectedRows);
+      this.applyActionToTable(selectedRows[0], action);
     }
-    headCellBlock.children = super.generateBlockChildren(block.children, options, headCellBlock);
-    return headCellBlock;
   }
   /**
-   * @inheritDoc
+   * Selects the focus row(s) in the table.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
    */
-  clone(parent) {
-    const clonedBlock = new RTETableHeadCellBlock(this.id);
-    clonedBlock.children = this.children.map((child) => child.clone(clonedBlock));
-    clonedBlock.parent = parent;
-    clonedBlock.annotationMap = super.cloneAnnotations();
-    return clonedBlock;
+  handleSelectRow(extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length > 0 && extensionContext && extensionContext.tableSelection) {
+      const allCells = selectedRows.flatMap((row) => row.children);
+      extensionContext.tableSelection.setSelectedCells(allCells);
+    }
   }
   /**
-   * @inheritDoc
+   * Get all selected table rows.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   * @returns {RTETableRowBlock[]} The selected table row blocks.
    */
-  toHtml() {
-    const childrenHtml = this.children.map((child) => child.toHtml()).join('');
-    const attrStr = super.generateAttributeString();
-    return `<th${attrStr}>${childrenHtml}</th>`;
+  getAllSelectedRows(extensionContext) {
+    const selectedRows = new Set();
+    if (extensionContext && extensionContext.tableSelection) {
+      const { tableSelection } = extensionContext;
+      const selectedCells = tableSelection.getSelectedCells();
+      selectedCells.forEach((cell) => {
+        const rowBlock = getParentBlockByType(cell, RTETableRowBlock);
+        if (rowBlock) {
+          selectedRows.add(rowBlock);
+        }
+      });
+    }
+    return Array.from(selectedRows);
   }
   /**
-   * @inheritDoc
+   * Applies the given action to the table containing the reference block.
+   *
+   * @param {RTEBlock} refBlock - The reference block within the table.
+   * @param {ModifyContentAction} action - The action to apply to the table.
    */
-  toJSON() {
-    return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
+  applyActionToTable(refBlock, action) {
+    const table = getParentBlockByType(refBlock, RTETableBlock);
+    if (table) {
+      table.apply(action);
+    }
   }
 }
 
@@ -1252,26 +2010,81 @@ class ColumnOperationEventHandler extends SettingEventHandler {
   }
 }
 
-const RTE_TABLE_BORDER_STYLES = [
-  'none',
-  'solid',
-  'dashed',
-  'dotted',
-  'double',
-  'groove',
-  'ridge',
-  'inset',
-  'outset',
-];
-const RTE_TABLE_DEFAULT_COLORS = [
-  { dark: '#04041C', light: '#FCFCFC' },
-  { dark: '#AA091C', light: '#FF4C61' },
-  { dark: '#974502', light: '#FDAB68' },
-  { dark: '#735C00', light: '#FFDC4C' },
-  { dark: '#2E6D18', light: '#7BDA58' },
-  { dark: '#287171', light: '#7BD1D1' },
-  { dark: '#595959', light: '#999999' },
-  { dark: '#FCFCFC', light: '#04041C' },
-];
+const SPLIT_CELL_HORIZONTALLY = 'SPLIT_CELL_HORIZONTALLY';
+/**
+ * Action to split a table cell horizontally.
+ */
+class SplitCellHorizontallyAction extends ModifyContentAction {
+  constructor() {
+    super();
+    this.isFlushable = true;
+    this.type = SPLIT_CELL_HORIZONTALLY;
+  }
+}
+
+const SPLIT_CELL_VERTICALLY = 'SPLIT_CELL_VERTICALLY';
+/**
+ * Action to split a table cell vertically.
+ */
+class SplitCellVerticallyAction extends ModifyContentAction {
+  constructor() {
+    super();
+    this.isFlushable = true;
+    this.type = SPLIT_CELL_VERTICALLY;
+  }
+}
+
+var SplitCellOperationType;
+(function (SplitCellOperationType) {
+  SplitCellOperationType["SPLIT_CELL_HORIZONTALLY"] = "SPLIT_CELL_HORIZONTALLY";
+  SplitCellOperationType["SPLIT_CELL_VERTICALLY"] = "SPLIT_CELL_VERTICALLY";
+})(SplitCellOperationType || (SplitCellOperationType = {}));
+/**
+ * Event handler for split cell operations in a table.
+ */
+class SplitCellOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === TableSettingType.SPLIT_CELL;
+  }
+  /**
+   * @inheritDoc
+   */
+  execute(action, extensionContext) {
+    const selectedCells = extensionContext.tableSelection.getSelectedCells();
+    if (selectedCells && selectedCells.length === 1) {
+      const targetCell = selectedCells[0];
+      const operation = action[1];
+      switch (operation) {
+        case SplitCellOperationType.SPLIT_CELL_HORIZONTALLY:
+          this.handleSplitCellHorizontally(targetCell);
+          break;
+        case SplitCellOperationType.SPLIT_CELL_VERTICALLY:
+          this.handleSplitCellVertically(targetCell);
+          break;
+      }
+    }
+  }
+  /**
+   * Splits the selected table cell horizontally (split top/bottom).
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} selectedCell - The table cell block to split.
+   */
+  handleSplitCellHorizontally(selectedCell) {
+    const action = new SplitCellHorizontallyAction();
+    selectedCell.apply(action);
+  }
+  /**
+   * Splits the selected table cell vertically (split left/right).
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} selectedCell - The table cell block to split.
+   */
+  handleSplitCellVertically(selectedCell) {
+    const action = new SplitCellVerticallyAction();
+    selectedCell.apply(action);
+  }
+}
 
-export { ColumnOperationType as A, RowOperationType as B, ColumnOperationEventHandler as C, DELETE_TABLE_ROW as D, InsertTableRowDirection as I, RTETableExtensionAnnotationTypeEnum as R, SettingEventHandler as S, TableSettingType as T, RowOperationEventHandler as a, RTETableAnnotation as b, RTETableCellAnnotation as c, RTETableHeadCellAnnotation as d, RTETableHeadCellBlock as e, RTETableBlock as f, generateTableBody as g, RTETableCellBlock as h, RTETableRowBlock as i, RTETableBodyBlock as j, RTETableHeadBlock as k, getParentBlockByType as l, TableColumnStrategy as m, getAllTableRows as n, InsertTableColumnDirection as o, getDefaultCellBlockTemplate as p, getFirstNode as q, RTE_TABLE_DEFAULT_COLORS as r, INSERT_TABLE_ROW as s, TOGGLE_HEADER_ROW as t, INSERT_TABLE_COLUMN as u, DELETE_TABLE_COLUMN as v, TOGGLE_HEADER_TABLE_COLUMN as w, ToggleHeaderTableColumnStrategy as x, SELECT_TABLE_COLUMN as y, RTE_TABLE_BORDER_STYLES as z };
+export { INSERT_TABLE_ROW as A, TOGGLE_HEADER_ROW as B, ColumnOperationEventHandler as C, DELETE_TABLE_ROW as D, INSERT_TABLE_COLUMN as E, DELETE_TABLE_COLUMN as F, TOGGLE_HEADER_TABLE_COLUMN as G, ToggleHeaderTableColumnStrategy as H, InsertTableRowDirection as I, SPLIT_CELL_HORIZONTALLY as J, SPLIT_CELL_VERTICALLY as K, SELECT_TABLE_COLUMN as L, MergeCellsOperationEventHandler as M, MERGE_CELLS as N, RTE_TABLE_BORDER_STYLES as O, ColumnOperationType as P, RowOperationType as Q, RTETableExtensionAnnotationTypeEnum as R, SettingEventHandler as S, TableSettingType as T, SplitCellOperationType as U, VegaThemeManager as V, isRectangularSelection as W, getAdjacentCell as X, RowOperationEventHandler as a, SplitCellOperationEventHandler as b, RTETableAnnotation as c, RTETableCellAnnotation as d, RTETableHeadCellAnnotation as e, RTETableHeadCellBlock as f, RTETableColorManager as g, RTETableBlock as h, generateTableBody as i, RTETableCellBlock as j, RTETableRowBlock as k, RTETableBodyBlock as l, RTETableHeadBlock as m, getParentBlockByType as n, TableColumnStrategy as o, getAllTableRows as p, InsertTableColumnDirection as q, getDefaultCellBlockTemplate as r, getFirstNode as s, setSpanAttributes as t, MergeCellsOperationType as u, buildTableGrid as v, getCellSpan as w, getActualColumnPosition as x, createNewCell as y, RTE_TABLE_DEFAULT_COLORS as z };