@heartlandone/vega 2.80.0 → 2.82.0

package/dist/collection/components/vega-rich-text-editor/dto/setup.js

@@ -31,6 +31,15 @@ import { AlignmentFilterStylesStrategy } from './filter-styles-strategies/text-b
 import { CodeFilterStylesStrategy } from './filter-styles-strategies/text-node/code-filter-styles-strategy';
 import { LinkFilterStylesStrategy } from './filter-styles-strategies/text-node/link-filter-styles-strategy';
 import { TextFormatFilterStylesStrategy } from './filter-styles-strategies/text-node/text-format-filter-styles-strategy';
+import { ParagraphFilterStylesStrategy } from './filter-styles-strategies/text-block/paragraph-filter-styles-strategy';
+import { HeadingFilterStylesStrategy } from './filter-styles-strategies/text-block/heading-filter-styles-strategy';
+import { TitleFilterStylesStrategy } from './filter-styles-strategies/text-block/title-filter-styles-strategy';
+import { TitleHeadingNodeFilterStylesStrategy } from './filter-styles-strategies/text-node/title-heading-node-filter-styles-strategy';
+import { CodeBlockFilterStylesStrategy } from './filter-styles-strategies/code-block/code-block-filter-styles-strategy';
+import { RTECodeBlockNode } from './nodes/code-block-node';
+import { CodeBlockNodeFilterStylesStrategy } from './filter-styles-strategies/code-block/code-node-filter-styles-strategy';
+import { ListHeadingItemBlockFilterStylesStrategy } from './filter-styles-strategies/list-block/list-heading-item-block-filter-styles-strategy';
+import { ListTitleItemBlockFilterStylesStrategy } from './filter-styles-strategies/list-block/list-title-item-block-filter-styles-strategy';
 /**
  * Register and setup the default DTO classes and their basic action strategies.
  */
@@ -66,22 +75,43 @@ ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new SpanImageToR
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new VegaImageToRTEImageBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new ImgToRTEImageBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new InlineBlockToRTETextBlockStrategy());
-ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new JiraCodeToRTECodeBlockStrategy());
-ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new VegaCodeBlockToRTECodeBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new LiToRTEListItemBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new ULNotLiChildToRTEListItemBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new OlToRTEListBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new UlToRTEListBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new HtmlBlockStrategy());
+//!important: Code block strategies must be registered after HtmlBlockStrategy because registerElementToBlockStrategy uses unshift, giving later registrations higher priority.
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new JiraCodeToRTECodeBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new VegaCodeBlockToRTECodeBlockStrategy());
 ElementToDTOClassStrategyManager.registerElementToNodeStrategy(new InlineElementToTextNodeStrategy());
 ElementToDTOClassStrategyManager.registerElementToNodeStrategy(new PlainTextToTextNodeStrategy());
 // Register filter styles strategies (remove redundant default styles during HTML → DTO conversion)
-RTEFilterStylesStrategyRegistry.register(RTEListBlock.name, new ListBlockFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListItemBlockFilterStylesStrategy());
 RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new AlignmentFilterStylesStrategy());
 RTEFilterStylesStrategyRegistry.register(RTEListBlock.name, new AlignmentFilterStylesStrategy());
 RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new AlignmentFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTEImageNode.name, new ImageFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new LinkFilterStylesStrategy());
 RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new TextFormatFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new ParagraphFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(1));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(2));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(3));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(4));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(5));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(6));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new TitleFilterStylesStrategy('title'));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new TitleFilterStylesStrategy('subtitle'));
+RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new TitleHeadingNodeFilterStylesStrategy());
 RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new CodeFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new LinkFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEImageNode.name, new ImageFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTECodeBlock.name, new CodeBlockFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTECodeBlockNode.name, new CodeBlockNodeFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListBlock.name, new ListBlockFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListItemBlockFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(1));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(2));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(3));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(4));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(5));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(6));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListTitleItemBlockFilterStylesStrategy('title'));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListTitleItemBlockFilterStylesStrategy('subtitle'));

package/dist/collection/components/vega-rich-text-editor/extensions/extension.abstract.js

