@globalpayments/vega 2.90.0 → 2.92.0

package/dist/cjs/{token-extension-2e3e1631.js → token-extension-3aec039f.js}

@@ -3,30 +3,32 @@
 const misc = require('./misc-3d30df91.js');
 const ui = require('./ui-c91c37a7.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-122350c3.js');
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-91b0cbfb.js');
 const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
-const internalVegaEventManager = require('./internal-vega-event-manager-6e49d1ca.js');
-const internalTranslationController = require('./internal-translation-controller-9785d4e8.js');
-const contentState = require('./content-state-e1c3efe6.js');
-const linkExtension = require('./link-extension-dafeeed0.js');
-const codeBlock = require('./code-block-89850671.js');
-const typeGuard = require('./type-guard-9917b11f.js');
-const internalIconManager = require('./internal-icon-manager-66c48800.js');
+const internalVegaEventManager = require('./internal-vega-event-manager-7196a847.js');
+const internalTranslationController = require('./internal-translation-controller-48ebfd0f.js');
+const internalCalendarPeriodFactory = require('./internal-calendar-period-factory-6187ec4c.js');
+const contentState = require('./content-state-96ec9114.js');
+const codeBlock = require('./code-block-6435d641.js');
+const typeGuard = require('./type-guard-7ab48d6c.js');
+const linkExtension = require('./link-extension-28d95849.js');
+const internalIconManager = require('./internal-icon-manager-40bcac72.js');
 const vegaNonceManager = require('./vega-nonce-manager-df69d3ed.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
-const vegaEventId = require('./vega-event-id-37c1716f.js');
-const splitCellOperation = require('./split-cell-operation-b41344bd.js');
+const vegaEventId = require('./vega-event-id-df22d80e.js');
+const splitCellOperation = require('./split-cell-operation-9e3ab88d.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const vegaInternalEventId = require('./vega-internal-event-id-e138d4d6.js');
+const vegaInternalEventId = require('./vega-internal-event-id-ecc5b87a.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
 const darkModeStyleController = require('./dark-mode-style-controller-32d4054a.js');
 const tryGetDocument = require('./try-get-document-c0ebd39a.js');
 const pixel = require('./pixel-98f2a10c.js');
 const object = require('./object-b53e9416.js');
 const timer = require('./timer-5f33058b.js');
-const replaceSelectedTextAction = require('./replace-selected-text-action-0f7b7c78.js');
+const replaceSelectedTextAction = require('./replace-selected-text-action-a31563ed.js');
+const copy = require('./copy-d021c780.js');
 
 const VegaLoaderRuntimeMetricsPayloadDefinition = [
   {
@@ -82,7 +84,7 @@ var __decorate$6 = (undefined && undefined.__decorate) || function (decorators,
  */
 class VegaLoaderController {
   constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaLoaderController, ['load', 'close'], VegaLoaderRuntimeMetricsPayloadDefinition);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaLoaderController, ['load', 'close'], VegaLoaderRuntimeMetricsPayloadDefinition, 'VegaLoaderController');
   }
   /**
    * Create a loading indicator and append it to the container
@@ -288,7 +290,7 @@ class VegaNotifyController {
         target: () => this.container,
       },
     ]);
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaNotifyController, ['open', 'close', 'closeAll'], VegaNotifyRuntimeMetricsPayloadDefinition);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaNotifyController, ['open', 'close', 'closeAll'], VegaNotifyRuntimeMetricsPayloadDefinition, 'VegaNotifyController');
   }
   /**
    * It creates a new notification element, adds it to the container, and returns the notification's ID
@@ -606,7 +608,7 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
  */
 class VegaEventManager {
   constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaEventManager, ['setSemantics', 'getSemantics', 'getEnabledEventIdsByComponent'], VegaEventManagerRuntimeMetricsPayloadDefinition);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaEventManager, ['setSemantics', 'getSemantics', 'getEnabledEventIdsByComponent'], VegaEventManagerRuntimeMetricsPayloadDefinition, 'VegaEventManager');
   }
   /**
    * The function sets the semantics configuration for event management.
@@ -705,7 +707,7 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
  */
 class VegaZIndexManager {
   constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaZIndexManager, ['overrideZIndexBasicValues'], ZIndexManagerRuntimeMetricsPayloadDefinition);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaZIndexManager, ['overrideZIndexBasicValues'], ZIndexManagerRuntimeMetricsPayloadDefinition, 'VegaZIndexManager');
   }
   /**
    * The function "overrideZIndexBasicValues" calls a method in the "ZIndexManager" class to change the
@@ -757,7 +759,7 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
  */
 class WaitForVegaHandler {
   constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(WaitForVegaHandler, ['handle'], WaitForVegaPayloadDefinition);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(WaitForVegaHandler, ['handle'], WaitForVegaPayloadDefinition, 'WaitForVegaHandler');
   }
   /* istanbul ignore next */
   /**
@@ -865,7 +867,7 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
  */
 class VegaSkeletonLoaderController {
   constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaSkeletonLoaderController, ['load', 'unLoad', 'unLoadAll'], VegaSkeletonRuntimeMetricsPayloadDefinition);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaSkeletonLoaderController, ['load', 'unLoad', 'unLoadAll'], VegaSkeletonRuntimeMetricsPayloadDefinition, 'VegaSkeletonLoaderController');
     this.loaderMap = new Map();
   }
   /**
@@ -1014,7 +1016,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
  */
 class TranslationController {
   constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(TranslationController, ['init', 'changeLanguage'], VegaTranslationRuntimeMetricsPayloadDefinition);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(TranslationController, ['init', 'changeLanguage'], VegaTranslationRuntimeMetricsPayloadDefinition, 'TranslationController');
   }
   /**
    * Get current language
@@ -1049,6 +1051,25 @@ __decorate([
 ], TranslationController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 const VegaTranslation = new TranslationController();
 
+/**
+ * Factory class for creating CalendarPeriod instances.
+ */
+class VegaCalendarPeriodFactory {
+  /**
+   * Create a VegaCalendarCurrentPeriodType based on the specified view mode and date.
+   *
+   * @param {string} dateString - The date string to base the period on, in 'MM/DD/YYYY' format
+   * @param {'month'|'week'|'day'} [viewMode='month'] - The view mode for the period, defaults to 'month'
+   * @param {string} [timezone] - Optional timezone for the period calculation
+   * @param {boolean} [showWeekends=true] - Whether to show weekends in the period, It's flag for calendar component, will effect the calendar view only.
+   * @returns {VegaCalendarPeriodType} The period information containing year, month, startDate and endDate
+   */
+  static fromDate(dateString, viewMode = 'month', timezone, showWeekends = true) {
+    const period = internalCalendarPeriodFactory.InternalCalendarPeriodConverter.createCalendarPeriod(dateString, viewMode, timezone, showWeekends);
+    return internalCalendarPeriodFactory.InternalCalendarPeriodConverter.toCalendarPeriodType(period);
+  }
+}
+
 /**
  * Base class for rendering extension toolbar button in the rich text editor.
  * The renderer provides common functionalities for rendering toolbar buttons, including:
@@ -1749,7 +1770,7 @@ class VegaRTELanguageExtension extends linkExtension.VegaRTEExtension {
    */
   prepareBeforeLoad(host) {
     this.languageToolbarButtonRenderer = new RTELanguageToolbarButtonRenderer(this.languageList, this.languageChangeCallBack, this.languageState.selectedLanguage);
-    this.registerToolbarButtonRenderer('languages', this.languageToolbarButtonRenderer, host);
+    this.registerToolbarButtonRenderer(VegaRTELanguageExtension.TOOLBAR_BUTTON_KEY, this.languageToolbarButtonRenderer, host);
   }
   /**
    * Initializes the language extension.
@@ -1841,6 +1862,7 @@ class VegaRTELanguageExtension extends linkExtension.VegaRTEExtension {
     return result;
   }
 }
+VegaRTELanguageExtension.TOOLBAR_BUTTON_KEY = 'languages';
 
 const INSERT_FUNCTION_BLOCK = 'INSERT_FUNCTION_BLOCK';
 /**
@@ -2633,7 +2655,7 @@ class VegaRTEFunctionExtension extends linkExtension.VegaRTEExtension {
   }
   /** @inheritDoc */
   prepareBeforeLoad(host) {
-    this.registerToolbarButtonRenderer('functions', new FunctionToolbarButtonRenderer(), host);
+    this.registerToolbarButtonRenderer(VegaRTEFunctionExtension.TOOLBAR_BUTTON_KEY, new FunctionToolbarButtonRenderer(), host);
   }
   /**
    * Remove the appen children strategies to prevent default insert new paragraph logic in function block
@@ -2657,6 +2679,7 @@ class VegaRTEFunctionExtension extends linkExtension.VegaRTEExtension {
   linkExtension.VegaRTEExtension.registerActionHandlerInterceptor(codeBlock.RTETextBlock.name, codeBlock.ModifyContentActionType.INSERT_NEW_PARAGRAPH, new PreventNewParagraphInterceptor());
   linkExtension.VegaRTEExtension.registerActionHandlerInterceptor(codeBlock.RTETextBlock.name, codeBlock.ModifyContentActionType.PASTE_CONTENT, new PreventPasteContentInterceptor());
 })();
+VegaRTEFunctionExtension.TOOLBAR_BUTTON_KEY = 'functions';
 
 const tableBlockStylesCss = ".v-rte--extension-table-container{display:table}table.v-rte--extension-table{border-collapse:collapse}table.v-rte--extension-table th,table.v-rte--extension-table td{border:1px solid #ddd;padding:12px;text-align:left;vertical-align:middle;min-width:55px;box-sizing:border-box;position:relative}table.v-rte--extension-table th{background-color:#f2f2f2}.rte-table-setting-popover,.rte-table-dynamic-popover{display:block}table.v-rte--extension-table .v-rte-table-cell-focused::after,table.v-rte--extension-table .v-rte-table-cell-selected::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background-color:rgba(158, 207, 250, 0.3)}table.v-rte--extension-table:has(.v-rte-table-cell-selected){caret-color:transparent}table.v-rte--extension-table:has(.v-rte-table-cell-selected) ::selection{background-color:transparent}table.v-rte--extension-table:has(.v-rte-table-cell-selected) ::-moz-selection{background-color:transparent}.v-rte--extension-table-caption{padding:8px;border:1px solid #ddd;border-bottom:none;background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));position:relative;display:table-caption;caption-side:top;min-height:22px;text-align:center;word-break:break-word;overflow-wrap:break-word}.v-rte--extension-table-caption.showPlaceholder::before{position:absolute;left:0;right:0;content:attr(data-placeholder);font-family:'Inter', sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1));text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
 
@@ -7293,7 +7316,7 @@ class VegaRTETableExtension extends linkExtension.VegaRTEExtension {
     this.tableHeadCellRenderer = new RTETableHeadCellRenderer();
     this.tableSelection = new RTETableSelection();
     splitCellOperation.RTETableColorManager.setTableColors(colors);
-    this.registerToolbarButtonRenderer('table', this.toolbarButtonRenderer);
+    this.registerToolbarButtonRenderer(VegaRTETableExtension.TOOLBAR_BUTTON_KEY, this.toolbarButtonRenderer);
     this.registerBlockBasicStrategies(splitCellOperation.RTETableBlock.name);
     this.registerBlockBasicStrategies(splitCellOperation.RTETableHeadBlock.name);
     this.registerBlockBasicStrategies(splitCellOperation.RTETableHeadCellBlock.name);
@@ -7381,6 +7404,7 @@ class VegaRTETableExtension extends linkExtension.VegaRTEExtension {
   linkExtension.VegaRTEExtension.registerFilterStylesStrategy(splitCellOperation.RTETableCellBlock.dtoName, new TableCellFilterStylesStrategy());
   linkExtension.VegaRTEExtension.registerFilterStylesStrategy(splitCellOperation.RTETableHeadCellBlock.dtoName, new TableCellFilterStylesStrategy('th'));
 })();
+VegaRTETableExtension.TOOLBAR_BUTTON_KEY = 'table';
 
 /**
  * Horizontal line node — a decorator node representing `<hr>` in the editor.
@@ -7878,7 +7902,7 @@ class VegaRTEHorizontalLineExtension extends linkExtension.VegaRTEExtension {
     // Register the renderer
     this.registerRenderer('horizontal-line', this.blockRenderer);
     // Register the toolbar button
-    this.registerToolbarButtonRenderer('horizontalLine', this.toolbarButtonRenderer);
+    this.registerToolbarButtonRenderer(VegaRTEHorizontalLineExtension.TOOLBAR_BUTTON_KEY, this.toolbarButtonRenderer);
     // Register HTML → DTO conversion strategy
     this.registerElementToBlockDTOClassStrategy(new HrToHorizontalLineBlockStrategy());
     // Register filter styles strategy for source edit round-trip
@@ -7893,6 +7917,7 @@ class VegaRTEHorizontalLineExtension extends linkExtension.VegaRTEExtension {
   linkExtension.VegaRTEExtension.registerActionHandleStrategy(contentState.RTEImageBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
   linkExtension.VegaRTEExtension.registerActionHandleStrategy(RTEHorizontalLineBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
 })();
+VegaRTEHorizontalLineExtension.TOOLBAR_BUTTON_KEY = 'horizontalLine';
 
 const ARROW_CHARACTERS = [
   { character: '←', title: 'leftwards simple arrow' },
@@ -8390,7 +8415,7 @@ class VegaRTESpecialCharactersExtension extends linkExtension.VegaRTEExtension {
   }
   /** @inheritDoc */
   prepareBeforeLoad(host) {
-    this.registerToolbarButtonRenderer('special-characters', new RTESpecialCharactersToolbarButtonRenderer(this.categories), host);
+    this.registerToolbarButtonRenderer(VegaRTESpecialCharactersExtension.TOOLBAR_BUTTON_KEY, new RTESpecialCharactersToolbarButtonRenderer(this.categories), host);
   }
   /**
    * Builds the final list of special character categories from the provided config.
@@ -8409,268 +8434,1462 @@ class VegaRTESpecialCharactersExtension extends linkExtension.VegaRTEExtension {
     return [...defaultCategories, ...config.categories];
   }
 }
+VegaRTESpecialCharactersExtension.TOOLBAR_BUTTON_KEY = 'special-characters';
+
+const findReplaceIcon = {
+  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>`,
+};
 
 /**
- * Default line height options used by the line-height extension when no
- * custom options are provided.
+ * 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.
  */
