@globalpayments/vega 2.96.0 → 2.97.0

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/keyboard-link-handler.js

@@ -0,0 +1,297 @@
+import { BaseHandler } from './base-handler';
+import { findParent } from '../../../../../../utils/ui';
+import stateEntityRenderingRegistry from '../../../controllers/state-entity-rendering-registry';
+import { RTETextNode } from '../../../../dto/nodes/text-node';
+import { RTEBlock } from '../../../../dto/blocks/block.abstract';
+/**
+ * Handles keyboard-based rich text link interactions (Escape close, Tab into the link popover, and
+ * the Command/Control+K open shortcut). Follows the input-event handler workflow so the keyboard
+ * link logic stays consistent with the other RTE handlers.
+ */
+export class KeyboardLinkHandler extends BaseHandler {
+  constructor() {
+    super(...arguments);
+    this.activeLinkEditor = null;
+    this.activeLinkWrapper = null;
+    this.linkPopoverHideHandler = null;
+    this.linkPopoverHideOwner = null;
+  }
+  /**
+   * Handles keyboard shortcuts for link popover open, close, and focus behavior.
+   *
+   * @param {KeyboardEvent} [event] - The keydown event fired from the editor.
+   */
+  handleEvent(event) {
+    if (!event) {
+      return;
+    }
+    if (event.key === 'Escape') {
+      if (this.activeLinkEditor) {
+        event.preventDefault();
+        event.stopPropagation();
+        void this.activeLinkEditor.hide();
+        return;
+      }
+      const linkWrapper = this.getFocusedLinkWrapper(event.target);
+      const linkEditor = this.getLinkEditorFromWrapper(linkWrapper);
+      if (linkEditor) {
+        event.preventDefault();
+        event.stopPropagation();
+        void linkEditor.hide();
+        return;
+      }
+    }
+    const linkWrapper = this.getFocusedLinkWrapper(event.target);
+    if (event.key === 'Tab' && !event.shiftKey && this.focusVisibleLinkPopoverAction(linkWrapper)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const linkEditor = this.getLinkEditorFromWrapper(linkWrapper) || this.activeLinkEditor;
+      if (linkWrapper && linkEditor) {
+        this.registerLinkPopoverHideHandler(linkEditor, () => {
+          this.handleLinkPopoverHide(linkEditor, linkWrapper);
+        });
+      }
+      return;
+    }
+    const isOpenLinkShortcut = (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k';
+    if (!isOpenLinkShortcut || !linkWrapper) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const linkEditor = linkWrapper.querySelector('vega-rich-text-link-editor');
+    if (!linkEditor) {
+      return;
+    }
+    this.activeLinkEditor = linkEditor;
+    this.activeLinkWrapper = linkWrapper;
+    this.registerLinkPopoverHideHandler(linkEditor, () => {
+      this.handleLinkPopoverHide(linkEditor, linkWrapper);
+    });
+    void linkEditor.show();
+  }
+  /**
+   * Releases any registered popover-hide listener when the owning controller is torn down.
+   */
+  dispose() {
+    this.unregisterLinkPopoverHideHandler();
+  }
+  /**
+   * Registers a one-time hide listener on the currently open link editor popover.
+   *
+   * @param {Nullable<HTMLElement>} linkEditor - Link editor that owns the popover.
+   * @param {EventListener} handler - Callback invoked when the popover hides.
+   */
+  registerLinkPopoverHideHandler(linkEditor, handler) {
+    const linkPopoverHideOwner = this.getLinkEditorPopover(linkEditor);
+    if (!linkPopoverHideOwner) {
+      return;
+    }
+    this.unregisterLinkPopoverHideHandler();
+    this.linkPopoverHideHandler = this.onLinkPopoverHide.bind(this, handler);
+    this.linkPopoverHideOwner = linkPopoverHideOwner;
+    linkPopoverHideOwner.addEventListener('vegaPopoverHide', this.linkPopoverHideHandler, {
+      once: true,
+    });
+  }
+  /**
+   * Executes the registered popover-hide callback and clears hide-listener state.
+   *
+   * @param {EventListener} handler - Registered callback for popover hide.
+   * @param {Event} event - Hide event payload.
+   */
+  onLinkPopoverHide(handler, event) {
+    handler(event);
+    this.linkPopoverHideHandler = null;
+    this.linkPopoverHideOwner = null;
+  }
+  /**
+   * Removes the currently registered popover hide listener if present.
+   */
+  unregisterLinkPopoverHideHandler() {
+    if (this.linkPopoverHideOwner && this.linkPopoverHideHandler) {
+      this.linkPopoverHideOwner.removeEventListener('vegaPopoverHide', this.linkPopoverHideHandler);
+    }
+    this.linkPopoverHideHandler = null;
+    this.linkPopoverHideOwner = null;
+  }
+  /**
+   * Resolves the closest focused link wrapper from event target or current selection.
+   *
+   * @param {EventTarget | null} target - Event target from the keydown event.
+   * @returns {Nullable<HTMLElement>} Link wrapper element if found.
+   */
+  getFocusedLinkWrapper(target) {
+    var _a;
+    const targetElement = target && target.nodeType === Node.ELEMENT_NODE ? target : null;
+    if (targetElement) {
+      const directWrapper = targetElement.classList.contains('link-editor-wrapper')
+        ? targetElement
+        : findParent(targetElement, '.link-editor-wrapper');
+      if (directWrapper) {
+        return directWrapper;
+      }
+    }
+    const anchorNode = ((_a = this.selectionController.getSelection()) === null || _a === void 0 ? void 0 : _a.anchorNode) || null;
+    const anchorElement = (anchorNode === null || anchorNode === void 0 ? void 0 : anchorNode.nodeType) === Node.ELEMENT_NODE
+      ? anchorNode
+      : (anchorNode === null || anchorNode === void 0 ? void 0 : anchorNode.parentElement) || null;
+    if (!anchorElement) {
+      return null;
+    }
+    return anchorElement.classList.contains('link-editor-wrapper')
+      ? anchorElement
+      : findParent(anchorElement, '.link-editor-wrapper');
+  }
+  /**
+   * Finds the link editor element inside a link wrapper.
+   *
+   * @typedef HTMLVegaRichTextLinkEditorElement - The type of the link editor element.
+   * @param {Nullable<HTMLElement>} linkWrapper - Wrapper that may contain the link editor component.
+   * @returns {Nullable<HTMLVegaRichTextLinkEditorElement>} Link editor if present.
+   */
+  getLinkEditorFromWrapper(linkWrapper) {
+    return ((linkWrapper === null || linkWrapper === void 0 ? void 0 : linkWrapper.querySelector('vega-rich-text-link-editor')) ||
+      null);
+  }
+  /**
+   * Gets the popover element rendered by a link editor.
+   *
+   * @param {Nullable<HTMLElement>} linkEditor - Link editor owning the popover.
+   * @returns {Nullable<LinkEditorPopoverElement>} Popover element when available.
+   */
+  getLinkEditorPopover(linkEditor) {
+    var _a;
+    return ((_a = linkEditor === null || linkEditor === void 0 ? void 0 : linkEditor.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('vega-popover')) || null;
+  }
+  /**
+   * Returns the popover content box associated with a link editor.
+   *
+   * @param {Nullable<HTMLElement>} linkEditor - Link editor owning the popover.
+   * @returns {Nullable<HTMLElement>} Popover content box element.
+   */
+  getLinkEditorPopoverContentBox(linkEditor) {
+    var _a, _b;
+    const popover = this.getLinkEditorPopover(linkEditor);
+    return ((_b = (_a = popover === null || popover === void 0 ? void 0 : popover.appenderRenderer) === null || _a === void 0 ? void 0 : _a.getPopoverContentBox) === null || _b === void 0 ? void 0 : _b.call(_a)) || null;
+  }
+  /**
+   * Clears active link editor state and restores focus to the provided wrapper.
+   *
+   * @param {Nullable<HTMLElement>} linkEditor - Link editor that has just hidden.
+   * @param {Nullable<HTMLElement>} [focusTarget] - Optional element to receive focus.
+   */
+  handleLinkPopoverHide(linkEditor, focusTarget) {
+    const resolvedFocusTarget = focusTarget || this.activeLinkWrapper;
+    if (!linkEditor || this.activeLinkEditor === linkEditor) {
+      this.activeLinkEditor = null;
+      this.activeLinkWrapper = null;
+    }
+    if (resolvedFocusTarget) {
+      this.placeLinkCaretAtEnd(resolvedFocusTarget);
+    }
+  }
+  /**
+   * Focuses the first visible link action in the current link popover.
+   *
+   * @param {Nullable<HTMLElement>} [linkWrapper] - Optional focused link wrapper context.
+   * @returns {boolean} True when focus moved to an action button.
+   */
+  focusVisibleLinkPopoverAction(linkWrapper) {
+    var _a;
+    const ownerDocument = ((_a = this.richTextEditorRef) === null || _a === void 0 ? void 0 : _a.ownerDocument) || null;
+    if (!ownerDocument) {
+      return false;
+    }
+    const linkEditor = this.getLinkEditorFromWrapper(linkWrapper || null) || this.activeLinkEditor;
+    const popoverContentBox = this.getPreferredLinkActionPopover(ownerDocument, linkEditor);
+    if (!popoverContentBox) {
+      return false;
+    }
+    const focusableActionButton = this.getFirstFocusableLinkActionButton(popoverContentBox);
+    if (!focusableActionButton) {
+      return false;
+    }
+    focusableActionButton.focus();
+    return true;
+  }
+  /**
+   * Prefers a scoped link-action popover and falls back to globally visible ones.
+   *
+   * @param {Document} ownerDocument - Document owning editor popovers.
+   * @param {Nullable<HTMLElement>} [linkEditor] - Optional scoped link editor.
+   * @returns {Nullable<HTMLElement>} Best popover content box to target.
+   */
+  getPreferredLinkActionPopover(ownerDocument, linkEditor) {
+    const scopedPopoverContentBox = this.getLinkEditorPopoverContentBox(linkEditor || null);
+    if (scopedPopoverContentBox &&
+      !scopedPopoverContentBox.classList.contains('vega-force-hidden') &&
+      this.isLinkActionPopover(scopedPopoverContentBox)) {
+      return scopedPopoverContentBox;
+    }
+    const popoverContentBoxes = Array.from(ownerDocument.querySelectorAll('vega-popover-content-box'));
+    const linkActionPopovers = popoverContentBoxes.filter((box) => this.isLinkActionPopover(box));
+    const visibleLinkActionPopovers = linkActionPopovers.filter((box) => !box.classList.contains('vega-force-hidden'));
+    return visibleLinkActionPopovers[visibleLinkActionPopovers.length - 1] || null;
+  }
+  /**
+   * Checks whether a popover represents the link action menu.
+   *
+   * @param {HTMLElement} popoverContentBox - Popover content box to inspect.
+   * @returns {boolean} True when both edit and unlink actions exist.
+   */
+  isLinkActionPopover(popoverContentBox) {
+    const items = Array.from(popoverContentBox.querySelectorAll('vega-button-group-item'));
+    const hasEditAction = items.some((item) => item.itemKey === 'edit');
+    const hasUnlinkAction = items.some((item) => item.itemKey === 'unlink');
+    return hasEditAction && hasUnlinkAction;
+  }
+  /**
+   * Gets the preferred focusable element from the first link action item.
+   *
+   * @param {HTMLElement} popoverContentBox - Link action popover content box.
+   * @returns {Nullable<HTMLElement>} Focusable anchor or button element.
+   */
+  getFirstFocusableLinkActionButton(popoverContentBox) {
+    var _a, _b, _c, _d;
+    const allItems = Array.from(popoverContentBox.querySelectorAll('vega-button-group-item'));
+    const firstActionItem = allItems.find((item) => item.itemKey === 'edit') ||
+      allItems[0] ||
+      null;
+    if (!firstActionItem) {
+      return null;
+    }
+    const firstActionLinkWrapper = ((_a = firstActionItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('vega-button-link')) || null;
+    const firstActionButtonWrapper = ((_b = firstActionItem.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('vega-button')) || null;
+    return (((_c = firstActionLinkWrapper === null || firstActionLinkWrapper === void 0 ? void 0 : firstActionLinkWrapper.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('a')) ||
+      ((_d = firstActionButtonWrapper === null || firstActionButtonWrapper === void 0 ? void 0 : firstActionButtonWrapper.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('button')) ||
+      null);
+  }
+  /**
+   * Places the editor caret at the end of the link when the popover closes.
+   *
+   * @param {Nullable<HTMLElement>} linkWrapper - The link wrapper element containing link text nodes.
+   */
+  placeLinkCaretAtEnd(linkWrapper) {
+    var _a;
+    if (!linkWrapper) {
+      return;
+    }
+    const allTextSpans = Array.from(linkWrapper.querySelectorAll('span'));
+    if (allTextSpans.length === 0) {
+      return;
+    }
+    const lastTextSpan = allTextSpans[allTextSpans.length - 1];
+    const lastNodeEntity = stateEntityRenderingRegistry.getEntityByDOM(lastTextSpan);
+    if (!lastNodeEntity || lastNodeEntity instanceof RTEBlock) {
+      return;
+    }
+    if (!(lastNodeEntity instanceof RTETextNode)) {
+      return;
+    }
+    const lastNode = lastNodeEntity;
+    const endOffset = ((_a = lastNode.text) === null || _a === void 0 ? void 0 : _a.length) || 0;
+    // Place caret at the end of the link when popover closes
+    this.selectionController.enqueueSelectionRangeFutureState(lastNode, endOffset, lastNode, endOffset, true);
+  }
+}

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

@@ -12,6 +12,7 @@ import { ForwardDeleteContentHandler } from './helper/input-event-handler/forwar
 import { BackwardDeleteContentHandler } from './helper/input-event-handler/backward-delete-content-handler';
 import { VegaRTEContent } from '../../dto/content-state';
 import { InsertPasteHandler } from './helper/input-event-handler/insert-paste-handler';
+import { KeyboardLinkHandler } from './helper/input-event-handler/keyboard-link-handler';
 import { generateUUID } from '../../../../utils/misc';
 import { RTECodeBlock } from '../../dto/blocks/code-block';
 /** Used to monitoring the user input actions by event listener */
@@ -24,6 +25,15 @@ export class UserInputController extends VegaSlimmer {
     this.forwardDeleteContentHandler = new ForwardDeleteContentHandler();
     this.backwardDeleteContentHandler = new BackwardDeleteContentHandler();
     this.insertPasteHandler = new InsertPasteHandler();
+    this.keyboardLinkHandler = new KeyboardLinkHandler();
+    /**
+     * Dispatches editor keydown events to the keyboard link handler using the shared handler workflow.
+     *
+     * @param {KeyboardEvent} event - The keydown event fired from the editor.
+     */
+    this.handleKeyboardAction = (event) => {
+      this.keyboardLinkHandler.execute(this.value, this.selectionController, this.host, event);
+    };
     /**
      * When a user performs an input action within the editable element, this function is triggered.
      *
@@ -78,6 +88,7 @@ export class UserInputController extends VegaSlimmer {
     const editableElement = this.getEditableElementRef();
     if (editableElement) {
       editableElement.addEventListener('beforeinput', this.handleUserInputAction);
+      editableElement.addEventListener('keydown', this.handleKeyboardAction);
       editableElement.addEventListener('drop', this.preventDropEvent);
     }
   }
@@ -88,8 +99,10 @@ export class UserInputController extends VegaSlimmer {
     const editableElement = this.getEditableElementRef();
     if (editableElement) {
       editableElement.removeEventListener('beforeinput', this.handleUserInputAction);
+      editableElement.removeEventListener('keydown', this.handleKeyboardAction);
       editableElement.removeEventListener('drop', this.preventDropEvent);
     }
+    this.keyboardLinkHandler.dispose();
   }
   /**
    * The function `getEditableElementRef` returns a reference to the editable HTMLDivElement within a rich text editor.

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

@@ -27,12 +27,18 @@ export class LinkToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     this.handleLinkEditorChange = ({ detail, }) => {
       switch (detail.action) {
         case 'link': {
-          const { url, text } = detail.payload;
+          const { url, text, linkType } = detail.payload;
           const textChanged = text !== this.currentSelectedText;
           const groupKey = generateUUID();
           this.currentSelectedNodes.forEach((node) => {
             node.apply(new SelectionChangeAction(this.currentRange)).apply(new LinkAnnotationAction({
-              link: { href: url, groupKey: groupKey },
+              link: Object.assign({ href: url, groupKey: groupKey }, (linkType
+                ? {
+                  customAttribute: {
+                    'data-link-type': linkType,
+                  },
+                }
+                : {})),
               newText: textChanged ? text : undefined,
               needMergeNode: textChanged && this.currentSelectedNodes.length > 1,
               type: 'link',

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

@@ -21,7 +21,7 @@ import { LinkToolbarButtonSlimmer } from './slimmers/renderers/tools/link-toolba
 import { MoreIndentToolbarButtonSlimmer } from './slimmers/renderers/tools/more-indent-toolbar-button-slimmer';
 import { LessIndentToolbarButtonSlimmer } from './slimmers/renderers/tools/less-indent-toolbar-button-slimmer';
 import { ImageToolbarButtonSlimmer } from './slimmers/renderers/tools/image-toolbar-button-slimmer';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange, VegaImageInserted, VegaSourceCodeChange, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { TextColorToolbarButtonSlimmer } from './slimmers/renderers/tools/text-color-toolbar-button-slimmer';
@@ -153,6 +153,14 @@ export class VegaRichTextEditor {
      * @vegaVersion 2.88.0
      */
     this.optional = false;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Specifies a placeholder string that displays as a
      *    temporary hint or example within the rich text editor.
@@ -365,6 +373,30 @@ export class VegaRichTextEditor {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "placeholder": {
       "type": "string",
       "mutable": false,