@globalpayments/vega 2.99.0 → 2.100.0

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

@@ -22,6 +22,7 @@ export class MergeCellsButtonSlimmer extends TableSettingButtonSlimmer {
       icon: 'rte-table-merge-cells',
       title: 'Merge cells',
       showArrowIcon: true,
+      ariaLabel: 'Merge Cells',
     });
     this.handleDropdownItemClick = (input) => {
       if (Object.values(SplitCellOperationType).includes(input.detail)) {
@@ -35,7 +36,7 @@ export class MergeCellsButtonSlimmer extends TableSettingButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { minWidth: 150, trigger: "click", ref: (el) => {
+    return (h("vega-dropdown", { role: "presentation", isScreenPosition: true, minWidth: 150, trigger: "click", ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownShow, this.handleDropdownVisibilityChange);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownHide, this.handleDropdownVisibilityChange);
@@ -68,13 +69,13 @@ export class MergeCellsButtonSlimmer extends TableSettingButtonSlimmer {
   renderActionList() {
     const disabledMap = this.getMergeDirectionDisabledMap();
     return (h("div", { tabIndex: 0, role: "menu", slot: "items", onMouseDown: this.preventDefaultEvent, onKeyDown: this.preventDefaultEvent },
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELLS }, "Merge cells"),
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_UP, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_UP] }, "Merge cell up"),
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_RIGHT, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_RIGHT] }, "Merge cell right"),
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_DOWN, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_DOWN] }, "Merge cell down"),
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_LEFT, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_LEFT] }, "Merge cell left"),
-      h("vega-dropdown-item", { itemKey: SplitCellOperationType.SPLIT_CELL_VERTICALLY, disabled: !this.selectSingleCell() }, "Split cell vertically"),
-      h("vega-dropdown-item", { itemKey: SplitCellOperationType.SPLIT_CELL_HORIZONTALLY, disabled: !this.selectSingleCell() }, "Split cell horizontally")));
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELLS, label: "Merge cells" }, "Merge cells"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_UP, label: "Merge cell up", disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_UP] }, "Merge cell up"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_RIGHT, label: "Merge cell right", disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_RIGHT] }, "Merge cell right"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_DOWN, label: "Merge cell down", disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_DOWN] }, "Merge cell down"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_LEFT, label: "Merge cell left", disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_LEFT] }, "Merge cell left"),
+      h("vega-dropdown-item", { itemKey: SplitCellOperationType.SPLIT_CELL_VERTICALLY, label: "Split cell vertically", disabled: !this.selectSingleCell() }, "Split cell vertically"),
+      h("vega-dropdown-item", { itemKey: SplitCellOperationType.SPLIT_CELL_HORIZONTALLY, label: "Split cell horizontally", disabled: !this.selectSingleCell() }, "Split cell horizontally")));
   }
   selectSingleCell() {
     return this.selectedCells.length === 1;

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

@@ -1,13 +1,20 @@
+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 { h } from '@stencil/core';
 import { TableSettingButtonSlimmer } from './table-setting-button-slimmer.abstract';
 import { DomNodeSubjectObserverFactory } from '../../../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaDropdownClick } from '../../../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, } from '../../../../../../../helpers/event-manager/event-id/vega-event-id';
 import { TableSettingType } from '../../../setting-event-handlers/setting-event-handler.abstract';
 import { RowOperationType } from '../../../setting-event-handlers/row-operation';
 import { RTETableHeadBlock } from '../../../dto/table-head-block';
 import { RTETableBlock } from '../../../dto/table-block';
 import { getParentBlockByType } from '../../../utils/utils';
 import { RTETableBodyBlock } from '../../../dto/table-body-block';
+import { MapToComponentField } from 'vega-slimmer/core';
 /**
  * Slimmer dedicated to building the row button.
  */
@@ -17,14 +24,20 @@ export class RowButtonSlimmer extends TableSettingButtonSlimmer {
       icon: 'rte-table-row',
       title: 'Row',
       showArrowIcon: true,
+      ariaLabel: 'Row Operations',
     });
     this.handleDropdownItemClick = (input) => {
       this.emitClickEvent([TableSettingType.ROW, input.detail]);
     };