@@ -8,6 +8,7 @@ import { VegaRTEExtensionRenderer } from './base-extension-renderer';
 import { ActionHandlerInterceptorRegistry } from '../dto/action-handle-strategies/action-handle-interceptor-registry';
 import { methodPlaceholder } from 'vega-slimmer/core';
 import htmlElementToAnnotationGenerator from '../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
+import { RTEFilterStylesStrategyRegistry } from '../dto/filter-styles-strategies/filter-styles-strategy-registry';
 /**
  * Abstract class for Vega Rich Text Editor extensions.
  */
@@ -39,6 +40,15 @@ export 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.
    *

package/dist/collection/components/vega-rich-text-editor/extensions/languages/language-extension.js

@@ -102,13 +102,19 @@ export 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;

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

@@ -35,6 +35,17 @@ export class RTETableAnnotation extends BlockAnnotation {
   static from(value, useInternalStyle = true) {
     return [RTETableExtensionAnnotationTypeEnum.TABLE, new RTETableAnnotation(value, useInternalStyle)];
   }
+  /**
+   * Get the default styles for the table annotation.
+   *
+   * @returns {AnnotationStyle} The default styles for the table annotation.
+   */
+  static getDefaultStyles() {
+    return {
+      borderCollapse: RTETableAnnotation.DEFAULT_BORDER_COLLAPSE,
+      margin: RTETableAnnotation.DEFAULT_ALIGNMENT_STYLE_VALUE,
+    };
+  }
   /**
    * Generates the CSS border string from the border properties.
    *
@@ -98,9 +109,14 @@ export class RTETableAnnotation extends BlockAnnotation {
     if (!this.alignment)
       return {};
     return {
-      margin: this.alignment === 'center' ? '0 auto' : this.alignment === 'left' ? '0' : '0 0 0 auto',
+      margin: this.alignment === 'center'
+        ? RTETableAnnotation.DEFAULT_ALIGNMENT_STYLE_VALUE
+        : this.alignment === 'left'
+          ? '0'
+          : '0 0 0 auto',
     };
   }
 }
 RTETableAnnotation.DEFAULT_BORDER_COLLAPSE = 'collapse';
 RTETableAnnotation.DEFAULT_ALIGNMENT = 'center';
+RTETableAnnotation.DEFAULT_ALIGNMENT_STYLE_VALUE = '0 auto';

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

@@ -10,6 +10,21 @@ export 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
    */
@@ -30,30 +45,14 @@ export 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,
     };
   }
   /**

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

@@ -43,6 +43,24 @@ export class RTETableCellAnnotation extends BlockAnnotation {
       new RTETableCellAnnotation(cellAnnotation, useInternalStyle),
     ];
   }
+  /**
+   * Get the default styles for the table annotation.
+   *
+   * @param {boolean} isHexColor - Whether to return color values as hex codes.
+   * @returns {AnnotationStyle} The default styles for the table annotation.
+   */
+  static getDefaultStyles(isHexColor = true) {
+    return {
+      padding: RTETableCellAnnotation.DEFAULT_PADDING,
+      textAlign: RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN,
+      verticalAlign: RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN,
+      minWidth: RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH,
+      boxSizing: RTETableCellAnnotation.DEFAULT_BOX_SIZING,
+      border: `${RTETableCellAnnotation.DEFAULT_BORDER.style} ${RTETableCellAnnotation.DEFAULT_BORDER.width} ${isHexColor
+        ? RTETableCellAnnotation.DEFAULT_BORDER.color
+        : RTETableCellAnnotation.DEFAULT_BORDER_RGB_COLOR}`,
+    };
+  }
   /**
    * Generates the CSS border string from the border properties.
    *
@@ -186,6 +204,7 @@ RTETableCellAnnotation.DEFAULT_BORDER = {
   width: '1px',
   color: '#ddd',
 };
+RTETableCellAnnotation.DEFAULT_BORDER_RGB_COLOR = 'rgb(221, 221, 221)'; // Equivalent RGB for #ddd
 RTETableCellAnnotation.DEFAULT_HORIZONTAL_TEXT_ALIGN = 'left';
 RTETableCellAnnotation.DEFAULT_VERTICAL_TEXT_ALIGN = 'middle';
 RTETableCellAnnotation.DEFAULT_CELL_MIN_WIDTH = '55px';

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

@@ -67,9 +67,9 @@ export class RTETableBlock 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 `<table${attrStr}>${childrenHtml}</table>`;
   }
   /**

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

@@ -42,9 +42,9 @@ export class RTETableBodyBlock 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 `<tbody${attrStr}>${childrenHtml}</tbody>`;
   }
   /**

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

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
 import { RTEBlock } from '../../../dto/blocks/block.abstract';
 import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
 import { ModifyContentActionType } from '../../../dto/actions/modify-content-action.abstract';
@@ -22,7 +33,11 @@ export 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(_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;
   }
@@ -51,9 +66,11 @@ export 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>`;
   }
   /**

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

@@ -70,9 +70,9 @@ export class RTETableCellBlock 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 `<td${attrStr}>${childrenHtml}</td>`;
   }
   /**

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

@@ -42,13 +42,13 @@ export class RTETableHeadBlock extends RTEBlock {
   /**
    * @inheritDoc
    */
