@globalpayments/vega 2.91.0 → 2.92.0

package/dist/collection/components/vega-rich-text-editor/extensions/find-replace/slimmer/controllers/helper/find-replace-state.js

@@ -0,0 +1,346 @@
+import { RTECodeBlock } from '../../../../../dto/blocks/code-block';
+import { CodeBlockSearchStrategy } from './block-search-strategies/code-block-search-strategy';
+import { ListItemBlockSearchStrategy } from './block-search-strategies/list-item-block-search-strategy';
+import { TextBlockSearchStrategy } from './block-search-strategies/text-block-search-strategy';
+import { ContainerBlockSearchStrategy } from './block-search-strategies/container-block-search-strategy';
+/**
+ * Sentinel character inserted into the flat text in place of a non-editable
+ * node (e.g. a token). It keeps surrounding searchable segments from bridging
+ * across the removed node — producing false matches — while never matching any
+ * user keyword. `\u0000` (NULL) does not appear in editable document text.
+ */
+const NON_EDITABLE_SENTINEL = '\u0000';
+/**
+ * Manages the in-memory state for a single Find & Replace session.
+ *
+ * One instance is created per editor host inside VegaRTEFindReplaceExtension
+ * during `initialExtensionAfterLoad`. It holds all search results, the
+ * current navigation index, and a per-block flat-text cache.
+ *
+ * Public API:
+ * - `search(content, keyword)` — run a search, replace current state using current options
+ * - `next()` / `prev()` — navigate through results
+ * - `getCurrentMatch()` / `getMatches()` / `getTotal()` / `getCurrentIndex()` — read state
+ * - `clear()` — reset everything
+ */
+export class FindReplaceState {
+  constructor() {
+    this.matches = [];
+    this.currentIndex = -1;
+    this.flatCache = new WeakMap();
+    this.cachedContent = null;
+    this.matchCase = false;
+    this.wholeWords = false;
+    /**
+     * Ordered strategy chain used to classify and traverse each block type.
+     * More specific types (RTEListItemBlock) must precede their parent class (RTETextBlock).
+     */
+    this.blockSearchStrategies = [
+      new CodeBlockSearchStrategy(),
+      new ListItemBlockSearchStrategy(),
+      new TextBlockSearchStrategy(),
+      new ContainerBlockSearchStrategy(),
+    ];
+  }
+  /**
+   * Runs a fresh search over the given content and replaces all previous results.
+   *
+   * The flat-text cache is invalidated whenever the content reference changes
+   * (i.e. after the user edits the document). When only the keyword or options
+   * change (user typing in the find input), the cache is reused.
+   *
+   * @param {VegaRTEContent} content - The root content DTO to search.
+   * @param {string} keyword - The search keyword entered by the user.
+   * Uses the currently stored `matchCase` and `wholeWords` options.
+   */
+  search(content, keyword) {
+    this.invalidateCacheIfNeeded(content);
+    if (!keyword) {
+      this.matches = [];
+      this.currentIndex = -1;
+      return;
+    }
+    const regex = this.buildRegExp(keyword, this.getFindOptions());
+    const blocks = this.collectSearchableBlocks(content.children);
+    const results = [];
+    for (const block of blocks) {
+      let cached = this.flatCache.get(block);
+      if (!cached) {
+        cached =
+          block instanceof RTECodeBlock
+            ? this.buildCodeBlockFlat(block)
+            : this.buildTextBlockFlat(block);
+        this.flatCache.set(block, cached);
+      }
+      const { flatText, segments } = cached;
+      if (!flatText) {
+        continue;
+      }
+      regex.lastIndex = 0;
+      let match;
+      while ((match = regex.exec(flatText)) !== null) {
+        // match[1] is always the keyword capture group. In wholeWords mode,
+        // match[0] may include a leading non-letter boundary char, so we
+        // compute the actual start from the end offset minus the keyword length.
+        const matchEnd = match.index + match[0].length;
+        const matchStart = matchEnd - match[1].length;
+        const nodes = this.flatOffsetToNodePositions(segments, matchStart, matchEnd);
+        if (nodes.length > 0) {
+          results.push({ block, nodes, matchText: match[1] });
+        }
+      }
+    }
+    this.matches = results;
+    this.currentIndex = results.length > 0 ? 0 : -1;
+  }
+  /**
+   * Advances to the next match, wrapping around to the first.
+   */
+  next() {
+    if (this.matches.length === 0) {
+      return;
+    }
+    this.currentIndex = (this.currentIndex + 1) % this.matches.length;
+  }
+  /**
+   * Moves to the previous match, wrapping around to the last.
+   */
+  prev() {
+    if (this.matches.length === 0) {
+      return;
+    }
+    this.currentIndex = (this.currentIndex - 1 + this.matches.length) % this.matches.length;
+  }
+  /**
+   * Sets the current index directly. Clamps to valid range.
+   *
+   * @param {number} index - The desired index.
+   */
+  setCurrentIndex(index) {
+    if (this.matches.length === 0) {
+      this.currentIndex = -1;
+      return;
+    }
+    this.currentIndex = Math.max(0, Math.min(index, this.matches.length - 1));
+  }
+  /**
+   * Returns the currently active match, or null if there are no results.
+   *
+   * @returns {FindMatch | null} The currently active match, or null if there are no results.
+   */
+  getCurrentMatch() {
+    var _a;
+    return (_a = this.matches[this.currentIndex]) !== null && _a !== void 0 ? _a : null;
+  }
+  /**
+   * Returns all matches from the last search.
+   *
+   * @returns {ReadonlyArray<FindMatch>} All matches from the last search.
+   */
+  getMatches() {
+    return this.matches;
+  }
+  /**
+   * Returns the total number of matches from the last search.
+   *
+   * @returns {number} The total number of matches.
+   */
+  getTotal() {
+    return this.matches.length;
+  }
+  /**
+   * Returns the 0-based index of the current match, or -1 when there are no results.
+   *
+   * @returns {number} The 0-based index, or -1 when there are no results.
+   */
+  getCurrentIndex() {
+    return this.currentIndex;
+  }
+  /**
+   * Resets only match results and navigation index.
+   * The flat-text cache and cached content reference are preserved so that
+   * a subsequent search on the same document (e.g. after a keyword change)
+   * can reuse the already-computed block flat texts.
+   */
+  clearResults() {
+    this.matches = [];
+    this.currentIndex = -1;
+  }
+  /**
+   * Resets all search state, including results, navigation index, and flat-text cache.
+   * Use this when the session ends (e.g. panel closed) or the host changes.
+   */
+  clear() {
+    this.matches = [];
+    this.currentIndex = -1;
+    this.flatCache = new WeakMap();
+    this.cachedContent = null;
+  }
+  /**
+   * Sets the matchCase search option.
+   *
+   * @param {boolean} enabled - Whether to enable case-sensitive matching.
+   */
+  setMatchCase(enabled) {
+    this.matchCase = enabled;
+  }
+  /**
+   * Sets the wholeWords search option.
+   *
+   * @param {boolean} enabled - Whether to enable whole-word matching.
+   */
+  setWholeWords(enabled) {
+    this.wholeWords = enabled;
+  }
+  // ─── Private helpers ──────────────────────────────────────────────────────────
+  /**
+   * Invalidates the flat-text cache when the content reference has changed.
+   * Since flushChanges always produces a new VegaRTEContent via clone(), a
+   * changed reference reliably indicates the document has been edited.
+   *
+   * @param {VegaRTEContent} content - The incoming content reference.
+   */
+  invalidateCacheIfNeeded(content) {
+    if (content !== this.cachedContent) {
+      this.flatCache = new WeakMap();
+      this.cachedContent = content;
+    }
+  }
+  /**
+   * Builds a RegExp from the keyword and search options.
+   *
+   * @param {string} keyword - The raw user input.
+   * @param {FindOptions} options - Search options.
+   * @returns {RegExp} The compiled regular expression.
+   */
+  buildRegExp(keyword, options) {
+    const escaped = this.escapeRegExp(keyword);
+    // eslint-disable-next-line spellcheck/spell-checker
+    let flags = 'gu';
+    if (!options.matchCase) {
+      flags += 'i';
+    }
+    if (options.wholeWords) {
+      // Aligned with CKEditor's findByTextCallback non-letter boundary group.
+      //
+      // The keyword is wrapped in a capturing group (match[1]) so the search
+      // loop can compute the exact start offset without lookbehind assertions
+      // (not supported in Safari < 16.4). The non-capturing prefix group
+      // `(?:^|nonLetter)` may consume one boundary char, which is why we
+      // derive matchStart as matchEnd - match[1].length rather than match.index.
+      const nonLetter = '[^a-zA-Z\u00C0-\u024F\u1E00-\u1EFF]';
+      const prefix = !new RegExp(`^${nonLetter}`).test(keyword) ? `(?:^|${nonLetter})` : '';
+      const suffix = !new RegExp(`${nonLetter}$`).test(keyword) ? `(?=${nonLetter}|$)` : '';
+      return new RegExp(`${prefix}(${escaped})${suffix}`, flags);
+    }
+    return new RegExp(`(${escaped})`, flags);
+  }
+  /**
+   * Escapes all regex special characters so the keyword is treated as literal text.
+   *
+   * @param {string} text - The raw input string.
+   * @returns {string} The escaped string safe for use in a RegExp constructor.
+   */
+  escapeRegExp(text) {
+    return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+  /**
+   * Recursively collects all searchable leaf blocks (RTETextBlock and RTECodeBlock)
+   * from a block tree in document order.
+   *
+   * Each block is dispatched to the first matching BlockSearchStrategy.
+   *
+   * @param {RTEBlock[]} blocks - The block array to traverse.
+   * @returns {(RTETextBlock | RTECodeBlock)[]} Ordered list of searchable leaf blocks.
+   */
+  collectSearchableBlocks(blocks) {
+    const result = [];
+    const recurse = this.collectSearchableBlocks.bind(this);
+    for (const block of blocks) {
+      const strategy = this.blockSearchStrategies.find((s) => s.canHandle(block));
+      if (strategy) {
+        result.push(...strategy.collect(block, recurse));
+      }
+    }
+    return result;
+  }
+  /**
+   * Builds the flat text and segment table for a RTETextBlock.
+   *
+   * Non-editable child nodes (e.g. tokens, which render as read-only chips)
+   * are excluded from the searchable flat text. Each is replaced by a single
+   * sentinel character so that adjacent editable segments cannot bridge across
+   * the token to form a false match, while keeping segment offsets aligned.
+   *
+   * @param {RTETextBlock} block - The text block to flatten.
+   * @returns {BlockFlatCache} The flat text string and segment mapping.
+   */
+  buildTextBlockFlat(block) {
+    const segments = [];
+    const flatParts = [];
+    let cursor = 0;
+    for (const node of block.children) {
+      if (!node.isContentEditable()) {
+        flatParts.push(NON_EDITABLE_SENTINEL);
+        cursor += NON_EDITABLE_SENTINEL.length;
+        continue;
+      }
+      const len = node.text.length;
+      segments.push({ node, start: cursor, end: cursor + len });
+      flatParts.push(node.text);
+      cursor += len;
+    }
+    return {
+      flatText: flatParts.join(''),
+      segments,
+    };
+  }
+  /**
+   * Builds the flat text and segment table for a RTECodeBlock.
+   *
+   * @param {RTECodeBlock} block - The code block to flatten.
+   * @returns {BlockFlatCache} The flat text string and segment mapping.
+   */
+  buildCodeBlockFlat(block) {
+    const codeNode = block.children[0];
+    if (!codeNode) {
+      return { flatText: '', segments: [] };
+    }
+    const flatText = codeNode.text;
+    return {
+      flatText,
+      segments: [{ node: codeNode, start: 0, end: flatText.length }],
+    };
+  }
+  /**
+   * Maps a flat [matchStart, matchEnd) range back to individual node positions.
+   *
+   * @param {(TextSegment | CodeSegment)[]} segments - The segment table.
+   * @param {number} matchStart - Inclusive start in the flat text.
+   * @param {number} matchEnd - Exclusive end in the flat text.
+   * @returns {NodePosition[]} Ordered list of node-local positions spanning the match.
+   */
+  flatOffsetToNodePositions(segments, matchStart, matchEnd) {
+    const positions = [];
+    for (const segment of segments) {
+      if (segment.end <= matchStart) {
+        continue;
+      }
+      if (segment.start >= matchEnd) {
+        break;
+      }
+      const localStart = Math.max(0, matchStart - segment.start);
+      const localEnd = Math.min(segment.end, matchEnd) - segment.start;
+      positions.push({ node: segment.node, startOffset: localStart, endOffset: localEnd });
+    }
+    return positions;
+  }
+  /**
+   * Builds the current find options from the shared context.
+   *
+   * @returns {FindOptions} The options for the search engine.
+   */
+  getFindOptions() {
+    return { matchCase: this.matchCase, wholeWords: this.wholeWords };
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/find-replace/slimmer/controllers/replace-controller.js

@@ -0,0 +1,113 @@
+import { FindReplaceControllerAbstract, } from './find-replace-controller.abstract';
+/**
+ * Replace controller — adds mutation capabilities on top of the shared
+ * find state.
+ *
+ * Shares state with {@link FindController} via the injected
+ * {@link FindReplaceControllerContext}, so both controllers always operate
+ * on the same search results and highlight overlays.
+ */
+export class ReplaceController extends FindReplaceControllerAbstract {
+  constructor(context) {
+    super(context);
+    /** The replacement string used by replace() and replaceAll(). Updated via setReplacement(). */
+    this.replacement = '';
+    this.flushFn = null;
+  }
+  /**
+   * Stores the flush callback used to commit content changes to the editor.
+   * Called by the toolbar renderer after obtaining it from the extension context.
+   *
+   * Calling `flushValue` once — even after mutating multiple nodes — creates a
+   * single entry in the editor's undo stack, so the entire replace/replaceAll
+   * operation is undone as one atomic step.
+   *
+   * @param {(value: VegaRTEContent) => void} fn - The flush function.
+   * @returns {void} No return value.
+   */
+  setFlushValue(fn) {
+    this.flushFn = fn;
+  }
+  /**
+   * Stores the replacement text for the next replace() or replaceAll() call.
+   *
+   * @param {string} text - The replacement string.
+   * @returns {void} No return value.
+   */
+  setReplacement(text) {
+    this.replacement = text;
+  }
+  /**
+   * Replaces the current match with the stored replacement text,
+   * advances to the next match, and refreshes highlights.
+   * An empty replacement string deletes the matched text.
+   *
+   * No-op when there is no current match or no host.
+   *
+   * @returns {FindReplaceResult} Updated match position and total.
+   */
+  replace() {
+    const currentMatch = this.context.state.getCurrentMatch();
+    if (currentMatch && this.context.hostRef && this.flushFn) {
+      const previousIndex = this.context.state.getCurrentIndex();
+      this.applyMatchReplacement(currentMatch);
+      this.flushFn(this.context.hostRef.value);
+      this.context.state.clear();
+      this.context.state.search(this.context.hostRef.value, this.context.keyword);
+      // setCurrentIndex clamps to [0, total-1], so passing previousIndex
+      // directly keeps the cursor as close as possible to the replaced position
+      // rather than wrapping around when previousIndex >= total.
+      this.context.state.setCurrentIndex(previousIndex);
+    }
+    return this.applyAndGetResult();
+  }
+  /**
+   * Replaces all matches with the stored replacement text in a single operation
+   * (one flushValue call = one Undo step), then re-runs the search.
+   * An empty replacement string deletes all matched text.
+   *
+   * No-op when there are no matches or no host.
+   *
+   * @returns {FindReplaceResult} Updated match position and total.
+   */
+  replaceAll() {
+    if (this.context.state.getTotal() > 0 && this.flushFn && this.context.hostRef) {
+      const matches = this.context.state.getMatches();
+      // Iterate in reverse so that mutating a later match does not shift the
+      // startOffset/endOffset of earlier matches that have not yet been processed.
+      for (let i = matches.length - 1; i >= 0; i -= 1) {
+        this.applyMatchReplacement(matches[i]);
+      }
+      this.flushFn(this.context.hostRef.value);
+      this.context.state.clear();
+      this.context.state.search(this.context.hostRef.value, this.context.keyword);
+    }
+    return this.applyAndGetResult();
+  }
+  // ─── Private ──────────────────────────────────────────────────────────────────
+  /**
+   * Directly mutates the matched nodes in the live content tree.
+   * `position.node` is already a reference into `this.context.hostRef.value`,
+   * so no cloning or path navigation is needed.
+   *
+   * For multi-node (cross-span) matches the first node receives the replacement
+   * text and every subsequent node has its matched slice deleted.
+   *
+   * This method mutates the content tree in place. The caller is
+   * responsible for calling `state.clear()` afterwards to invalidate the
+   * flat-text cache, which uses reference equality and will not detect the
+   * in-place change automatically.
+   *
+   * @param {FindMatch} match - The match to replace.
+   * @returns {void} No return value.
+   */
+  applyMatchReplacement(match) {
+    match.nodes.forEach((position, index) => {
+      const replacementText = index === 0 ? this.replacement : '';
+      position.node.text =
+        position.node.text.slice(0, position.startOffset) +
+          replacementText +
+          position.node.text.slice(position.endOffset);
+    });
+  }
+}

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

@@ -0,0 +1,194 @@
+import { VegaInternalIconManager } from '../../../../../../helpers/icon/internal-icon-manager';
+import { DomNodeSubjectObserverFactory } from '../../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaChange, VegaClick, VegaPopoverHide, VegaPopoverShow, } from '../../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaRTEToolbarButtonRenderer } from '../../../base-toolbar-button-renderer';
+import findReplaceIcon from '../../assets/find-and-replace';
+import { createFindReplaceControllerContext, } from '../controllers/find-replace-controller.abstract';
+import { FindController } from '../controllers/find-controller';
+import { ReplaceController } from '../controllers/replace-controller';
+import { VegaInternalTranslation } from '../../../../../../helpers/translation/internal-translation-controller';
+import { debounce } from '../../../../../../utils/timer';
+/**
+ * Toolbar button renderer for the Find & Replace extension.
+ *
+ * Responsible only for UI concerns:
+ * - Renders the toolbar button wrapped in a vega-popover.
+ * - Wires panel events to the {@link FindController} and {@link ReplaceController}.
+ * - Pushes controller results back to the panel display.
+ *
+ * Both controllers share a single {@link FindReplaceControllerContext} so they
+ * operate on the same search state and highlight overlays.
+ */
+export class FindReplaceToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  constructor() {
+    super(...arguments);
+    this.sharedContext = createFindReplaceControllerContext();
+    this.findController = new FindController(this.sharedContext);
+    this.replaceController = new ReplaceController(this.sharedContext);
+    this.panelRef = null;
+    this.popoverRef = null;
+    this.isPopoverOpen = false;
+    this.scrollOnNextRefresh = false;
+    this.debouncedRefresh = debounce(this.onContentChanged, 100, this);
+    /* eslint-disable jsdoc/require-jsdoc */
+    this.panelActionHandlers = {
+      'find': () => this.findController.find(),
+      'prev': () => this.findController.prev(),
+      'next': () => this.findController.next(),
+      'replace': () => {
+        this.scrollOnNextRefresh = true;
+        return this.replaceController.replace();
+      },
+      'replace-all': () => {
+        this.scrollOnNextRefresh = true;
+        return this.replaceController.replaceAll();
+      },
+      'match-case': (data) => this.findController.setMatchCase(data),
+      'whole-words': (data) => this.findController.setWholeWords(data),
+      'close': () => this.closePanel(),
+    };
+  }
+  /* eslint-enable jsdoc/require-jsdoc */
+  /**
+   * @inheritDoc
+   */
+  render(h, editorContext) {
+    this.syncEditorState(editorContext);
+    return h('vega-popover', {
+      trigger: 'none',
+      alignment: 'start',
+      placement: 'bottom',
+      showArrow: false,
+      isScreenPosition: true,
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (ref) => {
+        if (ref) {
+          this.popoverRef = ref;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, () => {
+            this.isPopoverOpen = false;
+            this.findController.clear();
+            this.updatePanel({ current: 0, total: 0 });
+          });
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
+            this.isPopoverOpen = true;
+          });
+        }
+      },
+    }, [
+      h('div', { slot: 'popover' }, [
+        h('vega-rich-text-find-replace-panel', {
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          ref: (ref) => {
+            if (ref) {
+              this.panelRef = ref;
+              DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => {
+                if (e.detail.type === 'keyword') {
+                  this.updatePanel(this.findController.setKeyword(e.detail.value));
+                }
+                else if (e.detail.type === 'replace') {
+                  this.replaceController.setReplacement(e.detail.value);
+                }
+              });
+              DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (payload) => {
+                this.handlePanelAction(payload.detail);
+              });
+            }
+          },
+        }),
+      ]),
+      h('div', { slot: 'popover-content' }, this.renderButton(h, editorContext, {
+        icon: 'rte-find-replace',
+        tooltip: { text: VegaInternalTranslation.t('Find and replace') },
+      })),
+    ]);
+  }
+  /**
+   * Toggles the popover open/close when the toolbar button is clicked.
+   */
+  handleButtonClick() {
+    if (this.popoverRef) {
+      if (this.isPopoverOpen) {
+        void this.popoverRef.hide();
+      }
+      else {
+        void this.popoverRef.show();
+      }
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * Not used — this button has no dropdown.
+   */
+  handleDropdownClick() {
+    // no-op
+  }
+  // ─── Private helpers ──────────────────────────────────────────────────────────
+  /**
+   * Synchronizes internal state with the editor context on each render cycle.
+   * Registers the host reference and content-change listener, and hides the
+   * popover if the toolbar item becomes hidden while open.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context.
+   */
+  syncEditorState(editorContext) {
+    this.findController.setHost(editorContext.host);
+    const extensionContext = this.getExtensionContext(editorContext.host);
+    if (extensionContext) {
+      this.replaceController.setFlushValue(extensionContext.flushValue);
+    }
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(editorContext.host, VegaChange, this.debouncedRefresh);
+    if (this.isHidden(editorContext) && this.isPopoverOpen && this.popoverRef) {
+      void this.popoverRef.hide();
+    }
+  }
+  /**
+   * Dispatches panel button actions to the controller.
+   *
+   * @param {FindReplacePanelAction} panelAction - The structured action emitted by the panel.
+   */
+  handlePanelAction(panelAction) {
+    const { action, data } = panelAction;
+    const handler = this.panelActionHandlers[action];
+    if (handler) {
+      const result = handler(data);
+      if (result) {
+        this.updatePanel(result);
+      }
+    }
+  }
+  /**
+   * Pushes result to the panel counter display.
+   *
+   * @param {FindReplaceResult} result - The current/total values.
+   */
+  updatePanel(result) {
+    if (this.panelRef) {
+      void this.panelRef.updateResult(result.current, result.total);
+    }
+  }
+  /**
+   * Content changed — ask the controller to refresh search results.
+   */
+  onContentChanged() {
+    if (!this.isPopoverOpen) {
+      return;
+    }
+    const shouldScroll = this.scrollOnNextRefresh;
+    this.scrollOnNextRefresh = false;
+    const result = this.findController.refresh(shouldScroll);
+    if (result) {
+      this.updatePanel(result);
+    }
+  }
+  /**
+   * Closes the panel popover.
+   */
+  closePanel() {
+    if (this.popoverRef) {
+      void this.popoverRef.hide();
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'rte-find-replace': findReplaceIcon });
+})();