+    this.handleDropdownVisibilityChange = ({ eventName }) => {
+      this.isRowDropdownOpen = eventName.toLocaleLowerCase().indexOf('show') >= 0;
+    };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { minWidth: 180, trigger: "click", ref: (el) => {
+    return (h("vega-dropdown", { role: "presentation", isScreenPosition: true, minWidth: 180, trigger: "click", ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownShow, this.handleDropdownVisibilityChange);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownHide, this.handleDropdownVisibilityChange);
       } },
       renderBtn(),
       this.renderActionList()));
@@ -46,14 +59,13 @@ export class RowButtonSlimmer extends TableSettingButtonSlimmer {
   renderActionList() {
     const shouldChecked = this.areSelectedRowsHeaderRows();
     return (h("div", { tabIndex: 0, role: "menu", slot: "items", onMouseDown: this.preventDefaultEvent, onKeyDown: this.preventDefaultEvent },
-      h("vega-dropdown-item", { itemKey: RowOperationType.HEADER_ROW },
-        h("vega-flex", { alignItems: "center", direction: "row", gap: "size-8" },
-          h("vega-toggle-switch", { key: shouldChecked.toString(), size: "small", checked: shouldChecked }),
-          h("span", null, "Header row"))),
-      h("vega-dropdown-item", { itemKey: RowOperationType.ADD_ROW_ABOVE }, "Insert row above"),
-      h("vega-dropdown-item", { itemKey: RowOperationType.ADD_ROW_BELOW }, "Insert row below"),
-      h("vega-dropdown-item", { disabled: this.areAllRowsSelected(), itemKey: RowOperationType.DELETE_ROW }, "Delete row"),
-      h("vega-dropdown-item", { itemKey: RowOperationType.SELECT_ROW }, "Select row")));
+      h("vega-dropdown-item", { itemKey: RowOperationType.HEADER_ROW, label: "Header Row" },
+        h("vega-flex", { alignItems: "center", direction: "row", gap: "size-8", "aria-hidden": "true" },
+          h("vega-toggle-switch", { key: shouldChecked.toString(), size: "small", checked: shouldChecked, label: "Header Row" }))),
+      h("vega-dropdown-item", { itemKey: RowOperationType.ADD_ROW_ABOVE, label: "Insert row above" }, "Insert row above"),
+      h("vega-dropdown-item", { itemKey: RowOperationType.ADD_ROW_BELOW, label: "Insert row below" }, "Insert row below"),
+      h("vega-dropdown-item", { disabled: this.areAllRowsSelected(), itemKey: RowOperationType.DELETE_ROW, label: "Delete row" }, "Delete row"),
+      h("vega-dropdown-item", { itemKey: RowOperationType.SELECT_ROW, label: "Select row" }, "Select row")));
   }
   /**
    * Check if all selected rows are header rows.
@@ -101,3 +113,6 @@ export class RowButtonSlimmer extends TableSettingButtonSlimmer {
     return Array.from(selectedRows);
   }
 }
+__decorate([
+  MapToComponentField({ writable: true })
+], RowButtonSlimmer.prototype, "isRowDropdownOpen", void 0);

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

@@ -9,6 +9,7 @@ export class TablePropertiesButtonSlimmer extends TableSettingButtonSlimmer {
       icon: 'rte-table-properties',
       title: 'table properties',
       showArrowIcon: false,
+      ariaLabel: 'Table Properties',
     });
   }
   renderBtnWrapper(renderBtn) {

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

@@ -8,13 +8,13 @@ import { h } from '@stencil/core';
 import { VegaInternalIconManager } from '../../../../../../../helpers/icon/internal-icon-manager';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 export class TableSettingButtonSlimmer extends VegaSlimmer {
-  constructor({ icon, title, showArrowIcon }) {
+  constructor({ icon, title, showArrowIcon, ariaLabel }) {
     super();
     this.renderBtn = () => {
       const selected = this.isSelected();
       const disable = this.isDisabled();
-      return (h("vega-tooltip", { key: `table-setting-${this.icon}`, text: this.getTitle(), placement: ['bottom', 'top'], trigger: "hover" },
-        h("button", { type: "button", class: {
+      return (h("vega-tooltip", { role: "presentation", key: `table-setting-${this.icon}`, text: this.getTitle(), placement: ['bottom', 'top'], trigger: "hover" },
+        h("button", { type: "button", "aria-label": this.ariaLabel, class: {
             'rte-table-setting-item': true,
             'rte-table-setting-item-disabled': disable,
             'rte-table-setting-item-selected': selected,
@@ -26,13 +26,14 @@ export class TableSettingButtonSlimmer extends VegaSlimmer {
             }
             this.handleClick(event);
           }, onKeyDown: this.preventDefaultEvent, onMouseDown: this.preventDefaultEvent },
-          h("vega-flex", { alignItems: "center", justifyContent: "center" },
+          h("vega-flex", { alignItems: "center", justifyContent: "center", "aria-hidden": "true" },
             h("vega-icon", { icon: VegaInternalIconManager.getIconKey(this.icon), size: "size-16", color: this.getIconColor() }),
             this.showArrowIcon ? (h("vega-icon", { size: "size-8", style: { marginLeft: '8px' }, icon: VegaInternalIconManager.getIconKey('chevron-down'), color: this.getIconColor() })) : null))));
     };
     this.icon = icon;
     this.title = title;
     this.showArrowIcon = showArrowIcon;
+    this.ariaLabel = ariaLabel;
   }
   render() {
     return typeof this.renderBtnWrapper === 'function'

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

@@ -16,7 +16,7 @@ const buttonList = [
 ];
 export class VegaRichTextTableSettingRenderer extends VegaSlimmer {
   render() {
-    return (h("vega-flex", { gap: "size-8", class: "rte-table-setting-content" }, buttonList.map((item) => this.renderButton(item))));
+    return (h("div", { class: "rte-table-setting-content" }, buttonList.map((item) => this.renderButton(item))));
   }
   renderButton(item) {
     switch (item) {

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

@@ -3,8 +3,14 @@
  * Deprecated. Not for use in new websites.
  * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
  */
