@globalpayments/vega 2.34.1 → 2.36.0

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

@@ -4,15 +4,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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, VegaSlimmer } from 'vega-slimmer/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 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';
 export class VegaRichTextContentRenderer extends VegaSlimmer {
   constructor() {
     super();
+    this.blockRenderers = [
+      RTETextBlockRenderer,
+      RTEImageBlockRenderer,
+      RTEListBlockRenderer,
+    ];
     VegaDarkModeStyleController.registerCustomDarkModeColor(TextColorToolbarButtonSlimmer.formatDarkModeColor());
   }
+  componentWillLoad() {
+    this.setRTEContent();
+  }
+  watchValueUpdate() {
+    this.setRTEContent();
+  }
   /**
    * Get the rich text content element
    *
@@ -24,13 +39,27 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
   render() {
     return h(Host, null, this.renderRichTextContent());
   }
+  setRTEContent() {
+    if (this.content && !(this.content instanceof VegaRTEContent)) {
+      this.content = VegaRTEContent.fromJSON(this.content);
+    }
+  }
   renderRichTextContent() {
     const showPlaceholder = this.shouldShowPlaceholder();
     return (h("div", { ref: (el) => (this.richTextContentRef = el), class: { 'showPlaceholder': showPlaceholder, 'rich-text-content': true }, "data-placeholder": this.placeholder, contenteditable: this.contentEditable }, this.renderContent()));
   }
   renderContent() {
     var _a;
-    return (_a = this.content) === null || _a === void 0 ? void 0 : _a.blocks.map((block) => block.render({ editable: this.contentEditable }));
+    const renderContext = { editable: this.contentEditable };
+    return (_a = this.content) === null || _a === void 0 ? void 0 : _a.blocks.map((block) => {
+      const blockRenderer = this.getBlockRenderer(block);
+      if (blockRenderer) {
+        return blockRenderer.render(block, renderContext);
+      }
+    });
+  }
+  getBlockRenderer(block) {
+    return this.blockRenderers.find((renderer) => renderer.canHandle(block));
   }
   shouldShowPlaceholder() {
     var _a;
@@ -57,3 +86,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaRichTextContentRenderer.prototype, "content", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaRichTextContentRenderer.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchValueUpdate')
+], VegaRichTextContentRenderer.prototype, "watchValueUpdate", null);

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

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { Component, Element, Method, Prop, State } from '@stencil/core';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { Component, Element, Method, Prop, State, Watch } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaRichTextContentRenderer } from './slimmers/renderers/vega-rich-text-content-renderer';
@@ -28,6 +28,9 @@ export class VegaRichTextContent {
      */
     this.contentEditable = false;
   }
+  watchValueUpdate() {
+    methodPlaceholder();
+  }
   /**
    * Invoke this method to focus on rich text content editable div
    *
@@ -54,7 +57,7 @@ export class VegaRichTextContent {
   static get properties() { return {
     "content": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "VegaRTEContent",
         "resolved": "VegaRTEContent",
@@ -72,7 +75,7 @@ export class VegaRichTextContent {
             "name": "vegaVersion",
             "text": "2.34.0"
           }],
-        "text": "Specifies the text or formatted information displayed by the rich text content."
+        "text": "Specifies the text or formatted information displayed by the rich text content, which can be either VegaRTEContent or VegaRTEContentBlock.\nIt is recommended to use the VegaRTEContent type.\nOnly in exceptional cases should the original data in the VegaRTEContentBlock type be used."
       }
     }
   }; }
@@ -109,6 +112,10 @@ export class VegaRichTextContent {
     }
   }; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "content",
+      "methodName": "watchValueUpdate"
+    }]; }
 }
 __decorate([
   InjectVegaGlobalSlimmer()

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

@@ -1,12 +1,4 @@
-import { h } from '@stencil/core';
 import { Annotation, InternalAnnotationTypeEnum } from './annotation.abstract';
-import { generateUUID } from '../../../../utils/misc';
-import { LinkAnnotationAction } from '../actions/link-annotation-action';
-import { NodeAnnotationTypeEnum } from './node-annotation.abstract';
-import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaChange } from '../../../../helpers/event-manager/event-id/vega-event-id';
-import { isNonNullable } from '../../../../types/type-guard';
-import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
 /**
  * Annotation to represent a link of grouped nodes
  */
