@globalpayments/vega 2.92.0 → 2.93.0

package/dist/collection/components/vega-rich-text-editor/extensions/paste/paste-extension.js

@@ -0,0 +1,442 @@
+import { VegaRTEExtension } from '../extension.abstract';
+import { RTEPasteChooserUI } from './paste-chooser-ui';
+import { RTE_PASTE_MODE_DATA_TYPE } from './paste-constants';
+/**
+ * Vega Rich Text Editor paste extension.
+ * Intercepts keyboard paste and allows users to choose paste mode.
+ */
+export class VegaRTEPasteExtension extends VegaRTEExtension {
+  constructor() {
+    super(...arguments);
+    this.editableEl = null;
+    this.contentHostEl = null;
+    this.chooserUI = null;
+    this.pendingPastePayload = null;
+    this.listenerDocument = null;
+    this.listenerWindow = null;
+    /**
+     * Handles a native paste event by capturing the clipboard payload and
+     * rendering the paste-mode chooser.
+     *
+     * @param {ClipboardEvent} event Native clipboard paste event.
+     */
+    this.handlePasteEvent = (event) => {
+      var _a, _b;
+      const clipboardData = event.clipboardData;
+      if (!clipboardData) {
+        return;
+      }
+      // HTML is sanitized via DOMParser and ElementToDtoStrategyProcessor pipeline
+      const html = clipboardData.getData('text/html') || '';
+      const text = clipboardData.getData('text/plain') || '';
+      if (!html && !text) {
+        // Empty clipboard paste should not mutate editor content.
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      const range = this.cloneCurrentSelectionRange();
+      const selectedNodes = ((_b = (_a = this.extensionContext) === null || _a === void 0 ? void 0 : _a.getSelectedNodes) === null || _b === void 0 ? void 0 : _b.call(_a)) || [];
+      this.pendingPastePayload = { html, text, range, selectedNodes: [...selectedNodes] };
+      this.renderPasteChooser(event);
+    };
+    /**
+     * Dismisses the chooser when a pointer interaction occurs outside of it.
+     *
+     * @param {Event} event Pointer event captured on the document.
+     */
+    this.handleOutsidePointerDown = (event) => {
+      if (!this.chooserUI) {
+        return;
+      }
+      const eventPath = typeof event.composedPath === 'function' ? event.composedPath() : [];
+      if (this.chooserUI.includesEventPath(eventPath)) {
+        return;
+      }
+      this.clearPasteChooser();
+    };
+    /**
+     * Dismisses the chooser when the Escape key is pressed.
+     *
+     * @param {KeyboardEvent} event Keyboard event captured on the document.
+     */
+    this.handleOutsideKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        this.clearPasteChooser();
+      }
+    };
+    /**
+     * Dismisses the chooser when any relevant scroll container scrolls.
+     */
+    this.handleOutsideScroll = () => {
+      this.clearPasteChooser();
+    };
+  }
+  /** @inheritDoc */
+  initialExtensionAfterLoad(context) {
+    super.initialExtensionAfterLoad(context);
+    this.hostEl = context.host;
+    this.attachPasteListener();
+  }
+  /** @inheritDoc */
+  destroyExtension() {
+    this.detachPasteListener();
+    this.clearPasteChooser();
+  }
+  /**
+   * Attaches the paste listener to the editable element.
+   */
+  attachPasteListener() {
+    const { editableEl, contentHostEl, } = this.getEditorElements();
+    this.editableEl = editableEl;
+    this.contentHostEl = contentHostEl;
+    if (this.editableEl) {
+      this.editableEl.addEventListener('paste', this.handlePasteEvent);
+    }
+  }
+  /**
+   * Detaches the paste listener from the editable element.
+   */
+  detachPasteListener() {
+    if (this.editableEl) {
+      this.editableEl.removeEventListener('paste', this.handlePasteEvent);
+    }
+    this.editableEl = null;
+    this.contentHostEl = null;
+  }
+  /**
+   * Resolves the content host and editable element from the host shadow tree.
+   *
+   * @returns {EditorElements} Editor elements.
+   */
+  getEditorElements() {
+    var _a, _b, _c, _d, _e;
+    const contentHostEl = (_c = (_b = (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('vega-rich-text-content')) !== null && _c !== void 0 ? _c : null;
+    const editableEl = (_e = (_d = contentHostEl === null || contentHostEl === void 0 ? void 0 : contentHostEl.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.rich-text-content')) !== null && _e !== void 0 ? _e : null;
+    return { editableEl, contentHostEl };
+  }
+  /**
+   * Resolves the editable content element from the host shadow tree.
+   *
+   * @returns {HTMLDivElement | null} Editable element or `null` when unavailable.
+   */
+  getEditableElement() {
+    const { editableEl } = this.getEditorElements();
+    return editableEl;
+  }
+  /**
+   * Clones the current selection range so it can be restored after the user
+   * chooses a paste mode.
+   *
+   * @returns {Range | null} Cloned range or `null` when there is no selection.
+   */
+  cloneCurrentSelectionRange() {
+    var _a;
+    const selection = (_a = this.extensionContext) === null || _a === void 0 ? void 0 : _a.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      return selection.getRangeAt(0).cloneRange();
+    }
+    return null;
+  }
+  /**
+   * Renders the paste-mode chooser and wires up dismissal listeners.
+   *
+   * @param {ClipboardEvent} pasteEvent Originating paste event used for positioning.
+   */
+  renderPasteChooser(pasteEvent) {
+    var _a, _b;
+    const hostRoot = (_b = (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) !== null && _b !== void 0 ? _b : null;
+    if (!hostRoot) {
+      return;
+    }
+    this.clearPasteChooser(false);
+    const position = this.computeChooserPosition(pasteEvent);
+    this.chooserUI = new RTEPasteChooserUI(hostRoot, {
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      onModeSelect: (mode) => {
+        this.applyPasteMode(mode);
+      },
+    });
+    this.chooserUI.open(position);
+    this.listenerDocument = this.hostEl.ownerDocument;
+    this.listenerWindow = this.listenerDocument.defaultView;
+    this.listenerDocument.addEventListener('mousedown', this.handleOutsidePointerDown, true);
+    this.listenerDocument.addEventListener('keydown', this.handleOutsideKeyDown, true);
+    this.listenerDocument.addEventListener('scroll', this.handleOutsideScroll, true);
+    if (this.listenerWindow) {
+      this.listenerWindow.addEventListener('scroll', this.handleOutsideScroll, true);
+    }
+    if (this.contentHostEl) {
+      this.contentHostEl.addEventListener('scroll', this.handleOutsideScroll);
+    }
+  }
+  /**
+   * Computes the on-screen position for the chooser based on pointer or caret.
+   *
+   * @param {ClipboardEvent} event Originating paste event.
+   * @returns {ChooserPosition} Position in viewport coordinates.
+   */
+  computeChooserPosition(event) {
+    var _a, _b, _c;
+    const hostRect = this.hostEl.getBoundingClientRect();
+    const viewportHeight = (_b = (_a = this.hostEl.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.innerHeight) !== null && _b !== void 0 ? _b : window.innerHeight;
+    const pointerEvent = event;
+    const hasPointer = typeof pointerEvent.clientX === 'number' &&
+      pointerEvent.clientX > 0 &&
+      typeof pointerEvent.clientY === 'number' &&
+      pointerEvent.clientY > 0;
+    // For keyboard-initiated paste (Command/Control+V) clientX/Y are 0, so anchor
+    // the chooser to the current caret instead of a fixed host-relative spot.
+    const caretRect = hasPointer ? null : this.getCaretRect();
+    const CHOOSER_GAP_PX = 8;
+    const CHOOSER_MIN_MARGIN_PX = 12;
+    const CHOOSER_WIDTH_PX = 220;
+    const CHOOSER_FALLBACK_OFFSET_PX = 40;
+    const CHOOSER_MIN_VISIBLE_BELOW_SPACE_PX = 88;
+    const baseLeft = hasPointer
+      ? pointerEvent.clientX
+      : (_c = caretRect === null || caretRect === void 0 ? void 0 : caretRect.left) !== null && _c !== void 0 ? _c : hostRect.left + CHOOSER_MIN_MARGIN_PX;
+    const baseTop = hasPointer
+      ? pointerEvent.clientY
+      : caretRect
+        ? caretRect.bottom
+        : hostRect.top + CHOOSER_FALLBACK_OFFSET_PX;
+    const maxLeft = Math.max(hostRect.left + CHOOSER_MIN_MARGIN_PX, hostRect.right - CHOOSER_WIDTH_PX);
+    const left = Math.min(Math.max(baseLeft, hostRect.left + CHOOSER_MIN_MARGIN_PX), maxLeft);
+    const top = Math.max(baseTop + CHOOSER_GAP_PX, hostRect.top + CHOOSER_MIN_MARGIN_PX);
+    const availableBelow = viewportHeight - top - CHOOSER_MIN_MARGIN_PX;
+    const availableAbove = top - CHOOSER_MIN_MARGIN_PX;
+    const placement = availableBelow >= CHOOSER_MIN_VISIBLE_BELOW_SPACE_PX || availableBelow >= availableAbove
+      ? ['bottom', 'top']
+      : ['top', 'bottom'];
+    return { left, top, placement };
+  }
+  /**
+   * Resolves the bounding rect of the pending caret position.
+   *
+   * @returns {DOMRect | null} Caret rect or `null` when it cannot be determined.
+   */
+  getCaretRect() {
+    var _a, _b;
+    const range = (_b = (_a = this.pendingPastePayload) === null || _a === void 0 ? void 0 : _a.range) !== null && _b !== void 0 ? _b : this.cloneCurrentSelectionRange();
+    if (!range) {
+      return null;
+    }
+    const rect = range.getBoundingClientRect();
+    if (this.isUnavailableRect(rect)) {
+      // eslint-disable-next-line spellcheck/spell-checker
+      const domRectList = range.getClientRects();
+      if (domRectList.length > 0) {
+        return domRectList[0];
+      }
+      return this.getRangeContainerRect(range);
+    }
+    return rect;
+  }
+  /**
+   * Returns whether the browser could not resolve a meaningful caret rectangle.
+   *
+   * @param {DOMRect} rect Candidate caret rect.
+   * @returns {boolean} Whether the rect is unusable.
+   */
+  isUnavailableRect(rect) {
+    return rect.width === 0 && rect.height === 0 && rect.left === 0 && rect.top === 0;
+  }
+  /**
+   * Falls back to the range container or neighbor child node bounds.
+   *
+   * @param {Range} range Caret/selection range.
+   * @returns {DOMRect | null} Best-effort caret anchor rectangle.
+   */
+  getRangeContainerRect(range) {
+    var _a, _b, _c, _d, _e, _f;
+    const containerNode = (_a = range.startContainer) !== null && _a !== void 0 ? _a : null;
+    if (!containerNode) {
+      return null;
+    }
+    if (containerNode.nodeType === Node.ELEMENT_NODE) {
+      const containerElement = containerNode;
+      const previousNode = (_b = containerElement.childNodes[range.startOffset - 1]) !== null && _b !== void 0 ? _b : null;
+      const currentNode = (_c = containerElement.childNodes[range.startOffset]) !== null && _c !== void 0 ? _c : null;
+      return ((_e = (_d = this.getNodeRect(previousNode)) !== null && _d !== void 0 ? _d : this.getNodeRect(currentNode)) !== null && _e !== void 0 ? _e : this.getNodeRect(containerElement));
+    }
+    return (_f = this.getNodeRect(containerNode)) !== null && _f !== void 0 ? _f : this.getNodeRect(containerNode.parentNode);
+  }
+  /**
+   * Returns an element-backed rectangle from a DOM node.
+   *
+   * @param {Node | null} node Candidate node.
+   * @returns {DOMRect | null} Node rectangle when resolvable.
+   */
+  getNodeRect(node) {
+    var _a, _b;
+    if (!node) {
+      return null;
+    }
+    if (node.nodeType === Node.TEXT_NODE) {
+      return (_b = (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : null;
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const rect = node.getBoundingClientRect();
+      return this.isUnavailableRect(rect) ? null : rect;
+    }
+    return null;
+  }
+  /**
+   * Applies the chosen paste mode by dispatching a synthetic paste input event.
+   *
+   * @param {PasteMode} mode Selected paste mode.
+   */
+  applyPasteMode(mode) {
+    var _a;
+    if (!this.pendingPastePayload) {
+      this.clearPasteChooser();
+      return;
+    }
+    const editableEl = (_a = this.editableEl) !== null && _a !== void 0 ? _a : this.getEditableElement();
+    if (!editableEl) {
+      this.clearPasteChooser();
+      return;
+    }
+    editableEl.focus();
+    this.restoreSelectionRange(this.pendingPastePayload.range);
+    this.restoreSelectionControllerState(this.pendingPastePayload);
+    const dataTransfer = this.createDataTransfer(this.pendingPastePayload.html, this.pendingPastePayload.text, mode);
+    this.dispatchBeforeInputPaste(editableEl, dataTransfer);
+    this.clearPasteChooser();
+  }
+  /**
+   * Restores SelectionController state from the captured selection so synthetic
+   * beforeinput paste can replace the selected content instead of appending.
+   *
+   * @param {PendingPastePayload} payload Pending paste payload.
+   */
+  restoreSelectionControllerState(payload) {
+    if (!payload.range || !this.extensionContext) {
+      return;
+    }
+    const rangeOptions = {
+      startNode: payload.range.startContainer,
+      endNode: payload.range.endContainer,
+      startOffset: payload.range.startOffset,
+      endOffset: payload.range.endOffset,
+    };
+    this.extensionContext.setSelectedNodes(payload.selectedNodes || [], rangeOptions);
+  }
+  /**
+   * Restores a previously cloned selection range.
+   *
+   * @param {Range | null} range Range to restore.
+   */
+  restoreSelectionRange(range) {
+    var _a;
+    if (!range) {
+      return;
+    }
+    const selection = (_a = this.extensionContext) === null || _a === void 0 ? void 0 : _a.getSelection();
+    if (selection) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+  }
+  /**
+   * Dispatches a synthetic `beforeinput` paste event into the editor pipeline.
+   *
+   * @param {HTMLDivElement} editableEl Editable content element.
+   * @param {DataTransfer} dataTransfer Clipboard payload for the paste.
+   */
+  dispatchBeforeInputPaste(editableEl, dataTransfer) {
+    // This synthetic beforeinput event intentionally reuses the existing
+    // UserInputController -> insertFromPaste -> InsertPasteHandler pipeline.
+    const beforeInputEvent = new CustomEvent('beforeinput', {
+      bubbles: true,
+      cancelable: true,
+    });
+    try {
+      Object.defineProperties(beforeInputEvent, {
+        inputType: {
+          value: 'insertFromPaste',
+          configurable: true,
+        },
+        dataTransfer: {
+          value: dataTransfer,
+          configurable: true,
+        },
+      });
+    }
+    catch (_a) {
+      Object.assign(beforeInputEvent, {
+        inputType: 'insertFromPaste',
+        dataTransfer,
+      });
+    }
+    editableEl.dispatchEvent(beforeInputEvent);
+  }
+  /**
+   * Builds a `DataTransfer` payload carrying the paste content and mode marker.
+   *
+   * @param {string} html HTML clipboard content.
+   * @param {string} text Plain text clipboard content.
+   * @param {PasteMode} [mode] Selected paste mode marker.
+   * @returns {DataTransfer} Populated data transfer payload.
+   */
+  createDataTransfer(html, text, mode) {
+    if (typeof DataTransfer !== 'undefined') {
+      const dataTransfer = new DataTransfer();
+      if (html) {
+        dataTransfer.setData('text/html', html);
+      }
+      if (text) {
+        dataTransfer.setData('text/plain', text);
+      }
+      if (mode) {
+        dataTransfer.setData(RTE_PASTE_MODE_DATA_TYPE, mode);
+      }
+      return dataTransfer;
+    }
+    return {
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      getData: (type) => {
+        if (type === 'text/html') {
+          return html;
+        }
+        if (type === 'text/plain') {
+          return text;
+        }
+        if (type === RTE_PASTE_MODE_DATA_TYPE) {
+          return mode !== null && mode !== void 0 ? mode : '';
+        }
+        return '';
+      },
+    };
+  }
+  /**
+   * Tears down the chooser UI and removes dismissal listeners.
+   *
+   * @param {boolean} [clearPayload] Whether to also clear the pending payload.
+   */
+  clearPasteChooser(clearPayload = true) {
+    if (this.contentHostEl) {
+      this.contentHostEl.removeEventListener('scroll', this.handleOutsideScroll);
+    }
+    if (this.listenerWindow) {
+      this.listenerWindow.removeEventListener('scroll', this.handleOutsideScroll, true);
+      this.listenerWindow = null;
+    }
+    if (this.listenerDocument) {
+      this.listenerDocument.removeEventListener('mousedown', this.handleOutsidePointerDown, true);
+      this.listenerDocument.removeEventListener('keydown', this.handleOutsideKeyDown, true);
+      this.listenerDocument.removeEventListener('scroll', this.handleOutsideScroll, true);
+      this.listenerDocument = null;
+    }
+    if (this.chooserUI) {
+      this.chooserUI.destroy();
+    }
+    this.chooserUI = null;
+    if (clearPayload) {
+      this.pendingPastePayload = null;
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-renderer.js

@@ -101,7 +101,7 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
    * @param {HTMLElement} tableRef - The element that can triggered the table popover open.
    */
   handleTableRemove(renderData, tableRef) {
-    renderData.parent.apply(new DeleteTableBlockAction(renderData));
+    renderData.apply(new DeleteTableBlockAction(renderData));
     this.destroySelectionAnchor(tableRef);
   }
   /**

package/dist/collection/components/vega-rich-text-editor/extensions/table/table-extension.js

@@ -146,9 +146,10 @@ export class VegaRTETableExtension extends VegaRTEExtension {
   const insertTableBlockStrategy = new InsertTableBlockStrategy();
   const deleteTableBlockStrategy = new DeleteTableBlockStrategy();
   VegaRTEExtension.registerActionHandleStrategy(VegaRTEContent.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
-  VegaRTEExtension.registerActionHandleStrategy(VegaRTEContent.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
-  VegaRTEExtension.registerActionHandleStrategy(RTETableCellBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
-  VegaRTEExtension.registerActionHandleStrategy(RTETableHeadCellBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
+  // Registered on the table block itself (not its parent) so a table can always be
+  // deleted regardless of which block type it is nested in (root content, table cell,
+  // blockquote, or any future container).
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
   VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
   VegaRTEExtension.registerActionHandleStrategy(RTEImageBlock.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
   VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, INSERT_TABLE_ROW_INTO_DIFFERENT_SECTION, new InsertTableRowIntoDifferentSectionStrategy());

package/dist/collection/components/vega-rich-text-editor/helpers/utils.js

@@ -22,3 +22,17 @@ export function createStyleMapFromElement(element) {
   })
     .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
 }
+/**
+ * Escape HTML-sensitive characters so text can be rendered literally in HTML.
+ *
+ * @param {string} text - Raw text content.
+ * @returns {string} Escaped text content.
+ */
+export function escapeHtml(text) {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}

package/dist/collection/components/vega-rich-text-editor/public-api.js

@@ -20,11 +20,14 @@ export { VegaRTELanguageExtension } from './extensions/languages/language-extens
 export { VegaRTEFunctionExtension } from './extensions/functions/function-extension';
 export { VegaRTETableExtension } from './extensions/table/table-extension';
 export { VegaRTEHorizontalLineExtension } from './extensions/horizontal-line/horizontal-line-extension';
+export { VegaRTEBlockquoteExtension } from './extensions/blockquote/blockquote-extension';
+export { RTEBlockquoteBlock } from './extensions/blockquote/dto/rte-blockquote-block';
 export { VegaRTESpecialCharactersExtension } from './extensions/special-characters/special-characters-extension';
 export { VegaRTEFindReplaceExtension } from './extensions/find-replace/find-replace-extension';
 export { VegaRTESpecialCharactersEssentials, VegaRTESpecialCharactersLatin, VegaRTESpecialCharactersMathematical, VegaRTESpecialCharactersArrows, VegaRTESpecialCharactersCurrency, VegaRTESpecialCharactersText, } from './extensions/special-characters/constants/default-categories';
 export { VegaRTELineHeightExtension } from './extensions/line-height/line-height-extension';
 export { VegaRTELinkExtension } from './extensions/link/link-extension';
+export { VegaRTEPasteExtension } from './extensions/paste/paste-extension';
 export { VegaRTECopyExtension } from './extensions/copy/copy-extension';
 export { VegaRTECutExtension } from './extensions/cut/cut-extension';
 // actions

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

@@ -39,7 +39,7 @@ export class BaseHandler {
    * @returns {boolean} boolean result
    */
   isEmptyParagraph(node) {
-    return node && node.childNodes && node.childNodes.length === 0;
+    return node && node.nodeType === Node.ELEMENT_NODE && node.childNodes && node.childNodes.length === 0;
   }
   /**
    * Removes selected nodes within a range in a rich text editor content.

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

@@ -89,6 +89,6 @@ export class InsertLineBreakHandler extends BaseHandler {
   getNextRTENode(lineBreakNode) {
     const index = lineBreakNode.parent.children.indexOf(lineBreakNode);
     const nextNode = lineBreakNode.parent.children[index + 1];
-    return nextNode || lineBreakNode;
+    return nextNode && nextNode.isContentEditable() ? nextNode : lineBreakNode;
   }
 }