@globalpayments/vega 2.98.0 → 2.99.0

package/dist/cjs/vega-tooltip_2.cjs.entry.js

@@ -4,18 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-58ea899e.js');
 const component = require('./component-1e352960.js');
-const injectKeyboardManager = require('./inject-keyboard-manager-6a6f5c9f.js');
+const injectKeyboardManager = require('./inject-keyboard-manager-4fa45f9c.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-597e9e48.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-a0269315.js');
 const deprecatedPropertySlimmer = require('./deprecated-property-slimmer-300a3929.js');
-require('./keyboard-manager-c56033b1.js');
+require('./keyboard-manager-482fe257.js');
 require('./ui-c91c37a7.js');
-require('./type-guard-a57ef3ac.js');
+require('./type-guard-b8d7bb3f.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
 require('./typography-3ea4fe41.js');
-require('./internal-translation-controller-1dac2df8.js');
+require('./internal-translation-controller-51f7f865.js');
 require('./change-manager-a297e4d2.js');
 require('./static-subject-title-70c73b16.js');
 require('./internal-vega-z-index-manager-f03ddb37.js');
@@ -24,7 +24,7 @@ require('./dynamic-slimmer-f31fdfd7.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
 require('./breakpoints-1cc2c4c6.js');
 require('./try-get-document-c0ebd39a.js');
-require('./responsive-format-facade-493d1763.js');
+require('./responsive-format-facade-74e6d791.js');
 require('./pixel-98f2a10c.js');
 require('./array-249289f2.js');
 require('./feature-flag-controller-c19d0b58.js');

package/dist/cjs/vega.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
 const index = require('./index-58ea899e.js');
-const appGlobals = require('./app-globals-b3f05631.js');
+const appGlobals = require('./app-globals-a306dce6.js');
 require('./feature-flag-controller-c19d0b58.js');
 require('./global-slimmer-registry-b3bce7e0.js');
 require('./index-3ca118c4.js');
-require('./token-extension-78b5a026.js');
+require('./token-extension-4686cb3b.js');
 require('./misc-3d30df91.js');
 require('./ui-c91c37a7.js');
 require('./create-public-api-runtime-metrics-slimmer-91b0cbfb.js');
@@ -19,34 +19,34 @@ require('./breakpoints-ebde4837.js');
 require('./try-get-document-c0ebd39a.js');
 require('./internal-vega-event-manager-7003c84a.js');
 require('./vega-event-id-58afed7a.js');
-require('./internal-translation-controller-1dac2df8.js');
+require('./internal-translation-controller-51f7f865.js');
 require('./change-manager-a297e4d2.js');
 require('./static-subject-title-70c73b16.js');
-require('./internal-calendar-period-factory-dfcdd3f6.js');
-require('./type-guard-a57ef3ac.js');
+require('./internal-calendar-period-factory-6196bc80.js');
+require('./type-guard-b8d7bb3f.js');
 require('./typography-3ea4fe41.js');
-require('./link-extension-220ff6a9.js');
-require('./code-block-d78c2b2c.js');
+require('./code-block-ea1f5eb3.js');
 require('./dom-node-subject-observer-factory-c82df135.js');
 require('./observer-f49483e8.js');
 require('./vega-internal-event-id-f4d33037.js');
 require('./string-39438062.js');
-require('./dark-mode-style-controller-32d4054a.js');
+require('./dark-mode-style-controller-f3da3342.js');
 require('./tinycolor-polyfill-502efaa8.js');
 require('./vega-nonce-manager-df69d3ed.js');
-require('./index-592b4052.js');
+require('./index-5d1adcd1.js');
 require('./object-b53e9416.js');
-require('./content-state-78a620a9.js');
+require('./content-state-8d07d530.js');
+require('./link-extension-11340e1c.js');
 require('./internal-icon-manager-40bcac72.js');
 require('./icon-manager-be358b32.js');
-require('./split-cell-operation-873d5db7.js');
+require('./split-cell-operation-11bfb305.js');
 require('./remote-invocation-registry-fc22fdd0.js');
 require('./pixel-98f2a10c.js');
 require('./timer-5f33058b.js');
-require('./image-extension-260fa69c.js');
+require('./image-extension-9659708b.js');
 require('./copy-d021c780.js');
 require('./vega-dialog-controller-16be85d5.js');
-require('./valid-credit-card-number-rule-4c0a3040.js');
+require('./valid-credit-card-number-rule-f5a6f009.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./vega-env-manager-23b8b23c.js');
 

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-event-item-renderer.js

@@ -60,13 +60,16 @@ export class VegaCalendarEventItemRenderer extends VegaSlimmer {
       // Step 2: append preview additional fields slot to preview component.
       const additionalFieldsSlot = this.host.querySelector('[slot=event-preview-additional-fields]');
       additionalFieldsSlot && preview.append(additionalFieldsSlot);
-      // Step 3: append event slot to preview component.
+      // Step 3: append header slot to preview component if it exists.
+      const headerSlot = this.host.querySelector('[slot=event-preview-header]');
+      headerSlot && preview.append(headerSlot);
+      // Step 4: append event slot to preview component.
       const eventSlotName = getCalendarEventSlotName(event.event.key);
       const eventSlot = this.host.querySelector(`[slot=${eventSlotName}]`);
       const previewEventSlot = preview.querySelector(`[slot=${eventSlotName}]`);
       // Since event slot is used by vega-calendar-event, we should clone it to avoid remove from original position.
       eventSlot && !previewEventSlot && preview.append(eventSlot.cloneNode(true));
-      // Step 4: append preview component to popover container to display.
+      // Step 5: append preview component to popover container to display.
       previewContainer.append(preview);
     }
   }

package/dist/collection/components/vega-calendar/vega-calendar-event-preview/slimmers/renderers/vega-calendar-event-preview-detail-renderer.js

@@ -65,7 +65,7 @@ export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
       this.renderActions(),
       h("vega-box", { class: "preview-content" },
         h("vega-flex", { gap: "size-16", direction: "col" },
-          this.renderBasicFields(),
+          this.renderHeader(),
           this.renderDivider(),
           h("slot", { name: "event-preview-additional-fields" }))))));
   }
