@globalpayments/vega 2.92.0 → 2.93.0

package/dist/collection/components/vega-rich-text-editor/extensions/blockquote/renderers/blockquote-toolbar-button-renderer.js

@@ -0,0 +1,260 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { RTETextBlock } from '../../../dto/blocks/text-block';
+import { VegaRTEContent } from '../../../dto/content-state';
+import { VegaRTEToolbarButtonRenderer } from '../../base-toolbar-button-renderer';
+import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { RemoveBlockquoteAction } from '../actions/remove-blockquote-action';
+import { TRANSFORM_TO_BLOCKQUOTE, TransformToBlockquoteAction, } from '../actions/transform-to-blockquote-action';
+import { RTEBlockquoteBlock } from '../dto/rte-blockquote-block';
+import QuoteLeftIcon from '../assets/quote-left';
+/**
+ * Toolbar button renderer for the blockquote extension.
+ *
+ * Behaviors implemented:
+ * - Active (`selected`) when the caret/selection is inside any blockquote
+ *   ancestor.
+ * - Click wraps the current block(s) into a new `<blockquote>`, or unwraps
+ *   the nearest blockquote ancestor when active. Inside a list, the entire
+ *   list is wrapped (escalating to the outermost list block). With no
+ *   selection, a new empty blockquote is appended at the end and focused.
+ * - Disabled when the wrap container does not support the wrap strategy
+ *   (e.g. inside a code block or function block); the button remains
+ *   enabled inside a blockquote so it can be toggled off, and with no
+ *   selection so it can append a new blockquote.
+ * - Hidden in source-edit mode (inherited from {@link VegaRTEToolbarButtonRenderer}).
+ */
+export class RTEBlockquoteToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  /**
+   * @inheritDoc
+   */
+  render(createElement, editorContext) {
+    return this.renderButton(createElement, editorContext, {
+      icon: 'quote-left',
+      tooltip: { text: 'Block quote' },
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  isSelected(editorContext) {
+    const startNode = this.getStartNode(editorContext);
+    return startNode ? this.findBlockquoteAncestor(startNode) !== null : false;
+  }
+  /**
+   * @inheritDoc
+   */
+  isDisabled(editorContext) {
+    if (editorContext.host.disabled) {
+      return true;
+    }
+    const startNode = this.getStartNode(editorContext);
+    // No selection — click appends a new blockquote at the end.
+    // Inside a blockquote — click toggles it off.
+    // Either way, the button stays enabled.
+    if (!startNode || this.findBlockquoteAncestor(startNode) !== null) {
+      return false;
+    }
+    const { container } = this.resolveWrapAnchor(startNode.parent);
+    return !ActionHandleStrategyRegistry.canHandle(TRANSFORM_TO_BLOCKQUOTE, container);
+  }
+  /**
+   * @inheritDoc
+   */
+  handleButtonClick(editorContext) {
+    const context = this.getExtensionContext(editorContext.host);
+    if (context) {
+      const { host, getSelectedNodes } = context;
+      const selectedNodes = getSelectedNodes();
+      const startNode = selectedNodes[0];
+      if (!startNode) {
+        // No active selection → append a new empty blockquote at the end (mirrors text-style toolbar).
+        this.appendEmptyBlockquote(host.value);
+        return;
+      }
+      // Direction is decided by the first selected block only.
+      if (this.findBlockquoteAncestor(startNode)) {
+        const blockquoteAncestors = this.collectBlockquoteAncestors(selectedNodes);
+        blockquoteAncestors.forEach((blockquote) => {
+          blockquote.apply(new RemoveBlockquoteAction());
+        });
+      }
+      else {
+        this.wrapSelectedBlocks(selectedNodes);
+      }
+      host.value.apply(new UpdateCursorPositionAction(startNode, editorContext.rteRange.startOffset));
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * @inheritDoc
+   */
+  handleDropdownClick() {
+    // No dropdown — single toggle button.
+  }
+  /**
+   * Append an empty paragraph wrapped in a new blockquote to the end of the
+   * content and place the caret inside it.
+   *
+   * @param {VegaRTEContent} content - Editor content to append to.
+   */
+  appendEmptyBlockquote(content) {
+    if (content.children.length > 0) {
+      const lastBlock = content.children[content.children.length - 1];
+      const newBlock = RTETextBlock.from({
+        id: generateUUID(),
+        type: 'paragraph',
+        nodes: [{ id: generateUUID(), type: 'text', text: '' }],
+      });
+      content.apply(new InsertChildrenAfterAction(lastBlock, newBlock));
+      content.apply(new TransformToBlockquoteAction([newBlock]));
+      content.apply(new UpdateCursorPositionAction(newBlock.getLastNode(), 0));
+    }
+  }
+  /**
+   * Wrap the selection's unique parent blocks into a new blockquote. Blocks
+   * inside a list or other nested container escalate to the top-level block.
+   * When the selection spans multiple top-level (root) blocks, any scoped
+   * container touched along the way (e.g. a table cell) is treated as an
+   * opaque block instead of an independent wrap target — the whole
+   * selection wraps as one, and any blockquote nested deeper than the
+   * top-level block (e.g. inside a table cell) is left untouched. Existing
+   * top-level blockquote blocks in the selection are merged (flattened)
+   * into the new one rather than nested.
+   *
+   * @param {RTENode[]} selectedNodes - Currently selected nodes.
+   */
+  wrapSelectedBlocks(selectedNodes) {
+    var _a, _b;
+    const uniqueBlocks = this.getUniqueBlocks(selectedNodes);
+    // If the selection spans more than one top-level block, force every
+    // anchor resolution to escalate all the way to the root, ignoring any
+    // scoped container (e.g. a table cell) it passes through.
+    const rootAncestors = new Set(uniqueBlocks.map((block) => { var _a; return (_a = this.resolveWrapAnchor(block, true).wrapBlock) !== null && _a !== void 0 ? _a : block; }));
+    const forceRootScope = rootAncestors.size > 1;
+    // Pass 1: unwrap any existing blockquote reachable from the selection so it merges instead of nesting.
+    const alreadyUnwrapped = new Set();
+    for (const block of uniqueBlocks) {
+      const { wrapBlock } = this.resolveWrapAnchor(block, forceRootScope);
+      if (wrapBlock instanceof RTEBlockquoteBlock && !alreadyUnwrapped.has(wrapBlock)) {
+        alreadyUnwrapped.add(wrapBlock);
+        wrapBlock.apply(new RemoveBlockquoteAction());
+      }
+    }
+    // Pass 2: group targets by their resolved container so each container is wrapped independently.
+    const containerMap = new Map();
+    for (const block of uniqueBlocks) {
+      const anchor = this.resolveWrapAnchor(block, forceRootScope);
+      const { container } = anchor;
+      if (container) {
+        const target = (_a = anchor.wrapBlock) !== null && _a !== void 0 ? _a : block;
+        const targets = (_b = containerMap.get(container)) !== null && _b !== void 0 ? _b : new Set();
+        targets.add(target);
+        containerMap.set(container, targets);
+      }
+    }
+    for (const [container, targets] of containerMap) {
+      container.apply(new TransformToBlockquoteAction([...targets]));
+    }
+  }
+  /**
+   * Resolve the starting node of the current toolbar selection, if any.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - Render context.
+   * @returns {Nullable<RTENode>} The first selected node, or null.
+   */
+  getStartNode(editorContext) {
+    const context = this.getExtensionContext(editorContext.host);
+    return context === null || context === void 0 ? void 0 : context.getSelectedNodes()[0];
+  }
+  /**
+   * Collect the unique closest blockquote ancestors of every selected node.
+   * Multiple selected nodes that share the same blockquote ancestor collapse
+   * into a single entry, so applying {@link RemoveBlockquoteAction} to each
+   * result unwraps every distinct blockquote in the selection exactly once.
+   *
+   * @param {RTENode[]} nodes - Selected nodes.
+   * @returns {Set<RTEBlockquoteBlock>} Unique blockquote ancestors, preserving insertion order.
+   */
+  collectBlockquoteAncestors(nodes) {
+    const ancestors = new Set();
+    nodes.forEach((node) => {
+      const ancestor = this.findBlockquoteAncestor(node);
+      if (ancestor) {
+        ancestors.add(ancestor);
+      }
+    });
+    return ancestors;
+  }
+  /**
+   * Walk up the block ancestors of the supplied node looking for an
+   * {@link RTEBlockquoteBlock}.
+   *
+   * @param {RTENode} node - Starting node.
+   * @returns {Nullable<RTEBlockquoteBlock>} The closest blockquote ancestor, or null.
+   */
+  findBlockquoteAncestor(node) {
+    let current = node.parent;
+    while (current && !(current instanceof VegaRTEContent)) {
+      if (current instanceof RTEBlockquoteBlock) {
+        return current;
+      }
+      current = current.parent;
+    }
+    return null;
+  }
+  /**
+   * Collect unique block ancestors (immediate parent blocks) from a list of
+   * selected nodes, preserving order of first appearance.
+   *
+   * @param {RTENode[]} nodes - Selected nodes.
+   * @returns {RTEBlock[]} Unique parent blocks.
+   */
+  getUniqueBlocks(nodes) {
+    const seen = new Set();
+    const result = [];
+    nodes.forEach((node) => {
+      const block = node.parent;
+      if (block && !seen.has(block)) {
+        seen.add(block);
+        result.push(block);
+      }
+    });
+    return result;
+  }
+  /**
+   * Walk up from `block` to find the nearest ancestor that is a direct child
+   * of a container registered to handle {@link TRANSFORM_TO_BLOCKQUOTE}
+   * (e.g. {@link VegaRTEContent}, {@link RTETableCellBlock}).
+   *
+   * Stops as soon as the parent can handle the wrap action, so that blocks
+   * inside a table cell are scoped to the cell (not escalated to the root)
+   * while blocks inside a list are still escalated to the top-level list.
+   * Pass `forceRootScope` to ignore scoped containers and always escalate
+   * to the root — used when the overall selection spans multiple top-level
+   * blocks, so a table (or any other scoped container) is wrapped as a
+   * single opaque block alongside its siblings instead of independently.
+   *
+   * @param {RTEBlock} block - Immediate parent block of the selected node.
+   * @param {boolean} [forceRootScope] - Ignore scoped containers and escalate to the root.
+   * @returns {WrapAnchor} `wrapBlock` is the top-level ancestor when the block
+   *   is nested (otherwise null); `container` is the nearest wrap-capable parent.
+   */
+  resolveWrapAnchor(block, forceRootScope = false) {
+    let current = block;
+    while (current.parent &&
+      !(current.parent instanceof VegaRTEContent) &&
+      (forceRootScope ||
+        !ActionHandleStrategyRegistry.canHandle(TRANSFORM_TO_BLOCKQUOTE, current.parent))) {
+      current = current.parent;
+    }
+    const wrapBlock = current !== block ? current : null;
+    const container = current.parent;
+    return { wrapBlock, container };
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'quote-left': QuoteLeftIcon });
+})();

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

@@ -0,0 +1,34 @@
+import { VegaRTEExtension } from '../extension.abstract';
+/**
+ * Rich Text Editor extension that configures built-in image behavior.
+ */
+export class VegaRTEImageExtension extends VegaRTEExtension {
+  constructor(config = {}) {
+    super();
+    this.config = config;
+  }
+  /**
+   * Store config per host so both toolbar-image and inline-image editors
+   * can consistently read the extension settings.
+   *
+   * @param {HTMLElement} host - The host rich text editor element.
+   */
+  prepareBeforeLoad(host) {
+    VegaRTEImageExtension.configStore.set(host, this.config);
+  }
+  /**
+   * Remove config for the current host when the extension is destroyed.
+   */
+  destroyExtension() {
+    var _a;
+    if ((_a = this.extensionContext) === null || _a === void 0 ? void 0 : _a.host) {
+      VegaRTEImageExtension.configStore.delete(this.extensionContext.host);
+    }
+  }
+}
+/**
+ * Per-host config store. Declare as static readonly to isolate config per editor host.
+ *
+ * @type {RTEExtensionStateStore<VegaRTEImageExtensionConfig>}
+ */
+VegaRTEImageExtension.configStore = VegaRTEImageExtension.createStateStore();

package/dist/collection/components/vega-rich-text-editor/extensions/image/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M80 96v16c0 17.7 14.3 32 32 32h60.8c16.6-28.7 47.6-48 83.2-48h62c-7.1-27.6-32.2-48-62-48H215.4C211.6 20.9 188.2 0 160 0s-51.6 20.9-55.4 48H64C28.7 48 0 76.7 0 112V384c0 35.3 28.7 64 64 64h96V400H64c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H80zm64-40a16 16 0 1 1 32 0 16 16 0 1 1 -32 0zM256 464c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H384v48c0 17.7 14.3 32 32 32h48V448c0 8.8-7.2 16-16 16H256zm192 48c35.3 0 64-28.7 64-64V227.9c0-12.7-5.1-24.9-14.1-33.9l-51.9-51.9c-9-9-21.2-14.1-33.9-14.1H256c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H448z"/></svg>`,
+};

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

@@ -0,0 +1,144 @@
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { VegaInternalTranslation } from '../../../../helpers/translation/internal-translation-controller';
+import paste from './assets/paste';
+/**
+ * Renders and manages the paste format chooser UI.
+ */
+export class RTEPasteChooserUI {
+  constructor(hostRoot, callbacks) {
+    this.hostRoot = hostRoot;
+    this.callbacks = callbacks;
+    this.chooserEl = null;
+    this.dropdownEl = null;
+    this.triggerButtonEl = null;
+  }
+  /**
+   * Opens the paste-mode chooser at the given position.
+   *
+   * @param {PasteChooserPosition} position Viewport position for the chooser.
+   */
+  open(position) {
+    this.destroy();
+    const doc = this.hostRoot.ownerDocument;
+    const chooser = doc.createElement('div');
+    chooser.setAttribute(RTEPasteChooserUI.CHOOSER_ATTR, 'true');
+    chooser.style.position = 'fixed';
+    chooser.style.zIndex = '1000';
+    chooser.style.left = `${position.left}px`;
+    chooser.style.top = `${position.top}px`;
+    const dropdownEl = this.createPasteChooserDropdown(doc, position.placement);
+    dropdownEl.placement = position.placement;
+    chooser.append(dropdownEl);
+    this.hostRoot.appendChild(chooser);
+    this.chooserEl = chooser;
+    this.dropdownEl = dropdownEl;
+    dropdownEl.addEventListener('vegaShow', () => {
+      if (this.triggerButtonEl) {
+        this.triggerButtonEl.selected = true;
+      }
+    });
+    dropdownEl.addEventListener('vegaHide', () => {
+      if (this.triggerButtonEl) {
+        this.triggerButtonEl.selected = false;
+      }
+    });
+  }
+  /**
+   * Removes the chooser from the DOM.
+   */
+  destroy() {
+    var _a;
+    if (this.dropdownEl && typeof this.dropdownEl.hide === 'function') {
+      void this.dropdownEl.hide();
+    }
+    if ((_a = this.chooserEl) === null || _a === void 0 ? void 0 : _a.parentNode) {
+      this.chooserEl.parentNode.removeChild(this.chooserEl);
+    }
+    if (this.triggerButtonEl) {
+      this.triggerButtonEl.selected = false;
+    }
+    this.dropdownEl = null;
+    this.chooserEl = null;
+    this.triggerButtonEl = null;
+  }
+  /**
+   * Determines whether the given event path targets the chooser.
+   *
+   * @param {EventTarget[]} eventPath Composed path of an event.
+   * @returns {boolean} `true` when the path includes the chooser.
+   */
+  includesEventPath(eventPath) {
+    if (!this.chooserEl) {
+      return false;
+    }
+    const isDropdownContentClick = eventPath.some((target) => {
+      return 'tagName' in target && target.tagName === 'VEGA-DROPDOWN-CONTENT-BOX';
+    });
+    return eventPath.includes(this.chooserEl) || isDropdownContentClick;
+  }
+  /**
+   * Builds the dropdown element with the rich text paste option.
+   *
+   * @param {Document} doc Document used to create elements.
+   * @param {['bottom', 'top'] | ['top', 'bottom']} placement Preferred placement order.
+   * @returns {HTMLElement} Configured dropdown element.
+   */
+  createPasteChooserDropdown(doc, placement) {
+    const dropdownEl = doc.createElement('vega-dropdown');
+    dropdownEl.trigger = 'click';
+    dropdownEl.selectType = 'single';
+    dropdownEl.selectedSourceKey = 'rich';
+    dropdownEl.maxWidth = 220;
+    dropdownEl.alignment = 'start';
+    dropdownEl.itemDisplayRule = 'ellipsis';
+    const triggerButton = doc.createElement('vega-rich-text-editor-toolbar-button');
+    const arrowIcon = placement[0] === 'top' ? 'chevron-up' : 'chevron-down';
+    triggerButton.setAttribute(RTEPasteChooserUI.CHOOSER_TRIGGER_ATTR, 'true');
+    triggerButton.setAttribute('aria-label', VegaInternalTranslation.t('Paste options'));
+    triggerButton.setAttribute('arrow-icon', arrowIcon);
+    triggerButton.icon = 'rte-paste';
+    triggerButton.showArrowIcon = true;
+    triggerButton.selected = false;
+    this.triggerButtonEl = triggerButton;
+    const tooltipEl = doc.createElement('vega-tooltip');
+    tooltipEl.text = VegaInternalTranslation.t('Paste options');
+    tooltipEl.placement = ['bottom', 'top'];
+    tooltipEl.append(triggerButton);
+    dropdownEl.append(tooltipEl);
+    const itemsContainer = doc.createElement('div');
+    itemsContainer.setAttribute('slot', 'items');
+    itemsContainer.append(this.createDropdownItem(doc, 'rich', VegaInternalTranslation.t('Use rich text'), RTEPasteChooserUI.CHOOSER_RICH_ATTR));
+    dropdownEl.append(itemsContainer);
+    dropdownEl.addEventListener('vegaDropdownClick', (event) => {
+      const mode = event.detail;
+      if (mode === 'rich') {
+        this.callbacks.onModeSelect(mode);
+      }
+    });
+    return dropdownEl;
+  }
+  /**
+   * Creates a single dropdown item element for a paste mode.
+   *
+   * @param {Document} doc Document used to create the element.
+   * @param {PasteMode} key Paste mode key for the item.
+   * @param {string} label Display label for the item.
+   * @param {string} dataAttrName Data attribute marker for the item.
+   * @returns {HTMLVegaDropdownItemElement} Configured dropdown item element.
+   */
+  createDropdownItem(doc, key, label, dataAttrName) {
+    const itemEl = doc.createElement('vega-dropdown-item');
+    itemEl.itemKey = key;
+    itemEl.label = label;
+    itemEl.setAttribute(dataAttrName, 'true');
+    return itemEl;
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'rte-paste': paste,
+  });
+})();
+RTEPasteChooserUI.CHOOSER_ATTR = 'data-rte-paste-chooser';
+RTEPasteChooserUI.CHOOSER_RICH_ATTR = 'data-rte-paste-type-rich';
+RTEPasteChooserUI.CHOOSER_TRIGGER_ATTR = 'data-rte-paste-trigger';

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

@@ -0,0 +1,6 @@
+/**
+ * Custom DataTransfer MIME type used to tag a synthetic paste with the chosen
+ * paste mode (e.g. 'rich' or 'plain'), so downstream paste handling can decide
+ * whether to preserve the original inline styles.
+ */
+export const RTE_PASTE_MODE_DATA_TYPE = 'application/x-vega-rte-paste-mode';