@globalpayments/vega 2.90.0 → 2.92.0

package/dist/collection/components/vega-rich-text-editor/dto/range.js

@@ -144,8 +144,8 @@ export class RTERange {
         : this._endNode.getRangeContainer();
       if (startContainer && endContainer) {
         range = new Range();
-        range.setStart(startContainer, this._startOffset);
-        range.setEnd(endContainer, this._endOffset);
+        range.setStart(startContainer, this.clampOffsetToContainer(startContainer, this._startOffset));
+        range.setEnd(endContainer, this.clampOffsetToContainer(endContainer, this._endOffset));
         this._startContainer = startContainer;
         this._endContainer = endContainer;
         this._oldNativeRange = range;
@@ -156,6 +156,28 @@ export class RTERange {
       return this._oldNativeRange;
     }
   }
+  /**
+   * Clamps an offset to the valid bound of a DOM container so that
+   * `Range.setStart` / `Range.setEnd` never throw `IndexSizeError`.
+   *
+   * A stored selection offset can become stale or unit-mismatched when an undo
+   * restores a selection captured against different content — for example after
+   * find-and-replace shrinks a text node, or when the selection node's DOM
+   * container is its parent element (offset measured in child-node count rather
+   * than characters, as for non-editable token / logic-control nodes). Text
+   * containers are bounded by character length, element containers by child count.
+   *
+   * @param {Node} container - The DOM container the offset applies to.
+   * @param {number} offset - The desired offset.
+   * @returns {number} The offset clamped to `[0, container length]`.
+   */
+  clampOffsetToContainer(container, offset) {
+    var _a, _b;
+    const max = container.nodeType === Node.TEXT_NODE
+      ? (_b = (_a = container.textContent) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0
+      : container.childNodes.length;
+    return Math.max(0, Math.min(offset, max));
+  }
   /**
    * Retrieves an RTENode based on the given element by checking its type and parent elements.
    *

package/dist/collection/components/vega-rich-text-editor/extensions/copy/action-handler-strategies/copy-selected-content-strategy.js

@@ -0,0 +1,226 @@
+import { LogUtility } from '../../../../../utils/log';
+import { tryGetDocument } from '../../../../../utils/try-get-document';
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+/**
+ * Strategy that extracts the HTML and plain text content of the current selection, stores the
+ * result on the {@link CopySelectedContentAction} and writes it to the clipboard.
+ */
+export class CopySelectedContentStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action) {
+    const parentBlocks = this.getParentBlocks(action.selectedNodes);
+    const { html, text } = this.getSelectedContent(action.selection, parentBlocks);
+    if (text || html) {
+      action.copyResult = this.copyToClipboard(html, text);
+    }
+  }
+  /**
+   * Extracts the HTML and text content from the current selection.
+   *
+   * `Range.cloneContents()` returns only the nodes inside the selection, dropping the ancestor chain
+   * between the selection's common ancestor and its block. When the selection stays inside a single
+   * block, those dropped ancestors carry the styling, so the cloned fragment is re-wrapped with
+   * shallow clones of every ancestor from the common ancestor up to the block, preserving arbitrary
+   * inline nesting (e.g. `block > strong > em > span > text`).
+   *
+   * When the selection covers the whole block (its common ancestor sits above the block) or spans
+   * multiple blocks, each block is already kept by `cloneContents()`, so no re-wrapping is done.
+   *
+   * @param {Nullable<Selection>} selection - The current selection object.
+   * @param {RTEBlock[]} parentBlocks - The parent blocks of the selected nodes.
+   * @returns {RTESelectedContent} - The HTML and text content of the selected content.
+   */
+  getSelectedContent(selection, parentBlocks) {
+    const result = { html: '', text: '' };
+    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+      return result;
+    }
+    const range = selection.getRangeAt(0);
+    const doc = tryGetDocument();
+    if (!doc) {
+      return result;
+    }
+    // `cloneContents()` returns a `DocumentFragment` of real DOM nodes (already well-formed). Its
+    // `textContent` is the plain text; the fragment itself is wrapped/serialized into HTML below.
+    const fragment = range.cloneContents();
+    // A `DocumentFragment` has no `innerHTML`, so a temporary element is used to serialize it to HTML.
+    const container = doc.createElement('div');
+    const commonAncestor = range.commonAncestorContainer;
+    if (parentBlocks.length === 1) {
+      const block = this.getDOMByEntity(parentBlocks[0]);
+      // Only re-wrap when the block is dropped from the clone, i.e. the selection stays inside the
+      // block. When the whole block is selected, `commonAncestor` sits above it and the clone
+      // already keeps the block, so wrapping again would nest a duplicate block.
+      if (block && block.contains(commonAncestor)) {
+        // Wrap the cloned fragment with the dropped ancestor chain (from `commonAncestor` up to the
+        // block), preserving each element's styles, then serialize the rebuilt block to HTML.
+        const cloneNode = this.wrapWithAncestorChain(fragment, commonAncestor, block);
+        container.appendChild(cloneNode);
+        result.html = container.innerHTML;
+        result.text = container.textContent;
+        return result;
+      }
+    }
+    else if (parentBlocks.length > 1 &&
+      parentBlocks.every((block) => block.type === 'list-item')) {
+      const firstList = parentBlocks[0].parent;
+      if (firstList && parentBlocks.every((block) => block.parent === firstList)) {
+        const listElement = this.getDOMByEntity(firstList);
+        if (listElement && listElement.contains(commonAncestor)) {
+          const cloneListElement = listElement.cloneNode(false);
+          cloneListElement.appendChild(fragment);
+          container.appendChild(cloneListElement);
+          result.html = container.innerHTML;
+          result.text = container.textContent;
+          return result;
+        }
+      }
+    }
+    // The selection covers whole/multiple blocks: the clone already keeps them, so serialize as-is.
+    container.appendChild(fragment);
+    result.html = container.innerHTML;
+    result.text = container.textContent;
+    return result;
+  }
+  /**
+   * Wraps the cloned selection fragment with the ancestor chain that `cloneContents()` dropped,
+   * rebuilding every element from the selection's common ancestor up to the block while preserving
+   * each element's styles. Returns the cloned block that holds the rebuilt chain and content.
+   *
+   * When the common ancestor is the block itself, the fragment is appended directly under the cloned
+   * block, since no inline ancestor chain was dropped.
+   *
+   * @param {Node} content - The cloned selection fragment to place at the innermost level.
+   * @param {Node} commonAncestor - The selection's common ancestor container.
+   * @param {HTMLElement} block - The block element to stop cloning at.
+   * @returns {HTMLElement} - The cloned block wrapping the rebuilt ancestor chain and content.
+   */
+  wrapWithAncestorChain(content, commonAncestor, block) {
+    const blockClone = block.cloneNode(false);
+    // `cloneContents()` keeps everything inside `commonAncestor`, so the dropped chain runs from
+    // `commonAncestor` (its element, when the ancestor is a text node) up to the block.
+    const targetElement = commonAncestor.nodeType === Node.TEXT_NODE
+      ? commonAncestor.parentElement
+      : commonAncestor;
+    // The target is the block itself: the content sits directly under the block, no chain to rebuild.
+    if (targetElement === block) {
+      blockClone.appendChild(content);
+      return blockClone;
+    }
+    // Clone the target as the innermost container and place the content inside it.
+    const innermost = targetElement.cloneNode(false);
+    innermost.appendChild(content);
+    // Walk up from the target to the block, cloning each ancestor and nesting the chain bottom-up.
+    let shouldAppendNode = innermost;
+    let current = targetElement.parentElement;
+    while (current && current !== block) {
+      const parentClone = current.cloneNode(false);
+      parentClone.appendChild(shouldAppendNode);
+      shouldAppendNode = parentClone;
+      current = current.parentElement;
+    }
+    // Append the assembled ancestor chain to the cloned block.
+    blockClone.appendChild(shouldAppendNode);
+    // When the block is a list item inside an ordered list, wrap the cloned list item with a
+    // shallow clone of the ordered list to preserve the numbering.
+    if (blockClone.tagName === 'LI' &&
+      current &&
+      current.parentElement &&
+      current.parentElement.tagName === 'OL') {
+      const cloneList = current.parentElement.cloneNode(false);
+      cloneList.appendChild(blockClone);
+      return cloneList;
+    }
+    return blockClone;
+  }
+  /**
+   * Retrieves the parent blocks of the given selected nodes.
+   *
+   * @param {RTENode[]} selectedNodes - The nodes for which to find parent blocks.
+   * @returns {RTEBlock[]} An array of parent blocks.
+   */
+  getParentBlocks(selectedNodes) {
+    const parentBlocks = [];
+    for (const node of selectedNodes) {
+      const block = node.parent;
+      if (block && !parentBlocks.includes(block)) {
+        parentBlocks.push(block);
+      }
+    }
+    return parentBlocks;
+  }
+  /**
+   * Copies both HTML and plain text content to the clipboard using the Clipboard API.
+   *
+   * Browser compatibility for `navigator.clipboard.write()` with `ClipboardItem`:
+   * - Chrome 76+, Edge 79+, Safari 13.1+, Firefox 127+
+   *
+   * Since Firefox 86+ must be supported, fall back to `execCommand('copy')` when the
+   * Clipboard API is unavailable or fails (e.g. Firefox 86-126).
+   *
+   * @param {string} htmlContent - The HTML content to copy.
+   * @param {string} textContent - The plain text content to copy.
+   * @returns {Promise<boolean>} - A promise that resolves to true if the copy operation succeeded.
+   */
+  async copyToClipboard(htmlContent, textContent) {
+    let result = false;
+    try {
+      const htmlBlob = new Blob([htmlContent], { type: 'text/html' });
+      const textBlob = new Blob([textContent], { type: 'text/plain' });
+      const clipboardItem = new ClipboardItem({
+        'text/html': htmlBlob,
+        'text/plain': textBlob,
+      });
+      await navigator.clipboard.write([clipboardItem]);
+      result = true;
+    }
+    catch (_a) {
+      // Fallback for browsers without ClipboardItem support (e.g. Firefox 86-126)
+      result = this.copyWithExecCommand(htmlContent, textContent);
+      if (!result) {
+        LogUtility.warn('Failed to copy the selected content to the clipboard. Use keyboard shortcuts instead.');
+      }
+    }
+    return result;
+  }
+  /**
+   * Fallback copy method using `execCommand('copy')` for browsers that don't support the
+   * Clipboard API (e.g. Firefox 86-126).
+   *
+   * Instead of creating a temporary element and changing the selection (which would clear the
+   * editor's Shadow DOM selection and steal focus), this intercepts the native `copy` event that
+   * `execCommand('copy')` triggers and overrides its clipboard data. The user's original selection
+   * and focus stay untouched.
+   *
+   * @param {string} htmlContent - The HTML content to copy.
+   * @param {string} textContent - The plain text content to copy.
+   * @returns {boolean} - True if the copy command succeeded.
+   */
+  copyWithExecCommand(htmlContent, textContent) {
+    const doc = tryGetDocument();
+    if (!doc) {
+      return false;
+    }
+    /**
+     * Overrides the clipboard data of the native copy event triggered by `execCommand('copy')`.
+     *
+     * @param {ClipboardEvent} event - The native copy event.
+     */
+    const onCopy = (event) => {
+      if (event.clipboardData) {
+        event.clipboardData.setData('text/html', htmlContent);
+        event.clipboardData.setData('text/plain', textContent);
+      }
+      event.preventDefault();
+    };
+    doc.addEventListener('copy', onCopy);
+    try {
+      return doc.execCommand('copy');
+    }
+    finally {
+      doc.removeEventListener('copy', onCopy);
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/copy/actions/copy-selected-content-action.js

@@ -0,0 +1,21 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+/**
+ * Action to extract the currently selected content (HTML and plain text) from the editor.
+ *
+ * The action is read-only: it does not mutate the content state. The handling strategy resolves
+ * the selected HTML and plain text and writes them directly to the clipboard.
+ *
+ * @example host.value.apply(new CopySelectedContentAction(selection, selectedNodes));
+ */
+export class CopySelectedContentAction extends ModifyContentAction {
+  constructor(selection, selectedNodes) {
+    super();
+    this.type = 'COPY_SELECTED_CONTENT_ACTION';
+    this.selection = null;
+    this.selectedNodes = [];
+    // The result of the copy operation, which may be a Promise if the clipboard write is asynchronous.
+    this.copyResult = null;
+    this.selection = selection;
+    this.selectedNodes = selectedNodes;
+  }
+}

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

@@ -0,0 +1,20 @@
+import { VegaRTEExtension } from '../extension.abstract';
+import { RTECopyToolbarButtonRenderer } from './copy-toolbar-button-renderer';
+import { ActionHandleStrategyRegistry } from '../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { VegaRTEContent } from '../../dto/content-state';
+import { CopySelectedContentStrategy } from './action-handler-strategies/copy-selected-content-strategy';
+/**
+ * Vega Rich Text Editor Copy Extension.
+ * Adds a toolbar button that copies the currently selected editor content to the clipboard.
+ */
+export class VegaRTECopyExtension extends VegaRTEExtension {
+  /** @inheritDoc */
+  prepareBeforeLoad(host) {
+    this.registerToolbarButtonRenderer(VegaRTECopyExtension.TOOLBAR_BUTTON_KEY, new RTECopyToolbarButtonRenderer(), host);
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register('COPY_SELECTED_CONTENT_ACTION', VegaRTEContent.name, new CopySelectedContentStrategy());
+})();
+// The unique key for the copy toolbar button, used for registration and retrieval.
+VegaRTECopyExtension.TOOLBAR_BUTTON_KEY = 'copy';

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

@@ -0,0 +1,58 @@
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { VegaRTEToolbarButtonRenderer } from '../base-toolbar-button-renderer';
+import copyIcon from '../../../../global/icons/copy';
+import { methodPlaceholder } from 'vega-slimmer/core';
+import { CopySelectedContentAction } from './actions/copy-selected-content-action';
+/**
+ * Toolbar button renderer for the Copy extension.
+ * Renders a toolbar button that copies the currently selected editor text to the clipboard.
+ */
+export class RTECopyToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  /**
+   * Renders the copy toolbar button.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   * @returns {VegaRTERenderResult} - The toolbar button render result.
+   */
+  render(h, editorContext) {
+    return this.renderButton(h, editorContext, {
+      icon: 'rte-copy',
+      tooltip: { text: 'Copy' },
+    });
+  }
+  /**
+   * Determines if the copy button should be disabled.
+   * Disabled when the editor is disabled or when no content is selected.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   * @returns {boolean} - True if the button should be disabled.
+   */
+  isDisabled(editorContext) {
+    const context = this.getExtensionContext(editorContext.host);
+    return (!context || context.host.disabled || !context.getSelection() || context.getSelection().isCollapsed);
+  }
+  /**
+   * Handles the copy button click event.
+   * Dispatches a copy action through `host.value`; the action handler extracts the current selection
+   * and writes the resulting HTML and plain text content to the clipboard.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   */
+  handleButtonClick(editorContext) {
+    const context = this.getExtensionContext(editorContext.host);
+    if (context && context.host) {
+      context.host.value.apply(new CopySelectedContentAction(context.getSelection(), context.getSelectedNodes()));
+    }
+  }
+  /*istanbul ignore next*/
+  /**
+   * Handles dropdown click event. Not applicable for the copy button, so it's left empty.
+   */
+  handleDropdownClick() {
+    methodPlaceholder();
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'rte-copy': copyIcon });
+})();

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

