@globalpayments/vega 2.32.0 → 2.34.0

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/focus-controller.js

@@ -0,0 +1,73 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import stateEntityRenderingRegistry from './state-entity-rendering-registry';
+import { RTETextBlock } from '../../dto/blocks/text-block';
+import { generateUUID } from '../../../../utils/misc';
+import { InsertBlocksAfterAction } from '../../dto/actions/insert-blocks-after-block';
+/**
+ * Focus controller for RTE
+ */
+export class FocusController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Do a focus on the last text node of the last block
+     *
+     * @param {RTEContentBlock} lastBlock - The last block of the content
+     */
+    this.doFocusOnLastTextNode = async (lastBlock) => {
+      this.setCaretRangeToNodeEnd(stateEntityRenderingRegistry.getDOMByEntity(lastBlock.getLastNode()).firstChild);
+      await this.vegaRichTextEditorRenderer.getRichTextContentRef().vegaFocus();
+    };
+  }
+  /**
+   * Focus on the last text node of the last block.
+   *
+   * @param {{ newLine?: boolean }} options - The options of the method
+   * @param {boolean} options.newLine - Should a new line be added before the last text node
+   * @returns {Promise<void>} - A promise that resolves when the focus is set
+   */
+  async focusOnLastTextNode(options) {
+    const lastBlock = this.value.blocks[this.value.blocks.length - 1];
+    if (!(lastBlock instanceof RTETextBlock) || (options === null || options === void 0 ? void 0 : options.newLine)) {
+      const newTextBlock = RTETextBlock.from({
+        id: generateUUID(),
+        type: 'paragraph',
+        nodes: [{ id: generateUUID(), type: 'text', text: '' }],
+      });
+      lastBlock.parent.apply(new InsertBlocksAfterAction(lastBlock, newTextBlock));
+      await this.valueController.flushChanges(this.value);
+      await this.doFocusOnLastTextNode(newTextBlock);
+    }
+    else {
+      await this.doFocusOnLastTextNode(lastBlock);
+    }
+  }
+  /**
+   * Move the caret to the end of the node
+   *
+   * @param {Node} targetNode - The node to move the caret to
+   */
+  setCaretRangeToNodeEnd(targetNode) {
+    const range = new Range();
+    range.setStart(targetNode, targetNode.nodeValue.length);
+    this.selectionController.setSelectionRange(range);
+  }
+}
+__decorate([
+  MapToComponentField()
+], FocusController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], FocusController.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentField()
+], FocusController.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], FocusController.prototype, "value", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-handler/element-to-dto-handler.abstract.js

