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

package/dist/cjs/vega-rich-text-table-properties_3.cjs.entry.js

@@ -9,12 +9,14 @@ const translationSlimmer = require('./translation-slimmer-f0ebe710.js');
 const component = require('./component-1e352960.js');
 const internalIconManager = require('./internal-icon-manager-32f9ed63.js');
 const alignLeft = require('./align-left-4a76df69.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-536d29fc.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-1c8f7880.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-aca87dac.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-b5e71bf6.js');
 const accessibility = require('./accessibility-bfa227f6.js');
-const styles_constants = require('./styles.constants-3aff0b56.js');
+const splitCellOperation = require('./split-cell-operation-9930fde8.js');
+const darkModeStyleController = require('./dark-mode-style-controller-c21172aa.js');
+const darkModeStateControllerSlimmer = require('./dark-mode-state-controller-slimmer-8a87ec08.js');
 const ui = require('./ui-9e181079.js');
-const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-15e65357.js');
+const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-0d45f944.js');
 const chevronDown = require('./chevron-down-9847bf78.js');
 const vegaInternalEventId = require('./vega-internal-event-id-73334b4b.js');
 const array = require('./array-249289f2.js');
@@ -23,24 +25,23 @@ require('./change-manager-a297e4d2.js');
 require('./static-subject-title-5829a298.js');
 require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./internal-vega-event-manager-d587a33c.js');
+require('./internal-vega-event-manager-6befeb34.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-ce2162c8.js');
 require('./index-4d7bce1a.js');
 require('./_commonjsHelpers-537d719a.js');
 require('./observer-f49483e8.js');
-require('./code-block-22ee2550.js');
+require('./code-block-d9001f03.js');
 require('./string-39438062.js');
-require('./type-guard-69d2cf01.js');
+require('./type-guard-a0f026d8.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32e69595.js');
 require('./typography-4560e7f1.js');
-require('./dark-mode-style-controller-c21172aa.js');
+require('./object-e2e28e3d.js');
+require('./content-state-466f277f.js');
 require('./vega-nonce-manager-df69d3ed.js');
 require('./try-get-document-c0ebd39a.js');