@@ -0,0 +1,15 @@
+import { VegaRTEExtension } from '../extension.abstract';
+import { RTECutToolbarButtonRenderer } from './cut-toolbar-button-renderer';
+/**
+ * Vega Rich Text Editor Cut Extension.
+ * Adds a toolbar button that copies the currently selected editor content to the clipboard
+ * and removes it from the editor.
+ */
+export class VegaRTECutExtension extends VegaRTEExtension {
+  /** @inheritDoc */
+  prepareBeforeLoad(host) {
+    this.registerToolbarButtonRenderer(VegaRTECutExtension.TOOLBAR_BUTTON_KEY, new RTECutToolbarButtonRenderer(), host);
+  }
+}
+// The unique key for the cut toolbar button, used for registration and retrieval.
+VegaRTECutExtension.TOOLBAR_BUTTON_KEY = 'cut';

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

@@ -0,0 +1,44 @@
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { RTECopyToolbarButtonRenderer } from '../copy/copy-toolbar-button-renderer';
+import cutIcon from '../../assets/cut';
+import { CopySelectedContentAction } from '../copy/actions/copy-selected-content-action';
+import { DeleteSelectedContentAction } from '../../dto/actions/delete-selected-content-action';
+/**
+ * Toolbar button renderer for the Cut extension.
+ * Reuses the Copy renderer to write the selected editor content to the clipboard,
+ * then removes the selected content from the editor.
+ */
+export class RTECutToolbarButtonRenderer extends RTECopyToolbarButtonRenderer {
+  /**
+   * Renders the cut toolbar button.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   * @returns {VegaRTERenderResult} - The toolbar button render result.
+   */
+  render(h, editorContext) {
+    return this.renderButton(h, editorContext, {
+      icon: 'rte-cut',
+      tooltip: { text: 'Cut' },
+    });
+  }
+  /**
+   * Handles the cut button click event.
+   * Copies the current editor selection to the clipboard and then deletes it from the editor.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   */
+  async handleButtonClick(editorContext) {
+    const context = this.getExtensionContext(editorContext.host);
+    if (context && context.host) {
+      const { host } = context;
+      const copySelectedContentAction = new CopySelectedContentAction(context.getSelection(), context.getSelectedNodes());
+      host.value.apply(copySelectedContentAction);
+      const isCopySuccessful = await copySelectedContentAction.copyResult;
+      isCopySuccessful && host.value.apply(new DeleteSelectedContentAction(host, true, true));
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'rte-cut': cutIcon });
+})();

