@globalpayments/vega 2.98.0 → 2.99.0

package/dist/collection/components/vega-rich-text-editor/extensions/paste/parse-local-images-helper/pending-image-registry.js

@@ -0,0 +1,116 @@
+import { ImageReplaceSrcAction } from '../actions/image-replace-src-action';
+/**
+ * Owns the lifecycle of pasted images awaiting upload: it tracks their local
+ * object-URL previews, notifies the consumer once they are inserted, applies the
+ * uploaded URL back onto the live preview, and revokes object URLs on teardown.
+ *
+ * Keeping this state here rather than on the paste extension keeps the extension
+ * focused on clipboard capture and the chooser UI.
+ */
+export class PendingImageRegistry {
+  constructor() {
+    /** Ids of pending images still holding an object URL owned by this registry. */
+    this.ownedImageIds = new Set();
+    /** Ids queued for the next {@link notifyInserted} call. */
+    this.pendingNotifyImageIds = [];
+  }
+  /**
+   * Registers freshly created previews so they can be notified and later
+   * resolved to their uploaded URLs.
+   *
+   * @param {PasteImagePreview[]} previews Previews produced for the current paste.
+   */
+  register(previews) {
+    this.pendingNotifyImageIds = [];
+    previews.forEach((preview) => {
+      this.pendingNotifyImageIds.push(preview.id);
+      this.ownedImageIds.add(preview.id);
+      PendingImageRegistry.pendingImages.set(preview.id, preview);
+    });
+  }
+  /**
+   * @returns {boolean} Whether previews are queued for notification.
+   */
+  hasPendingNotifications() {
+    return this.pendingNotifyImageIds.length > 0;
+  }
+  /**
+   * Notifies the consumer about newly inserted pasted images so they can upload
+   * them and fill in the real URLs via the supplied `replaceUrl` callback.
+   *
+   * @param {ImageInsertedCallback | undefined} callback Consumer callback to invoke.
+   * @param {GetEditableElement} getEditableElement Resolves the live editable element.
+   * @param {ResolveImageNode} resolveImageNode Resolves the DTO node for a preview element.
+   */
+  notifyInserted(callback, getEditableElement, resolveImageNode) {
+    const images = this.pendingNotifyImageIds
+      .map((id) => PendingImageRegistry.pendingImages.get(id))
+      .filter((preview) => !!preview);
+    this.pendingNotifyImageIds = [];
+    if (images.length && typeof callback === 'function') {
+      // Mark as handed to the consumer so teardown keeps them for a later replaceUrl.
+      images.forEach((image) => (image.notified = true));
+      const pasteImages = images.map((image) => ({
+        id: image.id,
+        file: image.file,
+      }));
+      callback(pasteImages, (imageId, url) => this.replaceUrl(imageId, url, getEditableElement, resolveImageNode));
+    }
+  }
+  /**
+   * Revokes and forgets only previews that were never handed to a consumer for
+   * upload. Previews already notified via {@link notifyInserted} are left intact
+   * so an async {@link replaceUrl} can still resolve them after the extension is
+   * recreated; that callback owns their teardown.
+   */
+  discardUnsentPreviews() {
+    this.ownedImageIds.forEach((imageId) => {
+      const pending = PendingImageRegistry.pendingImages.get(imageId);
+      if (pending && pending.notified) {
+        return;
+      }
+      if (pending && pending.objectUrl.startsWith('blob:')) {
+        URL.revokeObjectURL(pending.objectUrl);
+      }
+      PendingImageRegistry.pendingImages.delete(imageId);
+      this.ownedImageIds.delete(imageId);
+    });
+    this.pendingNotifyImageIds = [];
+  }
+  /**
+   * Applies the uploaded URL for a pending pasted image, replacing its local
+   * preview `src` and revoking the object URL.
+   *
+   * @param {string} imageId Pending image id supplied to the consumer callback.
+   * @param {string} url Uploaded image URL to apply.
+   * @param {GetEditableElement} getEditableElement Resolves the live editable element.
+   * @param {ResolveImageNode} resolveImageNode Resolves the DTO node for a preview element.
+   */
+  replaceUrl(imageId, url, getEditableElement, resolveImageNode) {
+    var _a;
+    const editableEl = getEditableElement();
+    if (editableEl) {
+      const imageElement = (_a = editableEl.querySelector(`img[data-rte-id="${imageId}"]`)) !== null && _a !== void 0 ? _a : null;
+      if (imageElement) {
+        const imageNode = resolveImageNode(imageElement);
+        imageNode && imageNode.apply(new ImageReplaceSrcAction(imageElement, url));
+      }
+    }
+    const pending = PendingImageRegistry.pendingImages.get(imageId);
+    if (pending) {
+      if (pending.objectUrl.startsWith('blob:')) {
+        URL.revokeObjectURL(pending.objectUrl);
+      }
+      PendingImageRegistry.pendingImages.delete(imageId);
+      this.ownedImageIds.delete(imageId);
+    }
+  }
+}
+/**
+ * Pasted images awaiting upload, keyed by their {@link VegaRTEPasteImage.id}.
+ *
+ * Shared statically across instances so previews survive a paste-extension
+ * re-instantiation: the consumer may resolve `replaceUrl` after the editor
+ * has re-mounted and created a new extension/registry instance.
+ */
+PendingImageRegistry.pendingImages = new Map();

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

