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

package/dist/cjs/styles.constants-3aff0b56.js

@@ -0,0 +1,1306 @@
+'use strict';
+
+const codeBlock = require('./code-block-22ee2550.js');
+const object = require('./object-e2e28e3d.js');
+const typeGuard = require('./type-guard-69d2cf01.js');
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
+const contentState = require('./content-state-0be6fda3.js');
+
+exports.RTETableExtensionAnnotationTypeEnum = void 0;
+(function (RTETableExtensionAnnotationTypeEnum) {
+  RTETableExtensionAnnotationTypeEnum["TABLE"] = "EXTENSION_TABLE";
+  RTETableExtensionAnnotationTypeEnum["CELL"] = "EXTENSION_TABLE_CELL";
+  RTETableExtensionAnnotationTypeEnum["CAPTION"] = "EXTENSION_TABLE_CAPTION";
+})(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', } = {}) {
+    super();
+    this.type = exports.RTETableExtensionAnnotationTypeEnum.TABLE;
+    this.backgroundColor = backgroundColor;
+    this.border = border;
+    this.width = width;
+    this.height = height;
+    this.alignment = alignment;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(value) {
+    return [exports.RTETableExtensionAnnotationTypeEnum.TABLE, new RTETableAnnotation(value)];
+  }
+  /**
+   * 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}`.trim();
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTETableAnnotation({
+      backgroundColor: this.backgroundColor,
+      border: this.border,
+      width: this.width,
+      height: this.height,
+      alignment: this.alignment,
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return {
+      table: object.cleanObject({
+        backgroundColor: this.backgroundColor,
+        border: this.border,
+        width: this.width,
+        height: this.height,
+        alignment: this.alignment,
+      }),
+    };
+  }
+  /**
+   * @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));
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return 'v-rte--extension-table';
+  }
+  /**
+   * Generates the alignment styles for the table.
+   *
+   * @returns {Record<string, string>} The alignment styles.
+   */
+  renderAlignmentStyle() {
+    return {
+      margin: this.alignment === 'center' ? '0 auto' : this.alignment === 'left' ? '0' : '0 0 0 auto',
+    };
+  }
+}
+
+/**
+ * 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));
+    }
+    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";
+})(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 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()) });
+  }
+}
+
+/**
+ * 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: '',
+          },
+        ],
+      },
+    ],
+  };
+}
+
+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);
+    }
+  }
+}
+
+/**
+ * Class representing a table cell annotation in the rich text editor.
+ */
+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;
+    }
+    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 = '30px';
+
+/**
+ * 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));
+    }
+    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;
+  }
+  /**
+   * @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()) });
+  }
+}
+
+/**
+ * Class representing a table head cell annotation in the rich text editor.
+ */
+class RTETableHeadCellAnnotation extends RTETableCellAnnotation {
+  constructor(annotation = {}) {
+    super(annotation);
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(cellAnnotation) {
+    return [exports.RTETableExtensionAnnotationTypeEnum.CELL, new RTETableHeadCellAnnotation(cellAnnotation)];
+  }
+  /**
+   * @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,
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  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 }));
+  }
+}
+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));
+    }
+    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()) });
+  }
+}
+
+/**
+ * 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 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' },
+];
+
+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.RTETableAnnotation = RTETableAnnotation;
+exports.RTETableBlock = RTETableBlock;
+exports.RTETableBodyBlock = RTETableBodyBlock;
+exports.RTETableCellAnnotation = RTETableCellAnnotation;
+exports.RTETableCellBlock = RTETableCellBlock;
+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.SettingEventHandler = SettingEventHandler;
+exports.TOGGLE_HEADER_ROW = TOGGLE_HEADER_ROW;
+exports.TOGGLE_HEADER_TABLE_COLUMN = TOGGLE_HEADER_TABLE_COLUMN;
+exports.TableColumnStrategy = TableColumnStrategy;
+exports.ToggleHeaderTableColumnStrategy = ToggleHeaderTableColumnStrategy;
+exports.generateTableBody = generateTableBody;
+exports.getAllTableRows = getAllTableRows;
+exports.getDefaultCellBlockTemplate = getDefaultCellBlockTemplate;
+exports.getFirstNode = getFirstNode;
+exports.getParentBlockByType = getParentBlockByType;