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

package/dist/esm/styles.constants-0dd6f7fa.js

@@ -0,0 +1,1277 @@
+import { B as BlockAnnotation, f as RTEBlock, M as ModifyContentAction, i as RTENode, d as ActionHandleStrategy, j as InsertChildrenBeforeAction, m as RemoveChildrenAction } from './code-block-76b29be1.js';
+import { c as cleanObject } from './object-66c37948.js';
+import { i as isNonNullable } from './type-guard-b48aec98.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
+import { U as UpdateCursorPositionAction, V as VegaRTEContent } from './content-state-03f1d302.js';
+
+var RTETableExtensionAnnotationTypeEnum;
+(function (RTETableExtensionAnnotationTypeEnum) {
+  RTETableExtensionAnnotationTypeEnum["TABLE"] = "EXTENSION_TABLE";
+  RTETableExtensionAnnotationTypeEnum["CELL"] = "EXTENSION_TABLE_CELL";
+  RTETableExtensionAnnotationTypeEnum["CAPTION"] = "EXTENSION_TABLE_CAPTION";
+})(RTETableExtensionAnnotationTypeEnum || (RTETableExtensionAnnotationTypeEnum = {}));
+/**
+ * Class representing a table annotation in the rich text editor.
+ */
+class RTETableAnnotation extends BlockAnnotation {
+  constructor({ backgroundColor, border, width, height, alignment = 'center', } = {}) {
+    super();
+    this.type = RTETableExtensionAnnotationTypeEnum.TABLE;
+    this.backgroundColor = backgroundColor;
+    this.border = border;
+    this.width = width;
+    this.height = height;
+    this.alignment = alignment;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(value) {
+    return [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: 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 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 RTEBlock {
+  constructor(id, options) {
+    super(id);
+    this.type = 'table-block';
+    this.children = [];
+    const { autoMatchFormat } = options || { autoMatchFormat: true };
+    if (autoMatchFormat) {
+      this.annotationMap.set(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 isNonNullable(this.getCaption());
+  }
+}
+
+var TableSettingType;
+(function (TableSettingType) {
+  TableSettingType["ROW"] = "ROW";
+  TableSettingType["CAPTION"] = "CAPTION";
+  TableSettingType["COLUMN"] = "COLUMN";
+  TableSettingType["MERGE_CELLS"] = "MERGE_CELLS";
+  TableSettingType["TABLE"] = "TABLE";
+  TableSettingType["CELL"] = "CELL";
+})(TableSettingType || (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 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 VegaRTEContent) {
+        return currentParent;
+      }
+      currentParent = currentParent.parent;
+    }
+  }
+}
+
+const DELETE_TABLE_ROW = 'DELETE_TABLE_ROW';
+/**
+ * Action class for deleting a specific table row.
+ */
+class DeleteTableRowAction extends 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';
+var InsertTableRowDirection;
+(function (InsertTableRowDirection) {
+  InsertTableRowDirection["ABOVE"] = "ABOVE";
+  InsertTableRowDirection["BELOW"] = "BELOW";
+})(InsertTableRowDirection || (InsertTableRowDirection = {}));
+/**
+ * Action class for inserting a new row into a table within the rich text editor.
+ */
+class InsertTableRowAction extends 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 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 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 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 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: 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: 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 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 = generateUUID();
+  return {
+    id,
+    type: cellType,
+    children: [
+      {
+        id: `${id}-p`,
+        type: 'paragraph',
+        nodes: [
+          {
+            id: `${id}-p-t`,
+            type: 'text',
+            text: '',
+          },
+        ],
+      },
+    ],
+  };
+}
+
+var RowOperationType;
+(function (RowOperationType) {
+  RowOperationType["HEADER_ROW"] = "HEADER_ROW";
+  RowOperationType["ADD_ROW_ABOVE"] = "ADD_ROW_ABOVE";
+  RowOperationType["ADD_ROW_BELOW"] = "ADD_ROW_BELOW";
+  RowOperationType["DELETE_ROW"] = "DELETE_ROW";
+  RowOperationType["SELECT_ROW"] = "SELECT_ROW";
+})(RowOperationType || (RowOperationType = {}));
+/**
+ * Event handler for row operations in a table.
+ */
+class RowOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === TableSettingType.ROW;
+  }
+  /**
+   * @inheritDoc
+   */
+  execute(action, extensionContext) {
+    const operation = action[1];
+    switch (operation) {
+      case RowOperationType.ADD_ROW_ABOVE:
+      case RowOperationType.ADD_ROW_BELOW:
+        this.handleInsertRow(operation, extensionContext);
+        break;
+      case RowOperationType.DELETE_ROW:
+        this.handleDeleteRow(extensionContext);
+        break;
+      case RowOperationType.HEADER_ROW:
+        this.handleToggleHeader(extensionContext);
+        break;
+      case RowOperationType.SELECT_ROW:
+        this.handleSelectRow(extensionContext);
+        break;
+    }
+  }
+  /**
+   * Adds a new row to the table at the specified position.
+   *
+   * @param {RowOperationType} direction - The position to insert the new row (above or below).
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   */
+  handleInsertRow(direction, extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length > 0) {
+      const action = new InsertTableRowAction(direction === RowOperationType.ADD_ROW_ABOVE
+        ? InsertTableRowDirection.ABOVE
+        : InsertTableRowDirection.BELOW, selectedRows);
+      this.applyActionToTable(selectedRows[0], action);
+    }
+  }
+  /**
+   * Deletes the selected row(s) from the table.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   */
+  handleDeleteRow(extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length) {
+      const action = new DeleteTableRowAction(selectedRows);
+      this.applyActionToTable(selectedRows[0], action);
+    }
+  }
+  /**
+   * Converts selected rows to header rows or reverts them back to normal rows.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   */
+  handleToggleHeader(extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length > 0) {
+      const action = new ToggleHeaderRowAction(selectedRows);
+      this.applyActionToTable(selectedRows[0], action);
+    }
+  }
+  /**
+   * Selects the focus row(s) in the table.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   */
+  handleSelectRow(extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length > 0 && extensionContext && extensionContext.tableSelection) {
+      const allCells = selectedRows.flatMap((row) => row.children);
+      extensionContext.tableSelection.setSelectedCells(allCells);
+    }
+  }
+  /**
+   * Get all selected table rows.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   * @returns {RTETableRowBlock[]} The selected table row blocks.
+   */
+  getAllSelectedRows(extensionContext) {
+    const selectedRows = new Set();
+    if (extensionContext && extensionContext.tableSelection) {
+      const { tableSelection } = extensionContext;
+      const selectedCells = tableSelection.getSelectedCells();
+      selectedCells.forEach((cell) => {
+        const rowBlock = getParentBlockByType(cell, RTETableRowBlock);
+        if (rowBlock) {
+          selectedRows.add(rowBlock);
+        }
+      });
+    }
+    return Array.from(selectedRows);
+  }
+  /**
+   * Applies the given action to the table containing the reference block.
+   *
+   * @param {RTEBlock} refBlock - The reference block within the table.
+   * @param {ModifyContentAction} action - The action to apply to the table.
+   */
+  applyActionToTable(refBlock, action) {
+    const table = getParentBlockByType(refBlock, RTETableBlock);
+    if (table) {
+      table.apply(action);
+    }
+  }
+}
+
+/**
+ * Class representing a table cell annotation in the rich text editor.
+ */
+class RTETableCellAnnotation extends BlockAnnotation {
+  constructor({ backgroundColor, padding = RTETableCellAnnotation.DEFAULT_PADDING, border = RTETableCellAnnotation.DEFAULT_BORDER, width, height, textAlign = RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN, verticalAlign = RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN, } = {}) {
+    super();
+    this.type = RTETableExtensionAnnotationTypeEnum.CELL;
+    this.backgroundColor = backgroundColor;
+    this.padding = padding;
+    this.border = border;
+    this.width = width;
+    this.height = height;
+    this.textAlign = textAlign;
+    this.verticalAlign = verticalAlign;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(cellAnnotation) {
+    return [RTETableExtensionAnnotationTypeEnum.CELL, new RTETableCellAnnotation(cellAnnotation)];
+  }
+  /**
+   * Generates the CSS border string from the border properties.
+   *
+   * @returns {Nullable<string>} The CSS border string.
+   */
+  get borderStr() {
+    if (!this.border)
+      return null;
+    return `${this.border.style} ${this.border.width} ${this.border.color}`;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTETableCellAnnotation({
+      backgroundColor: this.backgroundColor,
+      padding: this.padding,
+      border: this.border,
+      width: this.width,
+      height: this.height,
+      textAlign: this.textAlign,
+      verticalAlign: this.verticalAlign,
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return {
+      tableCell: cleanObject({
+        backgroundColor: this.backgroundColor,
+        padding: this.padding,
+        border: this.border,
+        width: this.width,
+        height: this.height,
+        textAlign: this.textAlign,
+        verticalAlign: this.verticalAlign,
+      }),
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    const style = {
+      backgroundColor: this.backgroundColor,
+      padding: this.padding,
+      border: this.borderStr,
+      width: this.width,
+      height: this.height,
+      textAlign: this.textAlign,
+      verticalAlign: this.verticalAlign,
+    };
+    if (!(options === null || options === void 0 ? void 0 : options.standalone)) {
+      return cleanObject(this.removeDefaultValues(style));
+    }
+    return cleanObject(Object.assign(Object.assign({}, style), { minWidth: RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH }));
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * Removes default values from the style object to avoid redundancy.
+   *
+   * @param {Record<string, Nullable<string>>} style - The style object to clean.
+   * @returns {Record<string, Nullable<string>>} The cleaned style object.
+   */
+  removeDefaultValues(style) {
+    const cleanedStyle = Object.assign({}, style);
+    if (cleanedStyle.padding === RTETableCellAnnotation.DEFAULT_PADDING) {
+      delete cleanedStyle.padding;
+    }
+    if (cleanedStyle.border ===
+      `${RTETableCellAnnotation.DEFAULT_BORDER.style} ${RTETableCellAnnotation.DEFAULT_BORDER.width} ${RTETableCellAnnotation.DEFAULT_BORDER.color}`) {
+      delete cleanedStyle.border;
+    }
+    if (cleanedStyle.textAlign === RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN) {
+      delete cleanedStyle.textAlign;
+    }
+    if (cleanedStyle.verticalAlign === RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN) {
+      delete cleanedStyle.verticalAlign;
+    }
+    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 RTEBlock {
+  constructor(id, options) {
+    super(id);
+    this.type = 'table-cell';
+    this.children = [];
+    const { autoMatchFormat } = options || { autoMatchFormat: true };
+    if (autoMatchFormat) {
+      this.annotationMap.set(RTETableExtensionAnnotationTypeEnum.CELL, new RTETableCellAnnotation());
+    }
+  }
+  /**
+   * @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 [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 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(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 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 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 InsertChildrenBeforeAction(oldCell, newCell));
+    row.apply(new RemoveChildrenAction(oldCell));
+  }
+}
+
+const DELETE_TABLE_COLUMN = 'DELETE_TABLE_COLUMN';
+/**
+ * Action to delete a table column
+ */
+class DeleteTableColumnAction extends ModifyContentAction {
+  constructor(target) {
+    super();
+    this.isFlushable = true;
+    this.type = DELETE_TABLE_COLUMN;
+    this.tableCellDeleteRange = target;
+  }
+}
+
+const INSERT_TABLE_COLUMN = 'INSERT_TABLE_COLUMN';
+var InsertTableColumnDirection;
+(function (InsertTableColumnDirection) {
+  InsertTableColumnDirection["LEFT"] = "LEFT";
+  InsertTableColumnDirection["RIGHT"] = "RIGHT";
+})(InsertTableColumnDirection || (InsertTableColumnDirection = {}));
+/**
+ * Action to insert a table column into the RTETable.
+ */
+class InsertTableColumnAction extends 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 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 ModifyContentAction {
+  constructor(tableCellHeaderRange, headerOn) {
+    super();
+    this.isFlushable = true;
+    this.type = TOGGLE_HEADER_TABLE_COLUMN;
+    this.headerOn = false;
+    this.tableCellHeaderRange = tableCellHeaderRange;
+    this.headerOn = headerOn;
+  }
+}
+
+var ColumnOperationType;
+(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";
+})(ColumnOperationType || (ColumnOperationType = {}));
+/**
+ * Event handler for column operations in a table.
+ */
+class ColumnOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === TableSettingType.COLUMN;
+  }
+  /**
+   * @inheritDoc
+   */
+  execute(action, extensionContext) {
+    const selectedCells = extensionContext.tableSelection.getSelectedCells();
+    if (!selectedCells || selectedCells.length === 0) {
+      return;
+    }
+    const operation = action[1];
+    switch (operation) {
+      case ColumnOperationType.ADD_COLUMN_LEFT:
+      case ColumnOperationType.ADD_COLUMN_RIGHT:
+        this.handleInsertColumn(operation, selectedCells);
+        break;
+      case ColumnOperationType.DELETE_COLUMN:
+        this.handleDeleteColumn(selectedCells);
+        break;
+      case ColumnOperationType.SELECT_COLUMN:
+        this.handleSelectColumn(selectedCells, extensionContext);
+        break;
+      case 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 === ColumnOperationType.ADD_COLUMN_LEFT
+      ? InsertTableColumnDirection.LEFT
+      : 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' },
+];
+
+export { ColumnOperationType as A, RowOperationType as B, ColumnOperationEventHandler as C, DELETE_TABLE_ROW as D, InsertTableRowDirection as I, RTETableExtensionAnnotationTypeEnum as R, SettingEventHandler as S, TableSettingType as T, RowOperationEventHandler as a, RTETableAnnotation as b, RTETableCellAnnotation as c, RTETableHeadCellAnnotation as d, RTETableHeadCellBlock as e, RTETableBlock as f, generateTableBody as g, RTETableCellBlock as h, RTETableRowBlock as i, RTETableBodyBlock as j, RTETableHeadBlock as k, getParentBlockByType as l, TableColumnStrategy as m, getAllTableRows as n, InsertTableColumnDirection as o, getDefaultCellBlockTemplate as p, getFirstNode as q, RTE_TABLE_DEFAULT_COLORS as r, INSERT_TABLE_ROW as s, TOGGLE_HEADER_ROW as t, INSERT_TABLE_COLUMN as u, DELETE_TABLE_COLUMN as v, TOGGLE_HEADER_TABLE_COLUMN as w, ToggleHeaderTableColumnStrategy as x, SELECT_TABLE_COLUMN as y, RTE_TABLE_BORDER_STYLES as z };