@@ -1,13 +1,15 @@
 import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
 import { VegaInternalTranslation } from '../../../../helpers/translation/internal-translation-controller';
+import { RTEPasteMode } from './strategies/paste-processing-strategy.abstract';
 import paste from './assets/paste';
 /**
  * Renders and manages the paste format chooser UI.
  */
 export class RTEPasteChooserUI {
-  constructor(hostRoot, callbacks) {
+  constructor(hostRoot, callbacks, options = {}) {
     this.hostRoot = hostRoot;
     this.callbacks = callbacks;
+    this.options = options;
     this.chooserEl = null;
     this.dropdownEl = null;
     this.triggerButtonEl = null;
@@ -108,11 +110,17 @@ export class RTEPasteChooserUI {
     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));
+    const dropdownItems = [
+      this.createDropdownItem(doc, RTEPasteMode.RICH, VegaInternalTranslation.t('Use rich text'), RTEPasteChooserUI.CHOOSER_RICH_ATTR),
+    ];
+    if (this.options.showWordOption) {
+      dropdownItems.push(this.createDropdownItem(doc, RTEPasteMode.WORD, VegaInternalTranslation.t('Use Word'), RTEPasteChooserUI.CHOOSER_WORD_ATTR));
+    }
+    itemsContainer.append(...dropdownItems);
     dropdownEl.append(itemsContainer);
     dropdownEl.addEventListener('vegaDropdownClick', (event) => {
       const mode = event.detail;
-      if (mode === 'rich') {
+      if (mode === RTEPasteMode.RICH || mode === RTEPasteMode.WORD) {
         this.callbacks.onModeSelect(mode);
       }
     });
@@ -122,7 +130,7 @@ export class RTEPasteChooserUI {
    * 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 {RTEPasteMode} 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.
@@ -142,4 +150,5 @@ export class RTEPasteChooserUI {
 })();
 RTEPasteChooserUI.CHOOSER_ATTR = 'data-rte-paste-chooser';
 RTEPasteChooserUI.CHOOSER_RICH_ATTR = 'data-rte-paste-type-rich';
+RTEPasteChooserUI.CHOOSER_WORD_ATTR = 'data-rte-paste-type-word';
 RTEPasteChooserUI.CHOOSER_TRIGGER_ATTR = 'data-rte-paste-trigger';

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

@@ -1,19 +1,32 @@
 import { VegaRTEExtension } from '../extension.abstract';
 import { RTEPasteChooserUI } from './paste-chooser-ui';
-import { RTE_PASTE_MODE_DATA_TYPE } from './paste-constants';
+import { RTE_PASTE_MODE_DATA_TYPE } from '../../constants/constant';
+import { PasteStrategySelector } from './strategies/paste-strategy-selector';
+import { RTEPasteMode, } from './strategies/paste-processing-strategy.abstract';
+import { PasteImageParser } from './parse-local-images-helper/paste-image-parser';
+import { RTEImageNode } from '../../dto/nodes/image-node';
+import { REPLACE_IMAGE_SRC } from './actions/image-replace-src-action';
+import { ImageReplaceSrcStrategy } from './action-handler-strategies/image-replace-src-strategy';
+import { PendingImageRegistry } from './parse-local-images-helper/pending-image-registry';
 /**
  * Vega Rich Text Editor paste extension.
  * Intercepts keyboard paste and allows users to choose paste mode.
  */
 export class VegaRTEPasteExtension extends VegaRTEExtension {
-  constructor() {
-    super(...arguments);
+  constructor(options = {}) {
+    super();
     this.editableEl = null;
     this.contentHostEl = null;
     this.chooserUI = null;
     this.pendingPastePayload = null;
     this.listenerDocument = null;
     this.listenerWindow = null;
+    this.options = {};
+    this.strategySelector = new PasteStrategySelector();
+    this.clipboardFileContent = null;
+    this.imageParser = new PasteImageParser();
+    /** Owns pending pasted-image previews awaiting upload and their URL replacement. */
+    this.pendingImageRegistry = new PendingImageRegistry();
     /**
      * Handles a native paste event by capturing the clipboard payload and
      * rendering the paste-mode chooser.
@@ -29,6 +42,9 @@ export class VegaRTEPasteExtension extends VegaRTEExtension {
       // HTML is sanitized via DOMParser and ElementToDtoStrategyProcessor pipeline
       const html = clipboardData.getData('text/html') || '';
       const text = clipboardData.getData('text/plain') || '';
+      // RTF must be read synchronously here: the paste event's DataTransfer is only
+      // readable during event dispatch, so reading it later (after the chooser) returns ''.
+      const rtf = clipboardData.getData('text/rtf') || '';
       if (!html && !text) {
         // Empty clipboard paste should not mutate editor content.
         event.preventDefault();
@@ -40,6 +56,10 @@ export class VegaRTEPasteExtension extends VegaRTEExtension {
       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.clipboardFileContent = {
+        files: clipboardData.files ? Array.from(clipboardData.files) : [],
+        rtf,
+      };
       this.renderPasteChooser(event);
     };
     /**
@@ -73,6 +93,7 @@ export class VegaRTEPasteExtension extends VegaRTEExtension {
     this.handleOutsideScroll = () => {
       this.clearPasteChooser();
     };
+    this.options = options;
   }
   /** @inheritDoc */
   initialExtensionAfterLoad(context) {
@@ -84,6 +105,7 @@ export class VegaRTEPasteExtension extends VegaRTEExtension {
   destroyExtension() {
     this.detachPasteListener();
     this.clearPasteChooser();
+    this.pendingImageRegistry.discardUnsentPreviews();
   }
   /**
    * Attaches the paste listener to the editable element.
@@ -146,7 +168,7 @@ export class VegaRTEPasteExtension extends VegaRTEExtension {
    * @param {ClipboardEvent} pasteEvent Originating paste event used for positioning.
    */
   renderPasteChooser(pasteEvent) {
-    var _a, _b;
+    var _a, _b, _c;
     const hostRoot = (_b = (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) !== null && _b !== void 0 ? _b : null;
     if (!hostRoot) {
       return;
@@ -158,6 +180,8 @@ export class VegaRTEPasteExtension extends VegaRTEExtension {
       onModeSelect: (mode) => {
         this.applyPasteMode(mode);
       },
+    }, {
+      showWordOption: ((_c = this.options) === null || _c === void 0 ? void 0 : _c.enableWordPaste) === true,
     });
     this.chooserUI.open(position);
     this.listenerDocument = this.hostEl.ownerDocument;
@@ -287,7 +311,10 @@ export class VegaRTEPasteExtension extends VegaRTEExtension {
   /**
    * Applies the chosen paste mode by dispatching a synthetic paste input event.
    *
-   * @param {PasteMode} mode Selected paste mode.
+   * `rich` keeps auto-detection enabled; any other explicit mode forces the
+   * corresponding registered strategy.
+   *
+   * @param {RTEPasteMode} mode Selected paste mode.
    */
   applyPasteMode(mode) {
     var _a;
@@ -303,9 +330,42 @@ export class VegaRTEPasteExtension extends VegaRTEExtension {
     editableEl.focus();
     this.restoreSelectionRange(this.pendingPastePayload.range);
     this.restoreSelectionControllerState(this.pendingPastePayload);
-    const dataTransfer = this.createDataTransfer(this.pendingPastePayload.html, this.pendingPastePayload.text, mode);
+    const strategy = mode === RTEPasteMode.RICH
+      ? this.strategySelector.selectStrategy(this.pendingPastePayload.html)
+      : this.strategySelector.selectStrategyByType(mode);
+    let processedHtml = strategy.process(this.pendingPastePayload.html);
+    // If the strategy supports image processing and there is clipboard file content, parse local images.
+    if (strategy.supportsImageProcessing && this.clipboardFileContent) {
+      processedHtml = this.parseLocalImages(processedHtml, this.clipboardFileContent);
+    }
+    this.clipboardFileContent = null;
+    const dataTransfer = this.createDataTransfer(processedHtml, this.pendingPastePayload.text, strategy.type);
     this.dispatchBeforeInputPaste(editableEl, dataTransfer);
     this.clearPasteChooser();
+    this.emitLocalImageInsertedEvent();
+  }
+  /**
+   * Parses local images from the HTML and emits events for further processing.
+   *
+   * @param {string} html HTML content to parse.
+   * @param {ClipboardFileContent} clipboardFileContent Clipboard file content for image extraction.
+   * @returns {string} Processed HTML with local image references replaced.
+   */
+  parseLocalImages(html, clipboardFileContent) {
+    const { html: result, previews } = this.imageParser.parseLocalImages(html, clipboardFileContent);
+    if (previews.length > 0) {
+      this.pendingImageRegistry.register(previews);
+    }
+    return result;
+  }
+  /**
+   * Emits the `imageInsertedCallback` for any pending previews, allowing the
+   * consumer to upload them and resolve their URLs.
+   */
+  emitLocalImageInsertedEvent() {
+    if (this.pendingImageRegistry.hasPendingNotifications()) {
+      this.pendingImageRegistry.notifyInserted(this.options.imageInsertedCallback, () => { var _a; return (_a = this.editableEl) !== null && _a !== void 0 ? _a : this.getEditableElement(); }, (imageElement) => this.getDTOEntityByDom(imageElement));
+    }
   }
   /**
    * Restores SelectionController state from the captured selection so synthetic
@@ -379,7 +439,7 @@ export class VegaRTEPasteExtension extends VegaRTEExtension {
    *
    * @param {string} html HTML clipboard content.
    * @param {string} text Plain text clipboard content.
-   * @param {PasteMode} [mode] Selected paste mode marker.
+   * @param {RTEPasteMode} [mode] Selected paste mode marker.
    * @returns {DataTransfer} Populated data transfer payload.
    */
   createDataTransfer(html, text, mode) {
@@ -440,3 +500,6 @@ export class VegaRTEPasteExtension extends VegaRTEExtension {
     }
   }
 }
+(() => {
+  VegaRTEExtension.registerActionHandleStrategy(RTEImageNode.name, REPLACE_IMAGE_SRC, new ImageReplaceSrcStrategy());
+})();

package/dist/collection/components/vega-rich-text-editor/extensions/paste/strategies/default-paste-strategy.js

@@ -0,0 +1,38 @@
+import { AbstractPasteProcessingStrategy, PasteProcessingStrategyPriority, } from './paste-processing-strategy.abstract';
+/**
+ * Default paste processing strategy that acts as a fallback when no other
+ * strategy matches. This strategy always accepts the content and passes it
+ * through unchanged — the normal RTE paste pipeline (DOMParser +
+ * ElementToDtoStrategyProcessor) handles the rest.
+ */
+export class DefaultPasteProcessingStrategy extends AbstractPasteProcessingStrategy {
+  /**
+   * Always matches as the terminal fallback strategy.
+   *
+   * @param {string} html Raw clipboard HTML.
+   * @returns {boolean} Always `true`.
+   */
+  canHandle(html) {
+    // Default strategy is the fallback — always returns true.
+    return html !== undefined;
+  }
+  /**
+   * Returns the original HTML unchanged.
+   *
+   * @param {string} html Raw clipboard HTML.
+   * @returns {string} Unchanged HTML.
+   */
+  process(html) {
+    // Current default behavior: pass through unchanged
+    // (DOMParser + ElementToDtoStrategyProcessor handles the rest)
+    return html;
+  }
+  /**
+   * Fallback priority so other strategies can win when matched.
+   *
+   * @returns {number} Strategy priority.
+   */
+  get priority() {
+    return PasteProcessingStrategyPriority.DEFAULT_FALLBACK;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/paste/strategies/paste-processing-strategy.abstract.js

@@ -0,0 +1,55 @@
+export var RTEPasteMode;
+(function (RTEPasteMode) {
+  RTEPasteMode["RICH"] = "rich";
+  RTEPasteMode["WORD"] = "word";
+})(RTEPasteMode || (RTEPasteMode = {}));
+/**
+ * Priority scale shared by all paste processing strategies.
+ */
+export var PasteProcessingStrategyPriority;
+(function (PasteProcessingStrategyPriority) {
+  /** Fallback strategy used only when no specialized strategy matches. */
+  PasteProcessingStrategyPriority[PasteProcessingStrategyPriority["DEFAULT_FALLBACK"] = -1] = "DEFAULT_FALLBACK";
+  /** Baseline priority for generic strategies. */
+  PasteProcessingStrategyPriority[PasteProcessingStrategyPriority["BASE"] = 0] = "BASE";
+  /** Word strategy priority so it outranks generic strategies. */
+  PasteProcessingStrategyPriority[PasteProcessingStrategyPriority["WORD"] = 10] = "WORD";
+})(PasteProcessingStrategyPriority || (PasteProcessingStrategyPriority = {}));
+/**
+ * Abstract base class for paste processing strategies.
+ *
+ * Each strategy implements detection logic (`canHandle`) and transformation
+ * logic (`process`) for a specific clipboard source (Word, Google Docs, etc.).
+ * The strategy selector chooses the highest-priority strategy that can handle
+ * the given HTML.
+ */
+export class AbstractPasteProcessingStrategy {
+  /**
+   * Downstream paste mode marker associated with this strategy.
+   *
+   * Defaults to regular rich-text paste unless a specialized strategy overrides it.
+   *
+   * @returns {RTEPasteMode} Paste mode marker for downstream handlers.
+   */
+  get type() {
+    return RTEPasteMode.RICH;
+  }
+  /**
+   * Optional: Strategy priority when multiple strategies match.
+   * Higher numbers = higher priority. Default: 0.
+   *
+   * @returns {number} Strategy priority.
+   */
+  get priority() {
+    return PasteProcessingStrategyPriority.BASE;
+  }
+  /**
+   * Whether pasted images from this source should be extracted into local
+   * previews by the paste extension after {@link process} runs.
+   *
+   * @returns {boolean} `false` unless a strategy opts into image processing.
+   */
+  get supportsImageProcessing() {
+    return false;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/paste/strategies/paste-strategy-selector.js

@@ -0,0 +1,59 @@
+import { DefaultPasteProcessingStrategy } from './default-paste-strategy';
+import { WordPasteProcessingStrategy } from './word-paste-strategy';
+/**
+ * Centralized selector for paste processing strategies.
+ *
+ * Maintains a registry of available strategies and selects the highest-priority
+ * strategy that can handle the given clipboard HTML. Provides an extension
+ * point for adding support for new clipboard sources (e.g., Google Docs, Notion)
+ * without modifying the paste extension core logic.
+ */
+export class PasteStrategySelector {
+  constructor() {
+    this.defaultStrategy = new DefaultPasteProcessingStrategy();
+    this.strategies = [
+      new WordPasteProcessingStrategy(),
+      this.defaultStrategy, // Fallback
+    ];
+  }
+  /**
+   * Select the appropriate strategy for the given HTML content.
+   * Returns the highest-priority strategy that can handle the content.
+   *
+   * @param {string} html Raw clipboard HTML.
+   * @returns {AbstractPasteProcessingStrategy} The selected strategy (always returns a strategy; default is the fallback).
+   */
+  selectStrategy(html) {
+    return this.selectHighestPriorityStrategy(this.strategies.filter((strategy) => strategy.canHandle(html)));
+  }
+  /**
+   * Selects the highest-priority registered strategy for an explicitly chosen paste mode.
+   *
+   * Used when the user manually chooses a non-default mode from the paste chooser.
+   *
+   * @param {RTEPasteMode} type Explicit paste mode selected by the user.
+   * @returns {AbstractPasteProcessingStrategy} The matching strategy or the default fallback.
+   */
+  selectStrategyByType(type) {
+    return this.selectHighestPriorityStrategy(this.strategies.filter((strategy) => strategy.type === type));
+  }
+  /**
+   * Register a new paste processing strategy.
+   * Useful for future extensions (e.g., GoogleDocsPasteStrategy).
+   *
+   * @param {AbstractPasteProcessingStrategy} strategy The strategy to register.
+   */
+  registerStrategy(strategy) {
+    this.strategies.push(strategy);
+  }
+  /**
+   * Returns the highest-priority strategy from a candidate set or the default fallback.
+   *
+   * @param {AbstractPasteProcessingStrategy[]} strategies Candidate strategies.
+   * @returns {AbstractPasteProcessingStrategy} Selected strategy.
+   */
+  selectHighestPriorityStrategy(strategies) {
+    const selectedStrategy = strategies.sort((a, b) => b.priority - a.priority)[0];
+    return selectedStrategy || this.defaultStrategy;
+  }
+}