-  toHtml() {
+  toHtml(options) {
     const childrenHtml = this.children
       .map((child) => {
-      return child.toHtml();
+      return child.toHtml(options);
     })
       .join('');
-    const attrStr = super.generateAttributeString();
+    const attrStr = super.generateAttributeString(options);
     return `<thead${attrStr}>${childrenHtml}</thead>`;
   }
   /**

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

@@ -39,9 +39,9 @@ export class RTETableHeadCellBlock extends RTETableCellBlock {
   /**
    * @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 `<th${attrStr}>${childrenHtml}</th>`;
   }
   /**

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

@@ -42,13 +42,13 @@ export class RTETableRowBlock extends RTEBlock {
   /**
    * @inheritDoc
    */
-  toHtml() {
+  toHtml(options) {
     const childrenHtml = this.children
       .map((child) => {
-      return child.toHtml();
+      return child.toHtml(options);
     })
       .join('');
-    const attrStr = super.generateAttributeString();
+    const attrStr = super.generateAttributeString(options);
     return `<tr${attrStr}>${childrenHtml}</tr>`;
   }
   /**

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

@@ -27,10 +27,11 @@ export 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);
   }

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

@@ -51,7 +51,7 @@ export 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);
   }
@@ -78,7 +78,7 @@ export 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);

package/dist/collection/components/vega-rich-text-editor/extensions/table/filter-styles-strategies/table-block/table-block-filter-styles-strategy.js

@@ -0,0 +1,39 @@
+import { RTEFilterStylesStrategy, } from '../../../../dto/filter-styles-strategies/filter-styles-strategy.abstract';
+import { RTETableAnnotation } from '../../annotations/table-annotation';
+/**
+ * A strategy defines how to filter and refill styles for table elements.
+ */
+export 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';
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/filter-styles-strategies/table-caption/table-caption-filter-styles-strategy.js

@@ -0,0 +1,39 @@
+import { RTEFilterStylesStrategy, } from '../../../../dto/filter-styles-strategies/filter-styles-strategy.abstract';
+import { RTETableCaptionAnnotation } from '../../annotations/table-caption-annotation';
+/**
+ * A strategy defines how to filter and refill styles for table caption elements.
+ */
+export 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';
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/filter-styles-strategies/table-cell/table-cell-filter-styles-strategy.js

@@ -0,0 +1,63 @@
+import { RTEFilterStylesStrategy, } from '../../../../dto/filter-styles-strategies/filter-styles-strategy.abstract';
+import { RTETableCellAnnotation } from '../../annotations/table-cell-annotation';
+/**
+ * A strategy defines how to filter and refill styles for table cell elements.
+ */
+export 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
+    }
+  }
+}

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

@@ -71,6 +71,9 @@ import { InsertTableRowIntoDifferentSectionStrategy } from './action-handler-str
 import { INSERT_TABLE_ROW_INTO_SAME_SECTION } from './actions/insert-table-row-into-same-section-action';
 import { InsertTableRowIntoSameSectionStrategy } from './action-handler-strategies/insert-table-row-into-same-section-strategy';
 import { PreventTableInsertParagraphInterceptor } from './action-handler-interceptors/prevent-table-insert-paragraph-interceptor';