-const VegaRTEDefaultLineHeightOptions = [
-  { title: '0.5', value: '0.5' },
-  { title: '1', value: '1' },
-  { title: '1.5', value: '1.5' },
-  { title: '2', value: '2' },
-  { title: '2.5', value: '2.5' },
-];
+class BlockSearchStrategy {
+}
 
-var RTELineHeightExtensionAnnotationTypeEnum;
-(function (RTELineHeightExtensionAnnotationTypeEnum) {
-  RTELineHeightExtensionAnnotationTypeEnum["LINE_HEIGHT"] = "LINE_HEIGHT";
-})(RTELineHeightExtensionAnnotationTypeEnum || (RTELineHeightExtensionAnnotationTypeEnum = {}));
 /**
- * Annotation to set block line height.
+ * Handles RTECodeBlock — a searchable leaf block whose text lives in children[0].text.
  */
-class LineHeightAnnotation extends codeBlock.BlockAnnotation {
-  constructor(lineHeight) {
-    super();
-    this.type = RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT;
-    this.lineHeight = lineHeight;
-  }
+class CodeBlockSearchStrategy extends BlockSearchStrategy {
   /**
-   * Generate the map item for the annotation.
-   *
-   * @param {string} lineHeight - Line height value.
-   * @returns {[RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT, LineHeightAnnotation]} Map item for the annotation.
+   * @inheritDoc
    */
-  static from(lineHeight) {
-    return [RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT, new LineHeightAnnotation(lineHeight)];
+  canHandle(block) {
+    return block instanceof codeBlock.RTECodeBlock;
   }
   /**
-   * Get the default standalone styles for a given line height value.
-   *
-   * @param {string} lineHeight - The line height value.
-   * @returns {AnnotationStyle} The default standalone styles.
+   * @inheritDoc
    */
-  static getDefaultStyles(lineHeight) {
-    return { lineHeight };
+  collect(block) {
+    return [block];
   }
+}
+
+/**
+ * Handles RTEListItemBlock — a searchable leaf block that may also carry
+ * nested RTEListBlocks via its `nestList` property.
+ *
+ * Must be registered before TextBlockSearchStrategy because RTEListItemBlock
+ * extends RTETextBlock and would otherwise be matched by the parent class check.
+ */
+class ListItemBlockSearchStrategy extends BlockSearchStrategy {
   /**
-   * Generate the JSON item of the annotation.
-   *
-   * @returns {Record<string, unknown>} JSON representation of the annotation.
+   * @inheritDoc
    */
-  toJSON() {
-    return {
-      lineHeight: this.lineHeight,
-    };
+  canHandle(block) {
+    return block instanceof contentState.RTEListItemBlock;
   }
   /**
    * @inheritDoc
    */
-  renderClass() {
-    return null;
+  collect(block, recurse) {
+    const listItemBlock = block;
+    const result = [listItemBlock];
+    if (listItemBlock.nestList && listItemBlock.nestList.length > 0) {
+      for (const nestedList of listItemBlock.nestList) {
+        result.push(...recurse(nestedList.children));
+      }
+    }
+    return result;
   }
+}
+
+/**
+ * Handles plain RTETextBlock (paragraph, heading, etc.) — a searchable leaf
+ * block whose text lives in its RTETextNode children.
+ */
+class TextBlockSearchStrategy extends BlockSearchStrategy {
   /**
    * @inheritDoc
    */
-  clone() {
-    return new LineHeightAnnotation(this.lineHeight);
+  canHandle(block) {
+    return block instanceof codeBlock.RTETextBlock;
   }
   /**
    * @inheritDoc
    */
-  renderStyle() {
-    return LineHeightAnnotation.getDefaultStyles(this.lineHeight);
+  collect(block) {
+    return [block];
   }
 }
 
 /**
- * Action to update block line height annotation.
+ * Fallback strategy for generic container blocks whose concrete type is not
+ * known at compile time (RTEHtmlBlock, table blocks, extension-defined blocks, …).
+ *
+ * A block is treated as a container when its children array is non-empty and
+ * the first child is not an RTETextNode (i.e. children are blocks, not nodes).
  */
-class LineHeightAnnotationAction extends codeBlock.AnnotationAction {
-  constructor(lineHeight) {
-    super();
-    this.isFlushable = true;
-    this.lineHeight = lineHeight;
+class ContainerBlockSearchStrategy extends BlockSearchStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(block) {
+    return (block.children != null && block.children.length > 0 && !(block.children[0] instanceof codeBlock.RTETextNode));
   }
   /**
-   * Converts the action to an annotation.
-   *
-   * @returns {LineHeightAnnotation} The annotation.
+   * @inheritDoc
    */
-  toAnnotation() {
-    return new LineHeightAnnotation(this.lineHeight);
+  collect(block, recurse) {
+    return recurse(block.children);
   }
 }
 
 /**
- * Update the block line height 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.
  *
- * Registered for RTETextBlock and RTEListItemBlock, so the
- * target type is widened to the common RTEBlock base.
+ * 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
  */
-class BlockUpdateLineHeightStrategy extends codeBlock.ActionHandleStrategy {
+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(),
+    ];
+  }
   /**
-   * Updating the line height of a block requires cascading updates to the custom style.
+   * Runs a fresh search over the given content and replaces all previous results.
    *
-   * @param {LineHeightAnnotationAction} _action - The line height annotation action.
-   * @param {RTEBlock} target - The current block.
+   * 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.
    */
-  handleAction(_action, target) {
-    this.updateCustomStyleAnnotation(target, ['lineHeight']);
+  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 codeBlock.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;
   }
-}
-
-const lineHeight = {
-  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 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="M113.8 39.9c-4.6-5.1-11-7.9-17.8-7.9s-13.3 2.9-17.8 7.9l-72 80c-8.9 9.9-8.1 25 1.8 33.9s25 8.1 33.9-1.8L72 118.5V393.5L41.8 359.9c-8.9-9.9-24-10.7-33.9-1.8s-10.7 24-1.8 33.9l72 80c4.6 5.1 11 7.9 17.8 7.9s13.3-2.9 17.8-7.9l72-80c8.9-9.9 8.1-25-1.8-33.9s-25-8.1-33.9 1.8L120 393.5V118.5l30.2 33.5c8.9 9.9 24 10.7 33.9 1.8s10.7-24 1.8-33.9l-72-80zM248 72c-13.3 0-24 10.7-24 24s10.7 24 24 24H552c13.3 0 24-10.7 24-24s-10.7-24-24-24H248zm0 160c-13.3 0-24 10.7-24 24s10.7 24 24 24H552c13.3 0 24-10.7 24-24s-10.7-24-24-24H248zM224 416c0 13.3 10.7 24 24 24H552c13.3 0 24-10.7 24-24s-10.7-24-24-24H248c-13.3 0-24 10.7-24 24z"/></svg>`,
-};
-
-/**
- * Renderer for the line-height toolbar button in the Vega Rich Text Editor.
- */
-class RTELineHeightToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
-  constructor(options) {
-    super();
-    this.options = options;
+  /**
+   * 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;
   }
   /**
-   * @inheritDoc
+   * Moves to the previous match, wrapping around to the last.
    */
-  render(createElement, editorContext) {
-    const dropdownItems = this.options.map((item) => {
-      var _a;
-      return ({
-        key: item.value,
-        label: (_a = item.title) !== null && _a !== void 0 ? _a : item.value,
-      });
-    });
-    return this.renderDropdown(createElement, editorContext, {
-      selectType: 'single',
-      selectedSourceKey: this.getSelectedSourceValue(editorContext),
-    }, [
-      this.renderButton(createElement, editorContext, {
-        icon: 'line-height',
-        showArrowIcon: true,
-        tooltip: { text: internalTranslationController.VegaInternalTranslation.t('Line Height') },
-      }),
-      this.renderDropdownListTemplate(createElement, dropdownItems, editorContext),
-    ]);
+  prev() {
+    if (this.matches.length === 0) {
+      return;
+    }
+    this.currentIndex = (this.currentIndex - 1 + this.matches.length) % this.matches.length;
   }
   /**
-   * @inheritDoc
+   * Sets the current index directly. Clamps to valid range.
+   *
+   * @param {number} index - The desired index.
    */
-  isSelected() {
-    return false;
+  setCurrentIndex(index) {
+    if (this.matches.length === 0) {
+      this.currentIndex = -1;
+      return;
+    }
+    this.currentIndex = Math.max(0, Math.min(index, this.matches.length - 1));
   }
   /**
-   * @inheritDoc
+   * 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.
    */
-  isDisabled(editorContext) {
+  getCurrentMatch() {
     var _a;
-    if (editorContext.host.disabled) {
-      return true;
-    }
-    const extensionContext = this.getExtensionContext(editorContext.host);
-    const selectedNodes = (_a = extensionContext === null || extensionContext === void 0 ? void 0 : extensionContext.getSelectedNodes()) !== null && _a !== void 0 ? _a : [];
-    if (selectedNodes.some((node) => {
-      var _a;
-      return ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.parent instanceof codeBlock.RTECodeBlock;
-    })) {
-      return true;
-    }
-    const selectedBlocks = this.getSelectedBlocks(editorContext);
-    return selectedBlocks.some((block) => block instanceof codeBlock.RTECodeBlock ||
-      block instanceof contentState.RTEImageBlock ||
-      !codeBlock.ActionHandleStrategyRegistry.canHandle(LineHeightAnnotationAction.name, block));
+    return (_a = this.matches[this.currentIndex]) !== null && _a !== void 0 ? _a : null;
   }
   /**
-   * @inheritDoc
+   * Returns all matches from the last search.
+   *
+   * @returns {ReadonlyArray<FindMatch>} All matches from the last search.
    */
-  handleDropdownClick(itemValue, editorContext) {
-    const selectedLineHeight = itemValue;
-    const selectedBlocks = this.getSelectedBlocks(editorContext);
-    selectedBlocks.forEach((block) => {
-      block.apply(new LineHeightAnnotationAction(selectedLineHeight));
-    });
+  getMatches() {
+    return this.matches;
   }
   /**
-   * Handle direct toolbar button click.
+   * Returns the total number of matches from the last search.
+   *
+   * @returns {number} The total number of matches.
    */
-  handleButtonClick() {
-    // No direct click action; selection happens in dropdown options.
+  getTotal() {
+    return this.matches.length;
   }
   /**
-   * Get the selected line-height key for dropdown selection state.
+   * Returns the 0-based index of the current match, or -1 when there are no results.
    *
-   * @param {VegaRTEToolbarRenderContext} editorContext - Current toolbar context.
-   * @returns {string} Selected line-height key or empty string for mixed/none.
+   * @returns {number} The 0-based index, or -1 when there are no results.
    */
-  getSelectedSourceValue(editorContext) {
-    const selectedBlocks = this.getSelectedBlocks(editorContext);
-    if (selectedBlocks.length === 0) {
-      return '';
-    }
-    const firstAnnotation = selectedBlocks[0].getAnnotationByType(RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT);
-    const isSameLineHeight = selectedBlocks.every((block) => {
-      const annotation = block.getAnnotationByType(RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT);
-      return (annotation === null || annotation === void 0 ? void 0 : annotation.lineHeight) === (firstAnnotation === null || firstAnnotation === void 0 ? void 0 : firstAnnotation.lineHeight);
-    });
-    return isSameLineHeight && firstAnnotation ? firstAnnotation.lineHeight : '';
+  getCurrentIndex() {
+    return this.currentIndex;
   }
   /**
-   * Resolve selected blocks from selected nodes with range fallback.
+   * 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 {VegaRTEToolbarRenderContext} editorContext - Current toolbar context.
-   * @returns {RTEBlock[]} Selected blocks.
+   * @param {boolean} enabled - Whether to enable case-sensitive matching.
    */
-  getSelectedBlocks(editorContext) {
-    var _a, _b;
-    const extensionContext = this.getExtensionContext(editorContext.host);
-    const selectedNodes = (_a = extensionContext === null || extensionContext === void 0 ? void 0 : extensionContext.getSelectedNodes()) !== null && _a !== void 0 ? _a : [];
-    const selectedBlocks = [];
-    selectedNodes.forEach((node) => {
-      if (node.parent instanceof codeBlock.RTEBlock && !selectedBlocks.includes(node.parent)) {
-        selectedBlocks.push(node.parent);
-      }
-    });
-    if (selectedBlocks.length === 0 && ((_b = editorContext.rteRange.startNode) === null || _b === void 0 ? void 0 : _b.parent) instanceof codeBlock.RTEBlock) {
-      selectedBlocks.push(editorContext.rteRange.startNode.parent);
-    }
-    return selectedBlocks;
+  setMatchCase(enabled) {
+    this.matchCase = enabled;
   }
-}
-(() => {
-  internalIconManager.VegaInternalIconManager.register({
-    'line-height': lineHeight,
-  });
-})();
-
-const LINE_HEIGHT_AWARE_BLOCK_NAMES = new Set([
-  codeBlock.RTETextBlock.name,
-  contentState.RTEListItemBlock.name,
-]);
-/** Handle line height annotation. */
-class LineHeightAnnotationHandler extends contentState.AnnotationGeneratorStrategyAbstract {
-  constructor(options = VegaRTEDefaultLineHeightOptions) {
-    super();
-    this.allowedLineHeights = new Set(options.map((option) => option.value));
+  /**
+   * Sets the wholeWords search option.
+   *
+   * @param {boolean} enabled - Whether to enable whole-word matching.
+   */
+  setWholeWords(enabled) {
+    this.wholeWords = enabled;
   }
+  // ─── Private helpers ──────────────────────────────────────────────────────────
   /**
-   * Can be handled.
+   * 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 {RTEDtoClassPrototype} targetDto - Target DTO.
-   * @returns {boolean} Whether the target DTO supports line-height annotations.
+   * @param {VegaRTEContent} content - The incoming content reference.
    */
-  canHandle(targetDto) {
-    return LINE_HEIGHT_AWARE_BLOCK_NAMES.has(targetDto.name);
+  invalidateCacheIfNeeded(content) {
+    if (content !== this.cachedContent) {
+      this.flatCache = new WeakMap();
+      this.cachedContent = content;
+    }
   }
   /**
-   * Extract inline `line-height` as a semantic `lineHeight` annotation.
+   * Builds a RegExp from the keyword and search options.
    *
-   * @param {HTMLElement} [element] - Current element.
-   * @returns {VegaRTEBlockAnnotations} `{ lineHeight }` when present, otherwise `{}`.
+   * @param {string} keyword - The raw user input.
+   * @param {FindOptions} options - Search options.
+   * @returns {RegExp} The compiled regular expression.
    */
-  handle(element) {
+  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 };
+  }
+}
+
+// Light-mode values (used as CSS var() fall-backs).
+// Dark-mode values are registered via VegaDarkModeStyleController below.
+const HIGHLIGHT_BG_LIGHT = '255, 220, 0, 0.35';
+const HIGHLIGHT_ACTIVE_BG_LIGHT = '255, 150, 0, 0.5';
+// Dark-mode: brighter yellow/orange tones stand out on dark backgrounds.
+const HIGHLIGHT_BG_DARK = '255, 235, 0, 0.55';
+const HIGHLIGHT_ACTIVE_BG_DARK = '255, 190, 0, 0.7';
+// CSS var() expressions that auto-switch between light and dark.
+const HIGHLIGHT_BG = `rgba(var(--v-rte-find-highlight-bg, ${HIGHLIGHT_BG_LIGHT}))`;
+const HIGHLIGHT_ACTIVE_BG = `rgba(var(--v-rte-find-highlight-active-bg, ${HIGHLIGHT_ACTIVE_BG_LIGHT}))`;
+/**
+ * Manages highlights for the Find & Replace extension using a DOM overlay.
+ *
+ * Instead of modifying the RTE content tree (which causes re-renders, cursor
+ * jumping, and VegaChange events), this manager renders semi-transparent
+ * highlight rectangles in an absolutely-positioned overlay container.
+ *
+ * The overlay lives inside `.rich-text-editor-container` (the RTE's scroll
+ * container) so highlight divs scroll naturally with the text content.
+ * `pointer-events: none` ensures highlights don't interfere with user
+ * interaction (selection, typing, clicking).
+ *
+ * Position computation uses `Range.getClientRects()` on the actual text DOM
+ * nodes (resolved via `stateEntityRenderingRegistry.getDOMByEntity`).
+ */
+class FindReplaceHighlightManager {
+  constructor() {
+    this.overlayContainer = null;
+    // Register dark-mode overrides so `html.dark { --v-rte-find-highlight-*: ... }` is generated.
+    // CSS variables cascade into shadow DOM and update automatically when html.dark is toggled.
+    darkModeStyleController.VegaDarkModeStyleController.registerCustomDarkModeColor({
+      'rte-find-highlight-bg': HIGHLIGHT_BG_DARK,
+      'rte-find-highlight-active-bg': HIGHLIGHT_ACTIVE_BG_DARK,
+      'rte-find-highlight-blend': 'lighten',
+    });
+  }
+  /**
+   * Renders highlight overlays for all matches, with the active match
+   * visually distinct. Clears any existing highlights before applying.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The type of the host rich text editor element.
+   * @param {ReadonlyArray<FindMatch>} matches - All search results.
+   * @param {number} currentIndex - 0-based index of the active match (-1 = none).
+   * @param {HTMLVegaRichTextEditorElement} host - The RTE host element.
+   * @param {boolean} scrollToActive - Whether to scroll the active highlight into view.
+   */
+  apply(matches, currentIndex, host, scrollToActive = true) {
+    this.clear();
+    if (matches.length === 0) {
+      return;
+    }
+    const overlay = this.getOrCreateOverlay(host);
+    if (overlay) {
+      const overlayRect = overlay.getBoundingClientRect();
+      let activeHighlightDiv = null;
+      matches.forEach((match, matchIndex) => {
+        const isActive = matchIndex === currentIndex;
+        const bg = isActive ? HIGHLIGHT_ACTIVE_BG : HIGHLIGHT_BG;
+        match.nodes.forEach((nodePosition) => {
+          const highlightDiv = this.createHighlightRectangles(overlay, overlayRect, nodePosition, bg);
+          if (isActive && !activeHighlightDiv && highlightDiv) {
+            activeHighlightDiv = highlightDiv;
+          }
+        });
+      });
+      if (scrollToActive && activeHighlightDiv) {
+        activeHighlightDiv.scrollIntoView({ block: 'center', inline: 'nearest' });
+      }
+    }
+  }
+  /**
+   * Removes all highlight overlay elements.
+   * Safe to call multiple times or when no highlights are active.
+   */
+  clear() {
+    if (this.overlayContainer) {
+      this.overlayContainer.innerHTML = '';
+    }
+  }
+  // ─── Private helpers ──────────────────────────────────────────────────────────
+  /**
+   * Gets the existing overlay container or creates one inside the RTE's
+   * scroll container (`.rich-text-editor-container`).
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The type of the host rich text editor element.
+   * @param {HTMLVegaRichTextEditorElement} host - The RTE host element.
+   * @returns {HTMLDivElement | null} The overlay container, or null in SSR environments.
+   */
+  getOrCreateOverlay(host) {
+    if (this.overlayContainer && this.overlayContainer.isConnected) {
+      return this.overlayContainer;
+    }
+    const safeDocument = tryGetDocument.tryGetDocument();
+    if (safeDocument) {
+      const scrollContainer = host.shadowRoot.querySelector('.rich-text-editor-container');
+      if (scrollContainer) {
+        // The overlay is appended as the last child (paints above content).
+        // Blend mode is controlled via CSS variable --v-rte-find-highlight-blend:
+        //   - Light (default): multiply (yellow darkens white bg, text readable)
+        //   - Dark (via html.dark override): lighten (yellow visible on dark bg,
+        //     white text unaffected since lighten(255, x) = 255)
+        // CSS vars cascade into shadow DOM and react to theme switches instantly.
+        const overlay = safeDocument.createElement('div');
+        overlay.style.position = 'absolute';
+        overlay.style.top = '0';
+        overlay.style.left = '0';
+        overlay.style.width = '100%';
+        overlay.style.height = '100%';
+        overlay.style.pointerEvents = 'none';
+        overlay.style.overflow = 'visible';
+        overlay.style.setProperty('mix-blend-mode', 'var(--v-rte-find-highlight-blend, multiply)');
+        scrollContainer.appendChild(overlay);
+        this.overlayContainer = overlay;
+        return overlay;
+      }
+    }
+    return null;
+  }
+  /**
+   * Creates absolutely-positioned highlight rectangles for a single node
+   * position within a match.
+   *
+   * Uses client rectangle extraction from `Range` to handle multi-line matches (where a
+   * single text range may produce multiple rectangles due to line wrapping).
+   *
+   * @param {HTMLDivElement} overlay - The overlay container.
+   * @param {DOMRect} overlayRect - The overlay's bounding client rect (for coordinate conversion).
+   * @param {NodePosition} nodePosition - The node and character offsets for this segment.
+   * @param {string} bg - The background color to apply.
+   * @returns {Nullable<HTMLDivElement>} The first created highlight div for this node segment.
+   */
+  createHighlightRectangles(overlay, overlayRect, nodePosition, bg) {
+    const domElement = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(nodePosition.node);
+    if (!domElement) {
+      return null;
+    }
+    const range = this.buildRange(domElement, nodePosition);
+    if (!range) {
+      return null;
+    }
+    // eslint-disable-next-line spellcheck/spell-checker -- DOM API method name is fixed by platform.
+    const clientRectList = range.getClientRects();
+    const safeDocument = tryGetDocument.tryGetDocument();
+    let firstHighlightDiv = null;
+    if (safeDocument) {
+      for (let i = 0; i < clientRectList.length; i++) {
+        const rect = clientRectList[i];
+        if (rect.width === 0 || rect.height === 0) {
+          continue;
+        }
+        const div = safeDocument.createElement('div');
+        div.style.position = 'absolute';
+        div.style.top = `${rect.top - overlayRect.top}px`;
+        div.style.left = `${rect.left - overlayRect.left}px`;
+        div.style.width = `${rect.width}px`;
+        div.style.height = `${rect.height}px`;
+        div.style.backgroundColor = bg;
+        div.style.pointerEvents = 'none';
+        div.style.borderRadius = '2px';
+        overlay.appendChild(div);
+        if (!firstHighlightDiv) {
+          firstHighlightDiv = div;
+        }
+      }
+    }
+    return firstHighlightDiv;
+  }
+  /**
+   * Builds a DOM Range for the given node position.
+   *
+   * For standard text nodes (RTETextNode rendered as `<span>`), the first
+   * child is a Text node and offsets apply directly.
+   *
+   * For code block nodes (`<vega-code-block>` with shadow DOM), we traverse
+   * the shadow root's `<code>` element child spans to locate the correct
+   * text positions by accumulated character offset.
+   *
+   * @param {HTMLElement} domElement - The registered DOM element for the node.
+   * @param {NodePosition} nodePosition - The character offsets within the node.
+   * @returns {Nullable<Range>} A Range if successfully built, or null on failure.
+   */
+  buildRange(domElement, nodePosition) {
+    // <vega-code-block> wraps syntax-highlighted tokens inside a shadow root <code> element.
+    if (nodePosition.node instanceof codeBlock.RTECodeBlockNode) {
+      return this.buildCodeBlockRange(domElement, nodePosition);
+    }
+    // Standard text node: <span> with a direct Text child.
+    const textNode = domElement.firstChild;
+    if (!textNode) {
+      return null;
+    }
+    const safeDocument = tryGetDocument.tryGetDocument();
+    if (safeDocument) {
+      const range = safeDocument.createRange();
+      try {
+        range.setStart(textNode, nodePosition.startOffset);
+        range.setEnd(textNode, nodePosition.endOffset);
+        return range;
+      }
+      catch (_a) {
+        return null;
+      }
+    }
+    return null;
+  }
+  /**
+   * Builds a Range inside a `<vega-code-block>` shadow DOM element.
+   *
+   * `<vega-code-block>` renders its content inside a shadow root with a `<code>`
+   * element containing multiple child `<span>` nodes (one per syntax token).
+   * This method walks all Text nodes within that `<code>` element, accumulating
+   * character length until the positions corresponding to startOffset / endOffset
+   * are found.
+   *
+   * @param {HTMLElement} domElement - The `<vega-code-block>` host element.
+   * @param {NodePosition} nodePosition - The character offsets within the node.
+   * @returns {Range | null} A Range if successfully built, or null on failure.
+   */
+  buildCodeBlockRange(domElement, nodePosition) {
+    const shadowRoot = domElement.shadowRoot;
+    const codeEl = shadowRoot.querySelector('code');
+    if (!codeEl) {
+      return null;
+    }
+    const safeDocument = tryGetDocument.tryGetDocument();
+    if (safeDocument) {
+      const walker = safeDocument.createTreeWalker(codeEl, NodeFilter.SHOW_TEXT);
+      let accumulated = 0;
+      let startNode = null;
+      let startLocal = 0;
+      let endNode = null;
+      let endLocal = 0;
+      let current = walker.nextNode();
+      while (current) {
+        const len = current.textContent.length;
+        if (!startNode && accumulated + len > nodePosition.startOffset) {
+          startNode = current;
+          startLocal = nodePosition.startOffset - accumulated;
+        }
+        if (accumulated + len >= nodePosition.endOffset) {
+          endNode = current;
+          endLocal = nodePosition.endOffset - accumulated;
+          break;
+        }
+        accumulated += len;
+        current = walker.nextNode();
+      }
+      if (startNode && endNode) {
+        const range = safeDocument.createRange();
+        try {
+          range.setStart(startNode, startLocal);
+          range.setEnd(endNode, endLocal);
+          return range;
+        }
+        catch (_a) {
+          return null;
+        }
+      }
+    }
+    return null;
+  }
+}
+
+/**
+ * Creates a new shared controller context with default (empty) state.
+ *
+ * @returns {FindReplaceControllerContext} A fresh context instance.
+ */
+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.
+ */
+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 };
+  }
+}
+
+/**
+ * Concrete find controller.
+ *
+ * Provides search, navigation, highlight, and lifecycle capabilities.
+ * Shares state with {@link ReplaceController} via the injected
+ * {@link FindReplaceControllerContext}.
+ */
+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 };
+  }
+}
+
+/**
+ * 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.
+ */
+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);
+    });
+  }
+}
+
+/**
+ * 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.
+ */
+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 = timer.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.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaPopoverHide, () => {
+            this.isPopoverOpen = false;
+            this.findController.clear();
+            this.updatePanel({ current: 0, total: 0 });
+          });
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.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.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.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.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, (payload) => {
+                this.handlePanelAction(payload.detail);
+              });
+            }
+          },
+        }),
+      ]),
+      h('div', { slot: 'popover-content' }, this.renderButton(h, editorContext, {
+        icon: 'rte-find-replace',
+        tooltip: { text: internalTranslationController.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.DomNodeSubjectObserverFactory.addUniqueObserverToNode(editorContext.host, vegaEventId.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();
+    }
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ 'rte-find-replace': findReplaceIcon });
+})();
+
+/**
+ * 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'
+ */
+class VegaRTEFindReplaceExtension extends linkExtension.VegaRTEExtension {
+  /** @inheritDoc */
+  prepareBeforeLoad(host) {
+    this.registerToolbarButtonRenderer(VegaRTEFindReplaceExtension.TOOLBAR_BUTTON_KEY, new FindReplaceToolbarButtonRenderer(), host);
+  }
+}
+VegaRTEFindReplaceExtension.TOOLBAR_BUTTON_KEY = 'findReplace';
+
+/**
+ * Default line height options used by the line-height extension when no
+ * custom options are provided.
+ */
+const VegaRTEDefaultLineHeightOptions = [
+  { title: '0.5', value: '0.5' },
+  { title: '1', value: '1' },
+  { title: '1.5', value: '1.5' },
+  { title: '2', value: '2' },
+  { title: '2.5', value: '2.5' },
+];
+
+var RTELineHeightExtensionAnnotationTypeEnum;
+(function (RTELineHeightExtensionAnnotationTypeEnum) {
+  RTELineHeightExtensionAnnotationTypeEnum["LINE_HEIGHT"] = "LINE_HEIGHT";
+})(RTELineHeightExtensionAnnotationTypeEnum || (RTELineHeightExtensionAnnotationTypeEnum = {}));
+/**
+ * Annotation to set block line height.
+ */
+class LineHeightAnnotation extends codeBlock.BlockAnnotation {
+  constructor(lineHeight) {
+    super();
+    this.type = RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT;
+    this.lineHeight = lineHeight;
+  }
+  /**
+   * Generate the map item for the annotation.
+   *
+   * @param {string} lineHeight - Line height value.
+   * @returns {[RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT, LineHeightAnnotation]} Map item for the annotation.
+   */
+  static from(lineHeight) {
+    return [RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT, new LineHeightAnnotation(lineHeight)];
+  }
+  /**
+   * Get the default standalone styles for a given line height value.
+   *
+   * @param {string} lineHeight - The line height value.
+   * @returns {AnnotationStyle} The default standalone styles.
+   */
+  static getDefaultStyles(lineHeight) {
+    return { lineHeight };
+  }
+  /**
+   * Generate the JSON item of the annotation.
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation.
+   */
+  toJSON() {
+    return {
+      lineHeight: this.lineHeight,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new LineHeightAnnotation(this.lineHeight);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
+    return LineHeightAnnotation.getDefaultStyles(this.lineHeight);
+  }
+}
+
+/**
+ * Action to update block line height annotation.
+ */
+class LineHeightAnnotationAction extends codeBlock.AnnotationAction {
+  constructor(lineHeight) {
+    super();
+    this.isFlushable = true;
+    this.lineHeight = lineHeight;
+  }
+  /**
+   * Converts the action to an annotation.
+   *
+   * @returns {LineHeightAnnotation} The annotation.
+   */
+  toAnnotation() {
+    return new LineHeightAnnotation(this.lineHeight);
+  }
+}
+
+/**
+ * Update the block line height strategy.
+ *
+ * Registered for RTETextBlock and RTEListItemBlock, so the
+ * target type is widened to the common RTEBlock base.
+ */
+class BlockUpdateLineHeightStrategy extends codeBlock.ActionHandleStrategy {
+  /**
+   * Updating the line height of a block requires cascading updates to the custom style.
+   *
+   * @param {LineHeightAnnotationAction} _action - The line height annotation action.
+   * @param {RTEBlock} target - The current block.
+   */
+  handleAction(_action, target) {
+    this.updateCustomStyleAnnotation(target, ['lineHeight']);
+  }
+}
+
+const lineHeight = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 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="M113.8 39.9c-4.6-5.1-11-7.9-17.8-7.9s-13.3 2.9-17.8 7.9l-72 80c-8.9 9.9-8.1 25 1.8 33.9s25 8.1 33.9-1.8L72 118.5V393.5L41.8 359.9c-8.9-9.9-24-10.7-33.9-1.8s-10.7 24-1.8 33.9l72 80c4.6 5.1 11 7.9 17.8 7.9s13.3-2.9 17.8-7.9l72-80c8.9-9.9 8.1-25-1.8-33.9s-25-8.1-33.9 1.8L120 393.5V118.5l30.2 33.5c8.9 9.9 24 10.7 33.9 1.8s10.7-24 1.8-33.9l-72-80zM248 72c-13.3 0-24 10.7-24 24s10.7 24 24 24H552c13.3 0 24-10.7 24-24s-10.7-24-24-24H248zm0 160c-13.3 0-24 10.7-24 24s10.7 24 24 24H552c13.3 0 24-10.7 24-24s-10.7-24-24-24H248zM224 416c0 13.3 10.7 24 24 24H552c13.3 0 24-10.7 24-24s-10.7-24-24-24H248c-13.3 0-24 10.7-24 24z"/></svg>`,
+};
+
+/**
+ * Renderer for the line-height toolbar button in the Vega Rich Text Editor.
+ */
+class RTELineHeightToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  constructor(options) {
+    super();
+    this.options = options;
+  }
+  /**
+   * @inheritDoc
+   */
+  render(createElement, editorContext) {
+    const dropdownItems = this.options.map((item) => {
+      var _a;
+      return ({
+        key: item.value,
+        label: (_a = item.title) !== null && _a !== void 0 ? _a : item.value,
+      });
+    });
+    return this.renderDropdown(createElement, editorContext, {
+      selectType: 'single',
+      selectedSourceKey: this.getSelectedSourceValue(editorContext),
+    }, [
+      this.renderButton(createElement, editorContext, {
+        icon: 'line-height',
+        showArrowIcon: true,
+        tooltip: { text: internalTranslationController.VegaInternalTranslation.t('Line Height') },
+      }),
+      this.renderDropdownListTemplate(createElement, dropdownItems, editorContext),
+    ]);
+  }
+  /**
+   * @inheritDoc
+   */
+  isSelected() {
+    return false;
+  }
+  /**
+   * @inheritDoc
+   */
+  isDisabled(editorContext) {
+    var _a;
+    if (editorContext.host.disabled) {
+      return true;
+    }
+    const extensionContext = this.getExtensionContext(editorContext.host);
+    const selectedNodes = (_a = extensionContext === null || extensionContext === void 0 ? void 0 : extensionContext.getSelectedNodes()) !== null && _a !== void 0 ? _a : [];
+    if (selectedNodes.some((node) => {
+      var _a;
+      return ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        node.parent instanceof codeBlock.RTECodeBlock;
+    })) {
+      return true;
+    }
+    const selectedBlocks = this.getSelectedBlocks(editorContext);
+    return selectedBlocks.some((block) => block instanceof codeBlock.RTECodeBlock ||
+      block instanceof contentState.RTEImageBlock ||
+      !codeBlock.ActionHandleStrategyRegistry.canHandle(LineHeightAnnotationAction.name, block));
+  }
+  /**
+   * @inheritDoc
+   */
+  handleDropdownClick(itemValue, editorContext) {
+    const selectedLineHeight = itemValue;
+    const selectedBlocks = this.getSelectedBlocks(editorContext);
+    selectedBlocks.forEach((block) => {
+      block.apply(new LineHeightAnnotationAction(selectedLineHeight));
+    });
+  }
+  /**
+   * Handle direct toolbar button click.
+   */
+  handleButtonClick() {
+    // No direct click action; selection happens in dropdown options.
+  }
+  /**
+   * Get the selected line-height key for dropdown selection state.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - Current toolbar context.
+   * @returns {string} Selected line-height key or empty string for mixed/none.
+   */
+  getSelectedSourceValue(editorContext) {
+    const selectedBlocks = this.getSelectedBlocks(editorContext);
+    if (selectedBlocks.length === 0) {
+      return '';
+    }
+    const firstAnnotation = selectedBlocks[0].getAnnotationByType(RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT);
+    const isSameLineHeight = selectedBlocks.every((block) => {
+      const annotation = block.getAnnotationByType(RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT);
+      return (annotation === null || annotation === void 0 ? void 0 : annotation.lineHeight) === (firstAnnotation === null || firstAnnotation === void 0 ? void 0 : firstAnnotation.lineHeight);
+    });
+    return isSameLineHeight && firstAnnotation ? firstAnnotation.lineHeight : '';
+  }
+  /**
+   * Resolve selected blocks from selected nodes with range fallback.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - Current toolbar context.
+   * @returns {RTEBlock[]} Selected blocks.
+   */
+  getSelectedBlocks(editorContext) {
+    var _a, _b;
+    const extensionContext = this.getExtensionContext(editorContext.host);
+    const selectedNodes = (_a = extensionContext === null || extensionContext === void 0 ? void 0 : extensionContext.getSelectedNodes()) !== null && _a !== void 0 ? _a : [];
+    const selectedBlocks = [];
+    selectedNodes.forEach((node) => {
+      if (node.parent instanceof codeBlock.RTEBlock && !selectedBlocks.includes(node.parent)) {
+        selectedBlocks.push(node.parent);
+      }
+    });
+    if (selectedBlocks.length === 0 && ((_b = editorContext.rteRange.startNode) === null || _b === void 0 ? void 0 : _b.parent) instanceof codeBlock.RTEBlock) {
+      selectedBlocks.push(editorContext.rteRange.startNode.parent);
+    }
+    return selectedBlocks;
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'line-height': lineHeight,
+  });
+})();
+
+const LINE_HEIGHT_AWARE_BLOCK_NAMES = new Set([
+  codeBlock.RTETextBlock.name,
+  contentState.RTEListItemBlock.name,
+]);
+/** Handle line height annotation. */
+class LineHeightAnnotationHandler extends contentState.AnnotationGeneratorStrategyAbstract {
+  constructor(options = VegaRTEDefaultLineHeightOptions) {
+    super();
+    this.allowedLineHeights = new Set(options.map((option) => option.value));
+  }
+  /**
+   * Can be handled.
+   *
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @returns {boolean} Whether the target DTO supports line-height annotations.
+   */
+  canHandle(targetDto) {
+    return LINE_HEIGHT_AWARE_BLOCK_NAMES.has(targetDto.name);
+  }
+  /**
+   * Extract inline `line-height` as a semantic `lineHeight` annotation.
+   *
+   * @param {HTMLElement} [element] - Current element.
+   * @returns {VegaRTEBlockAnnotations} `{ lineHeight }` when present, otherwise `{}`.
+   */
+  handle(element) {
     var _a, _b;
     const lineHeight = (_b = (_a = element === null || element === void 0 ? void 0 : element.style.lineHeight) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
     if (!lineHeight) {
@@ -8809,7 +10028,7 @@ class VegaRTELineHeightExtension extends linkExtension.VegaRTEExtension {
    */
   prepareBeforeLoad(host) {
     this.toolbarButtonRenderer = new RTELineHeightToolbarButtonRenderer(this.options);
-    this.registerToolbarButtonRenderer('lineHeight', this.toolbarButtonRenderer, host);
+    this.registerToolbarButtonRenderer(VegaRTELineHeightExtension.TOOLBAR_BUTTON_KEY, this.toolbarButtonRenderer, host);
   }
 }
 (() => {
@@ -8819,6 +10038,396 @@ class VegaRTELineHeightExtension extends linkExtension.VegaRTEExtension {
     attachLineHeightFromJson(BlockClass);
   });
 })();
+VegaRTELineHeightExtension.TOOLBAR_BUTTON_KEY = 'lineHeight';
+
+/**
+ * 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));
+ */
+class CopySelectedContentAction extends codeBlock.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;
+  }
+}
+
+/**
+ * Toolbar button renderer for the Copy extension.
+ * Renders a toolbar button that copies the currently selected editor text to the clipboard.
+ */
+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() {
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ 'rte-copy': copy.copy });
+})();
+
+/**
+ * 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.
+ */
+class CopySelectedContentStrategy extends codeBlock.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.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) {
+        globalSlimmerRegistry.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.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);
+    }
+  }
+}
+
+/**
+ * Vega Rich Text Editor Copy Extension.
+ * Adds a toolbar button that copies the currently selected editor content to the clipboard.
+ */
+class VegaRTECopyExtension extends linkExtension.VegaRTEExtension {
+  /** @inheritDoc */
+  prepareBeforeLoad(host) {
+    this.registerToolbarButtonRenderer(VegaRTECopyExtension.TOOLBAR_BUTTON_KEY, new RTECopyToolbarButtonRenderer(), host);
+  }
+}
+(() => {
+  codeBlock.ActionHandleStrategyRegistry.register('COPY_SELECTED_CONTENT_ACTION', contentState.VegaRTEContent.name, new CopySelectedContentStrategy());
+})();
+// The unique key for the copy toolbar button, used for registration and retrieval.
+VegaRTECopyExtension.TOOLBAR_BUTTON_KEY = 'copy';
+
+const cutIcon = {
+  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="M48 112a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zm176 0C224 50.1 173.9 0 112 0S0 50.1 0 112 50.1 224 112 224c24 0 46.3-7.6 64.5-20.4l57.3 52.4-57.3 52.4C158.3 295.6 136 288 112 288 50.1 288 0 338.1 0 400s50.1 112 112 112 112-50.1 112-112c0-20.5-5.5-39.6-15.1-56.2L504.2 73.7c9.8-8.9 10.5-24.1 1.5-33.9s-24.1-10.5-33.9-1.5l-202.4 185.2-60.5-55.3c9.6-16.5 15.1-35.7 15.1-56.2zM471.8 473.7c9.8 8.9 25 8.3 33.9-1.5s8.3-25-1.5-33.9L338.6 286.8 302.7 319 471.8 473.7zM48 400a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/></svg>`,
+};
+
+/**
+ * Delete the currently selected content from the editor.
+ *
+ * @example currentVegaRTEContent.apply(new DeleteSelectedContentAction(host, mergeFlag))
+ */
+class DeleteSelectedContentAction extends codeBlock.ModifyContentAction {
+  constructor(host, mergeFlag, flushable = false) {
+    super();
+    this.type = codeBlock.ModifyContentActionType.DELETE_SELECTED_CONTENT;
+    // mergeFlag indicates whether the action should merge adjacent text nodes after deletion.
+    this.mergeFlag = false;
+    this.host = host;
+    this.mergeFlag = mergeFlag;
+    this.isFlushable = flushable;
+  }
+}
+
+/**
+ * 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.
+ */
+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));
+    }
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ 'rte-cut': cutIcon });
+})();
+
+/**
+ * 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.
+ */
+class VegaRTECutExtension extends linkExtension.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';
 
 /**
  * Insert a new children to the nearest position of the parent container
@@ -8938,7 +10547,7 @@ class VegaRTETokenExtension extends linkExtension.VegaRTEExtension {
   }
   /** @inheritDoc */
   prepareBeforeLoad(host) {
-    this.registerToolbarButtonRenderer('token', new RTETokenToolbarButtonRenderer(this.tokenList), host);
+    this.registerToolbarButtonRenderer(VegaRTETokenExtension.TOOLBAR_BUTTON_KEY, new RTETokenToolbarButtonRenderer(this.tokenList), host);
   }
 }
 (() => {
@@ -8946,17 +10555,23 @@ class VegaRTETokenExtension extends linkExtension.VegaRTEExtension {
   linkExtension.VegaRTEExtension.registerActionHandleStrategy(codeBlock.RTETextBlock.name, 'INSERT_TOKEN_NODE', insertTokenNodeStrategy);
   linkExtension.VegaRTEExtension.registerActionHandleStrategy(contentState.RTEListItemBlock.name, 'INSERT_TOKEN_NODE', insertTokenNodeStrategy);
 })();
+VegaRTETokenExtension.TOOLBAR_BUTTON_KEY = 'token';
 
 exports.ActionHandlerInterceptor = ActionHandlerInterceptor;
+exports.DeleteSelectedContentAction = DeleteSelectedContentAction;
 exports.InsertNodeToNearestRootAction = InsertNodeToNearestRootAction;
 exports.RTELanguageToolbarButtonRenderer = RTELanguageToolbarButtonRenderer;
 exports.RTETokenNode = RTETokenNode;
 exports.RTETokenNodeRenderer = RTETokenNodeRenderer;
 exports.RTETokenToolbarButtonRenderer = RTETokenToolbarButtonRenderer;
+exports.VegaCalendarPeriodFactory = VegaCalendarPeriodFactory;
 exports.VegaEventManager = VegaEventManager$1;
 exports.VegaLoader = VegaLoader;
 exports.VegaNotify = VegaNotify;
+exports.VegaRTECopyExtension = VegaRTECopyExtension;
+exports.VegaRTECutExtension = VegaRTECutExtension;
 exports.VegaRTEDefaultLineHeightOptions = VegaRTEDefaultLineHeightOptions;
+exports.VegaRTEFindReplaceExtension = VegaRTEFindReplaceExtension;
 exports.VegaRTEFunctionExtension = VegaRTEFunctionExtension;
 exports.VegaRTEHorizontalLineExtension = VegaRTEHorizontalLineExtension;
 exports.VegaRTELanguageExtension = VegaRTELanguageExtension;