@globalpayments/vega 2.34.0 → 2.35.0

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

@@ -1,8 +1,5 @@
-import { h } from '@stencil/core';
 import { RTETextNode } from '../nodes/text-node';
-import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
 import { isNonNullable } from '../../../../types/type-guard';
-import { BlockAnnotationTypeEnum } from '../annotations/block-annotation.abstract';
 import { TextStyleAnnotation } from '../annotations/text-style-annotation';
 import { ModifyContentActionType } from '../actions/modify-content-action.abstract';
 import { RemoveChildAction } from '../actions/remove-child-action';
@@ -31,12 +28,18 @@ export class RTETextBlock extends RTEBlock {
     this.nodes = [];
     this.type = type;
     if (RTETextBlock.isAcceptableTextStyle(type)) {
-      super.annotationMap = new Map([TextStyleAnnotation.from(type)]);
+      this.annotationMap = new Map([TextStyleAnnotation.from(type)]);
     }
     else {
-      super.annotationMap = new Map([TextStyleAnnotation.from('paragraph')]);
+      this.annotationMap = new Map([TextStyleAnnotation.from('paragraph')]);
     }
   }
+  /**
+   * Converts a VegaRTETextBlock into an RTETextBlock.
+   *
+   * @param {VegaRTETextBlock} block - The block object
+   * @returns {RTETextBlock} A RTETextBlock class
+   */
   static from(block) {
     const textBlock = new RTETextBlock(block.id, block.type);
     const { annotations } = block;
@@ -51,17 +54,6 @@ export class RTETextBlock extends RTEBlock {
     }
     return textBlock;
   }
-  static fromHTML(node, blockType) {
-    const textBlock = new RTETextBlock(generateUUID(), blockType);
-    textBlock.nodes = Array.from(node.childNodes).map((item) => RTETextNode.fromHTML(item, textBlock));
-    Object.keys(BlockAnnotationTypeEnum).forEach((type) => {
-      const item = this.createAnnotationEntityFromHTML(type, node);
-      if (isNonNullable(item)) {
-        textBlock.annotationMap.set(...item);
-      }
-    });
-    return textBlock;
-  }
   /**
    * The function `createAnnotationEntity` creates a block annotation entity based on the provided type
    * and value.
@@ -82,9 +74,20 @@ export class RTETextBlock extends RTEBlock {
       return super.createAnnotationEntity(type, value);
     }
   }
+  /**
+   * Checks if a given text block type is one of the acceptable text styles.
+   *
+   * @param {VegaRTETextBlockType} type - The text block type
+   * @returns {boolean} Return a boolean value indicating whether the `type` parameter is valid.
+   */
   static isAcceptableTextStyle(type) {
     return ['title', 'subtitle', 'paragraph', 'heading-1', 'heading-2', 'heading-3'].includes(type);
   }
+  /**
+   * Merges RTETextNode nodes based on certain conditions.
+   *
+   * @param {AnnotationAction} action - AnnotationAction
+   */
   mergeNodes(action) {
     this.nodes = this.nodes.reduce((prev, cur) => {
       const lastNode = prev.at(-1);
@@ -101,38 +104,39 @@ export class RTETextBlock extends RTEBlock {
       return [...prev, cur];
     }, []);
   }
+  /**
+   * @inheritDoc
+   */
   toJSON() {
     return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, nodes: this.nodes.map((node) => node.toJSON()) });
   }
+  /**
+   * Clone the nodes to a new block
+   *
+   * @param {RTEBlock} nodes - The nodes will be copied
+   * @returns {RTEBlock} New block
+   */
   cloneWithNodes(nodes) {
     const block = new RTETextBlock(generateUUID(), this.type);
     block.nodes = [];
     block.apply(new AppendChildNodesAction(nodes));
     return block;
   }
+  /**
+   * @inheritDoc
+   */
   isNotEmpty() {
     return this.nodes.length > 0 && this.nodes.some((node) => !node.isEmpty());
   }
+  /**
+   * @inheritDoc
+   */
   getLastNode() {
     return this.nodes[this.nodes.length - 1];
   }
