@globalpayments/vega 2.87.0 → 2.89.0

package/dist/esm/{token-extension-5838c71b.js → token-extension-76323d76.js}

@@ -1,30 +1,31 @@
 import { g as generateUUID } from './misc-9fdbcfbb.js';
-import { a as arrayToClassString, g as getDeviceType, D as DeviceType, f as findParent, r as rgbToHex } from './ui-64815a12.js';
+import { a as arrayToClassString, g as getDeviceType, D as DeviceType, f as findParent, r as rgbToHex } from './ui-d73f756a.js';
 import { L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { I as InjectVegaTelemetrySlimmer, c as createPublicAPIRuntimeMetricsSlimmer } from './create-public-api-runtime-metrics-slimmer-da6615bf.js';
 import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-7d2b54c3.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e24d36c5.js';
-import { i as internalVegaEventManager } from './internal-vega-event-manager-1ac5ee9a.js';
-import { V as VegaInternalTranslation } from './internal-translation-controller-d8217d93.js';
-import { R as RTEDTOActionStrategyManager, E as ElementToDTOClassStrategyManager, h as htmlElementToAnnotationGenerator, U as UpdateCursorPositionAction, V as VegaRTEContent, B as BlockToRTEBlockStrategyAbstract, a as ElementToDTOStrategy, I as InsertNewParagraphAction, b as RTEImageBlock, c as InsertChildrenBeforeStrategy, P as PasteContentStrategy, A as AnnotationGeneratorStrategyAbstract, d as RTEListItemBlock } from './content-state-6fccd284.js';
-import { s as stateEntityRenderingRegistry, A as ActionHandleStrategyRegistry, a as ActionHandlerInterceptorRegistry, R as RTEFilterStylesStrategyRegistry, b as RTEDTOClassManager, M as ModifyContentAction, c as RTETextNode, d as RTEBlock, e as RTETextBlock, f as RTEAnnotationStyle, g as ActionHandleStrategy, I as InsertChildrenAfterAction, h as AppendChildrenAction, i as RTENode, j as InsertChildrenBeforeAction, k as InternalAnnotationTypeEnum, l as ModifyContentActionType, B as BlockAnnotation, m as AnnotationAction, n as RemoveChildrenAction, C as CommonAnnotationTypeEnum, o as CustomAttributeAnnotation, p as RTEFilterStylesStrategy } from './code-block-ff52d912.js';
-import { i as isNonNullable } from './type-guard-ed1004cc.js';
+import { i as internalVegaEventManager } from './internal-vega-event-manager-a9758b6e.js';
+import { V as VegaInternalTranslation } from './internal-translation-controller-84958bc9.js';
+import { R as RTEDTOActionStrategyManager, E as ElementToDTOClassStrategyManager, h as htmlElementToAnnotationGenerator, U as UpdateCursorPositionAction, V as VegaRTEContent, B as BlockToRTEBlockStrategyAbstract, a as ElementToDTOStrategy, I as InsertNewParagraphAction, b as RTEImageBlock, c as InsertChildrenBeforeStrategy, P as PasteContentStrategy, A as AnnotationGeneratorStrategyAbstract, d as RTEListItemBlock } from './content-state-96741bb0.js';
+import { s as stateEntityRenderingRegistry, A as ActionHandleStrategyRegistry, a as ActionHandlerInterceptorRegistry, R as RTEFilterStylesStrategyRegistry, b as RTEDTOClassManager, M as ModifyContentAction, c as RTETextNode, d as RTEBlock, e as RTETextBlock, f as RTEAnnotationStyle, g as ActionHandleStrategy, I as InsertChildrenAfterAction, h as AppendChildrenAction, i as RTENode, j as InsertChildrenBeforeAction, k as InternalAnnotationTypeEnum, l as ModifyContentActionType, B as BlockAnnotation, m as AnnotationAction, n as RemoveChildrenAction, C as CommonAnnotationTypeEnum, o as CustomAttributeAnnotation, p as RTEFilterStylesStrategy, q as RTEDecoratorNode, S as SplitBlockWithNodeAction, U as UpdateTextAction, N as NodeAnnotationTypeEnum, r as RTECodeBlock, t as CustomStyleAnnotation } from './code-block-17f596fc.js';
+import { i as isNonNullable } from './type-guard-30eec79c.js';
 import { R as RTEDTORendererManager } from './dto-renderer-manager-abc7eb5f.js';
 import { V as VegaRTEBaseRenderer } from './base-renderer-101f6d04.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-276f968f.js';
 import { v as vegaNonceManager } from './vega-nonce-manager-497e5eb5.js';
-import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-3897e95b.js';
-import { V as VegaDropdownClick, a as VegaClick, b as VegaPopoverHide, c as VegaPopoverShow } from './vega-event-id-578c6c6d.js';
-import { R as RTETableExtensionAnnotationTypeEnum, a as RTE_TABLE_HEAD_DEFAULT_BACKGROUND_COLOR, S as SettingEventHandler, T as TableSettingType, b as RTETableAnnotation, c as RTETableCellAnnotation, d as RTETableHeadCellBlock, e as RowOperationEventHandler, C as ColumnOperationEventHandler, M as MergeCellsOperationEventHandler, f as SplitCellOperationEventHandler, g as RTETableColorManager, h as RTETableBlock, i as generateTableBody, j as RTETableCellBlock, k as RTETableHeadBlock, l as RTETableBodyBlock, m as getParentBlockByType, n as RTETableHeadCellAnnotation, o as TableColumnStrategy, p as getAllTableRows, q as buildTableGrid, s as setSpanAttributes, r as findCellBlockById, t as getDefaultCellBlockTemplate, I as InsertTableColumnDirection, u as buildCellStartColumnMap, v as getTableColumnCount, w as getFirstNode, x as getCellSpan, y as createNewCell, z as MergeCellsOperationType, A as RTETableRowBlock, B as getActualColumnPosition, D as InsertTableRowDirection, E as RTE_TABLE_DEFAULT_COLORS, F as INSERT_TABLE_ROW_INTO_DIFFERENT_SECTION, G as INSERT_TABLE_ROW_INTO_SAME_SECTION, H as DELETE_TABLE_ROW, J as TOGGLE_HEADER_ROW, K as INSERT_TABLE_COLUMN, L as DELETE_TABLE_COLUMN, N as TOGGLE_HEADER_TABLE_COLUMN, O as ToggleHeaderTableColumnStrategy, P as SPLIT_TABLE_CELL, Q as REPLACE_TABLE_CELL, U as SPLIT_CELL_HORIZONTALLY, W as SPLIT_CELL_VERTICALLY, X as SELECT_TABLE_COLUMN, Y as MERGE_CELLS } from './split-cell-operation-7652e813.js';
+import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-ddff8662.js';
+import { V as VegaDropdownClick, a as VegaClick, b as VegaPopoverHide, c as VegaPopoverShow } from './vega-event-id-92848bf5.js';
+import { R as RTETableExtensionAnnotationTypeEnum, a as RTE_TABLE_HEAD_DEFAULT_BACKGROUND_COLOR, S as SettingEventHandler, T as TableSettingType, b as RTETableAnnotation, c as RTETableCellAnnotation, d as RTETableHeadCellBlock, e as RowOperationEventHandler, C as ColumnOperationEventHandler, M as MergeCellsOperationEventHandler, f as SplitCellOperationEventHandler, g as RTETableColorManager, h as RTETableBlock, i as generateTableBody, j as RTETableCellBlock, k as RTETableHeadBlock, l as RTETableBodyBlock, m as getParentBlockByType, n as RTETableHeadCellAnnotation, o as TableColumnStrategy, p as getAllTableRows, q as buildTableGrid, s as setSpanAttributes, r as findCellBlockById, t as getDefaultCellBlockTemplate, I as InsertTableColumnDirection, u as buildCellStartColumnMap, v as getTableColumnCount, w as getFirstNode, x as getCellSpan, y as createNewCell, z as MergeCellsOperationType, A as RTETableRowBlock, B as getActualColumnPosition, D as InsertTableRowDirection, E as RTE_TABLE_DEFAULT_COLORS, F as INSERT_TABLE_ROW_INTO_DIFFERENT_SECTION, G as INSERT_TABLE_ROW_INTO_SAME_SECTION, H as DELETE_TABLE_ROW, J as TOGGLE_HEADER_ROW, K as INSERT_TABLE_COLUMN, L as DELETE_TABLE_COLUMN, N as TOGGLE_HEADER_TABLE_COLUMN, O as ToggleHeaderTableColumnStrategy, P as SPLIT_TABLE_CELL, Q as REPLACE_TABLE_CELL, U as SPLIT_CELL_HORIZONTALLY, W as SPLIT_CELL_VERTICALLY, X as SELECT_TABLE_COLUMN, Y as MERGE_CELLS } from './split-cell-operation-ddde4106.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { V as VegaInternalRTEExtensionTableCellsSelectionAnchor, a as VegaInternalPopoverUpdateTarget, b as VegaInternalRTEExtensionTableCellSelectionChange } from './vega-internal-event-id-913e8be6.js';
 import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
-import { V as VegaInternalThemeManager } from './dark-mode-style-controller-e9a6b097.js';
+import { V as VegaInternalThemeManager } from './dark-mode-style-controller-ca5afd2d.js';
 import { t as tryGetDocument } from './try-get-document-bef0f526.js';
 import { p as parseToPixelString } from './pixel-f32c07ce.js';
 import { c as cleanObject } from './object-0c277f57.js';
 import { d as debounce } from './timer-9321173b.js';
+import { R as ReplaceSelectedTextAction } from './replace-selected-text-action-a217dc89.js';
 
 const VegaLoaderRuntimeMetricsPayloadDefinition = [
   {
@@ -1061,9 +1062,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);
     }
   }
   /**
@@ -1190,6 +1197,8 @@ class VegaRTEExtensionRenderer extends VegaRTEBaseRenderer {
 }
 VegaRTEExtensionRenderer.REGISTER_REF_FLAG = '__registeredRef__';
 
+const patchedBlockClasses = new WeakSet();
+const annotationHandlersByClass = new WeakMap();
 /**
  * Abstract class for Vega Rich Text Editor extensions.
  */
