@globalpayments/vega 2.90.0 → 2.92.0

package/dist/esm/{token-extension-6cb7dcb2.js → token-extension-32d1fa56.js}

@@ -1,30 +1,32 @@
 import { g as generateUUID } from './misc-9fdbcfbb.js';
 import { a as arrayToClassString, g as getDeviceType, D as DeviceType, f as findParent, r as rgbToHex } from './ui-d73f756a.js';
 import { L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
-import { I as InjectVegaTelemetrySlimmer, c as createPublicAPIRuntimeMetricsSlimmer } from './create-public-api-runtime-metrics-slimmer-da6615bf.js';
+import { I as InjectVegaTelemetrySlimmer, c as createPublicAPIRuntimeMetricsSlimmer } from './create-public-api-runtime-metrics-slimmer-48f85199.js';
 import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-7d2b54c3.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e24d36c5.js';
-import { i as internalVegaEventManager } from './internal-vega-event-manager-a9758b6e.js';
-import { V as VegaInternalTranslation } from './internal-translation-controller-653bd7e3.js';
-import { U as UpdateCursorPositionAction, V as VegaRTEContent, B as BlockToRTEBlockStrategyAbstract, E as ElementToDTOStrategy, h as htmlElementToAnnotationGenerator, I as InsertNewParagraphAction, R as RTEImageBlock, a as InsertChildrenBeforeStrategy, P as PasteContentStrategy, A as AnnotationGeneratorStrategyAbstract, b as RTEListItemBlock } from './content-state-d59b4560.js';
-import { R as RTEExtensionContextManager, a as VegaRTEExtensionRenderer, b as VegaRTEExtension } from './link-extension-be164793.js';
-import { M as ModifyContentAction, A as ActionHandleStrategyRegistry, R as RTETextNode, a as RTEBlock, b as RTETextBlock, c as RTEAnnotationStyle, d as ActionHandleStrategy, I as InsertChildrenAfterAction, e as AppendChildrenAction, f as RTENode, s as stateEntityRenderingRegistry, g as InsertChildrenBeforeAction, h as InternalAnnotationTypeEnum, i as ModifyContentActionType, B as BlockAnnotation, j as AnnotationAction, k as RemoveChildrenAction, C as CommonAnnotationTypeEnum, l as CustomAttributeAnnotation, m as RTEDTOClassManager, n as RTEFilterStylesStrategy, o as RTEDecoratorNode, S as SplitBlockWithNodeAction, U as UpdateTextAction, N as NodeAnnotationTypeEnum, p as RTECodeBlock, q as CustomStyleAnnotation, r as RTEFilterStylesStrategyRegistry } from './code-block-9a17d89b.js';
-import { i as isNonNullable } from './type-guard-fd1f4760.js';
-import { V as VegaInternalIconManager } from './internal-icon-manager-276f968f.js';
+import { i as internalVegaEventManager } from './internal-vega-event-manager-75e5e3bb.js';
+import { V as VegaInternalTranslation } from './internal-translation-controller-8e8a514a.js';
+import { I as InternalCalendarPeriodConverter } from './internal-calendar-period-factory-c3d70f3b.js';
+import { U as UpdateCursorPositionAction, V as VegaRTEContent, B as BlockToRTEBlockStrategyAbstract, E as ElementToDTOStrategy, h as htmlElementToAnnotationGenerator, I as InsertNewParagraphAction, R as RTEImageBlock, a as InsertChildrenBeforeStrategy, P as PasteContentStrategy, A as AnnotationGeneratorStrategyAbstract, b as RTEListItemBlock } from './content-state-909099f8.js';
+import { M as ModifyContentAction, A as ActionHandleStrategyRegistry, R as RTETextNode, a as RTEBlock, b as RTETextBlock, c as RTEAnnotationStyle, d as ActionHandleStrategy, I as InsertChildrenAfterAction, e as AppendChildrenAction, f as RTENode, s as stateEntityRenderingRegistry, g as InsertChildrenBeforeAction, h as InternalAnnotationTypeEnum, i as ModifyContentActionType, B as BlockAnnotation, j as AnnotationAction, k as RemoveChildrenAction, C as CommonAnnotationTypeEnum, l as CustomAttributeAnnotation, m as RTEDTOClassManager, n as RTEFilterStylesStrategy, o as RTEDecoratorNode, S as SplitBlockWithNodeAction, U as UpdateTextAction, p as RTECodeBlock, q as RTECodeBlockNode, N as NodeAnnotationTypeEnum, r as CustomStyleAnnotation, t as RTEFilterStylesStrategyRegistry } from './code-block-b71b2aa4.js';
+import { i as isNonNullable } from './type-guard-91087018.js';
+import { R as RTEExtensionContextManager, a as VegaRTEExtensionRenderer, b as VegaRTEExtension } from './link-extension-f1a3bea7.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-e7c57096.js';
 import { v as vegaNonceManager } from './vega-nonce-manager-497e5eb5.js';
 import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-ddff8662.js';
-import { V as VegaDropdownClick, a as VegaClick, b as VegaPopoverHide, c as VegaPopoverShow } from './vega-event-id-92848bf5.js';
-import { R as RTETableExtensionAnnotationTypeEnum, a as RTE_TABLE_HEAD_DEFAULT_BACKGROUND_COLOR, S as SettingEventHandler, T as TableSettingType, b as RTETableAnnotation, c as RTETableCellAnnotation, d as RTETableHeadCellBlock, e as RowOperationEventHandler, C as ColumnOperationEventHandler, M as MergeCellsOperationEventHandler, f as SplitCellOperationEventHandler, g as RTETableColorManager, h as RTETableBlock, i as generateTableBody, j as RTETableCellBlock, k as RTETableHeadBlock, l as RTETableBodyBlock, m as getParentBlockByType, n as RTETableHeadCellAnnotation, o as TableColumnStrategy, p as getAllTableRows, q as buildTableGrid, s as setSpanAttributes, r as findCellBlockById, t as getDefaultCellBlockTemplate, I as InsertTableColumnDirection, u as buildCellStartColumnMap, v as getTableColumnCount, w as getFirstNode, x as getCellSpan, y as createNewCell, z as MergeCellsOperationType, A as RTETableRowBlock, B as getActualColumnPosition, D as InsertTableRowDirection, E as RTE_TABLE_DEFAULT_COLORS, F as INSERT_TABLE_ROW_INTO_DIFFERENT_SECTION, G as INSERT_TABLE_ROW_INTO_SAME_SECTION, H as DELETE_TABLE_ROW, J as TOGGLE_HEADER_ROW, K as INSERT_TABLE_COLUMN, L as DELETE_TABLE_COLUMN, N as TOGGLE_HEADER_TABLE_COLUMN, O as ToggleHeaderTableColumnStrategy, P as SPLIT_TABLE_CELL, Q as REPLACE_TABLE_CELL, U as SPLIT_CELL_HORIZONTALLY, W as SPLIT_CELL_VERTICALLY, X as SELECT_TABLE_COLUMN, Y as MERGE_CELLS } from './split-cell-operation-8251d2a1.js';
+import { V as VegaDropdownClick, a as VegaClick, b as VegaPopoverHide, c as VegaPopoverShow, d as VegaChange } from './vega-event-id-d3017041.js';
+import { R as RTETableExtensionAnnotationTypeEnum, a as RTE_TABLE_HEAD_DEFAULT_BACKGROUND_COLOR, S as SettingEventHandler, T as TableSettingType, b as RTETableAnnotation, c as RTETableCellAnnotation, d as RTETableHeadCellBlock, e as RowOperationEventHandler, C as ColumnOperationEventHandler, M as MergeCellsOperationEventHandler, f as SplitCellOperationEventHandler, g as RTETableColorManager, h as RTETableBlock, i as generateTableBody, j as RTETableCellBlock, k as RTETableHeadBlock, l as RTETableBodyBlock, m as getParentBlockByType, n as RTETableHeadCellAnnotation, o as TableColumnStrategy, p as getAllTableRows, q as buildTableGrid, s as setSpanAttributes, r as findCellBlockById, t as getDefaultCellBlockTemplate, I as InsertTableColumnDirection, u as buildCellStartColumnMap, v as getTableColumnCount, w as getFirstNode, x as getCellSpan, y as createNewCell, z as MergeCellsOperationType, A as RTETableRowBlock, B as getActualColumnPosition, D as InsertTableRowDirection, E as RTE_TABLE_DEFAULT_COLORS, F as INSERT_TABLE_ROW_INTO_DIFFERENT_SECTION, G as INSERT_TABLE_ROW_INTO_SAME_SECTION, H as DELETE_TABLE_ROW, J as TOGGLE_HEADER_ROW, K as INSERT_TABLE_COLUMN, L as DELETE_TABLE_COLUMN, N as TOGGLE_HEADER_TABLE_COLUMN, O as ToggleHeaderTableColumnStrategy, P as SPLIT_TABLE_CELL, Q as REPLACE_TABLE_CELL, U as SPLIT_CELL_HORIZONTALLY, W as SPLIT_CELL_VERTICALLY, X as SELECT_TABLE_COLUMN, Y as MERGE_CELLS } from './split-cell-operation-93b4d775.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { V as VegaInternalRTEExtensionTableCellsSelectionAnchor, a as VegaInternalPopoverUpdateTarget, b as VegaInternalRTEExtensionTableCellSelectionChange } from './vega-internal-event-id-913e8be6.js';
+import { V as VegaInternalRTEExtensionTableCellsSelectionAnchor, a as VegaInternalPopoverUpdateTarget, b as VegaInternalRTEExtensionTableCellSelectionChange } from './vega-internal-event-id-827eb1ce.js';
 import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
-import { V as VegaInternalThemeManager } from './dark-mode-style-controller-ca5afd2d.js';
+import { V as VegaInternalThemeManager, a as VegaDarkModeStyleController } from './dark-mode-style-controller-ca5afd2d.js';
 import { t as tryGetDocument } from './try-get-document-bef0f526.js';
 import { p as parseToPixelString } from './pixel-f32c07ce.js';
 import { c as cleanObject } from './object-0c277f57.js';
 import { d as debounce } from './timer-9321173b.js';
-import { R as ReplaceSelectedTextAction } from './replace-selected-text-action-1abc5200.js';
+import { R as ReplaceSelectedTextAction } from './replace-selected-text-action-c0817b2b.js';
+import { c as copy } from './copy-54e45e2d.js';
 
 const VegaLoaderRuntimeMetricsPayloadDefinition = [
   {
@@ -80,7 +82,7 @@ var __decorate$6 = (undefined && undefined.__decorate) || function (decorators,
  */
 class VegaLoaderController {
   constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaLoaderController, ['load', 'close'], VegaLoaderRuntimeMetricsPayloadDefinition);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaLoaderController, ['load', 'close'], VegaLoaderRuntimeMetricsPayloadDefinition, 'VegaLoaderController');
   }
   /**
    * Create a loading indicator and append it to the container
@@ -286,7 +288,7 @@ class VegaNotifyController {
         target: () => this.container,
       },
     ]);
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaNotifyController, ['open', 'close', 'closeAll'], VegaNotifyRuntimeMetricsPayloadDefinition);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaNotifyController, ['open', 'close', 'closeAll'], VegaNotifyRuntimeMetricsPayloadDefinition, 'VegaNotifyController');
   }
   /**
    * It creates a new notification element, adds it to the container, and returns the notification's ID
@@ -604,7 +606,7 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
  */
 class VegaEventManager {
   constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaEventManager, ['setSemantics', 'getSemantics', 'getEnabledEventIdsByComponent'], VegaEventManagerRuntimeMetricsPayloadDefinition);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaEventManager, ['setSemantics', 'getSemantics', 'getEnabledEventIdsByComponent'], VegaEventManagerRuntimeMetricsPayloadDefinition, 'VegaEventManager');
   }
   /**
    * The function sets the semantics configuration for event management.
@@ -703,7 +705,7 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
  */
 class VegaZIndexManager {
   constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaZIndexManager, ['overrideZIndexBasicValues'], ZIndexManagerRuntimeMetricsPayloadDefinition);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaZIndexManager, ['overrideZIndexBasicValues'], ZIndexManagerRuntimeMetricsPayloadDefinition, 'VegaZIndexManager');
   }
   /**
    * The function "overrideZIndexBasicValues" calls a method in the "ZIndexManager" class to change the
@@ -755,7 +757,7 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
  */
 class WaitForVegaHandler {
   constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(WaitForVegaHandler, ['handle'], WaitForVegaPayloadDefinition);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(WaitForVegaHandler, ['handle'], WaitForVegaPayloadDefinition, 'WaitForVegaHandler');
   }
   /* istanbul ignore next */
   /**
@@ -863,7 +865,7 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
  */
 class VegaSkeletonLoaderController {
   constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaSkeletonLoaderController, ['load', 'unLoad', 'unLoadAll'], VegaSkeletonRuntimeMetricsPayloadDefinition);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaSkeletonLoaderController, ['load', 'unLoad', 'unLoadAll'], VegaSkeletonRuntimeMetricsPayloadDefinition, 'VegaSkeletonLoaderController');
     this.loaderMap = new Map();
   }
   /**
@@ -1012,7 +1014,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
  */
 class TranslationController {
   constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(TranslationController, ['init', 'changeLanguage'], VegaTranslationRuntimeMetricsPayloadDefinition);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(TranslationController, ['init', 'changeLanguage'], VegaTranslationRuntimeMetricsPayloadDefinition, 'TranslationController');
   }
   /**
    * Get current language
@@ -1047,6 +1049,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 = InternalCalendarPeriodConverter.createCalendarPeriod(dateString, viewMode, timezone, showWeekends);
+    return 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:
@@ -1747,7 +1768,7 @@ class VegaRTELanguageExtension extends 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.
@@ -1839,6 +1860,7 @@ class VegaRTELanguageExtension extends VegaRTEExtension {
     return result;
   }
 }
+VegaRTELanguageExtension.TOOLBAR_BUTTON_KEY = 'languages';
 
 const INSERT_FUNCTION_BLOCK = 'INSERT_FUNCTION_BLOCK';
 /**
@@ -2631,7 +2653,7 @@ class VegaRTEFunctionExtension extends 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
@@ -2655,6 +2677,7 @@ class VegaRTEFunctionExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandlerInterceptor(RTETextBlock.name, ModifyContentActionType.INSERT_NEW_PARAGRAPH, new PreventNewParagraphInterceptor());
   VegaRTEExtension.registerActionHandlerInterceptor(RTETextBlock.name, 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}";
 
@@ -7291,7 +7314,7 @@ class VegaRTETableExtension extends VegaRTEExtension {
     this.tableHeadCellRenderer = new RTETableHeadCellRenderer();
     this.tableSelection = new RTETableSelection();
     RTETableColorManager.setTableColors(colors);
-    this.registerToolbarButtonRenderer('table', this.toolbarButtonRenderer);
+    this.registerToolbarButtonRenderer(VegaRTETableExtension.TOOLBAR_BUTTON_KEY, this.toolbarButtonRenderer);
     this.registerBlockBasicStrategies(RTETableBlock.name);
     this.registerBlockBasicStrategies(RTETableHeadBlock.name);
     this.registerBlockBasicStrategies(RTETableHeadCellBlock.name);
@@ -7379,6 +7402,7 @@ class VegaRTETableExtension extends VegaRTEExtension {
   VegaRTEExtension.registerFilterStylesStrategy(RTETableCellBlock.dtoName, new TableCellFilterStylesStrategy());
   VegaRTEExtension.registerFilterStylesStrategy(RTETableHeadCellBlock.dtoName, new TableCellFilterStylesStrategy('th'));
 })();
+VegaRTETableExtension.TOOLBAR_BUTTON_KEY = 'table';
 
 /**
  * Horizontal line node — a decorator node representing `<hr>` in the editor.
@@ -7876,7 +7900,7 @@ class VegaRTEHorizontalLineExtension extends 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
@@ -7891,6 +7915,7 @@ class VegaRTEHorizontalLineExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandleStrategy(RTEImageBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
   VegaRTEExtension.registerActionHandleStrategy(RTEHorizontalLineBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
 })();
+VegaRTEHorizontalLineExtension.TOOLBAR_BUTTON_KEY = 'horizontalLine';
 
 const ARROW_CHARACTERS = [
   { character: '←', title: 'leftwards simple arrow' },
@@ -8388,7 +8413,7 @@ class VegaRTESpecialCharactersExtension extends 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.
@@ -8407,268 +8432,1462 @@ class VegaRTESpecialCharactersExtension extends 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 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 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 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 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 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 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 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 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: 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(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.parent instanceof RTECodeBlock;
-    })) {
-      return true;
-    }
-    const selectedBlocks = this.getSelectedBlocks(editorContext);
-    return selectedBlocks.some((block) => block instanceof RTECodeBlock ||
-      block instanceof RTEImageBlock ||
-      !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 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 RTEBlock) {
-      selectedBlocks.push(editorContext.rteRange.startNode.parent);
-    }
-    return selectedBlocks;
+  setMatchCase(enabled) {
+    this.matchCase = enabled;
   }
-}
-(() => {
-  VegaInternalIconManager.register({
-    'line-height': lineHeight,
-  });
-})();
-
-const LINE_HEIGHT_AWARE_BLOCK_NAMES = new Set([
-  RTETextBlock.name,
-  RTEListItemBlock.name,
-]);
-/** Handle line height annotation. */
-class LineHeightAnnotationHandler extends 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.
+    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();
+    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 = 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();
+    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 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();
+    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();
+    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 = debounce(this.onContentChanged, 100, this);
+    /* eslint-disable jsdoc/require-jsdoc */
+    this.panelActionHandlers = {
+      'find': () => this.findController.find(),
+      'prev': () => this.findController.prev(),
+      'next': () => this.findController.next(),
+      'replace': () => {
+        this.scrollOnNextRefresh = true;
+        return this.replaceController.replace();
+      },
+      'replace-all': () => {
+        this.scrollOnNextRefresh = true;
+        return this.replaceController.replaceAll();
+      },
+      'match-case': (data) => this.findController.setMatchCase(data),
+      'whole-words': (data) => this.findController.setWholeWords(data),
+      'close': () => this.closePanel(),
+    };
+  }
+  /* eslint-enable jsdoc/require-jsdoc */
+  /**
+   * @inheritDoc
+   */
+  render(h, editorContext) {
+    this.syncEditorState(editorContext);
+    return h('vega-popover', {
+      trigger: 'none',
+      alignment: 'start',
+      placement: 'bottom',
+      showArrow: false,
+      isScreenPosition: true,
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (ref) => {
+        if (ref) {
+          this.popoverRef = ref;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, () => {
+            this.isPopoverOpen = false;
+            this.findController.clear();
+            this.updatePanel({ current: 0, total: 0 });
+          });
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
+            this.isPopoverOpen = true;
+          });
+        }
+      },
+    }, [
+      h('div', { slot: 'popover' }, [
+        h('vega-rich-text-find-replace-panel', {
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          ref: (ref) => {
+            if (ref) {
+              this.panelRef = ref;
+              DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => {
+                if (e.detail.type === 'keyword') {
+                  this.updatePanel(this.findController.setKeyword(e.detail.value));
+                }
+                else if (e.detail.type === 'replace') {
+                  this.replaceController.setReplacement(e.detail.value);
+                }
+              });
+              DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (payload) => {
+                this.handlePanelAction(payload.detail);
+              });
+            }
+          },
+        }),
+      ]),
+      h('div', { slot: 'popover-content' }, this.renderButton(h, editorContext, {
+        icon: 'rte-find-replace',
+        tooltip: { text: VegaInternalTranslation.t('Find and replace') },
+      })),
+    ]);
+  }
+  /**
+   * Toggles the popover open/close when the toolbar button is clicked.
+   */
+  handleButtonClick() {
+    if (this.popoverRef) {
+      if (this.isPopoverOpen) {
+        void this.popoverRef.hide();
+      }
+      else {
+        void this.popoverRef.show();
+      }
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * Not used — this button has no dropdown.
+   */
+  handleDropdownClick() {
+    // no-op
+  }
+  // ─── Private helpers ──────────────────────────────────────────────────────────
+  /**
+   * Synchronizes internal state with the editor context on each render cycle.
+   * Registers the host reference and content-change listener, and hides the
+   * popover if the toolbar item becomes hidden while open.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context.
+   */
+  syncEditorState(editorContext) {
+    this.findController.setHost(editorContext.host);
+    const extensionContext = this.getExtensionContext(editorContext.host);
+    if (extensionContext) {
+      this.replaceController.setFlushValue(extensionContext.flushValue);
+    }
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(editorContext.host, VegaChange, this.debouncedRefresh);
+    if (this.isHidden(editorContext) && this.isPopoverOpen && this.popoverRef) {
+      void this.popoverRef.hide();
+    }
+  }
+  /**
+   * Dispatches panel button actions to the controller.
+   *
+   * @param {FindReplacePanelAction} panelAction - The structured action emitted by the panel.
+   */
+  handlePanelAction(panelAction) {
+    const { action, data } = panelAction;
+    const handler = this.panelActionHandlers[action];
+    if (handler) {
+      const result = handler(data);
+      if (result) {
+        this.updatePanel(result);
+      }
+    }
+  }
+  /**
+   * Pushes result to the panel counter display.
+   *
+   * @param {FindReplaceResult} result - The current/total values.
+   */
+  updatePanel(result) {
+    if (this.panelRef) {
+      void this.panelRef.updateResult(result.current, result.total);
+    }
+  }
+  /**
+   * Content changed — ask the controller to refresh search results.
+   */
+  onContentChanged() {
+    if (!this.isPopoverOpen) {
+      return;
+    }
+    const shouldScroll = this.scrollOnNextRefresh;
+    this.scrollOnNextRefresh = false;
+    const result = this.findController.refresh(shouldScroll);
+    if (result) {
+      this.updatePanel(result);
+    }
+  }
+  /**
+   * Closes the panel popover.
+   */
+  closePanel() {
+    if (this.popoverRef) {
+      void this.popoverRef.hide();
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'rte-find-replace': findReplaceIcon });
+})();
+
+/**
+ * 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 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 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 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 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: 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(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        node.parent instanceof RTECodeBlock;
+    })) {
+      return true;
+    }
+    const selectedBlocks = this.getSelectedBlocks(editorContext);
+    return selectedBlocks.some((block) => block instanceof RTECodeBlock ||
+      block instanceof RTEImageBlock ||
+      !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 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 RTEBlock) {
+      selectedBlocks.push(editorContext.rteRange.startNode.parent);
+    }
+    return selectedBlocks;
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'line-height': lineHeight,
+  });
+})();
+
+const LINE_HEIGHT_AWARE_BLOCK_NAMES = new Set([
+  RTETextBlock.name,
+  RTEListItemBlock.name,
+]);
+/** Handle line height annotation. */
+class LineHeightAnnotationHandler extends 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) {
@@ -8807,7 +10026,7 @@ class VegaRTELineHeightExtension extends VegaRTEExtension {
    */
   prepareBeforeLoad(host) {
     this.toolbarButtonRenderer = new RTELineHeightToolbarButtonRenderer(this.options);
-    this.registerToolbarButtonRenderer('lineHeight', this.toolbarButtonRenderer, host);
+    this.registerToolbarButtonRenderer(VegaRTELineHeightExtension.TOOLBAR_BUTTON_KEY, this.toolbarButtonRenderer, host);
   }
 }
 (() => {
@@ -8817,6 +10036,396 @@ class VegaRTELineHeightExtension extends 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 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() {
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'rte-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 ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action) {
+    const parentBlocks = this.getParentBlocks(action.selectedNodes);
+    const { html, text } = this.getSelectedContent(action.selection, parentBlocks);
+    if (text || html) {
+      action.copyResult = this.copyToClipboard(html, text);
+    }
+  }
+  /**
+   * Extracts the HTML and text content from the current selection.
+   *
+   * `Range.cloneContents()` returns only the nodes inside the selection, dropping the ancestor chain
+   * between the selection's common ancestor and its block. When the selection stays inside a single
+   * block, those dropped ancestors carry the styling, so the cloned fragment is re-wrapped with
+   * shallow clones of every ancestor from the common ancestor up to the block, preserving arbitrary
+   * inline nesting (e.g. `block > strong > em > span > text`).
+   *
+   * When the selection covers the whole block (its common ancestor sits above the block) or spans
+   * multiple blocks, each block is already kept by `cloneContents()`, so no re-wrapping is done.
+   *
+   * @param {Nullable<Selection>} selection - The current selection object.
+   * @param {RTEBlock[]} parentBlocks - The parent blocks of the selected nodes.
+   * @returns {RTESelectedContent} - The HTML and text content of the selected content.
+   */
+  getSelectedContent(selection, parentBlocks) {
+    const result = { html: '', text: '' };
+    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+      return result;
+    }
+    const range = selection.getRangeAt(0);
+    const doc = tryGetDocument();
+    if (!doc) {
+      return result;
+    }
+    // `cloneContents()` returns a `DocumentFragment` of real DOM nodes (already well-formed). Its
+    // `textContent` is the plain text; the fragment itself is wrapped/serialized into HTML below.
+    const fragment = range.cloneContents();
+    // A `DocumentFragment` has no `innerHTML`, so a temporary element is used to serialize it to HTML.
+    const container = doc.createElement('div');
+    const commonAncestor = range.commonAncestorContainer;
+    if (parentBlocks.length === 1) {
+      const block = this.getDOMByEntity(parentBlocks[0]);
+      // Only re-wrap when the block is dropped from the clone, i.e. the selection stays inside the
+      // block. When the whole block is selected, `commonAncestor` sits above it and the clone
+      // already keeps the block, so wrapping again would nest a duplicate block.
+      if (block && block.contains(commonAncestor)) {
+        // Wrap the cloned fragment with the dropped ancestor chain (from `commonAncestor` up to the
+        // block), preserving each element's styles, then serialize the rebuilt block to HTML.
+        const cloneNode = this.wrapWithAncestorChain(fragment, commonAncestor, block);
+        container.appendChild(cloneNode);
+        result.html = container.innerHTML;
+        result.text = container.textContent;
+        return result;
+      }
+    }
+    else if (parentBlocks.length > 1 &&
+      parentBlocks.every((block) => block.type === 'list-item')) {
+      const firstList = parentBlocks[0].parent;
+      if (firstList && parentBlocks.every((block) => block.parent === firstList)) {
+        const listElement = this.getDOMByEntity(firstList);
+        if (listElement && listElement.contains(commonAncestor)) {
+          const cloneListElement = listElement.cloneNode(false);
+          cloneListElement.appendChild(fragment);
+          container.appendChild(cloneListElement);
+          result.html = container.innerHTML;
+          result.text = container.textContent;
+          return result;
+        }
+      }
+    }
+    // The selection covers whole/multiple blocks: the clone already keeps them, so serialize as-is.
+    container.appendChild(fragment);
+    result.html = container.innerHTML;
+    result.text = container.textContent;
+    return result;
+  }
+  /**
+   * Wraps the cloned selection fragment with the ancestor chain that `cloneContents()` dropped,
+   * rebuilding every element from the selection's common ancestor up to the block while preserving
+   * each element's styles. Returns the cloned block that holds the rebuilt chain and content.
+   *
+   * When the common ancestor is the block itself, the fragment is appended directly under the cloned
+   * block, since no inline ancestor chain was dropped.
+   *
+   * @param {Node} content - The cloned selection fragment to place at the innermost level.
+   * @param {Node} commonAncestor - The selection's common ancestor container.
+   * @param {HTMLElement} block - The block element to stop cloning at.
+   * @returns {HTMLElement} - The cloned block wrapping the rebuilt ancestor chain and content.
+   */
+  wrapWithAncestorChain(content, commonAncestor, block) {
+    const blockClone = block.cloneNode(false);
+    // `cloneContents()` keeps everything inside `commonAncestor`, so the dropped chain runs from
+    // `commonAncestor` (its element, when the ancestor is a text node) up to the block.
+    const targetElement = commonAncestor.nodeType === Node.TEXT_NODE
+      ? commonAncestor.parentElement
+      : commonAncestor;
+    // The target is the block itself: the content sits directly under the block, no chain to rebuild.
+    if (targetElement === block) {
+      blockClone.appendChild(content);
+      return blockClone;
+    }
+    // Clone the target as the innermost container and place the content inside it.
+    const innermost = targetElement.cloneNode(false);
+    innermost.appendChild(content);
+    // Walk up from the target to the block, cloning each ancestor and nesting the chain bottom-up.
+    let shouldAppendNode = innermost;
+    let current = targetElement.parentElement;
+    while (current && current !== block) {
+      const parentClone = current.cloneNode(false);
+      parentClone.appendChild(shouldAppendNode);
+      shouldAppendNode = parentClone;
+      current = current.parentElement;
+    }
+    // Append the assembled ancestor chain to the cloned block.
+    blockClone.appendChild(shouldAppendNode);
+    // When the block is a list item inside an ordered list, wrap the cloned list item with a
+    // shallow clone of the ordered list to preserve the numbering.
+    if (blockClone.tagName === 'LI' &&
+      current &&
+      current.parentElement &&
+      current.parentElement.tagName === 'OL') {
+      const cloneList = current.parentElement.cloneNode(false);
+      cloneList.appendChild(blockClone);
+      return cloneList;
+    }
+    return blockClone;
+  }
+  /**
+   * Retrieves the parent blocks of the given selected nodes.
+   *
+   * @param {RTENode[]} selectedNodes - The nodes for which to find parent blocks.
+   * @returns {RTEBlock[]} An array of parent blocks.
+   */
+  getParentBlocks(selectedNodes) {
+    const parentBlocks = [];
+    for (const node of selectedNodes) {
+      const block = node.parent;
+      if (block && !parentBlocks.includes(block)) {
+        parentBlocks.push(block);
+      }
+    }
+    return parentBlocks;
+  }
+  /**
+   * Copies both HTML and plain text content to the clipboard using the Clipboard API.
+   *
+   * Browser compatibility for `navigator.clipboard.write()` with `ClipboardItem`:
+   * - Chrome 76+, Edge 79+, Safari 13.1+, Firefox 127+
+   *
+   * Since Firefox 86+ must be supported, fall back to `execCommand('copy')` when the
+   * Clipboard API is unavailable or fails (e.g. Firefox 86-126).
+   *
+   * @param {string} htmlContent - The HTML content to copy.
+   * @param {string} textContent - The plain text content to copy.
+   * @returns {Promise<boolean>} - A promise that resolves to true if the copy operation succeeded.
+   */
+  async copyToClipboard(htmlContent, textContent) {
+    let result = false;
+    try {
+      const htmlBlob = new Blob([htmlContent], { type: 'text/html' });
+      const textBlob = new Blob([textContent], { type: 'text/plain' });
+      const clipboardItem = new ClipboardItem({
+        'text/html': htmlBlob,
+        'text/plain': textBlob,
+      });
+      await navigator.clipboard.write([clipboardItem]);
+      result = true;
+    }
+    catch (_a) {
+      // Fallback for browsers without ClipboardItem support (e.g. Firefox 86-126)
+      result = this.copyWithExecCommand(htmlContent, textContent);
+      if (!result) {
+        LogUtility.warn('Failed to copy the selected content to the clipboard. Use keyboard shortcuts instead.');
+      }
+    }
+    return result;
+  }
+  /**
+   * Fallback copy method using `execCommand('copy')` for browsers that don't support the
+   * Clipboard API (e.g. Firefox 86-126).
+   *
+   * Instead of creating a temporary element and changing the selection (which would clear the
+   * editor's Shadow DOM selection and steal focus), this intercepts the native `copy` event that
+   * `execCommand('copy')` triggers and overrides its clipboard data. The user's original selection
+   * and focus stay untouched.
+   *
+   * @param {string} htmlContent - The HTML content to copy.
+   * @param {string} textContent - The plain text content to copy.
+   * @returns {boolean} - True if the copy command succeeded.
+   */
+  copyWithExecCommand(htmlContent, textContent) {
+    const doc = tryGetDocument();
+    if (!doc) {
+      return false;
+    }
+    /**
+     * Overrides the clipboard data of the native copy event triggered by `execCommand('copy')`.
+     *
+     * @param {ClipboardEvent} event - The native copy event.
+     */
+    const onCopy = (event) => {
+      if (event.clipboardData) {
+        event.clipboardData.setData('text/html', htmlContent);
+        event.clipboardData.setData('text/plain', textContent);
+      }
+      event.preventDefault();
+    };
+    doc.addEventListener('copy', onCopy);
+    try {
+      return doc.execCommand('copy');
+    }
+    finally {
+      doc.removeEventListener('copy', onCopy);
+    }
+  }
+}
+
+/**
+ * Vega Rich Text Editor Copy Extension.
+ * Adds a toolbar button that copies the currently selected editor content to the clipboard.
+ */
+class VegaRTECopyExtension extends VegaRTEExtension {
+  /** @inheritDoc */
+  prepareBeforeLoad(host) {
+    this.registerToolbarButtonRenderer(VegaRTECopyExtension.TOOLBAR_BUTTON_KEY, new RTECopyToolbarButtonRenderer(), host);
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register('COPY_SELECTED_CONTENT_ACTION', VegaRTEContent.name, new CopySelectedContentStrategy());
+})();
+// The unique key for the copy toolbar button, used for registration and retrieval.
+VegaRTECopyExtension.TOOLBAR_BUTTON_KEY = 'copy';
+
+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 ModifyContentAction {
+  constructor(host, mergeFlag, flushable = false) {
+    super();
+    this.type = 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));
+    }
+  }
+}
+(() => {
+  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 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
@@ -8936,7 +10545,7 @@ class VegaRTETokenExtension extends VegaRTEExtension {
   }
   /** @inheritDoc */
   prepareBeforeLoad(host) {
-    this.registerToolbarButtonRenderer('token', new RTETokenToolbarButtonRenderer(this.tokenList), host);
+    this.registerToolbarButtonRenderer(VegaRTETokenExtension.TOOLBAR_BUTTON_KEY, new RTETokenToolbarButtonRenderer(this.tokenList), host);
   }
 }
 (() => {
@@ -8944,5 +10553,6 @@ class VegaRTETokenExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, 'INSERT_TOKEN_NODE', insertTokenNodeStrategy);
   VegaRTEExtension.registerActionHandleStrategy(RTEListItemBlock.name, 'INSERT_TOKEN_NODE', insertTokenNodeStrategy);
 })();
