@globalpayments/vega 2.58.0 → 2.59.0

package/dist/collection/components/vega-popover/vega-popover-content-box/vega-popover-content-box.js

@@ -8,6 +8,7 @@ import { Component, Host, h, Element, Prop } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { formatAndValidResponsiveToken } from '../../../utils/design-token';
 /**
  * @vegaVersion 2.0.0
  */
@@ -21,13 +22,23 @@ export class VegaPopoverContentBox {
      * @vegaVersion 2.8.0
      */
     this.showArrow = true;
+    /**
+     * Determines the spacing between the content and the edges of the popover content box.
+     *
+     * @vegaVersion 2.59.0
+     */
+    this.padding = 'size-16';
   }
   render() {
+    const padding = formatAndValidResponsiveToken(this.padding, 'padding');
     return sanitizeVegaComponent(h(Host, { class: {
         'vega-popover': true,
         'no-arrow': !this.showArrow,
       }, role: "tooltip" },
-      h("div", { class: "vega-popover-content" },
+      h("div", { class: {
+          'vega-popover-content': true,
+          [padding]: true,
+        } },
         h("slot", { name: "popover" }),
         this.showArrow && h("div", { class: "vega-arrow" })),
       h("slot", null)), this.host);
@@ -61,6 +72,36 @@ export class VegaPopoverContentBox {
       "attribute": "show-arrow",
       "reflect": false,
       "defaultValue": "true"
+    },
+    "padding": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<PaddingType>",
+        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: PaddingType; M?: PaddingType; L?: PaddingType; XL?: PaddingType; default?: PaddingType; } | { left?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; right?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; top?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; bottom?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../../types/ui.type"
+          },
+          "PaddingType": {
+            "location": "import",
+            "path": "../../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.59.0"
+          }],
+        "text": "Determines the spacing between the content and the edges of the popover content box."
+      },
+      "attribute": "padding",
+      "reflect": false,
+      "defaultValue": "'size-16'"
     }
   }; }
   static get elementRef() { return "host"; }

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