@@ -0,0 +1,135 @@
+import { RTETextBlock } from '../../../../dto/blocks/text-block';
+/**
+ * Abstract class of element to DTO handler
+ */
+export class ElementToDTOHandlerAbstract {
+  /**
+   * At new of handler, We need to inherit the style of the parent element
+   *   and clone an empty element so that the child elements can be appended.
+   *
+   * @param {HTMLElement} element - Current element.
+   */
+  constructor(element) {
+    this.setEntityElementStyle(element);
+    this.setElement(element);
+  }
+  /* istanbul ignore next */
+  // eslint-disable-next-line jsdoc/require-returns-check
+  /**
+   * Can be handle, the class inherit this class should implement it.
+   *
+   * @param {HTMLElement} element - Current element.
+   * @returns {boolean} Can be handle.
+   */
+  static canHandle(element) {
+    throw new Error(`Method not implemented! ${element}`);
+  }
+  /**
+   * Transform current text block to a DTO.
+   *
+   * @returns {RTETextBlock} Current text block.
+   */
+  static currentTextBlockElementToDTO() {
+    const element = this.getCurrentTextBlockElement();
+    const firstNode = element.firstChild;
+    if (firstNode && firstNode.nodeName === 'SPAN' && firstNode.textContent === '\n') {
+      firstNode.remove();
+    }
+    if (element.childNodes.length > 0) {
+      const block = RTETextBlock.fromHTML(element, 'paragraph');
+      element.innerHTML = '';
+      return block;
+    }
+    return null;
+  }
+  /**
+   * Get current text block element.
+   *
+   * @returns {HTMLDivElement} - Current text block element.
+   */
+  static getCurrentTextBlockElement() {
+    return ElementToDTOHandlerAbstract.currentTextBlockElement;
+  }
+  /**
+   * While it a empty block. we should use new line span instead this block.
+   *
+   * @param {HTMLElement} blockElement - Current block element.
+   * @returns {boolean} - is handled.
+   */
+  handleEmptyBlock(blockElement) {
+    if (this.currentVirtualElement.childNodes.length === 0) {
+      (blockElement || ElementToDTOHandlerAbstract.getCurrentTextBlockElement()).append(this.createNewLineSpan());
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Inherit style of parent.
+   *
+   * @param {HTMLElement} element - Current element.
+   */
+  setEntityElementStyle(element) {
+    if (element.nodeType === Node.TEXT_NODE)
+      return;
+    let currentStyle = element.getAttribute('style') || '';
+    const currentClass = element.classList;
+    const parent = element.parentElement;
+    const parentStyle = parent.getAttribute('style') || '';
+    const parentClass = parent.classList;
+    switch (element.nodeName) {
+      case 'CODE':
+        currentClass.add('v-rte--code');
+        break;
+      case 'STRONG':
+        currentStyle += 'font-weight: bold; ';
+        break;
+      case 'I':
+      case 'EM':
+        currentStyle += 'font-style: italic; ';
+        break;
+      case 'S':
+        currentClass.add('v-rte--strikethrough');
+        break;
+      case 'U':
+        currentClass.add('v-rte--underline');
+        break;
+      default:
+        break;
+    }
+    element.setAttribute('style', parentStyle + currentStyle);
+    element.classList.add(...Array.from(parentClass));
+  }
+  /**
+   * Set current element.
+   *   while element is a text node, we should wrap it and inherit it style
+   *   otherwise, we should clone it and clear content.
+   *
+   * @param {HTMLElement} element - Current element.
+   */
+  setElement(element) {
+    this.currentEntityElement = element;
+    if (element.nodeType === Node.TEXT_NODE) {
+      const wrapper = document.createElement('span');
+      wrapper.setAttribute('style', element.parentElement.getAttribute('style'));
+      wrapper.setAttribute('class', element.parentElement.getAttribute('class'));
+      wrapper.append(element);
+      this.currentVirtualElement = wrapper;
+    }
+    else {
+      const elementClone = element.cloneNode(true);
+      elementClone.innerHTML = '';
+      this.currentVirtualElement = elementClone;
+    }
+  }
+  /**
+   * Create a new line span.
+   *
+   * @returns {HTMLElement} - new line span.
+   */
+  createNewLineSpan() {
+    const span = document.createElement('span');
+    span.append('\n');
+    return span;
+  }
+}
+ElementToDTOHandlerAbstract.currentTextBlockElement = document.createElement('div');

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-handler/element-to-dto-processor.js

@@ -0,0 +1,74 @@
+import { ElementToDTOHandlerAbstract } from './element-to-dto-handler.abstract';
+import { ImageToDTOHandler } from './image-to-dto-handler';
+import { InlineBlockToDTOHandler } from './inline-block-to-dto-handler';
+import { LinkToDTOHandler } from './link-to-dto-handler';
+import { ListItemToDTOHandler } from './list-item-to-dto-handler';
+import { ListToDTOHandler } from './list-to-dto-handler';
+import { ParagraphToDTOHandler } from './paragraph-to-dto-handler';
+import { TextBlockToDTOHandler } from './text-block-to-dto-handler';
+import { TextToDTOHandler } from './text-to-dto-handler';
+/**
+ * Element to DTO processor
+ */
+export class ElementToDTOProcessor {
+  constructor() {
+    this.elementHandlers = [
+      TextToDTOHandler,
+      ImageToDTOHandler,
+      ListToDTOHandler,
+      ListItemToDTOHandler,
+      TextBlockToDTOHandler,
+      ParagraphToDTOHandler,
+      LinkToDTOHandler,
+      InlineBlockToDTOHandler,
+    ];
+  }
+  /**
+   * Transform element to block DTO.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {RTEContentBlock[]} Block DTO.
+   */
+  process(element) {
+    const blocks = this.transformDomToDto(Array.from(element.childNodes), null);
+    blocks.push(ElementToDTOHandlerAbstract.currentTextBlockElementToDTO());
+    return blocks.filter(Boolean);
+  }
+  /**
+   * Transform elements to block DTO.
+   *
+   * @param {HTMLElement[]} elements - An pasted elements.
+   * @param {HTMLElement} blockElement - Current block element.
+   * @returns {RTEContentBlock[]} Block DTO.
+   */
+  transformDomToDto(elements, blockElement) {
+    const rootBlocks = [];
+    elements.forEach((element) => {
+      if (this.isInvalidElement(element))
+        return;
+      const handler = this.elementHandlers.find((elementHandler) => elementHandler.canHandle(element));
+      const handle = new handler(element);
+      if (element.nodeType !== Node.TEXT_NODE) {
+        rootBlocks.push(...this.transformDomToDto(handle.childElements(), handle.getNextBlockElement(blockElement)));
+      }
+      rootBlocks.push(...handle.handle(blockElement));
+    });
+    return rootBlocks;
+  }
+  /**
+   * Checks if the given element is valid to parse.
+   *
+   * @param {HTMLElement} element - The pasted element.
+   * @returns {boolean} Is valid
+   */
+  isInvalidElement(element) {
+    if (element.nodeType === Node.COMMENT_NODE)
+      return true;
+    if (element.nodeType === Node.TEXT_NODE && element.nodeValue.includes('\t')) {
+      const value = element.nodeValue.replace(/\n|\t/gm, '');
+      if (value.length === 0)
+        return true;
+    }
+    return ['META', 'BUTTON', 'STYLE'].includes(element.nodeName);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-handler/image-to-dto-handler.js

@@ -0,0 +1,47 @@
+import { RTEImageBlock } from '../../../../dto/blocks/image-block';
+import { ElementToDTOHandlerAbstract } from './element-to-dto-handler.abstract';
+/**
+ * Transform image element to DTO.
+ */
+export class ImageToDTOHandler extends ElementToDTOHandlerAbstract {
+  /**
+   * Can be transform.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {boolean} Result.
+   */
+  static canHandle(element) {
+    return (element.nodeType === Node.ELEMENT_NODE &&
+      (element.nodeName === 'IMG' || element.querySelector('vega-rich-text-image-editor') !== null));
+  }
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return [];
+  }
+  /**
+   * Transform element to DTO.
+   *   When blockElement is exist, it means that the current element is a child node,
+   *   and we need to wait for its root block to be converted into a dto.
+   *   Otherwise, the current node is the root node, and we can directly convert it.
+   *
+   * @returns {RTEContentBlock[]} - Block DTO.
+   */
+  handle() {
+    return [
+      ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
+      RTEImageBlock.fromHTML(this.currentEntityElement),
+    ];
+  }
+  /**
+   * Get the block element for child nodes
+   *
+   * @returns {HTMLElement} - Block element for child nodes.
+   */
+  getNextBlockElement() {
+    return this.currentVirtualElement;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-handler/inline-block-to-dto-handler.js

@@ -0,0 +1,39 @@
+import { ElementToDTOHandlerAbstract } from './element-to-dto-handler.abstract';
+/**
+ * Transform link element to DTO.
+ */
+export class InlineBlockToDTOHandler extends ElementToDTOHandlerAbstract {
+  /**
+   * Can be transform.
+   *
+   * @returns {boolean} Result.
+   */
+  static canHandle() {
+    return true;
+  }
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return Array.from(this.currentEntityElement.childNodes);
+  }
+  /**
+   * The inline block is a child element, and there is no need to convert it to a dto here
+   *
+   * @returns {RTEContentBlock[]} - Empty dto.
+   */
+  handle() {
+    return [];
+  }
+  /**
+   * Get the block element for child nodes
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {Nullable<HTMLElement>} - blockElement.
+   */
+  getNextBlockElement(blockElement) {
+    return blockElement;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-handler/link-to-dto-handler.js

@@ -0,0 +1,50 @@
+import { generateUUID } from '../../../../../../utils/misc';
+import { ElementToDTOHandlerAbstract } from './element-to-dto-handler.abstract';
+/**
+ * Transform link element to DTO.
+ */
+export class LinkToDTOHandler extends ElementToDTOHandlerAbstract {
+  constructor(element) {
+    super(element);
+  }
+  /**
+   * Can be transform.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {boolean} Result.
+   */
+  static canHandle(element) {
+    return ['A'].includes(element.nodeName);
+  }
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return Array.from(this.currentEntityElement.childNodes);
+  }
+  /**
+   * Format and append element for it block element.
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {RTEContentBlock[]} - Block DTO.
+   */
+  handle(blockElement) {
+    const key = generateUUID();
+    Array.from(this.currentVirtualElement.children).forEach((childElement) => {
+      childElement.setAttribute('data-href', this.currentVirtualElement.href);
+      childElement.setAttribute('data-group-key', key);
+      (blockElement || ElementToDTOHandlerAbstract.getCurrentTextBlockElement()).append(childElement);
+    });
+    return [];
+  }
+  /**
+   * Get the block element for child nodes
+   *
+   * @returns {HTMLElement} - Block element for child nodes.
+   */
+  getNextBlockElement() {
+    return this.currentVirtualElement;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-handler/list-item-to-dto-handler.js

@@ -0,0 +1,41 @@
+import { ElementToDTOHandlerAbstract } from './element-to-dto-handler.abstract';
+/**
+ * Transform list element to DTO.
+ */
+export class ListItemToDTOHandler extends ElementToDTOHandlerAbstract {
+  /**
+   * Can be transform.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {boolean} Result.
+   */
+  static canHandle(element) {
+    return ['LI'].includes(element.nodeName);
+  }
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return Array.from(this.currentEntityElement.childNodes);
+  }
+  /**
+   * Append list item node to it block element.
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {RTEContentBlock[]} - Block DTO.
+   */
+  handle(blockElement) {
+    blockElement.append(this.currentVirtualElement);
+    return [];
+  }
+  /**
+   * Get the block element for child nodes
+   *
+   * @returns {HTMLElement} - Block element for child nodes.
+   */
+  getNextBlockElement() {
+    return this.currentVirtualElement;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-handler/list-to-dto-handler.js

@@ -0,0 +1,57 @@
+import { RTEListBlock } from '../../../../dto/blocks/list-block';
+import { ElementToDTOHandlerAbstract } from './element-to-dto-handler.abstract';
+import { ListItemToDTOHandler } from './list-item-to-dto-handler';
+/**
+ * Transform list element to DTO.
+ */
+export class ListToDTOHandler extends ElementToDTOHandlerAbstract {
+  /**
+   * Can be transform.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {boolean} Result.
+   */
+  static canHandle(element) {
+    return ['UL', 'OL'].includes(element.nodeName);
+  }
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return Array.from(this.currentEntityElement.childNodes);
+  }
+  /**
+   * Transform element to DTO.
+   *   When blockElement is exist, it means that the current element is a child node,
+   *   and we need to append and wait for its root block to be converted into a dto.
+   *   Otherwise, the current node is the root node, and we can directly convert it.
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {RTEContentBlock[]} - Block DTO.
+   */
+  handle(blockElement) {
+    if (this.handleEmptyBlock(blockElement)) {
+      return [];
+    }
+    if (blockElement && ListItemToDTOHandler.canHandle(blockElement)) {
+      blockElement.append(this.currentVirtualElement);
+      return [];
+    }
+    else {
+      return [
+        ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
+        RTEListBlock.fromHTML(this.currentVirtualElement),
+      ];
+    }
+  }
+  /**
+   * Get the block element for child nodes
+   *
+   * @returns {HTMLElement} - Block element for child nodes.
+   */
+  getNextBlockElement() {
+    return this.currentVirtualElement;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-handler/paragraph-to-dto-handler.js

@@ -0,0 +1,56 @@
+import { RTETextBlock } from '../../../../dto/blocks/text-block';
+import { ElementToDTOHandlerAbstract } from './element-to-dto-handler.abstract';
+/**
+ * Transform paragraph.
+ */
+export class ParagraphToDTOHandler extends ElementToDTOHandlerAbstract {
+  /**
+   * Can be transform.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {boolean} Result.
+   */
+  static canHandle(element) {
+    return ['DIV', 'P'].includes(element.nodeName);
+  }
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return Array.from(this.currentEntityElement.childNodes);
+  }
+  /**
+   * Transform element to DTO.
+   *   When blockElement is exist, it means that the current element is a child node,
+   *   and we need to wait for its root block to be converted into a dto.
+   *   Otherwise, the current node is the root node, and we can directly convert it.
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {RTEContentBlock[]} - Block DTO.
+   */
+  handle(blockElement) {
+    if (this.handleEmptyBlock(blockElement)) {
+      return [];
+    }
+    if (blockElement && !ParagraphToDTOHandler.canHandle(blockElement)) {
+      blockElement.append(...Array.from(this.currentVirtualElement.childNodes));
+      return [];
+    }
+    else {
+      return [
+        ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
+        RTETextBlock.fromHTML(this.currentVirtualElement, 'paragraph'),
+      ];
+    }
+  }
+  /**
+   * Get the block element for child nodes
+   *
+   * @returns {HTMLElement} - Block element for child nodes.
+   */
+  getNextBlockElement() {
+    return this.currentVirtualElement;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-handler/text-block-to-dto-handler.js

@@ -0,0 +1,77 @@
+import { RTETextBlock } from '../../../../dto/blocks/text-block';
+import { ElementToDTOHandlerAbstract } from './element-to-dto-handler.abstract';
+/**
+ * Transform text block element to DTO.
+ */
+export class TextBlockToDTOHandler extends ElementToDTOHandlerAbstract {
+  /**
+   * Can be transform.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {boolean} Result.
+   */
+  static canHandle(element) {
+    return ['heading-1', 'heading-2', 'heading-3', 'title', 'subtitle'].includes(this.getElementType(element));
+  }
+  /**
+   * Get type of element.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {string} type.
+   */
+  static getElementType(element) {
+    if (element.nodeType !== Node.TEXT_NODE && element.hasAttribute('data-type')) {
+      return element.getAttribute('data-type');
+    }
+    switch (element.nodeName) {
+      case 'H1':
+        return 'heading-1';
+      case 'H2':
+        return 'heading-2';
+      case 'H3':
+        return 'heading-3';
+      default:
+        return '';
+    }
+  }
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return Array.from(this.currentEntityElement.childNodes);
+  }
+  /**
+   * Transform element to DTO.
+   *   When blockElement is exist, it means that the current element is a child node,
+   *   and we need to wait for its root block to be converted into a dto.
+   *   Otherwise, the current node is the root node, and we can directly convert it.
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {RTEContentBlock[]} - Block DTO.
+   */
+  handle(blockElement) {
+    if (this.handleEmptyBlock(blockElement)) {
+      return [];
+    }
+    if (blockElement) {
+      blockElement.append(...Array.from(this.currentVirtualElement.childNodes));
+      return [];
+    }
+    else {
+      return [
+        ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
+        RTETextBlock.fromHTML(this.currentVirtualElement, TextBlockToDTOHandler.getElementType(this.currentVirtualElement)),
+      ];
+    }
+  }
+  /**
+   * Get the block element for child nodes
+   *
+   * @returns {HTMLElement} - Block element for child nodes.
+   */
+  getNextBlockElement() {
+    return this.currentVirtualElement;
+  }
+}