@globalpayments/vega 2.60.0 → 2.62.0

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/token-node.js

@@ -0,0 +1,55 @@
+import { RTETextNode } from '../../dto/nodes/text-node';
+/**
+ * Token node for the Vega Rich Text Editor.
+ */
+export class RTETokenNode extends RTETextNode {
+  constructor(id, token, text, parentBlock, annotations) {
+    super(id, text, parentBlock, annotations);
+    this.type = 'token';
+    this.token = token;
+    this.text = text;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(value, parent) {
+    const node = new RTETokenNode(value.id, value.token, value.text, parent);
+    if (value.annotations) {
+      node.annotationMap = this.generateTextAnnotationMap(value.annotations);
+    }
+    return node;
+  }
+  /**
+   * Converts the token node to a JSON representation.
+   *
+   * @returns {VegaRTETokenNode} - The JSON representation of the token node.
+   */
+  toJSON() {
+    const json = super.toJSON();
+    return Object.assign({ id: this.id, type: this.type, text: this.text, token: this.token }, (json.annotations ? { annotations: json.annotations } : {}));
+  }
+  /**
+   * Determines if the token node is content editable.
+   *
+   * @returns {boolean} - Always returns false for token nodes.
+   */
+  isContentEditable() {
+    return false;
+  }
+  /**
+   * Clones the token node.
+   *
+   * @returns {RTETokenNode} - The cloned token node.
+   */
+  clone() {
+    return new RTETokenNode(this.id, this.token, this.text, this.parent, this.annotationMap);
+  }
+  /**
+   * Converts the token node to an HTML representation.
+   *
+   * @returns {string} - The HTML representation of the token node.
+   */
+  toHtml() {
+    return `<span class="token" contenteditable="false" template-token-key="${this.token}" token-key="${this.token}" ${super.generateAttributeString()}>${this.text}</span>`;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/token-toolbar-button-renderer.js

@@ -0,0 +1,88 @@
+import { methodPlaceholder } from 'vega-slimmer/core';
+import { VegaRTEToolbarButtonRenderer } from '../base-toolbar-button-renderer';
+import { ActionHandleStrategyRegistry } from '../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { InsertTokenNodeAction } from './insert-token-node-action';
+/**
+ * Renderer for the token toolbar button in the Vega Rich Text Editor.
+ */
+export class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  constructor(tokenList) {
+    super();
+    this.tokenList = [];
+    this.extensionContext = null;
+    this.tokenList = tokenList;
+  }
+  /**
+   * Sets the RTE extension context.
+   *
+   * @param {RTEExtensionContext} context - The context of the RTE extension.
+   */
+  injectExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Renders the token toolbar button.
+   *
+   * @param {VegaRTECreateElementFunction} createElement Function to create elements in the rich text editor.
+   * @param {VegaRTEToolbarRenderContext} editorContext The render context for the editor.
+   * @returns {VegaRTERenderResult} Token toolbar button.
+   */
+  render(createElement, editorContext) {
+    return this.renderDropdown(createElement, editorContext, {}, [
+      this.renderButton(createElement, editorContext, { label: 'Tokens', showArrowIcon: true }),
+      this.renderDropdownListTemplate(createElement, this.tokenList),
+    ]);
+  }
+  /**
+   * Checks if the token toolbar button is disabled.
+   *
+   * @returns {boolean} True if the button is disabled, false otherwise.
+   */
+  isDisabled() {
+    if (this.extensionContext) {
+      const { host, getSelectedNodes } = this.extensionContext;
+      const [startNode] = getSelectedNodes();
+      return startNode
+        ? host.disabled ||
+          !ActionHandleStrategyRegistry.canHandle('INSERT_TOKEN_NODE', startNode.parent)
+        : host.disabled;
+    }
+    return false;
+  }
+  /* istanbul ignore next */
+  /**
+   * Handles the button click event. No need this method for token button.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   */
+  handleButtonClick(editorContext) {
+    methodPlaceholder(editorContext);
+  }
+  /**
+   * Handles the token item click event from the dropdown.
+   *
+   * @param {string} itemKey - The key of the clicked token item.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   */
+  handleDropdownClick(itemKey, editorContext) {
+    const token = this.tokenList.find((t) => t.key === itemKey);
+    const { rteRange } = editorContext;
+    const { startNode } = rteRange;
+    if (startNode && startNode.parent) {
+      const action = new InsertTokenNodeAction(rteRange, token);
+      startNode.parent.apply(action);
+      if (action.actionHandleResult) {
+        this.flushEditorUI();
+      }
+    }
+  }
+  /**
+   * Refreshes the editor UI.
+   */
+  flushEditorUI() {
+    if (this.extensionContext) {
+      const { host, flushValue } = this.extensionContext;
+      flushValue(host.value);
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/public-api.js

@@ -0,0 +1,38 @@
+/* istanbul ignore file */
+export { VegaRTEContent } from './dto/content-state';
+// block and node
+export { RTENode } from './dto/nodes/node.abstract';
+export { RTEDecoratorNode } from './dto/nodes/decorator-node';
+export { RTETextNode } from './dto/nodes/text-node';
+export { RTETextBlock } from './dto/blocks/text-block';
+export { RTEBlock } from './dto/blocks/block.abstract';
+// extensions
+export { VegaRTEExtension } from './extensions/extension.abstract';
+export { VegaRTEExtensionRenderer } from './extensions/base-extension-renderer';
+export { VegaRTEToolbarButtonRenderer } from './extensions/base-toolbar-button-renderer';
+export { RTETokenToolbarButtonRenderer } from './extensions/tokens/token-toolbar-button-renderer';
+export { RTETokenNode } from './extensions/tokens/token-node';
+export { RTETokenNodeRenderer } from './extensions/tokens/token-node-renderer';
+export { VegaRTETokenExtension } from './extensions/tokens/token-extension';
+export { RTELanguageToolbarButtonRenderer } from './extensions/languages/language-toolbar-button-renderer';
+export { VegaRTELanguageExtension } from './extensions/languages/language-extension';
+// actions
+export { ModifyContentAction } from './dto/actions/modify-content-action.abstract';
+export { AppendChildrenAction } from './dto/actions/append-child-nodes-action';
+export { RemoveChildrenAction } from './dto/actions/remove-child-action';
+export { InsertChildrenAfterAction } from './dto/actions/insert-children-after-block';
+export { InsertChildrenBeforeAction } from './dto/actions/insert-children-before-block';
+export { InsertNodeToNearestRootAction } from './dto/actions/insert-node-to-nearest-root-action';
+export { UpdateCursorPositionAction } from './dto/actions/update-cursor-position-action';
+// annotations
+export { CustomAttributeAnnotation } from './dto/annotations/custom-attribute-annotation';
+export { CustomClassAnnotation } from './dto/annotations/custom-class-annotation';
+export { CustomStyleAnnotation } from './dto/annotations/custom-style-annotation';
+// modify content strategies
+export { ActionHandleStrategy } from './dto/action-handle-strategies/action-handle-strategy.abstract';
+// rteRange
+export { RTERange } from './dto/range';
+// element to DTO strategy
+export { ElementToDTOStrategy } from './slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract';
+// preset toolbar buttons
+export { VegaRTEPresetToolbarItems } from './constants/constant';

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/extension-controller.js

@@ -0,0 +1,97 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { isArrayEqual } from '../../../../utils/array';
+/**
+ * Inject the editor context to the extensions.
+ */
+export class RTEExtensionController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Flush the editor value to the host. Auto focus the last node if autoFocusLastNode is true.
+     *
+     * @param {VegaRTEContent} value - The content value to flush.
+     * @param {boolean} autoFocusLastNode - Whether to auto-focus the last node after flushing.
+     */
+    this.flushValue = (value, autoFocusLastNode = false) => {
+      if (this.host && value) {
+        void this.valueController.flushChanges(value, true);
+        if (autoFocusLastNode) {
+          const lastNode = this.host.value.getLastNode();
+          if (lastNode) {
+            this.selectionController.enqueueSelectionRangeFutureState(lastNode, lastNode.getRangeEndOffset());
+          }
+        }
+      }
+    };
+    /**
+     * Check if the editor is in source edit mode.
+     *
+     * @returns {boolean} - Whether the editor is in source edit mode.
+     */
+    this.isSourceEditMode = () => {
+      return this.sourceView;
+    };
+    /**
+     * Get the currently selected nodes in the editor.
+     *
+     * @returns {RTENode[]} - An array of currently selected RTENode objects.
+     */
+    this.getSelectedNodes = () => {
+      return this.selectionController.getSelectedNodes();
+    };
+  }
+  /**
+   * Initializes the extension context for all registered extensions.
+   * This method is called when the component is connected and whenever the extensions property changes.
+   */
+  initialExtensionContext() {
+    if (this.extensions && this.host) {
+      for (const extension of this.extensions) {
+        extension.initialExtension({
+          host: this.host,
+          flushValue: this.flushValue,
+          isSourceEditMode: this.isSourceEditMode,
+          getSelectedNodes: this.getSelectedNodes,
+        });
+      }
+    }
+  }
+  /**
+   * Update extension context when extensions property changes.
+   *
+   * @param {VegaRTEExtension[]} newValue - New extensions array.
+   * @param {VegaRTEExtension[]} oldValue - Old extensions array.
+   */
+  handleExtensionsChange(newValue, oldValue) {
+    if (!isArrayEqual(newValue, oldValue, false, (a, b) => a === b ? 0 : 1)) {
+      this.initialExtensionContext();
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], RTEExtensionController.prototype, "extensions", void 0);
+__decorate([
+  MapToComponentField()
+], RTEExtensionController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], RTEExtensionController.prototype, "sourceView", void 0);
+__decorate([
+  MapToComponentField()
+], RTEExtensionController.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], RTEExtensionController.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], RTEExtensionController.prototype, "initialExtensionContext", null);
+__decorate([
+  MapToComponentMethod('watchExtensions')
+], RTEExtensionController.prototype, "handleExtensionsChange", null);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/focus-controller.js

@@ -23,13 +23,15 @@ export class FocusController extends VegaSlimmer {
     this.doFocusOnLastTextNode = async (lastBlock) => {
       const lastNode = lastBlock.getLastNode();
       const dom = stateEntityRenderingRegistry.getDOMByEntity(lastNode);
-      if (!lastNode.isContentEditable()) {
-        this.setCaretRangeToNodeEnd(dom.parentElement, lastNode.getRangeEndOffset());
+      if (dom) {
+        if (!lastNode.isContentEditable()) {
+          this.setCaretRangeToNodeEnd(dom.parentElement, lastNode.getRangeEndOffset());
+        }
+        else {
+          this.setCaretRangeToNodeEnd(dom.firstChild, dom.firstChild.nodeValue.length);
+        }
+        await this.vegaRichTextEditorRenderer.getRichTextContentRef().vegaFocus();
       }
-      else {
-        this.setCaretRangeToNodeEnd(dom.firstChild, dom.firstChild.nodeValue.length);
-      }
-      await this.vegaRichTextEditorRenderer.getRichTextContentRef().vegaFocus();
     };
   }
   /**

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract.js

@@ -1,8 +1,20 @@
 import { isNonNullable } from '../../../../../../types/type-guard';
+import htmlElementToAnnotationGenerator from './annotation-handler/html-element-to-annotation-generator';
+import { RTETextNode } from '../../../../dto/nodes/text-node';
 /**
  * Abstract class to define strategies for processing HTML elements
  */
 export class ElementToDTOStrategy {
+  /**
+   * Convert element style attributes to text annotations.
+   *
+   * @param {HTMLElement} element - Current html element.
+   * @param {HtmlElementToAnnotationGenerateOptions} options - Options for generating annotations.
+   * @returns {VegaRTEAnnotations} - Generated annotations.
+   */
+  generateTextStyleAnnotations(element, options) {
+    return htmlElementToAnnotationGenerator.generate(RTETextNode, element, options);
+  }
 }
 /**
  * Class to represent the output of a strategy applied to HTML elements

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/selection-controller.js

@@ -179,7 +179,12 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
         this.enqueueSelectionRangeFutureState(startNode, ZERO_WIDTH_SPACE.length);
       }
       else {
-        this.enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset);
+        // Don't need update the range if the selected node is a non-editable text node, such as token node.
+        if (!(startNode === endNode &&
+          startNode instanceof RTETextNode &&
+          !startNode.isContentEditable())) {
+          this.enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset);
+        }
       }
       this.selectionState = null;
     }
@@ -190,10 +195,11 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
   handleSelectionChange() {
     if (this.disabled || this.sourceView)
       return;
+    // Clear previous selection when handling new selection always
+    this.clearSelectionMap();
     const selection = this.getSelection();
     if (!selection || selection.rangeCount === 0)
       return;
-    this.clearSelectionMap();
     this.saveSelection();
     const range = selection.getRangeAt(0);
     const commonAncestor = range.commonAncestorContainer;
@@ -312,7 +318,7 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
           startNode,
           endNode,
           startOffset: 0,
-          endOffset: endNode.text.length,
+          endOffset: endNode.getRangeEndOffset(),
         });
         this.selectionState = new RTESelectionState(this.currentRange);
       }

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/toolbar-renderer.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import RTEDTORendererManager from '../../../../helpers/rte-manager/dto-renderer-manager';
+import { isNonNullable } from '../../../../types/type-guard';
 export class ToolbarRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -46,32 +47,56 @@ export class ToolbarRenderer extends VegaSlimmer {
     };
   }
   render() {
+    const [renderedItems, totalVisibleCount] = this.renderToolbarItems();
     return (h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" },
       this.allowSourceEdit && (h(Fragment, null,
         h("div", { class: "toolbar-btn-group" }, this.sourceEditToolbarButtonSlimmer.render()),
-        !this.sourceView && this.toolbarItems.length > 0 && this.renderVegaDivider())),
-      this.toolbarItems.map((group) => {
-        return (h("div", { class: "toolbar-btn-group" }, group.map((item) => {
-          const presetRenderer = this.getToolbarBtnRenderer(item);
-          const customRenderer = RTEDTORendererManager.getRTEToolbarButtonRenderer(item);
-          if (presetRenderer) {
-            return presetRenderer.render();
-          }
-          else if (customRenderer) {
-            return customRenderer.render(h, {
-              host: this.host,
-              rteRange: this.selectionController.getCurrentRange(),
-              sourceEditMode: this.sourceView,
-            });
-          }
-          return null;
-        })));
-      })));
+        this.toolbarItems.length > 0 && totalVisibleCount > 0 && this.renderVegaDivider())),
+      renderedItems));
   }
   renderVegaDivider() {
     return (h("vega-box", { height: "size-32" },
       h("vega-divider", { direction: "vertical" })));
   }
+  /**
+   * Renders the toolbar items based on the configured toolbar groups and items.
+   *
+   * @returns {[HTMLElement[], number]} A tuple containing the rendered toolbar items and the count of displayed items.
+   */
+  renderToolbarItems() {
+    let totalVisibleCount = 0;
+    const renderedItems = this.toolbarItems.map((group) => {
+      let visibleCountPerGroup = 0;
+      const groupElement = group
+        .map((item) => {
+        const presetRenderer = this.getToolbarBtnRenderer(item);
+        const customRenderer = RTEDTORendererManager.getRTEToolbarButtonRenderer(item);
+        if (presetRenderer) {
+          if (!presetRenderer.isHidden()) {
+            totalVisibleCount++;
+            visibleCountPerGroup++;
+          }
+          return presetRenderer.render();
+        }
+        else if (customRenderer) {
+          const renderContext = {
+            sourceEditMode: this.sourceView,
+            host: this.host,
+            rteRange: this.selectionController.getCurrentRange(),
+          };
+          if (!customRenderer.isHidden(renderContext)) {
+            totalVisibleCount++;
+            visibleCountPerGroup++;
+          }
+          return customRenderer.render(h, renderContext);
+        }
+        return null;
+      })
+        .filter(isNonNullable);
+      return (h("div", { class: { 'toolbar-btn-group': true, 'vega-hidden': visibleCountPerGroup < 1 } }, groupElement));
+    });
+    return [renderedItems, totalVisibleCount];
+  }
 }
 __decorate([
   MapToComponentField()

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/link-toolbar-button-slimmer.js

@@ -17,6 +17,7 @@ import { SelectionChangeAction } from '../../../dto/actions/selection-change-act
 import { generateUUID } from '../../../../../utils/misc';
 import { waitForComponentDidRender } from '../../../../../helpers/common';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
+import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
 export class LinkToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
@@ -64,7 +65,8 @@ export class LinkToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       selectedBlocks.length > 1 ||
       selectedNodes.some((node) => {
         var _a;
-        return !(node instanceof RTETextNode) ||
+        return !(node instanceof RTETextNode &&
+          ActionHandleStrategyRegistry.canHandle(LinkAnnotationAction.name, node)) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
           ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code);
       }));

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/toolbar-button-slimmer.abstract.js

@@ -44,6 +44,12 @@ export class ToolbarButtonSlimmer extends VegaSlimmer {
   setIcon(icon) {
     this.icon = icon;
   }
+  /**
+   * Whether the button is hidden or not.
+   */
+  isHidden() {
+    return false;
+  }
   render() {
     return typeof this.renderBtnWrapper === 'function'
       ? this.renderBtnWrapper(this.renderBtn)
@@ -55,12 +61,6 @@ export class ToolbarButtonSlimmer extends VegaSlimmer {
   isDisabled() {
     return this.disabled;
   }
-  /**
-   * Whether the button is hidden or not.
-   */
-  isHidden() {
-    return false;
-  }
   preventLostFocus() {
     return {
       onMouseDown: (e) => e.preventDefault(),

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/visual-mode-toolbar-button-slimmer.abstract.js

@@ -13,15 +13,6 @@ export class VisualModeToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   constructor(config) {
     super(config);
   }
-  /**
-   * Determines if the button should be disabled.
-   * Determines whether should disable the button or not when the editor is not in source view mode, except for the source edit button.
-   *
-   * @returns {boolean} - True if the button is disabled, false otherwise.
-   */
-  isDisabled() {
-    return super.isDisabled() && !this.sourceView;
-  }
   /**
    * Determines if the button should be hidden.
    * Hide the button when the editor is in source view mode, except for the source edit button.
@@ -31,6 +22,15 @@ export class VisualModeToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isHidden() {
     return this.sourceView;
   }
+  /**
+   * Determines if the button should be disabled.
+   * Determines whether should disable the button or not when the editor is not in source view mode, except for the source edit button.
+   *
+   * @returns {boolean} - True if the button is disabled, false otherwise.
+   */
+  isDisabled() {
+    return super.isDisabled() && !this.sourceView;
+  }
 }
 __decorate([
   MapToComponentField()

package/dist/collection/components/vega-rich-text-editor/test/dto/content-state.test.js

@@ -2897,5 +2897,46 @@ Line 1
       expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toHtml()).toMatchSnapshot();
       expect(VegaRTEContent.fromJSON(content).toHtml()).toMatchSnapshot();
     });
+    it('should getLastNode work properly', () => {
+      const content = [
+        {
+          id: '1753954267610',
+          type: 'html-block',
+          htmlTag: 'section',
+          children: [
+            {
+              id: '1753954266383',
+              type: 'heading-1',
+              nodes: [
+                {
+                  id: '1753954273029',
+                  type: 'text',
+                  text: 'WWF',
+                },
+              ],
+            },
+            {
+              id: '1753954263572',
+              type: 'paragraph',
+              nodes: [
+                {
+                  id: '1753954266500',
+                  type: 'text',
+                  text: 'The World Wide Fund for Nature (WWF) is....',
+                },
+              ],
+            },
+          ],
+        },
+      ];
+      let instance = VegaRTEContent.fromJSON([]);
+      expect(instance.getLastNode()).toBeNull();
+      instance = VegaRTEContent.fromJSON(content);
+      expect(instance.getLastNode().toJSON()).toEqual({
+        id: '1753954266500',
+        type: 'text',
+        text: 'The World Wide Fund for Nature (WWF) is....',
+      });
+    });
   });
 });