@@ -64,6 +64,12 @@ export class VegaPopover {
      * @vegaVersion 2.39.0
      */
     this.isScreenPosition = false;
+    /**
+     * Determines the spacing between the content and the edges of the popover content box.
+     *
+     * @vegaVersion 2.59.0
+     */
+    this.padding = 'size-16';
     /* istanbul ignore next */
     this.showPopover = () => {
       this.appenderController.show();
@@ -290,6 +296,36 @@ export class VegaPopover {
       "attribute": "is-screen-position",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "padding": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<PaddingType>",
+        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: PaddingType; M?: PaddingType; L?: PaddingType; XL?: PaddingType; default?: PaddingType; } | { left?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; right?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; top?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; bottom?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "PaddingType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.59.0"
+          }],
+        "text": "Determines the spacing between the content and the edges of the popover content box."
+      },
+      "attribute": "padding",
+      "reflect": false,
+      "defaultValue": "'size-16'"
     }
   }; }
   static get states() { return {

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

@@ -8,20 +8,11 @@ import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-sli
 import { h, Host } from '@stencil/core';
 import { VegaDarkModeStyleController } from '../../../../helpers/theme/controllers/dark-mode-style-controller';
 import { TextColorToolbarButtonSlimmer } from '../../../vega-rich-text-editor/slimmers/renderers/tools/text-color-toolbar-button-slimmer';
-import RTETextBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/text-block-renderer';
-import RTEImageBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/image-block-renderer';
-import RTEListBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/list-block-renderer';
 import { VegaRTEContent } from '../../../vega-rich-text-editor/dto/content-state';
-import RTECodeBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/code-block-renderer';
+import RTEBlockRendererFactory from '../../../vega-rich-text-editor/dto/renderers/renderer-factory';
 export class VegaRichTextContentRenderer extends VegaSlimmer {
   constructor() {
     super();
-    this.blockRenderers = [
-      RTECodeBlockRenderer,
-      RTETextBlockRenderer,
-      RTEImageBlockRenderer,
-      RTEListBlockRenderer,
-    ];
     VegaDarkModeStyleController.registerCustomDarkModeColor(TextColorToolbarButtonSlimmer.formatDarkModeColor());
   }
   componentWillLoad() {
@@ -54,15 +45,12 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
     var _a;
     const renderContext = { editable: this.contentEditable };
     return (_a = this.content) === null || _a === void 0 ? void 0 : _a.children.map((block) => {
-      const blockRenderer = this.getBlockRenderer(block);
+      const blockRenderer = RTEBlockRendererFactory.getBlockRenderer(block.type);
       if (blockRenderer) {
-        return blockRenderer.render(block, renderContext);
+        return blockRenderer.render(block, renderContext, h);
       }
     });
   }
-  getBlockRenderer(block) {
-    return this.blockRenderers.find((renderer) => renderer.canHandle(block));
-  }
   shouldShowPlaceholder() {
     var _a;
     const blocks = (_a = this.content) === null || _a === void 0 ? void 0 : _a.children;

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

@@ -14,7 +14,6 @@
   height: 100%;
   outline: 2px solid transparent;
   outline-offset: 2px;
-  font-family: "Inter", sans-serif;
   font-weight: 500;
   color: var(--v-rich-text-editor-black, #111128);
   overflow-wrap: break-word;
@@ -57,15 +56,6 @@
     letter-spacing: 0px;
   }
 }
-:host .rich-text-content h1,
-:host .rich-text-content h2,
-:host .rich-text-content h3,
-:host .rich-text-content h4,
-:host .rich-text-content h5,
-:host .rich-text-content h6,
-:host .rich-text-content p {
-  margin: 0;
-}
 :host .rich-text-content a.v-rte--link {
   color: rgba(var(--v-text-link, 19, 98, 226, 1));
   outline: none;
@@ -112,17 +102,13 @@
   white-space: pre-wrap;
 }
 :host .rich-text-content img {
-  vertical-align: bottom;
   cursor: pointer;
 }
-:host .rich-text-content ul {
+:host .rich-text-content ul.v-rte--list,
+:host .rich-text-content ol.v-rte--list {
   padding-left: 8px;
   margin-left: 16px;
 }
-:host .rich-text-content ol {
-  padding-left: 8px;
-  list-style-position: inside;
-}
 :host .rich-text-content .link-editor-wrapper {
   position: relative;
   outline: 2px solid transparent;
@@ -140,4 +126,83 @@
 }
 :host .rich-text-content vega-code-block.focus {
   outline: none;
+}
+:host .rich-text-content .v-rte--bold {
+  font-weight: 700;
+}
+:host .rich-text-content .v-rte--italic {
+  font-style: italic;
+}
+:host .rich-text-content .v-rte--image-base img, :host .rich-text-content .v-rte--image-size-lg img, :host .rich-text-content .v-rte--image-size-md img, :host .rich-text-content .v-rte--image-size-sm img {
+  vertical-align: bottom;
+}
+:host .rich-text-content .v-rte--image-size-sm {
+  width: 25%;
+}
+:host .rich-text-content .v-rte--image-size-md {
+  width: 50%;
+}
+:host .rich-text-content .v-rte--image-size-lg {
+  width: 100%;
+}
+:host .rich-text-content .v-rte--text-style-paragraph {
+  font-family: "Inter";
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 500;
+  margin: 0;
+}
+:host .rich-text-content .v-rte--text-style-title {
+  font-family: "Inter";
+  font-size: 36px;
+  line-height: 40px;
+  font-weight: 500;
+}
+:host .rich-text-content .v-rte--text-style-subtitle {
+  font-family: "Inter";
+  font-size: 28px;
+  line-height: 32px;
+  font-weight: 500;
+}
+:host .rich-text-content .v-rte--text-style-heading-1 {
+  font-family: "Inter";
+  font-size: 22px;
+  line-height: 24px;
+  font-weight: 500;
+  margin: 0;
+}
+:host .rich-text-content .v-rte--text-style-heading-2 {
+  font-family: "Inter";
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 500;
+  margin: 0;
+}
+:host .rich-text-content .v-rte--text-style-heading-3 {
+  font-family: "Inter";
+  font-size: 18px;
+  line-height: 22px;
+  font-weight: 500;
+  margin: 0;
+}
+:host .rich-text-content .v-rte--text-style-heading-4 {
+  font-family: "Inter";
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 500;
+  margin: 0;
+}
+:host .rich-text-content .v-rte--text-style-heading-5 {
+  font-family: "Inter";
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 500;
+  margin: 0;
+}
+:host .rich-text-content .v-rte--text-style-heading-6 {
+  font-family: "Inter";
+  font-size: 12px;
+  line-height: 22px;
+  font-weight: 500;
+  margin: 0;
 }

package/dist/collection/components/vega-rich-text-editor/assets/display-code.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M512 48c8.8 0 16 7.2 16 16V352c0 8.8-7.2 16-16 16H336.5c-.3 0-.6 0-.8 0H240.4c-.3 0-.6 0-.8 0H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16H512zM64 416H211.7l-8 48H152c-13.3 0-24 10.7-24 24s10.7 24 24 24h72H352h72c13.3 0 24-10.7 24-24s-10.7-24-24-24H372.3l-8-48H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64zm188.3 48l8-48h55.3l8 48H252.3zM249 177c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-48 48c-9.4 9.4-9.4 24.6 0 33.9l48 48c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-31-31 31-31zM361 143c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l31 31-31 31c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l48-48c9.4-9.4 9.4-24.6 0-33.9l-48-48z"/></svg>`,
+};

package/dist/collection/components/vega-rich-text-editor/constants/constant.js

@@ -1,9 +1,10 @@
+export const RTE_DEFAULT_TEXT_COLOR = {
+  key: 'black',
+  light: '#111128',
+  dark: '#E3E3E8',
+};
 export const RTE_TEXT_COLORS = [
-  {
-    key: 'black',
-    light: '#111128',
-    dark: '#E3E3E8',
-  },
+  RTE_DEFAULT_TEXT_COLOR,
   {
     key: 'gray',
     light: '#5E5E6D',

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

@@ -1,4 +1,8 @@
+import RTEDTOClassManager from '../../../../helpers/rte-manager/dto-class-manager';
 import { LogUtility } from '../../../../utils/log';
+import { generateUUID } from '../../../../utils/misc';
+import { CommonAnnotationTypeEnum } from '../annotations/common-annotation.abstract';
+import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
 /**
  * The base action handle strategy class, use to modify the rich text node content or modify the annotation.
  */
@@ -16,49 +20,109 @@ export class ActionHandleStrategy {
     return this.handleAction(action, target);
   }
   /**
-   * Checks if the caret position is at the end of a specified RTETextNode.
+   * Update the custom style annotation of a block or node
    *
-   * @param {RTETextBlock} textBlock - `RTETextBlock` - a text block.
-   * @param {RTETextNode} node - `RTETextNode` - a node representing an image in a rich text editor.
-   * @param {number} startOffset - The position within the text node where the caret is located.
-   * @returns {boolean} a boolean value, which indicates whether the caret position is at the start of the RTETextNode.
+   * @param {RTEBlock | RTETextNode} item - block or node
+   * @param {string[]} styleKeys - custom style keys, for examples ['fontSize', 'fontWeight'].
    */
-  isCaretPositionAtTextBlockEnd(textBlock, node, startOffset) {
-    const lastNode = textBlock.children[textBlock.children.length - 1];
-    return node === lastNode && (node.isEmpty() || startOffset === lastNode.text.length);
+  updateCustomStyleAnnotation(item, styleKeys) {
+    const customStyleAnnotation = item.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_STYLE);
+    if (customStyleAnnotation && this.isCustomStyle(customStyleAnnotation, styleKeys)) {
+      item.annotationMap.set(customStyleAnnotation.type, new CustomStyleAnnotation(customStyleAnnotation.removeStyles(styleKeys)));
+    }
   }
   /**
-   * Checks if the caret position is at the start of a specified RTETextNode.
+   * Create a new paragraph block with the given text.
+   *
+   * @param {string} text - The text content for the new paragraph.
+   * @returns {Nullable<RTETextBlock>} - The newly created paragraph block, or null if creation failed.
+   */
+  createNewParagraph(text) {
+    const dtoClass = RTEDTOClassManager.getRTEBlockClass('paragraph');
+    if (dtoClass) {
+      const newParagraph = dtoClass.from({
+        id: generateUUID(),
+        type: 'paragraph',
+        nodes: [{ id: generateUUID(), type: 'text', text }],
+      });
+      return newParagraph;
+    }
+  }
+  /**
+   * Get the root content from a child block or node.
+   *
+   * @param {RTEBlock | RTENode} child - The child block or node.
+   * @returns {Nullable<VegaRTEContent>} The root content, if found.
+   */
+  getRootContent(child) {
+    const parent = child.parent;
+    if (parent) {
+      if (parent.constructor.name === 'VegaRTEContent') {
+        return parent;
+      }
+      else {
+        return this.getRootContent(parent);
+      }
+    }
+  }
+  /**
+   * Check the caret position at the start of a block.
+   *
+   * @param {RTEBlock} block - The RTE Block.
+   * @param {RTENode} node - The RTE Node.
+   * @param {number} offset - The offset position.
+   * @returns {boolean} - Whether the caret is at the start of the block.
+   */
+  isCaretPositionAtBlockStart(block, node, offset) {
+    return node === block.children[0] && offset === 0;
+  }
+  /**
+   * Check the caret position at the end of a block.
+   *
+   * @param {RTEBlock} block - The RTE Block.
+   * @param {RTENode} node - The RTE Node.
+   * @param {number} offset - The offset position.
+   * @returns {boolean} - Whether the caret is at the end of the block.
+   */
+  isCaretPositionAtBlockEnd(block, node, offset) {
+    if (!node.isContentEditable()) {
+      return this.isCaretPositionAtDecoratorBlockEnd(block, node, offset);
+    }
+    else {
+      return this.isCaretPositionAtTextBlockEnd(block, node, offset);
+    }
+  }
+  /**
+   * Checks if the caret position is at the end of a specified RTETextNode.
    *
    * @param {RTETextBlock} textBlock - `RTETextBlock` - a text block.
    * @param {RTETextNode} node - `RTETextNode` - a node representing an image in a rich text editor.
    * @param {number} startOffset - The position within the text node where the caret is located.
    * @returns {boolean} a boolean value, which indicates whether the caret position is at the start of the RTETextNode.
    */
-  isCaretPositionAtTextBlockStart(textBlock, node, startOffset) {
-    return node === textBlock.children[0] && startOffset === 0;
+  isCaretPositionAtTextBlockEnd(textBlock, node, startOffset) {
+    const lastNode = textBlock.children[textBlock.children.length - 1];
+    return node === lastNode && (node.isEmpty() || startOffset === lastNode.text.length);
   }
   /**
-   * Checks if the caret position is at the start of a specified RTEImageNode.
+   * Checks if the caret position is at the end of a given decorator node.
    *
-   * @param {RTEImageBlock} target - The image block.
-   * @param {RTEImageNode} node - `RTEImageNode` - a node representing an image in a rich text editor.
-   * @param {number} startOffset - The position within the text node where the caret is located.
-   * @returns {boolean} a boolean value, which indicates whether the caret position is at the start of the RTEImageNode.
+   * @param {RTEBlock} target - The image block.
+   * @param {RTENode} node - `node` is a RTEDecoratorNode or non-editable text node.
+   * @param {number} startOffset - The position within the `RTEDecoratorNode` where the caret is located.
+   * @returns {boolean}Returns a boolean value indicating whether the caret position is at the end of the `RTEDecoratorNode`.
    */
-  isCaretPositionAtImageBlockStart(target, node, startOffset) {
-    return node === target.children[0] && startOffset === 0;
+  isCaretPositionAtDecoratorBlockEnd(target, node, startOffset) {
+    return node === target.children[target.children.length - 1] && startOffset !== 0;
   }
   /**
-   * Checks if the caret position is at the end of a given RTEImageNode.
+   * Determines if the custom style annotation includes any the custom style.
    *
-   * @param {RTEImageBlock} target - The image block.
-   * @param {RTEImageNode} node - `node` is a RTEImageNode
-   * @param {number} startOffset - The position within the `RTEImageNode` where the caret is located.
-   * @returns {boolean}Returns a boolean value indicating whether the caret position is at the end of the `RTEImageNode`.
+   * @param {CustomStyleAnnotation} customStyleAnnotation - custom style annotation
+   * @param {string[]} styleKeys - custom style keys, for examples ['fontSize', 'fontWeight'].
+   * @returns {boolean} - True if the custom key includes the custom style, false otherwise.
    */
-  isCaretPositionAtImageBlockEnd(target, node, startOffset) {
-    const lastNode = target.children[target.children.length - 1];
-    return node === lastNode && startOffset === 1;
+  isCustomStyle(customStyleAnnotation, styleKeys) {
+    return styleKeys.some((item) => Object.keys(customStyleAnnotation.customStyle).includes(item));
   }
 }

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/apply-annotation-strategies/block-update-horizontal-alignment-strategy.js

@@ -0,0 +1,15 @@
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Update the text block and image block horizontal alignment strategy.
+ */
+export class BlockUpdateHorizontalAlignmentStrategy extends ActionHandleStrategy {
+  /**
+   * Updating the horizontal alignment of a block requires cascading updates to the custom style.
+   *
+   * @param {HorizontalAlignmentAnnotationAction} _action - The horizontal alignment annotation action.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(_action, target) {
+    this.updateCustomStyleAnnotation(target, ['textAlign']);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/apply-annotation-strategies/block-update-indent-strategy.js

@@ -0,0 +1,15 @@
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Update the text block and image block horizontal alignment strategy.
+ */
+export class BlockUpdateIndentStrategy extends ActionHandleStrategy {
+  /**
+   * Updating the indent of a block requires cascading updates to the custom style.
+   *
+   * @param {IndentAnnotationAction} _action - The indent annotation action.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(_action, target) {
+    this.updateCustomStyleAnnotation(target, ['marginLeft']);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/apply-annotation-strategies/block-update-link-group-strategy.js

@@ -11,10 +11,24 @@ export class BlockUpdateLinkGroupStrategy extends ActionHandleStrategy {
    * @param {RTETextBlock} target - The current text block.
    */
   handleAction(action, target) {
-    const linkGroupAnnotation = target.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
-    if (linkGroupAnnotation) {
-      const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey);
-      linkGroupAnnotation.linkGroups.set(action.groupKey, [...linkGroup, ...action.nodes]);
+    let linkGroupAnnotation = target.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    if (action.type === 'update_link') {
+      if (linkGroupAnnotation) {
+        const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey);
+        if (linkGroup) {
+          linkGroupAnnotation.linkGroups.set(action.groupKey, [linkGroup[0]]);
+        }
+      }
+    }
+    else {
+      if (linkGroupAnnotation) {
+        const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey) || [];
+        linkGroupAnnotation.linkGroups.set(action.groupKey, [...linkGroup, ...action.nodes]);
+      }
+      else {
+        linkGroupAnnotation = action.toAnnotation();
+        linkGroupAnnotation.linkGroups.set(action.groupKey, [...action.nodes]);
+      }
       target.annotationMap.set(InternalAnnotationTypeEnum.LINK_GROUP, linkGroupAnnotation);
     }
   }

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/apply-annotation-strategies/block-update-text-style-strategy.js

@@ -28,5 +28,6 @@ export class BlockUpdateTextStyleStrategy extends ActionHandleStrategy {
         node.apply(new DeleteNodeAnnotationAction(NodeAnnotationTypeEnum.BOLD));
       });
     }
+    this.updateCustomStyleAnnotation(target, ['fontFamily', 'lineHeight', 'fontWeight', 'fontSize']);
   }
 }

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/apply-annotation-strategies/node-split-text-strategy.js

@@ -2,6 +2,7 @@ import { InternalAnnotationTypeEnum } from '../../annotations/annotation.abstrac
 import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
 import { TextSplittableAction } from '../../actions/splittable-action.abstract';
 import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import { LinkGroupNodeSplitAction } from '../../actions/link-group-node-split-action';
 /**
  * Split the text node into two or there nodes according to the rules.
  */
@@ -30,7 +31,11 @@ export class NodeSplitTextStrategy extends ActionHandleStrategy {
             return this.insertNewNode(startOffset, target);
           }
           if (this.shouldSplitSelection(selectionRangeAnnotation.range)) {
-            return this.splitTextNode(selectionRangeAnnotation.range, target);
+            const splittedTextNodes = this.splitTextNode(selectionRangeAnnotation.range, target);
+            if (item.annotationMap.has('LINK')) {
+              item.apply(new LinkGroupNodeSplitAction(splittedTextNodes));
+            }
+            return splittedTextNodes;
           }
           else {
             this.setApplyTargetNode(target);

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/apply-annotation-strategies/node-update-annotation-map-strategy.js

@@ -1,9 +1,13 @@
 import { isNonNullable } from '../../../../../types/type-guard';
+import { BoldAnnotationAction } from '../../actions/bold-annotation-action';
 import { ClearFormattingAnnotationAction } from '../../actions/clear-formatting-annotation-action';
 import { CodeAnnotationAction } from '../../actions/code-annotation-action';
 import { DeleteNodeAnnotationAction } from '../../actions/delete-node-annotation-action';
+import { ItalicAnnotationAction } from '../../actions/italic-annotation-action';
 import { LinkAnnotationAction } from '../../actions/link-annotation-action';
 import { LinkGroupAnnotationAction } from '../../actions/link-group-annotation-action';
+import { StrikethroughAnnotationAction } from '../../actions/strikethrough-annotation-action';
+import { UnderlineAnnotationAction } from '../../actions/underline-annotation-action';
 import { ClearFormattingAnnotation } from '../../annotations/clear-formatting-annotation';
 import { NodeAnnotation } from '../../annotations/node-annotation.abstract';
 import { SelectionRangeAnnotation } from '../../annotations/selection-range-annotation';
@@ -35,11 +39,21 @@ export class NodeUpdateAnnotationMapStrategy extends ActionHandleStrategy {
         if (isNonNullable(action.newText)) {
           target.text = action.newText;
         }
-        target.parent.apply(new LinkGroupAnnotationAction(action.link.groupKey, [target]));
+        target.parent.apply(new LinkGroupAnnotationAction(action.link.groupKey, [target], action.type));
       }
       if (action instanceof CodeAnnotationAction) {
         this.handleAction(new ClearFormattingAnnotationAction(), target);
       }
+      if (action instanceof BoldAnnotationAction) {
+        this.updateCustomStyleAnnotation(target, ['fontWeight']);
+      }
+      if (action instanceof ItalicAnnotationAction) {
+        this.updateCustomStyleAnnotation(target, ['fontStyle']);
+      }
+      if (action instanceof UnderlineAnnotationAction ||
+        action instanceof StrikethroughAnnotationAction) {
+        this.updateCustomStyleAnnotation(target, ['textDecoration']);
+      }
       target.annotationMap.set(annotation.type, annotation);
       return;
     }

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/{block-append-blocks-strategy.js → append-children-strategy.js}

@@ -1,8 +1,8 @@
 import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
 /**
- * Append new block array to list block or VegaRTEContent instance strategy.
+ * Append new block array or node array to block or VegaRTEContent instance strategy.
  */
-export class BlockAppendBlocksStrategy extends ActionHandleStrategy {
+export class AppendChildrenStrategy extends ActionHandleStrategy {
   /**
    * @inheritDoc
    */
@@ -12,6 +12,7 @@ export class BlockAppendBlocksStrategy extends ActionHandleStrategy {
       newBlocks.forEach((block) => {
         block.parent = target;
       });
+      // This line is used to fix the typescript error `This expression is not callable`. https://github.com/microsoft/TypeScript/issues/44373
       const arrayFixed = target.children;
       target.children = arrayFixed.concat(newBlocks);
     }