@globalpayments/vega 2.33.0 → 2.34.1

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

@@ -0,0 +1,336 @@
+import { BlockAnnotation } from '../annotations/block-annotation.abstract';
+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';
+import { BlockBaseOperator } from '../helper/block-base-operator';
+import { AppendChildNodesAction } from '../actions/append-child-nodes-action';
+import { RemoveChildAction } from '../actions/remove-child-action';
+import { ZERO_WIDTH_SPACE } from '../../constants/constant';
+/**
+ * Abstract class for block
+ */
+export class RTEBlock extends BlockBaseOperator {
+  constructor(id) {
+    super();
+    this.annotationMap = new Map();
+    this.id = id;
+  }
+  /**
+   * The function `createAnnotationEntity` creates a block annotation entity based on the provided type
+   * and value.
+   *
+   * @param {keyof VegaRTEBlockAnnotations} type - The `type` parameter is a key of the `VegaRTEBlockAnnotations` enum, which specifies
+   * the type of annotation entity to create.
+   * @param {unknown} value - The `value` parameter in the `createAnnotationEntity` function is the value
+   * that will be used to create the annotation entity. It can be of any type depending on the specific
+   * annotation being created.
+   * @returns {Nullable<[BlockAnnotationTypeEnum, BlockAnnotation]>} The `createAnnotationEntity` function returns a nullable tuple containing a
+   * `BlockAnnotationTypeEnum` and a `BlockAnnotation` object.
+   */
+  static createAnnotationEntity(type, value) {
+    switch (type) {
+      case 'textAlign':
+        return HorizontalAlignmentAnnotation.from(value);
+      case 'indent':
+        return IndentAnnotation.from(value);
+    }
+  }
+  /**
+   * Class to JSON object
+   *
+   * @returns {VegaRTEBlockBase} - JSON object
+   */
+  toJSON() {
+    const annotations = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof BlockAnnotation)
+      .reduce((record, annotation) => {
+      return Object.assign(Object.assign({}, record), annotation.toJSON());
+    }, {});
+    return Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {}));
+  }
+  /**
+   * Get annotation by type
+   *
+   * @param {keyof typeof BlockAnnotationTypeEnum} type - Annotation type
+   * @returns {Nullable<BlockAnnotation> | Nullable<LinkGroupAnnotation>} - Annotation
+   */
+  getAnnotationByType(type) {
+    return this.annotationMap.get(type);
+  }
+  /**
+   * Apply action to block
+   *
+   * @param {AnnotationAction} action - Annotation action
+   */
+  apply(action) {
+    this.doApply(action);
+    if (action.isFlushable) {
+      const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
+      if (domNode) {
+        const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, VegaInternalRichTextEditorFlushChanges);
+        if (nodeSubject) {
+          ChangeManager.notify(nodeSubject, {});
+        }
+      }
+    }
+  }
+  /**
+   * Apply action to block
+   *
+   * @param {AnnotationAction|ModifyContentAction} action - Annotation action
+   */
+  doApply(action) {
+    if (action instanceof ModifyContentAction) {
+      this.doModifyActionApply(action);
+    }
+    else {
+      this.applyAnnotationAction(action);
+    }
+  }
+  /**
+   * Apply annotation action to block
+   *
+   * @param {AnnotationAction} action - Annotation action
+   */
+  applyAnnotationAction(action) {
+    const annotation = action.toAnnotation();
+    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.
+   *
+   * @param {RTENode[]} nodesToBeAppended - An array of `RTENode` objects that you want to append to the current block.
+   */
+  appendChildNodes(nodesToBeAppended) {
+    nodesToBeAppended.forEach((node) => {
+      node.parentBlock = this;
+    });
+    this['nodes'] = this['nodes'].concat(nodesToBeAppended);
+  }
+  /**
+   * Merges the child nodes of two RTEBlocks if they have the same type or both are not images.
+   *
+   * @param {RTEBlock} secondBlock - A block of content in a rich text editor, such as a paragraph, heading, image, etc.
+   */
+  mergeTwoBlocksNodes(secondBlock) {
+    if (this.type === secondBlock.type || (this.type !== 'image' && secondBlock.type !== 'image')) {
+      let shouldMergeNodes = secondBlock['nodes'];
+      if (this.type !== 'image') {
+        shouldMergeNodes = secondBlock['nodes'].filter((node) => node['text'] && node['text'] !== ZERO_WIDTH_SPACE);
+      }
+      this.apply(new AppendChildNodesAction(shouldMergeNodes));
+      secondBlock.parent.apply(new RemoveChildAction(secondBlock));
+    }
+  }
+  /**
+   * Concat the child nodes of multiple RTEBlocks if both are not images.
+   *
+   * @param {RTEBlock[]} blocks - multiple block of content in a rich text editor, such as a paragraph, heading, image, etc.
+   * @returns {RTENode[]} Array of connected block nodes
+   */
+  concatBlocksNodes(blocks) {
+    const nodes = [];
+    blocks.map((block) => {
+      if (block.type !== 'image') {
+        nodes.push(...block['nodes']);
+        block.parent.apply(new RemoveChildAction(block));
+      }
+    });
+    return nodes;
+  }
+  /**
+   * Returns the previous node relative to the current node in a rich text editor structure.
+   *
+   * @param {RTENode} currentNode - An object of type `RTENode`.
+   * @returns {Nullable<RTENode>} the previous block last node
+   */
+  getPreviousNode(currentNode) {
+    const currentBlock = currentNode.parentBlock;
+    const currentIndex = currentBlock['nodes'].indexOf(currentNode);
+    if (currentIndex > 0) {
+      return currentBlock['nodes'][currentIndex - 1];
+    }
+    else if (currentBlock.parent) {
+      const previousBlock = this.getPreviousBlock(currentBlock);
+      if (previousBlock) {
+        return this.getBlockLastNode(previousBlock);
+      }
+    }
+  }
+  /**
+   * Returns the next node relative to the current node in a rich text editor structure.
+   *
+   * @param {RTENode} currentNode - An object of type `RTENode`.
+   * @returns {Nullable<RTENode>} the next block first node
+   */
+  getNextNode(currentNode) {
+    const currentBlock = currentNode.parentBlock;
+    const currentIndex = currentBlock['nodes'].indexOf(currentNode);
+    if (currentBlock['nodes'][currentIndex + 1]) {
+      return currentBlock['nodes'][currentIndex + 1];
+    }
+    else if (currentBlock.parent) {
+      const nextBlock = this.getNextBlock(currentBlock);
+      if (nextBlock) {
+        return this.getBlockFirstNode(nextBlock);
+      }
+    }
+  }
+  /**
+   * Determines if a given node is the first node within the current state.
+   *
+   * @param {RTENode} currentNode - An object representing a node in a rich text editor (RTE).
+   * @returns {boolean} True or false;
+   */
+  isContentFirstNode(currentNode) {
+    const currentBlock = currentNode.parentBlock;
+    const currentIndex = currentBlock['nodes'].indexOf(currentNode);
+    const parent = currentBlock.parent;
+    if (currentBlock.type === 'list-item') {
+      const listParent = parent.parent;
+      return (currentIndex === 0 &&
+        Array.isArray(parent.blocks) &&
+        parent.blocks[0] === currentBlock &&
+        listParent['type'] !== 'list-item' &&
+        Array.isArray(listParent.blocks) &&
+        listParent.blocks[0] === parent);
+    }
+    else {
+      return currentIndex === 0 && Array.isArray(parent.blocks) && parent.blocks[0] === currentBlock;
+    }
+  }
+  /**
+   * Returns the last node within a given RTE block, handling different block types accordingly.
+   *
+   * @param {RTEBlock} currentBlock - Returns the last node within that block.
+   * @returns {Nullable<RTENode>} Returns the last node of the given `currentBlock` object.
+   */
+  getBlockLastNode(currentBlock) {
+    if (currentBlock.type === 'list-item') {
+      if (currentBlock['children'] && currentBlock['children'].length > 0) {
+        return this.getBlockLastNode(currentBlock['children'][currentBlock['children'].length - 1]);
+      }
+      else {
+        return currentBlock['nodes'][currentBlock['nodes'].length - 1];
+      }
+    }
+    else if (currentBlock.type === 'number-list' || currentBlock.type === 'bullet-list') {
+      if (currentBlock.blocks) {
+        const lastListItem = currentBlock.blocks[currentBlock.blocks.length - 1];
+        return this.getBlockLastNode(lastListItem);
+      }
+    }
+    else {
+      if (currentBlock['nodes']) {
+        return currentBlock['nodes'][currentBlock['nodes'].length - 1];
+      }
+    }
+  }
+  /**
+   * Returns the first node within a given RTE block, handling different block types accordingly.
+   *
+   * @param {RTEBlock} currentBlock - Returns the first node within that block.
+   * @returns {Nullable<RTENode>} Returns the first node of the given `currentBlock` object.
+   */
+  getBlockFirstNode(currentBlock) {
+    if (currentBlock.type === 'number-list' || currentBlock.type === 'bullet-list') {
+      if (currentBlock.blocks) {
+        const firstListItem = currentBlock.blocks[0];
+        return this.getBlockFirstNode(firstListItem);
+      }
+    }
+    else {
+      if (currentBlock['nodes']) {
+        return currentBlock['nodes'][0];
+      }
+    }
+  }
+  /**
+   * TODO: The getPreviousBlock add nest list support
+   * This function retrieves the previous block in a rich text editor, considering different scenarios such as being in a bullet list.
+   *
+   * @param {RTEBlock} currentBlock - Used to retrieve the previous block relative to the given `currentBlock` within a rich text editor context.
+   * @returns {Nullable<RTEBlock>} The previous block if existing
+   */
+  getPreviousBlock(currentBlock) {
+    if (currentBlock && currentBlock.parent && currentBlock.parent.blocks) {
+      const currentBlockIndex = currentBlock.parent.blocks.indexOf(currentBlock);
+      if (currentBlockIndex > 0) {
+        return currentBlock.parent.blocks[currentBlockIndex - 1];
+      }
+      else if ((currentBlock.parent['type'] === 'number-list' ||
+        currentBlock.parent['type'] === 'bullet-list') &&
+        currentBlockIndex === 0) {
+        return this.getPreviousBlock(currentBlock.parent);
+      }
+    }
+  }
+  /**
+   * This function retrieves the next block in a rich text editor, considering different scenarios such as being in a bullet list.
+   *
+   * @param {RTEBlock} currentBlock - Used to retrieve the next block relative to the given `currentBlock` within a rich text editor context.
+   * @returns {Nullable<RTEBlock>} The next block if existing
+   */
+  getNextBlock(currentBlock) {
+    if (currentBlock && currentBlock.parent && currentBlock.parent.blocks) {
+      const currentBlockIndex = currentBlock.parent.blocks.indexOf(currentBlock);
+      if (currentBlock.parent.blocks[currentBlockIndex + 1]) {
+        return currentBlock.parent.blocks[currentBlockIndex + 1];
+      }
+      else if (currentBlock.type === 'list-item' &&
+        currentBlock.parent.blocks.length === currentBlockIndex + 1) {
+        return this.getNextBlock(currentBlock.parent);
+      }
+    }
+  }
+  /**
+   * Replaces a specific node with an array of nodes within a RTENode array.
+   *
+   * @param {RTENode} referNode - Used as a reference node to identify the node that needs to be replaced in the `nodes` array.
+   * @param {RTENode[]} nodes - An array of RTENode objects that you want to replace the `referNode` with in the `nodes` array.
+   */
+  replaceNodeWithNodes(referNode, nodes) {
+    if (this['nodes']) {
+      nodes.forEach((node) => {
+        node.parentBlock = this;
+      });
+      this['nodes'] = this['nodes'].flatMap((node) => {
+        if (node === referNode) {
+          return nodes;
+        }
+        else {
+          return node;
+        }
+      });
+    }
+  }
+}

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