package/dist/collection/components/vega-rich-text-editor/extensions/find-replace/assets/find-and-replace.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M208 48c39.6 0 75.9 14.4 103.8 38.2L279 119c-6.9 6.9-8.9 17.2-5.2 26.2S286.3 160 296 160l96 0c13.3 0 24-10.7 24-24l0-96c0-9.7-5.8-18.5-14.8-22.2S381.9 16.2 375 23L345.8 52.2c-36.7-32.5-85-52.2-137.8-52.2-99.4 0-182.4 69.7-203.1 162.8-2.9 12.9 5.3 25.8 18.2 28.6 1.4 .3 2.7 .5 4.1 .5l2.3 0C40.1 191.5 49.4 184 51.8 173.2 67.7 101.6 131.6 48 208 48zM386 224c-10.4 .7-19.4 8.1-21.8 18.8-15.9 71.7-79.8 125.2-156.2 125.2-39.6 0-75.9-14.4-103.8-38.2L137 297c6.9-6.9 8.9-17.2 5.2-26.2S129.7 256 120 256l-96 0c-13.3 0-24 10.7-24 24l0 96c0 9.7 5.8 18.5 14.8 22.2S34.1 399.8 41 393l29.2-29.2c36.7 32.5 85 52.2 137.8 52.2 48.8 0 93.7-16.8 129.1-44.9L471 505c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L371.1 337.1c19.2-24.2 33.1-52.8 40-84 2.9-12.9-5.3-25.8-18.2-28.6-1.2-.3-2.4-.4-3.6-.5l-3.2 0z"/></svg>`,
+};

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

