@globalpayments/vega 2.87.0 → 2.89.0

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

@@ -9,6 +9,8 @@ import { ActionHandlerInterceptorRegistry } from '../dto/action-handle-strategie
 import { methodPlaceholder } from 'vega-slimmer/core';
 import htmlElementToAnnotationGenerator from '../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
 import { RTEFilterStylesStrategyRegistry } from '../dto/filter-styles-strategies/filter-styles-strategy-registry';
+const patchedBlockClasses = new WeakSet();
+const annotationHandlersByClass = new WeakMap();
 /**
  * Abstract class for Vega Rich Text Editor extensions.
  */
@@ -49,6 +51,53 @@ export 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
@@ -71,7 +120,7 @@ export class VegaRTEExtension {
    */
   initialExtensionAfterLoad(context) {
     this.extensionContext = context;
-    rteExtensionContextManager.setExtensionContext(context);
+    rteExtensionContextManager.updateExtensionContext(context);
   }
   /**
    * Callback method invoked when the extension is destroyed.

package/dist/collection/components/vega-rich-text-editor/extensions/functions/dto/function-block.js

@@ -8,6 +8,7 @@ import { RTETextBlock } from '../../../dto/blocks/text-block';
 export class RTEFunctionBlock extends RTEBlock {
   constructor(id) {
     super(id);
+    this.dtoName = RTEFunctionBlock.dtoName;
     this.type = 'function-block';
     this.children = [];
   }
@@ -95,3 +96,4 @@ export class RTEFunctionBlock extends RTEBlock {
     return styles ? ` style="${styles}"` : '';
   }
 }
+RTEFunctionBlock.dtoName = 'RTEFunctionBlock';

package/dist/collection/components/vega-rich-text-editor/extensions/functions/dto/logic-control-block.js

@@ -6,6 +6,7 @@ import { RTELogicControlNode } from '../dto/logic-control-node';
 export class RTELogicControlBlock extends RTEBlock {
   constructor(id, statementText, parent) {
     super(id);
+    this.dtoName = RTELogicControlBlock.dtoName;
     this.type = 'logic-control-block';
     this.children = [];
     this.statementText = '';
@@ -71,3 +72,4 @@ export class RTELogicControlBlock extends RTEBlock {
     };
   }
 }
+RTELogicControlBlock.dtoName = 'RTELogicControlBlock';

package/dist/collection/components/vega-rich-text-editor/extensions/functions/dto/logic-control-node.js

@@ -6,6 +6,7 @@ import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-en
 export class RTELogicControlNode extends RTENode {
   constructor(id, text, parent) {
     super(id);
+    this.dtoName = RTELogicControlNode.dtoName;
     this.type = 'logic-control-node';
     this.text = '';
     this.text = text;
@@ -67,3 +68,4 @@ export class RTELogicControlNode extends RTENode {
     return false;
   }
 }
+RTELogicControlNode.dtoName = 'RTELogicControlNode';

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

@@ -27,7 +27,6 @@ const convertFunctionBlockStrategy = new DivToFunctionBlockStrategy();
 export class VegaRTEFunctionExtension extends VegaRTEExtension {
   constructor() {
     super();
-    this.toolbarButtonRenderer = new FunctionToolbarButtonRenderer();
     this.registerBlockBasicStrategies(RTELogicControlBlock.name);
     this.registerBlockBasicStrategies(RTEFunctionBlock.name);
     this.preventFunctionBlockDefaultInsertNewParagraph();
@@ -35,11 +34,14 @@ export 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
    */

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/action-handler-strategies/horizontal-line-block-insert-strategy.js

@@ -0,0 +1,79 @@
+import { AppendChildrenAction } from '../../../dto/actions/append-child-nodes-action';
+import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
+import { InsertChildrenBeforeAction } from '../../../dto/actions/insert-children-before-block';
+import { SplitBlockWithNodeAction } from '../../../dto/actions/split-block-with-node-action';
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { RTEHorizontalLineBlock } from '../dto/horizontal-line-block';
+import { RTETextNode } from '../../../dto/nodes/text-node';
+/**
+ * Strategy to handle the insertion of a horizontal line block into the rich text editor.
+ * Follows the same pattern as BlockInsertImageIntoTextStrategy (before/after/split).
+ */
+export 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];
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/action-handler-strategies/hr-to-horizontal-line-block-strategy.js

@@ -0,0 +1,45 @@
+import { ElementToDTOStrategy } from '../../../slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract';
+import { RTEHorizontalLineBlock } from '../dto/horizontal-line-block';
+import htmlElementToAnnotationGenerator from '../../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
+/**
+ * Strategy to convert `<hr>` HTML elements into RTEHorizontalLineBlock instances.
+ */
+export 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;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/actions/insert-horizontal-line-block-action.js