-  render(renderContext, children) {
-    const BlockTag = this.getBlockTagByType(this.type);
-    return (h(BlockTag, { ref: this.registerRef.bind(this), style: this.getStyles(), class: super.getClasses() },
-      this.renderNodes(renderContext),
-      children));
-  }
-  registerRef(ref) {
-    if (ref) {
-      stateEntityRenderingRegistry.register(ref, this);
-    }
-  }
-  renderNodes(renderConfig = {}) {
-    const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
-    return linkGroupAnnotation
-      ? linkGroupAnnotation.renderNodes(this.nodes, renderConfig)
-      : this.nodes.map((node) => node.render());
-  }
+  /**
+   * @inheritDoc
+   */
   doAnnotationActionApply(action) {
     if (action instanceof TextStyleAnnotationAction) {
       if (this.type !== 'list-item') {
@@ -214,6 +218,13 @@ export class RTETextBlock extends RTEBlock {
         break;
     }
   }
+  /**
+   * Splits a text node at a specified offset within a block of nodes and returns a new block with the split nodes.
+   *
+   * @param {RTETextNode} splitNode - The text node that will be split
+   * @param {number} startOffsetOfNode - The index at which will split the text content of the `splitNode`.
+   * @returns {Nullable<RTEBlock>} return either an RTEBlock object or null.
+   */
   splitTextNodeBlock(splitNode, startOffsetOfNode) {
     if (splitNode) {
       const beforeText = splitNode.text.slice(0, startOffsetOfNode);
@@ -235,13 +246,34 @@ export class RTETextBlock extends RTEBlock {
       }
     }
   }
+  /**
+   * Checks if the caret position is at the start of a specified RTETextNode.
+   *
+   * @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.
+   */
   isCaretPositionAtStart(node, startOffset) {
     return node === this.nodes[0] && startOffset === 0;
   }
+  /**
+   * Checks if the caret position is at the end of a specified RTETextNode.
+   *
+   * @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.
+   */
   isCaretPositionAtEnd(node, startOffset) {
     const lastNode = this.nodes[this.nodes.length - 1];
     return node === lastNode && (node.isEmpty() || startOffset === lastNode.text.length);
   }
+  /**
+   * lineBreakSingleBlock
+   *
+   * @param {RTETextNode} splitNode -
+   * @param {number} startOffsetOfNode -
+   * @returns {Nullable<RTETextNode>} Nullable<RTETextNode>
+   */
   lineBreakSingleBlock(splitNode, startOffsetOfNode) {
     if (splitNode) {
       const lineBreakNode = new RTETextNode(generateUUID(), '\n', this);
@@ -262,6 +294,12 @@ export class RTETextBlock extends RTEBlock {
       return lineBreakNode;
     }
   }
+  /**
+   * lineBreakMultipleBlocks
+   *
+   * @param {RTEBlock[]} selectedBlocks -
+   * @returns {Nullable<RTETextNode>} Nullable<RTETextNode>
+   */
   lineBreakMultipleBlocks(selectedBlocks) {
     const beforeNodes = this['nodes'];
     const lineBreakNode = new RTETextNode(generateUUID(), '\n', this);
@@ -269,6 +307,11 @@ export class RTETextBlock extends RTEBlock {
     this.mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes);
     return lineBreakNode;
   }
+  /**
+   * deleteNodeContent
+   *
+   * @param {DeleteBlockContentAction} action - ModifyContentAction
+   */
   deleteNodeContent(action) {
     const startContainerNode = action.startContainerNode;
     const startOffset = action.startOffset;
@@ -310,6 +353,7 @@ export class RTETextBlock extends RTEBlock {
         }
         /**
          * Remove line break
+         *
          * @example caret at the first line
          * \n
          * test
@@ -319,6 +363,7 @@ export class RTETextBlock extends RTEBlock {
         }
         /**
          * Remove line break
+         *
          * @example caret at the begin of second line
          * \n
          * test
@@ -344,35 +389,37 @@ export class RTETextBlock extends RTEBlock {
       }
     }
   }
+  /**
+   * Remove the child node
+   *
+   * @param {RemoveChildAction} action - Modify action
+   */
   removeChildNode(action) {
     this.nodes = this.nodes.filter((node) => node !== action.entityToBeRemoved);
     if (this.nodes.length === 0) {
       this.parent.apply(new RemoveChildAction(this));
     }
   }
+  /**
+   * mergeLineBreakNodes
+   *
+   * @param {RTENode[]} beforeNodes -
+   * @param {RTETextNode} lineBreakNode -
+   * @param {RTENode[]} afterNodes -
+   */
   mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes) {
     if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
       afterNodes.push(new RTETextNode(generateUUID(), '\n', this, beforeNodes[beforeNodes.length - 1] && beforeNodes[beforeNodes.length - 1].annotationMap));
     }
     this.apply(new ReplaceChildNodesAction([...beforeNodes, lineBreakNode, ...afterNodes]));
   }
-  getBlockTagByType(type) {
-    switch (type) {
-      case 'title':
-      case 'subtitle':
-        return `div`;
-      case 'heading-1':
-        return `h1`;
-      case 'heading-2':
-        return `h2`;
-      case 'heading-3':
-        return `h3`;
-      case 'paragraph':
-        return 'p';
-      case 'list-item':
-        return 'li';
-    }
-  }
+  /**
+   * breakSingleTextBlock
+   *
+   * @param {RTETextNode} splitNode -
+   * @param {number} startOffsetOfNode -
+   * @returns {Nullable<RTEBlock>} Nullable<RTEBlock>
+   */
   breakSingleTextBlock(splitNode, startOffsetOfNode) {
     const newParagraph = this.copyInlineStyleToNewParagraph(splitNode);
     if (this.isCaretPositionAtEnd(splitNode, startOffsetOfNode)) {
@@ -388,6 +435,11 @@ export class RTETextBlock extends RTEBlock {
     }
     return newParagraph;
   }
+  /**
+   * convertParagraphToList
+   *
+   * @param {TransformListAction} action - ModifyContentAction
+   */
   convertParagraphToList(action) {
     const bulletList = this.parent.createList(action.listType);
     const listItems = action.selectedBlocks.map((node) => this.parent.toListItem(node));
@@ -397,6 +449,11 @@ export class RTETextBlock extends RTEBlock {
       node.parent.apply(new RemoveChildAction(node));
     });
   }
+  /**
+   * insertImage
+   *
+   * @param {InsertImageToBlockAction} action - ModifyContentAction
+   */
   insertImage(action) {
     const splitNode = action.splitPointNode;
     const startOffsetOfNode = action.startOffsetOfNode;
@@ -413,6 +470,12 @@ export class RTETextBlock extends RTEBlock {
       this.parent.apply(new InsertBlocksAfterAction(this, newImageBlock));
     }
   }
+  /**
+   * copyInlineStyleToNewParagraph
+   *
+   * @param {RTETextNode} needCopedNode -
+   * @returns {RTETextBlock} RTETextBlock
+   */
   copyInlineStyleToNewParagraph(needCopedNode) {
     const textNode = needCopedNode.cloneWithText('');
     // The link annotation don't need inherited

package/dist/collection/components/vega-rich-text-editor/dto/nodes/image-node.js

@@ -1,14 +1,11 @@
-import { h } from '@stencil/core';
 import { NodeTypeEnum, RTENode } from './node.abstract';
-import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
 import { ImageAnnotation } from '../annotations/image-annotation';
-import { ImageAnnotationAction } from '../actions/image-annotation-action';
 import { methodPlaceholder } from 'vega-slimmer/core';
 import { NodeAnnotationTypeEnum } from '../annotations/node-annotation.abstract';
 import { isNonNullable } from '../../../../types/type-guard';
-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 { generateUUID } from '../../../../utils/misc';
+/**
+ * Image node
+ */
 export class RTEImageNode extends RTENode {
   constructor(id, url, parentBlock, annotationMap) {
     super(id, annotationMap);
@@ -16,29 +13,30 @@ export class RTEImageNode extends RTENode {
     this.url = url;
     this.parentBlock = parentBlock;
   }
-  static from(image, parentBlock) {
-    const imageNode = new RTEImageNode(image.id, image.url, parentBlock);
+  /**
+   * Converts a VegaRTEImageNode into an RTEImageNode by mapping nodes and creating annotations.
+   *
+   * @param {VegaRTEImageNode} node - The node to be converted.
+   * @param {RTEImageBlock} parentBlock - The parent block
+   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
+   */
+  static from(node, parentBlock) {
+    const imageNode = new RTEImageNode(node.id, node.url, parentBlock);
     let annotations;
-    if (!image.annotations || Object.keys(image.annotations).length === 0) {
+    if (!node.annotations || Object.keys(node.annotations).length === 0) {
       annotations = { size: 'md' };
     }
     else {
-      annotations = image.annotations;
+      annotations = node.annotations;
     }
     imageNode.annotationMap = new Map(Object.keys(annotations)
       .map(() => ImageAnnotation.from(annotations.size, annotations.alt))
       .filter(isNonNullable));
     return imageNode;
   }
-  static fromHTML(node, parentBlock) {
-    const src = node.nodeName === 'IMG'
-      ? node.src
-      : node.querySelector('img').src;
-    const size = node.size;
-    const imageNode = new RTEImageNode(generateUUID(), src, parentBlock);
-    imageNode.annotationMap = new Map([ImageAnnotation.fromHTML(size, node.alt)]);
-    return imageNode;
-  }
+  /**
+   * @inheritDoc
+   */
   toJSON() {
     const imageAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.IMAGE);
     const annotations = {};
@@ -50,54 +48,19 @@ export class RTEImageNode extends RTENode {
     }
     return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
   }
-  render({ editable } = {}) {
-    const imageAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.IMAGE);
-    const size = imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size;
-    const alt = imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.alt;
-    const handleChange = ({ detail, }) => {
-      switch (detail.action) {
-        case 'edit': {
-          const size = detail.payload.size;
-          const alt = detail.payload.alt;
-          this.apply(new ImageAnnotationAction(size, alt));
-          break;
-        }
-        /*
-         * The below method is e2e-test covered in
-         * @see{module:vega-rich-text-editor-image-click-delete-button}
-         */
-        /* istanbul ignore next */
-        case 'delete': {
-          const event = new InputEvent('beforeinput', {
-            inputType: 'deleteContentBackward',
-            bubbles: true,
-          });
-          setTimeout(() => {
-            stateEntityRenderingRegistry.getDOMByEntity(this).dispatchEvent(event);
-          }, 50);
-          break;
-        }
-      }
-    };
-    return editable ? (h("vega-rich-text-image-editor", { style: this.getStyles(), size: size, alt: alt, ref: (ref) => {
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
-      } }, this.renderImage(editable, alt))) : (this.renderImage(editable, alt));
-  }
+  /**
+   * @inheritDoc
+   */
   doAnnotationActionApply(action) {
     const annotation = action.toAnnotation();
     this.annotationMap.set(annotation.type, annotation);
   }
   // placeholder method
   /* istanbul ignore next */
+  /**
+   * @inheritDoc
+   */
   doModifyActionApply(action) {
     methodPlaceholder(action);
   }
-  registerRef(ref) {
-    if (ref) {
-      stateEntityRenderingRegistry.register(ref, this);
-    }
-  }
-  renderImage(editable, alt) {
-    return (h("img", { style: editable ? { width: '100%' } : this.getStyles(), alt: alt, src: this.url, ref: this.registerRef.bind(this) }));
-  }
 }

package/dist/collection/components/vega-rich-text-editor/dto/nodes/node.abstract.js

@@ -1,4 +1,3 @@
-import { NodeAnnotation } from '../annotations/node-annotation.abstract';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
@@ -64,30 +63,6 @@ export class RTENode {
       this.doAnnotationActionApply(action);
     }
   }
-  /**
-   * Get styles from annotations
-   *
-   * @returns {AnnotationStyle} - Annotation style
-   */
-  getStyles() {
-    return Array.from(this.annotationMap.values())
-      .filter((annotation) => annotation instanceof NodeAnnotation)
-      .map((annotation) => annotation.render())
-      .filter(Boolean)
-      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
-  }
-  /**
-   * Get classes from annotations
-   *
-   * @returns {AnnotationStyle} - Annotation style
-   */
-  getClasses() {
-    return Array.from(this.annotationMap.values())
-      .filter((annotation) => annotation instanceof NodeAnnotation)
-      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
-      .filter(Boolean)
-      .reduce((pre, cur) => [pre, cur].join(' '), '');
-  }
   /**
    * Flush the value change
    */