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

package/dist/cjs/split-cell-operation-9930fde8.js

@@ -0,0 +1,2133 @@
+'use strict';
+
+const codeBlock = require('./code-block-d9001f03.js');
+const object = require('./object-e2e28e3d.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 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, 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 =
+      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, useInternalStyle = true) {
+    return [exports.RTETableExtensionAnnotationTypeEnum.TABLE, new RTETableAnnotation(value, 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}`.trim();
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTETableAnnotation({
+      backgroundColor: this.backgroundColor,
+      border: this.border,
+      width: this.width,
+      height: this.height,
+      alignment: this.alignment,
+      borderCollapse: this.borderCollapse,
+    }, this.useInternalStyle);
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return {
+      table: object.cleanObject({
+        backgroundColor: this.backgroundColor,
+        border: this.border,
+        width: this.width,
+        height: this.height,
+        alignment: this.alignment,
+        borderCollapse: this.borderCollapse,
+      }),
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
+    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
+   */
+  renderClass() {
+    return 'v-rte--extension-table';
+  }
+  /**
+   * Generates the alignment styles for the table.
+   *
+   * @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.
+ */
+class RTETableBlock extends codeBlock.RTEBlock {
+  constructor(id, options) {
+    super(id);
+    this.type = 'table-block';
+    this.children = [];
+    const { autoMatchFormat } = options || { autoMatchFormat: true };
+    if (autoMatchFormat) {
+      this.annotationMap.set(exports.RTETableExtensionAnnotationTypeEnum.TABLE, new RTETableAnnotation());
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(block, options) {
+    var _a;
+    const tableBlock = new RTETableBlock(block.id, options);
+    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, options === null || options === void 0 ? void 0 : options.autoMatchFormat));
+    }
+    return tableBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTETableBlock(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();
+  }
+  /**
+   * Get the first node of the table block.
+   *
+   * @returns {RTENode} The first node of the table block.
+   */
+  getFirstNode() {
+    if (this.hasCaption()) {
+      return this.children[0].children[0].getLastNode();
+    }
+    else {
+      const childNode = this.children[0].children[0]
+        .children[0];
+      return childNode.getLastNode();
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.children.length > 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const childrenHtml = this.children.map((child) => child.toHtml()).join('');
+    const attrStr = super.generateAttributeString();
+    return `<table${attrStr}>${childrenHtml}</table>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
+  }
+  /**
+   * Retrieves the caption block from the children collection, if present.
+   *
+   * @returns {Nullable<RTETableCaptionBlock>} The caption block or `null`.
+   */
+  getCaption() {
+    const caption = this.children.find((child) => child.type === 'table-caption');
+    return caption !== null && caption !== void 0 ? caption : null;
+  }
+  /**
+   * Inserts, replaces, or removes the caption block within the children.
+   *
+   * @param {Nullable<RTETableCaptionBlock>} caption - The caption block to set, or `null` to remove.
+   */
+  setCaption(caption) {
+    const index = this.children.findIndex((child) => child.type === 'table-caption');
+    if (!caption) {
+      if (index >= 0) {
+        this.children.splice(index, 1);
+      }
+      return;
+    }
+    caption.parent = this;
+    if (index >= 0) {
+      this.children[index] = caption;
+    }
+    else {
+      this.children.unshift(caption);
+    }
+  }
+  /**
+   * Checks whether the table currently stores a caption block reference.
+   *
+   * @returns {boolean} `true` when a caption DTO is attached; otherwise `false`.
+   */
+  hasCaption() {
+    return typeGuard.isNonNullable(this.getCaption());
+  }
+}
+
+exports.TableSettingType = void 0;
+(function (TableSettingType) {
+  TableSettingType["ROW"] = "ROW";
+  TableSettingType["CAPTION"] = "CAPTION";
+  TableSettingType["COLUMN"] = "COLUMN";
+  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.
+ */
+class SettingEventHandler {
+  /**
+   * Applies a cursor update action so the editor focuses on the resolved node.
+   *
+   * @param {RTETableBlock} block - Table block currently being toggled.
+   * @param {Nullable<RTENode>} focusNode - Target node that should receive the caret.
+   */
+  syncCursorPosition(block, focusNode) {
+    const rootContent = this.findRootContent(block);
+    if (focusNode && rootContent) {
+      const offset = focusNode.getRangeEndOffset();
+      rootContent.apply(new contentState.UpdateCursorPositionAction(focusNode, offset));
+    }
+  }
+  /**
+   * Walks up the parent chain to locate the nearest VegaRTEContent root.
+   *
+   * @param {RTETableBlock} block - Table block used as the starting point.
+   * @returns {Nullable<VegaRTEContent>} Content root containing the table, if found.
+   */
+  findRootContent(block) {
+    let currentParent = block.parent;
+    while (currentParent) {
+      if (currentParent instanceof contentState.VegaRTEContent) {
+        return currentParent;
+      }
+      currentParent = currentParent.parent;
+    }
+  }
+}
+
+const DELETE_TABLE_ROW = 'DELETE_TABLE_ROW';
+/**
+ * Action class for deleting a specific table row.
+ */
+class DeleteTableRowAction extends codeBlock.ModifyContentAction {
+  /**
+   * Constructs an InsertTableRowAction.
+   *
+   * @param {RTETableRowBlock[]} rowsToBeRemoved - The rows to be removed from the table.
+   */
+  constructor(rowsToBeRemoved) {
+    super();
+    this.isFlushable = true;
+    this.type = DELETE_TABLE_ROW;
+    this.rowsToBeRemoved = rowsToBeRemoved;
+  }
+}
+
+const INSERT_TABLE_ROW = 'INSERT_TABLE_ROW';
+exports.InsertTableRowDirection = void 0;
+(function (InsertTableRowDirection) {
+  InsertTableRowDirection["ABOVE"] = "ABOVE";
+  InsertTableRowDirection["BELOW"] = "BELOW";
+})(exports.InsertTableRowDirection || (exports.InsertTableRowDirection = {}));
+/**
+ * Action class for inserting a new row into a table within the rich text editor.
+ */
+class InsertTableRowAction extends codeBlock.ModifyContentAction {
+  /**
+   * Constructs an InsertTableRowAction.
+   *
+   * @param {InsertTableRowDirection} insertDirection - The direction to insert the new row (above or below the current row).
+   * @param {RTETableRowBlock[]} selectedRows - The currently selected rows in the table.
+   */
+  constructor(insertDirection, selectedRows = []) {
+    super();
+    this.isFlushable = true;
+    this.type = INSERT_TABLE_ROW;
+    this.selectedRows = [];
+    this.insertDirection = insertDirection;
+    this.selectedRows = selectedRows;
+  }
+}
+
+const TOGGLE_HEADER_ROW = 'TOGGLE_HEADER_ROW';
+/**
+ * Action to convert selected rows to header rows or revert them back to normal rows.
+ */
+class ToggleHeaderRowAction extends codeBlock.ModifyContentAction {
+  constructor(selectedRows) {
+    super();
+    this.isFlushable = true;
+    this.type = TOGGLE_HEADER_ROW;
+    this.selectedRows = selectedRows;
+  }
+}
+
+/**
+ * Class representing a table row block in the rich text editor.
+ */
+class RTETableRowBlock extends codeBlock.RTEBlock {
+  constructor(id) {
+    super(id);
+    this.type = 'table-row';
+    this.children = [];
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(block, options) {
+    const rowBlock = new RTETableRowBlock(block.id);
+    super.convertAnnotationsToMap(rowBlock.annotationMap, Object.assign({}, block.annotations));
+    rowBlock.children = super.generateBlockChildren(block.children, options, rowBlock);
+    return rowBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTETableRowBlock(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 `<tr${attrStr}>${childrenHtml}</tr>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
+  }
+}
+
+/**
+ * Class representing a table body block in the rich text editor.
+ */
+class RTETableBodyBlock extends codeBlock.RTEBlock {
+  constructor(id) {
+    super(id);
+    this.type = 'table-body';
+    this.children = [];
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(block, options) {
+    const tableBodyBlock = new RTETableBodyBlock(block.id);
+    super.convertAnnotationsToMap(tableBodyBlock.annotationMap, Object.assign({}, block.annotations));
+    tableBodyBlock.children = super.generateBlockChildren(block.children, options, tableBodyBlock);
+    return tableBodyBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTETableBodyBlock(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) => child.toHtml()).join('');
+    const attrStr = super.generateAttributeString();
+    return `<tbody${attrStr}>${childrenHtml}</tbody>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
+  }
+}
+
+/**
+ * Class representing a table cell annotation in the rich text editor.
+ */
+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-cell';
+    this.children = [];
+    const { autoMatchFormat } = options || { autoMatchFormat: true };
+    if (autoMatchFormat) {
+      this.annotationMap.set(exports.RTETableExtensionAnnotationTypeEnum.CELL, new RTETableCellAnnotation());
+    }
+  }
+  /**
+   * @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, 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 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();
+  }
+  /**
+   * @inheritDoc
+   */
+  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) => child.toHtml()).join('');
+    const attrStr = super.generateAttributeString();
+    return `<td${attrStr}>${childrenHtml}</td>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  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.
+ * @param {RTEBlock} block - The starting block to search from.
+ * @param {ClassType<unknown>} dtoClass - The class type to match the parent block against.
+ * @returns {T | null} - The found parent block of the specified type, or null if not found.
+ */
+function getParentBlockByType(block, dtoClass) {
+  if (block) {
+    if (block instanceof dtoClass) {
+      return block;
+    }
+    else {
+      return getParentBlockByType(block.parent, dtoClass);
+    }
+  }
+  return null;
+}
+/**
+ * Generate the table body with the specified number of rows and columns.
+ *
+ * @param {number} rowCount - The number of rows in the table body.
+ * @param {number} columnCount - The number of columns in the table body.
+ * @returns {VegaRTETableBodyBlock} The generated table body block.
+ */
+function generateTableBody(rowCount, columnCount) {
+  return {
+    id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+    type: 'table-body',
+    children: Array.from({ length: rowCount }, () => generateTableRow(columnCount)),
+  };
+}
+/**
+ * Create a table row block with the specified number of columns and cell type.
+ *
+ * @param {number} columnCount - The number of columns in the row.
+ * @returns {VegaRTETableRowBlock} The created table row block.
+ */
+function generateTableRow(columnCount) {
+  return {
+    id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+    type: 'table-row',
+    children: Array.from({ length: columnCount }, () => getDefaultCellBlockTemplate('table-cell')),
+  };
+}
+/**
+ * Get all table rows from a table block (including rows from all table bodies and headers).
+ *
+ * @param {RTETableBlock} tableBlock - The table block.
+ * @returns {RTETableRowBlock[]} Array of all table row blocks.
+ */
+function getAllTableRows(tableBlock) {
+  return tableBlock.children
+    .filter((child) => child instanceof RTETableBodyBlock || child instanceof RTETableHeadBlock)
+    .flatMap((body) => body.children);
+}
+/**
+ * Find the first node within a block recursively.
+ *
+ * @param {Nullable<RTEBlock>} block - The block to find the first node in.
+ * @returns {Nullable<RTENode>} The focusable node within the block.
+ */
+function getFirstNode(block) {
+  if (!block || !block.children || !block.children[0])
+    return null;
+  const firstNode = block.children[0];
+  if (firstNode instanceof codeBlock.RTENode) {
+    return firstNode;
+  }
+  return getFirstNode(firstNode);
+}
+/**
+ * Get the default cell block template.
+ *
+ * @param {string} cellType - The type of the cell block.
+ * @returns {VegaRTETableCellBlock} The default cell block template.
+ */
+function getDefaultCellBlockTemplate(cellType) {
+  const id = createPublicApiRuntimeMetricsSlimmer.generateUUID();
+  return {
+    id,
+    type: cellType,
+    children: [
+      {
+        id: `${id}-p`,
+        type: 'paragraph',
+        nodes: [
+          {
+            id: `${id}-p-t`,
+            type: 'text',
+            text: '',
+          },
+        ],
+      },
+    ],
+  };
+}
+/**
+ * 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.
+ */
+function getCellSpan(cell) {
+  return { colSpan: cell.colSpan, rowSpan: cell.rowSpan };
+}
+/**
+ * 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.
+ */
+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 -1;
+}
+/**
+ * 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.
+ */
+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;
+  }
+  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;
+      }
+    }
+  }
+  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;
+  }
+  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);
+  }
+}
+/**
+ * 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 = {}));
+/**
+ * Event handler for row operations in a table.
+ */
+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);
+    }
+  }
+}
+
+/**
+ * Abstract base strategy for handling table column operations.
+ * Provides common functionality for all column-related strategies.
+ */
+class TableColumnStrategy extends codeBlock.ActionHandleStrategy {
+  /**
+   * Finds the index range of cells within a table row.
+   * Returns the start and end indices of the given cell range.
+   *
+   * @param {(RTETableCellBlock | RTETableHeadCellBlock)[]} cellRange - The range of table cells to find indices for.
+   * @returns {[number, number]} A tuple containing the start and end indices.
+   */
+  getBoundaryCellIndexOfRow(cellRange) {
+    const firstCell = cellRange[0];
+    const lastCell = cellRange[cellRange.length - 1];
+    return [firstCell.parent.children.indexOf(firstCell), lastCell.parent.children.indexOf(lastCell)];
+  }
+}
+
+/**
+ * Strategy to handle the toggle of header state of a table column.
+ */
+class ToggleHeaderTableColumnStrategy extends TableColumnStrategy {
+  /**
+   * Check if all selected cells are header cells.
+   *
+   * @param {(RTETableCellBlock | RTETableHeadCellBlock)[]} selectedCellRange - The range of selected table cell blocks.
+   * @returns {boolean} True if all selected cells are header cells, false otherwise.
+   */
+  static isFullHeaderSelection(selectedCellRange) {
+    if (selectedCellRange.length === 0) {
+      return false;
+    }
+    const endSelectedCell = selectedCellRange[selectedCellRange.length - 1];
+    const endSelectedCellIndex = endSelectedCell.parent.children.findIndex((child) => child === endSelectedCell);
+    const table = getParentBlockByType(endSelectedCell, RTETableBlock);
+    if (table) {
+      const allTableRows = getAllTableRows(table);
+      return allTableRows.every((row) => {
+        const cell = row.children[endSelectedCellIndex];
+        return cell instanceof RTETableHeadCellBlock;
+      });
+    }
+    return false;
+  }
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    var _a;
+    const headerOn = action.headerOn;
+    const [startCellIndex, endCellIndex] = this.getBoundaryCellIndexOfRow(action.tableCellHeaderRange);
+    const allTableBodyRows = ((_a = target.children.find((body) => body instanceof RTETableBodyBlock)) === null || _a === void 0 ? void 0 : _a.children) || [];
+    allTableBodyRows.forEach((row) => {
+      const firstTableCellIndex = row.children.findIndex((cell) => !(cell instanceof RTETableHeadCellBlock));
+      if (headerOn) {
+        this.toggleCellsToHeader(firstTableCellIndex, endCellIndex, row);
+      }
+      else {
+        this.toggleHeaderCellsToCells(firstTableCellIndex, row, startCellIndex);
+      }
+    });
+    const root = this.getRootContent(target);
+    if (root && action.tableCellHeaderRange[0].parent) {
+      const focusNode = action.tableCellHeaderRange[0].parent.getFirstNode();
+      focusNode && root.apply(new contentState.UpdateCursorPositionAction(focusNode, 0));
+    }
+  }
+  /**
+   * Toggles the specified header cells in a row to cells.
+   *
+   * @param {number} firstTableCellIndex - The index of the first table cell in the row.
+   * @param {RTETableRowBlock} row - The table row block containing the cells to toggle.
+   * @param {number} startCellIndex - The index of the first cell to toggle.
+   */
+  toggleHeaderCellsToCells(firstTableCellIndex, row, startCellIndex) {
+    const lastTableHeaderCellIndex = firstTableCellIndex >= 0 ? firstTableCellIndex - 1 : row.children.length - 1;
+    for (let cellIndex = startCellIndex; cellIndex <= lastTableHeaderCellIndex; cellIndex++) {
+      const cellToToggle = row.children[cellIndex];
+      const newCell = RTETableCellBlock.from(cellToToggle.toJSON());
+      this.replaceCellInRow(row, cellToToggle, newCell);
+    }
+  }
+  /**
+   * Toggles the specified cells in a row to header cells.
+   *
+   * @param {number} firstTableCellIndex - The index of the first table cell in the row.
+   * @param {number} endCellIndex - The index of the last cell to toggle.
+   * @param {RTETableRowBlock} row - The table row block containing the cells to toggle.
+   */
+  toggleCellsToHeader(firstTableCellIndex, endCellIndex, row) {
+    for (let tableCellIndex = firstTableCellIndex; tableCellIndex <= endCellIndex; tableCellIndex++) {
+      const cellToToggle = row.children[tableCellIndex];
+      const newHeaderCell = RTETableHeadCellBlock.from(cellToToggle.toJSON());
+      this.replaceCellInRow(row, cellToToggle, newHeaderCell);
+    }
+  }
+  /**
+   * Replaces a cell in a given row at the specified index with a new cell.
+   *
+   * @param {RTETableRowBlock} row - The table row block containing the cell to replace.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} oldCell - The cell to replace.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} newCell - The new cell to insert.
+   */
+  replaceCellInRow(row, oldCell, newCell) {
+    row.apply(new codeBlock.InsertChildrenBeforeAction(oldCell, newCell));
+    row.apply(new codeBlock.RemoveChildrenAction(oldCell));
+  }
+}
+
+const DELETE_TABLE_COLUMN = 'DELETE_TABLE_COLUMN';
+/**
+ * Action to delete a table column
+ */
+class DeleteTableColumnAction extends codeBlock.ModifyContentAction {
+  constructor(target) {
+    super();
+    this.isFlushable = true;
+    this.type = DELETE_TABLE_COLUMN;
+    this.tableCellDeleteRange = target;
+  }
+}
+
+const INSERT_TABLE_COLUMN = 'INSERT_TABLE_COLUMN';
+exports.InsertTableColumnDirection = void 0;
+(function (InsertTableColumnDirection) {
+  InsertTableColumnDirection["LEFT"] = "LEFT";
+  InsertTableColumnDirection["RIGHT"] = "RIGHT";
+})(exports.InsertTableColumnDirection || (exports.InsertTableColumnDirection = {}));
+/**
+ * Action to insert a table column into the RTETable.
+ */
+class InsertTableColumnAction extends codeBlock.ModifyContentAction {
+  constructor(insertDirection, tableCellInsertRange) {
+    super();
+    this.isFlushable = true;
+    this.type = INSERT_TABLE_COLUMN;
+    this.tableCellInsertRange = tableCellInsertRange;
+    this.insertDirection = insertDirection;
+  }
+}
+
+const SELECT_TABLE_COLUMN = 'SELECT_TABLE_COLUMN';
+/**
+ * Action to select a table column into the RTETable.
+ */
+class SelectTableColumnAction extends codeBlock.ModifyContentAction {
+  constructor(tableCellSelectRange, selectCellCallback) {
+    super();
+    this.type = SELECT_TABLE_COLUMN;
+    this.tableCellSelectRange = tableCellSelectRange;
+    this.selectCellCallback = selectCellCallback;
+  }
+}
+
+const TOGGLE_HEADER_TABLE_COLUMN = 'TOGGLE_HEADER_TABLE_COLUMN';
+/**
+ * Action to toggle header state of a table column in the RTETable.
+ */
+class ToggleHeaderTableColumnAction extends codeBlock.ModifyContentAction {
+  constructor(tableCellHeaderRange, headerOn) {
+    super();
+    this.isFlushable = true;
+    this.type = TOGGLE_HEADER_TABLE_COLUMN;
+    this.headerOn = false;
+    this.tableCellHeaderRange = tableCellHeaderRange;
+    this.headerOn = headerOn;
+  }
+}
+
+exports.ColumnOperationType = void 0;
+(function (ColumnOperationType) {
+  ColumnOperationType["HEADER_COLUMN"] = "HEADER_COLUMN";
+  ColumnOperationType["ADD_COLUMN_LEFT"] = "ADD_COLUMN_LEFT";
+  ColumnOperationType["ADD_COLUMN_RIGHT"] = "ADD_COLUMN_RIGHT";
+  ColumnOperationType["DELETE_COLUMN"] = "DELETE_COLUMN";
+  ColumnOperationType["SELECT_COLUMN"] = "SELECT_COLUMN";
+})(exports.ColumnOperationType || (exports.ColumnOperationType = {}));
+/**
+ * Event handler for column operations in a table.
+ */
+class ColumnOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === exports.TableSettingType.COLUMN;
+  }
+  /**
+   * @inheritDoc
+   */
+  execute(action, extensionContext) {
+    const selectedCells = extensionContext.tableSelection.getSelectedCells();
+    if (!selectedCells || selectedCells.length === 0) {
+      return;
+    }
+    const operation = action[1];
+    switch (operation) {
+      case exports.ColumnOperationType.ADD_COLUMN_LEFT:
+      case exports.ColumnOperationType.ADD_COLUMN_RIGHT:
+        this.handleInsertColumn(operation, selectedCells);
+        break;
+      case exports.ColumnOperationType.DELETE_COLUMN:
+        this.handleDeleteColumn(selectedCells);
+        break;
+      case exports.ColumnOperationType.SELECT_COLUMN:
+        this.handleSelectColumn(selectedCells, extensionContext);
+        break;
+      case exports.ColumnOperationType.HEADER_COLUMN:
+        this.handleToggleHeaderColumn(selectedCells);
+        break;
+    }
+  }
+  /**
+   * Adds a new column to the table at the specified position.
+   *
+   * @param {ColumnOperationType} direction - The position to insert the new column (left or right).
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - The selected table cells.
+   */
+  handleInsertColumn(direction, selectedCells) {
+    const action = new InsertTableColumnAction(direction === exports.ColumnOperationType.ADD_COLUMN_LEFT
+      ? exports.InsertTableColumnDirection.LEFT
+      : exports.InsertTableColumnDirection.RIGHT, selectedCells);
+    this.applyActionOnTable(action, selectedCells[0]);
+  }
+  /**
+   * Deletes the selected column from the table.
+   *
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - The selected table cells.
+   */
+  handleDeleteColumn(selectedCells) {
+    const action = new DeleteTableColumnAction(selectedCells);
+    this.applyActionOnTable(action, selectedCells[0]);
+  }
+  /**
+   * Selects the entire column in the table.
+   *
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - The selected table cells.
+   * @param {RTETableExtensionContext} extensionContext - The table extension context.
+   */
+  handleSelectColumn(selectedCells, extensionContext) {
+    const action = new SelectTableColumnAction(selectedCells, (allSelectedCells) => {
+      extensionContext.tableSelection.setSelectedCells(allSelectedCells);
+    });
+    this.applyActionOnTable(action, selectedCells[0]);
+  }
+  /**
+   * Toggles the header state of the selected column in the table.
+   *
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - The selected table cells.
+   */
+  handleToggleHeaderColumn(selectedCells) {
+    const headerOn = !ToggleHeaderTableColumnStrategy.isFullHeaderSelection(selectedCells);
+    const action = new ToggleHeaderTableColumnAction(selectedCells, headerOn);
+    this.applyActionOnTable(action, selectedCells[0]);
+  }
+  /**
+   * Apply the specified action on the table containing the selected cell.
+   *
+   * @param {DeleteTableColumnAction | InsertTableColumnAction} 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);
+    }
+  }
+}
+
+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;
+exports.RTETableRowBlock = RTETableRowBlock;
+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;