@@ -0,0 +1,18 @@
+import { VegaRTEExtension } from '../extension.abstract';
+import { FindReplaceToolbarButtonRenderer } from './slimmer/renderers/find-replace-toolbar-button-renderer';
+/**
+ * Find & Replace extension for Vega Rich Text Editor.
+ *
+ * Registers a toolbar button (magnifying-glass icon) that toggles the find-replace panel.
+ * Each editor host gets its own isolated FindReplaceState and toolbar renderer instance,
+ * created during the per-host prepareBeforeLoad lifecycle hook.
+ *
+ * Toolbar key: 'findReplace'
+ */
+export class VegaRTEFindReplaceExtension extends VegaRTEExtension {
+  /** @inheritDoc */
+  prepareBeforeLoad(host) {
+    this.registerToolbarButtonRenderer(VegaRTEFindReplaceExtension.TOOLBAR_BUTTON_KEY, new FindReplaceToolbarButtonRenderer(), host);
+  }
+}
+VegaRTEFindReplaceExtension.TOOLBAR_BUTTON_KEY = 'findReplace';

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

@@ -0,0 +1,105 @@
+import { FindReplaceControllerAbstract, } from './find-replace-controller.abstract';
+/**
+ * Concrete find controller.
+ *
+ * Provides search, navigation, highlight, and lifecycle capabilities.
+ * Shares state with {@link ReplaceController} via the injected
+ * {@link FindReplaceControllerContext}.
+ */
+export class FindController extends FindReplaceControllerAbstract {
+  constructor(context) {
+    super(context);
+  }
+  /**
+   * Runs a search with the current keyword on the host's content.
+   * Applies highlights and returns the result for panel display.
+   *
+   * @returns {FindReplaceResult} The match count and current position.
+   */
+  find() {
+    if (!this.context.hostRef) {
+      return { current: 0, total: 0 };
+    }
+    this.context.state.search(this.context.hostRef.value, this.context.keyword);
+    return this.applyAndGetResult();
+  }
+  /**
+   * Navigates to the next match.
+   *
+   * @returns {FindReplaceResult} Updated position.
+   */
+  next() {
+    this.context.state.next();
+    return this.applyAndGetResult();
+  }
+  /**
+   * Navigates to the previous match.
+   *
+   * @returns {FindReplaceResult} Updated position.
+   */
+  prev() {
+    this.context.state.prev();
+    return this.applyAndGetResult();
+  }
+  /**
+   * Clears all search state and removes highlight overlays.
+   */
+  clear() {
+    this.context.state.clear();
+    if (this.context.hostRef) {
+      this.context.highlightManager.clear();
+    }
+  }
+  /**
+   * Re-runs the search after content has changed (e.g. user typed while
+   * panel is open). Attempts to preserve the previous navigation position.
+   *
+   * @param {boolean} scrollToActive - Whether to scroll the active highlight into view.
+   * @returns {FindReplaceResult | null} Updated result, or null if no search is active.
+   */
+  refresh(scrollToActive = true) {
+    if (!this.context.keyword || !this.context.hostRef) {
+      return null;
+    }
+    const prevIndex = this.context.state.getCurrentIndex();
+    this.context.state.search(this.context.hostRef.value, this.context.keyword);
+    this.context.state.setCurrentIndex(prevIndex);
+    return this.applyAndGetResult(scrollToActive);
+  }
+  /**
+   * Toggles the match-case search option, clears previous results,
+   * and re-runs the search if a keyword is set.
+   *
+   * @param {boolean} enabled - Whether match-case should be enabled.
+   * @returns {FindReplaceResult} The updated search result.
+   */
+  setMatchCase(enabled) {
+    this.context.state.setMatchCase(enabled);
+    return this.updateFindResults();
+  }
+  /**
+   * Toggles the whole-words search option, clears previous results,
+   * and re-runs the search if a keyword is set.
+   *
+   * @param {boolean} enabled - Whether whole-words should be enabled.
+   * @returns {FindReplaceResult} The updated search result.
+   */
+  setWholeWords(enabled) {
+    this.context.state.setWholeWords(enabled);
+    return this.updateFindResults();
+  }
+  // ─── Private helpers ──────────────────────────────────────────────────────────
+  /**
+   * Clears previous results and re-runs the search with the current keyword and options.
+   *
+   * @returns {FindReplaceResult} The updated search result.
+   */
+  updateFindResults() {
+    this.context.state.clearResults();
+    if (this.context.keyword && this.context.hostRef) {
+      this.context.state.search(this.context.hostRef.value, this.context.keyword);
+      return this.applyAndGetResult();
+    }
+    return { current: 0, total: 0 };
+  }
+}

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