@@ -0,0 +1,247 @@
+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';
+import { AppendChildNodesAction } from '../actions/append-child-nodes-action';
+import { ReplaceChildNodesAction } from '../actions/replace-child-nodes-action';
+import { generateUUID } from '../../../../utils/misc';
+import { InsertBlocksAfterAction } from '../actions/insert-blocks-after-block';
+import { SplitBlockWithNodeAction } from '../actions/split-block-with-node-action';
+import { RTETextBlock } from './text-block';
+import { InsertBlocksBeforeAction } from '../actions/insert-blocks-before-block';
+import { RTETextNode } from '../nodes/text-node';
+/**
+ * Image block
+ */
+export class RTEImageBlock extends RTEBlock {
+  constructor(id) {
+    super(id);
+    this.type = 'image';
+    this.nodes = [];
+  }
+  static from(block) {
+    const imageBlock = new RTEImageBlock(block.id);
+    const { annotations } = block;
+    imageBlock.nodes = block.nodes.map((image) => RTEImageNode.from(image, imageBlock));
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (isNonNullable(item)) {
+          imageBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    return imageBlock;
+  }
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: 'image', nodes: this.nodes.map((node) => node.toJSON()) });
+  }
+  isNotEmpty() {
+    return this.nodes.length > 0 && this.nodes.some((node) => node.url.length > 0);
+  }
+  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
+   *
+   * @param {ModifyContentAction} action - Modify action
+   */
+  doModifyActionApply(action) {
+    switch (action.type) {
+      case ModifyContentActionType.DELETE_CHILD:
+        this.removeChildNode(action);
+        break;
+      case ModifyContentActionType.CLEAR_CHILD_NODES:
+        this.nodes = [];
+        break;
+      case ModifyContentActionType.APPEND_CHILD_NODES:
+        this.appendChildNodes(action.entityToBeAppended);
+        break;
+      case ModifyContentActionType.REPLACE_CHILD_NODES:
+        this.nodes = [];
+        this.appendChildNodes(action.newChildNodes);
+        break;
+      case ModifyContentActionType.SPLIT_BLOCK_WITH_NODE:
+        action.newBlock = this.splitImageNodes(action.splitPointNode, action.startOffsetOfNode);
+        break;
+      case ModifyContentActionType.MERGE_TWO_BLOCKS_NODES:
+        this.mergeTwoBlocksNodes(action.blockNeedToBeMerged);
+        break;
+      case ModifyContentActionType.BREAK_SINGLE_BLOCK:
+        action.newBlock = this.breakSingleBlock(action.startContainerNode, action.startOffset);
+        break;
+      case ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK:
+        action.lineBreakNode = this.lineBreakSingleBlock(action.startContainerNode, action.startOffset);
+        break;
+      case ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS:
+        action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks);
+        break;
+      case ModifyContentActionType.DELETE_BLOCK_CONTENT:
+        this.deleteNodeContent(action);
+        break;
+      case ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
+        this.insertImage(action);
+        break;
+      case ModifyContentActionType.INSERT_NODES_AFTER:
+        this.replaceNodeWithNodes(action.referNode, [
+          action.referNode,
+          ...action.nodesToBeInserted,
+        ]);
+        break;
+      case ModifyContentActionType.INSERT_NODES_BEFORE:
+        this.replaceNodeWithNodes(action.referNode, [
+          ...action.nodesToBeInserted,
+          action.referNode,
+        ]);
+        break;
+    }
+  }
+  registerRef(ref) {
+    if (ref) {
+      stateEntityRenderingRegistry.register(ref, this);
+    }
+  }
+  removeChildNode(action) {
+    this.nodes = this.nodes.filter((node) => node !== action.entityToBeRemoved);
+    if (this.nodes.length === 0) {
+      this.parent.apply(new RemoveChildAction(this));
+    }
+  }
+  /**
+   * The image offset should be 0 or 1
+   * <vega-rich-text-image-editor><img /></vega-rich-text-image-editor>
+   *
+   * @param {RTEImageNode} imageNode The split point image node
+   * @param {number} imageOffset The cursor point 0 | 1
+   */
+  splitImageNodes(imageNode, imageOffset) {
+    const nodesSplitIndex = this.nodes.indexOf(imageNode);
+    if (nodesSplitIndex > -1) {
+      const beforeNodes = this.nodes.slice(0, nodesSplitIndex + imageOffset);
+      const afterNodes = this.nodes.slice(nodesSplitIndex + imageOffset);
+      this.apply(new ReplaceChildNodesAction(beforeNodes));
+      const newBlock = this.cloneWithNodes(afterNodes);
+      this.parent.apply(new InsertBlocksAfterAction(this, newBlock));
+      return newBlock;
+    }
+  }
+  cloneWithNodes(nodes) {
+    const block = new RTEImageBlock(generateUUID());
+    block.nodes = [];
+    block.apply(new AppendChildNodesAction(nodes));
+    return block;
+  }
+  breakSingleBlock(splitNode, startOffsetOfNode) {
+    const newParagraph = RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: generateUUID(), type: 'text', text: '' }],
+    });
+    if (this.isCaretPositionAtEnd(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksAfterAction(this, newParagraph));
+    }
+    else if (this.isCaretPositionAtStart(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksBeforeAction(this, newParagraph));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      this.apply(splitBlockAction);
+      return splitBlockAction.newBlock;
+    }
+    return newParagraph;
+  }
+  lineBreakSingleBlock(splitNode, startOffset) {
+    const newParagraph = this.breakSingleBlock(splitNode, startOffset);
+    if (newParagraph) {
+      return newParagraph['nodes'][0];
+    }
+  }
+  isCaretPositionAtStart(node, startOffset) {
+    return node === this.nodes[0] && startOffset === 0;
+  }
+  isCaretPositionAtEnd(node, startOffset) {
+    const lastNode = this.nodes[this.nodes.length - 1];
+    return node === lastNode && startOffset === 1;
+  }
+  lineBreakMultipleBlocks(selectedBlocks) {
+    const newParagraph = RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: generateUUID(), type: 'text', text: '\n' }],
+    });
+    this.parent.apply(new InsertBlocksAfterAction(this, newParagraph));
+    const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
+    if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
+      afterNodes.push(new RTETextNode(generateUUID(), '\n', newParagraph));
+    }
+    newParagraph.apply(new AppendChildNodesAction(afterNodes));
+    return newParagraph['nodes'][0];
+  }
+  deleteNodeContent(action) {
+    const startContainerNode = action
+      .startContainerNode, startOffset = action.startOffset;
+    let previousNode = this.getPreviousNode(startContainerNode);
+    let nextNode = null;
+    if (startOffset === 1) {
+      const parentBlock = startContainerNode.parentBlock;
+      if (this.isContentFirstNode(startContainerNode)) {
+        nextNode = this.getNextNode(startContainerNode);
+      }
+      if (parentBlock.nodes.length === 1) {
+        parentBlock.parent.apply(new RemoveChildAction(parentBlock));
+      }
+      else {
+        startContainerNode.parentBlock.apply(new RemoveChildAction(startContainerNode));
+      }
+    }
+    else {
+      const shouldRemoveNode = previousNode;
+      if (shouldRemoveNode && shouldRemoveNode instanceof RTEImageNode) {
+        previousNode = this.getPreviousNode(shouldRemoveNode);
+        shouldRemoveNode.parentBlock.apply(new RemoveChildAction(shouldRemoveNode));
+        if (!previousNode) {
+          action.nextNode = startContainerNode;
+        }
+      }
+    }
+    if (previousNode) {
+      action.previousNode = previousNode;
+    }
+    else if (nextNode) {
+      action.nextNode = nextNode;
+    }
+  }
+  /**
+   * Image will always create new image block
+   *
+   * @param {InsertImageToBlockAction} action insert image to current block
+   */
+  insertImage(action) {
+    const splitNode = action.splitPointNode;
+    const startOffsetOfNode = action.startOffsetOfNode;
+    const newImageNodes = action.imageBlockToBeInserted.nodes;
+    const newImageBlock = action.imageBlockToBeInserted;
+    if (this.nodes.length < 1) {
+      this.apply(new AppendChildNodesAction(newImageNodes));
+    }
+    else if (this.isCaretPositionAtEnd(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksAfterAction(this, newImageBlock));
+    }
+    else if (this.isCaretPositionAtStart(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksBeforeAction(this, newImageBlock));
+    }
+    else {
+      this.apply(new SplitBlockWithNodeAction(splitNode, startOffsetOfNode));
+      this.parent.apply(new InsertBlocksAfterAction(this, newImageBlock));
+    }
+  }
+}