@globalpayments/vega 2.49.1 → 2.51.0

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

@@ -0,0 +1,62 @@
+import { h } from '@stencil/core';
+import { RTEBlockRenderer } from './block-renderer.abstract';
+import { RTECodeBlock } from '../../blocks/code-block';
+import RTECodeBlockNodeRenderer from '../nodes/code-block-node-renderer';
+import { ZERO_WIDTH_SPACE } from '../../../constants/constant';
+/**
+ * The code block renderer.
+ */
+class RTECodeBlockRenderer extends RTEBlockRenderer {
+  /**
+   * Check the input block type.
+   *
+   * @param {RTEBlock} block - The input block.
+   * @returns {boolean} - Return true if the input block is a code block.
+   */
+  canHandle(block) {
+    return block instanceof RTECodeBlock;
+  }
+  /**
+   * Render the code block.
+   *
+   * @param {RTECodeBlock} block - The code block.
+   * @param {RTERenderContext} renderContext - The render context.
+   * @returns {HTMLElement} - The code block container element and code node elements.
+   */
+  render(block, renderContext) {
+    const { id, nodes } = block;
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    h("pre", { key: id, class: "code-block-container", ref: (node) => this.registerRef(node, block), onKeyDown: this.preventParentDoFocus, onClick: this.preventParentDoFocus, "data-language": nodes[0].language },
+      this.renderPlaceholderElement('TOP'),
+      RTECodeBlockNodeRenderer.render(nodes[0], renderContext),
+      this.renderPlaceholderElement('BOTTOM')));
+  }
+  /**
+   * The current element used to define the upper and lower bounds of a code block and to ensure that they are reflected in the range object when the code block is selected.
+   *
+   * @param {'TOP' | 'BOTTOM'} position - The element position.
+   * @returns {HTMLElement} - The empty span element.
+   */
+  renderPlaceholderElement(position) {
+    const marginTop = position === 'BOTTOM' ? '-1px' : '0px';
+    const marginBottom = position === 'BOTTOM' ? '0px' : '-1px';
+    return (h("span", { class: RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME, style: {
+        display: 'block',
+        height: '1px',
+        overflow: 'hidden',
+        zIndex: '1',
+        marginTop,
+        marginBottom,
+      } }, ZERO_WIDTH_SPACE));
+  }
+  /**
+   * Prevent the click event bubble, avoid the rich text content trigger focus event.
+   *
+   * @param {MouseEvent} e - The event object.
+   */
+  preventParentDoFocus(e) {
+    e.stopPropagation();
+  }
+}
+export default new RTECodeBlockRenderer();

package/dist/collection/components/vega-rich-text-editor/dto/renderers/nodes/code-block-node-renderer.js

@@ -0,0 +1,78 @@
+import { h } from '@stencil/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaChange, VegaRemove } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { RTENodeRenderer } from './node-renderer.abstract';
+import { SwitchOutFromCodeBlockAction } from '../../actions/switch-out-from-code-block-action';
+import { UpdateCodeBlockAction } from '../../actions/update-code-block-action';
+import { SelectionChangeAction } from '../../actions/selection-change-action';
+import { InternalAnnotationTypeEnum } from '../../annotations/annotation.abstract';
+import { VegaInternalCodeBlockSelectionChange } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { RemoveCodeBlockAction } from '../../actions/remove-code-block-action';
+class RTECodeBlockNodeRenderer extends RTENodeRenderer {
+  render(node, renderContext) {
+    const { text: code, language } = node;
+    return (h("vega-code-block", { key: node.id, value: { code, language }, readOnly: !renderContext.editable, "data-content": code, "data-language": language, ref: (ref) => {
+        this.registerRef(ref, node);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (input) => this.handleCodeContentChange(input.detail, node));
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaRemove, (input) => this.handleCodeBlockRemove(input, node));
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaInternalCodeBlockSelectionChange, (input) => this.handleSelectionChange(input.detail, node));
+      } }));
+  }
+  /**
+   * Sync the code block DTO language and content when the component change event emit.
+   *
+   * @param {VegaCodeBlockValue} codeBlockValue - The code block value.
+   * @param {RTECodeBlockNode} node - The DTO class instance.
+   */
+  handleCodeContentChange(codeBlockValue, node) {
+    const { code, language } = codeBlockValue;
+    if (this.shouldSwitchOutOfCodeBlock(node.text, code)) {
+      const switchAction = new SwitchOutFromCodeBlockAction(code, language);
+      node.parentBlock.apply(switchAction);
+    }
+    else {
+      node.apply(new UpdateCodeBlockAction(code, language));
+    }
+  }
+  /**
+   * Remove the code block from RTE value when the component remove event emit.
+   *
+   * @param {ChangeManagerEventLike<unknown>} input - The internal event payload object.
+   * @param {RTECodeBlockNode} node - The DTO class instance.
+   */
+  handleCodeBlockRemove(input, node) {
+    input.preventDefault();
+    node.parentBlock.apply(new RemoveCodeBlockAction());
+  }
+  /**
+   * The cursor should jump out of code block if enter three line breaks at the end.
+   *
+   * @param {string} oldCode - The old code content.
+   * @param {string} newCode - The new code content.
+   * @returns {boolean} - Boolean value.
+   */
+  shouldSwitchOutOfCodeBlock(oldCode, newCode) {
+    const newCodes = newCode.split('\n');
+    if (newCode.length > oldCode.length &&
+      newCodes.length > 4 &&
+      newCodes.slice(newCodes.length - 4).join('') === ``) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Apply the selection action to code node or remove from the annotation map.
+   *
+   * @param {boolean} isSelected - The code block is focus or not.
+   * @param {RTECodeBlockNode} node - The DTO class instance.
+   */
+  handleSelectionChange(isSelected, node) {
+    if (isSelected) {
+      node.apply(new SelectionChangeAction(null));
+    }
+    else {
+      node.annotationMap.delete(InternalAnnotationTypeEnum.SELECTION_RANGE);
+    }
+  }
+}
+export default new RTECodeBlockNodeRenderer();

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/delete-selected-nodes-controller.js

