@globalpayments/vega 2.92.0 → 2.94.0

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

@@ -0,0 +1,442 @@
+import { VegaRTEExtension } from '../extension.abstract';
+import { RTEPasteChooserUI } from './paste-chooser-ui';
+import { RTE_PASTE_MODE_DATA_TYPE } from './paste-constants';
+/**
+ * Vega Rich Text Editor paste extension.
+ * Intercepts keyboard paste and allows users to choose paste mode.
+ */
+export class VegaRTEPasteExtension extends VegaRTEExtension {
+  constructor() {
+    super(...arguments);
+    this.editableEl = null;
+    this.contentHostEl = null;
+    this.chooserUI = null;
+    this.pendingPastePayload = null;
+    this.listenerDocument = null;
+    this.listenerWindow = null;
+    /**
+     * Handles a native paste event by capturing the clipboard payload and
+     * rendering the paste-mode chooser.
+     *
+     * @param {ClipboardEvent} event Native clipboard paste event.
+     */
+    this.handlePasteEvent = (event) => {
+      var _a, _b;
+      const clipboardData = event.clipboardData;
+      if (!clipboardData) {
+        return;
+      }
+      // HTML is sanitized via DOMParser and ElementToDtoStrategyProcessor pipeline
+      const html = clipboardData.getData('text/html') || '';
+      const text = clipboardData.getData('text/plain') || '';
+      if (!html && !text) {
+        // Empty clipboard paste should not mutate editor content.
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      const range = this.cloneCurrentSelectionRange();
+      const selectedNodes = ((_b = (_a = this.extensionContext) === null || _a === void 0 ? void 0 : _a.getSelectedNodes) === null || _b === void 0 ? void 0 : _b.call(_a)) || [];
+      this.pendingPastePayload = { html, text, range, selectedNodes: [...selectedNodes] };
+      this.renderPasteChooser(event);
+    };
+    /**
+     * Dismisses the chooser when a pointer interaction occurs outside of it.
+     *
+     * @param {Event} event Pointer event captured on the document.
+     */
+    this.handleOutsidePointerDown = (event) => {
+      if (!this.chooserUI) {
+        return;
+      }
+      const eventPath = typeof event.composedPath === 'function' ? event.composedPath() : [];
+      if (this.chooserUI.includesEventPath(eventPath)) {
+        return;
+      }
+      this.clearPasteChooser();
+    };
+    /**
+     * Dismisses the chooser when the Escape key is pressed.
+     *
+     * @param {KeyboardEvent} event Keyboard event captured on the document.
+     */
+    this.handleOutsideKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        this.clearPasteChooser();
+      }
+    };
+    /**
+     * Dismisses the chooser when any relevant scroll container scrolls.
+     */
+    this.handleOutsideScroll = () => {
+      this.clearPasteChooser();
+    };
+  }
+  /** @inheritDoc */
+  initialExtensionAfterLoad(context) {
+    super.initialExtensionAfterLoad(context);
+    this.hostEl = context.host;
+    this.attachPasteListener();
+  }
+  /** @inheritDoc */
+  destroyExtension() {
+    this.detachPasteListener();
+    this.clearPasteChooser();
+  }
+  /**
+   * Attaches the paste listener to the editable element.
+   */
+  attachPasteListener() {
+    const { editableEl, contentHostEl, } = this.getEditorElements();
+    this.editableEl = editableEl;
+    this.contentHostEl = contentHostEl;
+    if (this.editableEl) {
+      this.editableEl.addEventListener('paste', this.handlePasteEvent);
+    }
+  }
+  /**
+   * Detaches the paste listener from the editable element.
+   */
+  detachPasteListener() {
+    if (this.editableEl) {
+      this.editableEl.removeEventListener('paste', this.handlePasteEvent);
+    }
+    this.editableEl = null;
+    this.contentHostEl = null;
+  }
+  /**
+   * Resolves the content host and editable element from the host shadow tree.
+   *
+   * @returns {EditorElements} Editor elements.
+   */
+  getEditorElements() {
+    var _a, _b, _c, _d, _e;
+    const contentHostEl = (_c = (_b = (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('vega-rich-text-content')) !== null && _c !== void 0 ? _c : null;
+    const editableEl = (_e = (_d = contentHostEl === null || contentHostEl === void 0 ? void 0 : contentHostEl.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.rich-text-content')) !== null && _e !== void 0 ? _e : null;
+    return { editableEl, contentHostEl };
+  }
+  /**
+   * Resolves the editable content element from the host shadow tree.
+   *
+   * @returns {HTMLDivElement | null} Editable element or `null` when unavailable.
+   */
+  getEditableElement() {
+    const { editableEl } = this.getEditorElements();
+    return editableEl;
+  }
+  /**
+   * Clones the current selection range so it can be restored after the user
+   * chooses a paste mode.
+   *
+   * @returns {Range | null} Cloned range or `null` when there is no selection.
+   */
+  cloneCurrentSelectionRange() {
+    var _a;
+    const selection = (_a = this.extensionContext) === null || _a === void 0 ? void 0 : _a.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      return selection.getRangeAt(0).cloneRange();
+    }
+    return null;
+  }
+  /**
+   * Renders the paste-mode chooser and wires up dismissal listeners.
+   *
+   * @param {ClipboardEvent} pasteEvent Originating paste event used for positioning.
+   */
+  renderPasteChooser(pasteEvent) {
+    var _a, _b;
+    const hostRoot = (_b = (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) !== null && _b !== void 0 ? _b : null;
+    if (!hostRoot) {
+      return;
+    }
+    this.clearPasteChooser(false);
+    const position = this.computeChooserPosition(pasteEvent);
+    this.chooserUI = new RTEPasteChooserUI(hostRoot, {
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      onModeSelect: (mode) => {
+        this.applyPasteMode(mode);
+      },
+    });
+    this.chooserUI.open(position);
+    this.listenerDocument = this.hostEl.ownerDocument;
+    this.listenerWindow = this.listenerDocument.defaultView;
+    this.listenerDocument.addEventListener('mousedown', this.handleOutsidePointerDown, true);
+    this.listenerDocument.addEventListener('keydown', this.handleOutsideKeyDown, true);
+    this.listenerDocument.addEventListener('scroll', this.handleOutsideScroll, true);
+    if (this.listenerWindow) {
+      this.listenerWindow.addEventListener('scroll', this.handleOutsideScroll, true);
+    }
+    if (this.contentHostEl) {
+      this.contentHostEl.addEventListener('scroll', this.handleOutsideScroll);
+    }
+  }
+  /**
+   * Computes the on-screen position for the chooser based on pointer or caret.
+   *
+   * @param {ClipboardEvent} event Originating paste event.
+   * @returns {ChooserPosition} Position in viewport coordinates.
+   */
+  computeChooserPosition(event) {
+    var _a, _b, _c;
+    const hostRect = this.hostEl.getBoundingClientRect();
+    const viewportHeight = (_b = (_a = this.hostEl.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.innerHeight) !== null && _b !== void 0 ? _b : window.innerHeight;
+    const pointerEvent = event;
+    const hasPointer = typeof pointerEvent.clientX === 'number' &&
+      pointerEvent.clientX > 0 &&
+      typeof pointerEvent.clientY === 'number' &&
+      pointerEvent.clientY > 0;
+    // For keyboard-initiated paste (Command/Control+V) clientX/Y are 0, so anchor
+    // the chooser to the current caret instead of a fixed host-relative spot.
+    const caretRect = hasPointer ? null : this.getCaretRect();
+    const CHOOSER_GAP_PX = 8;
+    const CHOOSER_MIN_MARGIN_PX = 12;
+    const CHOOSER_WIDTH_PX = 220;
+    const CHOOSER_FALLBACK_OFFSET_PX = 40;
+    const CHOOSER_MIN_VISIBLE_BELOW_SPACE_PX = 88;
+    const baseLeft = hasPointer
+      ? pointerEvent.clientX
+      : (_c = caretRect === null || caretRect === void 0 ? void 0 : caretRect.left) !== null && _c !== void 0 ? _c : hostRect.left + CHOOSER_MIN_MARGIN_PX;
+    const baseTop = hasPointer
+      ? pointerEvent.clientY
+      : caretRect
+        ? caretRect.bottom
+        : hostRect.top + CHOOSER_FALLBACK_OFFSET_PX;
+    const maxLeft = Math.max(hostRect.left + CHOOSER_MIN_MARGIN_PX, hostRect.right - CHOOSER_WIDTH_PX);
+    const left = Math.min(Math.max(baseLeft, hostRect.left + CHOOSER_MIN_MARGIN_PX), maxLeft);
+    const top = Math.max(baseTop + CHOOSER_GAP_PX, hostRect.top + CHOOSER_MIN_MARGIN_PX);
+    const availableBelow = viewportHeight - top - CHOOSER_MIN_MARGIN_PX;
+    const availableAbove = top - CHOOSER_MIN_MARGIN_PX;
+    const placement = availableBelow >= CHOOSER_MIN_VISIBLE_BELOW_SPACE_PX || availableBelow >= availableAbove
+      ? ['bottom', 'top']
+      : ['top', 'bottom'];
+    return { left, top, placement };
+  }
+  /**
+   * Resolves the bounding rect of the pending caret position.
+   *
+   * @returns {DOMRect | null} Caret rect or `null` when it cannot be determined.
+   */
+  getCaretRect() {
+    var _a, _b;
+    const range = (_b = (_a = this.pendingPastePayload) === null || _a === void 0 ? void 0 : _a.range) !== null && _b !== void 0 ? _b : this.cloneCurrentSelectionRange();
+    if (!range) {
+      return null;
+    }
+    const rect = range.getBoundingClientRect();
+    if (this.isUnavailableRect(rect)) {
+      // eslint-disable-next-line spellcheck/spell-checker
+      const domRectList = range.getClientRects();
+      if (domRectList.length > 0) {
+        return domRectList[0];
+      }
+      return this.getRangeContainerRect(range);
+    }
+    return rect;
+  }
+  /**
+   * Returns whether the browser could not resolve a meaningful caret rectangle.
+   *
+   * @param {DOMRect} rect Candidate caret rect.
+   * @returns {boolean} Whether the rect is unusable.
+   */
+  isUnavailableRect(rect) {
+    return rect.width === 0 && rect.height === 0 && rect.left === 0 && rect.top === 0;
+  }
+  /**
+   * Falls back to the range container or neighbor child node bounds.
+   *
+   * @param {Range} range Caret/selection range.
+   * @returns {DOMRect | null} Best-effort caret anchor rectangle.
+   */
+  getRangeContainerRect(range) {
+    var _a, _b, _c, _d, _e, _f;
+    const containerNode = (_a = range.startContainer) !== null && _a !== void 0 ? _a : null;
+    if (!containerNode) {
+      return null;
+    }
+    if (containerNode.nodeType === Node.ELEMENT_NODE) {
+      const containerElement = containerNode;
+      const previousNode = (_b = containerElement.childNodes[range.startOffset - 1]) !== null && _b !== void 0 ? _b : null;
+      const currentNode = (_c = containerElement.childNodes[range.startOffset]) !== null && _c !== void 0 ? _c : null;
+      return ((_e = (_d = this.getNodeRect(previousNode)) !== null && _d !== void 0 ? _d : this.getNodeRect(currentNode)) !== null && _e !== void 0 ? _e : this.getNodeRect(containerElement));
+    }
+    return (_f = this.getNodeRect(containerNode)) !== null && _f !== void 0 ? _f : this.getNodeRect(containerNode.parentNode);
+  }
+  /**
+   * Returns an element-backed rectangle from a DOM node.
+   *
+   * @param {Node | null} node Candidate node.
+   * @returns {DOMRect | null} Node rectangle when resolvable.
+   */
+  getNodeRect(node) {
+    var _a, _b;
+    if (!node) {
+      return null;
+    }
+    if (node.nodeType === Node.TEXT_NODE) {
+      return (_b = (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : null;
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const rect = node.getBoundingClientRect();
+      return this.isUnavailableRect(rect) ? null : rect;
+    }
+    return null;
+  }
+  /**
+   * Applies the chosen paste mode by dispatching a synthetic paste input event.
+   *
+   * @param {PasteMode} mode Selected paste mode.
+   */
+  applyPasteMode(mode) {
+    var _a;
+    if (!this.pendingPastePayload) {
+      this.clearPasteChooser();
+      return;
+    }
+    const editableEl = (_a = this.editableEl) !== null && _a !== void 0 ? _a : this.getEditableElement();
+    if (!editableEl) {
+      this.clearPasteChooser();
+      return;
+    }
+    editableEl.focus();
+    this.restoreSelectionRange(this.pendingPastePayload.range);
+    this.restoreSelectionControllerState(this.pendingPastePayload);
+    const dataTransfer = this.createDataTransfer(this.pendingPastePayload.html, this.pendingPastePayload.text, mode);
+    this.dispatchBeforeInputPaste(editableEl, dataTransfer);
+    this.clearPasteChooser();
+  }
+  /**
+   * Restores SelectionController state from the captured selection so synthetic
+   * beforeinput paste can replace the selected content instead of appending.
+   *
+   * @param {PendingPastePayload} payload Pending paste payload.
+   */
+  restoreSelectionControllerState(payload) {
+    if (!payload.range || !this.extensionContext) {
+      return;
+    }
+    const rangeOptions = {
+      startNode: payload.range.startContainer,
+      endNode: payload.range.endContainer,
+      startOffset: payload.range.startOffset,
+      endOffset: payload.range.endOffset,
+    };
+    this.extensionContext.setSelectedNodes(payload.selectedNodes || [], rangeOptions);
+  }
+  /**
+   * Restores a previously cloned selection range.
+   *
+   * @param {Range | null} range Range to restore.
+   */
+  restoreSelectionRange(range) {
+    var _a;
+    if (!range) {
+      return;
+    }
+    const selection = (_a = this.extensionContext) === null || _a === void 0 ? void 0 : _a.getSelection();
+    if (selection) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+  }
+  /**
+   * Dispatches a synthetic `beforeinput` paste event into the editor pipeline.
+   *
+   * @param {HTMLDivElement} editableEl Editable content element.
+   * @param {DataTransfer} dataTransfer Clipboard payload for the paste.
+   */
+  dispatchBeforeInputPaste(editableEl, dataTransfer) {
+    // This synthetic beforeinput event intentionally reuses the existing
+    // UserInputController -> insertFromPaste -> InsertPasteHandler pipeline.
+    const beforeInputEvent = new CustomEvent('beforeinput', {
+      bubbles: true,
+      cancelable: true,
+    });
+    try {
+      Object.defineProperties(beforeInputEvent, {
+        inputType: {
+          value: 'insertFromPaste',
+          configurable: true,
+        },
+        dataTransfer: {
+          value: dataTransfer,
+          configurable: true,
+        },
+      });
+    }
+    catch (_a) {
+      Object.assign(beforeInputEvent, {
+        inputType: 'insertFromPaste',
+        dataTransfer,
+      });
+    }
+    editableEl.dispatchEvent(beforeInputEvent);
+  }
+  /**
+   * Builds a `DataTransfer` payload carrying the paste content and mode marker.
+   *
+   * @param {string} html HTML clipboard content.
+   * @param {string} text Plain text clipboard content.
+   * @param {PasteMode} [mode] Selected paste mode marker.
+   * @returns {DataTransfer} Populated data transfer payload.
+   */
+  createDataTransfer(html, text, mode) {
+    if (typeof DataTransfer !== 'undefined') {
+      const dataTransfer = new DataTransfer();
+      if (html) {
+        dataTransfer.setData('text/html', html);
+      }
+      if (text) {
+        dataTransfer.setData('text/plain', text);
+      }
+      if (mode) {
+        dataTransfer.setData(RTE_PASTE_MODE_DATA_TYPE, mode);
+      }
+      return dataTransfer;
+    }
+    return {
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      getData: (type) => {
+        if (type === 'text/html') {
+          return html;
+        }
+        if (type === 'text/plain') {
+          return text;
+        }
+        if (type === RTE_PASTE_MODE_DATA_TYPE) {
+          return mode !== null && mode !== void 0 ? mode : '';
+        }
+        return '';
+      },
+    };
+  }
+  /**
+   * Tears down the chooser UI and removes dismissal listeners.
+   *
+   * @param {boolean} [clearPayload] Whether to also clear the pending payload.
+   */
+  clearPasteChooser(clearPayload = true) {
+    if (this.contentHostEl) {
+      this.contentHostEl.removeEventListener('scroll', this.handleOutsideScroll);
+    }
+    if (this.listenerWindow) {
+      this.listenerWindow.removeEventListener('scroll', this.handleOutsideScroll, true);
+      this.listenerWindow = null;
+    }
+    if (this.listenerDocument) {
+      this.listenerDocument.removeEventListener('mousedown', this.handleOutsidePointerDown, true);
+      this.listenerDocument.removeEventListener('keydown', this.handleOutsideKeyDown, true);
+      this.listenerDocument.removeEventListener('scroll', this.handleOutsideScroll, true);
+      this.listenerDocument = null;
+    }
+    if (this.chooserUI) {
+      this.chooserUI.destroy();
+    }
+    this.chooserUI = null;
+    if (clearPayload) {
+      this.pendingPastePayload = null;
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-renderer.js

@@ -101,7 +101,7 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
    * @param {HTMLElement} tableRef - The element that can triggered the table popover open.
    */
   handleTableRemove(renderData, tableRef) {
-    renderData.parent.apply(new DeleteTableBlockAction(renderData));
+    renderData.apply(new DeleteTableBlockAction(renderData));
     this.destroySelectionAnchor(tableRef);
   }
   /**

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-toolbar-popover-renderer.js

@@ -25,6 +25,7 @@ export class RTETableToolbarPopoverRenderer extends TablePopoverBaseRenderer {
       alignment: 'start',
       placement: 'bottom',
       showArrow: false,
+      isScreenPosition: true,
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (ref) => {
         if (ref) {

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

@@ -146,9 +146,10 @@ export class VegaRTETableExtension extends VegaRTEExtension {
   const insertTableBlockStrategy = new InsertTableBlockStrategy();
   const deleteTableBlockStrategy = new DeleteTableBlockStrategy();
   VegaRTEExtension.registerActionHandleStrategy(VegaRTEContent.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
-  VegaRTEExtension.registerActionHandleStrategy(VegaRTEContent.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
-  VegaRTEExtension.registerActionHandleStrategy(RTETableCellBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
-  VegaRTEExtension.registerActionHandleStrategy(RTETableHeadCellBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
+  // Registered on the table block itself (not its parent) so a table can always be
+  // deleted regardless of which block type it is nested in (root content, table cell,
+  // blockquote, or any future container).
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
   VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
   VegaRTEExtension.registerActionHandleStrategy(RTEImageBlock.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
   VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, INSERT_TABLE_ROW_INTO_DIFFERENT_SECTION, new InsertTableRowIntoDifferentSectionStrategy());

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/slimmers/renderers/vega-rich-text-table-properties-basic-form-field-renderer.abstract.js

@@ -216,7 +216,7 @@ export class VegaRichTextTablePropertiesBaseFormFieldRenderer extends VegaSlimme
               this.borderColorPickerRef.value = this.controller.getColorByKey(formValue['borderColor']);
             }
           });
-        }, trigger: "click" },
+        }, trigger: "click", isScreenPosition: true },
         h("div", { slot: "popover-content", class: "color-picker-container" },
           h("vega-input", { ref: this.handleFormChange, "data-vega-form": "borderColor", type: "hidden" }),
           h("span", { role: "button", tabIndex: 0, "aria-label": "Clear border color", onKeyDown: createEnterKeyHandlerToTriggerClick(), class: "display-color-placeholder color-none" })),

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/column-button-slimmer.js

@@ -32,7 +32,7 @@ export class ColumnButtonSlimmer extends TableSettingButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { isScreenPosition: true, minWidth: 210, trigger: "click", ref: (el) => {
+    return (h("vega-dropdown", { minWidth: 210, trigger: "click", ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownShow, this.handleDropdownVisibilityChange);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownHide, this.handleDropdownVisibilityChange);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/merge-cells-button-slimmer.js

@@ -35,7 +35,7 @@ export class MergeCellsButtonSlimmer extends TableSettingButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { isScreenPosition: true, minWidth: 150, trigger: "click", ref: (el) => {
+    return (h("vega-dropdown", { minWidth: 150, trigger: "click", ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownShow, this.handleDropdownVisibilityChange);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownHide, this.handleDropdownVisibilityChange);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/row-button-slimmer.js

@@ -23,7 +23,7 @@ export class RowButtonSlimmer extends TableSettingButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { isScreenPosition: true, minWidth: 180, trigger: "click", ref: (el) => {
+    return (h("vega-dropdown", { minWidth: 180, trigger: "click", ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
       } },
       renderBtn(),

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

@@ -2,23 +2,93 @@ import { dashCaseToCamel } from '../../../utils/string';
 /**
  * Creates a style map from the inline styles of an HTML element. This function extracts the 'style' attribute from the given element.
  *
+ * Manually parses the style string to handle complex CSS values that contain semicolons (e.g., data URLs),
+ * colons (e.g., https:// URLs), or commas (e.g., rgba, gradients). This approach avoids reliance on
+ * CSSStyleDeclaration's array-like behavior, which is inconsistent in Jest/JSDOM test environments.
+ *
  * @param {HTMLElement} element The HTML element from which to extract inline styles.
  * @returns {AnnotationStyle} An object representing the custom style annotations.
  */
 export function createStyleMapFromElement(element) {
-  const customStyle = element.getAttribute('style');
-  if (!customStyle)
-    return {};
-  const styleValue = customStyle.split(';').filter(Boolean);
-  return styleValue
-    .filter((key) => key !== ' ')
-    .map((key) => {
-    // to remove redundant quote pairs if needed, for example: ['fontFamily: "Roboto Mono"'] will be updated to ['fontFamily: Roboto Mono']
-    const styleObject = key.replace(/(['"])(.*?)\1/g, '$2').split(':');
-    const styleKey = dashCaseToCamel(styleObject[0].trim());
-    return {
-      [styleKey]: styleObject[1].trim().replace(';', ''),
-    };
-  })
-    .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  const styleMap = {};
+  const styleAttr = element.getAttribute('style');
+  if (!styleAttr) {
+    return styleMap;
+  }
+  // Split by semicolons, but only those outside of parentheses (to handle data URLs with semicolons)
+  const properties = splitStyleProperties(styleAttr);
+  for (const property of properties) {
+    const trimmedProperty = property.trim();
+    const colonIndex = trimmedProperty.indexOf(':');
+    const propertyName = trimmedProperty.substring(0, colonIndex).trim();
+    const propertyValue = trimmedProperty.substring(colonIndex + 1).trim();
+    // Convert CSS property name to camelCase (e.g., 'background-color' -> 'backgroundColor')
+    const camelCaseName = dashCaseToCamel(propertyName);
+    styleMap[camelCaseName] = propertyValue;
+  }
+  return styleMap;
+}
+/**
+ * Split a CSS style string by semicolons, but only those outside of parentheses.
+ * This ensures that semicolons inside url() or other functions are not treated as property separators.
+ *
+ * @param {string} styleAttr The style attribute string to split.
+ * @returns {string[]} Array of individual CSS property strings.
+ */
+export function splitStyleProperties(styleAttr) {
+  const properties = [];
+  let currentProperty = '';
+  let parenthesesDepth = 0;
+  for (let i = 0; i < styleAttr.length; i++) {
+    const char = styleAttr[i];
+    if (char === '(') {
+      parenthesesDepth++;
+      currentProperty += char;
+    }
+    else if (char === ')') {
+      parenthesesDepth--;
+      currentProperty += char;
+    }
+    else if (char === ';' && parenthesesDepth === 0) {
+      // Semicolon outside parentheses - this is a property separator
+      properties.push(currentProperty);
+      currentProperty = '';
+    }
+    else {
+      currentProperty += char;
+    }
+  }
+  // Add the last property if it doesn't end with a semicolon
+  if (currentProperty) {
+    properties.push(currentProperty);
+  }
+  return properties;
+}
+/**
+ * Escape HTML-sensitive characters so text can be rendered literally in HTML.
+ *
+ * @param {string} text - Raw text content.
+ * @returns {string} Escaped text content.
+ */
+export function escapeHtml(text) {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+/**
+ * Escape text for use inside a double-quoted HTML attribute value.
+ *
+ * @param {string} value - Raw attribute value.
+ * @returns {string} Escaped attribute-safe value.
+ */
+export function escapeHtmlAttribute(value) {
+  return (value
+    // Keep existing entities (e.g. &quot;, &#39;) intact to avoid double escaping on repeated transforms.
+    .replace(/&(?!(?:[a-zA-Z][a-zA-Z0-9]+|#[0-9]+|#x[a-fA-F0-9]+);)/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;'));
 }

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

@@ -20,13 +20,18 @@ export { VegaRTELanguageExtension } from './extensions/languages/language-extens
 export { VegaRTEFunctionExtension } from './extensions/functions/function-extension';
 export { VegaRTETableExtension } from './extensions/table/table-extension';
 export { VegaRTEHorizontalLineExtension } from './extensions/horizontal-line/horizontal-line-extension';
+export { VegaRTEBlockquoteExtension } from './extensions/blockquote/blockquote-extension';
+export { RTEBlockquoteBlock } from './extensions/blockquote/dto/rte-blockquote-block';
 export { VegaRTESpecialCharactersExtension } from './extensions/special-characters/special-characters-extension';
 export { VegaRTEFindReplaceExtension } from './extensions/find-replace/find-replace-extension';
 export { VegaRTESpecialCharactersEssentials, VegaRTESpecialCharactersLatin, VegaRTESpecialCharactersMathematical, VegaRTESpecialCharactersArrows, VegaRTESpecialCharactersCurrency, VegaRTESpecialCharactersText, } from './extensions/special-characters/constants/default-categories';
 export { VegaRTELineHeightExtension } from './extensions/line-height/line-height-extension';
 export { VegaRTELinkExtension } from './extensions/link/link-extension';
+export { VegaRTEFullscreenExtension } from './extensions/fullscreen/fullscreen-extension';
+export { VegaRTEPasteExtension } from './extensions/paste/paste-extension';
 export { VegaRTECopyExtension } from './extensions/copy/copy-extension';
 export { VegaRTECutExtension } from './extensions/cut/cut-extension';
+export { VegaRTEImageExtension } from './extensions/image/image-extension';
 // actions
 export { ModifyContentAction, ModifyContentActionType } from './dto/actions/modify-content-action.abstract';
 export { AppendChildrenAction } from './dto/actions/append-child-nodes-action';

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

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { isArrayEqual } from '../../../../utils/array';
+import { forceUpdate } from '@stencil/core';
 /**
  * Inject the editor context to the extensions.
  */
@@ -107,6 +108,7 @@ export class RTEExtensionController extends VegaSlimmer {
     return {
       host: this.host,
       flushValue: this.flushValue,
+      forceUpdate: forceUpdate,
       isSourceEditMode: this.isSourceEditMode,
       getSelectedNodes: this.getSelectedNodes,
       setSelectedNodes: this.selectionController.setSelectedNodes.bind(this.selectionController),

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

@@ -39,7 +39,7 @@ export class BaseHandler {
    * @returns {boolean} boolean result
    */
   isEmptyParagraph(node) {
-    return node && node.childNodes && node.childNodes.length === 0;
+    return node && node.nodeType === Node.ELEMENT_NODE && node.childNodes && node.childNodes.length === 0;
   }
   /**
    * Removes selected nodes within a range in a rich text editor content.