-require('./object-e2e28e3d.js');
-require('./content-state-0be6fda3.js');
-require('./keyboard-manager-d8adb0ed.js');
+require('./keyboard-manager-3dea6b28.js');
 require('./number-4816603d.js');
 
 const AlignTop = {
@@ -67,7 +68,7 @@ const ObjectsAlignRight = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill='currentColor' d="M512 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 464c0 13.3 10.7 24 24 24s24-10.7 24-24l0-464zM336 176L48 176l0-64 288 0 0 64zm48-64c0-26.5-21.5-48-48-48L48 64C21.5 64 0 85.5 0 112l0 64c0 26.5 21.5 48 48 48l288 0c26.5 0 48-21.5 48-48l0-64zM336 400l-160 0 0-64 160 0 0 64zm48-64c0-26.5-21.5-48-48-48l-160 0c-26.5 0-48 21.5-48 48l0 64c0 26.5 21.5 48 48 48l160 0c26.5 0 48-21.5 48-48l0-64z"/></svg>`,
 };
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -90,8 +91,9 @@ class VegaRichTextTablePropertiesRenderer extends globalSlimmerRegistry.VegaSlim
       this.formTouched = false;
     };
   }
-  watchDefaultValueChange(newValue) {
+  initialFormState(newValue) {
     this.resetTouchedState();
+    this.resetColorRelatedFields(newValue);
     this.setFormFieldValues(newValue);
   }
   getFormRef() {
@@ -120,6 +122,23 @@ class VegaRichTextTablePropertiesRenderer extends globalSlimmerRegistry.VegaSlim
       void this.formRef.reset(formValues);
     }
   }
+  /**
+   * Handle color related fields before setting form value to ensure change event is triggered.
+   *
+   * @param {RTETablePropertiesType} formValue - The form value to be set.
+   */
+  resetColorRelatedFields(formValue) {
+    if (this.formRef) {
+      if (formValue.borderColor) {
+        const borderColorInput = this.formRef.querySelector('[data-vega-form="borderColor"]');
+        borderColorInput && (borderColorInput.value = '');
+      }
+      if (formValue.backgroundColor) {
+        const backgroundColorInput = this.formRef.querySelector('[data-vega-form="backgroundColor"]');
+        backgroundColorInput && (backgroundColorInput.value = '');
+      }
+    }
+  }
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({
@@ -135,20 +154,20 @@ class VegaRichTextTablePropertiesRenderer extends globalSlimmerRegistry.VegaSlim
     'objects-align-right': ObjectsAlignRight,
   });
 })();
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTablePropertiesRenderer.prototype, "type", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTablePropertiesRenderer.prototype, "tableFormRenderer", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTablePropertiesRenderer.prototype, "cellFormRenderer", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('watchDefaultValueChange')
-], VegaRichTextTablePropertiesRenderer.prototype, "watchDefaultValueChange", null);
+], VegaRichTextTablePropertiesRenderer.prototype, "initialFormState", null);
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -163,19 +182,50 @@ class TableColorController extends globalSlimmerRegistry.VegaSlimmer {
    *
    * @returns {string[]} An array of light color strings.
    */
-  getLightColors() {
+  getColors() {
     let result = [];
     if (this.colors) {
-      result = this.colors.map((colorSchema) => colorSchema.light);
+      result = this.colors.map((colorSchema) => this.isInDarkMode ? colorSchema.dark : colorSchema.light);
+    }
+    return result;
+  }
+  /**
+   * Returns the color key corresponding to the provided color value.
+   *
+   * @param {string} color - The color value to find the key for.
+   * @returns {string} The key of the color schema that matches the provided color value.
+   */
+  getColorKey(color) {
+    let result = '';
+    if (this.colors) {
+      const colorSchema = this.colors.find((item) => this.isInDarkMode ? item.dark === color : item.light === color);
+      result = colorSchema ? colorSchema.key : '';
+    }
+    return result;
+  }
+  /**
+   * Returns the color value corresponding to the provided color key.
+   *
+   * @param {string} colorKey - The color key to find the value for.
+   * @returns {string} The value of the color schema that matches the provided color key.
+   */
+  getColorByKey(colorKey) {
+    let result = '';
+    if (this.colors) {
+      const colorSchema = this.colors.find((item) => item.key === colorKey);
+      result = colorSchema ? (this.isInDarkMode ? colorSchema.dark : colorSchema.light) : '';
     }
     return result;
   }
 }
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], TableColorController.prototype, "colors", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], TableColorController.prototype, "isInDarkMode", void 0);
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -218,6 +268,7 @@ class VegaRichTextTablePropertiesBaseFormFieldRenderer extends globalSlimmerRegi
             }
           }
           this.updateBorderDisplayColor(input.host);
+          this.updateBackgroundDisplayColor(input.host);
         }
       });
       if (el && el.tagName === 'VEGA-INPUT') {
@@ -271,13 +322,29 @@ class VegaRichTextTablePropertiesBaseFormFieldRenderer extends globalSlimmerRegi
     this.applyBorderColor = (btn) => {
       domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(btn, domNodeSubjectObserverFactory.VegaClick, () => {
         if (this.borderColorPickerRef && this.formRef) {
-          void this.formRef.setValue({ borderColor: this.borderColorPickerRef.value });
+          void this.formRef.setValue({
+            borderColor: this.controller.getColorKey(this.borderColorPickerRef.value),
+          });
         }
         if (this.colorPickerPopoverRef) {
           void this.colorPickerPopoverRef.hide();
         }
       });
     };
+    /**
+     * Handle background color picker change event.
+     *
+     * @param {HTMLElement} el - The background color picker element.
+     */
+    this.handleBackgroundColorPickerChange = (el) => {
+      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, domNodeSubjectObserverFactory.VegaChange, (input) => {
+        const colorValue = input.detail;
+        const colorKey = this.controller.getColorKey(colorValue);
+        if (this.formRef) {
+          void this.formRef.setValue({ backgroundColor: colorKey });
+        }
+      });
+    };
     /**
      * Clear background color value.
      *
@@ -307,7 +374,7 @@ class VegaRichTextTablePropertiesBaseFormFieldRenderer extends globalSlimmerRegi
   renderBorderFields() {
     return (index.h("vega-flex", { gap: "size-16", direction: "row", alignItems: "center" },
       index.h("vega-input-select", { "data-vega-form": "borderStyle", label: "Border Style", placeholder: "Select style", vegaDropdownProps: { searchable: false, matchTargetWidth: false }, source: VegaRichTextTablePropertiesBaseFormFieldRenderer.TABLE_BORDER_STYLES, ref: this.handleFormChange }),
-      index.h("vega-input", { ref: this.handleFormChange, "data-vega-form": "borderWidth", label: "Width", validationRules: this.dimensionFieldValidationRule }),
+      index.h("vega-input", { ref: this.handleFormChange, "data-vega-form": "borderWidth", label: "Weight", validationRules: this.dimensionFieldValidationRule }),
       this.renderBorderColorPicker()));
   }
   /**
@@ -321,7 +388,8 @@ class VegaRichTextTablePropertiesBaseFormFieldRenderer extends globalSlimmerRegi
       index.h("div", { class: "color-picker-container" },
         index.h("span", { role: "button", tabIndex: 0, "aria-label": "Clear background color", onClick: this.clearBackgroundColor, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick(), class: "color-none" }),
         index.h("vega-divider", { direction: "vertical" }),
-        index.h("vega-color-picker", { isInline: true, ref: this.handleFormChange, "data-vega-form": "backgroundColor", colors: this.controller.getLightColors() }))));
+        index.h("vega-color-picker", { isInline: true, ref: this.handleBackgroundColorPickerChange, colors: this.controller.getColors() }),
+        index.h("vega-input", { ref: this.handleFormChange, type: "hidden", "data-vega-form": "backgroundColor" }))));
   }
   /**
    * Render style dimension fields.
@@ -365,7 +433,7 @@ class VegaRichTextTablePropertiesBaseFormFieldRenderer extends globalSlimmerRegi
           domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, domNodeSubjectObserverFactory.VegaPopoverShow, async () => {
             if (this.formRef && this.borderColorPickerRef) {
               const formValue = await this.formRef.getValue();
-              this.borderColorPickerRef.value = formValue['borderColor'];
+              this.borderColorPickerRef.value = this.controller.getColorByKey(formValue['borderColor']);
             }
           });
         }, trigger: "click" },
@@ -375,7 +443,7 @@ class VegaRichTextTablePropertiesBaseFormFieldRenderer extends globalSlimmerRegi
         index.h("vega-box", { slot: "popover" },
           index.h("vega-color-picker", { ref: (el) => {
               this.borderColorPickerRef = el;
-            }, isInline: true, colors: this.controller.getLightColors() }),
+            }, isInline: true, colors: this.controller.getColors() }),
           index.h("vega-flex", { margin: { top: 'size-16' }, justifyContent: "end", gap: "size-16" },
             index.h("vega-button-link", { ref: this.clearBorderColor }, "Clear"),
             index.h("vega-button-link", { ref: this.applyBorderColor }, "Apply"))))));
@@ -387,7 +455,8 @@ class VegaRichTextTablePropertiesBaseFormFieldRenderer extends globalSlimmerRegi
    */
   updateBorderDisplayColor(colorPickerRef) {
     if (colorPickerRef && colorPickerRef.dataset.vegaForm === 'borderColor') {
-      const selectedColor = colorPickerRef.value;
+      const selectedColorKey = colorPickerRef.value;
+      const selectedColor = this.controller.getColorByKey(selectedColorKey);
       const displayColorDiv = colorPickerRef.nextElementSibling;
       displayColorDiv.style.backgroundColor = selectedColor;
       if (selectedColor) {
@@ -401,30 +470,43 @@ class VegaRichTextTablePropertiesBaseFormFieldRenderer extends globalSlimmerRegi
       }
     }
   }
+  /**
+   * Update the background color display when background color changes.
+   *
+   * @param {HTMLElement} colorInput - The background color field element.
+   */
+  updateBackgroundDisplayColor(colorInput) {
+    if (colorInput && colorInput.dataset.vegaForm === 'backgroundColor') {
+      const colorKey = colorInput.value;
+      const colorValue = this.controller.getColorByKey(colorKey);
+      const colorPicker = colorInput.previousElementSibling;
+      colorPicker.value = colorValue;
+    }
+  }
 }
-VegaRichTextTablePropertiesBaseFormFieldRenderer.TABLE_BORDER_STYLES = styles_constants.RTE_TABLE_BORDER_STYLES.map((style) => ({
+VegaRichTextTablePropertiesBaseFormFieldRenderer.TABLE_BORDER_STYLES = splitCellOperation.RTE_TABLE_BORDER_STYLES.map((style) => ({
   id: style,
   displayName: style.charAt(0).toUpperCase() + style.slice(1),
 }));
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "controller", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "defaultValue", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "renderer", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "styleMap", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "vegaChange", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "vegaCancel", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "vegaSave", void 0);
 
@@ -459,7 +541,7 @@ class VegaRichTextTablePropertiesFormFieldRenderer extends VegaRichTextTableProp
    */
   renderPropertiesFields() {
     return (index.h(index.Fragment, null,
-      index.h("vega-font", { variant: "font-h6", color: "text-black" }, "Table properties"),
+      index.h("vega-font", { variant: "font-h6", color: "text-primary" }, "Table properties"),
       index.h("vega-divider", { direction: "horizontal" }),
       this.renderBorderFields(),
       index.h("vega-divider", { direction: "horizontal" }),
@@ -483,7 +565,7 @@ class VegaRichTextTablePropertiesFormFieldRenderer extends VegaRichTextTableProp
   }
 }
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -535,7 +617,7 @@ class VegaRichTextCellPropertiesFormFieldRenderer extends VegaRichTextTablePrope
    */
   renderPropertiesFields() {
     return (index.h(index.Fragment, null,
-      index.h("vega-font", { variant: "font-h6", color: "text-black" }, "Cell properties"),
+      index.h("vega-font", { variant: "font-h6", color: "text-primary" }, "Cell properties"),
       index.h("vega-divider", { direction: "horizontal" }),
       super.renderBorderFields(),
       index.h("vega-divider", { direction: "horizontal" }),
@@ -581,13 +663,13 @@ class VegaRichTextCellPropertiesFormFieldRenderer extends VegaRichTextTablePrope
     this.changesNeedApply = {};
   }
 }
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentMethod('watchDefaultValueChange')
 ], VegaRichTextCellPropertiesFormFieldRenderer.prototype, "onDefaultValueChange", null);
 
-const vegaRichTextTablePropertiesCss = ":host{display:block;max-width:420px}:host .table-properties-form{display:flex;flex-direction:column;gap:16px}:host .color-picker-group{display:flex;gap:8px;flex-direction:column}:host .color-picker-group .color-picker-container{flex-shrink:0}:host .color-picker-group .display-color-placeholder{display:block;box-sizing:border-box;border-radius:4px;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));width:24px;height:24px}:host .color-picker-group .display-color-placeholder.color-none{box-sizing:content-box}:host .text-alignment-container>vega-font{display:block;margin-bottom:8px}:host .text-alignment-button-group button{display:flex;justify-content:center;align-items:center;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));padding-top:16px;padding-bottom:16px;padding-left:16px;padding-right:16px;position:relative;cursor:pointer;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}:host .text-alignment-button-group button:not(:first-of-type){margin-left:-1px}:host .text-alignment-button-group button:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host .text-alignment-button-group button:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host .text-alignment-button-group button:hover{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));z-index:1}:host .text-alignment-button-group button:active{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));z-index:1}:host .text-alignment-button-group vega-input[value=left]~.text-alignment-left,:host .text-alignment-button-group vega-input[value=center]~.text-alignment-center,:host .text-alignment-button-group vega-input[value=right]~.text-alignment-right,:host .text-alignment-button-group vega-input[value=justify]~.text-alignment-justify,:host .text-alignment-button-group vega-input[value=top]~.text-alignment-top,:host .text-alignment-button-group vega-input[value=middle]~.text-alignment-middle,:host .text-alignment-button-group vega-input[value=bottom]~.text-alignment-bottom{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));z-index:1}:host .action-buttons{text-align:right}:host .action-buttons vega-button-link{margin-left:24px}:host .background-color-group{display:flex;gap:8px;flex-direction:column}:host .color-picker-container{box-sizing:border-box;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;padding-left:12px;padding-right:12px;display:flex;gap:8px;align-items:center;padding-top:11px;padding-bottom:11px}:host .color-picker-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .color-picker-container:focus-within{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .color-picker-container vega-divider{height:24px !important}:host .color-picker-container .color-none{display:block;box-sizing:border-box;border-radius:4px;width:24px;height:24px;border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));overflow:hidden;cursor:pointer;position:relative}:host .color-picker-container .color-none:hover{box-shadow:0 0 0 4px rgba(230, 50, 87, 0.25)}:host .color-picker-container .color-none:before{content:\"\";position:absolute;border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));border-left-width:0px;border-right-width:0px;border-bottom-width:0px;top:0;left:-10px;width:32px;height:0;transform-origin:top right;transform:rotate(-45deg)}:host(.vega-hidden){display:none}";
+const vegaRichTextTablePropertiesCss = ":host{display:block;max-width:420px}:host .table-properties-form{display:flex;flex-direction:column;gap:16px}:host .color-picker-group{display:flex;gap:8px;flex-direction:column}:host .color-picker-group .color-picker-container{flex-shrink:0}:host .color-picker-group .display-color-placeholder{display:block;box-sizing:border-box;border-radius:4px;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));width:24px;height:24px}:host .color-picker-group .display-color-placeholder.color-none{box-sizing:content-box}:host .text-alignment-container>vega-font{display:block;margin-bottom:8px}:host .text-alignment-button-group button{display:flex;justify-content:center;align-items:center;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));padding-top:16px;padding-bottom:16px;padding-left:16px;padding-right:16px;position:relative;cursor:pointer;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1))}:host .text-alignment-button-group button:not(:first-of-type){margin-left:-1px}:host .text-alignment-button-group button:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host .text-alignment-button-group button:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host .text-alignment-button-group button:hover{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));z-index:1}:host .text-alignment-button-group button:active{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));z-index:1}:host .text-alignment-button-group vega-input[value=left]~.text-alignment-left,:host .text-alignment-button-group vega-input[value=center]~.text-alignment-center,:host .text-alignment-button-group vega-input[value=right]~.text-alignment-right,:host .text-alignment-button-group vega-input[value=justify]~.text-alignment-justify,:host .text-alignment-button-group vega-input[value=top]~.text-alignment-top,:host .text-alignment-button-group vega-input[value=middle]~.text-alignment-middle,:host .text-alignment-button-group vega-input[value=bottom]~.text-alignment-bottom{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));z-index:1}:host .action-buttons{text-align:right}:host .action-buttons vega-button-link{margin-left:24px}:host .background-color-group{display:flex;gap:8px;flex-direction:column}:host .color-picker-container{box-sizing:border-box;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;padding-left:12px;padding-right:12px;display:flex;gap:8px;align-items:center;padding-top:11px;padding-bottom:11px}:host .color-picker-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .color-picker-container:focus-within{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .color-picker-container vega-divider{height:24px !important}:host .color-picker-container .color-none{display:block;box-sizing:border-box;border-radius:4px;width:24px;height:24px;border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));overflow:hidden;cursor:pointer;position:relative}:host .color-picker-container .color-none:hover{box-shadow:0 0 0 4px rgba(230, 50, 87, 0.25)}:host .color-picker-container .color-none:before{content:\"\";position:absolute;border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));border-left-width:0px;border-right-width:0px;border-bottom-width:0px;top:0;left:-10px;width:32px;height:0;transform-origin:top right;transform:rotate(-45deg)}:host(.vega-hidden){display:none}";
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -610,13 +692,15 @@ const VegaRichTextTableProperties = class {
     this.tableFormRenderer = new VegaRichTextTablePropertiesFormFieldRenderer();
     this.cellFormRenderer = new VegaRichTextCellPropertiesFormFieldRenderer();
     this.controller = new TableColorController();
+    this.darkModeStateSlimmer = new darkModeStateControllerSlimmer.DarkModeStateControllerSlimmer();
     this.changeEventPreventSlimmer = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaChange], () => this.renderer.getFormRef());
+    this.isInDarkMode = darkModeStyleController.VegaInternalThemeManager.isDarkMode();
     /**
-     * @vegaVersion 2.74.0-RTE-table-preview
+     * @vegaVersion 2.75.0-RTE-table-preview
      */
     this.type = 'TABLE';
     /**
-     * @vegaVersion 2.74.0-RTE-table-preview
+     * @vegaVersion 2.75.0-RTE-table-preview
      */
     this.colors = [];
   }
@@ -630,33 +714,36 @@ const VegaRichTextTableProperties = class {
     "defaultValue": ["watchDefaultValueChange"]
   }; }
 };
-__decorate$7([
+__decorate$8([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaRichTextTableProperties.prototype, "globalSlimmers", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextTableProperties.prototype, "translationSlimmer", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextTableProperties.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextTableProperties.prototype, "renderer", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextTableProperties.prototype, "tableFormRenderer", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextTableProperties.prototype, "cellFormRenderer", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextTableProperties.prototype, "controller", void 0);
-__decorate$7([
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextTableProperties.prototype, "darkModeStateSlimmer", void 0);
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextTableProperties.prototype, "changeEventPreventSlimmer", void 0);
 VegaRichTextTableProperties.style = vegaRichTextTablePropertiesCss;
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -721,23 +808,23 @@ class SelectionWidgetRenderer extends globalSlimmerRegistry.VegaSlimmer {
         index.h("slot", null))));
   }
 }
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], SelectionWidgetRenderer.prototype, "host", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], SelectionWidgetRenderer.prototype, "isSelected", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], SelectionWidgetRenderer.prototype, "connectedCallback", null);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], SelectionWidgetRenderer.prototype, "disconnectedCallback", null);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentMethod('watchIsSelected')
 ], SelectionWidgetRenderer.prototype, "watchIsSelected", null);
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -765,16 +852,16 @@ class SelectionWidgetKeyboardController extends keyboardManagerSlimmer.KeyboardM
     };
   }
 }
-__decorate$5([
+__decorate$6([
   globalSlimmerRegistry.MapToComponentField()
 ], SelectionWidgetKeyboardController.prototype, "vegaRemove", void 0);
-__decorate$5([
+__decorate$6([
   globalSlimmerRegistry.MapToComponentField()
 ], SelectionWidgetKeyboardController.prototype, "selectionWidgetRenderer", void 0);
 
 const vegaRichTextTableSelectionWidgetCss = ":host{display:block;position:relative;padding-top:19px}:host(:hover) .v-rte-widget__selection-content{outline:2px solid rgb(255, 200, 61)}:host(:hover) .v-rte-widget__selection-handle{display:revert;background:rgb(255, 200, 61)}.v-rte-widget__selection.selected .v-rte-widget__selection-content{outline:2px solid rgb(38, 42, 255)}.v-rte-widget__selection.selected .v-rte-widget__selection-handle{display:revert;background:rgb(38, 42, 255)}.v-rte-widget__selection-handle{border:none;outline:none;width:15px;height:15px;position:absolute;top:2px;left:-2px;padding:2px;box-sizing:border-box;display:none}.v-rte-widget__selection-handle:after{content:\"\";border:1px dashed rgb(255, 255, 255);width:auto;height:100%;display:block}";
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -804,21 +891,21 @@ const VegaRichTextTableSelectionWidget = class {
     "isSelected": ["watchIsSelected"]
   }; }
 };
-__decorate$4([
+__decorate$5([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaRichTextTableSelectionWidget.prototype, "globalSlimmers", void 0);
-__decorate$4([
+__decorate$5([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextTableSelectionWidget.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$4([
+__decorate$5([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextTableSelectionWidget.prototype, "selectionWidgetRenderer", void 0);
-__decorate$4([
+__decorate$5([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextTableSelectionWidget.prototype, "keyboardController", void 0);
 VegaRichTextTableSelectionWidget.style = vegaRichTextTableSelectionWidgetCss;
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -827,7 +914,7 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
 const buttonList = [
   'rte-table-column',
   'rte-table-row',
-  // 'rte-table-merge-cells',
+  'rte-table-merge-cells',
   'rte-table-properties',
   'rte-table-cell-properties',
   'rte-table-caption',
@@ -842,6 +929,8 @@ class VegaRichTextTableSettingRenderer extends globalSlimmerRegistry.VegaSlimmer
         return this.columnButtonSlimmer.render();
       case 'rte-table-row':
         return this.rowButtonSlimmer.render();
+      case 'rte-table-merge-cells':
+        return this.mergeCellsButtonSlimmer.render();
       case 'rte-table-properties':
         return this.tablePropertiesButtonSlimmer.render();
       case 'rte-table-cell-properties':
@@ -851,21 +940,24 @@ class VegaRichTextTableSettingRenderer extends globalSlimmerRegistry.VegaSlimmer
     }
   }
 }
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTableSettingRenderer.prototype, "captionButtonSlimmer", void 0);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTableSettingRenderer.prototype, "columnButtonSlimmer", void 0);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTableSettingRenderer.prototype, "rowButtonSlimmer", void 0);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTableSettingRenderer.prototype, "tablePropertiesButtonSlimmer", void 0);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextTableSettingRenderer.prototype, "cellPropertiesButtonSlimmer", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextTableSettingRenderer.prototype, "mergeCellsButtonSlimmer", void 0);
 
 const Icons = {
   'rte-table-column': {
@@ -888,7 +980,7 @@ const Icons = {
   },
 };
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -951,13 +1043,13 @@ class TableSettingButtonSlimmer extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$2([
+__decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], TableSettingButtonSlimmer.prototype, "hasCaption", void 0);
-__decorate$2([
+__decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], TableSettingButtonSlimmer.prototype, "vegaClick", void 0);
-__decorate$2([
+__decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], TableSettingButtonSlimmer.prototype, "selectedCells", void 0);
 
@@ -980,14 +1072,14 @@ class CaptionButtonSlimmer extends TableSettingButtonSlimmer {
   }
   handleClick() {
     const caption = !this.hasCaption ? 'rte-table-caption' : '';
-    this.emitClickEvent([styles_constants.TableSettingType.CAPTION, caption]);
+    this.emitClickEvent([splitCellOperation.TableSettingType.CAPTION, caption]);
   }
   getTitle() {
     return this.hasCaption ? 'caption on' : 'caption off';
   }
 }
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1004,7 +1096,7 @@ class ColumnButtonSlimmer extends TableSettingButtonSlimmer {
       showArrowIcon: true,
     });
     this.handleDropdownItemClick = (input) => {
-      this.emitClickEvent([styles_constants.TableSettingType.COLUMN, input.detail]);
+      this.emitClickEvent([splitCellOperation.TableSettingType.COLUMN, input.detail]);
     };
     this.handleDropdownVisibilityChange = ({ eventName }) => {
       this.isColumnDropdownOpen = eventName.toLocaleLowerCase().indexOf('show') >= 0;
@@ -1035,14 +1127,14 @@ class ColumnButtonSlimmer extends TableSettingButtonSlimmer {
    */
   renderActionList() {
     return (index.h("div", { tabIndex: 0, role: "menu", slot: "items", onMouseDown: this.preventDefaultEvent, onKeyDown: this.preventDefaultEvent },
-      index.h("vega-dropdown-item", { itemKey: styles_constants.ColumnOperationType.HEADER_COLUMN },
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.ColumnOperationType.HEADER_COLUMN },
         index.h("vega-flex", { alignItems: "center", gap: "size-8" },
-          index.h("vega-toggle-switch", { checked: styles_constants.ToggleHeaderTableColumnStrategy.isFullHeaderSelection(this.selectedCells), size: "small" }),
+          index.h("vega-toggle-switch", { checked: splitCellOperation.ToggleHeaderTableColumnStrategy.isFullHeaderSelection(this.selectedCells), size: "small" }),
           "Header Column")),
-      index.h("vega-dropdown-item", { itemKey: styles_constants.ColumnOperationType.ADD_COLUMN_LEFT }, "Insert column left"),
-      index.h("vega-dropdown-item", { itemKey: styles_constants.ColumnOperationType.ADD_COLUMN_RIGHT }, "Insert column right"),
-      index.h("vega-dropdown-item", { itemKey: styles_constants.ColumnOperationType.DELETE_COLUMN, disabled: this.allColumnSelected(this.selectedCells) }, "Delete column"),
-      index.h("vega-dropdown-item", { itemKey: styles_constants.ColumnOperationType.SELECT_COLUMN }, "Select column")));
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.ColumnOperationType.ADD_COLUMN_LEFT }, "Insert column left"),
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.ColumnOperationType.ADD_COLUMN_RIGHT }, "Insert column right"),
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.ColumnOperationType.DELETE_COLUMN, disabled: this.allColumnSelected(this.selectedCells) }, "Delete column"),
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.ColumnOperationType.SELECT_COLUMN }, "Select column")));
   }
   /**
    * Determine if all columns are selected based on the selected cell range.
@@ -1062,7 +1154,7 @@ class ColumnButtonSlimmer extends TableSettingButtonSlimmer {
     return firstCellColumnIndex === 0 && lastCellColumnIndex === lastTableRowCells.length - 1;
   }
 }
-__decorate$1([
+__decorate$2([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], ColumnButtonSlimmer.prototype, "isColumnDropdownOpen", void 0);
 
@@ -1087,7 +1179,7 @@ class TablePropertiesButtonSlimmer extends TableSettingButtonSlimmer {
     return false;
   }
   handleClick() {
-    this.emitClickEvent([styles_constants.TableSettingType.TABLE]);
+    this.emitClickEvent([splitCellOperation.TableSettingType.TABLE]);
   }
 }
 
@@ -1102,7 +1194,7 @@ class RowButtonSlimmer extends TableSettingButtonSlimmer {
       showArrowIcon: true,
     });
     this.handleDropdownItemClick = (input) => {
-      this.emitClickEvent([styles_constants.TableSettingType.ROW, input.detail]);
+      this.emitClickEvent([splitCellOperation.TableSettingType.ROW, input.detail]);
     };
   }
   renderBtnWrapper(renderBtn) {
@@ -1129,14 +1221,14 @@ class RowButtonSlimmer extends TableSettingButtonSlimmer {
   renderActionList() {
     const shouldChecked = this.areSelectedRowsHeaderRows();
     return (index.h("div", { tabIndex: 0, role: "menu", slot: "items", onMouseDown: this.preventDefaultEvent, onKeyDown: this.preventDefaultEvent },
-      index.h("vega-dropdown-item", { itemKey: styles_constants.RowOperationType.HEADER_ROW },
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.RowOperationType.HEADER_ROW },
         index.h("vega-flex", { alignItems: "center", direction: "row", gap: "size-8" },
           index.h("vega-toggle-switch", { key: shouldChecked.toString(), size: "small", checked: shouldChecked }),
           index.h("span", null, "Header row"))),
-      index.h("vega-dropdown-item", { itemKey: styles_constants.RowOperationType.ADD_ROW_ABOVE }, "Insert row above"),
-      index.h("vega-dropdown-item", { itemKey: styles_constants.RowOperationType.ADD_ROW_BELOW }, "Insert row below"),
-      index.h("vega-dropdown-item", { disabled: this.areAllRowsSelected(), itemKey: styles_constants.RowOperationType.DELETE_ROW }, "Delete row"),
-      index.h("vega-dropdown-item", { itemKey: styles_constants.RowOperationType.SELECT_ROW }, "Select row")));
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.RowOperationType.ADD_ROW_ABOVE }, "Insert row above"),
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.RowOperationType.ADD_ROW_BELOW }, "Insert row below"),
+      index.h("vega-dropdown-item", { disabled: this.areAllRowsSelected(), itemKey: splitCellOperation.RowOperationType.DELETE_ROW }, "Delete row"),
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.RowOperationType.SELECT_ROW }, "Select row")));
   }
   /**
    * Check if all selected rows are header rows.
@@ -1146,7 +1238,7 @@ class RowButtonSlimmer extends TableSettingButtonSlimmer {
   areSelectedRowsHeaderRows() {
     const selectedRows = this.getSelectedRows();
     return (selectedRows.length > 0 &&
-      selectedRows.every((row) => row.parent instanceof styles_constants.RTETableHeadBlock));
+      selectedRows.every((row) => row.parent instanceof splitCellOperation.RTETableHeadBlock));
   }
   /**
    * Check if all rows are selected. Should disable some row operations if true.
@@ -1157,11 +1249,13 @@ class RowButtonSlimmer extends TableSettingButtonSlimmer {
     let flag = false;
     const selectedRows = this.getSelectedRows();
     if (selectedRows.length) {
-      const table = styles_constants.getParentBlockByType(selectedRows[0], styles_constants.RTETableBlock);
-      const allRows = table.children
-        .filter((block) => block instanceof styles_constants.RTETableHeadBlock || block instanceof styles_constants.RTETableBodyBlock)
-        .flatMap((item) => item.children);
-      flag = selectedRows.length === allRows.length;
+      const table = splitCellOperation.getParentBlockByType(selectedRows[0], splitCellOperation.RTETableBlock);
+      if (table) {
+        const allRows = table.children
+          .filter((block) => block instanceof splitCellOperation.RTETableHeadBlock || block instanceof splitCellOperation.RTETableBodyBlock)
+          .flatMap((item) => item.children);
+        flag = selectedRows.length === allRows.length;
+      }
     }
     return flag;
   }
@@ -1204,9 +1298,118 @@ class CellPropertiesButtonSlimmer extends TableSettingButtonSlimmer {
     return this.selectedCells.length === 0;
   }
   handleClick() {
-    this.emitClickEvent([styles_constants.TableSettingType.CELL]);
+    this.emitClickEvent([splitCellOperation.TableSettingType.CELL]);
+  }
+}
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Slimmer dedicated to building the merge cells button.
+ */
+class MergeCellsButtonSlimmer extends TableSettingButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'rte-table-merge-cells',
+      title: 'Merge cells',
+      showArrowIcon: true,
+    });
+    this.handleDropdownItemClick = (input) => {
+      if (Object.values(splitCellOperation.SplitCellOperationType).includes(input.detail)) {
+        this.emitClickEvent([splitCellOperation.TableSettingType.SPLIT_CELL, input.detail]);
+        return;
+      }
+      this.emitClickEvent([splitCellOperation.TableSettingType.MERGE_CELLS, input.detail]);
+    };
+    this.handleDropdownVisibilityChange = ({ eventName }) => {
+      this.isMergeCellsDropdownOpen = eventName.toLocaleLowerCase().indexOf('show') >= 0;
+    };
+  }
+  renderBtnWrapper(renderBtn) {
+    return (index.h("vega-dropdown", { isScreenPosition: true, minWidth: 150, trigger: "click", ref: (el) => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, domNodeSubjectObserverFactory.VegaDropdownClick, this.handleDropdownItemClick);
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, domNodeSubjectObserverFactory.VegaDropdownShow, this.handleDropdownVisibilityChange);
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, domNodeSubjectObserverFactory.VegaDropdownHide, this.handleDropdownVisibilityChange);
+      } },
+      renderBtn(),
+      this.renderActionList()));
+  }
+  isSelected() {
+    return this.isMergeCellsDropdownOpen;
+  }
+  isDisabled() {
+    if (this.selectedCells.length === 0) {
+      return true;
+    }
+    const hasTableCell = this.selectedCells.some((item) => item.type === 'table-cell');
+    const hasTableHeadCell = this.selectedCells.some((item) => item.type === 'table-head-cell');
+    if (hasTableCell && hasTableHeadCell) {
+      return true;
+    }
+    return !splitCellOperation.isRectangularSelection(this.selectedCells);
+  }
+  handleClick() {
+    this.isMergeCellsDropdownOpen = true;
+  }
+  /**
+   * Render the action list.
+   *
+   * @returns {HTMLElement} The action list element.
+   */
+  renderActionList() {
+    const disabledMap = this.getMergeDirectionDisabledMap();
+    return (index.h("div", { tabIndex: 0, role: "menu", slot: "items", onMouseDown: this.preventDefaultEvent, onKeyDown: this.preventDefaultEvent },
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.MergeCellsOperationType.MERGE_CELLS }, "Merge cells"),
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.MergeCellsOperationType.MERGE_CELL_UP, disabled: disabledMap[splitCellOperation.MergeCellsOperationType.MERGE_CELL_UP] }, "Merge cell up"),
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.MergeCellsOperationType.MERGE_CELL_RIGHT, disabled: disabledMap[splitCellOperation.MergeCellsOperationType.MERGE_CELL_RIGHT] }, "Merge cell right"),
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.MergeCellsOperationType.MERGE_CELL_DOWN, disabled: disabledMap[splitCellOperation.MergeCellsOperationType.MERGE_CELL_DOWN] }, "Merge cell down"),
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.MergeCellsOperationType.MERGE_CELL_LEFT, disabled: disabledMap[splitCellOperation.MergeCellsOperationType.MERGE_CELL_LEFT] }, "Merge cell left"),
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.SplitCellOperationType.SPLIT_CELL_VERTICALLY, disabled: !this.selectSingleCell() }, "Split cell vertically"),
+      index.h("vega-dropdown-item", { itemKey: splitCellOperation.SplitCellOperationType.SPLIT_CELL_HORIZONTALLY, disabled: !this.selectSingleCell() }, "Split cell horizontally")));
+  }
+  selectSingleCell() {
+    return this.selectedCells.length === 1;
+  }
+  getMergeDirectionDisabledMap() {
+    if (this.selectedCells.length !== 1) {
+      return {
+        [splitCellOperation.MergeCellsOperationType.MERGE_CELL_UP]: true,
+        [splitCellOperation.MergeCellsOperationType.MERGE_CELL_RIGHT]: true,
+        [splitCellOperation.MergeCellsOperationType.MERGE_CELL_DOWN]: true,
+        [splitCellOperation.MergeCellsOperationType.MERGE_CELL_LEFT]: true,
+      };
+    }
+    const cell = this.selectedCells[0];
+    const row = cell.parent;
+    const table = row.parent;
+    const rowIndex = table.children.indexOf(row);
+    const cellIndex = row.children.indexOf(cell);
+    const isFirstRow = rowIndex === 0;
+    const isLastRow = rowIndex === table.children.length - 1;
+    const isFirstCol = cellIndex === 0;
+    const isLastCol = cellIndex === row.children.length - 1;
+    const getDisabledForDirection = (direction, isOnEdge) => {
+      if (isOnEdge) {
+        return true;
+      }
+      const adjacentCell = splitCellOperation.getAdjacentCell(cell, direction);
+      return !adjacentCell || !splitCellOperation.isRectangularSelection([cell, adjacentCell]);
+    };
+    return {
+      [splitCellOperation.MergeCellsOperationType.MERGE_CELL_UP]: getDisabledForDirection(splitCellOperation.MergeCellsOperationType.MERGE_CELL_UP, isFirstRow),
+      [splitCellOperation.MergeCellsOperationType.MERGE_CELL_RIGHT]: getDisabledForDirection(splitCellOperation.MergeCellsOperationType.MERGE_CELL_RIGHT, isLastCol),
+      [splitCellOperation.MergeCellsOperationType.MERGE_CELL_DOWN]: getDisabledForDirection(splitCellOperation.MergeCellsOperationType.MERGE_CELL_DOWN, isLastRow),
+      [splitCellOperation.MergeCellsOperationType.MERGE_CELL_LEFT]: getDisabledForDirection(splitCellOperation.MergeCellsOperationType.MERGE_CELL_LEFT, isFirstCol),
+    };
   }
 }
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], MergeCellsButtonSlimmer.prototype, "isMergeCellsDropdownOpen", void 0);
 
 const vegaRichTextTableSettingCss = ":host .rte-table-setting-item{border:none;background-color:#fcfcfc;cursor:pointer;padding:4px}:host .rte-table-setting-item:not(.rte-table-setting-item-disabled,.rte-table-setting-item-selected):hover{background:#f0f0f0}:host .rte-table-setting-item-disabled{cursor:default}:host .rte-table-setting-item-selected{background:rgb(219, 236, 255)}";
 
@@ -1233,17 +1436,19 @@ const VegaRichTextTableSetting = class {
     this.tablePropertiesButtonSlimmer = new TablePropertiesButtonSlimmer();
     this.rowButtonSlimmer = new RowButtonSlimmer();
     this.cellPropertiesButtonSlimmer = new CellPropertiesButtonSlimmer();
+    this.mergeCellsButtonSlimmer = new MergeCellsButtonSlimmer();
     this.isColumnDropdownOpen = false;
+    this.isMergeCellsDropdownOpen = false;
     /**
      * Indicates whether the current table already has a caption.
      *
-     * @vegaVersion 2.74.0-RTE-table-preview
+     * @vegaVersion 2.75.0-RTE-table-preview
      */
     this.hasCaption = false;
     /**
      * The selected cells in the table.
      *
-     * @vegaVersion 2.74.0-RTE-table-preview
+     * @vegaVersion 2.75.0-RTE-table-preview
      */
     this.selectedCells = [];
   }
@@ -1300,6 +1505,9 @@ __decorate([
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextTableSetting.prototype, "cellPropertiesButtonSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "mergeCellsButtonSlimmer", void 0);
 __decorate([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaRichTextTableSetting.prototype, "connectedCallback", null);