@@ -17,86 +9,4 @@ export class LinkGroupAnnotation extends Annotation {
     this.linkGroups = new Map();
     this.linkGroups = new Map([[groupKey, []]]);
   }
-  renderNodes(nodes, { editable }) {
-    const blockNodes = this.groupNodesByLink(nodes);
-    return blockNodes.flatMap((item) => {
-      if (this.isLinkGroup(item)) {
-        const linkAnnotation = item[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK);
-        return editable
-          ? this.renderLinkEditorWrapper(item, linkAnnotation)
-          : this.renderLink(item, linkAnnotation);
-      }
-      return item.render();
-    });
-  }
-  renderLinkEditorWrapper(linkNodes, linkAnnotation) {
-    const { href } = linkAnnotation.link;
-    const textFromNodes = linkNodes.map((node) => node.text).join('');
-    const handleChange = ({ detail, }) => {
-      switch (detail.action) {
-        case 'link': {
-          const { url, text } = detail.payload;
-          const textChanged = text !== textFromNodes;
-          const groupKey = generateUUID();
-          linkNodes.forEach((node) => {
-            const linkAnnotationAction = new LinkAnnotationAction({
-              link: { href: url, groupKey: groupKey },
-              newText: textChanged ? text : undefined,
-              needMergeNode: textChanged && linkNodes.length > 1,
-              doSplit: false,
-            });
-            node.apply(linkAnnotationAction);
-          });
-          return;
-        }
-        case 'unlink': {
-          linkNodes.forEach((node) => node.deleteAnnotationByType(NodeAnnotationTypeEnum.LINK));
-          return;
-        }
-      }
-    };
-    let linkWrapperRef;
-    return (h("span", { class: "link-editor-wrapper", role: "link", tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (ref) => {
-        if (ref) {
-          linkWrapperRef = ref;
-        }
-      } },
-      this.renderLink(linkNodes, linkAnnotation),
-      h("vega-rich-text-link-editor", { record: {
-          text: textFromNodes,
-          url: href,
-        }, ref: (ref) => {
-          if (ref) {
-            ref.target = linkWrapperRef;
-            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
-          }
-        } })));
-  }
-  renderLink(linkNodes, linkAnnotation) {
-    const { href } = linkAnnotation.link;
-    return (h("a", { class: "v-rte--link", href: href, target: "_blank" }, linkNodes.map((node) => node.render())));
-  }
-  isLinkGroup(item) {
-    return Array.isArray(item);
-  }
-  groupNodesByLink(nodes) {
-    return nodes.reduce((acc, node) => {
-      const nodeLinkAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
-      const lastGroup = acc[acc.length - 1];
-      if (isNonNullable(nodeLinkAnnotation)) {
-        if (lastGroup &&
-          this.isLinkGroup(lastGroup) &&
-          lastGroup[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK).toEqual(nodeLinkAnnotation)) {
-          lastGroup.push(node);
-        }
-        else {
-          acc.push([node]);
-        }
-      }
-      else {
-        acc.push(node);
-      }
-      return acc;
-    }, []);
-  }
 }

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

@@ -3,7 +3,6 @@ import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
 import { VegaInternalRichTextEditorFlushChanges } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import { isNonNullable } from '../../../../types/type-guard';
 import { ModifyContentAction } from '../actions/modify-content-action.abstract';
 import { HorizontalAlignmentAnnotation } from '../annotations/horizontal-alignment-annotation';
 import { IndentAnnotation } from '../annotations/indent-annotation';
@@ -102,29 +101,6 @@ export class RTEBlock extends BlockBaseOperator {
     this.annotationMap.set(annotation.type, annotation);
     typeof this.doAnnotationActionApply === 'function' && this.doAnnotationActionApply(action);
   }
