@globalpayments/vega 2.98.0 → 2.100.0

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

@@ -40,6 +40,7 @@ export class VegaRichTextTableSetting {
     this.cellPropertiesButtonSlimmer = new CellPropertiesButtonSlimmer();
     this.mergeCellsButtonSlimmer = new MergeCellsButtonSlimmer();
     this.isColumnDropdownOpen = false;
+    this.isRowDropdownOpen = false;
     this.isMergeCellsDropdownOpen = false;
     /**
      * Indicates whether the current table already has a caption.
@@ -154,6 +155,7 @@ export class VegaRichTextTableSetting {
   }; }
   static get states() { return {
     "isColumnDropdownOpen": {},
+    "isRowDropdownOpen": {},
     "isMergeCellsDropdownOpen": {}
   }; }
   static get events() { return [{

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

@@ -33,7 +33,7 @@ export class SpanToTokenNodeStrategy extends ElementToDTOStrategy {
   /**
    * @inheritDoc
    */
-  handle(elementsArray) {
+  handle(elementsArray, _options, parentTextAnnotations) {
     const element = elementsArray[0];
     const tokenKey = element.getAttribute('token-key');
     const text = element.textContent;
@@ -46,7 +46,9 @@ export class SpanToTokenNodeStrategy extends ElementToDTOStrategy {
       type: 'token',
       token: tokenKey,
       text,
-      annotations: Object.assign(Object.assign({}, restAnnotations), { customAttribute: this.createCustomAttrs(customAttribute) }),
+      annotations: Object.assign(Object.assign(Object.assign({}, restAnnotations), ((parentTextAnnotations === null || parentTextAnnotations === void 0 ? void 0 : parentTextAnnotations.inlineHtml)
+        ? { inlineHtml: parentTextAnnotations.inlineHtml }
+        : {})), { customAttribute: this.createCustomAttrs(customAttribute) }),
     };
   }
   /**

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

@@ -1,4 +1,6 @@
 import { RTETextNode } from '../../dto/nodes/text-node';
+import { HTML_VOID_TAGS } from '../../constants/constant';
+import { isNonNullable } from '../../../../types/type-guard';
 /**
  * Token node for the Vega Rich Text Editor.
  */
@@ -54,5 +56,47 @@ export class RTETokenNode extends RTETextNode {
   toHtml() {
     return `<span class="token" contenteditable="false" template-token-key="${this.token}" token-key="${this.token}"${super.generateAttributeString()}>${this.text}</span>`;
   }
+  /**
+   * @inheritDoc
+   */
+  renderHtmlFromDepth(depth, options) {
+    void options;
+    const annotation = this.getInlineHtmlAnnotationAtDepth(depth);
+    if (!annotation)
+      return this.toHtml();
+    return this.renderTokenWithWrapperStr(annotation);
+  }
+  /**
+   * Render token markup wrapped by inline HTML annotations, preserving token attributes.
+   *
+   * @param {InlineHtmlAnnotation} inlineHtmlNode - Current wrapper annotation.
+   * @returns {string} Token HTML wrapped by inline HTML annotations.
+   */
+  renderTokenWithWrapperStr(inlineHtmlNode) {
+    const { htmlTag, child } = inlineHtmlNode;
+    const attrStr = this.inlineHtmlAnnotationAttrStr(inlineHtmlNode);
+    if (!child) {
+      if (HTML_VOID_TAGS.has(htmlTag)) {
+        return `<${htmlTag}${attrStr}>`;
+      }
+      return `<${htmlTag}${attrStr}>${this.toHtml()}</${htmlTag}>`;
+    }
+    return `<${htmlTag}${attrStr}>${this.renderTokenWithWrapperStr(child)}</${htmlTag}>`;
+  }
+  /**
+   * Build inline HTML wrapper attributes string.
+   *
+   * @param {InlineHtmlAnnotation} annotation - Inline HTML annotation.
+   * @returns {string} Serialized attribute string.
+   */
+  inlineHtmlAnnotationAttrStr(annotation) {
+    const { customAttribute, customClass, customStyle } = annotation;
+    const attrs = [
+      ...((customAttribute === null || customAttribute === void 0 ? void 0 : customAttribute.toString()) || []),
+      customClass === null || customClass === void 0 ? void 0 : customClass.toString(),
+      customStyle === null || customStyle === void 0 ? void 0 : customStyle.toString(),
+    ].filter(isNonNullable);
+    return attrs.length > 0 ? ` ${attrs.join(' ')}` : '';
+  }
 }
 RTETokenNode.dtoName = 'RTETokenNode';

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

@@ -22,6 +22,7 @@ export class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
     return this.renderDropdown(createElement, editorContext, {}, [
       this.renderButton(createElement, editorContext, {
         label: 'Tokens',
+        ariaLabel: 'Tokens',
         showArrowIcon: true,
         tooltip: { text: 'Insert token' },
       }),

package/dist/collection/components/vega-rich-text-editor/extensions/word-count/action-handler-interceptors/prevent-hard-limit-exceed-interceptor.js

@@ -0,0 +1,70 @@
+import { isNonNullable } from '../../../../../types/type-guard';
+import { ActionHandlerInterceptor } from '../../../dto/action-handle-strategies/action-handle-interceptor.abstract';
+import { methodPlaceholder } from 'vega-slimmer/core';
+import { RTE_WORD_COUNT_KEY } from '../../../constants/constant';
+/**
+ * Vetoes a commit that would push the character count past the hard limit, while
+ * still allowing deletions and formatting that keep or reduce the count.
+ */
+export class PreventHardLimitExceedInterceptor extends ActionHandlerInterceptor {
+  /**
+   * Intercept when the candidate exceeds the configured maximum. Hard-limit
+   * commits are vetoed only when they increase the count.
+   *
+   * @param {CommitValueAction} action - the commit action carrying the candidate and previous values
+   * @returns {boolean} - whether the commit should be vetoed
+   */
+  canIntercept(action) {
+    var _a;
+    const extension = (_a = action.host.extensions) === null || _a === void 0 ? void 0 : _a.find((item) => this.isWordCountExtension(item));
+    if (!extension) {
+      return false;
+    }
+    const { hardLimit, maxChars } = extension.getConfig();
+    const nextContent = action.candidate.getPlainText();
+    const nextCount = extension.calculateTextCount(nextContent);
+    if (!isNonNullable(maxChars) || nextCount <= maxChars) {
+      return false;
+    }
+    let result = false;
+    let prevContent = '';
+    if (hardLimit && action.previous) {
+      prevContent = action.previous.getPlainText();
+      result = nextCount > extension.calculateTextCount(prevContent);
+    }
+    this.notifyCharsLimitExceeded(nextContent, prevContent, extension, action);
+    return result;
+  }
+  /**
+   * Not invoke the origin action handle to veto the commit that would push the character count past the hard limit.
+   */
+  intercept() {
+    methodPlaceholder();
+  }
+  /**
+   * Notify the consumer when the candidate exceeds the configured character limit.
+   * The previous content is empty when hard limit is not enabled for the performance optimization.
+   *
+   * @param {string} nextContent - the candidate content string
+   * @param {string} prevContent - the previous content string
+   * @param {VegaRTEWordCountExtension} extension - the configured word count extension
+   * @param {CommitValueAction} action - the commit action carrying the candidate value
+   */
+  notifyCharsLimitExceeded(nextContent, prevContent, extension, action) {
+    const { maxChars, hardLimit, onCharsLimitExceeded } = extension.getConfig();
+    if (typeof onCharsLimitExceeded === 'function') {
+      if (!hardLimit || prevContent !== nextContent) {
+        onCharsLimitExceeded(action.host, maxChars);
+      }
+    }
+  }
+  /**
+   * Check if the given extension is a word count extension.
+   *
+   * @param {VegaRTEExtension} extension - the extension to check
+   * @returns {boolean} - whether the extension is a word count extension
+   */
+  isWordCountExtension(extension) {
+    return extension['type'] === RTE_WORD_COUNT_KEY;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/word-count/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,62 @@
+import { RTE_WORD_COUNT_KEY } from '../../constants/constant';
+import { VegaRTEExtension } from '../extension.abstract';
+import { VegaRTEContent } from '../../dto/content-state';
+import { COMMIT_VALUE } from '../../dto/actions/commit-value-action';
+import { PreventHardLimitExceedInterceptor } from './action-handler-interceptors/prevent-hard-limit-exceed-interceptor';
+/**
+ * Default configuration applied when a word count option is not provided.
+ */
+export const DEFAULT_WORD_COUNT_CONFIG = {
+  showCharCount: true,
+  countInlineBreak: false,
+  hardLimit: false,
+};
+/**
+ * Rich Text Editor extension that provides character counting.
+ */
+export class VegaRTEWordCountExtension extends VegaRTEExtension {
+  constructor(config = {}) {
+    super();
+    /**
+     * Runtime discriminator used by the core to identify this extension.
+     */
+    this.type = RTE_WORD_COUNT_KEY;
+    this.config = Object.assign(Object.assign({}, DEFAULT_WORD_COUNT_CONFIG), config);
+  }
+  /**
+   * Get the extension configuration.
+   *
+   * @returns {ResolvedRTEWordCountConfig} The word count configuration.
+   */
+  getConfig() {
+    return this.config;
+  }
+  /**
+   * Compute the character count data for the given editor content.
+   *
+   * @param {VegaRTEContent} value - The editor content.
+   * @returns {VegaRTEWordCountData} The computed character count data.
+   */
+  getData(value) {
+    const plainText = value.getPlainText();
+    const { maxChars, hardLimit } = this.config;
+    const count = this.calculateTextCount(plainText);
+    return { count, maxChars, hardLimit };
+  }
+  /**
+   * Get the character count for the given content string.
+   *
+   * @param {string} content - The content string.
+   * @returns {number} The character count.
+   */
+  calculateTextCount(content) {
+    const { countInlineBreak } = this.config;
+    const text = countInlineBreak ? content : content.replace(/\n/g, '');
+    // Use the spread operator so that surrogate pairs (e.g. emoji) count as a single character.
+    return [...text].length;
+  }
+}
+(() => {
+  // Gate over-limit commits through the shared action-interceptor pipeline.
+  VegaRTEExtension.registerActionHandlerInterceptor(VegaRTEContent.name, COMMIT_VALUE, new PreventHardLimitExceedInterceptor());
+})();

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

@@ -32,6 +32,7 @@ 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';
+export { VegaRTEWordCountExtension } from './extensions/word-count/word-count-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

@@ -7,6 +7,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';
+import { BlockBoundaryRegistry } from '../../extensions/block-boundary-registry';
 /**
  * Inject the editor context to the extensions.
  */
@@ -113,6 +114,7 @@ export class RTEExtensionController extends VegaSlimmer {
       getSelectedNodes: this.getSelectedNodes,
       setSelectedNodes: this.selectionController.setSelectedNodes.bind(this.selectionController),
       getSelection: this.selectionController.getSelection.bind(this.selectionController),
+      blockBoundaryRegistry: new BlockBoundaryRegistry(),
     };
   }
 }

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

@@ -23,7 +23,10 @@ export class TextStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstr
   }
   /**
    * Get the node type of element. The element type is determined in the following
-   * order: "data-type" attribute, node name, font size and class name.
+   * order: "data-type" attribute, class name, node name, font size.
+   * Class name is checked before node name so that an explicit
+   * `v-rte--text-style-*` marker (e.g. applied by the Word paste transformer)
+   * takes precedence over the element's default tag-based role.
    *
    * @param {HTMLElement} element - element.
    * @returns {Nullable<VegaRTETextStyleType>} - node type.
@@ -32,15 +35,15 @@ export class TextStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstr
     const byDataType = this.getElementTypeByDataType(element);
     if (byDataType)
       return byDataType;
+    const byClassName = this.getElementTypeByClassName(element);
+    if (byClassName)
+      return byClassName;
     const byNodeName = this.getElementTypeByNodeName(element);
     if (byNodeName)
       return byNodeName;
     const byFontSize = this.getElementTypeByFontSize(element);
     if (byFontSize)
       return byFontSize;
-    const byClassName = this.getElementTypeByClassName(element);
-    if (byClassName)
-      return byClassName;
     return null;
   }
   /**

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/continue-inline-to-rte-text-block-strategy.js

@@ -1,6 +1,7 @@
 import { generateUUID } from '../../../../../../utils/misc';
 import { RTETextBlock } from '../../../../dto/blocks/text-block';
 import { RTETextNode } from '../../../../dto/nodes/text-node';
+import { RTE_BLOCK_BOUNDARY_ATTRIBUTE } from '../../../../constants/constant';
 import htmlElementToAnnotationGenerator from './annotation-handler/html-element-to-annotation-generator';
 import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
 import { ALWAYS_INLINE_TAGS, DEDICATED_STRATEGY_TAGS, PHRASING_CONTENT_TAGS, isInBlockTextContext, } from './strategy-tags';
@@ -83,6 +84,8 @@ export class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrateg
   isInlineCandidate(element, options) {
     if (element.nodeType === Node.TEXT_NODE)
       return true;
+    if (this.isBlockBoundaryElement(element, options))
+      return false;
     if (ALWAYS_INLINE_TAGS.has(element.nodeName))
       return true;
     if (this.isDedicatedBlockTag(element.nodeName))
@@ -91,6 +94,20 @@ export class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrateg
       return true;
     return this.isInlineLeafOrWrapper(element);
   }
+  /**
+   * Check whether an element marks a block boundary.
+   *
+   * @param {HTMLElement} element - Element to inspect.
+   * @param {VegaRTETransformOptions} options - Transformation options.
+   * @returns {boolean} Whether the element is a boundary.
+   */
+  isBlockBoundaryElement(element, options) {
+    var _a;
+    if (element.hasAttribute(RTE_BLOCK_BOUNDARY_ATTRIBUTE)) {
+      return true;
+    }
+    return !!((_a = options.blockBoundaryRegistry) === null || _a === void 0 ? void 0 : _a.isBoundary(element));
+  }
   /**
    * Returns true when the tag has a dedicated block strategy (excludes inline annotation tags CODE and A).
    *

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

@@ -8,6 +8,7 @@ import { RTETextNode } from '../../../../dto/nodes/text-node';
 import { generateUUID } from '../../../../../../utils/misc';
 import { escapeHtml } from '../../../../helpers/utils';
 import { ReplaceSelectedTextAction } from '../../../../dto/actions/replace-selected-text-action';
+import { RTE_PASTE_MODE_DATA_TYPE, RTE_PASTE_MODE_WORD } from '../../../../constants/constant';
 /**
  * Handle user paste
  */
@@ -110,8 +111,11 @@ export class InsertPasteHandler extends BaseHandler {
     const body = parsedDoc.body;
     // Extract plain text from the parsed document
     const plainText = (body.textContent || '').replace(/\r\n?/g, '\n');
-    // Check for rich inline formatting
-    let hasFormatting = Boolean(body.querySelector('b,strong,i,em,s,del,strike,u,mark'));
+    // Check for rich inline formatting. Code blocks (`pre` carrying
+    // `data-language`, the marker the code-block strategy recognizes) count as
+    // formatting so they are never flattened to inline plain text, which would
+    // drop the code block on single-line pastes whose text equals the HTML text.
+    let hasFormatting = Boolean(body.querySelector('b,strong,i,em,s,del,strike,u,mark,code,pre[data-language]'));
     if (!hasFormatting) {
       hasFormatting = Array.from(body.querySelectorAll('span')).some((span) => {
         const style = span.getAttribute('style') || span.getAttribute('data-style') || '';
@@ -202,9 +206,18 @@ export class InsertPasteHandler extends BaseHandler {
     context.restore(rootElements);
     this.normalizeImportedHtmlArtifacts(parsedDoc.body);
     const htmlElements = Array.from(parsedDoc.body.childNodes);
-    const resultBlocks = ElementToDtoStrategyProcessor.process(htmlElements)
+    // Word paste enables custom-annotation processing (skipCustomAnnotations: false)
+    // so that inline styles produced by WordPasteStrategy (colors, font-weight, etc.)
+    // are mapped to RTE annotations. Regular rich paste skips them (undefined → default).
+    const transformOptions = payload.type === RTE_PASTE_MODE_WORD
+      ? {
+        autoMatchFormat: true,
+        skipCustomAnnotations: false,
+      }
+      : undefined;
+    const resultBlocks = ElementToDtoStrategyProcessor.process(htmlElements, transformOptions)
       .filter(Boolean)
-      .map((output) => output.toDto())
+      .map((output) => output.toDto(transformOptions))
       .filter(Boolean);
     // Fallback for synthetic payloads: if strategy conversion yields no blocks
     // but we still have plain text, create paragraph/text blocks directly.
@@ -475,6 +488,7 @@ export class InsertPasteHandler extends BaseHandler {
     return {
       html: event.dataTransfer.getData('text/html') || eventPayload.html || '',
       text: event.dataTransfer.getData('text/plain') || eventPayload.text || '',
+      type: event.dataTransfer.getData(RTE_PASTE_MODE_DATA_TYPE) || '',
     };
   }
 }

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

@@ -8,7 +8,7 @@ import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-sli
 import { RTETextBlock } from '../../dto/blocks/text-block';
 import { RTETextNode } from '../../dto/nodes/text-node';
 import stateEntityRenderingRegistry from './state-entity-rendering-registry';
-import { ZERO_WIDTH_SPACE } from '../../constants/constant';
+import { RTE_UPDATE_SOURCE_KEY, RTEUpdateSource, ZERO_WIDTH_SPACE } from '../../constants/constant';
 import { UpdateTextAction } from '../../dto/actions/update-text-action';
 import changeManager from '../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
@@ -215,6 +215,7 @@ export class InsertCompositionTextController extends VegaSlimmer {
     const inputEvent = new CustomEvent('beforeinput');
     inputEvent['data'] = text;
     inputEvent['inputType'] = 'insertText';
+    inputEvent[RTE_UPDATE_SOURCE_KEY] = RTEUpdateSource.Composition;
     this.editableElementRef.dispatchEvent(inputEvent);
   }
 }

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

@@ -475,21 +475,40 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
    * @returns {Nullable<FocusNodeRangeState>} - The detected element's range state or null if not found.
    */
   detectNearestElement(block, offset) {
+    // Atomic blocks (e.g. table) opt out of descent so the caret stays anchored to the
+    // block boundary — resolving into a cell would break paragraph insertion before/after.
+    if (!block.allowsCaretDescend()) {
+      return;
+    }
     if (block.children) {
       const currentNode = block.children[offset];
       const prevNode = block.children[offset - 1];
-      if (currentNode && currentNode instanceof RTENode) {
+      // A nested block (e.g. an html-block's inner paragraph rendered with
+      // `display: contents`) can receive the caret at its own boundary, so descend
+      // into it to reach the real node — the start of the next block or the end of
+      // the previous one.
+      if (currentNode instanceof RTENode) {
         return {
           startNode: currentNode,
           startOffset: 0,
         };
       }
-      else if (prevNode && prevNode instanceof RTENode) {
+      else if (currentNode instanceof RTEBlock) {
+        // Fall through to the previous node if descending yields nothing (e.g. an empty block).
+        const nested = this.detectNearestElement(currentNode, 0);
+        if (nested) {
+          return nested;
+        }
+      }
+      if (prevNode instanceof RTENode) {
         return {
           startNode: prevNode,
           startOffset: prevNode.getRangeEndOffset(),
         };
       }
+      else if (prevNode instanceof RTEBlock) {
+        return this.detectNearestElement(prevNode, prevNode.children.length);
+      }
     }
   }
 }

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

@@ -15,6 +15,7 @@ import { InsertPasteHandler } from './helper/input-event-handler/insert-paste-ha
 import { KeyboardLinkHandler } from './helper/input-event-handler/keyboard-link-handler';
 import { generateUUID } from '../../../../utils/misc';
 import { RTECodeBlock } from '../../dto/blocks/code-block';
+import { RTE_UPDATE_SOURCE_KEY, RTEUpdateSource } from '../../constants/constant';
 /** Used to monitoring the user input actions by event listener */
 export class UserInputController extends VegaSlimmer {
   constructor() {
@@ -50,6 +51,7 @@ export class UserInputController extends VegaSlimmer {
       }
       this.insertCompositionTextController.removeObserver();
       let updateFlag = false;
+      let updateSource = RTEUpdateSource.Default;
       switch (inputType) {
         case 'insertParagraph':
           updateFlag = true;
@@ -57,6 +59,10 @@ export class UserInputController extends VegaSlimmer {
           break;
         case 'insertText':
           updateFlag = true;
+          updateSource =
+            e[RTE_UPDATE_SOURCE_KEY] === RTEUpdateSource.Composition
+              ? RTEUpdateSource.Composition
+              : RTEUpdateSource.Default;
           this.insertTextHandler.execute(this.value, this.selectionController, this.host, e);
           break;
         case 'insertLineBreak':
@@ -77,7 +83,7 @@ export class UserInputController extends VegaSlimmer {
           break;
       }
       if (updateFlag) {
-        void this.valueController.flushChanges(this.value);
+        void this.valueController.flushChanges(this.value, true, updateSource);
       }
     };
   }

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

@@ -17,10 +17,18 @@ import { waitForComponentDidRender } from '../../../../helpers/common/wait-for-c
 import { RTEEditorState } from '../../dto/editor-state';
 import { RTESelectionState } from '../../dto/selection-state';
 import stateEntityRenderingRegistry from './state-entity-rendering-registry';
+import { ActionHandleStrategyRegistry } from '../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { CommitValueAction } from '../../dto/actions/commit-value-action';
+import { RTEUpdateSource } from '../../constants/constant';
 /**
  * The value controller is responsible for updating the value of the rich text editor.
  */
 export class ValueController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    // Deep clone of the last committed value, kept only while a commit validator is active, used to roll back rejected changes.
+    this.committedSnapshot = null;
+  }
   /**
    * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.connectedCallback}
    */
@@ -65,15 +73,47 @@ export class ValueController extends VegaSlimmer {
       });
     }
     this.registerEditorRefAndContent();
+    this.seedCommittedSnapshot();
+  }
+  /**
+   * Seeds the rollback snapshot from the current value while a commit interceptor is active.
+   * Runs on load and on extension changes so runtime re-registration stays protected.
+   */
+  seedCommittedSnapshot() {
+    if (this.wordCountController.hasWordCountHardLimit()) {
+      this.committedSnapshot = this.value ? this.value.clone(true) : null;
+    }
   }
   /**
    * Updates the value of the editor and restore the selection.
    *
    * @param {VegaRTEContent} newValue The new value to set.
    * @param {boolean} recordHistory - Whether to record the change in history.
+   * @param {RTEUpdateSource} updateSource - The source of the update, defaulting to 'default'.
    */
-  async flushChanges(newValue, recordHistory = true) {
-    this.value = newValue.clone();
+  async flushChanges(newValue, recordHistory = true, updateSource = RTEUpdateSource.Default) {
+    const previous = this.committedSnapshot;
+    const action = new CommitValueAction(newValue, previous, this.host);
+    const committed = ActionHandleStrategyRegistry.executeTheStrategy(action, newValue);
+    if (!committed) {
+      if (updateSource === RTEUpdateSource.Composition) {
+        // The composition input characters cannot be deleted, so we force a repaint to restore the content from the model.
+        this.vegaRichTextEditorRenderer.forceContentRepaint();
+      }
+      else {
+        // The commit was vetoed, so restore the placeholder the framework skipped repainting and roll back.
+        this.vegaRichTextEditorRenderer.restoreEmptyTextPlaceholders();
+      }
+      // Deep clone so the rolled-back value never shares nodes with the snapshot, which in-place edits would otherwise corrupt.
+      this.value = (previous !== null && previous !== void 0 ? previous : newValue).clone(true);
+      if (previous) {
+        // Seed the snapshot again so the next commit attempt has a valid rollback point.
+        this.seedCommittedSnapshot();
+      }
+      await waitForComponentDidRender(this.host);
+      return;
+    }
+    this.value = committed.clone();
     if (recordHistory) {
       this.historyController.registerHistory(new RTEEditorState(this.value, new RTESelectionState(this.selectionController.getCurrentRange())));
     }
@@ -115,6 +155,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], ValueController.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentField()
+], ValueController.prototype, "wordCountController", void 0);
+__decorate([
+  MapToComponentField()
+], ValueController.prototype, "vegaRichTextEditorRenderer", void 0);
 __decorate([
   MapToComponentField()
 ], ValueController.prototype, "sourceEditConfig", void 0);
@@ -130,3 +176,7 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchValueUpdate')
 ], ValueController.prototype, "watchValueUpdate", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad'),
+  MapToComponentMethod('watchExtensions')
+], ValueController.prototype, "seedCommittedSnapshot", null);

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

@@ -0,0 +1,79 @@
+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, VegaSlimmer } from 'vega-slimmer/core';
+import { RTE_WORD_COUNT_KEY } from '../../constants/constant';
+import { deepEqual } from '../../../../utils/object';
+import { isNonNullable } from '../../../../types/type-guard';
+/**
+ * Bridges the word count extension to the editor component so the footer UI can
+ * read whether the character count should be shown and its current value.
+ */
+export class WordCountController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.cachedValue = null;
+    this.cachedConfig = null;
+    this.cachedData = null;
+  }
+  /**
+   * Whether the character count UI should be rendered.
+   *
+   * @returns {boolean} True when a word count extension requests the UI.
+   */
+  shouldShowUI() {
+    var _a;
+    return !!((_a = this.findWordCountExtension()) === null || _a === void 0 ? void 0 : _a.getConfig().showCharCount);
+  }
+  /**
+   * Compute the current character count data from the editor content.
+   *
+   * @returns {Nullable<VegaRTEWordCountData>} The count data or null when no word count extension is registered.
+   */
+  getData() {
+    const extension = this.findWordCountExtension();
+    if (!extension) {
+      return null;
+    }
+    const value = this.host.value;
+    const config = extension.getConfig();
+    // VegaRTEContent is immutable, so a matching value/config reference means the data is unchanged.
+    if (this.cachedData && value === this.cachedValue && deepEqual(config, this.cachedConfig)) {
+      return this.cachedData;
+    }
+    this.cachedData = extension.getData(value);
+    this.cachedValue = value;
+    this.cachedConfig = config;
+    return this.cachedData;
+  }
+  /**
+   * Whether the word count extension gates commits with a hard character limit.
+   *
+   * @returns {boolean} True when a hard limit with a max character count is configured for this host.
+   */
+  hasWordCountHardLimit() {
+    var _a;
+    const config = (_a = this.findWordCountExtension()) === null || _a === void 0 ? void 0 : _a.getConfig();
+    return !!config && Boolean(config.hardLimit) && isNonNullable(config.maxChars);
+  }
+  /**
+   * Locate the word count extension by its runtime `type` discriminator.
+   * Use this way instead of instanceof to avoid direct dependency on the extension class.
+   *
+   * @returns {Nullable<VegaRTEWordCountExtension>} The word count extension or null.
+   */
+  findWordCountExtension() {
+    var _a;
+    const extension = ((_a = this.extensions) !== null && _a !== void 0 ? _a : []).find((ext) => 'type' in ext && ext['type'] === RTE_WORD_COUNT_KEY);
+    return extension !== null && extension !== void 0 ? extension : null;
+  }
+}
+__decorate([
+  MapToComponentField()
+], WordCountController.prototype, "extensions", void 0);
+__decorate([
+  MapToComponentField()
+], WordCountController.prototype, "host", void 0);