@@ -75,6 +75,14 @@ export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
       showEditButton && (h("vega-button-circle", { "data-aria-label": VegaInternalTranslation.t('Edit event'), icon: VegaInternalIconManager.getIconKey('pen'), color: "text-primary", variant: "icon-only", "data-action-type": PreviewActionButtonType.Edit, ref: this.handleActionButtonClick })),
       h("vega-button-circle", { "data-aria-label": VegaInternalTranslation.t('Close event preview detail'), icon: VegaInternalIconManager.getIconKey('close'), color: "text-primary", variant: "icon-only", "data-action-type": PreviewActionButtonType.Close, ref: this.handleActionButtonClick })));
   }
+  renderHeader() {
+    const haveHeaderSlot = this.hasHeaderSlot();
+    return haveHeaderSlot ? h("slot", { name: "event-preview-header" }) : this.renderBasicFields();
+  }
+  hasHeaderSlot() {
+    const headerSlot = this.host.querySelector('[slot=event-preview-header]');
+    return Boolean(headerSlot);
+  }
   renderBasicFields() {
     const currentEvent = this.currentEvent;
     return (h(Fragment, null,

package/dist/collection/components/vega-counter-badge/vega-counter-badge.js

@@ -53,12 +53,12 @@ export class VegaCounterBadge {
   render() {
     return sanitizeVegaComponent(h(Host, null,
       h("div", { class: {
-          'dot': this.count > 0 && this.dot,
+          'dot': this.dot,
           'counter': this.count > 0 && !this.dot,
           'multi-digit': this.count >= 10 && !this.dot,
           'v-bg-danger': this.color != 'bg-action',
           'v-bg-action': this.color == 'bg-action',
-          'default-position': this.count > 0,
+          'default-position': this.dot || this.count > 0,
         }, style: { right: `${-this.offset[0]}px`, top: `${this.offset[1]}px` } }, this.renderCounter()),
       h("slot", null)), this.host);
   }

package/dist/collection/components/vega-dropdown/vega-dropdown-group/slimmers/renderers/vega-dropdown-group-renderer.js

@@ -6,15 +6,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { htmlSanitizer, plainTextSanitizeStrategy } from '../../../../../utils/sanitize';
 export class VegaDropdownGroupRenderer extends VegaSlimmer {
   render() {
-    return (h("li", { role: "group", "aria-label": this.label, class: "vega-dropdown-group" },
-      this.renderLabel(),
+    const plainTextLabel = htmlSanitizer.sanitize(this.label, plainTextSanitizeStrategy);
+    return (h("li", { role: "group", "aria-label": plainTextLabel, class: "vega-dropdown-group" },
+      this.renderLabel(plainTextLabel),
       this.renderChildren(),
       this.renderDivide()));
   }
-  renderLabel() {
-    return (this.label && (h("div", { class: "vega-dropdown-group-label", "aria-hidden": "true" }, this.label)));
+  renderLabel(plainTextLabel) {
+    return (this.label && (h("div", { class: "vega-dropdown-group-label", "aria-hidden": "true" }, plainTextLabel)));
   }
   renderChildren() {
     return (h("ul", { role: "none", class: "vega-dropdown-group-items" },

package/dist/collection/components/vega-dropdown/vega-dropdown-item/slimmers/renderers/vega-dropdown-item-renderer.js

@@ -7,7 +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 { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
-import { htmlSanitizer, labelSanitizeStrategy } from '../../../../../utils/sanitize';
+import { htmlSanitizer, labelSanitizeStrategy, plainTextSanitizeStrategy, } from '../../../../../utils/sanitize';
 export class VegaDropdownItemRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -18,7 +18,8 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
     };
   }
   render() {
-    return (h("li", { key: this.label, role: "menuitem", "aria-label": this.count > 0 ? `${this.label}, ${this.count}` : this.label, "aria-disabled": `${this.disabled}`, class: {
+    const plainTextLabel = this.getPlainTextLabel();
+    return (h("li", { key: this.label, role: "menuitem", "aria-label": this.count > 0 ? `${plainTextLabel}, ${this.count}` : plainTextLabel, "aria-disabled": `${this.disabled}`, class: {
         'vega-dropdown-item-selected': this.selected,
         'vega-dropdown-item-disabled': this.disabled,
         [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
@@ -73,6 +74,13 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
   onSelect(e) {
     this.vegaDropdownItemClickController.handleClick(e);
   }
+  getPlainTextLabel() {
+    const slotText = this.host.textContent.trim();
+    if (slotText) {
+      return slotText;
+    }
+    return htmlSanitizer.sanitize(this.label, plainTextSanitizeStrategy);
+  }
   renderLabelWithTooltip() {
     var _a, _b, _c;
     if (!this.label) {

package/dist/collection/components/vega-field-label/vega-field-label.css

@@ -5,6 +5,7 @@
  */
 :host {
   display: inline-block;
+  position: relative;
 }
 
 :host(.center-align) {

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

@@ -78,3 +78,19 @@ export const VegaRTEOneRowHeightPx = 22;
 export const RTE_DEFAULT_LINK_TYPE_KEY = 'url';
 export const RTE_EMAIL_LINK_TYPE_KEY = 'email';
 export const RTE_SUPPORTED_LINK_TYPE_KEYS = [RTE_DEFAULT_LINK_TYPE_KEY, RTE_EMAIL_LINK_TYPE_KEY];
+/**
+ * Semantic marker used by renderers to identify elements that terminate
+ * continue-inline grouping during HTML -> DTO conversion.
+ */
+export const RTE_BLOCK_BOUNDARY_ATTRIBUTE = 'data-vega-rte-block-boundary';
+/**
+ * Custom DataTransfer MIME type used to tag a synthetic paste with the chosen
+ * paste mode (e.g. 'rich' or 'plain'), so downstream paste handling can decide
+ * whether to preserve the original inline styles.
+ */
+export const RTE_PASTE_MODE_DATA_TYPE = 'application/x-vega-rte-paste-mode';
+/**
+ * Custom DataTransfer MIME type value used to indicate that the paste content
+ * originated from Microsoft Word.
+ */
+export const RTE_PASTE_MODE_WORD = 'word';

package/dist/collection/components/vega-rich-text-editor/dto/annotations/text-style-default-styles.js

@@ -1,9 +1,10 @@
+export const TEXT_STYLE_DEFAULT_FONT_WEIGHT = '500';
 const TEXT_STYLE_BASE = {
   fontFamily: 'Inter',
   fontSize: '16px',
   lineHeight: '22px',
   minHeight: '22px',
-  fontWeight: '500',
+  fontWeight: TEXT_STYLE_DEFAULT_FONT_WEIGHT,
 };
 const PARAGRAPH_TEXT_STYLE = Object.assign(Object.assign({}, TEXT_STYLE_BASE), { marginTop: '0px', marginBottom: '0px' });
 export const TEXT_STYLE_VALUES = [

package/dist/collection/components/vega-rich-text-editor/dto/blocks/block.abstract.js

@@ -158,6 +158,17 @@ export class RTEBlock {
       }
     }
   }
+  /**
+   * Whether caret nearest-element detection may descend into this block's children.
+   * Transparent wrappers (e.g. html-block) return true so the caret resolves to the
+   * real inner node; atomic widgets like the table block return false so the caret
+   * stays anchored to the block boundary.
+   *
+   * @returns {boolean} True when descending is allowed.
+   */
+  allowsCaretDescend() {
+    return true;
+  }
   /**
    * Get the first node of the block
    *

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/filter-styles-strategy-registry.js

@@ -39,6 +39,7 @@ export class RTEFilterStylesStrategyRegistry {
    * @param {RTEFilterStyles} styles - The full set of styles to filter.
    * @param {string[]} classNames - The class names to consider.
    * @returns {RTEFilterInlineStylesResult} The result of filtering, including the remaining styles and class names.
+   * The instance is also passed to matched strategies so they can make decisions from DTO annotations.
    */
   static executeTheStrategyFilterAction(blockOrNodeInstance, styles, classNames) {
     const dtoClassName = blockOrNodeInstance.dtoName;
@@ -47,7 +48,7 @@ export class RTEFilterStylesStrategyRegistry {
       return strategy.canFilter(blockOrNodeInstance);
     });
     return matchedStrategies.reduce((result, strategy) => {
-      return strategy.filterAndDeleteStyles(result.styles, result.classNames);
+      return strategy.filterAndDeleteStyles(result.styles, result.classNames, blockOrNodeInstance);
     }, {
       styles,
       classNames,

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/filter-styles-strategy.abstract.js

@@ -36,13 +36,16 @@ export class RTEFilterStylesStrategy {
     return annotations;
   }
   /**
-   * Filters and deletes the matched styles from the full styles object, add the corresponding class name if necessary, and returns the result.
+   * Filters and deletes matched styles from the full styles object, adds the corresponding class name if necessary, and returns the result.
    *
    * @param {RTEFilterStyles} fullStyles - The full set of styles to filter.
    * @param {string[]} classNames - The class names to consider.
+   * @param {RTEBlock | RTENode} [_blockOrNodeInstance] - The block or node the styles belong to. It is optional for strategies that only need styles and class names.
    * @returns {RTEFilterInlineStylesResult} The filtered styles and class names.
    */
-  filterAndDeleteStyles(fullStyles, classNames) {
+  filterAndDeleteStyles(fullStyles, classNames, 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _blockOrNodeInstance) {
     const classSet = new Set(classNames);
     const shouldAddClass = this.extractAndDeleteMatchedStyles(fullStyles);
     if (shouldAddClass && this.classNameToBeAdded) {

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/text-node/title-heading-node-filter-styles-strategy.js

@@ -1,8 +1,15 @@
+import { NodeAnnotationTypeEnum } from '../../annotations/node-annotation.abstract';
+import { TEXT_STYLE_DEFAULT_FONT_WEIGHT } from '../../annotations/text-style-default-styles';
 import { RTEFilterStylesStrategy } from '../filter-styles-strategy.abstract';
 import { Predicate } from '../predicate';
 /**
- * The TitleHeadingNodeFilterStylesStrategy is responsible for filtering styles from text nodes that are children of title and heading blocks.
- * In title and heading blocks, the text nodes will have a default bold style.
+ * Filters the default bold style from text nodes inside title and heading blocks.
+ * The source DTO distinguishes an explicitly non-bold node (`bold: false`) from
+ * a node with no bold annotation, even though both initially produce no weight in `fullStyles`.
+ *
+ * Bold nodes keep the existing strip/refill behaviour. Default nodes without a bold annotation
+ * remain bare for compatibility, while explicitly non-bold nodes receive the base weight so
+ * source-mode refill does not restore bold (VD-9375).
  */
 export class TitleHeadingNodeFilterStylesStrategy extends RTEFilterStylesStrategy {
   constructor() {
@@ -29,6 +36,19 @@ export class TitleHeadingNodeFilterStylesStrategy extends RTEFilterStylesStrateg
   filterAnnotations(annotations) {
     return annotations;
   }
+  /**
+   * Removes the default bold weight and preserves an explicit non-bold marker when needed.
+   *
+   * @inheritDoc
+   */
+  filterAndDeleteStyles(fullStyles, classNames, blockOrNodeInstance) {
+    var _a;
+    const result = super.filterAndDeleteStyles(fullStyles, classNames);
+    if (this.isExplicitlyNonBold(blockOrNodeInstance) && ((_a = result.styles) === null || _a === void 0 ? void 0 : _a.fontWeight) === undefined) {
+      result.styles = Object.assign(Object.assign({}, result.styles), { fontWeight: TitleHeadingNodeFilterStylesStrategy.NON_BOLD_FONT_WEIGHT });
+    }
+    return result;
+  }
   /**
    * Determines whether the dto instance is text node and its parent block is a heading or title.
    *
@@ -58,6 +78,18 @@ export class TitleHeadingNodeFilterStylesStrategy extends RTEFilterStylesStrateg
     const selectors = this.parentElementSelectors.map((key) => `.${TitleHeadingNodeFilterStylesStrategy.RTE_CONTENT_CONTAINER_CLASS_NAME} ${key}`);
     return `${selectors.join(',')} { ${this.convertStylesMapToCssText()} }`;
   }
+  /**
+   * Checks the annotation rather than `fullStyles`, because both an explicit `bold: false` node and
+   * a node without a bold annotation produce no font weight before this strategy runs.
+   *
+   * @param {RTEBlock | RTENode} [blockOrNodeInstance] - The block or node the styles belong to.
+   * @returns {boolean} True when the node has a `bold: false` annotation.
+   */
+  isExplicitlyNonBold(blockOrNodeInstance) {
+    var _a;
+    const boldAnnotation = (_a = blockOrNodeInstance) === null || _a === void 0 ? void 0 : _a.getAnnotationByType(NodeAnnotationTypeEnum.BOLD);
+    return (boldAnnotation === null || boldAnnotation === void 0 ? void 0 : boldAnnotation.bold) === false;
+  }
   /**
    * Checks if the parent block of the given node instance is a heading or title.
    *
@@ -96,6 +128,8 @@ export class TitleHeadingNodeFilterStylesStrategy extends RTEFilterStylesStrateg
 TitleHeadingNodeFilterStylesStrategy.BOLD_STYLES = {
   fontWeight: '700',
 };
+/** Base weight used to preserve an explicitly non-bold title or heading node. */
+TitleHeadingNodeFilterStylesStrategy.NON_BOLD_FONT_WEIGHT = TEXT_STYLE_DEFAULT_FONT_WEIGHT;
 TitleHeadingNodeFilterStylesStrategy.NON_HEADING_TITLE_ELEMENT_TAGS = [
   'TD',
   'TH',

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/block-text-nodes-renderer.abstract.js

@@ -3,6 +3,7 @@ import { InternalAnnotationTypeEnum } from '../../annotations/annotation.abstrac
 import { RTEBlockRenderer } from './block-renderer.abstract';
 import RTELinkWrapperRenderer from './link-wrapper-renderer';
 import RTEDTORendererManager from '../../../../../helpers/rte-manager/dto-renderer-manager';
+import { NodeTypeEnum } from '../../nodes/node.abstract';
 import RTETextNodeRenderer from '../nodes/text-node-renderer';
 /**
  * Abstract class for rendering blocks that contain text nodes with support for rendering text with link styles.
@@ -75,9 +76,25 @@ export class RTEBlockTextNodesRenderer extends RTEBlockRenderer {
    */
   renderNodeFromDepth(node, depth, renderContext) {
     if (depth === 0) {
-      const nodeRenderer = RTEDTORendererManager.getRTERenderer(node.type);
-      return nodeRenderer.render(node, renderContext, h);
+      return this.getNodeRenderer(node).render(node, renderContext, h);
     }
-    return RTETextNodeRenderer.renderFromAnnotation(node, node.getInlineHtmlAnnotationAtDepth(depth));
+    const annotation = node.getInlineHtmlAnnotationAtDepth(depth);
+    if (node.type !== NodeTypeEnum.TEXT) {
+      // Non-text nodes (e.g. tokens) must keep their own markup even when nested inside a
+      // shared inline HTML wrapper; the plain text renderer would drop attributes such as
+      // token-key. Render via the node's own renderer, then re-apply the remaining chain.
+      const inner = this.getNodeRenderer(node).render(node, renderContext, h);
+      return annotation ? RTETextNodeRenderer.wrapWithInlineHtml(inner, annotation) : inner;
+    }
+    return RTETextNodeRenderer.renderFromAnnotation(node, annotation);
+  }
+  /**
+   * Resolves the registered renderer for the given node's type.
+   *
+   * @param {RTETextNode} node - The node whose renderer is needed.
+   * @returns {VegaRTEBaseRenderer<RTENode, VNode>} The node renderer.
+   */
+  getNodeRenderer(node) {
+    return RTEDTORendererManager.getRTERenderer(node.type);
   }
 }

package/dist/collection/components/vega-rich-text-editor/dto/renderers/nodes/text-node-renderer.js

@@ -16,6 +16,18 @@ class RTETextNodeRenderer extends RTENodeRenderer {
     const textNodeDom = this.renderText(node);
     return annotation ? this.renderWithWrapper(textNodeDom, annotation) : textNodeDom;
   }
+  /**
+   * Wrap an already-rendered inner element with the given inline HTML annotation chain.
+   * Lets non-text nodes (e.g. tokens) keep their own markup while still being nested
+   * inside a shared inline HTML wrapper emitted by the grouped node renderer.
+   *
+   * @param {HTMLElement} inner - The already-rendered inner element to wrap.
+   * @param {InlineHtmlAnnotation} annotation - The inline HTML annotation chain to apply.
+   * @returns {HTMLElement} The wrapped element.
+   */
+  wrapWithInlineHtml(inner, annotation) {
+    return this.renderWithWrapper(inner, annotation);
+  }
   render(node) {
     return this.renderFromAnnotation(node, node.getAnnotationByType(NodeAnnotationTypeEnum.INLINE_HTML));
   }

package/dist/collection/components/vega-rich-text-editor/extensions/block-boundary-registry.js

@@ -0,0 +1,34 @@
+/**
+ * Per-editor registry for block-boundary predicates contributed by extensions.
+ */
+export class BlockBoundaryRegistry {
+  constructor() {
+    this.predicates = new Set();
+  }
+  /**
+   * Register a block-boundary predicate.
+   *
+   * @param {BlockBoundaryPredicate} predicate - Predicate to register.
+   * @returns {() => void} Unregister callback.
+   */
+  register(predicate) {
+    this.predicates.add(predicate);
+    return () => {
+      this.predicates.delete(predicate);
+    };
+  }
+  /**
+   * Returns true when any registered predicate marks the element as a boundary.
+   *
+   * @param {HTMLElement} element - Element to inspect.
+   * @returns {boolean} Whether the element is a boundary.
+   */
+  isBoundary(element) {
+    for (const predicate of this.predicates) {
+      if (predicate(element)) {
+        return true;
+      }
+    }
+    return false;
+  }
+}

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

@@ -10,6 +10,7 @@ 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';
 import { RTEExtensionStateStore } from './rte-extension-state-store';
+import stateEntityRenderingRegistry from '../slimmers/controllers/state-entity-rendering-registry';
 const patchedBlockClasses = new WeakSet();
 const annotationHandlersByClass = new WeakMap();
 /**
@@ -258,4 +259,23 @@ export class VegaRTEExtension {
   registerAnnotationHandler(handler) {
     htmlElementToAnnotationGenerator.registerHandler(handler);
   }
+  /**
+   * Register an extension-defined block-boundary predicate for the current editor instance.
+   *
+   * @param {BlockBoundaryPredicate} predicate - Predicate to register.
+   * @returns {Nullable<() => void>} Unregister callback when context is available.
+   */
+  registerBlockBoundaryPredicate(predicate) {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = this.extensionContext) === null || _a === void 0 ? void 0 : _a.blockBoundaryRegistry) === null || _b === void 0 ? void 0 : _b.register(predicate)) !== null && _c !== void 0 ? _c : null;
+  }
+  /**
+   * Get the registered dto by dom element.
+   *
+   * @param {HTMLElement} el - The DOM element to get the registered DTO for.
+   * @returns {Nullable<RTENode | RTEBlock>} - The registered DTO associated with the DOM element.
+   */
+  getDTOEntityByDom(el) {
+    return stateEntityRenderingRegistry.getEntityByDOM(el);
+  }
 }

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

@@ -4,6 +4,7 @@ import { generateUUID } from '../../../../../utils/misc';
 import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
 import { AppendChildrenAction } from '../../../dto/actions/append-child-nodes-action';
 import { RTEFunctionBlock } from '../dto/function-block';
+import { FUNCTION_CONTENT_CLASS } from '../constants';
 /**
  * Strategy to handle the insertion of a function block into the rich text editor.
  */
@@ -46,7 +47,7 @@ export class InsertFunctionBlockStrategy extends ActionHandleStrategy {
         {
           id: `${id}-2`,
           annotations: {
-            customClass: ['statementelement'],
+            customClass: [FUNCTION_CONTENT_CLASS],
           },
           type: 'paragraph',
           nodes: [
@@ -65,7 +66,7 @@ export class InsertFunctionBlockStrategy extends ActionHandleStrategy {
         {
           id: `${id}-4`,
           annotations: {
-            customClass: ['statementelement'],
+            customClass: [FUNCTION_CONTENT_CLASS],
           },
           type: 'paragraph',
           nodes: [

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

@@ -0,0 +1,8 @@
+export const FUNCTION_BLOCK_CLASS = 'statement';
+export const FUNCTION_CONTENT_CLASS = 'statementelement';
+export const FUNCTION_SYNTAX_CLASS = 'statementsyntax';
+export const FUNCTION_ELEMENT_CLASSES = [
+  FUNCTION_BLOCK_CLASS,
+  FUNCTION_CONTENT_CLASS,
+  FUNCTION_SYNTAX_CLASS,
+];

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

@@ -2,6 +2,8 @@ import { generateUUID } from '../../../../../utils/misc';
 import { RTEAnnotationStyle } from '../../../dto/annotations/annotation-style';
 import { RTEBlock } from '../../../dto/blocks/block.abstract';
 import { RTETextBlock } from '../../../dto/blocks/text-block';
+import { FUNCTION_BLOCK_CLASS, FUNCTION_CONTENT_CLASS } from '../constants';
+import { RTE_BLOCK_BOUNDARY_ATTRIBUTE } from '../../../constants/constant';
 /**
  * RTE Function Block
  */
@@ -21,7 +23,7 @@ export class RTEFunctionBlock extends RTEBlock {
    */
   static from(block, options) {
     const functionBlock = new RTEFunctionBlock(block.id);
-    const defaultAnnotation = { customClass: ['statement'] };
+    const defaultAnnotation = { customClass: [FUNCTION_BLOCK_CLASS] };
     let { annotations } = block;
     annotations = annotations
       ? Object.assign(Object.assign({}, annotations), defaultAnnotation) : defaultAnnotation;
@@ -39,14 +41,14 @@ export class RTEFunctionBlock extends RTEBlock {
       .map((child) => {
       if (child instanceof RTETextBlock) {
         const attrStr = this.getFunctionContentStyle(child);
-        return `<div class="statementelement"${attrStr}>${child.getChildrenHtml()}</div>`;
+        return `<div class="${FUNCTION_CONTENT_CLASS}"${attrStr}>${child.getChildrenHtml()}</div>`;
       }
       else {
         return child.toHtml();
       }
     })
       .join('');
-    return `<div class="statement">${childrenHtml}</div>`;
+    return `<div class="${FUNCTION_BLOCK_CLASS}" ${RTE_BLOCK_BOUNDARY_ATTRIBUTE}>${childrenHtml}</div>`;
   }
   /**
    * @inheritDoc
@@ -67,6 +69,15 @@ export class RTEFunctionBlock extends RTEBlock {
   getLastNode() {
     return this.children[this.children.length - 1].getLastNode();
   }
+  /**
+   * The function block is an atomic caret boundary: descending would resolve the caret onto a
+   * `contenteditable="false"` logic-control node instead of staying anchored to the block.
+   *
+   * @inheritDoc
+   */
+  allowsCaretDescend() {
+    return false;
+  }
   /**
    * @inheritDoc
    */

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

@@ -1,4 +1,5 @@
 import { RTEBlock } from '../../../dto/blocks/block.abstract';
+import { FUNCTION_SYNTAX_CLASS } from '../constants';
 import { RTELogicControlNode } from '../dto/logic-control-node';
 /**
  * Class representing a logic control block in the rich text editor.
@@ -48,7 +49,7 @@ export class RTELogicControlBlock extends RTEBlock {
    * @returns {string} - The HTML string of the logic control block.
    */
   toHtml() {
-    return `<div class='statementsyntax' contenteditable='false'>${this.statementText}</div>`;
+    return `<div class='${FUNCTION_SYNTAX_CLASS}' contenteditable='false'>${this.statementText}</div>`;
   }
   /**
    * Clone the current block instance.

package/dist/collection/components/vega-rich-text-editor/extensions/functions/element-to-dto-strategies/div-containing-function-block-strategy.js

@@ -0,0 +1,19 @@
+import { HtmlBlockStrategy } from '../../../slimmers/controllers/helper/element-to-dto-strategy/html-block-strategy';
+import { FUNCTION_BLOCK_CLASS } from '../constants';
+import { RTE_BLOCK_BOUNDARY_ATTRIBUTE } from '../../../constants/constant';
+import { isFunctionBlockElement } from '../utils';
+/** Preserve a div that contains a function block during auto-formatting. */
+export class FunctionBlockContainerStrategy extends HtmlBlockStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    if (element.nodeType !== Node.ELEMENT_NODE)
+      return 0;
+    const containsFunctionBlock = !!element.querySelector(`[${RTE_BLOCK_BOUNDARY_ATTRIBUTE}], .${FUNCTION_BLOCK_CLASS}`);
+    return element.nodeName === 'DIV' && !isFunctionBlockElement(element) && containsFunctionBlock
+      ? 1
+      : 0;
+  }
+}