@@ -16,6 +16,7 @@ import { InsertBlocksBeforeAction } from '../../dto/actions/insert-blocks-before
 import { generateUUID } from '../../../../utils/misc';
 import { AppendChildNodesAction } from '../../dto/actions/append-child-nodes-action';
 import { UpdateTextAction } from '../../dto/actions/update-text-action';
+import { RTECodeBlockNode } from '../../dto/nodes/code-block-node';
 /**
  * The `DeleteSelectedNodesController` class provides methods to delete selected nodes.
  */
@@ -68,7 +69,10 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
     if (selectedNodes.length > 1) {
       // Remove all selected nodes except start node and end node(the end image node will be removed), the start node need to get the index of the block
       const shouldRemovedItems = selectedNodes.filter((item) => {
-        if (item.type !== 'IMAGE') {
+        if (item instanceof RTECodeBlockNode) {
+          return item !== startNode;
+        }
+        else if (item.type !== 'IMAGE') {
           return item !== startNode && item !== endNode;
         }
         else {
@@ -82,7 +86,8 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
     this.removeRangeStartAndEndSelectedText();
     /**
      * if the range start node is image and the item is selected, so we need remove the image item, the image block will be removed if the item is the only item.
-     * but before remove the image block, we need insert a paragraph to make sure the start block and start node could be get correct before insert text or break paragraph action
+     * but before remove the image block, we need insert a paragraph to make sure the start block and start node could be get correct before insert text or break paragraph action.
+     * the code block node should do the same logic.
      */
     if (startNode instanceof RTEImageNode &&
       startOffset !== 1 &&
@@ -100,6 +105,12 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
         return startNode.parentBlock.nodes[0];
       }
     }
+    else if (startNode instanceof RTECodeBlockNode) {
+      const paragraph = this.createEmptyParagraph();
+      startNode.parentBlock.parent.apply(new InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
+      startNode.parentBlock.apply(new RemoveChildAction(startNode));
+      return paragraph.nodes[0];
+    }
     return startNode;
   }
   /**
@@ -149,7 +160,9 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
               endRTENode.parentBlock.apply(new RemoveChildAction(endRTENode.parentBlock.nodes[0]));
             }
           }
-          if (startRTENode.parentBlock !== endRTENode.parentBlock) {
+          if (startRTENode instanceof RTETextNode &&
+            endRTENode instanceof RTETextNode &&
+            startRTENode.parentBlock !== endRTENode.parentBlock) {
             startRTENode.parentBlock.apply(new AppendChildNodesAction(endBlock.nodes));
             endBlock.nodes = [];
           }
@@ -170,7 +183,9 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
   shouldMergeTextNode(nodeA, nodeB) {
     const { annotations: annotationsA } = nodeA.toJSON();
     const { annotations: annotationsB } = nodeB.toJSON();
-    return JSON.stringify(annotationsA) === JSON.stringify(annotationsB);
+    return (nodeA instanceof RTETextNode &&
+      nodeB instanceof RTETextNode &&
+      JSON.stringify(annotationsA) === JSON.stringify(annotationsB));
   }
 }
 __decorate([

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

@@ -8,6 +8,8 @@ import { VegaImageToRTEImageBlockStrategy } from './vega-image-to-rte-image-bloc
 import { OlToRTEListBlockStrategy } from './ol-to-rte-list-block-strategy';
 import { SpanImageToRTEImageBlockStrategy } from './span-img-to-rte-image-block-strategy';
 import { ULNotLiChildToRTEListItemBlockStrategy } from './ul-not-li-child-to-rte-list-item-block';
+import { VegaCodeBlockToRTECodeBlockStrategy } from './vega-code-block-to-rte-code-block-strategy';
+import { JiraCodeToRTECodeBlockStrategy } from './jira-code-to-rte-code-block-strategy';
 /** Element to DTO processor */
 export class ElementToDtoStrategyProcessor {
   constructor() {
@@ -16,6 +18,8 @@ export class ElementToDtoStrategyProcessor {
       new OlToRTEListBlockStrategy(),
       new ULNotLiChildToRTEListItemBlockStrategy(),
       new LiToRTEListItemBlockStrategy(),
+      new VegaCodeBlockToRTECodeBlockStrategy(),
+      new JiraCodeToRTECodeBlockStrategy(),
       new InlineBlockToRTETextBlockStrategy(),
       new ImgToRTEImageBlockStrategy(),
       new VegaImageToRTEImageBlockStrategy(),

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/jira-code-to-rte-code-block-strategy.js

@@ -0,0 +1,54 @@
+import { generateUUID } from '../../../../../../utils/misc';
+import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+import { RTECodeBlock } from '../../../../dto/blocks/code-block';
+/** Transform other editor code element which has attribute data-language to RTE code block DTO */
+export class JiraCodeToRTECodeBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return (elementsArray[currentIndex].tagName === 'PRE' ||
+      elementsArray[currentIndex].tagName === 'CODE') &&
+      elementsArray[currentIndex].hasAttribute('data-language')
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a code block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTECodeBlock>} - Code block.
+   */
+  handle(elementsArray) {
+    const codeRef = elementsArray[0];
+    if (codeRef) {
+      const content = codeRef.textContent;
+      const language = codeRef.dataset
+        .language;
+      return RTECodeBlock.from({
+        id: generateUUID(),
+        type: 'code-block',
+        content,
+        language,
+      });
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}

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

@@ -0,0 +1,70 @@
+import { JiraCodeToRTECodeBlockStrategy } from './jira-code-to-rte-code-block-strategy';
+/** Transform vega-code-block element to code block DTO */
+export class VegaCodeBlockToRTECodeBlockStrategy extends JiraCodeToRTECodeBlockStrategy {
+  /**
+   * Can be handle.
+   *
+   * TODO: Update the browser clipboard data to fix the issue with nested vega-code-block elements.
+   * In safari the html snippet will be like: <vega-code-block><p><span>paragraph</span></p><vega-code-block></vega-code-block></vega-code-block>
+   * The vega-code-block nested inside the vega-code-block, so we need to check the child element.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return (elementsArray[currentIndex].tagName === 'VEGA-CODE-BLOCK' &&
+      !!elementsArray[currentIndex].querySelector('vega-code-block') === false) ||
+      this.isCodeBlockContainer(elementsArray[currentIndex])
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a code block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTECodeBlock>} - Code block.
+   */
+  handle(elementsArray) {
+    const codeBlockElement = this.isCodeBlockContainer(elementsArray[0])
+      ? elementsArray[0].querySelector('vega-code-block')
+      : elementsArray[0];
+    const code = codeBlockElement.querySelector('code');
+    if (code) {
+      return super.handle([code]); // Call the parent method to handle the code element
+    }
+    else if (codeBlockElement.hasAttribute('data-content')) {
+      // The code element in shadow dom could be empty in firefox.
+      // eslint-disable-next-line no-restricted-globals
+      const code = document.createElement('code');
+      code.textContent = codeBlockElement.dataset.content;
+      code.dataset.language = codeBlockElement.dataset.language;
+      return super.handle([code]); // Call the parent method to handle the code element
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * Checks if the given element is a code block container.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} - Boolean result.
+   */
+  isCodeBlockContainer(element) {
+    return (element.tagName === 'PRE' &&
+      element.classList.contains('code-block-container') &&
+      element.querySelectorAll('vega-code-block').length === 1);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-line-break-handler.js

@@ -13,11 +13,13 @@ export class InsertLineBreakHandler extends BaseHandler {
     if (this.isRootContainer(range.startContainer)) {
       this.breakNewBlock();
     }
-    if (selectedBlocks.length < 2) {
-      this.breakSingleBlock();
-    }
-    else {
-      this.breakMultipleBlocks();
+    if (selectedBlocks.length) {
+      if (selectedBlocks.length < 2) {
+        this.breakSingleBlock();
+      }
+      else {
+        this.breakMultipleBlocks();
+      }
     }
   }
   /**

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-paragraph-handler.js

@@ -9,11 +9,13 @@ export class InsertParagraphHandler extends BaseHandler {
    */
   handleEvent() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
-    if (selectedBlocks.length < 2) {
-      this.breakSingleBlock();
-    }
-    else {
-      this.breakMultipleBlocks();
+    if (selectedBlocks.length) {
+      if (selectedBlocks.length < 2) {
+        this.breakSingleBlock();
+      }
+      else {
+        this.breakMultipleBlocks();
+      }
     }
   }
   /**

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-paste-handler.js

@@ -63,8 +63,10 @@ export class InsertPasteHandler extends BaseHandler {
     const cursorNode = this.removeSelectionRange();
     /* istanbul ignore next */
     const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parentBlock;
-    currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, ...blocks));
-    this.switchCaretPositionToNextElement(currentBlock);
+    if (currentBlock) {
+      currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, ...blocks));
+      this.switchCaretPositionToNextElement(currentBlock);
+    }
   }
   /**
    * Format and parse elements from user paste.
@@ -73,7 +75,12 @@ export class InsertPasteHandler extends BaseHandler {
    * @returns {RTEContentBlock[]} - RTEContentBlock.
    */
   parsePastedElements(event) {
-    const pastedHTML = event.dataTransfer.getData('text/html');
+    let pastedHTML = event.dataTransfer.getData('text/html');
+    if (!pastedHTML) {
+      const pastedText = event.dataTransfer.getData('text/plain');
+      pastedHTML = this.parsePlainText(pastedText);
+    }
+    // eslint-disable-next-line no-restricted-globals
     const tempContainer = document.createElement('div');
     tempContainer.innerHTML = pastedHTML;
     return this.elementToDTOProcessor
@@ -92,4 +99,18 @@ export class InsertPasteHandler extends BaseHandler {
       this.selectionController.enqueueSelectionRangeFutureState(newBlock['nodes'][0], 0);
     }
   }
+  /**
+   * Parses the content of a plain text and formats it into HTML.
+   *
+   * @param {string} content - The content of plain text.
+   * @returns {string} - The formatted HTML string.
+   */
+  parsePlainText(content) {
+    const lines = content.split('\n');
+    return lines
+      .map((line) => {
+      return `<span>${line}</span>`;
+    })
+      .join('<span>\n</span>');
+  }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/internal-code-block-selection-controller.js

@@ -0,0 +1,64 @@
+import { AutoRunWhenReRenderTaskQueueSlimmer } from '../../../../helpers/slimmers/auto-run-when-re-render-task-queue-slimmer.abstract';
+import stateEntityRenderingRegistry from './state-entity-rendering-registry';
+/**
+ * The rich text internal code block selection controller.
+ */
+export class InternalCodeBlockSelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
+  constructor() {
+    super(1);
+    this.focusNodeOffset = 0;
+    /**
+     * The method invoke after the component re-render.
+     */
+    this.doTask = async () => {
+      await this.focusTheCodeBlock(this.shouldFocusNode);
+    };
+  }
+  /**
+   * Update the internal code block selection.
+   *
+   * @param {RTECodeBlockNode} startNode - The internal code block node DTO.
+   * @param {number} startOffset - The content offset.
+   * @param {boolean} immediatelyRun - Whether to invoke the method immediately.
+   */
+  enqueueSelectionRangeFutureState(startNode, startOffset, immediatelyRun) {
+    this.shouldFocusNode = startNode;
+    this.focusNodeOffset = startOffset;
+    super.enqueueTheTaskIntoQueue(immediatelyRun);
+  }
+  /**
+   * Check the code block is actually selected or not. Because the Code block is a shadow dom, so can't detect the content selected state.
+   * We add two placeholder spans at the begin and end position, we could check the placeholder spans selected state to make sure the code block is selected or not.
+   *
+   *
+   * @example
+   * <div>
+   * <span></span>
+   * <vega-code-block></vega-code-block>
+   * <span><span>
+   * </div>
+   * @param {RTECodeBlock} codeBlock - The code block DTO.
+   * @param {Range} range - The range instance.
+   * @returns {boolean} - The boolean result.
+   */
+  isCodeBlockSelected(codeBlock, range) {
+    const codeBlockNode = codeBlock.nodes[0];
+    const entityDom = stateEntityRenderingRegistry.getDOMByEntity(codeBlockNode);
+    return (codeBlock.isSelected() ||
+      (entityDom &&
+        range.intersectsNode(entityDom.nextSibling) &&
+        range.intersectsNode(entityDom.previousSibling)));
+  }
+  /**
+   * Focus the code block component.
+   *
+   * @param {RTECodeBlockNode} node - The code block node DTO.
+   */
+  async focusTheCodeBlock(node) {
+    await Promise.resolve();
+    const entityDom = stateEntityRenderingRegistry.getDOMByEntity(node);
+    if (entityDom) {
+      void entityDom.doFocus();
+    }
+  }
+}