@heartlandone/vega 2.78.0 → 2.80.0

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-toolbar-popover-renderer.js

@@ -0,0 +1,178 @@
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaPopoverShow } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { InsertTableBlockAction } from '../actions/insert-table-block-action';
+import { TablePopoverBaseRenderer } from './table-popover-base-renderer';
+/**
+ * Table toolbar popover renderer class. Render the popover content for the table toolbar button, which includes the table size picker grid.
+ */
+export class RTETableToolbarPopoverRenderer extends TablePopoverBaseRenderer {
+  constructor() {
+    super(...arguments);
+    this.hoveredRows = 1;
+    this.hoveredCols = 1;
+  }
+  /**
+   * Renders the table toolbar popover.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {VegaRTERenderResult} children - Child elements to be rendered inside the popover.
+   * @returns {VegaRTERenderResult} Render result for the table toolbar popover.
+   */
+  render(h, children) {
+    return h('vega-popover', {
+      trigger: 'click',
+      alignment: 'start',
+      placement: 'bottom',
+      showArrow: false,
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (ref) => {
+        if (ref) {
+          this.tablePickerPopoverRef = ref;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
+            this.resetPicker();
+          });
+        }
+      },
+    }, [
+      h('div', { slot: 'popover' }, [this.generatePickerStyles(h), this.generateTableSizeGrid(h)]),
+      h('div', { slot: 'popover-content' }, children),
+    ]);
+  }
+  /**
+   * Generates the table size picker grid.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @returns {VegaRTERenderResult} - The render result for the table size picker.
+   */
+  generateTableSizeGrid(h) {
+    const rows = 10;
+    const cols = 10;
+    const gridCells = [];
+    for (let r = 1; r <= rows; r++) {
+      for (let c = 1; c <= cols; c++) {
+        gridCells.push(h('button', {
+          'class': `rte-table-picker__cell`,
+          'data-row': r,
+          'data-col': c,
+          'onMouseenter': this.handlePickerCellHover.bind(this, r, c),
+          'onClick': this.handlePickerClick.bind(this, r, c),
+        }, []));
+      }
+    }
+    return h('div', { class: 'rte-table-picker' }, [
+      h('div', {
+        class: 'rte-table-picker__grid',
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        ref: (ref) => {
+          if (ref) {
+            this.tablePickerGridRef = ref;
+          }
+        },
+        style: {
+          gridTemplateColumns: `repeat(${cols}, 16px)`,
+          gridTemplateRows: `repeat(${rows}, 16px)`,
+        },
+      }, gridCells),
+      h('div', {
+        class: 'rte-table-picker__hint',
+      }, h('vega-hint', {
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        ref: (ref) => {
+          if (ref) {
+            this.selectedHintRef = ref;
+          }
+        },
+      }, [`${this.hoveredRows} × ${this.hoveredCols}`])),
+    ]);
+  }
+  /**
+   * Generates the styles for the table size picker.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @returns {VegaRTERenderResult} - The render result for the styles.
+   */
+  generatePickerStyles(h) {
+    return h('style', {}, [
+      // eslint-disable-next-line spellcheck/spell-checker
+      `
+.rte-table-picker__grid { display: grid; gap: 2px; }
+.rte-table-picker__cell {
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    background-color: transparent;
+    cursor: pointer;
+}
+.rte-table-picker__cell:hover {
+    background-color: #cae1fc;
+}
+.rte-table-picker__cell.active {
+    background-color: #cae1fc;
+}
+.rte-table-picker__hint {
+    text-align: center;
+}
+          `,
+    ]);
+  }
+  /**
+   * Creates a table block with the specified number of rows and columns.
+   *
+   * @param {number} row - The number of rows for the table.
+   * @param {number} column - The number of columns for the table.
+   */
+  createTable(row, column) {
+    const extensionContext = this.getTableExtensionContext();
+    if (extensionContext) {
+      const { host, getSelectedNodes } = extensionContext;
+      const focusNode = getSelectedNodes()[0];
+      const action = new InsertTableBlockAction(row, column);
+      if (!focusNode) {
+        host.value.apply(action);
+      }
+      else if (focusNode.parent) {
+        focusNode.parent.apply(action);
+      }
+      if (action.nextFocusNode) {
+        host.value.apply(new UpdateCursorPositionAction(action.nextFocusNode, 1));
+      }
+    }
+  }
+  /**
+   * Handles the click event on a picker cell.
+   *
+   * @param {number} r - The number of rows selected.
+   * @param {number} c - The number of columns selected.
+   */
+  handlePickerClick(r, c) {
+    this.createTable(r, c);
+    void this.tablePickerPopoverRef.hide();
+  }
+  /**
+   * Handles the hover event on a picker cell.
+   *
+   * @param {number} r - The number of rows being hovered over.
+   * @param {number} c - The number of columns being hovered over.
+   */
+  handlePickerCellHover(r, c) {
+    this.hoveredRows = r;
+    this.hoveredCols = c;
+    Array.from(this.tablePickerGridRef.children).forEach((cell) => {
+      const rIndex = Number(cell.dataset.row);
+      const cIndex = Number(cell.dataset.col);
+      if (rIndex <= this.hoveredRows && cIndex <= this.hoveredCols) {
+        cell.classList.add('active');
+      }
+      else {
+        cell.classList.remove('active');
+      }
+    });
+    this.selectedHintRef.textContent = `${this.hoveredRows} × ${this.hoveredCols}`;
+  }
+  /**
+   * Resets the table picker to its initial state.
+   */
+  resetPicker() {
+    this.handlePickerCellHover(1, 1);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/caption-operation.js

@@ -0,0 +1,78 @@
+import { SettingEventHandler, TableSettingType } from './setting-event-handler.abstract';
+import { RTETableCaptionBlock } from '../dto/table-caption-block';
+import { TableCaptionAction } from '../actions/table-caption-action';
+import { generateUUID } from '../../../../../utils/misc';
+/**
+ * Event handler for row operations in a table.
+ */
+export class CaptionOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === TableSettingType.CAPTION;
+  }
+  /**
+   * Toggle caption state for the target table block when the caption menu item is clicked.
+   *
+   * @param {Array<string>} action - Table setting payload, e.g. ['CAPTION', 'rte-table-caption'].
+   * @param {RTEExtensionContext} _extensionContext - Current editor extension context (unused here).
+   * @param {RTETableBlock} tableBlock - Table block that owns the caption.
+   */
+  execute(action, _extensionContext, tableBlock) {
+    const shouldEnable = action[1] === 'rte-table-caption';
+    const toggleAction = new TableCaptionAction(shouldEnable);
+    const existingCaption = tableBlock.getCaption();
+    if (shouldEnable) {
+      const hydratedCaption = existingCaption && existingCaption.isNotEmpty()
+        ? existingCaption
+        : this.createCaptionBlock(existingCaption === null || existingCaption === void 0 ? void 0 : existingCaption.id);
+      if (!existingCaption || hydratedCaption !== existingCaption) {
+        tableBlock.setCaption(hydratedCaption);
+      }
+      toggleAction.nextFocusNode = hydratedCaption.getLastNode();
+    }
+    else {
+      if (existingCaption) {
+        tableBlock.setCaption(null);
+        toggleAction.nextFocusNode = tableBlock.getFirstNode();
+      }
+    }
+    this.syncCursorPosition(tableBlock, toggleAction.nextFocusNode);
+  }
+  /**
+   * 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) {
+    super.syncCursorPosition(block, focusNode);
+  }
+  /**
+   * Build a fresh caption block with a default paragraph + placeholder text.
+   *
+   * @param {string} id - table-caption id
+   * @returns {RTETableCaptionBlock} Newly created caption DTO ready for rendering.
+   */
+  createCaptionBlock(id) {
+    const captionData = {
+      id: id !== null && id !== void 0 ? id : generateUUID(),
+      type: 'table-caption',
+      children: [
+        {
+          id: generateUUID(),
+          type: 'paragraph',
+          nodes: [
+            {
+              id: generateUUID(),
+              type: 'text',
+              text: '',
+            },
+          ],
+        },
+      ],
+    };
+    return RTETableCaptionBlock.from(captionData);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/cell-properties-cancel-event-handler.js

@@ -0,0 +1,17 @@
+import { CellPropertiesEventHandler } from './cell-properties';
+/**
+ * Cancel Event handler for the cell properties.
+ */
+export class CellPropertiesCancelEventHandler extends CellPropertiesEventHandler {
+  /**
+   * Cancel cell properties changes
+   *
+   * @param {RTETableExtensionContext} extensionContext - The table extension context.
+   * @param {Record<string, RTETablePropertiesType>} data - The origin of the properties.
+   * @param {RTENode} focusNode - The focus node.
+   */
+  handle(extensionContext, data, focusNode) {
+    this.applyProperties(extensionContext, data, true);
+    this.updateCursorPosition(extensionContext, focusNode);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/cell-properties-change-event-handler.js

@@ -0,0 +1,15 @@
+import { CellPropertiesEventHandler } from './cell-properties';
+/**
+ * Change Event handler for the cell properties.
+ */
+export class CellPropertiesChangeEventHandler extends CellPropertiesEventHandler {
+  /**
+   * Update the cell properties based on the provided data.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The table extension context.
+   * @param {Record<string, RTETablePropertiesType>} data - The origin of the properties.
+   */
+  handle(extensionContext, data) {
+    this.applyProperties(extensionContext, data, false);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/cell-properties-save-event-handler.js

@@ -0,0 +1,19 @@
+import { CellPropertiesEventHandler } from './cell-properties';
+/**
+ * Save Event handler for the cell properties.
+ */
+export class CellPropertiesSaveEventHandler extends CellPropertiesEventHandler {
+  /**
+   * Commit the cell properties changes
+   *
+   * @param {RTETableExtensionContext} extensionContext - The table extension context.
+   * @param {Record<string, RTETablePropertiesType>} _data - The origin of the properties.
+   * @param {RTENode} focusNode - The focus node.
+   */
+  handle(extensionContext, _data, focusNode) {
+    if (extensionContext && extensionContext.host) {
+      extensionContext.flushValue(extensionContext.host.value);
+      this.updateCursorPosition(extensionContext, focusNode);
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/cell-properties.js

@@ -0,0 +1,136 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { cleanObject } from '../../../../../utils/object';
+import { parseToPixelString } from '../../../../../utils/pixel';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { RTETableCellAnnotationsAction } from '../actions/table-cell-annotations-action';
+import { RTETableHeadCellAnnotationsAction } from '../actions/table-head-cell-annotations-action';
+import { RTETableExtensionAnnotationTypeEnum } from '../annotations/table-annotation';
+import { RTETableCellAnnotation } from '../annotations/table-cell-annotation';
+import { RTETableHeadCellBlock } from '../dto/table-head-cell-block';
+/**
+ * Event handler for cell properties in a table.
+ */
+export class CellPropertiesEventHandler {
+  /**
+   * Get the style collection from the selected table cells.
+   *
+   * @param {RTETableCellBlock[]} selectedCells - The selected table cells to merge styles from
+   * @returns {TableCellStylePropertiesMap} The merged styles object containing only common style properties
+   */
+  static getStyleCollectionFromCell(selectedCells) {
+    return selectedCells.reduce((accumulator, cell) => {
+      const annotation = cell.getAnnotationByType(RTETableExtensionAnnotationTypeEnum.CELL);
+      accumulator[cell.id] = {};
+      if (annotation) {
+        const _a = annotation.toJSON().tableCell, { border } = _a, restProps = __rest(_a, ["border"]);
+        const formattedBorder = {};
+        if (border) {
+          formattedBorder.borderStyle = border.style;
+          formattedBorder.borderColor = border.color;
+          formattedBorder.borderWidth = border.width;
+        }
+        accumulator[cell.id] = cleanObject(Object.assign(Object.assign({}, restProps), formattedBorder));
+      }
+      return accumulator;
+    }, {});
+  }
+  /**
+   * Convert the style collection prop to a form field value by merging styles.
+   *
+   * @param {TableCellStylePropertiesMap} styleMap - The default value prop.
+   * @returns {RTETablePropertiesType} The merged form field value.
+   */
+  static convertStyleMapToFormField(styleMap) {
+    const styleCollection = {};
+    for (const id in styleMap) {
+      const style = styleMap[id];
+      for (const key in style) {
+        if (styleCollection[key]) {
+          styleCollection[key].push(style[key]);
+        }
+        else {
+          styleCollection[key] = [style[key]];
+        }
+      }
+    }
+    const defaultValueSize = Object.keys(styleMap).length;
+    const mergedStyles = {};
+    for (const key in styleCollection) {
+      const styleValues = styleCollection[key];
+      const uniqueValues = new Set(styleValues);
+      if (styleValues.length === defaultValueSize && uniqueValues.size === 1) {
+        mergedStyles[key] = styleValues[0];
+      }
+    }
+    return mergedStyles;
+  }
+  /**
+   * Apply the given properties to the selected cells
+   *
+   * @param {RTETableExtensionContext} extensionContext The extensionContext
+   * @param {Record<string, RTETablePropertiesType>} properties - The properties to apply
+   * @param {boolean} isFlushable - Whether the action is flushable
+   */
+  applyProperties(extensionContext, properties, isFlushable) {
+    const selectedCells = extensionContext.tableSelection.getSelectedCells();
+    selectedCells.forEach((cell) => {
+      const originalStyles = properties[cell.id];
+      if (originalStyles) {
+        const annotation = this.convertToVegaTableCellAnnotation(Object.assign({}, originalStyles));
+        this.applyAnnotation(cell, annotation, isFlushable);
+      }
+    });
+  }
+  /**
+   * Update the rich text editor cursor position
+   *
+   * @param {RTETableExtensionContext} extensionContext - The table extension context.
+   * @param {Nullable<RTENode>} focusNode - The node to focus on.
+   */
+  updateCursorPosition(extensionContext, focusNode) {
+    if (extensionContext && focusNode) {
+      extensionContext.host.value.apply(new UpdateCursorPositionAction(focusNode, 0));
+    }
+  }
+  /**
+   * Convert RTETablePropertiesType to VegaRTETableCellAnnotation
+   *
+   * @param {RTETablePropertiesType} originalStyles - The original style properties
+   * @returns {VegaRTETableCellAnnotation} The converted VegaRTETableCellAnnotation
+   */
+  convertToVegaTableCellAnnotation(originalStyles) {
+    const { borderStyle, borderWidth, borderColor } = originalStyles, restStyles = __rest(originalStyles, ["borderStyle", "borderWidth", "borderColor"]);
+    const border = cleanObject({
+      style: borderStyle,
+      width: borderWidth ? parseToPixelString(borderWidth) : '',
+      color: borderColor,
+    });
+    return cleanObject(Object.assign(Object.assign({}, restStyles), { backgroundColor: restStyles.backgroundColor || '', padding: restStyles.padding ? parseToPixelString(restStyles.padding) : '', width: restStyles.width ? parseToPixelString(restStyles.width) : '', height: restStyles.height ? parseToPixelString(restStyles.height) : '', verticalAlign: restStyles.verticalAlign || '', textAlign: restStyles.textAlign || '', border }));
+  }
+  /**
+   * Apply the given annotation to the specified table cell
+   *
+   * @param {RTETableCellBlock} cell - The table cell to apply the annotation to
+   * @param {VegaRTETableCellAnnotation} annotation - The annotation to apply
+   * @param {boolean} isFlushable - Whether the action is flushable
+   */
+  applyAnnotation(cell, annotation, isFlushable) {
+    const originAnnotation = cell.getAnnotationByType(RTETableExtensionAnnotationTypeEnum.CELL) ||
+      new RTETableCellAnnotation({}, false);
+    const action = cell instanceof RTETableHeadCellBlock
+      ? new RTETableHeadCellAnnotationsAction(annotation, originAnnotation)
+      : new RTETableCellAnnotationsAction(annotation, originAnnotation);
+    action.isFlushable = isFlushable;
+    cell.apply(action);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/column-operation.js

@@ -0,0 +1,109 @@
+import { ToggleHeaderTableColumnStrategy } from '../action-handler-strategies/toggle-header-table-column-strategy';
+import { DeleteTableColumnAction } from '../actions/delete-table-column-action';
+import { InsertTableColumnDirection, InsertTableColumnAction } from '../actions/insert-table-column-action';
+import { SelectTableColumnAction } from '../actions/select-table-column-action';
+import { ToggleHeaderTableColumnAction } from '../actions/toggle-header-table-column-action';
+import { RTETableBlock } from '../dto/table-block';
+import { getParentBlockByType } from '../utils/utils';
+import { SettingEventHandler, TableSettingType } from './setting-event-handler.abstract';
+export 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.
+ */
+export 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;
+      default:
+        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);
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/merge-cells-operation.js

@@ -0,0 +1,100 @@
+import { SettingEventHandler, TableSettingType } from './setting-event-handler.abstract';
+import { RTETableBlock } from '../dto/table-block';
+import { MergeCellsAction } from '../actions/merge-cells-action';
+import { getRectangularBounds, getParentBlockByType, getAdjacentCell, } from '../utils/utils';
+export var MergeCellsOperationType;
+(function (MergeCellsOperationType) {
+  MergeCellsOperationType["MERGE_CELLS"] = "MERGE_CELLS";
+  MergeCellsOperationType["MERGE_CELL_UP"] = "MERGE_CELL_UP";
+  MergeCellsOperationType["MERGE_CELL_RIGHT"] = "MERGE_CELL_RIGHT";
+  MergeCellsOperationType["MERGE_CELL_DOWN"] = "MERGE_CELL_DOWN";
+  MergeCellsOperationType["MERGE_CELL_LEFT"] = "MERGE_CELL_LEFT";
+})(MergeCellsOperationType || (MergeCellsOperationType = {}));
+/**
+ * Event handler for merge cells operations in a table.
+ */
+export class MergeCellsOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === TableSettingType.MERGE_CELLS;
+  }
+  /**
+   * @inheritDoc
+   */
+  execute(action, extensionContext) {
+    const selectedCells = extensionContext.tableSelection.getSelectedCells();
+    const operation = action[1];
+    switch (operation) {
+      case MergeCellsOperationType.MERGE_CELL_UP:
+      case MergeCellsOperationType.MERGE_CELL_RIGHT:
+      case MergeCellsOperationType.MERGE_CELL_DOWN:
+      case MergeCellsOperationType.MERGE_CELL_LEFT:
+        {
+          const mergeCells = this.getDirectionMergeCells(operation, selectedCells[0]);
+          this.handleMergeCells(mergeCells, operation);
+        }
+        break;
+      default:
+        {
+          if (selectedCells.length > 1) {
+            this.handleMergeCells(selectedCells, MergeCellsOperationType.MERGE_CELLS);
+          }
+        }
+        break;
+    }
+  }
+  /**
+   * Get the adjacent cell in the specified direction.
+   *
+   * @param {MergeCellsOperationType} direction - The direction to look for the adjacent cell.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} cell - The current cell.
+   * @returns {Array<RTETableCellBlock | RTETableHeadCellBlock>} Array containing the cells to merge.
+   */
+  getDirectionMergeCells(direction, cell) {
+    const adjacent = getAdjacentCell(cell, direction);
+    if (!adjacent) {
+      return [cell];
+    }
+    switch (direction) {
+      case MergeCellsOperationType.MERGE_CELL_UP:
+        return [adjacent, cell];
+      case MergeCellsOperationType.MERGE_CELL_DOWN:
+        return [cell, adjacent];
+      case MergeCellsOperationType.MERGE_CELL_LEFT:
+        return [adjacent, cell];
+      default:
+        return [cell, adjacent];
+    }
+  }
+  /**
+   * Handle the merge cells operation by creating and applying a MergeCellsAction.
+   *
+   * @param {Array<RTETableCellBlock | RTETableHeadCellBlock>} mergeCells - The cells to merge.
+   * @param {MergeCellsOperationType} direction - The merge cell direction.
+   */
+  handleMergeCells(mergeCells, direction) {
+    if (mergeCells.length < 2) {
+      return;
+    }
+    const rectInfo = getRectangularBounds(mergeCells);
+    const { minRow, maxRow, minCol, maxCol, targetCell } = rectInfo;
+    const colSpan = maxCol - minCol + 1;
+    const rowSpan = maxRow - minRow + 1;
+    const action = new MergeCellsAction(targetCell, mergeCells, colSpan, rowSpan, direction);
+    this.applyActionOnTable(action, targetCell);
+  }
+  /**
+   * Apply the specified action on the table containing the selected cell.
+   *
+   * @param {MergeCellsAction} action - The action to apply.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} selectedCell - The selected table cell.
+   */
+  applyActionOnTable(action, selectedCell) {
+    const table = getParentBlockByType(selectedCell, RTETableBlock);
+    if (table) {
+      table.apply(action);
+    }
+  }
+}