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

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotation-handler/table-annotation-handler-base.js

@@ -1,4 +1,5 @@
 import { AnnotationGeneratorStrategyAbstract } from '../../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/annotation-generator-strategy.abstract';
+import { RTETableColorManager } from '../utils/table-color-manager';
 /**
  * Base class for table annotation handlers with common extraction methods.
  */
@@ -11,7 +12,7 @@ export class TableAnnotationHandlerBase extends AnnotationGeneratorStrategyAbstr
    */
   getBackgroundColor(element) {
     if (element.style.backgroundColor) {
-      return element.style.backgroundColor;
+      return RTETableColorManager.getColorKey(element.style.backgroundColor);
     }
     return null;
   }
@@ -23,37 +24,15 @@ export class TableAnnotationHandlerBase extends AnnotationGeneratorStrategyAbstr
    */
   getBorder(element) {
     const style = element.style;
-    // Check if border is defined
-    if (style.border) {
-      return this.parseBorderString(style.border);
-    }
     // Check individual border properties
-    const borderStyle = style.borderStyle || style.borderTopStyle;
-    const borderWidth = style.borderWidth || style.borderTopWidth;
-    const borderColor = style.borderColor || style.borderTopColor;
-    if (borderStyle && borderWidth && borderColor) {
-      return {
-        style: borderStyle,
-        width: borderWidth,
-        color: borderColor,
-      };
-    }
-    return null;
-  }
-  /**
-   * Parse border string into structured border type.
-   *
-   * @param {string} borderStr - Border CSS string.
-   * @returns {Nullable<VegaRTETableBorderType>} Parsed border properties.
-   */
-  parseBorderString(borderStr) {
-    // Expected format: "style width color" (e.g., "solid 1px #ddd")
-    const parts = borderStr.trim().split(/\s+/);
-    if (parts.length >= 3) {
+    const borderStyle = style.borderStyle;
+    const borderWidth = style.borderWidth;
+    const borderColor = style.borderColor;
+    if (borderColor || borderStyle || borderWidth) {
       return {
-        style: parts[0],
-        width: parts[1],
-        color: parts.slice(2).join(' '), // Handle colors with spaces like "rgb(0, 0, 0)"
+        style: borderStyle === 'initial' ? '' : borderStyle,
+        width: borderWidth === 'initial' ? '' : borderWidth,
+        color: RTETableColorManager.getColorKey(borderColor === 'initial' ? '' : borderColor),
       };
     }
     return null;

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotation-handler/table-cell-annotation-handler.js

@@ -25,11 +25,37 @@ export class TableCellAnnotationHandler extends TableAnnotationHandlerBase {
       height: this.getHeight(element),
       textAlign: this.getTextAlign(element),
       verticalAlign: this.getVerticalAlign(element),
+      minWidth: this.getMinWidth(element),
+      boxSizing: this.getBoxSizing(element),
     });
     return Object.keys(cellAnnotation).length > 0
       ? { tableCell: cellAnnotation }
       : {};
   }
