@globalpayments/vega 2.66.0 → 2.68.0

package/dist/collection/components/vega-modal/vega-modal.js

@@ -24,6 +24,7 @@ import { VegaModalOpenStateController } from './slimmers/controllers/vega-modal-
 import { VegaModalBackdropController } from './slimmers/controllers/vega-modal-backdrop-controller';
 import { VegaModalOpenedModalStackController } from './slimmers/controllers/vega-modal-opened-modal-stack-controller';
 import { VegaModalZIndexController } from './slimmers/controllers/vega-modal-z-index-controller';
+import { VegaModalOpenState } from './slimmers/models/vega-modal-open-state';
 /**
  * @vegaVersion 1.0.6
  */
@@ -45,6 +46,7 @@ export class VegaModal {
     this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(mainContentStyle);
     this.deprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaModal, 'isVerticallyCentered', 'isVerticallyCenter', false);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaModalRuntimeMetricsPayloadDefinition);
+    this.openState = this.initOpenState();
     /**
      * Provides options for controlling the behavior of the backdrop.
      * - `default`:
@@ -131,6 +133,9 @@ export class VegaModal {
      */
     this.handleClose = undefined;
   }
+  watchOpenState() {
+    methodPlaceholder();
+  }
   /**
    * The below method is e2e-test covered in
    * @see{module:vega-modal-size-number-e2e}
@@ -141,14 +146,11 @@ export class VegaModal {
     methodPlaceholder();
   }
   watchOpen() {
-    methodPlaceholder();
+    this.openState = new VegaModalOpenState(this.open, 'property');
   }
   watchContentMaxHeight() {
     methodPlaceholder();
   }
-  disconnectedCallback() {
-    this.open = false;
-  }
   /**
    * Clicking on a non-static current modal should close this modal, not other modals.
    * The below method is e2e-test covered in
@@ -194,20 +196,17 @@ export class VegaModal {
    *
    */
   async modal(option) {
-    switch (option) {
-      case 'show':
-        this.open = true;
-        break;
-      case 'hide':
-        this.open = false;
-        break;
-      default:
-        break;
-    }
+    methodPlaceholder(option);
   }
   render() {
     return sanitizeVegaComponent(this.renderer.render(), this.host);
   }