-  /**
-   * Get styles from annotations
-   *
-   * @returns {AnnotationStyle} - Annotation style
-   */
-  getStyles() {
-    return Array.from(this.annotationMap.values())
-      .filter((annotation) => annotation instanceof BlockAnnotation)
-      .map((annotation) => annotation.render())
-      .filter(isNonNullable)
-      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
-  }
-  /**
-   * Get classes from annotations
-   *
-   * @returns {AnnotationStyle} - Annotation style
-   */
-  getClasses() {
-    return Array.from(this.annotationMap.values())
-      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
-      .filter(isNonNullable)
-      .reduce((pre, cur) => [pre, cur].join(' '), '');
-  }
   /**
    * Appends a list of RTENode objects to the current node's child nodes and sets the parent block of each node to the current node.
    *

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

@@ -1,7 +1,5 @@
-import { h } from '@stencil/core';
 import { RTEBlock } from './block.abstract';
 import { RTEImageNode } from '../nodes/image-node';
-import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
 import { ModifyContentActionType } from '../actions/modify-content-action.abstract';
 import { RemoveChildAction } from '../actions/remove-child-action';
 import { isNonNullable } from '../../../../types/type-guard';
@@ -22,6 +20,12 @@ export class RTEImageBlock extends RTEBlock {
     this.type = 'image';
     this.nodes = [];
   }
+  /**
+   * Converts a VegaRTEImageBlock object into an RTEImageBlock object by mapping nodes and creating annotations.
+   *
+   * @param {VegaRTEImageBlock} block - The block object to be converted.
+   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
+   */
   static from(block) {
     const imageBlock = new RTEImageBlock(block.id);
     const { annotations } = block;
@@ -36,22 +40,26 @@ export class RTEImageBlock extends RTEBlock {
     }
     return imageBlock;
   }
+  /**
+   * @inheritDoc
+   */
   toJSON() {
     return Object.assign(Object.assign({}, super.toJSON()), { type: 'image', nodes: this.nodes.map((node) => node.toJSON()) });
   }
+  /**
+   * @inheritDoc
+   */
   isNotEmpty() {
     return this.nodes.length > 0 && this.nodes.some((node) => node.url.length > 0);
   }
+  /**
+   * @inheritDoc
+   */
   getLastNode() {
     return this.nodes[this.nodes.length - 1];
   }
-  render(renderContext) {
-    return (h("div", { style: Object.assign({}, this.getStyles()), ref: this.registerRef.bind(this), class: super.getClasses() }, this.nodes.map((node) => {
-      return node.render(renderContext);
-    })));
-  }
   /**
-   * Apply modify action to block
+   * Apply a modify action to block
    *
    * @param {ModifyContentAction} action - Modify action
    */
@@ -105,11 +113,11 @@ export class RTEImageBlock extends RTEBlock {
         break;
     }
   }
