@globalpayments/vega 2.87.0 → 2.89.0

package/dist/cjs/{token-extension-927062b9.js → token-extension-dfee303a.js}

@@ -1,32 +1,33 @@
 'use strict';
 
 const misc = require('./misc-3d30df91.js');
-const ui = require('./ui-3727d685.js');
+const ui = require('./ui-c91c37a7.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-122350c3.js');
 const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
-const internalVegaEventManager = require('./internal-vega-event-manager-063c17cb.js');
-const internalTranslationController = require('./internal-translation-controller-f0da24b2.js');
-const contentState = require('./content-state-a69d99b4.js');
-const codeBlock = require('./code-block-15411c14.js');
-const typeGuard = require('./type-guard-c1195e50.js');
+const internalVegaEventManager = require('./internal-vega-event-manager-6e49d1ca.js');
+const internalTranslationController = require('./internal-translation-controller-5582d789.js');
+const contentState = require('./content-state-76b81780.js');
+const codeBlock = require('./code-block-7c49d175.js');
+const typeGuard = require('./type-guard-474dec0d.js');
 const dtoRendererManager = require('./dto-renderer-manager-7eb5c5ce.js');
 const baseRenderer = require('./base-renderer-0a3b62b7.js');
 const internalIconManager = require('./internal-icon-manager-66c48800.js');
 const vegaNonceManager = require('./vega-nonce-manager-df69d3ed.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
-const vegaEventId = require('./vega-event-id-f95480b7.js');
-const splitCellOperation = require('./split-cell-operation-39b19943.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
+const vegaEventId = require('./vega-event-id-37c1716f.js');
+const splitCellOperation = require('./split-cell-operation-b1fe91b5.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const vegaInternalEventId = require('./vega-internal-event-id-e138d4d6.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
-const darkModeStyleController = require('./dark-mode-style-controller-bd765afb.js');
+const darkModeStyleController = require('./dark-mode-style-controller-32d4054a.js');
 const tryGetDocument = require('./try-get-document-c0ebd39a.js');
 const pixel = require('./pixel-98f2a10c.js');
 const object = require('./object-b53e9416.js');
 const timer = require('./timer-5f33058b.js');
+const replaceSelectedTextAction = require('./replace-selected-text-action-ef079fed.js');
 
 const VegaLoaderRuntimeMetricsPayloadDefinition = [
   {
@@ -1063,9 +1064,15 @@ class RTEExtensionContextManager {
    *
    * @param {RTEExtensionContext} context - The extension context to store.
    */
-  setExtensionContext(context) {
+  updateExtensionContext(context) {
     if (context && context.host) {
-      this.extensionContextMap.set(context.host, context);
+      let newContext = context;
+      const existingContext = this.extensionContextMap.get(context.host);
+      // If there is already an existing context for the host, merge the new context with the existing one to avoid overwriting any properties that are not included in the new context.
+      if (existingContext) {
+        newContext = Object.assign(Object.assign({}, existingContext), context);
+      }
+      this.extensionContextMap.set(context.host, newContext);
     }
   }
   /**
@@ -1192,6 +1199,8 @@ class VegaRTEExtensionRenderer extends baseRenderer.VegaRTEBaseRenderer {
 }
 VegaRTEExtensionRenderer.REGISTER_REF_FLAG = '__registeredRef__';
 
+const patchedBlockClasses = new WeakSet();
+const annotationHandlersByClass = new WeakMap();
 /**
  * Abstract class for Vega Rich Text Editor extensions.
  */
@@ -1232,6 +1241,53 @@ class VegaRTEExtension {
   static registerFilterStylesStrategy(blockOrNodeClassName, strategy) {
     codeBlock.RTEFilterStylesStrategyRegistry.register(blockOrNodeClassName, strategy);
   }
+  /**
+   * Attach a custom JSON annotation handler to a block DTO class's static `from` flow.
+   *
+   * This is a reusable extension point: any extension can register a handler for an
+   * annotation key and transform the value into block annotations during JSON parsing.
+   *
+   * Safe to call multiple times per class/key/handler — duplicate registrations are no-ops.
+   *
+   * @param {BlockClassWithFrom} BlockClass - Block DTO class to patch.
+   * @param {string} annotationKey - JSON annotation key to read from `block.annotations`.
+   * @param {AnnotationFromJsonHandler} handler - Handler that applies annotation logic to the instance.
+   */
+  static attachAnnotationFromJson(BlockClass, annotationKey, handler) {
+    var _a, _b;
+    const handlerMap = (_a = annotationHandlersByClass.get(BlockClass)) !== null && _a !== void 0 ? _a : new Map();
+    const handlers = (_b = handlerMap.get(annotationKey)) !== null && _b !== void 0 ? _b : new Set();
+    handlers.add(handler);
+    handlerMap.set(annotationKey, handlers);
+    annotationHandlersByClass.set(BlockClass, handlerMap);
+    if (patchedBlockClasses.has(BlockClass)) {
+      return;
+    }
+    patchedBlockClasses.add(BlockClass);
+    const originalFrom = BlockClass.from.bind(BlockClass);
+    /**
+     * Wrapped static `from` that preserves original behavior and then applies
+     * all registered annotation-from-json handlers for this BlockClass.
+     *
+     * @param {VegaRTEBlockBase} block - Raw JSON block payload.
+     * @param {VegaRTETransformOptions} [options] - Optional transform options.
+     * @returns {RTEBlock} The transformed block instance.
+     */
+    BlockClass.from = function patchedFrom(block, options) {
+      const instance = originalFrom(block, options);
+      const annotations = block.annotations;
+      const currentHandlerMap = annotationHandlersByClass.get(BlockClass);
+      if (annotations && currentHandlerMap) {
+        currentHandlerMap.forEach((registeredHandlers, key) => {
+          const value = annotations[key];
+          registeredHandlers.forEach((registeredHandler) => {
+            registeredHandler(instance, value, block, options);
+          });
+        });
+      }
+      return instance;
+    };
+  }
   /**
    * Lifecycle hook called by the rich text editor before the first render
    * (during `componentWillLoad`).  Override this method to perform per-host
@@ -1253,7 +1309,7 @@ class VegaRTEExtension {
    */
   initialExtensionAfterLoad(context) {
     this.extensionContext = context;
-    RTEExtensionContextManager$1.setExtensionContext(context);
+    RTEExtensionContextManager$1.updateExtensionContext(context);
   }
   /**
    * Callback method invoked when the extension is destroyed.
@@ -1393,6 +1449,11 @@ class VegaRTEExtension {
  * Override the methods to customize the rendering and behavior of the button.
  */
 class VegaRTEToolbarButtonRenderer {
+  constructor() {
+    this.dropdownEl = null;
+    this.itemsContainerEl = null;
+    this.buttonEl = null;
+  }
   /**
    * Checks if the button should be hidden.
    *
@@ -1425,6 +1486,7 @@ class VegaRTEToolbarButtonRenderer {
     return h('vega-dropdown', Object.assign({ trigger: 'click', searchable: false, maxWidth: '200', itemDisplayRule: 'ellipsis', 
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (el) => {
+        this.dropdownEl = el;
         domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, vegaEventId.VegaDropdownClick, (input) => {
           const payload = input;
           this.handleDropdownClick(payload.detail, editorContext);
@@ -1442,6 +1504,12 @@ class VegaRTEToolbarButtonRenderer {
     return h('div', {
       slot: 'items',
       onMouseDown: this.preventDefault,
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      onKeyDown: (e) => this.handleItemsKeyDown(e),
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (el) => {
+        this.itemsContainerEl = el;
+      },
       class: 'rte-dropdown-list',
     }, [
       h('style', { nonce: vegaNonceManager.vegaNonceManager.nonce }, '.rte-dropdown-list vega-dropdown-group vega-dropdown-group { padding-left: 4px }'),
@@ -1505,9 +1573,12 @@ class VegaRTEToolbarButtonRenderer {
       selected: this.isSelected(editorContext),
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (el) => {
+        this.buttonEl = el;
         domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, vegaEventId.VegaClick, () => this.handleButtonClick(editorContext));
       },
       onMouseDown: this.preventDefault,
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      onKeyDown: (e) => this.handleButtonKeyDown(e),
     }, [
       this.renderButtonLabel(h, editorContext, label),
       showArrowIcon
@@ -1520,7 +1591,7 @@ class VegaRTEToolbarButtonRenderer {
         : null,
     ].filter(typeGuard.isNonNullable));
     if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.text) {
-      return h('vega-tooltip', { text: tooltip.text, placement: ['bottom', 'top'] }, [button]);
+      return h('vega-tooltip', { text: editorContext.translation.t(tooltip.text), placement: ['bottom', 'top'] }, [button]);
     }
     return button;
   }
@@ -1590,6 +1661,95 @@ class VegaRTEToolbarButtonRenderer {
     }
     return null;
   }
+  /**
+   * Handles keyboard events on the toolbar button to support dropdown keyboard accessibility.
+   * - Enter / Space: Toggles the dropdown open/closed.
+   * - ArrowDown / ArrowUp: Opens the dropdown and focuses the first/last item.
+   *
+   * @param {KeyboardEvent} e The keyboard event.
+   */
+  handleButtonKeyDown(e) {
+    if (!this.dropdownEl) {
+      return;
+    }
+    if (e.code === 'Enter' || e.code === 'Space') {
+      e.preventDefault();
+      e.stopPropagation();
+      this.dropdownEl.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    }
+    else if (e.code === 'ArrowDown' || e.code === 'ArrowUp') {
+      e.preventDefault();
+      e.stopPropagation();
+      void this.dropdownEl.show().then(() => {
+        this.focusDropdownItem(e.code === 'ArrowDown' ? 'first' : 'last');
+      });
+    }
+  }
+  /**
+   * Handles keyboard navigation within the dropdown items container.
+   * - ArrowDown/ArrowUp: Moves focus to the next/previous non-disabled item.
+   * - Escape: Closes the dropdown and returns focus to the toolbar button.
+   *
+   * @param {KeyboardEvent} e The keyboard event.
+   */
+  handleItemsKeyDown(e) {
+    var _a, _b, _c;
+    if (e.code === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      if (this.dropdownEl) {
+        void this.dropdownEl.hide();
+      }
+      (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
+      return;
+    }
+    if (e.code !== 'ArrowDown' && e.code !== 'ArrowUp') {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    const items = this.getDropdownItems();
+    if (items.length === 0) {
+      return;
+    }
+    const currentIndex = items.findIndex((item) => { var _a, _b; return ((_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('li')) === ((_b = item.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement); });
+    const direction = e.code === 'ArrowDown' ? 1 : -1;
+    const startIndex = currentIndex === -1 ? (e.code === 'ArrowDown' ? 0 : items.length - 1) : currentIndex + direction;
+    for (let offset = 0; offset < items.length; offset++) {
+      const index = (startIndex + offset * direction + items.length) % items.length;
+      if (!items[index].disabled) {
+        (_c = (_b = items[index].shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('li')) === null || _c === void 0 ? void 0 : _c.focus();
+        return;
+      }
+    }
+  }
+  /**
+   * Focuses the first or last non-disabled dropdown item.
+   *
+   * @param {'first' | 'last'} position Whether to focus the first or last item.
+   */
+  focusDropdownItem(position) {
+    var _a, _b;
+    const items = this.getDropdownItems();
+    const orderedItems = position === 'first' ? items : [...items].reverse();
+    for (const item of orderedItems) {
+      if (!item.disabled) {
+        (_b = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('li')) === null || _b === void 0 ? void 0 : _b.focus();
+        return;
+      }
+    }
+  }
+  /**
+   * Gets all dropdown items from the items container.
+   *
+   * @returns {HTMLVegaDropdownItemElement[]} Array of dropdown item elements.
+   */
+  getDropdownItems() {
+    if (!this.itemsContainerEl) {
+      return [];
+    }
+    return Array.from(this.itemsContainerEl.querySelectorAll('vega-dropdown-item'));
+  }
 }
 
 /**
@@ -1698,6 +1858,7 @@ class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
 class RTETokenNode extends codeBlock.RTETextNode {
   constructor(id, token, text, parentBlock, annotations) {
     super(id, text, parentBlock, annotations);
+    this.dtoName = RTETokenNode.dtoName;
     this.type = 'token';
     this.token = token;
     this.text = text;
@@ -1747,6 +1908,7 @@ class RTETokenNode extends codeBlock.RTETextNode {
     return `<span class="token" contenteditable="false" template-token-key="${this.token}" token-key="${this.token}"${super.generateAttributeString()}>${this.text}</span>`;
   }
 }
+RTETokenNode.dtoName = 'RTETokenNode';
 
 /**
  * Token node renderer for the rich text editor.
@@ -2072,6 +2234,7 @@ class InsertFunctionBlockAction extends codeBlock.ModifyContentAction {
 class RTEFunctionBlock extends codeBlock.RTEBlock {
   constructor(id) {
     super(id);
+    this.dtoName = RTEFunctionBlock.dtoName;
     this.type = 'function-block';
     this.children = [];
   }
@@ -2159,6 +2322,7 @@ class RTEFunctionBlock extends codeBlock.RTEBlock {
     return styles ? ` style="${styles}"` : '';
   }
 }
+RTEFunctionBlock.dtoName = 'RTEFunctionBlock';
 
 /**
  * Strategy to handle the insertion of a function block into the rich text editor.
@@ -2260,6 +2424,7 @@ class InsertFunctionBlockStrategy extends codeBlock.ActionHandleStrategy {
 class RTELogicControlNode extends codeBlock.RTENode {
   constructor(id, text, parent) {
     super(id);
+    this.dtoName = RTELogicControlNode.dtoName;
     this.type = 'logic-control-node';
     this.text = '';
     this.text = text;
@@ -2321,6 +2486,7 @@ class RTELogicControlNode extends codeBlock.RTENode {
     return false;
   }
 }
+RTELogicControlNode.dtoName = 'RTELogicControlNode';
 
 /**
  * Class representing a logic control block in the rich text editor.
@@ -2328,6 +2494,7 @@ class RTELogicControlNode extends codeBlock.RTENode {
 class RTELogicControlBlock extends codeBlock.RTEBlock {
   constructor(id, statementText, parent) {
     super(id);
+    this.dtoName = RTELogicControlBlock.dtoName;
     this.type = 'logic-control-block';
     this.children = [];
     this.statementText = '';
@@ -2393,6 +2560,7 @@ class RTELogicControlBlock extends codeBlock.RTEBlock {
     };
   }
 }
+RTELogicControlBlock.dtoName = 'RTELogicControlBlock';
 
 /**
  * Function toolbar button renderer class.
@@ -2823,7 +2991,6 @@ const convertFunctionBlockStrategy = new DivToFunctionBlockStrategy();
 class VegaRTEFunctionExtension extends VegaRTEExtension {
   constructor() {
     super();
-    this.toolbarButtonRenderer = new FunctionToolbarButtonRenderer();
     this.registerBlockBasicStrategies(RTELogicControlBlock.name);
     this.registerBlockBasicStrategies(RTEFunctionBlock.name);
     this.preventFunctionBlockDefaultInsertNewParagraph();
@@ -2831,11 +2998,14 @@ class VegaRTEFunctionExtension extends VegaRTEExtension {
     this.registerRenderer('logic-control-block', new RTELogicControlBlockRenderer());
     this.registerNode('function-block', RTEFunctionBlock);
     this.registerRenderer('function-block', new RTEFunctionBlockRenderer());
-    this.registerToolbarButtonRenderer('functions', this.toolbarButtonRenderer);
     this.registerElementToBlockDTOClassStrategy(convertLogicControlBlockStrategy);
     this.registerElementToBlockDTOClassStrategy(convertFunctionContentStrategy);
     this.registerElementToBlockDTOClassStrategy(convertFunctionBlockStrategy);
   }
+  /** @inheritDoc */
+  prepareBeforeLoad(host) {
+    this.registerToolbarButtonRenderer('functions', new FunctionToolbarButtonRenderer(), host);
+  }
   /**
    * Remove the appen children strategies to prevent default insert new paragraph logic in function block
    */
@@ -2859,7 +3029,7 @@ class VegaRTEFunctionExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandlerInterceptor(codeBlock.RTETextBlock.name, codeBlock.ModifyContentActionType.PASTE_CONTENT, new PreventPasteContentInterceptor());
 })();
 
-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, 24, 24, 48));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}";
+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}";
 
 const DELETE_TABLE_BLOCK = 'DELETE_TABLE_BLOCK';
 /**
@@ -2956,6 +3126,7 @@ var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
 class RTETableCaptionBlock extends codeBlock.RTEBlock {
   constructor(id, options) {
     super(id);
+    this.dtoName = RTETableCaptionBlock.dtoName;
     this.type = 'table-caption';
     const { autoMatchFormat } = options || { autoMatchFormat: true };
     if (autoMatchFormat) {
@@ -3018,6 +3189,7 @@ class RTETableCaptionBlock extends codeBlock.RTEBlock {
   codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.INSERT_CHILDREN_BEFORE, RTETableCaptionBlock.name, new contentState.InsertChildrenBeforeStrategy());
   codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.PASTE_CONTENT, RTETableCaptionBlock.name, new contentState.PasteContentStrategy());
 })();
+RTETableCaptionBlock.dtoName = 'RTETableCaptionBlock';
 
 const TOGGLE_TABLE_CAPTION = 'TOGGLE_TABLE_CAPTION';
 /**
@@ -6692,7 +6864,7 @@ class TableAnnotationHandler extends TableAnnotationHandlerBase {
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETableBlock';
+    return targetDto.dtoName === 'RTETableBlock';
   }
   /**
    * Handle annotation extraction from table element.
@@ -6760,7 +6932,7 @@ class TableCellAnnotationHandler extends TableAnnotationHandlerBase {
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETableCellBlock';
+    return targetDto.dtoName === 'RTETableCellBlock';
   }
   /**
    * Handle annotation extraction from table cell element.
@@ -6869,7 +7041,7 @@ class TableHeadCellAnnotationHandler extends TableCellAnnotationHandler {
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETableHeadCellBlock';
+    return targetDto.dtoName === 'RTETableHeadCellBlock';
   }
 }
 
@@ -7349,7 +7521,7 @@ class TableBlockFilterStylesStrategy extends codeBlock.RTEFilterStylesStrategy {
    * @inheritDoc
    */
   canFilter(blockOrNodeInstance) {
-    return this.isTableBlock(blockOrNodeInstance.constructor.name);
+    return this.isTableBlock(blockOrNodeInstance.dtoName);
   }
   /**
    * @inheritDoc
@@ -7387,7 +7559,7 @@ class TableCaptionFilterStylesStrategy extends codeBlock.RTEFilterStylesStrategy
    * @inheritDoc
    */
   canFilter(blockOrNodeInstance) {
-    return this.isTableCaption(blockOrNodeInstance.constructor.name);
+    return this.isTableCaption(blockOrNodeInstance.dtoName);
   }
   /**
    * @inheritDoc
@@ -7429,7 +7601,7 @@ class TableCellFilterStylesStrategy extends codeBlock.RTEFilterStylesStrategy {
    * @inheritDoc
    */
   canFilter(blockOrNodeInstance) {
-    return this.isTableCell(blockOrNodeInstance.constructor.name);
+    return this.isTableCell(blockOrNodeInstance.dtoName);
   }
   /**
    * The table cell border color can be represented in different formats (e.g., hex, rgb), so we need to ensure that we can handle both cases.
@@ -7575,128 +7747,1569 @@ class VegaRTETableExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandlerInterceptor(splitCellOperation.RTETableCellBlock.name, codeBlock.ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
   VegaRTEExtension.registerActionHandlerInterceptor(splitCellOperation.RTETableHeadCellBlock.name, codeBlock.ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
   VegaRTEExtension.registerActionHandlerInterceptor(splitCellOperation.RTETableBlock.name, codeBlock.ModifyContentActionType.INSERT_NEW_PARAGRAPH, new PreventTableInsertParagraphInterceptor());
-  VegaRTEExtension.registerFilterStylesStrategy(splitCellOperation.RTETableBlock.name, new TableBlockFilterStylesStrategy());
-  VegaRTEExtension.registerFilterStylesStrategy(RTETableCaptionBlock.name, new TableCaptionFilterStylesStrategy());
-  VegaRTEExtension.registerFilterStylesStrategy(splitCellOperation.RTETableCellBlock.name, new TableCellFilterStylesStrategy());
-  VegaRTEExtension.registerFilterStylesStrategy(splitCellOperation.RTETableHeadCellBlock.name, new TableCellFilterStylesStrategy('th'));
+  VegaRTEExtension.registerFilterStylesStrategy(splitCellOperation.RTETableBlock.dtoName, new TableBlockFilterStylesStrategy());
+  VegaRTEExtension.registerFilterStylesStrategy(RTETableCaptionBlock.dtoName, new TableCaptionFilterStylesStrategy());
+  VegaRTEExtension.registerFilterStylesStrategy(splitCellOperation.RTETableCellBlock.dtoName, new TableCellFilterStylesStrategy());
+  VegaRTEExtension.registerFilterStylesStrategy(splitCellOperation.RTETableHeadCellBlock.dtoName, new TableCellFilterStylesStrategy('th'));
 })();
 
 /**
- * Insert a new children to the nearest position of the parent container
- *
- * @example parent.apply(new InsertNodeToNearestRoot(rteRange, nodeToBeInserted))
+ * Horizontal line node — a decorator node representing `<hr>` in the editor.
  */
-class InsertNodeToNearestRootAction extends codeBlock.ModifyContentAction {
-  constructor(rteRange, nodeToBeInserted) {
-    super();
-    this.type = codeBlock.ModifyContentActionType.INSERT_NODE_TO_NEAREST_ROOT;
-    this.rteRange = rteRange;
-    this.nodeToBeInserted = nodeToBeInserted;
+class RTEHorizontalLineNode extends codeBlock.RTEDecoratorNode {
+  constructor(id, parentBlock, annotationMap) {
+    super(id, annotationMap);
+    this.type = 'horizontal-line';
+    this.parent = parentBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return {
+      id: this.id,
+      type: 'horizontal-line',
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    return new RTEHorizontalLineNode(this.id, parent, super.cloneAnnotations());
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    return '<hr>';
   }
 }
 
 /**
- * Strategy to handle the insertion of a token node into the nearest root block.
+ * Predicate class provides static methods to check specific conditions on HTML elements or dto instances.
  */
-class InsertTokenNodeStrategy extends codeBlock.ActionHandleStrategy {
+class Predicate {
   /**
-   * @inheritDoc
+   * Checks if the given class name corresponds to a horizontal line block.
+   *
+   * @param {string} className The class name to check.
+   * @returns {boolean} True if the class name corresponds to a horizontal line block, false otherwise.
    */
-  handleAction(action, block) {
-    const { rteRange, token } = action;
-    if (rteRange && rteRange.startNode) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { key, label, customAttrs = { wrapped: 'true' } } = token;
-      const tokenNode = new RTETokenNode(misc.generateUUID(), key, label, block);
-      tokenNode.annotationMap.set('CUSTOM_ATTRIBUTE', new codeBlock.CustomAttributeAnnotation(customAttrs));
-      block.apply(new InsertNodeToNearestRootAction(rteRange, tokenNode));
-      action.actionHandleResult = true;
-    }
+  static isHorizontalLineBlock(className) {
+    return className === 'RTEHorizontalLineBlock';
   }
 }
 
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-    t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
+/**
+ * Default visual styles for the `<hr>` element in the RTE.
+ * These styles match the CSS applied in `horizontal-line-block-styles.css`.
+ *
+ * @see {@link file://extensions/horizontal-line/renderers/horizontal-line-block-styles.css} — must stay in sync.
+ */
+const HR_DEFAULT_STYLES = {
+  display: 'inline-block',
+  width: '100%',
+  height: '4px',
+  backgroundColor: 'rgb(222, 222, 222)',
+  borderWidth: '0px',
 };
 /**
- * Strategy to convert <span class="token" token-key="...">...</span> to a token node
+ * Filter styles strategy for horizontal line blocks.
+ * Strips default HR visual styles during output and refills them during input,
+ * ensuring source edit round-trips do not lose information.
  */
-class SpanToTokenNodeStrategy extends contentState.ElementToDTOStrategy {
+class HorizontalLineFilterStylesStrategy extends codeBlock.RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = HR_DEFAULT_STYLES;
+    this.elementTagName = 'hr';
+  }
   /**
    * @inheritDoc
    */
-  canHandle(elementsArray, currentIndex) {
-    const element = elementsArray[currentIndex];
-    if (element.nodeName === 'SPAN' &&
-      element.classList.contains('token') &&
-      element.hasAttribute('token-key')) {
-      return 1;
-    }
-    return 0;
+  canFilter(blockOrNodeInstance) {
+    return Predicate.isHorizontalLineBlock(blockOrNodeInstance.dtoName);
   }
   /**
    * @inheritDoc
    */
-  handle(elementsArray) {
-    const element = elementsArray[0];
-    const tokenKey = element.getAttribute('token-key');
-    const text = element.textContent;
-    const annotations = contentState.htmlElementToAnnotationGenerator.generate(codeBlock.RTETextNode, element);
-    // Exclude customAttribute and customClass from annotations
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { customAttribute, customClass } = annotations, restAnnotations = __rest(annotations, ["customAttribute", "customClass"]);
-    return {
-      id: misc.generateUUID(),
-      type: 'token',
-      token: tokenKey,
-      text,
-      annotations: Object.assign(Object.assign({}, restAnnotations), { customAttribute: this.createCustomAttrs(customAttribute) }),
-    };
+  canRefill(_blockOrNodeClassName, element) {
+    return element.tagName.toLowerCase() === this.elementTagName;
   }
   /**
    * @inheritDoc
    */
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  appendChildBlocks() { }
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
+}
+
+var RTEHorizontalLineExtensionAnnotationTypeEnum;
+(function (RTEHorizontalLineExtensionAnnotationTypeEnum) {
+  RTEHorizontalLineExtensionAnnotationTypeEnum["HORIZONTAL_LINE"] = "HORIZONTAL_LINE";
+})(RTEHorizontalLineExtensionAnnotationTypeEnum || (RTEHorizontalLineExtensionAnnotationTypeEnum = {}));
+/**
+ * Horizontal line annotation.
+ * Mirrors {@link TextStyleAnnotation}: emits the HR default visual styles in
+ * standalone mode (source edit) and the corresponding class in normal mode.
+ * Only added to the block when `autoMatchFormat` is enabled.
+ */
+class HorizontalLineAnnotation extends codeBlock.BlockAnnotation {
+  constructor() {
+    super(...arguments);
+    this.type = RTEHorizontalLineExtensionAnnotationTypeEnum.HORIZONTAL_LINE;
+  }
+  /**
+   * Generate the map item for the annotation.
+   *
+   * @returns {[RTEHorizontalLineExtensionAnnotationTypeEnum.HORIZONTAL_LINE, HorizontalLineAnnotation]} Map item.
+   */
+  static from() {
+    return [RTEHorizontalLineExtensionAnnotationTypeEnum.HORIZONTAL_LINE, new HorizontalLineAnnotation()];
+  }
+  /**
+   * Get the default styles for the horizontal line element.
+   *
+   * @returns {AnnotationStyle} The default styles.
+   */
+  static getDefaultStyles() {
+    return HR_DEFAULT_STYLES;
+  }
   /**
    * @inheritDoc
    */
-  shouldProceedToElementChildren() {
-    return false;
+  toJSON() {
+    // HR identity is captured by the block type; nothing to serialize.
+    return null;
   }
   /**
-   * Creates custom attributes record from the given custom attribute object, clean some fixed attributes.
+   * @inheritDoc
+   */
+  clone() {
+    return new HorizontalLineAnnotation();
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return 'v-rte-horizontal-line-hr';
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return HorizontalLineAnnotation.getDefaultStyles();
+  }
+}
+
+/**
+ * Horizontal line block — a block containing a single `<hr>` decorator node.
+ */
+class RTEHorizontalLineBlock extends codeBlock.RTEBlock {
+  constructor(id, options) {
+    super(id);
+    this.dtoName = RTEHorizontalLineBlock.dtoName;
+    this.type = 'horizontal-line';
+    this.children = [];
+    const { autoMatchFormat = true } = options !== null && options !== void 0 ? options : {};
+    if (autoMatchFormat) {
+      this.annotationMap = new Map([HorizontalLineAnnotation.from()]);
+    }
+  }
+  /**
+   * Creates an RTEHorizontalLineBlock from a JSON representation.
    *
-   * @param {Record<string, string>} customAttribute - The custom attribute object
-   * @returns {Record<string, string>} The processed custom attributes
+   * @param {VegaRTECustomBlock} block - The block JSON to convert.
+   * @param {VegaRTETransformOptions} [options] - Transformation options.
+   * @returns {RTEHorizontalLineBlock} The created block instance.
    */
-  createCustomAttrs(customAttribute) {
-    const result = Object.assign(Object.assign({}, customAttribute), { 'contenteditable': null, 'template-token-key': null, 'token-key': null, 'wrapped': customAttribute.wrapped === 'false' ? 'false' : 'true' });
-    return object.cleanObject(result);
+  static from(block, options = { autoMatchFormat: true }) {
+    var _a, _b;
+    const hrBlock = new RTEHorizontalLineBlock(block.id, options);
+    const nodeId = ((_b = (_a = block.children) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) || misc.generateUUID();
+    const node = new RTEHorizontalLineNode(nodeId, hrBlock);
+    hrBlock.children = [node];
+    if (block.annotations) {
+      codeBlock.RTEBlock.convertAnnotationsToMap(hrBlock.annotationMap, block.annotations);
+    }
+    return hrBlock;
+  }
+  /**
+   * Creates a new RTEHorizontalLineBlock with a child node.
+   *
+   * @param {VegaRTEBlockAnnotations} [annotations] - Optional annotations (e.g. customStyle overrides).
+   * @param {VegaRTETransformOptions} [options] - Transformation options.
+   * @returns {RTEHorizontalLineBlock} A new block instance.
+   */
+  static create(annotations, options = { autoMatchFormat: true }) {
+    const hrBlock = new RTEHorizontalLineBlock(misc.generateUUID(), options);
+    const node = new RTEHorizontalLineNode(misc.generateUUID(), hrBlock);
+    hrBlock.children = [node];
+    if (annotations) {
+      codeBlock.RTEBlock.convertAnnotationsToMap(hrBlock.annotationMap, annotations);
+    }
+    return hrBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: 'horizontal-line', children: this.children.map((node) => node.toJSON()) });
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml(options) {
+    const attrStr = super.generateAttributeString(options);
+    return `<hr${attrStr}>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.children.length > 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1];
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTEHorizontalLineBlock(this.id);
+    clonedBlock.children = this.children.map((node) => node.clone(clonedBlock));
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    clonedBlock.parent = parent;
+    return clonedBlock;
   }
 }
+RTEHorizontalLineBlock.dtoName = 'RTEHorizontalLineBlock';
+
+const horizontalLineBlockStylesCss = ".v-rte-horizontal-line{padding:8px 0;overflow:hidden}.v-rte-horizontal-line .v-rte-horizontal-line-hr{display:inline-block;width:100%;height:4px;border-width:0px;background-color:rgb(222, 222, 222)}";
 
-const spanToTokenNodeStrategy = new SpanToTokenNodeStrategy();
 /**
- * Vega Rich Text Editor Token Extension
+ * Renderer for horizontal line blocks in the rich text editor.
  */
-class VegaRTETokenExtension extends VegaRTEExtension {
-  constructor(tokenList = []) {
-    super();
-    this.tokenRenderer = new RTETokenNodeRenderer();
-    this.registerNode('token', RTETokenNode);
-    this.registerRenderer('token', this.tokenRenderer);
-    this.tokenToolbarButtonRenderer = new RTETokenToolbarButtonRenderer(tokenList);
-    this.registerToolbarButtonRenderer('token', this.tokenToolbarButtonRenderer);
-    this.registerElementToNodeDTOClassStrategy(spanToTokenNodeStrategy);
+class RTEHorizontalLineBlockRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(createElement, block, rteContext) {
+    const node = block.children[0];
+    const customStyles = block.getStyles(rteContext);
+    const annotationClasses = block.getClasses(rteContext);
+    const hrClass = [codeBlock.RTEDecoratorNode.DECORATOR_NODE_CLASS, annotationClasses]
+      .filter(Boolean)
+      .join(' ');
+    return createElement('div', {
+      key: block.id,
+      class: `v-rte-horizontal-line ${codeBlock.RTEDecoratorNode.DECORATOR_CONTAINER_CLASS}`,
+      ref: this.useRef(block),
+    }, [
+      createElement('hr', {
+        key: (node === null || node === void 0 ? void 0 : node.id) || block.id + '-hr',
+        class: hrClass,
+        style: Object.keys(customStyles).length > 0 ? customStyles : undefined,
+        ref: node ? this.useRef(node) : undefined,
+      }),
+    ]);
+  }
+  /**
+   * @inheritDoc
+   */
+  injectRTEScopeStyles() {
+    return horizontalLineBlockStylesCss;
+  }
+}
+
+const HorizontalLine = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 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="M0 224H32 608h32v64H608 32 0V224z"/></svg>`,
+};
+
+const INSERT_HORIZONTAL_LINE_BLOCK = 'INSERT_HORIZONTAL_LINE_BLOCK';
+/**
+ * Action to insert a horizontal line block into the rich text editor.
+ * Carries cursor position info to support split-paragraph insertion (same pattern as InsertImageToBlockAction).
+ */
+class InsertHorizontalLineBlockAction extends codeBlock.ModifyContentAction {
+  constructor(splitPointNode, startOffsetOfNode = 0) {
+    super();
+    this.type = INSERT_HORIZONTAL_LINE_BLOCK;
+    this.splitPointNode = splitPointNode;
+    this.startOffsetOfNode = startOffsetOfNode;
+  }
+}
+
+/**
+ * Toolbar button renderer for horizontal line insertion.
+ */
+class RTEHorizontalLineToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  /**
+   * Renders the horizontal line toolbar button.
+   *
+   * @param {VegaRTECreateElementFunction} createElement - The function to create elements.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context.
+   * @returns {VegaRTERenderResult} The rendered toolbar button.
+   */
+  render(createElement, editorContext) {
+    return this.renderButton(createElement, editorContext, {
+      icon: 'horizontal-line',
+      tooltip: { text: internalTranslationController.VegaInternalTranslation.t('Horizontal line') },
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  isDisabled(editorContext) {
+    const context = this.getExtensionContext(editorContext.host);
+    if (context) {
+      const { host, getSelectedNodes } = context;
+      const [startNode] = getSelectedNodes();
+      return startNode
+        ? host.disabled ||
+          !codeBlock.ActionHandleStrategyRegistry.canHandle(INSERT_HORIZONTAL_LINE_BLOCK, startNode.parent)
+        : host.disabled;
+    }
+    return false;
+  }
+  /**
+   * @inheritDoc
+   */
+  handleButtonClick(editorContext) {
+    if (this.isDisabled(editorContext)) {
+      return;
+    }
+    const context = this.getExtensionContext(editorContext.host);
+    if (context) {
+      const { host, getSelectedNodes, flushValue } = context;
+      const selectedNodes = getSelectedNodes();
+      const focusNode = selectedNodes[0];
+      const startOffset = editorContext.rteRange.startOffset;
+      const action = new InsertHorizontalLineBlockAction(focusNode, startOffset);
+      if (!focusNode) {
+        host.value.apply(action);
+      }
+      else if (focusNode.parent) {
+        focusNode.parent.apply(action);
+      }
+      if (action.nextFocusNode) {
+        host.value.apply(new contentState.UpdateCursorPositionAction(action.nextFocusNode, 0));
+      }
+      flushValue(host.value);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  handleDropdownClick() {
+    // No dropdown for horizontal line
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'horizontal-line': HorizontalLine,
+  });
+})();
+
+/**
+ * Strategy to convert `<hr>` HTML elements into RTEHorizontalLineBlock instances.
+ */
+class HrToHorizontalLineBlockStrategy extends contentState.ElementToDTOStrategy {
+  /**
+   * Determines if this strategy can handle the current element.
+   *
+   * @param {HTMLElement[]} elementsArray - Array of elements to process.
+   * @param {number} currentIndex - The current index in the array.
+   * @returns {number} The number of elements this strategy can handle (1 for `<hr>`, 0 otherwise).
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'HR' ? 1 : 0;
+  }
+  /**
+   * Converts the `<hr>` element to an RTEHorizontalLineBlock.
+   * Uses `htmlElementToAnnotationGenerator` to extract annotations (handles refill + filter).
+   *
+   * @param {HTMLElement[]} elementsArray - Array of elements.
+   * @param {VegaRTETransformOptions} [options] - Transformation options.
+   * @returns {Nullable<RTEContentBlock>} The created horizontal line block.
+   */
+  handle(elementsArray, options) {
+    const element = elementsArray[0];
+    const annotations = contentState.htmlElementToAnnotationGenerator.generate(RTEHorizontalLineBlock, element, options);
+    return RTEHorizontalLineBlock.create(annotations, options);
+  }
+  /**
+   * @inheritDoc
+   */
+  appendChildBlocks() {
+    // `<hr>` is a void element — no children to append.
+  }
+  /**
+   * `<hr>` is a void element — no children to process.
+   *
+   * @returns {boolean} Always false.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/**
+ * Strategy to handle the insertion of a horizontal line block into the rich text editor.
+ * Follows the same pattern as BlockInsertImageIntoTextStrategy (before/after/split).
+ */
+class InsertHorizontalLineBlockStrategy extends codeBlock.ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const hrBlock = RTEHorizontalLineBlock.create();
+    if (action.splitPointNode instanceof codeBlock.RTETextNode) {
+      const splitNode = action.splitPointNode;
+      const startOffsetOfNode = action.startOffsetOfNode;
+      if (this.isCaretPositionAtBlockEnd(target, splitNode, startOffsetOfNode)) {
+        this.insertAfterWithFocus(action, target, hrBlock);
+      }
+      else if (this.isCaretPositionAtBlockStart(target, splitNode, startOffsetOfNode)) {
+        target.parent.apply(new codeBlock.InsertChildrenBeforeAction(target, hrBlock));
+        action.nextFocusNode = target.getFirstNode();
+      }
+      else {
+        const splitBlockAction = new codeBlock.SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+        target.apply(splitBlockAction);
+        const nextBlock = this.getNextSiblingBlock(target);
+        target.parent.apply(new codeBlock.InsertChildrenAfterAction(target, hrBlock));
+        action.nextFocusNode = nextBlock.getFirstNode();
+      }
+    }
+    else if (action.splitPointNode) {
+      // Decorator node selected (image, HR, etc.) — insert after current block
+      this.insertAfterWithFocus(action, target, hrBlock);
+    }
+    else {
+      const emptyParagraph = super.createNewParagraph('');
+      target.apply(new codeBlock.AppendChildrenAction([hrBlock, emptyParagraph]));
+      action.nextFocusNode = emptyParagraph.children[0];
+    }
+  }
+  /**
+   * Insert HR after target. If next sibling is focusable (has a text node), move cursor there;
+   * otherwise create an empty paragraph after HR.
+   *
+   * @param {InsertHorizontalLineBlockAction} action - The insert action whose `nextFocusNode` is updated.
+   * @param {RTEBlock} target - The block after which the HR is inserted.
+   * @param {RTEHorizontalLineBlock} hrBlock - The HR block to insert.
+   */
+  insertAfterWithFocus(action, target, hrBlock) {
+    const nextBlock = this.getNextSiblingBlock(target);
+    const nextFirstNode = nextBlock === null || nextBlock === void 0 ? void 0 : nextBlock.getFirstNode();
+    if (nextFirstNode instanceof codeBlock.RTETextNode) {
+      target.parent.apply(new codeBlock.InsertChildrenAfterAction(target, hrBlock));
+      action.nextFocusNode = nextFirstNode;
+    }
+    else {
+      const emptyParagraph = super.createNewParagraph('');
+      target.parent.apply(new codeBlock.InsertChildrenAfterAction(target, hrBlock, emptyParagraph));
+      action.nextFocusNode = emptyParagraph.children[0];
+    }
+  }
+  /**
+   * Get the next sibling block of the given block.
+   *
+   * @param {RTEBlock} block - The current block.
+   * @returns {RTEBlock | undefined} The next sibling block, or undefined if none.
+   */
+  getNextSiblingBlock(block) {
+    const parent = block.parent;
+    const siblings = parent.children;
+    const index = siblings.indexOf(block);
+    return siblings[index + 1];
+  }
+}
+
+/**
+ * Extension that adds horizontal line (`<hr>`) support to the Vega Rich Text Editor.
+ */
+class VegaRTEHorizontalLineExtension extends VegaRTEExtension {
+  constructor() {
+    super();
+    this.blockRenderer = new RTEHorizontalLineBlockRenderer();
+    this.toolbarButtonRenderer = new RTEHorizontalLineToolbarButtonRenderer();
+    // Register basic block strategies (delete, append, paste, etc.)
+    this.registerBlockBasicStrategies(RTEHorizontalLineBlock.name);
+    // Register the block DTO class
+    this.registerNode('horizontal-line', RTEHorizontalLineBlock);
+    // Register the renderer
+    this.registerRenderer('horizontal-line', this.blockRenderer);
+    // Register the toolbar button
+    this.registerToolbarButtonRenderer('horizontalLine', this.toolbarButtonRenderer);
+    // Register HTML → DTO conversion strategy
+    this.registerElementToBlockDTOClassStrategy(new HrToHorizontalLineBlockStrategy());
+    // Register filter styles strategy for source edit round-trip
+    VegaRTEExtension.registerFilterStylesStrategy(RTEHorizontalLineBlock.dtoName, new HorizontalLineFilterStylesStrategy());
+  }
+}
+(() => {
+  const insertStrategy = new InsertHorizontalLineBlockStrategy();
+  // Register insert strategy for all block types that can be a target
+  VegaRTEExtension.registerActionHandleStrategy(contentState.VegaRTEContent.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(codeBlock.RTETextBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(contentState.RTEImageBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTEHorizontalLineBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
+})();
+
+const ARROW_CHARACTERS = [
+  { character: '←', title: 'leftwards simple arrow' },
+  { character: '→', title: 'rightwards simple arrow' },
+  { character: '↑', title: 'upwards simple arrow' },
+  { character: '↓', title: 'downwards simple arrow' },
+  { character: '⇐', title: 'leftwards double arrow' },
+  { character: '⇒', title: 'rightwards double arrow' },
+  { character: '⇑', title: 'upwards double arrow' },
+  { character: '⇓', title: 'downwards double arrow' },
+  { character: '⇠', title: 'leftwards dashed arrow' },
+  { character: '⇢', title: 'rightwards dashed arrow' },
+  { character: '⇡', title: 'upwards dashed arrow' },
+  { character: '⇣', title: 'downwards dashed arrow' },
+  { character: '⇤', title: 'leftwards arrow to bar' },
+  { character: '⇥', title: 'rightwards arrow to bar' },
+  { character: '⤒', title: 'upwards arrow to bar' },
+  { character: '⤓', title: 'downwards arrow to bar' },
+  { character: '↨', title: 'up down arrow with base' },
+  { character: '🔙', title: 'back with leftwards arrow above' },
+  { character: '🔚', title: 'end with leftwards arrow above' },
+  { character: '🔛', title: 'on with exclamation mark with left right arrow above' },
+  { character: '🔜', title: 'soon with rightwards arrow above' },
+  { character: '🔝', title: 'top with upwards arrow above' },
+];
+
+const CURRENCY_CHARACTERS = [
+  { character: '$', title: 'Dollar sign' },
+  { character: '€', title: 'Euro sign' },
+  { character: '¥', title: 'Yen sign' },
+  { character: '£', title: 'Pound sign' },
+  { character: '¢', title: 'Cent sign' },
+  { character: '₠', title: 'Euro-currency sign' },
+  { character: '₡', title: 'Colon sign' },
+  { character: '₢', title: 'Cruzeiro sign' },
+  { character: '₣', title: 'French franc sign' },
+  { character: '₤', title: 'Lira sign' },
+  { character: '¤', title: 'Currency sign' },
+  { character: '₿', title: 'Bitcoin sign' },
+  { character: '₥', title: 'Mill sign' },
+  { character: '₦', title: 'Naira sign' },
+  { character: '₧', title: 'Peseta sign' },
+  { character: '₨', title: 'Rupee sign' },
+  { character: '₩', title: 'Won sign' },
+  { character: '₪', title: 'New sheqel sign' },
+  { character: '₫', title: 'Dong sign' },
+  { character: '₭', title: 'Kip sign' },
+  { character: '₮', title: 'Tugrik sign' },
+  { character: '₯', title: 'Drachma sign' },
+  { character: '₰', title: 'German penny sign' },
+  { character: '₱', title: 'Peso sign' },
+  { character: '₲', title: 'Guarani sign' },
+  { character: '₳', title: 'Austral sign' },
+  { character: '₴', title: 'Hryvnia sign' },
+  { character: '₵', title: 'Cedi sign' },
+  { character: '₶', title: 'Livre tournois sign' },
+  { character: '₷', title: 'Spesmilo sign' },
+  { character: '₸', title: 'Tenge sign' },
+  { character: '₹', title: 'Indian rupee sign' },
+  { character: '₺', title: 'Turkish lira sign' },
+  { character: '₻', title: 'Nordic mark sign' },
+  { character: '₼', title: 'Manat sign' },
+  { character: '₽', title: 'Ruble sign' },
+];
+
+const LATIN_CHARACTERS = [
+  { character: 'Ā', title: 'Latin capital letter a with macron' },
+  { character: 'ā', title: 'Latin small letter a with macron' },
+  { character: 'Ă', title: 'Latin capital letter a with breve' },
+  { character: 'ă', title: 'Latin small letter a with breve' },
+  { character: 'Ą', title: 'Latin capital letter a with ogonek' },
+  { character: 'ą', title: 'Latin small letter a with ogonek' },
+  { character: 'Ć', title: 'Latin capital letter c with acute' },
+  { character: 'ć', title: 'Latin small letter c with acute' },
+  { character: 'Ĉ', title: 'Latin capital letter c with circumflex' },
+  { character: 'ĉ', title: 'Latin small letter c with circumflex' },
+  { character: 'Ċ', title: 'Latin capital letter c with dot above' },
+  { character: 'ċ', title: 'Latin small letter c with dot above' },
+  { character: 'Č', title: 'Latin capital letter c with caron' },
+  { character: 'č', title: 'Latin small letter c with caron' },
+  { character: 'Ď', title: 'Latin capital letter d with caron' },
+  { character: 'ď', title: 'Latin small letter d with caron' },
+  { character: 'Đ', title: 'Latin capital letter d with stroke' },
+  { character: 'đ', title: 'Latin small letter d with stroke' },
+  { character: 'Ē', title: 'Latin capital letter e with macron' },
+  { character: 'ē', title: 'Latin small letter e with macron' },
+  { character: 'Ĕ', title: 'Latin capital letter e with breve' },
+  { character: 'ĕ', title: 'Latin small letter e with breve' },
+  { character: 'Ė', title: 'Latin capital letter e with dot above' },
+  { character: 'ė', title: 'Latin small letter e with dot above' },
+  { character: 'Ę', title: 'Latin capital letter e with ogonek' },
+  { character: 'ę', title: 'Latin small letter e with ogonek' },
+  { character: 'Ě', title: 'Latin capital letter e with caron' },
+  { character: 'ě', title: 'Latin small letter e with caron' },
+  { character: 'Ĝ', title: 'Latin capital letter g with circumflex' },
+  { character: 'ĝ', title: 'Latin small letter g with circumflex' },
+  { character: 'Ğ', title: 'Latin capital letter g with breve' },
+  { character: 'ğ', title: 'Latin small letter g with breve' },
+  { character: 'Ġ', title: 'Latin capital letter g with dot above' },
+  { character: 'ġ', title: 'Latin small letter g with dot above' },
+  { character: 'Ģ', title: 'Latin capital letter g with cedilla' },
+  { character: 'ģ', title: 'Latin small letter g with cedilla' },
+  { character: 'Ĥ', title: 'Latin capital letter h with circumflex' },
+  { character: 'ĥ', title: 'Latin small letter h with circumflex' },
+  { character: 'Ħ', title: 'Latin capital letter h with stroke' },
+  { character: 'ħ', title: 'Latin small letter h with stroke' },
+  { character: 'Ĩ', title: 'Latin capital letter i with tilde' },
+  { character: 'ĩ', title: 'Latin small letter i with tilde' },
+  { character: 'Ī', title: 'Latin capital letter i with macron' },
+  { character: 'ī', title: 'Latin small letter i with macron' },
+  { character: 'Ĭ', title: 'Latin capital letter i with breve' },
+  { character: 'ĭ', title: 'Latin small letter i with breve' },
+  { character: 'Į', title: 'Latin capital letter i with ogonek' },
+  { character: 'į', title: 'Latin small letter i with ogonek' },
+  { character: 'İ', title: 'Latin capital letter i with dot above' },
+  { character: 'ı', title: 'Latin small letter dotless i' },
+  { character: 'IJ', title: 'Latin capital ligature ij' },
+  { character: 'ij', title: 'Latin small ligature ij' },
+  { character: 'Ĵ', title: 'Latin capital letter j with circumflex' },
+  { character: 'ĵ', title: 'Latin small letter j with circumflex' },
+  { character: 'Ķ', title: 'Latin capital letter k with cedilla' },
+  { character: 'ķ', title: 'Latin small letter k with cedilla' },
+  { character: 'ĸ', title: 'Latin small letter kra' },
+  { character: 'Ĺ', title: 'Latin capital letter l with acute' },
+  { character: 'ĺ', title: 'Latin small letter l with acute' },
+  { character: 'Ļ', title: 'Latin capital letter l with cedilla' },
+  { character: 'ļ', title: 'Latin small letter l with cedilla' },
+  { character: 'Ľ', title: 'Latin capital letter l with caron' },
+  { character: 'ľ', title: 'Latin small letter l with caron' },
+  { character: 'Ŀ', title: 'Latin capital letter l with middle dot' },
+  { character: 'ŀ', title: 'Latin small letter l with middle dot' },
+  { character: 'Ł', title: 'Latin capital letter l with stroke' },
+  { character: 'ł', title: 'Latin small letter l with stroke' },
+  { character: 'Ń', title: 'Latin capital letter n with acute' },
+  { character: 'ń', title: 'Latin small letter n with acute' },
+  { character: 'Ņ', title: 'Latin capital letter n with cedilla' },
+  { character: 'ņ', title: 'Latin small letter n with cedilla' },
+  { character: 'Ň', title: 'Latin capital letter n with caron' },
+  { character: 'ň', title: 'Latin small letter n with caron' },
+  { character: 'ʼn', title: 'Latin small letter n preceded by apostrophe' },
+  { character: 'Ŋ', title: 'Latin capital letter eng' },
+  { character: 'ŋ', title: 'Latin small letter eng' },
+  { character: 'Ō', title: 'Latin capital letter o with macron' },
+  { character: 'ō', title: 'Latin small letter o with macron' },
+  { character: 'Ŏ', title: 'Latin capital letter o with breve' },
+  { character: 'ŏ', title: 'Latin small letter o with breve' },
+  { character: 'Ő', title: 'Latin capital letter o with double acute' },
+  { character: 'ő', title: 'Latin small letter o with double acute' },
+  { character: 'Œ', title: 'Latin capital ligature oe' },
+  { character: 'œ', title: 'Latin small ligature oe' },
+  { character: 'Ŕ', title: 'Latin capital letter r with acute' },
+  { character: 'ŕ', title: 'Latin small letter r with acute' },
+  { character: 'Ŗ', title: 'Latin capital letter r with cedilla' },
+  { character: 'ŗ', title: 'Latin small letter r with cedilla' },
+  { character: 'Ř', title: 'Latin capital letter r with caron' },
+  { character: 'ř', title: 'Latin small letter r with caron' },
+  { character: 'Ś', title: 'Latin capital letter s with acute' },
+  { character: 'ś', title: 'Latin small letter s with acute' },
+  { character: 'Ŝ', title: 'Latin capital letter s with circumflex' },
+  { character: 'ŝ', title: 'Latin small letter s with circumflex' },
+  { character: 'Ş', title: 'Latin capital letter s with cedilla' },
+  { character: 'ş', title: 'Latin small letter s with cedilla' },
+  { character: 'Š', title: 'Latin capital letter s with caron' },
+  { character: 'š', title: 'Latin small letter s with caron' },
+  { character: 'Ţ', title: 'Latin capital letter t with cedilla' },
+  { character: 'ţ', title: 'Latin small letter t with cedilla' },
+  { character: 'Ť', title: 'Latin capital letter t with caron' },
+  { character: 'ť', title: 'Latin small letter t with caron' },
+  { character: 'Ŧ', title: 'Latin capital letter t with stroke' },
+  { character: 'ŧ', title: 'Latin small letter t with stroke' },
+  { character: 'Ũ', title: 'Latin capital letter u with tilde' },
+  { character: 'ũ', title: 'Latin small letter u with tilde' },
+  { character: 'Ū', title: 'Latin capital letter u with macron' },
+  { character: 'ū', title: 'Latin small letter u with macron' },
+  { character: 'Ŭ', title: 'Latin capital letter u with breve' },
+  { character: 'ŭ', title: 'Latin small letter u with breve' },
+  { character: 'Ů', title: 'Latin capital letter u with ring above' },
+  { character: 'ů', title: 'Latin small letter u with ring above' },
+  { character: 'Ű', title: 'Latin capital letter u with double acute' },
+  { character: 'ű', title: 'Latin small letter u with double acute' },
+  { character: 'Ų', title: 'Latin capital letter u with ogonek' },
+  { character: 'ų', title: 'Latin small letter u with ogonek' },
+  { character: 'Ŵ', title: 'Latin capital letter w with circumflex' },
+  { character: 'ŵ', title: 'Latin small letter w with circumflex' },
+  { character: 'Ŷ', title: 'Latin capital letter y with circumflex' },
+  { character: 'ŷ', title: 'Latin small letter y with circumflex' },
+  { character: 'Ÿ', title: 'Latin capital letter y with diaeresis' },
+  { character: 'Ź', title: 'Latin capital letter z with acute' },
+  { character: 'ź', title: 'Latin small letter z with acute' },
+  { character: 'Ż', title: 'Latin capital letter z with dot above' },
+  { character: 'ż', title: 'Latin small letter z with dot above' },
+  { character: 'Ž', title: 'Latin capital letter z with caron' },
+  { character: 'ž', title: 'Latin small letter z with caron' },
+  { character: 'ſ', title: 'Latin small letter long s' },
+];
+
+const MATHEMATICAL_CHARACTERS = [
+  { character: '<', title: 'Less-than sign' },
+  { character: '>', title: 'Greater-than sign' },
+  { character: '≤', title: 'Less-than or equal to' },
+  { character: '≥', title: 'Greater-than or equal to' },
+  { character: '–', title: 'En dash' },
+  { character: '—', title: 'Em dash' },
+  { character: '¯', title: 'Macron' },
+  { character: '‾', title: 'Overline' },
+  { character: '°', title: 'Degree sign' },
+  { character: '−', title: 'Minus sign' },
+  { character: '±', title: 'Plus-minus sign' },
+  { character: '÷', title: 'Division sign' },
+  { character: '⁄', title: 'Fraction slash' },
+  { character: '×', title: 'Multiplication sign' },
+  { character: 'ƒ', title: 'Latin small letter f with hook' },
+  { character: '∫', title: 'Integral' },
+  { character: '∑', title: 'N-ary summation' },
+  { character: '∞', title: 'Infinity' },
+  { character: '√', title: 'Square root' },
+  { character: '∼', title: 'Tilde operator' },
+  { character: '≅', title: 'Approximately equal to' },
+  { character: '≈', title: 'Almost equal to' },
+  { character: '≠', title: 'Not equal to' },
+  { character: '≡', title: 'Identical to' },
+  { character: '∈', title: 'Element of' },
+  { character: '∉', title: 'Not an element of' },
+  { character: '∋', title: 'Contains as member' },
+  { character: '∏', title: 'N-ary product' },
+  { character: '∧', title: 'Logical and' },
+  { character: '∨', title: 'Logical or' },
+  { character: '¬', title: 'Not sign' },
+  { character: '∩', title: 'Intersection' },
+  { character: '∪', title: 'Union' },
+  { character: '∂', title: 'Partial differential' },
+  { character: '∀', title: 'For all' },
+  { character: '∃', title: 'There exists' },
+  { character: '∅', title: 'Empty set' },
+  { character: '∇', title: 'Nabla' },
+  { character: '∗', title: 'Asterisk operator' },
+  { character: '∝', title: 'Proportional to' },
+  { character: '∠', title: 'Angle' },
+  { character: '¼', title: 'Vulgar fraction one quarter' },
+  { character: '½', title: 'Vulgar fraction one half' },
+  { character: '¾', title: 'Vulgar fraction three quarters' },
+];
+
+const TEXT_CHARACTERS = [
+  { character: '‹', title: 'Single left-pointing angle quotation mark' },
+  { character: '›', title: 'Single right-pointing angle quotation mark' },
+  { character: '«', title: 'Left-pointing double angle quotation mark' },
+  { character: '»', title: 'Right-pointing double angle quotation mark' },
+  { character: '‘', title: 'Left single quotation mark' },
+  { character: '’', title: 'Right single quotation mark' },
+  { character: '“', title: 'Left double quotation mark' },
+  { character: '”', title: 'Right double quotation mark' },
+  { character: '‚', title: 'Single low-9 quotation mark' },
+  { character: '„', title: 'Double low-9 quotation mark' },
+  { character: '¡', title: 'Inverted exclamation mark' },
+  { character: '¿', title: 'Inverted question mark' },
+  { character: '‥', title: 'Two dot leader' },
+  { character: '…', title: 'Horizontal ellipsis' },
+  { character: '‡', title: 'Double dagger' },
+  { character: '‰', title: 'Per mille sign' },
+  { character: '‱', title: 'Per ten thousand sign' },
+  { character: '‼', title: 'Double exclamation mark' },
+  { character: '⁈', title: 'Question exclamation mark' },
+  { character: '⁉', title: 'Exclamation question mark' },
+  { character: '⁇', title: 'Double question mark' },
+  { character: '©', title: 'Copyright sign' },
+  { character: '®', title: 'Registered sign' },
+  { character: '™', title: 'Trade mark sign' },
+  { character: '§', title: 'Section sign' },
+  { character: '¶', title: 'Paragraph sign' },
+  { character: '⁋', title: 'Reversed paragraph sign' },
+];
+
+const VegaRTESpecialCharactersLatin = {
+  key: 'latin',
+  label: 'Latin',
+  characters: LATIN_CHARACTERS,
+};
+const VegaRTESpecialCharactersMathematical = {
+  key: 'mathematical',
+  label: 'Mathematical',
+  characters: MATHEMATICAL_CHARACTERS,
+};
+const VegaRTESpecialCharactersArrows = {
+  key: 'arrows',
+  label: 'Arrows',
+  characters: ARROW_CHARACTERS,
+};
+const VegaRTESpecialCharactersCurrency = {
+  key: 'currency',
+  label: 'Currency',
+  characters: CURRENCY_CHARACTERS,
+};
+const VegaRTESpecialCharactersText = {
+  key: 'text',
+  label: 'Text',
+  characters: TEXT_CHARACTERS,
+};
+const VegaRTESpecialCharactersEssentials = [
+  VegaRTESpecialCharactersCurrency,
+  VegaRTESpecialCharactersText,
+  VegaRTESpecialCharactersMathematical,
+  VegaRTESpecialCharactersArrows,
+  VegaRTESpecialCharactersLatin,
+];
+
+const specialCharactersIcon = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 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="M224 80C126.8 80 48 158.8 48 256c0 63.7 33.8 119.5 84.6 150.4c11.4 7 19.4 19.6 19.4 34.2c0 21.8-17.6 39.4-39.4 39.4H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H85.4C33.4 391 0 327.4 0 256C0 132.3 100.3 32 224 32s224 100.3 224 224c0 71.4-33.4 135-85.4 176H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H335.4c-21.8 0-39.4-17.6-39.4-39.4c0-14.6 8-27.2 19.4-34.2C366.2 375.5 400 319.7 400 256c0-97.2-78.8-176-176-176z"/></svg>`,
+};
+
+/**
+ * Toolbar button renderer for the Special Characters extension.
+ * Renders a toolbar button with an Ω icon that opens a popover panel
+ * with categorized character grids.
+ */
+class RTESpecialCharactersToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  constructor(categories) {
+    super();
+    this.panelRef = null;
+    this.categories = categories;
+  }
+  /**
+   * Renders the special characters toolbar button wrapped in a popover.
+   *
+   * @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 h('vega-popover', {
+      trigger: 'click',
+      alignment: 'start',
+      placement: 'bottom',
+      showArrow: false,
+      isScreenPosition: true,
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (ref) => {
+        if (ref) {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaPopoverShow, () => {
+            this.handlePopoverShow();
+          });
+        }
+      },
+    }, [
+      h('div', { slot: 'popover' }, [
+        h('vega-rich-text-special-characters-panel', {
+          categories: this.categories,
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          ref: (ref) => {
+            if (ref) {
+              this.panelRef = ref;
+              domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, 
+              // eslint-disable-next-line jsdoc/require-jsdoc
+              (payload) => {
+                this.insertCharacter(editorContext, payload.detail);
+              });
+            }
+          },
+        }),
+      ]),
+      h('div', { slot: 'popover-content' }, this.renderButton(h, editorContext, {
+        icon: 'rte-special-characters',
+        tooltip: { text: 'Special Characters' },
+      })),
+    ]);
+  }
+  /**
+   * @inheritDoc
+   */
+  handleButtonClick() {
+    // Popover handles open/close via trigger='click'
+  }
+  /* istanbul ignore next */
+  /**
+   * @inheritDoc
+   */
+  handleDropdownClick() {
+    // No dropdown used
+  }
+  /**
+   * Resets the panel and moves focus to the category select when the
+   * popover opens.
+   */
+  handlePopoverShow() {
+    if (this.panelRef) {
+      void this.panelRef.resetPanel();
+    }
+  }
+  /**
+   * Inserts a special character at the current cursor position using ReplaceSelectedTextAction,
+   * then restores the cursor position after flushing.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   * @param {string} char - The Unicode character to insert.
+   */
+  insertCharacter(editorContext, char) {
+    const currentRange = editorContext.rteRange;
+    const cursorNode = currentRange.startNode;
+    if (!cursorNode)
+      return;
+    const target = this.isCaretOnLineBreak(cursorNode, currentRange)
+      ? this.insertAtLineBreak(cursorNode, char, currentRange)
+      : this.insertAtTextNode(cursorNode, char, currentRange);
+    editorContext.host.value.apply(new contentState.UpdateCursorPositionAction(target.node, target.offset));
+  }
+  /**
+   * Checks whether the caret is collapsed on a Shift+Enter line-break text node.
+   *
+   * @param {RTENode} cursorNode - The current cursor node.
+   * @param {RTERange} range - The current selection range.
+   * @returns {boolean} True if the caret is collapsed on a '\n' text node.
+   */
+  isCaretOnLineBreak(cursorNode, range) {
+    return (cursorNode instanceof codeBlock.RTETextNode &&
+      cursorNode.text === '\n' &&
+      range.startOffset === range.endOffset);
+  }
+  /**
+   * Default insert path: replace the selected range on a regular text node.
+   *
+   * @param {RTENode} cursorNode - The current cursor node.
+   * @param {string} char - The Unicode character to insert.
+   * @param {RTERange} range - The current selection range.
+   * @returns {CaretTarget} The node and offset for the resulting caret position.
+   */
+  insertAtTextNode(cursorNode, char, range) {
+    const action = new replaceSelectedTextAction.ReplaceSelectedTextAction(char, range);
+    action.isFlushable = true;
+    cursorNode.apply(action);
+    // Clamp to node length: empty paragraphs contain a ZWS in the DOM (startOffset=1)
+    // but the DTO text node is empty, so `startOffset + char.length` would overflow.
+    return {
+      node: cursorNode,
+      offset: Math.min(range.startOffset + char.length, cursorNode.getRangeEndOffset()),
+    };
+  }
+  /**
+   * Line-break insert path: delegate to insertTextToLineBreakNode and place
+   * the caret at the end of the inserted text.
+   *
+   * @param {RTETextNode} lineBreakNode - The '\n' text node at the caret.
+   * @param {string} char - The Unicode character to insert.
+   * @param {RTERange} range - The current selection range.
+   * @returns {CaretTarget} Caret target.
+   */
+  insertAtLineBreak(lineBreakNode, char, range) {
+    return {
+      node: this.insertTextToLineBreakNode(lineBreakNode, char, range),
+      offset: char.length,
+    };
+  }
+  /**
+   * Mirror of InsertTextHandler.insertTextToLineBreakNode for the toolbar
+   * insert path: caret on a Shift+Enter line-break text node needs either a
+   * new sibling text node inserted before the break, or the break's text
+   * replaced. The default ReplaceSelectedTextAction + getRangeEndOffset()
+   * path returns 0 for '\n' text nodes and drops the caret in front of the
+   * inserted character.
+   *
+   * @param {RTETextNode} lineBreakNode - The '\n' text node at the caret.
+   * @param {string} text - The text to insert.
+   * @param {RTERange} currentRange - The current selection range.
+   * @returns {RTETextNode} The node the caret should land in.
+   */
+  insertTextToLineBreakNode(lineBreakNode, text, currentRange) {
+    // '\n' text nodes always live inside a text block in the RTE structure.
+    const textBlock = lineBreakNode.parent;
+    const index = textBlock.children.indexOf(lineBreakNode);
+    if (currentRange.startOffset === 0 && textBlock.children[index + 1]) {
+      const newTextNode = lineBreakNode.cloneWithText(text);
+      const insertAction = new codeBlock.InsertChildrenBeforeAction(lineBreakNode, newTextNode);
+      insertAction.isFlushable = true;
+      textBlock.apply(insertAction);
+      return newTextNode;
+    }
+    const updateAction = new codeBlock.UpdateTextAction(text);
+    updateAction.isFlushable = true;
+    lineBreakNode.apply(updateAction);
+    return lineBreakNode;
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ 'rte-special-characters': specialCharactersIcon });
+})();
+
+/**
+ * Vega Rich Text Editor Special Characters Extension.
+ * Adds a toolbar button that opens a popover with categorized Unicode characters
+ * for insertion into the editor content as plain text.
+ */
+class VegaRTESpecialCharactersExtension extends VegaRTEExtension {
+  constructor(config) {
+    super();
+    this.categories = this.buildCategories(config);
+  }
+  /** @inheritDoc */
+  prepareBeforeLoad(host) {
+    this.registerToolbarButtonRenderer('special-characters', new RTESpecialCharactersToolbarButtonRenderer(this.categories), host);
+  }
+  /**
+   * Builds the final list of special character categories from the provided config.
+   *
+   * @param {VegaRTESpecialCharactersConfig} config - Optional configuration with custom categories.
+   * @returns {VegaRTESpecialCharacterCategory[]} - The merged categories array.
+   */
+  buildCategories(config) {
+    const includeDefaults = (config === null || config === void 0 ? void 0 : config.includeDefaults) !== false;
+    const defaultCategories = includeDefaults
+      ? VegaRTESpecialCharactersEssentials
+      : [];
+    if (!(config === null || config === void 0 ? void 0 : config.categories)) {
+      return defaultCategories;
+    }
+    return [...defaultCategories, ...config.categories];
+  }
+}
+
+/**
+ * Default line height options used by the line-height extension when no
+ * custom options are provided.
+ */
+const VegaRTEDefaultLineHeightOptions = [
+  { title: '0.5', value: '0.5' },
+  { title: '1', value: '1' },
+  { title: '1.5', value: '1.5' },
+  { title: '2', value: '2' },
+  { title: '2.5', value: '2.5' },
+];
+
+var RTELineHeightExtensionAnnotationTypeEnum;
+(function (RTELineHeightExtensionAnnotationTypeEnum) {
+  RTELineHeightExtensionAnnotationTypeEnum["LINE_HEIGHT"] = "LINE_HEIGHT";
+})(RTELineHeightExtensionAnnotationTypeEnum || (RTELineHeightExtensionAnnotationTypeEnum = {}));
+/**
+ * Annotation to set block line height.
+ */
+class LineHeightAnnotation extends codeBlock.BlockAnnotation {
+  constructor(lineHeight) {
+    super();
+    this.type = RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT;
+    this.lineHeight = lineHeight;
+  }
+  /**
+   * Generate the map item for the annotation.
+   *
+   * @param {string} lineHeight - Line height value.
+   * @returns {[RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT, LineHeightAnnotation]} Map item for the annotation.
+   */
+  static from(lineHeight) {
+    return [RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT, new LineHeightAnnotation(lineHeight)];
+  }
+  /**
+   * Get the default standalone styles for a given line height value.
+   *
+   * @param {string} lineHeight - The line height value.
+   * @returns {AnnotationStyle} The default standalone styles.
+   */
+  static getDefaultStyles(lineHeight) {
+    return { lineHeight };
+  }
+  /**
+   * Generate the JSON item of the annotation.
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation.
+   */
+  toJSON() {
+    return {
+      lineHeight: this.lineHeight,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new LineHeightAnnotation(this.lineHeight);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
+    return LineHeightAnnotation.getDefaultStyles(this.lineHeight);
+  }
+}
+
+/**
+ * Action to update block line height annotation.
+ */
+class LineHeightAnnotationAction extends codeBlock.AnnotationAction {
+  constructor(lineHeight) {
+    super();
+    this.isFlushable = true;
+    this.lineHeight = lineHeight;
+  }
+  /**
+   * Converts the action to an annotation.
+   *
+   * @returns {LineHeightAnnotation} The annotation.
+   */
+  toAnnotation() {
+    return new LineHeightAnnotation(this.lineHeight);
+  }
+}
+
+/**
+ * Update the block line height strategy.
+ *
+ * Registered for RTETextBlock and RTEListItemBlock, so the
+ * target type is widened to the common RTEBlock base.
+ */
+class BlockUpdateLineHeightStrategy extends codeBlock.ActionHandleStrategy {
+  /**
+   * Updating the line height of a block requires cascading updates to the custom style.
+   *
+   * @param {LineHeightAnnotationAction} _action - The line height annotation action.
+   * @param {RTEBlock} target - The current block.
+   */
+  handleAction(_action, target) {
+    this.updateCustomStyleAnnotation(target, ['lineHeight']);
+  }
+}
+
+const lineHeight = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor"  d="M113.8 39.9c-4.6-5.1-11-7.9-17.8-7.9s-13.3 2.9-17.8 7.9l-72 80c-8.9 9.9-8.1 25 1.8 33.9s25 8.1 33.9-1.8L72 118.5V393.5L41.8 359.9c-8.9-9.9-24-10.7-33.9-1.8s-10.7 24-1.8 33.9l72 80c4.6 5.1 11 7.9 17.8 7.9s13.3-2.9 17.8-7.9l72-80c8.9-9.9 8.1-25-1.8-33.9s-25-8.1-33.9 1.8L120 393.5V118.5l30.2 33.5c8.9 9.9 24 10.7 33.9 1.8s10.7-24 1.8-33.9l-72-80zM248 72c-13.3 0-24 10.7-24 24s10.7 24 24 24H552c13.3 0 24-10.7 24-24s-10.7-24-24-24H248zm0 160c-13.3 0-24 10.7-24 24s10.7 24 24 24H552c13.3 0 24-10.7 24-24s-10.7-24-24-24H248zM224 416c0 13.3 10.7 24 24 24H552c13.3 0 24-10.7 24-24s-10.7-24-24-24H248c-13.3 0-24 10.7-24 24z"/></svg>`,
+};
+
+/**
+ * Renderer for the line-height toolbar button in the Vega Rich Text Editor.
+ */
+class RTELineHeightToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  constructor(options) {
+    super();
+    this.options = options;
+  }
+  /**
+   * @inheritDoc
+   */
+  render(createElement, editorContext) {
+    const dropdownItems = this.options.map((item) => {
+      var _a;
+      return ({
+        key: item.value,
+        label: (_a = item.title) !== null && _a !== void 0 ? _a : item.value,
+      });
+    });
+    return this.renderDropdown(createElement, editorContext, {
+      selectType: 'single',
+      selectedSourceKey: this.getSelectedSourceValue(editorContext),
+    }, [
+      this.renderButton(createElement, editorContext, {
+        icon: 'line-height',
+        showArrowIcon: true,
+        tooltip: { text: internalTranslationController.VegaInternalTranslation.t('Line Height') },
+      }),
+      this.renderDropdownListTemplate(createElement, dropdownItems),
+    ]);
+  }
+  /**
+   * @inheritDoc
+   */
+  isSelected() {
+    return false;
+  }
+  /**
+   * @inheritDoc
+   */
+  isDisabled(editorContext) {
+    var _a;
+    if (editorContext.host.disabled) {
+      return true;
+    }
+    const extensionContext = this.getExtensionContext(editorContext.host);
+    const selectedNodes = (_a = extensionContext === null || extensionContext === void 0 ? void 0 : extensionContext.getSelectedNodes()) !== null && _a !== void 0 ? _a : [];
+    if (selectedNodes.some((node) => {
+      var _a;
+      return ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        node.parent instanceof codeBlock.RTECodeBlock;
+    })) {
+      return true;
+    }
+    const selectedBlocks = this.getSelectedBlocks(editorContext);
+    return selectedBlocks.some((block) => block instanceof codeBlock.RTECodeBlock ||
+      block instanceof contentState.RTEImageBlock ||
+      !codeBlock.ActionHandleStrategyRegistry.canHandle(LineHeightAnnotationAction.name, block));
+  }
+  /**
+   * @inheritDoc
+   */
+  handleDropdownClick(itemValue, editorContext) {
+    const selectedLineHeight = itemValue;
+    const selectedBlocks = this.getSelectedBlocks(editorContext);
+    selectedBlocks.forEach((block) => {
+      block.apply(new LineHeightAnnotationAction(selectedLineHeight));
+    });
+  }
+  /**
+   * Handle direct toolbar button click.
+   */
+  handleButtonClick() {
+    // No direct click action; selection happens in dropdown options.
+  }
+  /**
+   * Get the selected line-height key for dropdown selection state.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - Current toolbar context.
+   * @returns {string} Selected line-height key or empty string for mixed/none.
+   */
+  getSelectedSourceValue(editorContext) {
+    const selectedBlocks = this.getSelectedBlocks(editorContext);
+    if (selectedBlocks.length === 0) {
+      return '';
+    }
+    const firstAnnotation = selectedBlocks[0].getAnnotationByType(RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT);
+    const isSameLineHeight = selectedBlocks.every((block) => {
+      const annotation = block.getAnnotationByType(RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT);
+      return (annotation === null || annotation === void 0 ? void 0 : annotation.lineHeight) === (firstAnnotation === null || firstAnnotation === void 0 ? void 0 : firstAnnotation.lineHeight);
+    });
+    return isSameLineHeight && firstAnnotation ? firstAnnotation.lineHeight : '';
+  }
+  /**
+   * Resolve selected blocks from selected nodes with range fallback.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - Current toolbar context.
+   * @returns {RTEBlock[]} Selected blocks.
+   */
+  getSelectedBlocks(editorContext) {
+    var _a, _b;
+    const extensionContext = this.getExtensionContext(editorContext.host);
+    const selectedNodes = (_a = extensionContext === null || extensionContext === void 0 ? void 0 : extensionContext.getSelectedNodes()) !== null && _a !== void 0 ? _a : [];
+    const selectedBlocks = [];
+    selectedNodes.forEach((node) => {
+      if (node.parent instanceof codeBlock.RTEBlock && !selectedBlocks.includes(node.parent)) {
+        selectedBlocks.push(node.parent);
+      }
+    });
+    if (selectedBlocks.length === 0 && ((_b = editorContext.rteRange.startNode) === null || _b === void 0 ? void 0 : _b.parent) instanceof codeBlock.RTEBlock) {
+      selectedBlocks.push(editorContext.rteRange.startNode.parent);
+    }
+    return selectedBlocks;
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'line-height': lineHeight,
+  });
+})();
+
+const LINE_HEIGHT_AWARE_BLOCK_NAMES = new Set([
+  codeBlock.RTETextBlock.name,
+  contentState.RTEListItemBlock.name,
+]);
+/** Handle line height annotation. */
+class LineHeightAnnotationHandler extends contentState.AnnotationGeneratorStrategyAbstract {
+  constructor(options = VegaRTEDefaultLineHeightOptions) {
+    super();
+    this.allowedLineHeights = new Set(options.map((option) => option.value));
+  }
+  /**
+   * Can be handled.
+   *
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @returns {boolean} Whether the target DTO supports line-height annotations.
+   */
+  canHandle(targetDto) {
+    return LINE_HEIGHT_AWARE_BLOCK_NAMES.has(targetDto.name);
+  }
+  /**
+   * Extract inline `line-height` as a semantic `lineHeight` annotation.
+   *
+   * @param {HTMLElement} [element] - Current element.
+   * @returns {VegaRTEBlockAnnotations} `{ lineHeight }` when present, otherwise `{}`.
+   */
+  handle(element) {
+    var _a, _b;
+    const lineHeight = (_b = (_a = element === null || element === void 0 ? void 0 : element.style.lineHeight) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+    if (!lineHeight) {
+      return {};
+    }
+    if (!this.allowedLineHeights.has(lineHeight)) {
+      return {};
+    }
+    return { lineHeight };
+  }
+}
+
+/**
+ * Removes a redundant inline `customStyle.lineHeight` when it duplicates the
+ * semantic `lineHeight` annotation during HTML-to-DTO conversion.
+ *
+ * Note: moving out-of-list line-height values from the semantic annotation to
+ * `customStyle.lineHeight` is handled by the per-host interceptor in
+ * `line-height-host-interceptor.ts`, not here.
+ */
+class LineHeightFilterStylesStrategy extends codeBlock.RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = {};
+  }
+  /**
+   * Always run this strategy, even when autoMatchFormat is disabled.
+   *
+   * @returns {boolean} Always true.
+   */
+  get alwaysFilter() {
+    return true;
+  }
+  /**
+   * Drop `customStyle.lineHeight` when it duplicates the semantic `lineHeight`.
+   *
+   * @param {VegaRTEAnnotations} annotations - The annotations to filter.
+   * @returns {VegaRTEAnnotations} The same annotations reference.
+   */
+  filterAnnotations(annotations) {
+    const blockAnnotations = annotations;
+    const lineHeight = blockAnnotations.lineHeight;
+    const customStyle = blockAnnotations.customStyle;
+    if (lineHeight && customStyle && customStyle.lineHeight === lineHeight) {
+      delete customStyle.lineHeight;
+    }
+    if (customStyle && Object.keys(customStyle).length === 0) {
+      delete blockAnnotations.customStyle;
+    }
+    return annotations;
+  }
+}
+
+/**
+ * Per-class set of allowed line-height values, updated as extension instances
+ * are constructed with (possibly custom) options.
+ */
+const allowedLineHeightsByClass = new WeakMap();
+/**
+ * Tracks which block classes have had their JSON `lineHeight` annotation
+ * handler installed, so we register it exactly once per class.
+ */
+const handlerInstalledClasses = new WeakSet();
+/**
+ * Move an out-of-range `lineHeight` annotation into `customStyle.lineHeight`.
+ *
+ * @param {RTEBlock} block - The block to inspect.
+ * @param {ReadonlySet<string>} allowed - Allowed line-height values.
+ */
+function normalizeLineHeightStyle(block, allowed) {
+  const annotation = block.annotationMap.get(RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT);
+  if (!annotation || allowed.has(annotation.lineHeight)) {
+    return;
+  }
+  const value = annotation.lineHeight;
+  block.annotationMap.delete(RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT);
+  const existing = block.annotationMap.get(codeBlock.CommonAnnotationTypeEnum.CUSTOM_STYLE);
+  if (existing) {
+    existing.customStyle = Object.assign(Object.assign({}, existing.customStyle), { lineHeight: value });
+  }
+  else {
+    block.annotationMap.set(...codeBlock.CustomStyleAnnotation.from({ lineHeight: value }));
+  }
+}
+/**
+ * Install the JSON `lineHeight` annotation handler for a block class.
+ *
+ * @param {LineHeightBlockClass} BlockClass - Target block class.
+ */
+function attachLineHeightFromJson(BlockClass) {
+  if (handlerInstalledClasses.has(BlockClass)) {
+    return;
+  }
+  handlerInstalledClasses.add(BlockClass);
+  VegaRTEExtension.attachAnnotationFromJson(BlockClass, 'lineHeight', (instance, value) => {
+    if (typeof value !== 'string' || value === '') {
+      return;
+    }
+    instance.annotationMap.set(...LineHeightAnnotation.from(value));
+    const allowed = allowedLineHeightsByClass.get(BlockClass);
+    if (allowed && allowed.size > 0) {
+      normalizeLineHeightStyle(instance, allowed);
+    }
+  });
+}
+/**
+ * Update the set of allowed line-height values for a block class.
+ *
+ * @param {LineHeightBlockClass} BlockClass - Target block class.
+ * @param {VegaRTELineHeightOption[]} options - Allowed line-height options.
+ */
+function setAllowedLineHeights(BlockClass, options) {
+  allowedLineHeightsByClass.set(BlockClass, new Set(options.map((option) => option.value)));
+}
+
+/**
+ * Rich Text Editor extension that adds configurable line-height support
+ * (toolbar control, annotations, content transforms, and JSON parsing).
+ */
+class VegaRTELineHeightExtension extends VegaRTEExtension {
+  constructor(options = VegaRTEDefaultLineHeightOptions) {
+    super();
+    this.options = options;
+    this.toolbarButtonRenderer = null;
+    this.registerAnnotationHandler(new LineHeightAnnotationHandler(this.options));
+    [codeBlock.RTETextBlock, contentState.RTEListItemBlock].forEach((BlockClass) => {
+      setAllowedLineHeights(BlockClass, this.options);
+    });
+  }
+  /**
+   * Register the per-host toolbar renderer so each editor on the page gets
+   * its own isolated line-height renderer instance.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The type of the host rich text editor element.
+   * @param {HTMLVegaRichTextEditorElement} host - The host element.
+   */
+  prepareBeforeLoad(host) {
+    this.toolbarButtonRenderer = new RTELineHeightToolbarButtonRenderer(this.options);
+    this.registerToolbarButtonRenderer('lineHeight', this.toolbarButtonRenderer, host);
+  }
+}
+(() => {
+  [codeBlock.RTETextBlock, contentState.RTEListItemBlock].forEach((BlockClass) => {
+    VegaRTEExtension.registerActionHandleStrategy(BlockClass.name, LineHeightAnnotationAction.name, new BlockUpdateLineHeightStrategy());
+    codeBlock.RTEFilterStylesStrategyRegistry.register(BlockClass.name, new LineHeightFilterStylesStrategy());
+    attachLineHeightFromJson(BlockClass);
+  });
+})();
+
+/**
+ * Insert a new children to the nearest position of the parent container
+ *
+ * @example parent.apply(new InsertNodeToNearestRoot(rteRange, nodeToBeInserted))
+ */
+class InsertNodeToNearestRootAction extends codeBlock.ModifyContentAction {
+  constructor(rteRange, nodeToBeInserted) {
+    super();
+    this.type = codeBlock.ModifyContentActionType.INSERT_NODE_TO_NEAREST_ROOT;
+    this.rteRange = rteRange;
+    this.nodeToBeInserted = nodeToBeInserted;
+  }
+}
+
+/**
+ * Strategy to handle the insertion of a token node into the nearest root block.
+ */
+class InsertTokenNodeStrategy extends codeBlock.ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, block) {
+    const { rteRange, token } = action;
+    if (rteRange && rteRange.startNode) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { key, label, customAttrs = { wrapped: 'true' } } = token;
+      const tokenNode = new RTETokenNode(misc.generateUUID(), key, label, block);
+      tokenNode.annotationMap.set('CUSTOM_ATTRIBUTE', new codeBlock.CustomAttributeAnnotation(customAttrs));
+      block.apply(new InsertNodeToNearestRootAction(rteRange, tokenNode));
+      action.actionHandleResult = true;
+    }
+  }
+}
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+/**
+ * Strategy to convert <span class="token" token-key="...">...</span> to a token node
+ */
+class SpanToTokenNodeStrategy extends contentState.ElementToDTOStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    if (element.nodeName === 'SPAN' &&
+      element.classList.contains('token') &&
+      element.hasAttribute('token-key')) {
+      return 1;
+    }
+    return 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0];
+    const tokenKey = element.getAttribute('token-key');
+    const text = element.textContent;
+    const annotations = contentState.htmlElementToAnnotationGenerator.generate(codeBlock.RTETextNode, element);
+    // Exclude customAttribute and customClass from annotations
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { customAttribute, customClass } = annotations, restAnnotations = __rest(annotations, ["customAttribute", "customClass"]);
+    return {
+      id: misc.generateUUID(),
+      type: 'token',
+      token: tokenKey,
+      text,
+      annotations: Object.assign(Object.assign({}, restAnnotations), { customAttribute: this.createCustomAttrs(customAttribute) }),
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * Creates custom attributes record from the given custom attribute object, clean some fixed attributes.
+   *
+   * @param {Record<string, string>} customAttribute - The custom attribute object
+   * @returns {Record<string, string>} The processed custom attributes
+   */
+  createCustomAttrs(customAttribute) {
+    const result = Object.assign(Object.assign({}, customAttribute), { 'contenteditable': null, 'template-token-key': null, 'token-key': null, 'wrapped': customAttribute.wrapped === 'false' ? 'false' : 'true' });
+    return object.cleanObject(result);
+  }
+}
+
+const spanToTokenNodeStrategy = new SpanToTokenNodeStrategy();
+/**
+ * Vega Rich Text Editor Token Extension
+ */
+class VegaRTETokenExtension extends VegaRTEExtension {
+  constructor(tokenList = []) {
+    super();
+    this.tokenRenderer = new RTETokenNodeRenderer();
+    this.tokenList = tokenList;
+    this.registerNode('token', RTETokenNode);
+    this.registerRenderer('token', this.tokenRenderer);
+    this.registerElementToNodeDTOClassStrategy(spanToTokenNodeStrategy);
+  }
+  /** @inheritDoc */
+  prepareBeforeLoad(host) {
+    this.registerToolbarButtonRenderer('token', new RTETokenToolbarButtonRenderer(this.tokenList), host);
   }
 }
 (() => {
@@ -7714,10 +9327,20 @@ exports.RTETokenToolbarButtonRenderer = RTETokenToolbarButtonRenderer;
 exports.VegaEventManager = VegaEventManager$1;
 exports.VegaLoader = VegaLoader;
 exports.VegaNotify = VegaNotify;
+exports.VegaRTEDefaultLineHeightOptions = VegaRTEDefaultLineHeightOptions;
 exports.VegaRTEExtension = VegaRTEExtension;
 exports.VegaRTEExtensionRenderer = VegaRTEExtensionRenderer;
 exports.VegaRTEFunctionExtension = VegaRTEFunctionExtension;
+exports.VegaRTEHorizontalLineExtension = VegaRTEHorizontalLineExtension;
 exports.VegaRTELanguageExtension = VegaRTELanguageExtension;
+exports.VegaRTELineHeightExtension = VegaRTELineHeightExtension;
+exports.VegaRTESpecialCharactersArrows = VegaRTESpecialCharactersArrows;
+exports.VegaRTESpecialCharactersCurrency = VegaRTESpecialCharactersCurrency;
+exports.VegaRTESpecialCharactersEssentials = VegaRTESpecialCharactersEssentials;
+exports.VegaRTESpecialCharactersExtension = VegaRTESpecialCharactersExtension;
+exports.VegaRTESpecialCharactersLatin = VegaRTESpecialCharactersLatin;
+exports.VegaRTESpecialCharactersMathematical = VegaRTESpecialCharactersMathematical;
+exports.VegaRTESpecialCharactersText = VegaRTESpecialCharactersText;
 exports.VegaRTETableExtension = VegaRTETableExtension;
 exports.VegaRTETokenExtension = VegaRTETokenExtension;
 exports.VegaRTEToolbarButtonRenderer = VegaRTEToolbarButtonRenderer;