+  /**
+   * Returns the initial open state of the modal.
+   */
+  initOpenState() {
+    return new VegaModalOpenState(this.open, 'property');
+  }
   static get is() { return "vega-modal"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -503,7 +502,8 @@ export class VegaModal {
     }
   }; }
   static get states() { return {
-    "currentBreakpoint": {}
+    "currentBreakpoint": {},
+    "openState": {}
   }; }
   static get events() { return [{
       "method": "vegaClose",
@@ -516,7 +516,7 @@ export class VegaModal {
             "name": "vegaVersion",
             "text": "1.0.10"
           }],
-        "text": "An event emitter notifying the modal close event."
+        "text": "An event emitter notifying the modal close event.  If a method is defined for this event, invoking event.preventDefault() prevents the modal from closing."
       },
       "complexType": {
         "original": "any",
@@ -610,6 +610,9 @@ export class VegaModal {
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "openState",
+      "methodName": "watchOpenState"
+    }, {
       "propName": "size",
       "methodName": "watchSize"
     }, {

package/dist/collection/components/vega-rich-text-content/slimmers/controllers/vega-rich-text-content-extensions-styles-controller.js

@@ -0,0 +1,60 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { isArrayEqual } from '../../../../utils/array';
+/**
+ * attach the extension styles to the host.
+ */
+export class RTEExtensionStylesController extends VegaSlimmer {
+  /**
+   * Attach extension styles to the host after load.
+   */
+  attachExtensionStyles() {
+    this.attachStylesToHost();
+  }
+  /**
+   * Update extension context when extensions property changes.
+   *
+   * @param {VegaRTEExtension[]} newValue - New extensions array.
+   * @param {VegaRTEExtension[]} oldValue - Old extensions array.
+   */
+  handleExtensionsChange(newValue, oldValue) {
+    if (!isArrayEqual(newValue, oldValue, false, (a, b) => a === b ? 0 : 1)) {
+      this.attachStylesToHost();
+    }
+  }
+  /**
+   * Collects and attaches custom styles from all extensions to the host component.
+   */
+  attachStylesToHost() {
+    if (this.extensions) {
+      let customStyles = '';
+      for (const extension of this.extensions) {
+        const extensionStyles = extension.collectExtensionRendererStyles();
+        if (extensionStyles) {
+          customStyles += `${extensionStyles}\n`;
+        }
+      }
+      this.extensionStyles = customStyles;
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], RTEExtensionStylesController.prototype, "extensions", void 0);
+__decorate([
+  MapToComponentField()
+], RTEExtensionStylesController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], RTEExtensionStylesController.prototype, "extensionStyles", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], RTEExtensionStylesController.prototype, "attachExtensionStyles", null);
+__decorate([
+  MapToComponentMethod('watchExtensions')
+], RTEExtensionStylesController.prototype, "handleExtensionsChange", null);

package/dist/collection/components/vega-rich-text-content/slimmers/renderers/vega-rich-text-content-renderer.js

@@ -10,6 +10,7 @@ import { VegaDarkModeStyleController } from '../../../../helpers/theme/controlle
 import { TextColorToolbarButtonSlimmer } from '../../../vega-rich-text-editor/slimmers/renderers/tools/text-color-toolbar-button-slimmer';
 import { VegaRTEContent } from '../../../vega-rich-text-editor/dto/content-state';
 import RTEBlockRendererFactory from '../../../vega-rich-text-editor/dto/renderers/renderer-factory';
+import { vegaNonceManager } from '../../../../helpers/csp/vega-nonce-manager';
 export class VegaRichTextContentRenderer extends VegaSlimmer {
   constructor() {
     super();
@@ -30,7 +31,9 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
     return this.richTextContentRef;
   }
   render() {
-    return h(Host, null, this.renderRichTextContent());
+    return (h(Host, null,
+      this.extensionStyles ? (h("style", { nonce: vegaNonceManager.nonce, class: "rte-extension-styles" }, this.extensionStyles)) : null,
+      this.renderRichTextContent()));
   }
   setRTEContent() {
     if (this.content && !(this.content instanceof VegaRTEContent)) {
@@ -76,6 +79,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaRichTextContentRenderer.prototype, "content", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextContentRenderer.prototype, "extensionStyles", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaRichTextContentRenderer.prototype, "componentWillLoad", null);

package/dist/collection/components/vega-rich-text-content/vega-rich-text-content.js

@@ -12,6 +12,7 @@ import { VegaRichTextContentRenderer } from './slimmers/renderers/vega-rich-text
 import { VegaRichTextContentStateController } from './slimmers/controllers/vega-rich-text-content-state-controller';
 import { findParent } from '../../utils/ui';
 import { waitForComponentDidRender } from '../../helpers/common';
+import { RTEExtensionStylesController } from './slimmers/controllers/vega-rich-text-content-extensions-styles-controller';
 /**
  * @vegaVersion 2.34.0
  */
@@ -21,12 +22,17 @@ export class VegaRichTextContent {
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.vegaRichTextContentRenderer = new VegaRichTextContentRenderer();
     this.vegaRichTextContentStateController = new VegaRichTextContentStateController();
+    this.vegaRichTextContentExtensionsStylesController = new RTEExtensionStylesController();
     /**
      * Specifies whether the rich text content is editable.
      *
      * @vegaVersion 2.34.0
      */
     this.contentEditable = false;
+    /**
+     * Holds the custom styles generated by extensions.
+     */
+    this.extensionStyles = '';
     /**
      * Defines the configuration for rich text content extensions.
      * It enables support for custom nodes, ensuring that extended content is rendered correctly.
@@ -38,6 +44,9 @@ export class VegaRichTextContent {
   watchValueUpdate() {
     methodPlaceholder();
   }
+  watchExtensions(newValue, oldValue) {
+    methodPlaceholder(newValue, oldValue);
+  }
   /**
    * Invoke this method to focus on rich text content editable div
    *
@@ -112,7 +121,8 @@ export class VegaRichTextContent {
   }; }
   static get states() { return {
     "placeholder": {},
-    "contentEditable": {}
+    "contentEditable": {},
+    "extensionStyles": {}
   }; }
   static get methods() { return {
     "vegaFocus": {
@@ -146,6 +156,9 @@ export class VegaRichTextContent {
   static get watchers() { return [{
       "propName": "content",
       "methodName": "watchValueUpdate"
+    }, {
+      "propName": "extensions",
+      "methodName": "watchExtensions"
     }]; }
 }
 __decorate([
@@ -160,3 +173,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextContent.prototype, "vegaRichTextContentStateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextContent.prototype, "vegaRichTextContentExtensionsStylesController", void 0);

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/action-handle-interceptor-registry.js

@@ -0,0 +1,61 @@
+import { ModifyContentAction } from '../actions/modify-content-action.abstract';
+/**
+ * Registry for action handler interceptors, which can register and retrieve interceptors for specific actions and targets.
+ */
+export class ActionHandlerInterceptorRegistry {
+  /**
+   * Bind a specific strategy to a special action type of the rich text node.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {string} targetClass - The rich text node class name.
+   * @param {ActionHandlerInterceptor} strategy - The action handle strategy instance.
+   */
+  static register(actionType, targetClass, strategy) {
+    if (!this.registry.has(targetClass)) {
+      this.registry.set(targetClass, new Map());
+    }
+    /* eslint-disable @typescript-eslint/no-non-null-assertion */
+    if (!this.registry.get(targetClass).has(actionType)) {
+      this.registry.get(targetClass).set(actionType, new Set());
+    }
+    this.registry.get(targetClass).get(actionType).add(strategy);
+    /* eslint-enable @typescript-eslint/no-non-null-assertion */
+  }
+  /**
+   * Unregister the strategy for the specific action type and target class.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {string} targetClass - The rich text node class name.
+   * @param {ActionHandlerInterceptor} strategy - The action handler interceptor instance.
+   */
+  static unregister(actionType, targetClass, strategy) {
+    const strategyMap = this.registry.get(targetClass);
+    if (strategyMap) {
+      const strategySet = strategyMap.get(actionType);
+      if (strategySet) {
+        strategySet.delete(strategy);
+      }
+    }
+  }
+  /**
+   * Get the special interceptor strategy that before handle the action logic.
+   *
+   * @typedef T generic type
+   * @typedef target generic type
+   * @param {RTEActionType} action - The special action .
+   * @param {string} targetClass - The rich text node class name.
+   * @returns {Nullable<ActionHandlerInterceptor<T, target>>} - The action handler interceptor instance or null if not found.
+   */
+  static get(action, targetClass) {
+    const targetClassName = targetClass.constructor.name;
+    const actionType = action instanceof ModifyContentAction ? action.type : action.constructor.name;
+    const strategyMap = this.registry.get(targetClassName);
+    if (strategyMap) {
+      const set = strategyMap.get(actionType);
+      if (set && set.size > 0) {
+        return Array.from(set).find((interceptor) => interceptor.canIntercept(action, targetClass));
+      }
+    }
+  }
+}
+ActionHandlerInterceptorRegistry.registry = new Map();

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/action-handle-interceptor.abstract.js

@@ -0,0 +1,5 @@
+/**
+ * Abstract class for action handler interceptors, which can intercept actions before they are handled.
+ */
+export class ActionHandlerInterceptor {
+}

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/action-handle-strategy-registry.js

@@ -1,5 +1,6 @@
 import { LogUtility } from '../../../../utils/log';
 import { ModifyContentAction } from '../actions/modify-content-action.abstract';
+import { ActionHandlerInterceptorRegistry } from './action-handle-interceptor-registry';
 /**
  * The strategies registry, contains static methods `register`, `get` and `getStrategyAndExecute`.
  */
@@ -18,6 +19,18 @@ export class ActionHandleStrategyRegistry {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     this.registry.get(targetClass).set(actionType, strategy);
   }
+  /**
+   * Unregister the strategy for the specific action type and target class.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {string} targetClass - The rich text node class name.
+   */
+  static unregister(actionType, targetClass) {
+    const strategyMap = this.registry.get(targetClass);
+    if (strategyMap) {
+      strategyMap.delete(actionType);
+    }
+  }
   /**
    * Get the special strategy that handle the action logic.
    *
@@ -43,20 +56,31 @@ export class ActionHandleStrategyRegistry {
    * @returns {R | undefined} The return value of the strategy method execute invoke result.
    */
   static executeTheStrategy(action, RTEInstance) {
-    const actionType = action instanceof ModifyContentAction ? action.type : action.constructor.name;
-    const strategy = ActionHandleStrategyRegistry.get(actionType, RTEInstance.constructor.name);
-    if (strategy) {
-      return strategy.execute(action, RTEInstance);
+    const interceptor = ActionHandlerInterceptorRegistry.get(action, RTEInstance);
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    const executeStrategy = () => {
+      const actionType = action instanceof ModifyContentAction ? action.type : action.constructor.name;
+      const strategy = ActionHandleStrategyRegistry.get(actionType, RTEInstance.constructor.name);
+      if (strategy) {
+        action['executedFlag'] = true;
+        return strategy.execute(action, RTEInstance);
+      }
+      else {
+        LogUtility.warn(`Type ${actionType} action handle strategy is not registered in class ${RTEInstance.constructor.name}`);
+      }
+    };
+    if (interceptor) {
+      return interceptor.intercept(executeStrategy, action, RTEInstance);
     }
     else {
-      LogUtility.error(`Type ${actionType} action handle strategy is not registered in class ${RTEInstance.constructor.name}`);
+      return executeStrategy();
     }
   }
   /**
    * Check if the action type can be handled by strategy for the specific RTE instance.
    *
    * @param {string} actionType - The special action type or the action class name.
-   * @param {RTENode | RTEBlock} RTEInstance - The rich text editor node.
+   * @param {RTENode | RTEBlock | VegaRTEContent} RTEInstance - The rich text editor node.
    * @returns {boolean} - Whether the action type can be handled by the strategy.
    */
   static canHandle(actionType, RTEInstance) {

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/block-delete-node-content-strategy.js

@@ -77,9 +77,7 @@ export class BlockDeleteNodeContentStrategy extends ActionHandleStrategy {
       if (currentBlockIndex > 0) {
         return currentBlock.parent.children[currentBlockIndex - 1];
       }
-      else if ((currentBlock.parent['type'] === 'number-list' ||
-        currentBlock.parent['type'] === 'bullet-list') &&
-        currentBlockIndex === 0) {
+      else if (this.isRTEBlock(currentBlock.parent) && currentBlockIndex === 0) {
         return this.getPreviousBlock(currentBlock.parent);
       }
     }
@@ -130,4 +128,13 @@ export class BlockDeleteNodeContentStrategy extends ActionHandleStrategy {
       }
     }
   }
+  /**
+   * Checks if the given instance is not the root content block.
+   *
+   * @param {RTEBlock | VegaRTEContent} block - The instance to check.
+   * @returns {boolean} True if the block is not the root content block, false otherwise.
+   */
+  isRTEBlock(block) {
+    return block && block.constructor.name !== 'VegaRTEContent';
+  }
 }

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/block-delete-text-or-decorator-node-strategy.js

@@ -101,7 +101,8 @@ export class BlockDeleteTextOrDecoratorNodeStrategy extends BlockDeleteNodeConte
           }
         }
       }
-      //Remove the paragraph block if the content is empty
+      // Remove the paragraph block if the content is empty
+      // TODO: Check whether need to remove below logic because already handled the same logic in remove node strategy
       if (target.children.length === 0) {
         target.parent.apply(new RemoveChildrenAction(target));
       }

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/paste-content-strategy.js

@@ -0,0 +1,28 @@
+import { InsertChildrenAfterAction } from '../../actions/insert-children-after-block';
+import { InsertChildrenBeforeAction } from '../../actions/insert-children-before-block';
+import { SplitBlockWithNodeAction } from '../../actions/split-block-with-node-action';
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Strategy to handle the paste content into function block.
+ */
+export class PasteContentStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    if (target.parent) {
+      const { blocksToBeInserted, startNode, startOffset } = action;
+      let futureFocusBlock = target;
+      if (startNode === target.children[0] && startOffset === 0) {
+        target.parent.apply(new InsertChildrenBeforeAction(target, ...blocksToBeInserted));
+      }
+      else {
+        const breakAction = new SplitBlockWithNodeAction(startNode, startOffset);
+        target.apply(breakAction);
+        target.parent.apply(new InsertChildrenAfterAction(target, ...blocksToBeInserted));
+        futureFocusBlock = breakAction.newBlock;
+      }
+      action.futureFocusBlock = futureFocusBlock;
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/actions/modify-content-action.abstract.js

@@ -29,6 +29,7 @@ export var ModifyContentActionType;
   ModifyContentActionType["UPDATE_CURSOR_POSITION"] = "UPDATE_CURSOR_POSITION";
   ModifyContentActionType["INSERT_TEXT_TO_DECORATOR_NODE"] = "INSERT_TEXT_TO_DECORATOR_NODE";
   ModifyContentActionType["INSERT_NODE_TO_NEAREST_ROOT"] = "INSERT_NODE_TO_NEAREST_ROOT";
+  ModifyContentActionType["PASTE_CONTENT"] = "PASTE_CONTENT";
 })(ModifyContentActionType || (ModifyContentActionType = {}));
 /**
  * Abstract class for update node content, delete node, insert node

package/dist/collection/components/vega-rich-text-editor/dto/actions/paste-content-action.js

@@ -0,0 +1,17 @@
+import { ModifyContentAction, ModifyContentActionType } from './modify-content-action.abstract';
+/**
+ * Action to paste new content into current block.
+ *
+ * @example functionBlock.apply(new PasteContentAction(blocksToBeInserted, startNode, startOffset))
+ * @example host.value.apply(new PasteContentAction(blocksToBeInserted, startNode, startOffset))
+ */
+export class PasteContentAction extends ModifyContentAction {
+  constructor(blocksToBeInserted, startNode, startOffset, rteRange) {
+    super();
+    this.type = ModifyContentActionType.PASTE_CONTENT;
+    this.blocksToBeInserted = blocksToBeInserted;
+    this.startNode = startNode;
+    this.startOffset = startOffset;
+    this.rteRange = rteRange;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/actions/update-cursor-position-action.js

@@ -14,10 +14,15 @@ export class UpdateCursorPositionAction extends ModifyContentAction {
    */
   constructor(nextFocusNode, offset, immediatelyRun = false) {
     super();
+    this.isFlushable = true;
     this.type = ModifyContentActionType.UPDATE_CURSOR_POSITION;
     this.immediatelyRun = false;
     this.nextFocusNode = nextFocusNode;
     this.offset = offset;
     this.immediatelyRun = immediatelyRun;
+    // Don't flush changes if we want to immediately run the cursor update. Usually the current value is the latest value.
+    if (this.immediatelyRun) {
+      this.isFlushable = false;
+    }
   }
 }

package/dist/collection/components/vega-rich-text-editor/dto/annotations/annotation-style.js

@@ -0,0 +1,87 @@
+import { isNonNullable } from '../../../../types/type-guard';
+import { camelToDashCase } from '../../../../utils/string';
+import { RTEBlock } from '../blocks/block.abstract';
+import { BlockAnnotation } from './block-annotation.abstract';
+import { CustomStyleAnnotation } from './custom-style-annotation';
+import { NodeAnnotation } from './node-annotation.abstract';
+/**
+ * Class to handle the style representation of annotations for RTE blocks and nodes.
+ */
+export class RTEAnnotationStyle {
+  constructor(dto) {
+    this.dtoType = dto instanceof RTEBlock ? 'block' : 'node';
+    this.annotationMap = dto.annotationMap;
+  }
+  /**
+   * Convert an AnnotationStyle object to a CSS text string.
+   *
+   * @param {RTERenderContext} options - Rendering context options.
+   * @param {string[]} canMergeKeyList - List of style keys that can be merged by concatenation.
+   * @param {Nullable<AnnotationStyle>} annotationStyle - The annotation style object, if null, get from toJSON().
+   * @returns {string} A string representing the CSS text.
+   */
+  toCssText(options = { standalone: false }, canMergeKeyList, annotationStyle) {
+    annotationStyle = annotationStyle ? annotationStyle : this.toJSON(options, canMergeKeyList);
+    return Object.entries(Object.assign({}, annotationStyle))
+      .map(([key, value]) => `${camelToDashCase(key)}: ${value};`)
+      .join('');
+  }
+  /**
+   * Convert the annotation map to a JSON representation.
+   *
+   * @param {RTERenderContext} options - Rendering context options.
+   * @param {string[]} canMergeKeyList - List of style keys that can be merged by concatenation.
+   * @returns {AnnotationStyle} - The JSON representation of the annotation styles.
+   */
+  toJSON(options = { standalone: false }, canMergeKeyList) {
+    const styles = Array.from(this.annotationMap.values())
+      .filter((annotation) => this.filterAnnotation(annotation) || annotation instanceof CustomStyleAnnotation)
+      .map((annotation) => annotation.renderStyle(options))
+      .filter(isNonNullable);
+    if (canMergeKeyList && canMergeKeyList.length > 0) {
+      return this.mergeAnnotationStyles(styles, canMergeKeyList);
+    }
+    else {
+      return styles.reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+    }
+  }
+  /**
+   * Filter annotations based on whether they are block or node annotations.
+   *
+   * @param {RTENodeAnnotationMapValue | RTEBlockAnnotationMapValue} annotation - The annotation to filter.
+   * @returns {boolean} - True if the annotation matches the DTO type, false otherwise.
+   */
+  filterAnnotation(annotation) {
+    return this.dtoType === 'block'
+      ? annotation instanceof BlockAnnotation
+      : annotation instanceof NodeAnnotation;
+  }
+  /**
+   * Merge an array of annotation styles into a single style object.
+   * e.g.,
+   * { textDecoration: 'underline', textDecoration: 'line-through' }
+   * -> { textDecoration: 'underline line-through' }
+   *
+   * @param {AnnotationStyle[]} styles - Array of annotation style objects to merge.
+   * @param {string[]} canMergeKeyList - List of style keys that can be merged by concatenation.
+   * @returns {AnnotationStyle} - The merged annotation style object.
+   */
+  mergeAnnotationStyles(styles, canMergeKeyList) {
+    const merged = {};
+    for (const style of styles) {
+      for (const key in style) {
+        const value = style[key];
+        const existing = merged[key];
+        if (typeof existing === 'string' &&
+          typeof value === 'string' &&
+          canMergeKeyList.includes(key)) {
+          merged[key] = Array.from(new Set(`${existing} ${value}`.split(/\s+/).filter(Boolean))).join(' ');
+        }
+        else {
+          merged[key] = value;
+        }
+      }
+    }
+    return merged;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/blocks/block.abstract.js

@@ -9,12 +9,13 @@ import { HorizontalAlignmentAnnotation } from '../annotations/horizontal-alignme
 import { IndentAnnotation } from '../annotations/indent-annotation';
 import { ActionHandleStrategyRegistry } from '../action-handle-strategies/action-handle-strategy-registry';
 import { isNonNullable } from '../../../../types/type-guard';
-import { camelToDashCase } from '../../../../utils/string';
 import { CustomAttributeAnnotation } from '../annotations/custom-attribute-annotation';
 import { CustomClassAnnotation } from '../annotations/custom-class-annotation';
 import { CommonAnnotation, CommonAnnotationTypeEnum } from '../annotations/common-annotation.abstract';
 import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
 import { InternalWrapperAnnotation } from '../annotations/internal-wrapper-annotation';
+import RTEDTOClassManager from '../../../../helpers/rte-manager/dto-class-manager';
+import { RTEAnnotationStyle } from '../annotations/annotation-style';
 /**
  * Abstract class for block
  */
@@ -32,6 +33,26 @@ export class RTEBlock {
   static from(json, options) {
     throw new Error(`[Vega] ${this.constructor.name}.from(${JSON.stringify(json)}, ${options}) is not implemented. Please implement this method in the subclass.`);
   }
+  /**
+   * Generates block children from an array of VegaRTEContentBlock.
+   *
+   * @param {VegaRTEContentBlock[]} blockArray - The array of VegaRTEContentBlock to generate children from.
+   * @param {VegaRTETransformOptions} [options] - Optional transformation options.
+   * @param {VegaRTEContent | RTEBlock} [parentBlock] - Optional parent block.
+   * @returns {RTEBlock[]} An array of generated RTEBlock children.
+   */
+  static generateBlockChildren(blockArray, options, parentBlock) {
+    return blockArray
+      .map((child) => {
+      const BlockClass = RTEDTOClassManager.getRTEBlockClass(child.type);
+      if (BlockClass) {
+        const block = BlockClass.from(child, options);
+        block.parent = parentBlock;
+        return block;
+      }
+    })
+      .filter(isNonNullable);
+  }
   /**
    * The function `createAnnotationEntity` creates a block annotation entity based on the provided type
    * and value.
@@ -145,11 +166,9 @@ export class RTEBlock {
    * @returns {AnnotationStyle} - Annotation styles
    */
   getStyles(options = { standalone: false }) {
-    return Object.assign(Object.assign({}, Array.from(this.annotationMap.values())
-      .filter((annotation) => annotation instanceof BlockAnnotation || annotation instanceof CustomStyleAnnotation)
-      .map((annotation) => annotation.renderStyle(options))
-      .filter(isNonNullable)
-      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {})), (this.shouldRenderAsInternalWrapper() ? { display: 'contents' } : {}));
+    const rteAnnotationStyle = new RTEAnnotationStyle(this);
+    const blockAnnotationStyle = rteAnnotationStyle.toJSON(options);
+    return Object.assign(Object.assign({}, blockAnnotationStyle), (this.shouldRenderAsInternalWrapper() ? { display: 'contents' } : {}));
   }
   /**
    * Get classes from annotations
@@ -180,9 +199,8 @@ export class RTEBlock {
    */
   generateAttributeString(...attrs) {
     var _a;
-    const styles = Object.entries(Object.assign({}, this.getStyles({ standalone: true })))
-      .map(([key, value]) => `${camelToDashCase(key)}: ${value};`)
-      .join('');
+    const blockAnnotationStyle = new RTEAnnotationStyle(this);
+    const styles = blockAnnotationStyle.toCssText({ standalone: true });
     const customClassAnnotation = this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_CLASS);
     const customAttributeString = ((_a = this.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.toString(attrs)) || [];
     const attributes = [