+import { TableBlockFilterStylesStrategy } from './filter-styles-strategies/table-block/table-block-filter-styles-strategy';
+import { TableCaptionFilterStylesStrategy } from './filter-styles-strategies/table-caption/table-caption-filter-styles-strategy';
+import { TableCellFilterStylesStrategy } from './filter-styles-strategies/table-cell/table-cell-filter-styles-strategy';
 /**
  * Function extension class for Vega Rich Text Editor.
  */
@@ -171,4 +174,8 @@ export 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'));
 })();

package/dist/collection/components/vega-rich-text-editor/helpers/utils.js

@@ -0,0 +1,24 @@
+import { dashCaseToCamel } from '../../../utils/string';
+/**
+ * Creates a style map from the inline styles of an HTML element. This function extracts the 'style' attribute from the given element.
+ *
+ * @param {HTMLElement} element The HTML element from which to extract inline styles.
+ * @returns {AnnotationStyle} An object representing the custom style annotations.
+ */
+export function createStyleMapFromElement(element) {
+  const customStyle = element.getAttribute('style');
+  if (!customStyle)
+    return {};
+  const styleValue = customStyle.split(';').filter(Boolean);
+  return styleValue
+    .filter((key) => key !== ' ')
+    .map((key) => {
+    // to remove redundant quote pairs if needed, for example: ['fontFamily: "Roboto Mono"'] will be updated to ['fontFamily: Roboto Mono']
+    const styleObject = key.replace(/(['"])(.*?)\1/g, '$2').split(':');
+    const styleKey = dashCaseToCamel(styleObject[0].trim());
+    return {
+      [styleKey]: styleObject[1].trim().replace(';', ''),
+    };
+  })
+    .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+}

package/dist/collection/components/vega-rich-text-editor/public-api.js

@@ -44,3 +44,5 @@ export { BlockToRTEBlockStrategyAbstract } from './slimmers/controllers/helper/e
 export { htmlElementToAnnotationGenerator };
 // preset toolbar buttons
 export { VegaRTEPresetToolbarItems } from './constants/constant';
+// filter styles strategy
+export { RTEFilterStylesStrategy } from './dto/filter-styles-strategies/filter-styles-strategy.abstract';

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/custom-style-annotation-handler.js

@@ -1,4 +1,4 @@
-import { dashCaseToCamel } from '../../../../../../../utils/string';
+import { createStyleMapFromElement } from '../../../../../helpers/utils';
 import { AnnotationGeneratorStrategyAbstract } from './annotation-generator-strategy.abstract';
 /** Handle custom style annotation */
 export class CustomStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
@@ -19,30 +19,7 @@ export class CustomStyleAnnotationHandler extends AnnotationGeneratorStrategyAbs
    * @returns {VegaRTETextAnnotations} - Annotation.
    */
   handle(element) {
-    const styles = this.generateCustomStyleAnnotations(element);
+    const styles = createStyleMapFromElement(element);
     return Object.keys(styles).length > 0 ? { customStyle: styles } : {};
   }
-  /**
-   * Obtain and format the style of element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {AnnotationStyle} - Record<string, string>.
-   */
-  generateCustomStyleAnnotations(element) {
-    const customStyle = element.getAttribute('style');
-    if (!customStyle)
-      return {};
-    const styleValue = customStyle.split(';').filter(Boolean);
-    return styleValue
-      .filter((key) => key !== ' ')
-      .map((key) => {
-      // to remove redundant quote pairs if needed, for example: ['fontFamily: "Roboto Mono"'] will be updated to ['fontFamily: Roboto Mono']
-      const styleObject = key.replace(/(['"])(.*?)\1/g, '$2').split(':');
-      const styleKey = dashCaseToCamel(styleObject[0].trim());
-      return {
-        [styleKey]: styleObject[1].trim().replace(';', ''),
-      };
-    })
-      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
-  }
 }