@heartlandone/vega 2.80.0 → 2.82.0

package/dist/esm/tinycolor-polyfill-7be0eb93.js

@@ -0,0 +1,322 @@
+/**
+ * TinyColor Polyfill - A lightweight color manipulation utility.
+ *
+ * This is a drop-in replacement for tinycolor2, implementing only the methods
+ * used in the Vega theme overriding system.
+ *
+ * @see VD-5026 - [Zero Dependencies] remove tinycolor2 dependency
+ */
+/**
+ * TinyColor polyfill class for color manipulation.
+ * Implements the same interface as tinycolor2.Instance for the methods used in Vega.
+ */
+class TinyColorPolyfill {
+  /**
+   * Create a new TinyColorPolyfill instance.
+   *
+   * @param {string | RgbaValue} color - The color to parse.
+   */
+  constructor(color) {
+    const rgba = TinyColorPolyfill.parseColor(color);
+    this._r = rgba.r;
+    this._g = rgba.g;
+    this._b = rgba.b;
+    this._a = rgba.a;
+  }
+  // ==================== Private Static Helper Methods ====================
+  /**
+   * Clamp a value between a minimum and maximum.
+   *
+   * @param {number} value - The value to clamp.
+   * @param {number} min - The minimum allowed value.
+   * @param {number} max - The maximum allowed value.
+   * @returns {number} The clamped value.
+   */
+  static clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+  }
+  /**
+   * Parse a color string or RGBA object into an RgbaValue.
+   *
+   * Supported formats:
+   * - Hex: #RGB, #RRGGBB, #RRGGBBAA
+   * - RGB: rgb(r, g, b)
+   * - RGBA: rgba(r, g, b, a)
+   * - Object: { r, g, b, a? }
+   *
+   * @param {string | RgbaValue} color - The color to parse.
+   * @returns {RgbaValue} The parsed RGBA value.
+   */
+  static parseColor(color) {
+    if (typeof color === 'object' && 'r' in color && 'g' in color && 'b' in color) {
+      return {
+        r: Math.round(TinyColorPolyfill.clamp(color.r, 0, 255)),
+        g: Math.round(TinyColorPolyfill.clamp(color.g, 0, 255)),
+        b: Math.round(TinyColorPolyfill.clamp(color.b, 0, 255)),
+        a: color.a !== undefined ? TinyColorPolyfill.clamp(color.a, 0, 1) : 1,
+      };
+    }
+    if (typeof color !== 'string') {
+      return { r: 0, g: 0, b: 0, a: 1 };
+    }
+    const trimmed = color.trim().toLowerCase();
+    // Hex format
+    if (trimmed.startsWith('#')) {
+      return TinyColorPolyfill.parseHex(trimmed);
+    }
+    // RGB/RGBA format
+    if (trimmed.startsWith('rgb')) {
+      return TinyColorPolyfill.parseRgbString(trimmed);
+    }
+    // Fallback to black for unsupported formats
+    return { r: 0, g: 0, b: 0, a: 1 };
+  }
+  /* eslint-disable spellcheck/spell-checker */
+  /**
+   * Parse a hex color string into RGBA values.
+   *
+   * @param {string} hex - The hex color string (e.g., "#fff", "#ffffff", "#ffffffff").
+   * @returns {RgbaValue} The parsed RGBA value.
+   */
+  static parseHex(hex) {
+    /* eslint-enable spellcheck/spell-checker */
+    // Remove the # prefix
+    let hexValue = hex.slice(1);
+    // Expand shorthand format (#RGB -> #RRGGBB)
+    if (hexValue.length === 3) {
+      hexValue = hexValue
+        .split('')
+        .map((c) => c + c)
+        .join('');
+    }
+    // Handle #RGBA shorthand
+    if (hexValue.length === 4) {
+      hexValue = hexValue
+        .split('')
+        .map((c) => c + c)
+        .join('');
+    }
+    const r = parseInt(hexValue.slice(0, 2), 16);
+    const g = parseInt(hexValue.slice(2, 4), 16);
+    const b = parseInt(hexValue.slice(4, 6), 16);
+    let a = 1;
+    // Handle #RRGGBBAA format
+    if (hexValue.length === 8) {
+      a = parseInt(hexValue.slice(6, 8), 16) / 255;
+    }
+    return {
+      r: Number.isNaN(r) ? 0 : r,
+      g: Number.isNaN(g) ? 0 : g,
+      b: Number.isNaN(b) ? 0 : b,
+      a: Number.isNaN(a) ? 1 : a,
+    };
+  }
+  /**
+   * Parse an RGB or RGBA string into RGBA values.
+   *
+   * @param {string} rgbString - The RGB/RGBA string (e.g., "rgb(255, 128, 0)" or "rgba(255, 128, 0, 0.5)").
+   * @returns {RgbaValue} The parsed RGBA value.
+   */
+  static parseRgbString(rgbString) {
+    // Match rgb(r, g, b) or rgba(r, g, b, a) with comma-separated integer values.
+    // Note: Does NOT support percentage values (e.g., rgb(100%, 50%, 0%)) or
+    // modern CSS space-separated syntax (e.g., rgb(255 128 0 / 0.5)).
+    const match = rgbString.match(/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d+\.?\d*))?\s*\)/);
+    if (!match) {
+      return { r: 0, g: 0, b: 0, a: 1 };
+    }
+    return {
+      r: TinyColorPolyfill.clamp(parseInt(match[1], 10), 0, 255),
+      g: TinyColorPolyfill.clamp(parseInt(match[2], 10), 0, 255),
+      b: TinyColorPolyfill.clamp(parseInt(match[3], 10), 0, 255),
+      a: match[4] !== undefined ? TinyColorPolyfill.clamp(parseFloat(match[4]), 0, 1) : 1,
+    };
+  }
+  /**
+   * Convert RGB to HSL.
+   *
+   * @param {number} r - Red (0-255).
+   * @param {number} g - Green (0-255).
+   * @param {number} b - Blue (0-255).
+   * @returns {HslValue} The HSL values (h: 0-360, s: 0-1, l: 0-1).
+   */
+  static rgbToHsl(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    let h = 0;
+    let s = 0;
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+          break;
+        case g:
+          h = ((b - r) / d + 2) / 6;
+          break;
+        case b:
+          h = ((r - g) / d + 4) / 6;
+          break;
+      }
+    }
+    return { h: h * 360, s, l };
+  }
+  /**
+   * Convert HSL to RGB.
+   *
+   * @param {number} h - Hue (0-360).
+   * @param {number} s - Saturation (0-1).
+   * @param {number} l - Lightness (0-1).
+   * @returns {RgbValue} The RGB values (0-255).
+   */
+  static hslToRgb(h, s, l) {
+    h /= 360;
+    let r;
+    let g;
+    let b;
+    if (s === 0) {
+      r = g = b = l;
+    }
+    else {
+      /**
+       * Helper function to convert hue to RGB component.
+       *
+       * @param {number} p - First intermediate value.
+       * @param {number} q - Second intermediate value.
+       * @param {number} t - Hue offset value.
+       * @returns {number} RGB component value (0-1).
+       */
+      const hue2rgb = (p, q, t) => {
+        if (t < 0)
+          t += 1;
+        if (t > 1)
+          t -= 1;
+        if (t < 1 / 6)
+          return p + (q - p) * 6 * t;
+        if (t < 1 / 2)
+          return q;
+        if (t < 2 / 3)
+          return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+      };
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
+      r = hue2rgb(p, q, h + 1 / 3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return {
+      r: Math.round(r * 255),
+      g: Math.round(g * 255),
+      b: Math.round(b * 255),
+    };
+  }
+  /**
+   * Calculate the perceived brightness of a color using the YIQ formula.
+   * This matches tinycolor2's brightness calculation.
+   *
+   * @param {number} r - Red (0-255).
+   * @param {number} g - Green (0-255).
+   * @param {number} b - Blue (0-255).
+   * @returns {number} Brightness value (0-255).
+   */
+  static getBrightness(r, g, b) {
+    return (r * 299 + g * 587 + b * 114) / 1000;
+  }
+  // ==================== Public Instance Methods ====================
+  /**
+   * Check if the color is dark (brightness < 128).
+   *
+   * @returns {boolean} True if the color is considered dark.
+   */
+  isDark() {
+    return TinyColorPolyfill.getBrightness(this._r, this._g, this._b) < 128;
+  }
+  /**
+   * Check if the color is light (brightness >= 128).
+   *
+   * @returns {boolean} True if the color is considered light.
+   */
+  isLight() {
+    return !this.isDark();
+  }
+  /**
+   * Create a copy of this color.
+   *
+   * @returns {TinyColorPolyfill} A new TinyColorPolyfill instance with the same values.
+   */
+  clone() {
+    const cloned = new TinyColorPolyfill({
+      r: this._r,
+      g: this._g,
+      b: this._b,
+      a: this._a,
+    });
+    return cloned;
+  }
+  /**
+   * Lighten the color by a given amount.
+   * Note: tinycolor2 accepts negative values to darken.
+   *
+   * @param {number} amount - The amount to lighten (0-100). Negative values darken.
+   * @returns {TinyColorPolyfill} This instance for chaining.
+   */
+  lighten(amount = 10) {
+    const hsl = TinyColorPolyfill.rgbToHsl(this._r, this._g, this._b);
+    hsl.l = TinyColorPolyfill.clamp(hsl.l + amount / 100, 0, 1);
+    const rgb = TinyColorPolyfill.hslToRgb(hsl.h, hsl.s, hsl.l);
+    this._r = rgb.r;
+    this._g = rgb.g;
+    this._b = rgb.b;
+    return this;
+  }
+  /**
+   * Darken the color by a given amount.
+   *
+   * @param {number} amount - The amount to darken (0-100).
+   * @returns {TinyColorPolyfill} This instance for chaining.
+   */
+  darken(amount = 10) {
+    return this.lighten(-amount);
+  }
+  /**
+   * Set the alpha (opacity) of the color.
+   *
+   * @param {number} alpha - The alpha value (0-1).
+   * @returns {TinyColorPolyfill} This instance for chaining.
+   */
+  setAlpha(alpha) {
+    this._a = TinyColorPolyfill.clamp(alpha, 0, 1);
+    return this;
+  }
+  /**
+   * Get the RGBA representation of the color.
+   *
+   * @returns {RgbaValue} The RGBA values.
+   */
+  toRgb() {
+    return {
+      r: this._r,
+      g: this._g,
+      b: this._b,
+      a: this._a,
+    };
+  }
+}
+/**
+ * Factory function to create a TinyColorPolyfill instance.
+ * This provides API compatibility with tinycolor2's default export.
+ *
+ * @param {string | RgbaValue} color - The color to parse.
+ * @returns {TinyColorPolyfill} A new TinyColorPolyfill instance.
+ */
+function tinycolor(color) {
+  return new TinyColorPolyfill(color);
+}
+
+export { TinyColorPolyfill as T, tinycolor as t };

package/dist/esm/{token-extension-600b1c88.js → token-extension-9d717a35.js}

@@ -1,25 +1,25 @@
 import { g as generateUUID } from './misc-9fdbcfbb.js';
-import { a as arrayToClassString, g as getDeviceType, D as DeviceType, f as findParent, r as rgbToHex } from './ui-ba5a4758.js';
+import { a as arrayToClassString, g as getDeviceType, D as DeviceType, f as findParent, r as rgbToHex } from './ui-b7600a48.js';
 import { L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { I as InjectVegaTelemetrySlimmer, c as createPublicAPIRuntimeMetricsSlimmer } from './create-public-api-runtime-metrics-slimmer-aaadaa08.js';
 import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-7d2b54c3.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e24d36c5.js';
-import { i as internalVegaEventManager } from './internal-vega-event-manager-59f5bd47.js';
-import { V as VegaInternalTranslation } from './internal-translation-controller-b08aa9ab.js';
-import { R as RTEDTOActionStrategyManager, E as ElementToDTOClassStrategyManager, h as htmlElementToAnnotationGenerator, U as UpdateCursorPositionAction, V as VegaRTEContent, B as BlockToRTEBlockStrategyAbstract, a as ElementToDTOStrategy, I as InsertNewParagraphAction, b as RTEImageBlock, c as InsertChildrenBeforeStrategy, P as PasteContentStrategy, A as AnnotationGeneratorStrategyAbstract, d as RTEListItemBlock } from './content-state-084cd705.js';
-import { s as stateEntityRenderingRegistry, A as ActionHandleStrategyRegistry, a as ActionHandlerInterceptorRegistry, R as RTEDTOClassManager, M as ModifyContentAction, b as RTETextNode, c as RTEBlock, d as RTETextBlock, e as RTEAnnotationStyle, f as ActionHandleStrategy, I as InsertChildrenAfterAction, g as AppendChildrenAction, h as RTENode, i as InsertChildrenBeforeAction, j as InternalAnnotationTypeEnum, k as ModifyContentActionType, B as BlockAnnotation, l as AnnotationAction, m as RemoveChildrenAction, C as CommonAnnotationTypeEnum, n as CustomAttributeAnnotation } from './code-block-7d6f231b.js';
-import { i as isNonNullable } from './type-guard-23a08026.js';
+import { i as internalVegaEventManager } from './internal-vega-event-manager-8a657bac.js';
+import { V as VegaInternalTranslation } from './internal-translation-controller-4fb104b2.js';
+import { R as RTEDTOActionStrategyManager, E as ElementToDTOClassStrategyManager, h as htmlElementToAnnotationGenerator, U as UpdateCursorPositionAction, V as VegaRTEContent, B as BlockToRTEBlockStrategyAbstract, a as ElementToDTOStrategy, I as InsertNewParagraphAction, b as RTEImageBlock, c as InsertChildrenBeforeStrategy, P as PasteContentStrategy, A as AnnotationGeneratorStrategyAbstract, d as RTEListItemBlock } from './content-state-72b513d1.js';
+import { s as stateEntityRenderingRegistry, A as ActionHandleStrategyRegistry, a as ActionHandlerInterceptorRegistry, R as RTEFilterStylesStrategyRegistry, b as RTEDTOClassManager, M as ModifyContentAction, c as RTETextNode, d as RTEBlock, e as RTETextBlock, f as RTEAnnotationStyle, g as ActionHandleStrategy, I as InsertChildrenAfterAction, h as AppendChildrenAction, i as RTENode, j as InsertChildrenBeforeAction, k as InternalAnnotationTypeEnum, l as ModifyContentActionType, B as BlockAnnotation, m as AnnotationAction, n as RemoveChildrenAction, C as CommonAnnotationTypeEnum, o as CustomAttributeAnnotation, p as RTEFilterStylesStrategy } from './code-block-b8be290a.js';
+import { i as isNonNullable } from './type-guard-152070e9.js';
 import { R as RTEDTORendererManager } from './dto-renderer-manager-12bc9121.js';
 import { V as VegaRTEBaseRenderer } from './base-renderer-101f6d04.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-bd80b3bb.js';
 import { v as vegaNonceManager } from './vega-nonce-manager-497e5eb5.js';
-import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-cea9248d.js';
+import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-aca0116e.js';
 import { V as VegaDropdownClick, a as VegaClick, b as VegaPopoverShow, c as VegaPopoverHide } from './vega-event-id-4ede557a.js';
-import { R as RTETableExtensionAnnotationTypeEnum, a as RTE_TABLE_HEAD_DEFAULT_BACKGROUND_COLOR, S as SettingEventHandler, T as TableSettingType, b as RowOperationEventHandler, C as ColumnOperationEventHandler, M as MergeCellsOperationEventHandler, c as SplitCellOperationEventHandler, d as RTETableAnnotation, e as RTETableCellAnnotation, f as RTETableHeadCellBlock, g as RTETableColorManager, h as RTETableBlock, i as generateTableBody, j as RTETableCellBlock, k as RTETableHeadBlock, l as RTETableBodyBlock, m as getParentBlockByType, n as RTETableHeadCellAnnotation, o as TableColumnStrategy, p as getAllTableRows, q as buildTableGrid, s as setSpanAttributes, r as findCellBlockById, t as getDefaultCellBlockTemplate, I as InsertTableColumnDirection, u as buildCellStartColumnMap, v as getTableColumnCount, w as getFirstNode, x as getCellSpan, y as createNewCell, z as MergeCellsOperationType, A as RTETableRowBlock, B as getActualColumnPosition, D as InsertTableRowDirection, E as RTE_TABLE_DEFAULT_COLORS, F as INSERT_TABLE_ROW_INTO_DIFFERENT_SECTION, G as INSERT_TABLE_ROW_INTO_SAME_SECTION, H as DELETE_TABLE_ROW, J as TOGGLE_HEADER_ROW, K as INSERT_TABLE_COLUMN, L as DELETE_TABLE_COLUMN, N as TOGGLE_HEADER_TABLE_COLUMN, O as ToggleHeaderTableColumnStrategy, P as SPLIT_TABLE_CELL, Q as REPLACE_TABLE_CELL, U as SPLIT_CELL_HORIZONTALLY, W as SPLIT_CELL_VERTICALLY, X as SELECT_TABLE_COLUMN, Y as MERGE_CELLS } from './split-cell-operation-9445e642.js';
+import { R as RTETableExtensionAnnotationTypeEnum, a as RTE_TABLE_HEAD_DEFAULT_BACKGROUND_COLOR, S as SettingEventHandler, T as TableSettingType, b as RowOperationEventHandler, C as ColumnOperationEventHandler, M as MergeCellsOperationEventHandler, c as SplitCellOperationEventHandler, d as RTETableAnnotation, e as RTETableCellAnnotation, f as RTETableHeadCellBlock, g as RTETableColorManager, h as RTETableBlock, i as generateTableBody, j as RTETableCellBlock, k as RTETableHeadBlock, l as RTETableBodyBlock, m as getParentBlockByType, n as RTETableHeadCellAnnotation, o as TableColumnStrategy, p as getAllTableRows, q as buildTableGrid, s as setSpanAttributes, r as findCellBlockById, t as getDefaultCellBlockTemplate, I as InsertTableColumnDirection, u as buildCellStartColumnMap, v as getTableColumnCount, w as getFirstNode, x as getCellSpan, y as createNewCell, z as MergeCellsOperationType, A as RTETableRowBlock, B as getActualColumnPosition, D as InsertTableRowDirection, E as RTE_TABLE_DEFAULT_COLORS, F as INSERT_TABLE_ROW_INTO_DIFFERENT_SECTION, G as INSERT_TABLE_ROW_INTO_SAME_SECTION, H as DELETE_TABLE_ROW, J as TOGGLE_HEADER_ROW, K as INSERT_TABLE_COLUMN, L as DELETE_TABLE_COLUMN, N as TOGGLE_HEADER_TABLE_COLUMN, O as ToggleHeaderTableColumnStrategy, P as SPLIT_TABLE_CELL, Q as REPLACE_TABLE_CELL, U as SPLIT_CELL_HORIZONTALLY, W as SPLIT_CELL_VERTICALLY, X as SELECT_TABLE_COLUMN, Y as MERGE_CELLS } from './split-cell-operation-5587f594.js';
 import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
-import { V as VegaInternalPopoverUpdateTarget, a as VegaInternalRTEExtensionTableCellsSelectionAnchor, b as VegaInternalRTEExtensionTableCellSelectionChange } from './vega-internal-event-id-70bd893d.js';
-import { V as VegaInternalThemeManager } from './dark-mode-style-controller-82e5c1c6.js';
+import { V as VegaInternalPopoverUpdateTarget, a as VegaInternalRTEExtensionTableCellsSelectionAnchor, b as VegaInternalRTEExtensionTableCellSelectionChange } from './vega-internal-event-id-194bac82.js';
+import { V as VegaInternalThemeManager } from './dark-mode-style-controller-e9a6b097.js';
 import { t as tryGetDocument } from './try-get-document-bef0f526.js';
 import { p as parseToPixelString } from './pixel-f32c07ce.js';
 import { c as cleanObject } from './object-0c277f57.js';
@@ -1221,6 +1221,15 @@ class VegaRTEExtension {
   static registerActionHandlerInterceptor(nodeOrBlockClassName, actionType, strategy) {
     ActionHandlerInterceptorRegistry.register(actionType, nodeOrBlockClassName, strategy);
   }
+  /**
+   * Registers a filter styles strategy for a specific block or node class.
+   *
+   * @param {string} blockOrNodeClassName - The name of the block or node class.
+   * @param {RTEFilterStylesStrategy} strategy - The filter styles strategy to register.
+   */
+  static registerFilterStylesStrategy(blockOrNodeClassName, strategy) {
+    RTEFilterStylesStrategyRegistry.register(blockOrNodeClassName, strategy);
+  }
   /**
    * Initializes the RTE extension with the provided context.
    *
@@ -1953,13 +1962,19 @@ class VegaRTELanguageExtension extends VegaRTEExtension {
    * @returns {VegaRTEContent} - The content.
    */
   getRTELatestValue(host) {
+    var _a;
     let result = host.value;
     if (this.extensionContext && this.extensionContext.isSourceEditMode() && host.shadowRoot) {
       const codeBlock = host.shadowRoot.querySelector('.source-view-container vega-code-block');
       if (codeBlock) {
-        result = VegaRTEContent.fromHtml(codeBlock.value.code, {
-          autoMatchFormat: host.sourceEditConfig.autoMatchFormat,
-        });
+        let options = undefined;
+        if (host.sourceEditConfig) {
+          options = {
+            autoMatchFormat: (_a = host.sourceEditConfig.autoMatchFormat) !== null && _a !== void 0 ? _a : true,
+            filterInlineStyles: host.sourceEditConfig.filterInlineStyles,
+          };
+        }
+        result = VegaRTEContent.fromHtml(codeBlock.value.code, options);
       }
     }
     return result;
@@ -2796,6 +2811,21 @@ class RTETableCaptionAnnotation extends BlockAnnotation {
     super(...arguments);
     this.type = RTETableExtensionAnnotationTypeEnum.CAPTION;
   }
+  /**
+   * Get the default styles for the table caption annotation.
+   *
+   * @returns {AnnotationStyle} The default styles for the table caption annotation.
+   */
+  static getDefaultStyles() {
+    return {
+      padding: '8px',
+      border: '1px solid #ddd',
+      borderBottom: 'none',
+      position: 'relative',
+      textAlign: 'center',
+      minHeight: '22px',
+    };
+  }
   /**
    * @inheritDoc
    */
@@ -2816,30 +2846,14 @@ class RTETableCaptionAnnotation extends BlockAnnotation {
   renderStyle(options) {
     if (!(options === null || options === void 0 ? void 0 : options.standalone))
       return null;
-    return {
-      padding: '8px',
-      border: '1px solid #ddd',
-      borderBottom: 'none',
-      backgroundColor: this.getCaptionBackgroundColor(),
-      position: 'relative',
-      textAlign: 'center',
-      minHeight: '22px',
-    };
+    return Object.assign(Object.assign({}, RTETableCaptionAnnotation.getDefaultStyles()), { backgroundColor: this.getCaptionBackgroundColor() });
   }
   /**
    * @inheritDoc
    */
   toJSON() {
     return {
-      caption: {
-        padding: '8px 12px',
-        border: '1px solid #ddd',
-        borderBottom: 'none',
-        backgroundColor: this.getCaptionBackgroundColor(),
-        position: 'relative',
-        textAlign: 'center',
-        minHeight: '22px',
-      },
+      caption: true,
     };
   }
   /**
@@ -2854,6 +2868,17 @@ class RTETableCaptionAnnotation extends BlockAnnotation {
   }
 }
 
+var __rest$3 = (undefined && undefined.__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;
+};
 /**
  * Represents the optional caption block for a table.
  */
@@ -2871,7 +2896,11 @@ class RTETableCaptionBlock extends RTEBlock {
    */
   static from(block, options) {
     const captionBlock = new RTETableCaptionBlock(block.id, options);
-    super.convertAnnotationsToMap(captionBlock.annotationMap, Object.assign({}, block.annotations));
+    const _a = block.annotations || {}, { caption } = _a, restAnnotations = __rest$3(_a, ["caption"]);
+    if (caption) {
+      captionBlock.annotationMap.set(RTETableExtensionAnnotationTypeEnum.CAPTION, new RTETableCaptionAnnotation());
+    }
+    super.convertAnnotationsToMap(captionBlock.annotationMap, Object.assign({}, restAnnotations));
     captionBlock.children = super.generateBlockChildren(block.children, options, captionBlock);
     return captionBlock;
   }
@@ -2900,9 +2929,11 @@ class RTETableCaptionBlock extends RTEBlock {
   /**
    * @inheritDoc
    */
-  toHtml() {
-    const childrenHtml = this.children.map((child) => child.toHtml()).join('');
-    const attrStr = super.generateAttributeString();
+  toHtml(options) {
+    const childrenHtml = this.children
+      .map((child) => child.toHtml(options))
+      .join('');
+    const attrStr = super.generateAttributeString(options);
     return `<caption${attrStr}>${childrenHtml}</caption>`;
   }
   /**
@@ -6352,7 +6383,7 @@ class TdToTableCellBlockStrategy extends BlockToRTEBlockStrategyAbstract {
     return RTETableCellBlock.from({
       id: generateUUID(),
       type: 'table-cell',
-      annotations: htmlElementToAnnotationGenerator.generate(RTETableHeadCellBlock, element, options),
+      annotations: htmlElementToAnnotationGenerator.generate(RTETableCellBlock, element, options),
       children: defaultChildren,
     }, options);
   }
@@ -6379,7 +6410,7 @@ class TdToTableCellBlockStrategy extends BlockToRTEBlockStrategyAbstract {
    * @returns {VegaRTETableHeadCellBlock['annotations']} The annotations for the table head element.
    */
   getTableHeadCellAnnotations(element, options) {
-    const result = htmlElementToAnnotationGenerator.generate(RTETableCellBlock, element, options);
+    const result = htmlElementToAnnotationGenerator.generate(RTETableHeadCellBlock, element, options);
     if (result && result.tableCell) {
       // If the background color matches the default, remove it from the annotation to avoid unnecessary styling
       const colorKey = RTETableColorManager.getColorKey(result.tableCell.backgroundColor, true);
@@ -6416,10 +6447,11 @@ class CaptionToCaptionBlockStrategy extends ElementToDTOStrategy {
    * @inheritDoc
    */
   handle(elementsArray, options) {
+    const captionAnnotations = this.getTableCaptionAnnotations(elementsArray[0], options);
     return RTETableCaptionBlock.from({
       id: generateUUID(),
       type: 'table-caption',
-      annotations: this.getTableCaptionAnnotations(elementsArray[0], options),
+      annotations: Object.assign(Object.assign({}, captionAnnotations), { caption: true }),
       children: [],
     }, options);
   }
@@ -7188,6 +7220,144 @@ class PreventTableInsertParagraphInterceptor extends ActionHandlerInterceptor {
   }
 }
 
+/**
+ * A strategy defines how to filter and refill styles for table elements.
+ */
+class TableBlockFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = RTETableAnnotation.getDefaultStyles();
+    this.elementTagName = 'table';
+  }
+  /**
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return this.isTableBlock(blockOrNodeInstance.constructor.name);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return (this.isTableBlock(blockOrNodeClassName) && element.tagName.toLowerCase() === this.elementTagName);
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
+  /**
+   * Checks if the given class name corresponds to a table block.
+   *
+   * @param {string} className - The class name to check.
+   * @returns {boolean} - True if it's a table block, false otherwise.
+   */
+  isTableBlock(className) {
+    return className === 'RTETableBlock';
+  }
+}
+
+/**
+ * A strategy defines how to filter and refill styles for table caption elements.
+ */
+class TableCaptionFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = RTETableCaptionAnnotation.getDefaultStyles();
+    this.elementTagName = 'table caption';
+  }
+  /**
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return this.isTableCaption(blockOrNodeInstance.constructor.name);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return this.isTableCaption(blockOrNodeClassName) && element.nodeName === 'CAPTION';
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
+  /**
+   * Checks if the given class name corresponds to a table caption block.
+   *
+   * @param {string} className - The class name to check.
+   * @returns {boolean} - True if it's a table caption block, false otherwise.
+   */
+  isTableCaption(className) {
+    return className === 'RTETableCaptionBlock';
+  }
+}
+
+/**
+ * A strategy defines how to filter and refill styles for table cell elements.
+ */
+class TableCellFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor(cellType = 'td') {
+    super();
+    this.stylesToBeFiltered = RTETableCellAnnotation.getDefaultStyles();
+    this.elementTagName = '';
+    this.stylesWithRGBColor = RTETableCellAnnotation.getDefaultStyles(false);
+    this.cellBlockClassName = '';
+    this.elementTagName = cellType;
+    this.cellBlockClassName = cellType === 'td' ? 'RTETableCellBlock' : 'RTETableHeadCellBlock';
+  }
+  /**
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return this.isTableCell(blockOrNodeInstance.constructor.name);
+  }
+  /**
+   * The table cell border color can be represented in different formats (e.g., hex, rgb), so we need to ensure that we can handle both cases.
+   *
+   * @inheritDoc
+   */
+  filterAndDeleteStyles(fullStyles, classNames) {
+    this.convertDefaultBorderColorFromRGBToHex(fullStyles);
+    return super.filterAndDeleteStyles(fullStyles, classNames);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return (this.isTableCell(blockOrNodeClassName) && element.nodeName === this.elementTagName.toUpperCase());
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
+  /**
+   * Checks if the given class name corresponds to a table cell block.
+   *
+   * @param {string} className - The class name to check.
+   * @returns {boolean} - True if it's a table cell block, false otherwise.
+   */
+  isTableCell(className) {
+    return className === this.cellBlockClassName;
+  }
+  /**
+   * Converts the default border color from RGB to HEX if necessary.
+   *
+   * @param {Nullable<RTEFilterStyles>} styles - The styles object to be modified.
+   */
+  convertDefaultBorderColorFromRGBToHex(styles) {
+    const defaultRGBBorder = this.stylesWithRGBColor.border;
+    if (styles && styles.border && styles.border === defaultRGBBorder) {
+      styles.border = this.stylesToBeFiltered.border; // Use the hex color from stylesToBeFiltered
+    }
+  }
+}
+
 /**
  * Function extension class for Vega Rich Text Editor.
  */
@@ -7288,6 +7458,10 @@ class VegaRTETableExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandlerInterceptor(RTETableCellBlock.name, ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
   VegaRTEExtension.registerActionHandlerInterceptor(RTETableHeadCellBlock.name, ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
   VegaRTEExtension.registerActionHandlerInterceptor(RTETableBlock.name, ModifyContentActionType.INSERT_NEW_PARAGRAPH, new PreventTableInsertParagraphInterceptor());
+  VegaRTEExtension.registerFilterStylesStrategy(RTETableBlock.name, new TableBlockFilterStylesStrategy());
+  VegaRTEExtension.registerFilterStylesStrategy(RTETableCaptionBlock.name, new TableCaptionFilterStylesStrategy());
+  VegaRTEExtension.registerFilterStylesStrategy(RTETableCellBlock.name, new TableCellFilterStylesStrategy());
+  VegaRTEExtension.registerFilterStylesStrategy(RTETableHeadCellBlock.name, new TableCellFilterStylesStrategy('th'));
 })();
 
 /**