@@ -1230,6 +1239,53 @@ class VegaRTEExtension {
   static registerFilterStylesStrategy(blockOrNodeClassName, strategy) {
     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
@@ -1251,7 +1307,7 @@ class VegaRTEExtension {
    */
   initialExtensionAfterLoad(context) {
     this.extensionContext = context;
-    RTEExtensionContextManager$1.setExtensionContext(context);
+    RTEExtensionContextManager$1.updateExtensionContext(context);
   }
   /**
    * Callback method invoked when the extension is destroyed.
@@ -1391,6 +1447,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.
    *
@@ -1423,6 +1484,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.addUniqueObserverToNode(el, VegaDropdownClick, (input) => {
           const payload = input;
           this.handleDropdownClick(payload.detail, editorContext);
@@ -1440,6 +1502,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.nonce }, '.rte-dropdown-list vega-dropdown-group vega-dropdown-group { padding-left: 4px }'),
@@ -1503,9 +1571,12 @@ class VegaRTEToolbarButtonRenderer {
       selected: this.isSelected(editorContext),
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (el) => {
+        this.buttonEl = el;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, 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
@@ -1518,7 +1589,7 @@ class VegaRTEToolbarButtonRenderer {
         : null,
     ].filter(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;
   }
@@ -1588,6 +1659,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'));
+  }
 }
 
 /**
@@ -1696,6 +1856,7 @@ class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
 class RTETokenNode extends 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;
@@ -1745,6 +1906,7 @@ class RTETokenNode extends 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.
@@ -2070,6 +2232,7 @@ class InsertFunctionBlockAction extends ModifyContentAction {
 class RTEFunctionBlock extends RTEBlock {
   constructor(id) {
     super(id);
+    this.dtoName = RTEFunctionBlock.dtoName;
     this.type = 'function-block';
     this.children = [];
   }
@@ -2157,6 +2320,7 @@ class RTEFunctionBlock extends RTEBlock {
     return styles ? ` style="${styles}"` : '';
   }
 }
+RTEFunctionBlock.dtoName = 'RTEFunctionBlock';
 
 /**
  * Strategy to handle the insertion of a function block into the rich text editor.
@@ -2258,6 +2422,7 @@ class InsertFunctionBlockStrategy extends ActionHandleStrategy {
 class RTELogicControlNode extends RTENode {
   constructor(id, text, parent) {
     super(id);
+    this.dtoName = RTELogicControlNode.dtoName;
     this.type = 'logic-control-node';
     this.text = '';
     this.text = text;
@@ -2319,6 +2484,7 @@ class RTELogicControlNode extends RTENode {
     return false;
   }
 }
+RTELogicControlNode.dtoName = 'RTELogicControlNode';
 
 /**
  * Class representing a logic control block in the rich text editor.
@@ -2326,6 +2492,7 @@ class RTELogicControlNode extends RTENode {
 class RTELogicControlBlock extends RTEBlock {
   constructor(id, statementText, parent) {
     super(id);
+    this.dtoName = RTELogicControlBlock.dtoName;
     this.type = 'logic-control-block';
     this.children = [];
     this.statementText = '';
@@ -2391,6 +2558,7 @@ class RTELogicControlBlock extends RTEBlock {
     };
   }
 }
+RTELogicControlBlock.dtoName = 'RTELogicControlBlock';
 
 /**
  * Function toolbar button renderer class.
@@ -2821,7 +2989,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();
@@ -2829,11 +2996,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
    */
@@ -2857,7 +3027,7 @@ class VegaRTEFunctionExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandlerInterceptor(RTETextBlock.name, 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';
 /**
@@ -2954,6 +3124,7 @@ var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
 class RTETableCaptionBlock extends RTEBlock {
   constructor(id, options) {
     super(id);
+    this.dtoName = RTETableCaptionBlock.dtoName;
     this.type = 'table-caption';
     const { autoMatchFormat } = options || { autoMatchFormat: true };
     if (autoMatchFormat) {
@@ -3016,6 +3187,7 @@ class RTETableCaptionBlock extends RTEBlock {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_CHILDREN_BEFORE, RTETableCaptionBlock.name, new InsertChildrenBeforeStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.PASTE_CONTENT, RTETableCaptionBlock.name, new PasteContentStrategy());
 })();
+RTETableCaptionBlock.dtoName = 'RTETableCaptionBlock';
 
 const TOGGLE_TABLE_CAPTION = 'TOGGLE_TABLE_CAPTION';
 /**
@@ -6690,7 +6862,7 @@ class TableAnnotationHandler extends TableAnnotationHandlerBase {
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETableBlock';
+    return targetDto.dtoName === 'RTETableBlock';
   }
   /**
    * Handle annotation extraction from table element.
@@ -6758,7 +6930,7 @@ class TableCellAnnotationHandler extends TableAnnotationHandlerBase {
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETableCellBlock';
+    return targetDto.dtoName === 'RTETableCellBlock';
   }
   /**
    * Handle annotation extraction from table cell element.
@@ -6867,7 +7039,7 @@ class TableHeadCellAnnotationHandler extends TableCellAnnotationHandler {
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETableHeadCellBlock';
+    return targetDto.dtoName === 'RTETableHeadCellBlock';
   }
 }
 
@@ -7347,7 +7519,7 @@ class TableBlockFilterStylesStrategy extends RTEFilterStylesStrategy {
    * @inheritDoc
    */
   canFilter(blockOrNodeInstance) {
-    return this.isTableBlock(blockOrNodeInstance.constructor.name);
+    return this.isTableBlock(blockOrNodeInstance.dtoName);
   }
   /**
    * @inheritDoc
@@ -7385,7 +7557,7 @@ class TableCaptionFilterStylesStrategy extends RTEFilterStylesStrategy {
    * @inheritDoc
    */
   canFilter(blockOrNodeInstance) {
-    return this.isTableCaption(blockOrNodeInstance.constructor.name);
+    return this.isTableCaption(blockOrNodeInstance.dtoName);
   }
   /**
    * @inheritDoc
@@ -7427,7 +7599,7 @@ class TableCellFilterStylesStrategy extends 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.
@@ -7573,128 +7745,1569 @@ class VegaRTETableExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandlerInterceptor(RTETableCellBlock.name, ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
   VegaRTEExtension.registerActionHandlerInterceptor(RTETableHeadCellBlock.name, ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
   VegaRTEExtension.registerActionHandlerInterceptor(RTETableBlock.name, ModifyContentActionType.INSERT_NEW_PARAGRAPH, new PreventTableInsertParagraphInterceptor());
-  VegaRTEExtension.registerFilterStylesStrategy(RTETableBlock.name, new TableBlockFilterStylesStrategy());
-  VegaRTEExtension.registerFilterStylesStrategy(RTETableCaptionBlock.name, new TableCaptionFilterStylesStrategy());
-  VegaRTEExtension.registerFilterStylesStrategy(RTETableCellBlock.name, new TableCellFilterStylesStrategy());
-  VegaRTEExtension.registerFilterStylesStrategy(RTETableHeadCellBlock.name, new TableCellFilterStylesStrategy('th'));
+  VegaRTEExtension.registerFilterStylesStrategy(RTETableBlock.dtoName, new TableBlockFilterStylesStrategy());
+  VegaRTEExtension.registerFilterStylesStrategy(RTETableCaptionBlock.dtoName, new TableCaptionFilterStylesStrategy());
+  VegaRTEExtension.registerFilterStylesStrategy(RTETableCellBlock.dtoName, new TableCellFilterStylesStrategy());
+  VegaRTEExtension.registerFilterStylesStrategy(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 ModifyContentAction {
-  constructor(rteRange, nodeToBeInserted) {
-    super();
-    this.type = ModifyContentActionType.INSERT_NODE_TO_NEAREST_ROOT;
-    this.rteRange = rteRange;
-    this.nodeToBeInserted = nodeToBeInserted;
+class RTEHorizontalLineNode extends 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 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(generateUUID(), key, label, block);
-      tokenNode.annotationMap.set('CUSTOM_ATTRIBUTE', new 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 ElementToDTOStrategy {
+class HorizontalLineFilterStylesStrategy extends 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 = htmlElementToAnnotationGenerator.generate(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: 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 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 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 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) || generateUUID();
+    const node = new RTEHorizontalLineNode(nodeId, hrBlock);
+    hrBlock.children = [node];
+    if (block.annotations) {
+      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(generateUUID(), options);
+    const node = new RTEHorizontalLineNode(generateUUID(), hrBlock);
+    hrBlock.children = [node];
+    if (annotations) {
+      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 = [RTEDecoratorNode.DECORATOR_NODE_CLASS, annotationClasses]
+      .filter(Boolean)
+      .join(' ');
+    return createElement('div', {
+      key: block.id,
+      class: `v-rte-horizontal-line ${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 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: 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 ||
+          !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 UpdateCursorPositionAction(action.nextFocusNode, 0));
+      }
+      flushValue(host.value);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  handleDropdownClick() {
+    // No dropdown for horizontal line
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'horizontal-line': HorizontalLine,
+  });
+})();
+
+/**
+ * Strategy to convert `<hr>` HTML elements into RTEHorizontalLineBlock instances.
+ */
+class HrToHorizontalLineBlockStrategy extends 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 = 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 ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const hrBlock = RTEHorizontalLineBlock.create();
+    if (action.splitPointNode instanceof 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 InsertChildrenBeforeAction(target, hrBlock));
+        action.nextFocusNode = target.getFirstNode();
+      }
+      else {
+        const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+        target.apply(splitBlockAction);
+        const nextBlock = this.getNextSiblingBlock(target);
+        target.parent.apply(new 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 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 RTETextNode) {
+      target.parent.apply(new InsertChildrenAfterAction(target, hrBlock));
+      action.nextFocusNode = nextFirstNode;
+    }
+    else {
+      const emptyParagraph = super.createNewParagraph('');
+      target.parent.apply(new 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(VegaRTEContent.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(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.addUniqueObserverToNode(ref, 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.addUniqueObserverToNode(ref, 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 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 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(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 InsertChildrenBeforeAction(lineBreakNode, newTextNode);
+      insertAction.isFlushable = true;
+      textBlock.apply(insertAction);
+      return newTextNode;
+    }
+    const updateAction = new UpdateTextAction(text);
+    updateAction.isFlushable = true;
+    lineBreakNode.apply(updateAction);
+    return lineBreakNode;
+  }
+}
+(() => {
+  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 BlockAnnotation {
+  constructor(lineHeight) {
+    super();
+    this.type = RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT;
+    this.lineHeight = lineHeight;
+  }
+  /**
+   * Generate the map item for the annotation.
+   *
+   * @param {string} lineHeight - Line height value.
+   * @returns {[RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT, LineHeightAnnotation]} Map item for the annotation.
+   */
+  static from(lineHeight) {
+    return [RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT, new LineHeightAnnotation(lineHeight)];
+  }
+  /**
+   * Get the default standalone styles for a given line height value.
+   *
+   * @param {string} lineHeight - The line height value.
+   * @returns {AnnotationStyle} The default standalone styles.
+   */
+  static getDefaultStyles(lineHeight) {
+    return { lineHeight };
+  }
+  /**
+   * Generate the JSON item of the annotation.
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation.
+   */
+  toJSON() {
+    return {
+      lineHeight: this.lineHeight,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new LineHeightAnnotation(this.lineHeight);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
+    return LineHeightAnnotation.getDefaultStyles(this.lineHeight);
+  }
+}
+
+/**
+ * Action to update block line height annotation.
+ */
+class LineHeightAnnotationAction extends AnnotationAction {
+  constructor(lineHeight) {
+    super();
+    this.isFlushable = true;
+    this.lineHeight = lineHeight;
+  }
+  /**
+   * Converts the action to an annotation.
+   *
+   * @returns {LineHeightAnnotation} The annotation.
+   */
+  toAnnotation() {
+    return new LineHeightAnnotation(this.lineHeight);
+  }
+}
+
+/**
+ * Update the block line height strategy.
+ *
+ * Registered for RTETextBlock and RTEListItemBlock, so the
+ * target type is widened to the common RTEBlock base.
+ */
+class BlockUpdateLineHeightStrategy extends ActionHandleStrategy {
+  /**
+   * Updating the line height of a block requires cascading updates to the custom style.
+   *
+   * @param {LineHeightAnnotationAction} _action - The line height annotation action.
+   * @param {RTEBlock} target - The current block.
+   */
+  handleAction(_action, target) {
+    this.updateCustomStyleAnnotation(target, ['lineHeight']);
+  }
+}
+
+const lineHeight = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor"  d="M113.8 39.9c-4.6-5.1-11-7.9-17.8-7.9s-13.3 2.9-17.8 7.9l-72 80c-8.9 9.9-8.1 25 1.8 33.9s25 8.1 33.9-1.8L72 118.5V393.5L41.8 359.9c-8.9-9.9-24-10.7-33.9-1.8s-10.7 24-1.8 33.9l72 80c4.6 5.1 11 7.9 17.8 7.9s13.3-2.9 17.8-7.9l72-80c8.9-9.9 8.1-25-1.8-33.9s-25-8.1-33.9 1.8L120 393.5V118.5l30.2 33.5c8.9 9.9 24 10.7 33.9 1.8s10.7-24 1.8-33.9l-72-80zM248 72c-13.3 0-24 10.7-24 24s10.7 24 24 24H552c13.3 0 24-10.7 24-24s-10.7-24-24-24H248zm0 160c-13.3 0-24 10.7-24 24s10.7 24 24 24H552c13.3 0 24-10.7 24-24s-10.7-24-24-24H248zM224 416c0 13.3 10.7 24 24 24H552c13.3 0 24-10.7 24-24s-10.7-24-24-24H248c-13.3 0-24 10.7-24 24z"/></svg>`,
+};
+
+/**
+ * Renderer for the line-height toolbar button in the Vega Rich Text Editor.
+ */
+class RTELineHeightToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  constructor(options) {
+    super();
+    this.options = options;
+  }
+  /**
+   * @inheritDoc
+   */
+  render(createElement, editorContext) {
+    const dropdownItems = this.options.map((item) => {
+      var _a;
+      return ({
+        key: item.value,
+        label: (_a = item.title) !== null && _a !== void 0 ? _a : item.value,
+      });
+    });
+    return this.renderDropdown(createElement, editorContext, {
+      selectType: 'single',
+      selectedSourceKey: this.getSelectedSourceValue(editorContext),
+    }, [
+      this.renderButton(createElement, editorContext, {
+        icon: 'line-height',
+        showArrowIcon: true,
+        tooltip: { text: VegaInternalTranslation.t('Line Height') },
+      }),
+      this.renderDropdownListTemplate(createElement, dropdownItems),
+    ]);
+  }
+  /**
+   * @inheritDoc
+   */
+  isSelected() {
+    return false;
+  }
+  /**
+   * @inheritDoc
+   */
+  isDisabled(editorContext) {
+    var _a;
+    if (editorContext.host.disabled) {
+      return true;
+    }
+    const extensionContext = this.getExtensionContext(editorContext.host);
+    const selectedNodes = (_a = extensionContext === null || extensionContext === void 0 ? void 0 : extensionContext.getSelectedNodes()) !== null && _a !== void 0 ? _a : [];
+    if (selectedNodes.some((node) => {
+      var _a;
+      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        node.parent instanceof RTECodeBlock;
+    })) {
+      return true;
+    }
+    const selectedBlocks = this.getSelectedBlocks(editorContext);
+    return selectedBlocks.some((block) => block instanceof RTECodeBlock ||
+      block instanceof RTEImageBlock ||
+      !ActionHandleStrategyRegistry.canHandle(LineHeightAnnotationAction.name, block));
+  }
+  /**
+   * @inheritDoc
+   */
+  handleDropdownClick(itemValue, editorContext) {
+    const selectedLineHeight = itemValue;
+    const selectedBlocks = this.getSelectedBlocks(editorContext);
+    selectedBlocks.forEach((block) => {
+      block.apply(new LineHeightAnnotationAction(selectedLineHeight));
+    });
+  }
+  /**
+   * Handle direct toolbar button click.
+   */
+  handleButtonClick() {
+    // No direct click action; selection happens in dropdown options.
+  }
+  /**
+   * Get the selected line-height key for dropdown selection state.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - Current toolbar context.
+   * @returns {string} Selected line-height key or empty string for mixed/none.
+   */
+  getSelectedSourceValue(editorContext) {
+    const selectedBlocks = this.getSelectedBlocks(editorContext);
+    if (selectedBlocks.length === 0) {
+      return '';
+    }
+    const firstAnnotation = selectedBlocks[0].getAnnotationByType(RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT);
+    const isSameLineHeight = selectedBlocks.every((block) => {
+      const annotation = block.getAnnotationByType(RTELineHeightExtensionAnnotationTypeEnum.LINE_HEIGHT);
+      return (annotation === null || annotation === void 0 ? void 0 : annotation.lineHeight) === (firstAnnotation === null || firstAnnotation === void 0 ? void 0 : firstAnnotation.lineHeight);
+    });
+    return isSameLineHeight && firstAnnotation ? firstAnnotation.lineHeight : '';
+  }
+  /**
+   * Resolve selected blocks from selected nodes with range fallback.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - Current toolbar context.
+   * @returns {RTEBlock[]} Selected blocks.
+   */
+  getSelectedBlocks(editorContext) {
+    var _a, _b;
+    const extensionContext = this.getExtensionContext(editorContext.host);
+    const selectedNodes = (_a = extensionContext === null || extensionContext === void 0 ? void 0 : extensionContext.getSelectedNodes()) !== null && _a !== void 0 ? _a : [];
+    const selectedBlocks = [];
+    selectedNodes.forEach((node) => {
+      if (node.parent instanceof RTEBlock && !selectedBlocks.includes(node.parent)) {
+        selectedBlocks.push(node.parent);
+      }
+    });
+    if (selectedBlocks.length === 0 && ((_b = editorContext.rteRange.startNode) === null || _b === void 0 ? void 0 : _b.parent) instanceof RTEBlock) {
+      selectedBlocks.push(editorContext.rteRange.startNode.parent);
+    }
+    return selectedBlocks;
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'line-height': lineHeight,
+  });
+})();
+
+const LINE_HEIGHT_AWARE_BLOCK_NAMES = new Set([
+  RTETextBlock.name,
+  RTEListItemBlock.name,
+]);
+/** Handle line height annotation. */
+class LineHeightAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  constructor(options = VegaRTEDefaultLineHeightOptions) {
+    super();
+    this.allowedLineHeights = new Set(options.map((option) => option.value));
+  }
+  /**
+   * Can be handled.
+   *
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @returns {boolean} Whether the target DTO supports line-height annotations.
+   */
+  canHandle(targetDto) {
+    return LINE_HEIGHT_AWARE_BLOCK_NAMES.has(targetDto.name);
+  }
+  /**
+   * Extract inline `line-height` as a semantic `lineHeight` annotation.
+   *
+   * @param {HTMLElement} [element] - Current element.
+   * @returns {VegaRTEBlockAnnotations} `{ lineHeight }` when present, otherwise `{}`.
+   */
+  handle(element) {
+    var _a, _b;
+    const lineHeight = (_b = (_a = element === null || element === void 0 ? void 0 : element.style.lineHeight) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+    if (!lineHeight) {
+      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 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(CommonAnnotationTypeEnum.CUSTOM_STYLE);
+  if (existing) {
+    existing.customStyle = Object.assign(Object.assign({}, existing.customStyle), { lineHeight: value });
+  }
+  else {
+    block.annotationMap.set(...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));
+    [RTETextBlock, 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);
+  }
+}
+(() => {
+  [RTETextBlock, RTEListItemBlock].forEach((BlockClass) => {
+    VegaRTEExtension.registerActionHandleStrategy(BlockClass.name, LineHeightAnnotationAction.name, new BlockUpdateLineHeightStrategy());
+    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 ModifyContentAction {
+  constructor(rteRange, nodeToBeInserted) {
+    super();
+    this.type = 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 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(generateUUID(), key, label, block);
+      tokenNode.annotationMap.set('CUSTOM_ATTRIBUTE', new 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 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 = htmlElementToAnnotationGenerator.generate(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: 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 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);
   }
 }
 (() => {
@@ -7703,4 +9316,4 @@ class VegaRTETokenExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandleStrategy(RTEListItemBlock.name, 'INSERT_TOKEN_NODE', insertTokenNodeStrategy);
 })();
 
-export { ActionHandlerInterceptor as A, InsertNodeToNearestRootAction as I, RTETokenToolbarButtonRenderer as R, VegaLoader as V, VegaNotify as a, VegaEventManager$1 as b, VegaZIndexManager$1 as c, VegaSkeletonLoader as d, VegaTranslation as e, VegaRTETokenExtension as f, VegaRTELanguageExtension as g, VegaRTEFunctionExtension as h, VegaRTETableExtension as i, VegaRTEExtension as j, VegaRTEExtensionRenderer as k, VegaRTEToolbarButtonRenderer as l, RTETokenNode as m, RTETokenNodeRenderer as n, RTELanguageToolbarButtonRenderer as o, waitForVega as w };
+export { ActionHandlerInterceptor as A, InsertNodeToNearestRootAction as I, RTETokenToolbarButtonRenderer as R, VegaLoader as V, VegaNotify as a, VegaEventManager$1 as b, VegaZIndexManager$1 as c, VegaSkeletonLoader as d, VegaTranslation as e, VegaRTETokenExtension as f, VegaRTELanguageExtension as g, VegaRTEDefaultLineHeightOptions as h, VegaRTEFunctionExtension as i, VegaRTETableExtension as j, VegaRTEHorizontalLineExtension as k, VegaRTESpecialCharactersExtension as l, VegaRTESpecialCharactersEssentials as m, VegaRTESpecialCharactersLatin as n, VegaRTESpecialCharactersMathematical as o, VegaRTESpecialCharactersArrows as p, VegaRTESpecialCharactersCurrency as q, VegaRTESpecialCharactersText as r, VegaRTELineHeightExtension as s, VegaRTEExtension as t, VegaRTEExtensionRenderer as u, VegaRTEToolbarButtonRenderer as v, waitForVega as w, RTETokenNode as x, RTETokenNodeRenderer as y, RTELanguageToolbarButtonRenderer as z };