@@ -0,0 +1,68 @@
+import { FindReplaceState } from './helper/find-replace-state';
+import { FindReplaceHighlightManager } from './helper/find-replace-highlight-manager';
+/**
+ * Creates a new shared controller context with default (empty) state.
+ *
+ * @returns {FindReplaceControllerContext} A fresh context instance.
+ */
+export function createFindReplaceControllerContext() {
+  return {
+    state: new FindReplaceState(),
+    highlightManager: new FindReplaceHighlightManager(),
+    hostRef: null,
+    keyword: '',
+  };
+}
+/**
+ * Abstract base controller for the Find & Replace extension.
+ *
+ * Holds shared operations ({@link setHost}, {@link setKeyword}) and the
+ * common helper {@link applyAndGetResult}. Concrete implementations
+ * ({@link FindController}, {@link ReplaceController}) add the respective
+ * search/navigation and mutation capabilities.
+ */
+export class FindReplaceControllerAbstract {
+  constructor(context) {
+    this.context = context;
+  }
+  /**
+   * Updates the cached host reference. Called on each render cycle.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The type of the host rich text editor element.
+   * @param {HTMLVegaRichTextEditorElement} host - The RTE host element.
+   */
+  setHost(host) {
+    this.context.hostRef = host;
+  }
+  /**
+   * Updates the keyword. Clears previous match results and highlights,
+   * but preserves the flat-text cache so the next find() on the same
+   * document does not re-flatten every block.
+   *
+   * @param {string} keyword - The new search keyword.
+   * @returns {FindReplaceResult} Reset result (0/0).
+   */
+  setKeyword(keyword) {
+    this.context.keyword = keyword;
+    this.context.state.clearResults();
+    if (this.context.hostRef) {
+      this.context.highlightManager.clear();
+    }
+    return { current: 0, total: 0 };
+  }
+  // ─── Protected ────────────────────────────────────────────────────────────────
+  /**
+   * Applies highlight overlays and returns the current result for the panel.
+   *
+   * @param {boolean} scrollToActive - Whether to scroll the active highlight into view.
+   * @returns {FindReplaceResult} The current match position and total count.
+   */
+  applyAndGetResult(scrollToActive = true) {
+    const total = this.context.state.getTotal();
+    const current = total > 0 ? this.context.state.getCurrentIndex() + 1 : 0;
+    if (this.context.hostRef) {
+      this.context.highlightManager.apply(this.context.state.getMatches(), this.context.state.getCurrentIndex(), this.context.hostRef, scrollToActive);
+    }
+    return { current, total };
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/find-replace/slimmer/controllers/helper/block-search-strategies/block-search-strategy.abstract.js

@@ -0,0 +1,8 @@
+/**
+ * Defines how a specific type of RTEBlock contributes searchable leaf blocks.
+ *
+ * Implementations are registered on FindReplaceState in priority order.
+ * The first strategy whose `canHandle` returns true is used.
+ */
+export class BlockSearchStrategy {
+}

package/dist/collection/components/vega-rich-text-editor/extensions/find-replace/slimmer/controllers/helper/block-search-strategies/code-block-search-strategy.js

@@ -0,0 +1,19 @@
+import { RTECodeBlock } from '../../../../../../dto/blocks/code-block';
+import { BlockSearchStrategy } from './block-search-strategy.abstract';
+/**
+ * Handles RTECodeBlock — a searchable leaf block whose text lives in children[0].text.
+ */
+export class CodeBlockSearchStrategy extends BlockSearchStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(block) {
+    return block instanceof RTECodeBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  collect(block) {
+    return [block];
+  }
+}