+  /**
+   * Extract minimum width from element.
+   *
+   * @param {HTMLElement} element - Table cell element.
+   * @returns {Nullable<string>} Minimum width value.
+   */
+  getMinWidth(element) {
+    if (element.style.minWidth) {
+      return element.style.minWidth;
+    }
+    return null;
+  }
+  /**
+   * Extract box sizing from element.
+   *
+   * @param {HTMLElement} element - Table cell element.
+   * @returns {Nullable<string>} Box sizing value.
+   */
+  getBoxSizing(element) {
+    if (element.style.boxSizing) {
+      return element.style.boxSizing;
+    }
+    return null;
+  }
   /**
    * Extract padding from element.
    *

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotations/table-annotation.js

@@ -1,29 +1,39 @@
 import { cleanObject } from '../../../../../utils/object';
 import { BlockAnnotation } from '../../../dto/annotations/block-annotation.abstract';
+import { RTETableColorAnnotation } from './table-color-annotation';
 export var RTETableExtensionAnnotationTypeEnum;
 (function (RTETableExtensionAnnotationTypeEnum) {
   RTETableExtensionAnnotationTypeEnum["TABLE"] = "EXTENSION_TABLE";
   RTETableExtensionAnnotationTypeEnum["CELL"] = "EXTENSION_TABLE_CELL";
   RTETableExtensionAnnotationTypeEnum["CAPTION"] = "EXTENSION_TABLE_CAPTION";
+  RTETableExtensionAnnotationTypeEnum["COLOR"] = "EXTENSION_TABLE_COLOR";
 })(RTETableExtensionAnnotationTypeEnum || (RTETableExtensionAnnotationTypeEnum = {}));
 /**
  * Class representing a table annotation in the rich text editor.
  */
 export class RTETableAnnotation extends BlockAnnotation {
-  constructor({ backgroundColor, border, width, height, alignment = 'center', } = {}) {
+  constructor({ backgroundColor, border, width, height, alignment, borderCollapse } = {}, useInternalStyle = true) {
     super();
     this.type = RTETableExtensionAnnotationTypeEnum.TABLE;
+    this.useInternalStyle = useInternalStyle;
     this.backgroundColor = backgroundColor;
     this.border = border;
     this.width = width;
     this.height = height;
-    this.alignment = alignment;
+    this.alignment =
+      useInternalStyle && alignment === undefined ? RTETableAnnotation.DEFAULT_ALIGNMENT : alignment;
+    this.backgroundColorAnnotation = new RTETableColorAnnotation(backgroundColor);
+    this.borderColorAnnotation = new RTETableColorAnnotation(border === null || border === void 0 ? void 0 : border.color);
+    this.borderCollapse =
+      useInternalStyle && borderCollapse === undefined
+        ? RTETableAnnotation.DEFAULT_BORDER_COLLAPSE
+        : borderCollapse;
   }
   /**
    * @inheritDoc
    */
-  static from(value) {
-    return [RTETableExtensionAnnotationTypeEnum.TABLE, new RTETableAnnotation(value)];
+  static from(value, useInternalStyle = true) {
+    return [RTETableExtensionAnnotationTypeEnum.TABLE, new RTETableAnnotation(value, useInternalStyle)];
   }
   /**
    * Generates the CSS border string from the border properties.
@@ -34,7 +44,7 @@ export class RTETableAnnotation extends BlockAnnotation {
     if (!this.border) {
       return null;
     }
-    return `${this.border.style} ${this.border.width} ${this.border.color}`.trim();
+    return `${this.border.style} ${this.border.width} ${this.borderColorAnnotation.renderStyle().color}`.trim();
   }
   /**
    * @inheritDoc
@@ -46,7 +56,8 @@ export class RTETableAnnotation extends BlockAnnotation {
       width: this.width,
       height: this.height,
       alignment: this.alignment,
-    });
+      borderCollapse: this.borderCollapse,
+    }, this.useInternalStyle);
   }
   /**
    * @inheritDoc
@@ -59,6 +70,7 @@ export class RTETableAnnotation extends BlockAnnotation {
         width: this.width,
         height: this.height,
         alignment: this.alignment,
+        borderCollapse: this.borderCollapse,
       }),
     };
   }
@@ -66,11 +78,10 @@ export class RTETableAnnotation extends BlockAnnotation {
    * @inheritDoc
    */
   renderStyle() {
-    const defaultStyles = {
-      borderCollapse: 'collapse',
-    };
-    const tableStyles = Object.assign({ backgroundColor: this.backgroundColor, border: this.borderStr, width: this.width, height: this.height }, this.renderAlignmentStyle());
-    return cleanObject(Object.assign(Object.assign({}, defaultStyles), tableStyles));
+    const backgroundColor = this.backgroundColorAnnotation.renderStyle().color;
+    const tableStyles = Object.assign({ border: this.borderStr, width: this.width, height: this.height, borderCollapse: this.borderCollapse }, this.renderAlignmentStyle());
+    backgroundColor && (tableStyles.backgroundColor = backgroundColor);
+    return cleanObject(tableStyles);
   }
   /**
    * @inheritDoc
@@ -84,8 +95,12 @@ export class RTETableAnnotation extends BlockAnnotation {
    * @returns {Record<string, string>} The alignment styles.
    */
   renderAlignmentStyle() {
+    if (!this.alignment)
+      return {};
     return {
       margin: this.alignment === 'center' ? '0 auto' : this.alignment === 'left' ? '0' : '0 0 0 auto',
     };
   }
 }
+RTETableAnnotation.DEFAULT_BORDER_COLLAPSE = 'collapse';
+RTETableAnnotation.DEFAULT_ALIGNMENT = 'center';

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotations/table-cell-annotation.js

@@ -1,26 +1,49 @@
 import { cleanObject } from '../../../../../utils/object';
 import { RTETableExtensionAnnotationTypeEnum } from './table-annotation';
 import { BlockAnnotation } from '../../../dto/annotations/block-annotation.abstract';
+import { RTETableColorAnnotation } from './table-color-annotation';
 /**
  * Class representing a table cell annotation in the rich text editor.
  */
 export 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, } = {}) {
+  constructor({ backgroundColor, padding, border, width, height, textAlign, verticalAlign, minWidth, boxSizing, } = {}, useInternalStyle = true) {
     super();
     this.type = RTETableExtensionAnnotationTypeEnum.CELL;
+    this.useInternalStyle = useInternalStyle;
     this.backgroundColor = backgroundColor;
-    this.padding = padding;
-    this.border = border;
     this.width = width;
     this.height = height;
-    this.textAlign = textAlign;
-    this.verticalAlign = verticalAlign;
+    this.backgroundColorAnnotation = new RTETableColorAnnotation(backgroundColor);
+    this.borderColorAnnotation = new RTETableColorAnnotation(border === null || border === void 0 ? void 0 : border.color);
+    this.padding =
+      useInternalStyle && padding === undefined ? RTETableCellAnnotation.DEFAULT_PADDING : padding;
+    this.border =
+      useInternalStyle && border === undefined ? RTETableCellAnnotation.DEFAULT_BORDER : border;
+    this.textAlign =
+      useInternalStyle && textAlign === undefined
+        ? RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN
+        : textAlign;
+    this.verticalAlign =
+      useInternalStyle && verticalAlign === undefined
+        ? RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN
+        : verticalAlign;
+    this.minWidth =
+      useInternalStyle && minWidth === undefined
+        ? RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH
+        : minWidth;
+    this.boxSizing =
+      useInternalStyle && boxSizing === undefined
+        ? RTETableCellAnnotation.DEFAULT_BOX_SIZING
+        : boxSizing;
   }
   /**
    * @inheritDoc
    */
-  static from(cellAnnotation) {
-    return [RTETableExtensionAnnotationTypeEnum.CELL, new RTETableCellAnnotation(cellAnnotation)];
+  static from(cellAnnotation, useInternalStyle) {
+    return [
+      RTETableExtensionAnnotationTypeEnum.CELL,
+      new RTETableCellAnnotation(cellAnnotation, useInternalStyle),
+    ];
   }
   /**
    * Generates the CSS border string from the border properties.
@@ -30,7 +53,8 @@ export class RTETableCellAnnotation extends BlockAnnotation {
   get borderStr() {
     if (!this.border)
       return null;
-    return `${this.border.style} ${this.border.width} ${this.border.color}`;
+    return `${this.border.style} ${this.border.width} ${this.borderColorAnnotation.renderStyle().color ||
+      RTETableCellAnnotation.DEFAULT_BORDER.color}`;
   }
   /**
    * @inheritDoc
@@ -44,7 +68,9 @@ export class RTETableCellAnnotation extends BlockAnnotation {
       height: this.height,
       textAlign: this.textAlign,
       verticalAlign: this.verticalAlign,
-    });
+      minWidth: this.minWidth,
+      boxSizing: this.boxSizing,
+    }, this.useInternalStyle);
   }
   /**
    * @inheritDoc
@@ -59,6 +85,8 @@ export class RTETableCellAnnotation extends BlockAnnotation {
         height: this.height,
         textAlign: this.textAlign,
         verticalAlign: this.verticalAlign,
+        minWidth: this.minWidth,
+        boxSizing: this.boxSizing,
       }),
     };
   }
@@ -66,19 +94,24 @@ export class RTETableCellAnnotation extends BlockAnnotation {
    * @inheritDoc
    */
   renderStyle(options) {
+    const backgroundColor = this.backgroundColorAnnotation.renderStyle().color;
     const style = {
-      backgroundColor: this.backgroundColor,
       padding: this.padding,
       border: this.borderStr,
       width: this.width,
       height: this.height,
       textAlign: this.textAlign,
       verticalAlign: this.verticalAlign,
+      minWidth: this.minWidth,
+      boxSizing: this.boxSizing,
     };
+    if (backgroundColor) {
+      style.backgroundColor = backgroundColor;
+    }
     if (!(options === null || options === void 0 ? void 0 : options.standalone)) {
       return cleanObject(this.removeDefaultValues(style));
     }
-    return cleanObject(Object.assign(Object.assign({}, style), { minWidth: RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH }));
+    return cleanObject(style);
   }
   /**
    * @inheritDoc
@@ -107,6 +140,12 @@ export class RTETableCellAnnotation extends BlockAnnotation {
     if (cleanedStyle.verticalAlign === RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN) {
       delete cleanedStyle.verticalAlign;
     }
+    if (cleanedStyle.minWidth === RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH) {
+      delete cleanedStyle.minWidth;
+    }
+    if (cleanedStyle.boxSizing === RTETableCellAnnotation.DEFAULT_BOX_SIZING) {
+      delete cleanedStyle.boxSizing;
+    }
     return cleanedStyle;
   }
 }
@@ -118,4 +157,5 @@ RTETableCellAnnotation.DEFAULT_BORDER = {
 };
 RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN = 'left';
 RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN = 'middle';
-RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH = '30px';
+RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH = '55px';
+RTETableCellAnnotation.DEFAULT_BOX_SIZING = 'border-box';

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotations/table-color-annotation.js

@@ -0,0 +1,66 @@
+import { VegaInternalThemeManager } from '../../../../../helpers/theme/internal-theme-manager';
+import { BlockAnnotation } from '../../../dto/annotations/block-annotation.abstract';
+import { RTETableColorManager } from '../utils/table-color-manager';
+import { RTETableExtensionAnnotationTypeEnum } from './table-annotation';
+/**
+ * Class representing a table color annotation in the rich text editor.
+ */
+export class RTETableColorAnnotation extends BlockAnnotation {
+  constructor(colorKey) {
+    super();
+    this.type = RTETableExtensionAnnotationTypeEnum.COLOR;
+    if (colorKey) {
+      this.color = this.formatColor(colorKey);
+    }
+  }
+  /**
+   * Render the style for the annotation
+   *
+   * @returns {AnnotationStyle} The style object containing the color
+   */
+  renderStyle() {
+    const color = this.color
+      ? VegaInternalThemeManager.isDarkMode()
+        ? this.color.dark
+        : this.color.light
+      : '';
+    return { color };
+  }
+  /**
+   * Render the CSS class for the annotation
+   *
+   * @returns {Nullable<string>} Always returns null as no CSS class is used
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * Convert the annotation to a JSON representation
+   *
+   * @returns {Record<string, string>} A JSON object containing the color key
+   */
+  toJSON() {
+    var _a;
+    return {
+      color: ((_a = this.color) === null || _a === void 0 ? void 0 : _a.key) || '',
+    };
+  }
+  /**
+   * Clone the current annotation
+   *
+   * @returns {BlockAnnotation<RTETableExtensionAnnotationTypeEnum.COLOR>} A new instance of RTETableColorAnnotation with the same color key
+   */
+  clone() {
+    var _a;
+    return new RTETableColorAnnotation((_a = this.color) === null || _a === void 0 ? void 0 : _a.key);
+  }
+  /**
+   * format table color
+   *
+   * @param {string} colorKey - table color
+   * @returns {Nullable<VegaRTEColorSchema>} - VegaRTEColorSchema
+   */
+  formatColor(colorKey) {
+    return RTETableColorManager.getTableColors().find((item) => item.key === colorKey);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotations/table-head-cell-annotation.js

@@ -5,14 +5,17 @@ import { RTETableCellAnnotation } from './table-cell-annotation';
  * Class representing a table head cell annotation in the rich text editor.
  */
 export class RTETableHeadCellAnnotation extends RTETableCellAnnotation {
-  constructor(annotation = {}) {
-    super(annotation);
+  constructor(annotation = {}, useInternalStyle = true) {
+    super(annotation, useInternalStyle);
   }
   /**
    * @inheritDoc
    */
-  static from(cellAnnotation) {
-    return [RTETableExtensionAnnotationTypeEnum.CELL, new RTETableHeadCellAnnotation(cellAnnotation)];
+  static from(cellAnnotation, useInternalStyle) {
+    return [
+      RTETableExtensionAnnotationTypeEnum.CELL,
+      new RTETableHeadCellAnnotation(cellAnnotation, useInternalStyle),
+    ];
   }
   /**
    * @inheritDoc
@@ -26,7 +29,9 @@ export class RTETableHeadCellAnnotation extends RTETableCellAnnotation {
       height: this.height,
       textAlign: this.textAlign,
       verticalAlign: this.verticalAlign,
-    });
+      minWidth: this.minWidth,
+      boxSizing: this.boxSizing,
+    }, this.useInternalStyle);
   }
   /**
    * @inheritDoc
@@ -34,7 +39,7 @@ export class RTETableHeadCellAnnotation extends RTETableCellAnnotation {
   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 }));
+    return cleanObject(Object.assign(Object.assign({}, styles), { backgroundColor: (_a = styles.backgroundColor) !== null && _a !== void 0 ? _a : RTETableHeadCellAnnotation.DEFAULT_BACKGROUND_COLOR }));
   }
 }
 RTETableHeadCellAnnotation.DEFAULT_BACKGROUND_COLOR = '#f2f2f2';

package/dist/collection/components/vega-rich-text-editor/extensions/table/constants/styles.constants.js

@@ -10,12 +10,12 @@ export const RTE_TABLE_BORDER_STYLES = [
   'outset',
 ];
 export 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' },
+  { key: 'white', dark: '#04041C', light: '#FCFCFC' },
+  { key: 'red', dark: '#AA091C', light: '#FF4C61' },
+  { key: 'orange', dark: '#974502', light: '#FDAB68' },
+  { key: 'yellow', dark: '#735C00', light: '#FFDC4C' },
+  { key: 'green', dark: '#2E6D18', light: '#7BDA58' },
+  { key: 'teal', dark: '#287171', light: '#7BD1D1' },
+  { key: 'gray', dark: '#595959', light: '#999999' },
+  { key: 'black', dark: '#FCFCFC', light: '#04041C' },
 ];

package/dist/collection/components/vega-rich-text-editor/extensions/table/dto/table-block.js

@@ -23,7 +23,7 @@ export class RTETableBlock extends RTEBlock {
     super.convertAnnotationsToMap(tableBlock.annotationMap, Object.assign({}, block.annotations));
     tableBlock.children = super.generateBlockChildren(block.children, options, tableBlock);
     if ((_a = block.annotations) === null || _a === void 0 ? void 0 : _a.table) {
-      tableBlock.annotationMap.set(...RTETableAnnotation.from(block.annotations.table));
+      tableBlock.annotationMap.set(...RTETableAnnotation.from(block.annotations.table, options === null || options === void 0 ? void 0 : options.autoMatchFormat));
     }
     return tableBlock;
   }

package/dist/collection/components/vega-rich-text-editor/extensions/table/dto/table-cell-block.js

@@ -22,7 +22,7 @@ export class RTETableCellBlock extends RTEBlock {
     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.annotationMap.set(...RTETableCellAnnotation.from(block.annotations.tableCell, options === null || options === void 0 ? void 0 : options.autoMatchFormat));
     }
     tableCellBlock.children = super.generateBlockChildren(block.children, options, tableCellBlock);
     return tableCellBlock;
@@ -49,6 +49,24 @@ export class RTETableCellBlock extends RTEBlock {
   isNotEmpty() {
     return this.children.length > 0;
   }
+  /**
+   * Get the rowSpan of the table cell
+   *
+   * @returns {number} - rowSpan value
+   */
+  get rowSpan() {
+    const rowSpan = this.getCustomAttributeByName('rowspan');
+    return !isNaN(Number(rowSpan)) ? Math.max(Number(rowSpan), 1) : 1;
+  }
+  /**
+   * Get the colSpan of the table cell
+   *
+   * @returns {number} - colSpan value
+   */
+  get colSpan() {
+    const colSpan = this.getCustomAttributeByName('colspan');
+    return !isNaN(Number(colSpan)) ? Math.max(Number(colSpan), 1) : 1;
+  }
   /**
    * @inheritDoc
    */
@@ -63,4 +81,17 @@ export class RTETableCellBlock extends RTEBlock {
   toJSON() {
     return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
   }
+  /**
+   * Get custom attribute by name
+   *
+   * @param {string} attrName - attribute name
+   * @returns {Nullable<string>} - attribute value
+   */
+  getCustomAttributeByName(attrName) {
+    const customAttrAnnotation = this.getCustomAttributesAnnotation();
+    if (customAttrAnnotation) {
+      const customAttributes = customAttrAnnotation.toJSON()['customAttribute'] || {};
+      return customAttributes[attrName];
+    }
+  }
 }

package/dist/collection/components/vega-rich-text-editor/extensions/table/dto/table-head-cell-block.js

@@ -21,7 +21,7 @@ export class RTETableHeadCellBlock extends RTETableCellBlock {
     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.annotationMap.set(...RTETableHeadCellAnnotation.from(block.annotations.tableCell, options === null || options === void 0 ? void 0 : options.autoMatchFormat));
     }
     headCellBlock.children = super.generateBlockChildren(block.children, options, headCellBlock);
     return headCellBlock;

package/dist/collection/components/vega-rich-text-editor/extensions/table/element-to-dto-strategies/td-to-table-cell-block-strategy.js

@@ -49,7 +49,7 @@ export class TdToTableCellBlockStrategy extends BlockToRTEBlockStrategyAbstract
     return RTETableCellBlock.from({
       id: generateUUID(),
       type: 'table-cell',
-      annotations: htmlElementToAnnotationGenerator.generate(RTETableHeadCellBlock, element),
+      annotations: htmlElementToAnnotationGenerator.generate(RTETableHeadCellBlock, element, options),
       children: defaultChildren,
     }, options);
   }

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

@@ -29,7 +29,9 @@ export class RTETableCellRenderer extends VegaRTEExtensionRenderer {
    */
   renderByCellType(h, renderData, rteContext, elementType) {
     var _a;
-    return h(elementType, Object.assign(Object.assign(Object.assign({ key: renderData.id, ref: this.useRef(renderData) }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(rteContext), class: renderData.getClasses() }), (rteContext.editable ? this.onSelectionListeners(renderData) : undefined)));
+    return h(elementType, Object.assign(Object.assign(Object.assign({ key: renderData.id, 
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: this.useRef(renderData) }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(rteContext), class: renderData.getClasses() }), (rteContext.editable ? this.onSelectionListeners(renderData) : undefined)));
   }
   /**
    * Returns the mouse event listeners for selection handling.

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

@@ -7,6 +7,7 @@ import { TableDynamicPopoverRenderer } from './table-dynamic-popover-renderer';
 import changeManager from '../../../../../helpers/change-manager/change-manager';
 import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalRTEExtensionTableCellsSelectionAnchor } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { RTETableColorManager } from '../utils/table-color-manager';
 /**
  * Renderer for the RTETableBlock.
  */
@@ -21,7 +22,7 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
    */
   doRender(h, renderData, rteContext) {
     const tableSettingPopoverRenderer = new TableSettingPopoverRenderer();
-    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer(this.tableColorSchema);
+    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer(RTETableColorManager.getTableColors());
     this.injectExtensionContextToRenderers(this.extensionContext, [
       tableDynamicPopoverRenderer,
       tableSettingPopoverRenderer,
@@ -81,14 +82,6 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
     this.extensionContext = context;
     this.injectExtensionContextToRenderers(context, this.popoverRenders);
   }
-  /**
-   * Updates the table color schema.
-   *
-   * @param {RTETableColorSchema[]} colors - The new table color schema.
-   */
-  updateTableColorSchema(colors) {
-    this.tableColorSchema = colors;
-  }
   /**
    * Renders the table element.
    *

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

@@ -7,6 +7,8 @@ import { CaptionOperationEventHandler } from '../setting-event-handlers/caption-
 import { ColumnOperationEventHandler } from '../setting-event-handlers/column-operation';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { MergeCellsOperationEventHandler } from '../setting-event-handlers/merge-cells-operation';
+import { SplitCellOperationEventHandler } from '../setting-event-handlers/split-cell-operation';
 /**
  * Centralizes the popover rendering and interaction logic for table settings.
  */
@@ -16,6 +18,8 @@ export class TableSettingPopoverRenderer {
       new RowOperationEventHandler(),
       new CaptionOperationEventHandler(),
       new ColumnOperationEventHandler(),
+      new MergeCellsOperationEventHandler(),
+      new SplitCellOperationEventHandler(),
     ];
     /**
      * Show table setting popover when table is clicked.