+VegaRTETokenExtension.TOOLBAR_BUTTON_KEY = 'token';
 
-export { ActionHandlerInterceptor as A, InsertNodeToNearestRootAction as I, RTETokenToolbarButtonRenderer as R, VegaLoader as V, VegaNotify as a, VegaEventManager$1 as b, VegaZIndexManager$1 as c, VegaSkeletonLoader as d, VegaTranslation as e, VegaRTETokenExtension as f, VegaRTELanguageExtension as g, VegaRTEDefaultLineHeightOptions as h, VegaRTEFunctionExtension as i, VegaRTETableExtension as j, VegaRTEHorizontalLineExtension as k, VegaRTESpecialCharactersExtension as l, VegaRTESpecialCharactersEssentials as m, VegaRTESpecialCharactersLatin as n, VegaRTESpecialCharactersMathematical as o, VegaRTESpecialCharactersArrows as p, VegaRTESpecialCharactersCurrency as q, VegaRTESpecialCharactersText as r, VegaRTELineHeightExtension as s, VegaRTEToolbarButtonRenderer as t, RTETokenNode as u, RTETokenNodeRenderer as v, waitForVega as w, RTELanguageToolbarButtonRenderer as x };
+export { RTETokenNodeRenderer as A, RTELanguageToolbarButtonRenderer as B, ActionHandlerInterceptor as C, DeleteSelectedContentAction as D, InsertNodeToNearestRootAction as I, RTETokenToolbarButtonRenderer as R, VegaLoader as V, VegaNotify as a, VegaEventManager$1 as b, VegaZIndexManager$1 as c, VegaSkeletonLoader as d, VegaTranslation as e, VegaRTETokenExtension as f, VegaRTELanguageExtension as g, VegaRTEDefaultLineHeightOptions as h, VegaRTEFunctionExtension as i, VegaRTETableExtension as j, VegaRTEHorizontalLineExtension as k, VegaRTESpecialCharactersExtension as l, VegaRTEFindReplaceExtension as m, VegaRTESpecialCharactersEssentials as n, VegaRTESpecialCharactersLatin as o, VegaRTESpecialCharactersMathematical as p, VegaRTESpecialCharactersArrows as q, VegaRTESpecialCharactersCurrency as r, VegaRTESpecialCharactersText as s, VegaRTELineHeightExtension as t, VegaRTECopyExtension as u, VegaRTECutExtension as v, waitForVega as w, VegaCalendarPeriodFactory as x, VegaRTEToolbarButtonRenderer as y, RTETokenNode as z };