+:host .rte-table-setting-content {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
 :host .rte-table-setting-item {
   border: none;
+  border-radius: 4px;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 4px;
@@ -12,6 +18,10 @@
   cursor: pointer;
   background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
 }
+:host .rte-table-setting-item:focus {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: -1px;
+}
 :host .rte-table-setting-item:not(.rte-table-setting-item-disabled, .rte-table-setting-item-selected):hover {
   background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
 }

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/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/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/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);

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

@@ -54,14 +54,17 @@ export class ToolbarRenderer extends VegaSlimmer {
     const [renderedItems, totalVisibleCount] = this.renderToolbarItems();
     return (h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" },
       this.allowSourceEdit && (h(Fragment, null,
-        h("div", { class: "toolbar-btn-group" }, this.sourceEditToolbarButtonSlimmer.render()),
+        h("div", { class: "toolbar-btn-group", role: "presentation" }, this.sourceEditToolbarButtonSlimmer.render()),
         this.uniqueToolbarItems.length > 0 &&
           totalVisibleCount > 0 &&
           this.renderVegaDivider())),
       renderedItems));
   }
   renderVegaDivider() {
-    return (h("vega-box", { height: "size-32" },
+    // Mark the divider as decorative so screen readers (e.g. VoiceOver
+    // on Firefox) skip it when navigating from the Edit Source button
+    // to the next toolbar item.
+    return (h("vega-box", { height: "size-32", "aria-hidden": "true", role: "presentation" },
       h("vega-divider", { direction: "vertical" })));
   }
   /**
@@ -100,7 +103,7 @@ export class ToolbarRenderer extends VegaSlimmer {
         return null;
       })
         .filter(isNonNullable);
-      return (h("div", { class: { 'toolbar-btn-group': true, 'vega-hidden': visibleCountPerGroup < 1 } }, groupElement));
+      return (h("div", { class: { 'toolbar-btn-group': true, 'vega-hidden': visibleCountPerGroup < 1 }, role: "presentation" }, groupElement));
     });
     return [renderedItems, totalVisibleCount];
   }

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

@@ -22,6 +22,7 @@ export class BulletsNumbersToolbarButtonSlimmer extends VisualModeToolbarButtonS
       tooltip: {
         text: 'Bullets',
       },
+      ariaLabel: 'Bullets and Numbers',
     });
     this.bulletsToolbarButtonSlimmer = new BulletsToolbarButtonSlimmer();
     this.numbersToolbarButtonSlimmer = new NumbersToolbarButtonSlimmer();
@@ -42,7 +43,7 @@ export class BulletsNumbersToolbarButtonSlimmer extends VisualModeToolbarButtonS
     }
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", isScreenPosition: true, ref: (ref) => (this.popoverRef = ref) },
+    return (h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", isScreenPosition: true, role: "presentation", ref: (ref) => (this.popoverRef = ref) },
       h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
       h("div", { slot: "popover" }, this.renderContent())));
   }