@@ -0,0 +1,14 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export 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).
+ */
+export class InsertHorizontalLineBlockAction extends ModifyContentAction {
+  constructor(splitPointNode, startOffsetOfNode = 0) {
+    super();
+    this.type = INSERT_HORIZONTAL_LINE_BLOCK;
+    this.splitPointNode = splitPointNode;
+    this.startOffsetOfNode = startOffsetOfNode;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/assets/horizontal-line.js

@@ -0,0 +1,3 @@
+export default {
+  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>`,
+};

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/dto/horizontal-line-annotation.js

@@ -0,0 +1,63 @@
+import { BlockAnnotation } from '../../../dto/annotations/block-annotation.abstract';
+import { HR_DEFAULT_STYLES } from '../filter-styles-strategies/horizontal-line-block/horizontal-line-filter-styles-strategy';
+export 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.
+ */
+export 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
+   */
+  toJSON() {
+    // HR identity is captured by the block type; nothing to serialize.
+    return null;
+  }
+  /**
+   * @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();
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/dto/horizontal-line-block.js

@@ -0,0 +1,89 @@
+import { RTEBlock } from '../../../dto/blocks/block.abstract';
+import { RTEHorizontalLineNode } from './horizontal-line-node';
+import { generateUUID } from '../../../../../utils/misc';
+import { HorizontalLineAnnotation } from './horizontal-line-annotation';
+/**
+ * Horizontal line block — a block containing a single `<hr>` decorator node.
+ */
+export 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 {VegaRTECustomBlock} block - The block JSON to convert.
+   * @param {VegaRTETransformOptions} [options] - Transformation options.
+   * @returns {RTEHorizontalLineBlock} The created block instance.
+   */
+  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';

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/dto/horizontal-line-node.js

@@ -0,0 +1,32 @@
+import { RTEDecoratorNode } from '../../../dto/nodes/decorator-node';
+/**
+ * Horizontal line node — a decorator node representing `<hr>` in the editor.
+ */
+export 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>';
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/filter-styles-strategies/horizontal-line-block/horizontal-line-filter-styles-strategy.js

@@ -0,0 +1,45 @@
+import { RTEFilterStylesStrategy, } from '../../../../dto/filter-styles-strategies/filter-styles-strategy.abstract';
+import { Predicate } from './predicate';
+/**
+ * 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.
+ */
+export const HR_DEFAULT_STYLES = {
+  display: 'inline-block',
+  width: '100%',
+  height: '4px',
+  backgroundColor: 'rgb(222, 222, 222)',
+  borderWidth: '0px',
+};
+/**
+ * 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.
+ */
+export class HorizontalLineFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = HR_DEFAULT_STYLES;
+    this.elementTagName = 'hr';
+  }
+  /**
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return Predicate.isHorizontalLineBlock(blockOrNodeInstance.dtoName);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(_blockOrNodeClassName, element) {
+    return element.tagName.toLowerCase() === this.elementTagName;
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/filter-styles-strategies/horizontal-line-block/predicate.js

@@ -0,0 +1,14 @@
+/**
+ * Predicate class provides static methods to check specific conditions on HTML elements or dto instances.
+ */
+export class Predicate {
+  /**
+   * 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.
+   */
+  static isHorizontalLineBlock(className) {
+    return className === 'RTEHorizontalLineBlock';
+  }
+}

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

@@ -0,0 +1,41 @@
+import { VegaRTEExtension } from '../extension.abstract';
+import { RTEHorizontalLineBlock } from './dto/horizontal-line-block';
+import { RTEHorizontalLineBlockRenderer } from './renderers/horizontal-line-block-renderer';
+import { RTEHorizontalLineToolbarButtonRenderer } from './renderers/horizontal-line-toolbar-button-renderer';
+import { HrToHorizontalLineBlockStrategy } from './action-handler-strategies/hr-to-horizontal-line-block-strategy';
+import { InsertHorizontalLineBlockStrategy } from './action-handler-strategies/horizontal-line-block-insert-strategy';
+import { INSERT_HORIZONTAL_LINE_BLOCK } from './actions/insert-horizontal-line-block-action';
+import { RTETextBlock } from '../../dto/blocks/text-block';
+import { RTEImageBlock } from '../../dto/blocks/image-block';
+import { VegaRTEContent } from '../../dto/content-state';
+import { HorizontalLineFilterStylesStrategy } from './filter-styles-strategies/horizontal-line-block/horizontal-line-filter-styles-strategy';
+/**
+ * Extension that adds horizontal line (`<hr>`) support to the Vega Rich Text Editor.
+ */
+export 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);
+})();

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/renderers/horizontal-line-block-renderer.js

@@ -0,0 +1,37 @@
+import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
+import { RTEDecoratorNode } from '../../../dto/nodes/decorator-node';
+import styles from './horizontal-line-block-styles.css';
+/**
+ * Renderer for horizontal line blocks in the rich text editor.
+ */
+export 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 styles;
+  }
+}