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

package/dist/cjs/{styles.constants-3aff0b56.js → split-cell-operation-9930fde8.js}

@@ -1,35 +1,350 @@
 'use strict';
 
-const codeBlock = require('./code-block-22ee2550.js');
+const codeBlock = require('./code-block-d9001f03.js');
 const object = require('./object-e2e28e3d.js');
-const typeGuard = require('./type-guard-69d2cf01.js');
+const darkModeStyleController = require('./dark-mode-style-controller-c21172aa.js');
+require('./global-slimmer-registry-b3bce7e0.js');
 const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
-const contentState = require('./content-state-0be6fda3.js');
+const ui = require('./ui-9e181079.js');
+const typeGuard = require('./type-guard-a0f026d8.js');
+const contentState = require('./content-state-466f277f.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.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([
+  createPublicApiRuntimeMetricsSlimmer.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 = ui.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 codeBlock.BlockAnnotation {
+  constructor(colorKey) {
+    super();
+    this.type = exports.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
+      ? darkModeStyleController.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);
+  }
+}
 
 exports.RTETableExtensionAnnotationTypeEnum = void 0;
 (function (RTETableExtensionAnnotationTypeEnum) {
   RTETableExtensionAnnotationTypeEnum["TABLE"] = "EXTENSION_TABLE";
   RTETableExtensionAnnotationTypeEnum["CELL"] = "EXTENSION_TABLE_CELL";
   RTETableExtensionAnnotationTypeEnum["CAPTION"] = "EXTENSION_TABLE_CAPTION";
+  RTETableExtensionAnnotationTypeEnum["COLOR"] = "EXTENSION_TABLE_COLOR";
 })(exports.RTETableExtensionAnnotationTypeEnum || (exports.RTETableExtensionAnnotationTypeEnum = {}));
 /**
  * Class representing a table annotation in the rich text editor.
  */
 class RTETableAnnotation extends codeBlock.BlockAnnotation {
-  constructor({ backgroundColor, border, width, height, alignment = 'center', } = {}) {
+  constructor({ backgroundColor, border, width, height, alignment, borderCollapse } = {}, useInternalStyle = true) {
     super();
     this.type = exports.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 [exports.RTETableExtensionAnnotationTypeEnum.TABLE, new RTETableAnnotation(value)];
+  static from(value, useInternalStyle = true) {
+    return [exports.RTETableExtensionAnnotationTypeEnum.TABLE, new RTETableAnnotation(value, useInternalStyle)];
   }
   /**
    * Generates the CSS border string from the border properties.
@@ -40,7 +355,7 @@ class RTETableAnnotation extends codeBlock.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
@@ -52,7 +367,8 @@ class RTETableAnnotation extends codeBlock.BlockAnnotation {
       width: this.width,
       height: this.height,
       alignment: this.alignment,
-    });
+      borderCollapse: this.borderCollapse,
+    }, this.useInternalStyle);
   }
   /**
    * @inheritDoc
@@ -65,6 +381,7 @@ class RTETableAnnotation extends codeBlock.BlockAnnotation {
         width: this.width,
         height: this.height,
         alignment: this.alignment,
+        borderCollapse: this.borderCollapse,
       }),
     };
   }
@@ -72,11 +389,10 @@ class RTETableAnnotation extends codeBlock.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 object.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 object.cleanObject(tableStyles);
   }
   /**
    * @inheritDoc
@@ -90,11 +406,15 @@ class RTETableAnnotation extends codeBlock.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.
@@ -118,7 +438,7 @@ class RTETableBlock extends codeBlock.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;
   }
@@ -221,6 +541,7 @@ exports.TableSettingType = void 0;
   TableSettingType["MERGE_CELLS"] = "MERGE_CELLS";
   TableSettingType["TABLE"] = "TABLE";
   TableSettingType["CELL"] = "CELL";
+  TableSettingType["SPLIT_CELL"] = "SPLIT_CELL";
 })(exports.TableSettingType || (exports.TableSettingType = {}));
 /**
  * Abstract class for setting event handlers.
@@ -430,28 +751,194 @@ class RTETableBodyBlock extends codeBlock.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 codeBlock.RTEBlock {
-  constructor(id) {
+class RTETableCellAnnotation extends codeBlock.BlockAnnotation {
+  constructor({ backgroundColor, padding, border, width, height, textAlign, verticalAlign, minWidth, boxSizing, } = {}, useInternalStyle = true) {
+    super();
+    this.type = exports.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 [
+      exports.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: object.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 object.cleanObject(this.removeDefaultValues(style));
+    }
+    return object.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 codeBlock.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(exports.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();
@@ -469,17 +956,31 @@ class RTETableHeadBlock extends codeBlock.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
@@ -487,9 +988,290 @@ class RTETableHeadBlock extends codeBlock.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 codeBlock.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 [
+      exports.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 object.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(exports.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 codeBlock.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;
+  }
+}
+
+exports.MergeCellsOperationType = void 0;
+(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";
+})(exports.MergeCellsOperationType || (exports.MergeCellsOperationType = {}));
+/**
+ * Event handler for merge cells operations in a table.
+ */
+class MergeCellsOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === exports.TableSettingType.MERGE_CELLS;
+  }
+  /**
+   * @inheritDoc
+   */
+  execute(action, extensionContext) {
+    const selectedCells = extensionContext.tableSelection.getSelectedCells();
+    const operation = action[1];
+    switch (operation) {
+      case exports.MergeCellsOperationType.MERGE_CELL_UP:
+      case exports.MergeCellsOperationType.MERGE_CELL_RIGHT:
+      case exports.MergeCellsOperationType.MERGE_CELL_DOWN:
+      case exports.MergeCellsOperationType.MERGE_CELL_LEFT:
+        {
+          const mergeCells = this.getDirectionMergeCells(operation, selectedCells[0]);
+          this.handleMergeCells(mergeCells, operation);
+        }
+        break;
+      default:
+        {
+          if (selectedCells.length > 1) {
+            this.handleMergeCells(selectedCells, exports.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 exports.MergeCellsOperationType.MERGE_CELL_UP:
+        return [adjacent, cell];
+      case exports.MergeCellsOperationType.MERGE_CELL_DOWN:
+        return [cell, adjacent];
+      case exports.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.
@@ -587,400 +1369,376 @@ function getDefaultCellBlockTemplate(cellType) {
     ],
   };
 }
-
-exports.RowOperationType = void 0;
-(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";
-})(exports.RowOperationType || (exports.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] === exports.TableSettingType.ROW;
-  }
-  /**
-   * @inheritDoc
-   */
-  execute(action, extensionContext) {
-    const operation = action[1];
-    switch (operation) {
-      case exports.RowOperationType.ADD_ROW_ABOVE:
-      case exports.RowOperationType.ADD_ROW_BELOW:
-        this.handleInsertRow(operation, extensionContext);
-        break;
-      case exports.RowOperationType.DELETE_ROW:
-        this.handleDeleteRow(extensionContext);
-        break;
-      case exports.RowOperationType.HEADER_ROW:
-        this.handleToggleHeader(extensionContext);
-        break;
-      case exports.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 === exports.RowOperationType.ADD_ROW_ABOVE
-        ? exports.InsertTableRowDirection.ABOVE
-        : exports.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 codeBlock.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 = exports.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 [exports.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: object.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 object.cleanObject(this.removeDefaultValues(style));
-    }
-    return object.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 codeBlock.RTEBlock {
-  constructor(id, options) {
-    super(id);
-    this.type = 'table-cell';
-    this.children = [];
-    const { autoMatchFormat } = options || { autoMatchFormat: true };
-    if (autoMatchFormat) {
-      this.annotationMap.set(exports.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 exports.MergeCellsOperationType.MERGE_CELL_LEFT:
+      targetColPosition = cellColPosition - 1;
+      break;
+    case exports.MergeCellsOperationType.MERGE_CELL_RIGHT:
+      targetColPosition = cellColPosition + colSpan;
+      break;
+    case exports.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(codeBlock.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 codeBlock.CustomAttributeAnnotation(existingAttrs);
+    targetCell.annotationMap.set(codeBlock.CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE, customAttributeAnnotation);
+  }
+  else {
+    targetCell.annotationMap.delete(codeBlock.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);
 }
 
+exports.RowOperationType = void 0;
+(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";
+})(exports.RowOperationType || (exports.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 [exports.RTETableExtensionAnnotationTypeEnum.CELL, new RTETableHeadCellAnnotation(cellAnnotation)];
+  canHandle(action) {
+    return action[0] === exports.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 exports.RowOperationType.ADD_ROW_ABOVE:
+      case exports.RowOperationType.ADD_ROW_BELOW:
+        this.handleInsertRow(operation, extensionContext);
+        break;
+      case exports.RowOperationType.DELETE_ROW:
+        this.handleDeleteRow(extensionContext);
+        break;
+      case exports.RowOperationType.HEADER_ROW:
+        this.handleToggleHeader(extensionContext);
+        break;
+      case exports.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 object.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 === exports.RowOperationType.ADD_ROW_ABOVE
+        ? exports.InsertTableRowDirection.ABOVE
+        : exports.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(exports.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);
+    }
   }
 }
 
@@ -1254,38 +2012,96 @@ 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 codeBlock.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 codeBlock.ModifyContentAction {
+  constructor() {
+    super();
+    this.isFlushable = true;
+    this.type = SPLIT_CELL_VERTICALLY;
+  }
+}
+
+exports.SplitCellOperationType = void 0;
+(function (SplitCellOperationType) {
+  SplitCellOperationType["SPLIT_CELL_HORIZONTALLY"] = "SPLIT_CELL_HORIZONTALLY";
+  SplitCellOperationType["SPLIT_CELL_VERTICALLY"] = "SPLIT_CELL_VERTICALLY";
+})(exports.SplitCellOperationType || (exports.SplitCellOperationType = {}));
+/**
+ * Event handler for split cell operations in a table.
+ */
+class SplitCellOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === exports.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 exports.SplitCellOperationType.SPLIT_CELL_HORIZONTALLY:
+          this.handleSplitCellHorizontally(targetCell);
+          break;
+        case exports.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);
+  }
+}
 
 exports.ColumnOperationEventHandler = ColumnOperationEventHandler;
 exports.DELETE_TABLE_COLUMN = DELETE_TABLE_COLUMN;
 exports.DELETE_TABLE_ROW = DELETE_TABLE_ROW;
 exports.INSERT_TABLE_COLUMN = INSERT_TABLE_COLUMN;
 exports.INSERT_TABLE_ROW = INSERT_TABLE_ROW;
+exports.MERGE_CELLS = MERGE_CELLS;
+exports.MergeCellsOperationEventHandler = MergeCellsOperationEventHandler;
 exports.RTETableAnnotation = RTETableAnnotation;
 exports.RTETableBlock = RTETableBlock;
 exports.RTETableBodyBlock = RTETableBodyBlock;
 exports.RTETableCellAnnotation = RTETableCellAnnotation;
 exports.RTETableCellBlock = RTETableCellBlock;
+exports.RTETableColorManager = RTETableColorManager;
 exports.RTETableHeadBlock = RTETableHeadBlock;
 exports.RTETableHeadCellAnnotation = RTETableHeadCellAnnotation;
 exports.RTETableHeadCellBlock = RTETableHeadCellBlock;
@@ -1294,13 +2110,24 @@ exports.RTE_TABLE_BORDER_STYLES = RTE_TABLE_BORDER_STYLES;
 exports.RTE_TABLE_DEFAULT_COLORS = RTE_TABLE_DEFAULT_COLORS;
 exports.RowOperationEventHandler = RowOperationEventHandler;
 exports.SELECT_TABLE_COLUMN = SELECT_TABLE_COLUMN;
+exports.SPLIT_CELL_HORIZONTALLY = SPLIT_CELL_HORIZONTALLY;
+exports.SPLIT_CELL_VERTICALLY = SPLIT_CELL_VERTICALLY;
 exports.SettingEventHandler = SettingEventHandler;
+exports.SplitCellOperationEventHandler = SplitCellOperationEventHandler;
 exports.TOGGLE_HEADER_ROW = TOGGLE_HEADER_ROW;
 exports.TOGGLE_HEADER_TABLE_COLUMN = TOGGLE_HEADER_TABLE_COLUMN;
 exports.TableColumnStrategy = TableColumnStrategy;
 exports.ToggleHeaderTableColumnStrategy = ToggleHeaderTableColumnStrategy;
+exports.VegaThemeManager = VegaThemeManager;
+exports.buildTableGrid = buildTableGrid;
+exports.createNewCell = createNewCell;
 exports.generateTableBody = generateTableBody;
+exports.getActualColumnPosition = getActualColumnPosition;
+exports.getAdjacentCell = getAdjacentCell;
 exports.getAllTableRows = getAllTableRows;
+exports.getCellSpan = getCellSpan;
 exports.getDefaultCellBlockTemplate = getDefaultCellBlockTemplate;
 exports.getFirstNode = getFirstNode;
 exports.getParentBlockByType = getParentBlockByType;
+exports.isRectangularSelection = isRectangularSelection;
+exports.setSpanAttributes = setSpanAttributes;