-  registerRef(ref) {
-    if (ref) {
-      stateEntityRenderingRegistry.register(ref, this);
-    }
-  }
+  /**
+   * Removes a specified child node from a list of nodes and triggers a parent action if the list becomes empty.
+   *
+   * @param {RemoveChildAction} action - Action to be performed when removing a child node from the list of nodes.
+   */
   removeChildNode(action) {
     this.nodes = this.nodes.filter((node) => node !== action.entityToBeRemoved);
     if (this.nodes.length === 0) {
@@ -122,6 +130,7 @@ export class RTEImageBlock extends RTEBlock {
    *
    * @param {RTEImageNode} imageNode The split point image node
    * @param {number} imageOffset The cursor point 0 | 1
+   * @returns {Nullable<RTEBlock>} The new block after split
    */
   splitImageNodes(imageNode, imageOffset) {
     const nodesSplitIndex = this.nodes.indexOf(imageNode);
@@ -134,12 +143,25 @@ export class RTEImageBlock extends RTEBlock {
       return newBlock;
     }
   }
+  /**
+   * Creates a new RTEImageBlock instance with the provided RTEImageNode instances appended to it.
+   *
+   * @param {RTEImageNode[]} nodes - An array of RTEImageNode objects that will be used to create a new RTEImageBlock instance.
+   * @returns {RTEImageBlock} A new `RTEImageBlock` object with the provided `nodes` appended to it.
+   */
   cloneWithNodes(nodes) {
     const block = new RTEImageBlock(generateUUID());
     block.nodes = [];
     block.apply(new AppendChildNodesAction(nodes));
     return block;
   }
+  /**
+   * Used to split a block of text at a specific position and insert a new paragraph block.
+   *
+   * @param {RTEImageNode} splitNode - The node that needs to be split into separate blocks.
+   * @param {number} startOffsetOfNode - The index or position within the `splitNode` where the block should be broken or split.
+   * @returns {Nullable<RTEBlock>} Returns either a new paragraph block or the new block created after splitting the original block.
+   */
   breakSingleBlock(splitNode, startOffsetOfNode) {
     const newParagraph = RTETextBlock.from({
       id: generateUUID(),
@@ -159,19 +181,46 @@ export class RTEImageBlock extends RTEBlock {
     }
     return newParagraph;
   }
+  /**
+   * Breaks a single block of text at a specified offset and returns the first node of the new paragraph if created.
+   *
+   * @param {RTEImageNode} splitNode - It represents a node in a rich text editor that contains an image.
+   * @param {number} startOffset - The index at which the line break should occur within the `RTEImageNode` block.
+   * @returns {Nullable<RTETextNode>} Returning the first node of the `newParagraph` block if `newParagraph` is not null.
+   */
   lineBreakSingleBlock(splitNode, startOffset) {
     const newParagraph = this.breakSingleBlock(splitNode, startOffset);
     if (newParagraph) {
       return newParagraph['nodes'][0];
     }
   }
+  /**
+   * Checks if the caret position is at the start of a specified RTEImageNode.
+   *
+   * @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.
+   */
   isCaretPositionAtStart(node, startOffset) {
     return node === this.nodes[0] && startOffset === 0;
   }
+  /**
+   * Checks if the caret position is at the end of a given RTEImageNode.
+   *
+   * @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`.
+   */
   isCaretPositionAtEnd(node, startOffset) {
     const lastNode = this.nodes[this.nodes.length - 1];
     return node === lastNode && startOffset === 1;
   }
+  /**
+   * Inserts a new paragraph block with a line break after a selected block of text in a rich text editor.
+   *
+   * @param {RTEBlock[]} selectedBlocks - An array of RTEBlock objects that represent the blocks that have been selected for a specific action in the Rich Text Editor.
+   * @returns {Nullable<RTETextNode>} Returns a Nullable RTETextNode.
+   */
   lineBreakMultipleBlocks(selectedBlocks) {
     const newParagraph = RTETextBlock.from({
       id: generateUUID(),
@@ -186,6 +235,11 @@ export class RTEImageBlock extends RTEBlock {
     newParagraph.apply(new AppendChildNodesAction(afterNodes));
     return newParagraph['nodes'][0];
   }
+  /**
+   * Deletes content from a block node based on specific conditions.
+   *
+   * @param {DeleteBlockContentAction} action - Delete block content action
+   */
   deleteNodeContent(action) {
     const startContainerNode = action
       .startContainerNode, startOffset = action.startOffset;

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

@@ -1,7 +1,5 @@
-import { h } from '@stencil/core';
 import { RTEBlock } from './block.abstract';
 import { RTEListItemBlock } from './list-item-block';
-import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
 import { ModifyContentActionType } from '../actions/modify-content-action.abstract';
 import { RemoveChildAction } from '../actions/remove-child-action';
 import { InsertBlocksAfterAction } from '../actions/insert-blocks-after-block';
@@ -11,6 +9,9 @@ import { AppendChildNodesAction } from '../actions/append-child-nodes-action';
 import { InsertBlocksBeforeAction } from '../actions/insert-blocks-before-block';
 import { SyncUpSelectionAction } from '../actions/sync-up-selection-action';
 import { RemoveNestListAction } from '../actions/remove-nest-list-action';
+/**
+ * List block
+ */
 export class RTEListBlock extends RTEBlock {
   constructor(id, type) {
     super(id);
@@ -18,6 +19,12 @@ export class RTEListBlock extends RTEBlock {
     this.blocks = [];
     this.type = type;
   }
+  /**
+   * Converts a VegaRTEListBlock object to an RTEListBlock
+   *
+   * @param {VegaRTEListBlock} block - Converts a `VegaRTEListBlock` object into an `RTEListBlock`.
+   * @returns {RTEListBlock} Return an instance of `RTEListBlock`
+   */
   static from(block) {
     const listBlock = new RTEListBlock(block.id, block.type);
     listBlock.blocks = block.blocks.map((item) => {
@@ -27,20 +34,25 @@ export class RTEListBlock extends RTEBlock {
     });
     return listBlock;
   }
+  /**
+   * @inheritDoc
+   */
   toJSON() {
     return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, blocks: this.blocks.map((block) => block.toJSON()) });
   }
+  /**
+   * @inheritDoc
+   */
   isNotEmpty() {
     return (this.blocks.length > 0 &&
       this.blocks.some((listItemBlock) => listItemBlock.isNotEmpty()));
   }
+  /**
+   * @inheritDoc
+   */
   getLastNode() {
     return this.blocks[this.blocks.length - 1].getLastNode();
   }
-  render(renderContext) {
-    const BlockTag = this.type === 'number-list' ? 'ol' : 'ul';
-    return (h(BlockTag, { ref: this.registerRef.bind(this) }, this.blocks.map((block) => block.render(renderContext))));
-  }
   /**
    * Apply a modify action to block
    *
@@ -77,17 +89,23 @@ export class RTEListBlock extends RTEBlock {
         break;
     }
   }
+  /**
+   * Converts a RTEListItemBlock to a RTETextBlock representing a paragraph.
+   *
+   * @param {RTEListItemBlock} block - The block that will be covered
+   * @returns {RTETextBlock} Returns a `RTETextBlock`.
+   */
   toParagraph(block) {
     const textBlock = new RTETextBlock(generateUUID(), 'paragraph');
     textBlock.apply(new AppendChildNodesAction(block['nodes']));
     textBlock['annotationMap'] = block['annotationMap'];
     return textBlock;
   }
-  registerRef(ref) {
-    if (ref) {
-      stateEntityRenderingRegistry.register(ref, this);
-    }
-  }
+  /**
+   * Covert block to List
+   *
+   * @param {TransformListAction} action - Modify action
+   */
   convertToList(action) {
     const selectedBlocks = action.selectedBlocks;
     const bulletList = this.parent.createList(action.listType);
@@ -111,6 +129,11 @@ export class RTEListBlock extends RTEBlock {
       }
     }
   }
+  /**
+   * Covert block to paragraph
+   *
+   * @param {TransformListAction} action - Modify action
+   */
   convertToParagraph(action) {
     let isSelectedFirstBlock = false;
     let isSelectedLastBlock = false;
@@ -146,6 +169,11 @@ export class RTEListBlock extends RTEBlock {
       this.parent.apply(new RemoveChildAction(this));
     }
   }
+  /**
+   * Inserts an image block into a rich text editor block based on the parent block type.
+   *
+   * @param {InsertImageToBlockAction} action - Modify action
+   */
   insertImage(action) {
     const imageBlock = action.imageBlockToBeInserted;
     if (this.parent['type'] !== 'list-item') {
@@ -155,10 +183,15 @@ export class RTEListBlock extends RTEBlock {
       this.parent.apply(action);
     }
   }
+  /**
+   * Removes a specified block and handles the removal of nested lists if necessary.
+   *
+   * @param {RTEBlock} blockToBeRemoved - block that will be removed
+   */
   removeListItemBlock(blockToBeRemoved) {
     super.removeChildBlock(blockToBeRemoved);
     if (this.blocks.length === 0 && this.parent) {
-      // The parent is a list item mean the current block is a nest list, so we need use RemoveNestListAction to remove the item
+      // The parent is a list item mean the current block is a nest list, so we need to use RemoveNestListAction to remove the item
       if (this.parent instanceof RTEListItemBlock) {
         this.parent.apply(new RemoveNestListAction(this));
       }