@heartlandone/vega 2.60.0 → 2.62.0

package/dist/cjs/{app-globals-8a3536ba.js → app-globals-8f5fa42a.js}

@@ -1,17 +1,19 @@
 'use strict';
 
 const featureFlagController = require('./feature-flag-controller-ce2162c8.js');
-const vegaSkeletonLoaderController = require('./vega-skeleton-loader-controller-b1971f43.js');
+const tokenExtension = require('./token-extension-23ccff1d.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const vegaEnvManager = require('./vega-env-manager-23b8b23c.js');
-const iconManager = require('./icon-manager-9072356d.js');
+const internalIconManager = require('./internal-icon-manager-32f9ed63.js');
 require('./wait-for-vega-handler-5469ff80.js');
 require('./ui-4ce1fa08.js');
 const translation = require('./translation-cde4dce3.js');
-const contentState = require('./content-state-2096aa5a.js');
+const dtoRendererManager = require('./dto-renderer-manager-f3894490.js');
+const codeBlock = require('./code-block-eb66d852.js');
 const typography = require('./typography-4560e7f1.js');
 const validCreditCardNumberRule = require('./valid-credit-card-number-rule-ce5c9147.js');
-const index$1 = require('./index-10199ee8.js');
+const index$1 = require('./index-5505e8dd.js');
+const languageExtension = require('./language-extension-20a1dba5.js');
 const staticSubjectTitle = require('./static-subject-title-85732e0f.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const observer = require('./observer-f49483e8.js');
@@ -212,19 +214,19 @@ function enableFeatureFlagFromClientGlobal() {
  * Inject VegaLoader to global as a public api
  */
 function injectVegaLoaderIntoGlobal() {
-  globalThis['VegaLoader'] = vegaSkeletonLoaderController.VegaLoader;
+  globalThis['VegaLoader'] = tokenExtension.VegaLoader;
 }
 /**
  * Inject VegaNotify to global as a public api
  */
 function injectVegaNotifyIntoGlobal() {
-  globalThis.VegaNotify = vegaSkeletonLoaderController.VegaNotify;
+  globalThis.VegaNotify = tokenExtension.VegaNotify;
 }
 /**
  * Inject VegaThemeManager to global as a public api
  */
 function injectVegaThemeManagerIntoGlobal() {
-  globalThis.VegaThemeManager = vegaSkeletonLoaderController.VegaThemeManager;
+  globalThis.VegaThemeManager = tokenExtension.VegaThemeManager;
 }
 /**
  * Inject VegaLogLevel to global as a public api
@@ -236,7 +238,7 @@ function injectVegaLogLevelIntoGlobal() {
  * Inject VegaDialog to global as a public api
  */
 function injectVegaDialogIntoGlobal() {
-  globalThis.VegaDialog = vegaSkeletonLoaderController.VegaDialog;
+  globalThis.VegaDialog = tokenExtension.VegaDialog;
 }
 /**
  * register global vega slimmers
@@ -248,7 +250,7 @@ function registerGlobalVegaSlimmers() {
  * Inject setEventSemantics to global as a public api
  */
 function injectSetEventSemanticsIntoGlobal() {
-  globalThis.VegaEventManager = vegaSkeletonLoaderController.VegaEventManager;
+  globalThis.VegaEventManager = tokenExtension.VegaEventManager;
 }
 /**
  * Inject Vega typography stylesheet
@@ -273,13 +275,13 @@ function injectVegaTypography() {
  * Inject VegaIconManager to global as a public api
  */
 function injectVegaIconManager() {
-  globalThis.VegaIconManager = iconManager.VegaIconManager;
+  globalThis.VegaIconManager = internalIconManager.VegaIconManager;
 }
 /**
  * Inject VegaZIndexManager to global as a public api
  */
 function injectVegaZIndexManagerIntoGlobal() {
-  globalThis.VegaZIndexManager = vegaSkeletonLoaderController.VegaZIndexManager;
+  globalThis.VegaZIndexManager = tokenExtension.VegaZIndexManager;
 }
 /**
  * Inject ValidCreditCardNumberRule to global as a public api.
@@ -311,7 +313,7 @@ function injectWaitForVegaIntoGlobal() {
  * Inject VegaSkeletonLoader to global as a public api
  */
 function injectVegaSkeletonLoaderIntoGlobal() {
-  globalThis.VegaSkeletonLoader = vegaSkeletonLoaderController.VegaSkeletonLoader;
+  globalThis.VegaSkeletonLoader = tokenExtension.VegaSkeletonLoader;
 }
 /**
  * Inject VegaTranslation to global as a public api
@@ -322,15 +324,21 @@ function injectVegaTranslationIntoGlobal() {
 }
 /**
  * Inject VegaRTEContent to global as a public api
+ * Inject VegaRTETokenExtension to global as a public api
+ * Inject VegaRTELanguageExtension to global as a public api
+ * Inject VegaRTEPresetToolbarItems to global as a variable
  */
 function injectVegaRichTextEditorClassIntoGlobal() {
-  globalThis.VegaRTEContent = contentState.VegaRTEContent;
+  globalThis.VegaRTEContent = dtoRendererManager.VegaRTEContent;
+  globalThis.VegaRTETokenExtension = tokenExtension.VegaRTETokenExtension;
+  globalThis.VegaRTELanguageExtension = languageExtension.VegaRTELanguageExtension;
+  globalThis.VegaRTEPresetToolbarItems = codeBlock.VegaRTEPresetToolbarItems;
 }
 /**
  * Inject VegaPublicValidationRules to global as a public api
  */
 function injectVegaPublicValidationRules() {
-  void Promise.resolve().then(function () { return require('./public-rules-c711fae3.js'); }).then((module) => {
+  void Promise.resolve().then(function () { return require('./public-rules-5d0f3a5f.js'); }).then((module) => {
     Object.entries(module).forEach(([name, value]) => {
       globalThis[name] = value;
     });
@@ -341,7 +349,7 @@ function injectVegaPublicValidationRules() {
  */
 function applyBrandingFromClientGlobal() {
   if (globalThis['VegaThemeManagerApplyBranding']) {
-    vegaSkeletonLoaderController.VegaThemeManager.applyBranding(globalThis['VegaThemeManagerApplyBranding']);
+    tokenExtension.VegaThemeManager.applyBranding(globalThis['VegaThemeManagerApplyBranding']);
   }
 }
 

package/dist/cjs/base-renderer-0a3b62b7.js

@@ -0,0 +1,9 @@
+'use strict';
+
+/**
+ * Base renderer class for the rich text editor.
+ */
+class VegaRTEBaseRenderer {
+}
+
+exports.VegaRTEBaseRenderer = VegaRTEBaseRenderer;

package/dist/cjs/{child-nodes-event-prevent-slimmer-5df43771.js → child-nodes-event-prevent-slimmer-4e96270e.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const internalVegaEventManager = require('./internal-vega-event-manager-83065493.js');
+const internalVegaEventManager = require('./internal-vega-event-manager-28b957c8.js');
 const vegaEnvManager = require('./vega-env-manager-23b8b23c.js');
 const featureFlagController = require('./feature-flag-controller-ce2162c8.js');
 

package/dist/cjs/{code-block-7d901dfc.js → code-block-eb66d852.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 const changeManager = require('./change-manager-a297e4d2.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-bad99695.js');
-const vegaInternalEventId = require('./vega-internal-event-id-ae6e2c13.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-58e3c010.js');
+const vegaInternalEventId = require('./vega-internal-event-id-9647aaf8.js');
 const string = require('./string-39438062.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const typeGuard = require('./type-guard-f12b5bae.js');
@@ -150,6 +150,7 @@ exports.ModifyContentActionType = void 0;
   ModifyContentActionType["DELETE_LINK_GROUP"] = "DELETE_LINK_GROUP";
   ModifyContentActionType["UPDATE_CURSOR_POSITION"] = "UPDATE_CURSOR_POSITION";
   ModifyContentActionType["INSERT_TEXT_TO_DECORATOR_NODE"] = "INSERT_TEXT_TO_DECORATOR_NODE";
+  ModifyContentActionType["INSERT_NODE_TO_NEAREST_ROOT"] = "INSERT_NODE_TO_NEAREST_ROOT";
 })(exports.ModifyContentActionType || (exports.ModifyContentActionType = {}));
 /**
  * Abstract class for update node content, delete node, insert node
@@ -438,6 +439,17 @@ class ActionHandleStrategyRegistry {
       globalSlimmerRegistry.LogUtility.error(`Type ${actionType} action handle strategy is not registered in class ${RTEInstance.constructor.name}`);
     }
   }
+  /**
+   * Check if the action type can be handled by strategy for the specific RTE instance.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {RTENode | RTEBlock} RTEInstance - The rich text editor node.
+   * @returns {boolean} - Whether the action type can be handled by the strategy.
+   */
+  static canHandle(actionType, RTEInstance) {
+    const strategy = ActionHandleStrategyRegistry.get(actionType, RTEInstance.constructor.name);
+    return strategy ? true : false;
+  }
 }
 ActionHandleStrategyRegistry.registry = new Map();
 
@@ -802,7 +814,7 @@ class RTEBlock {
     if (action.isFlushable) {
       const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
       if (domNode) {
-        const nodeSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
+        const nodeSubject = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
         if (nodeSubject) {
           changeManager.ChangeManager.notify(nodeSubject, {});
         }
@@ -1086,7 +1098,7 @@ class RTENode {
   flushChange() {
     const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
     if (domNode) {
-      const nodeSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
+      const nodeSubject = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
       if (nodeSubject) {
         changeManager.ChangeManager.notify(nodeSubject, {});
       }
@@ -1485,6 +1497,16 @@ const RTE_TEXT_COLORS = [
   },
 ];
 const ZERO_WIDTH_SPACE = '\u200b';
+const VegaRTEPresetToolbarItems = [
+  ['textStyles'],
+  ['bold', 'italic', 'underline', 'strikethrough', 'code'],
+  ['textColor'],
+  ['horizontalAlignment', 'bulletsNumbers'],
+  ['moreIndent', 'lessIndent'],
+  ['link'],
+  ['image'],
+  ['clearStyle'],
+];
 
 /**
  * Annotation to make text with text color
@@ -1855,7 +1877,8 @@ class NodeSplitTextStrategy extends ActionHandleStrategy {
           if (noTextRangeSelected) {
             return this.insertNewNode(startOffset, target);
           }
-          if (this.shouldSplitSelection(selectionRangeAnnotation.range)) {
+          if (this.shouldSplitSelection(selectionRangeAnnotation.range) &&
+            target.isContentEditable()) {
             const splittedTextNodes = this.splitTextNode(selectionRangeAnnotation.range, target);
             if (item.annotationMap.has('LINK')) {
               item.apply(new LinkGroupNodeSplitAction(splittedTextNodes));
@@ -1882,10 +1905,12 @@ class NodeSplitTextStrategy extends ActionHandleStrategy {
   insertNewNode(startOffset, target) {
     const newNode = target.cloneWithText('');
     this.setApplyTargetNode(newNode);
-    if (startOffset === 0) {
+    const index = target.parent.children.findIndex((node) => node === target);
+    if (startOffset === 0 || (!target.isContentEditable() && startOffset === index)) {
       return [newNode, target];
     }
-    if (startOffset === target.text.length) {
+    if (startOffset === target.text.length ||
+      (!target.isContentEditable() && startOffset === index + 1)) {
       return [target, newNode];
     }
     const beforeNode = target.cloneWithText(target.text.substring(0, startOffset));
@@ -2473,17 +2498,29 @@ class RTETextNode extends RTENode {
     const textNode = new RTETextNode(richText.id, richText.text, parentBlock);
     const { annotations } = richText;
     if (annotations) {
-      textNode.annotationMap = new Map(Object.keys(annotations)
-        .map((type) => {
-        if (type === 'link' && annotations.link && parentBlock) {
-          parentBlock.apply(new LinkGroupAnnotationAction(annotations.link.groupKey, [textNode], 'link'));
-        }
-        return this.createAnnotationEntity(type, annotations[type], options);
-      })
-        .filter(typeGuard.isNonNullable));
+      textNode.annotationMap = this.generateTextAnnotationMap(annotations, options, parentBlock, textNode);
     }
     return textNode;
   }
+  /**
+   * Generates a map of text annotations for the given set of annotations.
+   *
+   * @param {VegaRTETextAnnotations} annotations - The annotations to be converted into a map.
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @param {RTETextBlock} parentBlock - The parent text block.
+   * @param {RTETextNode} textNode - The text node.
+   * @returns {NodeAnnotations} The map of text annotations.
+   */
+  static generateTextAnnotationMap(annotations, options, parentBlock, textNode) {
+    return new Map(Object.keys(annotations)
+      .map((type) => {
+      if (type === 'link' && annotations.link && parentBlock && textNode) {
+        parentBlock.apply(new LinkGroupAnnotationAction(annotations.link.groupKey, [textNode], 'link'));
+      }
+      return this.createAnnotationEntity(type, annotations[type], options);
+    })
+      .filter(typeGuard.isNonNullable));
+  }
   /**
    * Creates different types of text annotations based on the provided type and value.
    *
@@ -2610,9 +2647,10 @@ class RTETextNode extends RTENode {
       if (this.isContentEditable()) {
         ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.UPDATE_TEXT, dtoClassName, new NodeUpdateTextStrategy());
         ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_SELECTED_TEXT, dtoClassName, new NodeReplaceSelectedTextStrategy());
-        ActionHandleStrategyRegistry.register(TextSplittableAction.name, dtoClassName, new NodeSplitTextStrategy());
+        ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINK_GROUP_NODE_SPLIT, dtoClassName, new LinkGroupNodeSplitStrategy());
+        ActionHandleStrategyRegistry.register(LinkAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
       }
-      ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINK_GROUP_NODE_SPLIT, dtoClassName, new LinkGroupNodeSplitStrategy());
+      ActionHandleStrategyRegistry.register(TextSplittableAction.name, dtoClassName, new NodeSplitTextStrategy());
       ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_LINK_GROUP, dtoClassName, new DeleteLinkGroupStrategy());
       ActionHandleStrategyRegistry.register(AnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
       RTETextNode.registerActionStrategyStatus[dtoClassName] = true;
@@ -2661,6 +2699,18 @@ class RTETextNode extends RTENode {
     if (!(annotation instanceof SelectionRangeAnnotation)) {
       this.syncUpSelectedNodes(node);
     }
+    /**
+     * 1. Try to get the specific strategy for the action and node type first (e.g., LinkAnnotationAction on RTETextNode).
+     * 2. If no specific strategy found, try to get the generic NodeUpdateAnnotationMapStrategy for AnnotationAction on RTETextNode.
+     *
+     * This is useful when we want to check if there is a specific strategy for an action-node combination first, we can use the specific strategy to check if the special toolbar button should be enabled or disabled.
+     * TODO: Update the other annotation actions to follow this pattern. https://gethired.atlassian.net/browse/VD-7367
+     */
+    const strategy = ActionHandleStrategyRegistry.get(action.constructor.name, node.constructor.name);
+    if (strategy) {
+      strategy.execute(action, node);
+      return;
+    }
     const updateAnnotationMapStrategy = ActionHandleStrategyRegistry.get(AnnotationAction.name, RTETextNode.name);
     if (updateAnnotationMapStrategy) {
       updateAnnotationMapStrategy.execute(action, node);
@@ -2675,7 +2725,7 @@ class RTETextNode extends RTENode {
   syncUpSelectedNodes(selectedNode) {
     const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(this);
     if (currentNodeDom) {
-      const nodeSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
+      const nodeSubject = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
       if (nodeSubject) {
         changeManager.ChangeManager.notify(nodeSubject, { node: selectedNode });
       }
@@ -3805,7 +3855,7 @@ class CodeBlockRemoveSelfStrategy extends BlockDeleteNodeContentStrategy {
   notifyUpdateSelection(focusNode, focusElement, offset, target) {
     const targetDom = stateEntityRenderingRegistry.getDOMByEntity(target);
     if (targetDom) {
-      const nodeSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(targetDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
+      const nodeSubject = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(targetDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
       if (nodeSubject) {
         changeManager.ChangeManager.notify(nodeSubject, {
           node: focusNode,
@@ -3822,8 +3872,8 @@ class CodeBlockRemoveSelfStrategy extends BlockDeleteNodeContentStrategy {
    * @returns {number} - The number value.
    */
   getRTENodeEndOffset(node) {
-    if (node && node.type !== 'CODE_BLOCK_NODE') {
-      return node['type'] !== 'IMAGE' ? node['text'].length : 1;
+    if (node) {
+      return node.getRangeEndOffset();
     }
     return 0;
   }
@@ -3866,7 +3916,7 @@ class SwitchOutFromCodeBlockStrategy extends ActionHandleStrategy {
     // Focus the next text node after value update.
     const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(target);
     if (currentNodeDom) {
-      const nodeSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
+      const nodeSubject = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
       if (nodeSubject) {
         changeManager.ChangeManager.notify(nodeSubject, { node: textBlock.children[0] });
       }
@@ -4135,7 +4185,7 @@ class RTECodeBlock extends RTEBlock {
     if (action.isFlushable) {
       const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
       if (domNode) {
-        const nodeSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
+        const nodeSubject = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
         if (nodeSubject) {
           changeManager.ChangeManager.notify(nodeSubject, {});
         }
@@ -4223,5 +4273,6 @@ exports.TextStyleAnnotationAction = TextStyleAnnotationAction;
 exports.UnderlineAnnotationAction = UnderlineAnnotationAction;
 exports.UpdateCodeBlockAction = UpdateCodeBlockAction;
 exports.UpdateTextAction = UpdateTextAction;
+exports.VegaRTEPresetToolbarItems = VegaRTEPresetToolbarItems;
 exports.ZERO_WIDTH_SPACE = ZERO_WIDTH_SPACE;
 exports.stateEntityRenderingRegistry = stateEntityRenderingRegistry;

package/dist/cjs/{component-value-history-controller-slimmer.abstract-d61e5129.js → component-value-history-controller-slimmer.abstract-62cdf04c.js}

@@ -1,16 +1,16 @@
 'use strict';
 
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const codeBlock = require('./code-block-7d901dfc.js');
+const codeBlock = require('./code-block-eb66d852.js');
 const timer = require('./timer-5f33058b.js');
 const component = require('./component-1e352960.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-bad99695.js');
-const vegaInternalEventId = require('./vega-internal-event-id-ae6e2c13.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-58e3c010.js');
+const vegaInternalEventId = require('./vega-internal-event-id-9647aaf8.js');
 const observer = require('./observer-f49483e8.js');
-const ui = require('./ui-4ce1fa08.js');
+const range = require('./range-cfc45f9e.js');
 const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-df6e6df0.js');
+const ui = require('./ui-4ce1fa08.js');
 const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-138a90e5.js');
 
 let processing = false;
@@ -226,178 +226,6 @@ __decorate$1([
   globalSlimmerRegistry.MapToComponentMethod('componentDidUpdate')
 ], AutoRunWhenReRenderTaskQueueSlimmer.prototype, "executeTaskHook", null);
 
-/** Manages selection range for a rich text editor, providing methods to set, sync, and create native ranges based on RTENodes and Nodes. */
-class RTERange {
-  /**
-   * Initial the rte range properties
-   *
-   * @param {Node} [startContainer] The range start element.
-   * @param {Node} [endContainer] The range end element.
-   * @param {number} [startOffset] The range start element content offset, default value is 0.
-   * @param {number} [endOffset]  The range end element content offset, default value is 0.
-   * @param {RTENode} [startNode] The range start node, the start node could be null if the start element is root element.
-   * @param {RTENode} [endNode]  The range start node, the start node could be null if the start element is root element.
-   * @param {Range} [nativeRange] The browser native range instance.
-   */
-  constructor(startContainer, endContainer, startOffset = 0, endOffset = 0, startNode, endNode, nativeRange) {
-    this._startOffset = 0;
-    this._endOffset = 0;
-    this._startContainer = startContainer;
-    this._endContainer = endContainer;
-    this._startOffset = startOffset;
-    this._endOffset = endOffset;
-    this._startNode = startNode;
-    this._endNode = endNode;
-    if (nativeRange) {
-      this._oldNativeRange = nativeRange;
-    }
-  }
-  /**
-   * Returns the start container as a Node or null if it is not set.
-   * The start container could be null when the dom node should be create after re-render.
-   *
-   * @returns {Nullable<Node>} The range start element.
-   */
-  get startContainer() {
-    return this._startContainer;
-  }
-  /**
-   * Returns the end container as a Node or null if it is not set.
-   * The end container could be null when the dom node should be create after re-render.
-   *
-   * @returns {Nullable<Node>} The range start element.
-   */
-  get endContainer() {
-    return this._endContainer;
-  }
-  /**
-   * Returns the range start RTE node as a RTENode or null if it is not set.
-   * The start RTENode could be null when the range start node is the root element of the rich text editor.
-   *
-   * @returns {Nullable<RTENode>} The range start element.
-   */
-  get startNode() {
-    return this._startNode;
-  }
-  /**
-   * Returns the range end RTE node as a RTENode or null if it is not set.
-   * The end RTENode could be null when the range end node is the root element of the rich text editor.
-   *
-   * @returns {Nullable<RTENode>} The range start element.
-   */
-  get endNode() {
-    return this._endNode;
-  }
-  /**
-   * Returns range's start offset.
-   *
-   * @returns {number} The character length in text node or the element index of parent element.
-   */
-  get startOffset() {
-    return this._startOffset;
-  }
-  /**
-   * Returns range's start offset.
-   *
-   * @returns {number} The character length in text node or the element index of parent element.
-   */
-  get endOffset() {
-    return this._endOffset;
-  }
-  /**
-   * Updates the range options for a Rich Text Editor.
-   * This method will called after modify the content, the start node and end node should be rte node.
-   * This method will called after selectionchange event emit, the start node and end node should be the html node.
-   *
-   * @param {RTERangeOptions} options - An object that contains the following properties:
-   * @param {Range} [nativeRange] - The native range instance
-   * @returns {RTERange} - The new RTERange instance
-   */
-  updateRTERange(options, nativeRange) {
-    const { startOffset, endOffset } = options;
-    this._startOffset = startOffset;
-    this._endOffset = endOffset;
-    const startNode = options.startNode;
-    const endNode = options.endNode;
-    if (startNode instanceof codeBlock.RTENode) {
-      this._startNode = startNode;
-      this._endNode = endNode;
-      const startContainer = this._startNode.getRangeContainer();
-      const endContainer = this._startNode === this._endNode ? startContainer : this._endNode.getRangeContainer();
-      if (startContainer) {
-        this._startContainer = startContainer;
-        this._endContainer = endContainer;
-      }
-    }
-    else {
-      // The selectionchange callback has a 50 ms delay, so we need to check the next range is the same as the current ret range.
-      this._startContainer = startNode;
-      this._endContainer = endNode;
-      this._startNode = this.getRTENodeByElement(this._startContainer);
-      this._endNode =
-        this._startContainer === this._endContainer
-          ? this._startNode
-          : this.getRTENodeByElement(this._endContainer);
-      if (nativeRange) {
-        this._oldNativeRange = nativeRange;
-      }
-    }
-    return new RTERange(this._startContainer, this._endContainer, this._startOffset, this._endOffset, this._startNode, this._endNode, this._oldNativeRange);
-  }
-  /**
-   * Creates a new instance of the `RTERange` class with the same properties as the current instance.
-   *
-   * @returns {RTERange} A new `RTERange` instance with the same start and end containers, offsets, and nodes.
-   */
-  clone() {
-    return new RTERange(this._startContainer, this._endContainer, this._startOffset, this._endOffset, this._startNode, this._endNode, this._oldNativeRange);
-  }
-  /**
-   * Creates a Range object based on start and end nodes and offsets.
-   * Invoke this method to get the future range state if the range content modified.
-   * Invoke this method to get the native range instance if range start node and end node not defined
-   *
-   * @returns {Nullable<Range>} The range instance. The return value could be null if the start node or end node are not rendered.
-   */
-  toNativeRange() {
-    let range = null;
-    if (this._startNode) {
-      const startContainer = this._startNode.getRangeContainer();
-      const endContainer = this._startNode === this._endNode
-        ? startContainer
-        : this._endNode.getRangeContainer();
-      if (startContainer && endContainer) {
-        range = new Range();
-        range.setStart(startContainer, this._startOffset);
-        range.setEnd(endContainer, this._endOffset);
-        this._startContainer = startContainer;
-        this._endContainer = endContainer;
-        this._oldNativeRange = range;
-        return range;
-      }
-    }
-    if (!range && this._oldNativeRange) {
-      return this._oldNativeRange;
-    }
-  }
-  /**
-   * Retrieves an RTENode based on the given element by checking its type and parent elements.
-   *
-   * @param {Node} element - An element in the DOM (Document Object Model).
-   * @returns { Nullable<RTENode>} Returns a nullable `RTENode` object.
-   */
-  getRTENodeByElement(element) {
-    if (element) {
-      const registerElement = element.nodeType === Node.TEXT_NODE
-        ? element.parentElement
-        : ui.isHTMLElement(element) && codeBlock.RTEDecoratorNode.isDecoratorNodeContainerElement(element)
-          ? codeBlock.RTEDecoratorNode.getDecoratorNodeElement(element)
-          : element;
-      return codeBlock.stateEntityRenderingRegistry.getEntityByDOM(registerElement);
-    }
-  }
-}
-
 /**
  * Represents the state of the selection in the RTE.
  */
@@ -428,7 +256,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
   constructor() {
     super(1);
-    this.currentRange = new RTERange();
+    this.currentRange = new range.RTERange();
     this.handleSelectionWithDebounce = timer.debounce(this.handleSelectionChange, SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME, this);
     this.pendingRestoreSelectionNodes = [];
     /**
@@ -453,7 +281,7 @@ class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
    * Component lifecycle - [disconnectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
    */
   disconnectedCallback() {
-    changeManager.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
+    changeManager.ChangeManager.unregister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
     domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, vegaInternalEventId.VegaInternalUpdateRTECursorPosition);
   }
   /**
@@ -575,7 +403,12 @@ class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
         this.enqueueSelectionRangeFutureState(startNode, codeBlock.ZERO_WIDTH_SPACE.length);
       }
       else {
-        this.enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset);
+        // Don't need update the range if the selected node is a non-editable text node, such as token node.
+        if (!(startNode === endNode &&
+          startNode instanceof codeBlock.RTETextNode &&
+          !startNode.isContentEditable())) {
+          this.enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset);
+        }
       }
       this.selectionState = null;
     }
@@ -586,10 +419,11 @@ class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
   handleSelectionChange() {
     if (this.disabled || this.sourceView)
       return;
+    // Clear previous selection when handling new selection always
+    this.clearSelectionMap();
     const selection = this.getSelection();
     if (!selection || selection.rangeCount === 0)
       return;
-    this.clearSelectionMap();
     this.saveSelection();
     const range = selection.getRangeAt(0);
     const commonAncestor = range.commonAncestorContainer;
@@ -678,7 +512,7 @@ class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
         this.enqueueSelectionRangeFutureState(payload.node, payload.offset);
       }
     });
-    changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
+    changeManager.ChangeManager.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
   }
   /**
    * Prepare the selection state to restore
@@ -708,7 +542,7 @@ class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
           startNode,
           endNode,
           startOffset: 0,
-          endOffset: endNode.text.length,
+          endOffset: endNode.getRangeEndOffset(),
         });
         this.selectionState = new RTESelectionState(this.currentRange);
       }

package/dist/cjs/{design-token-52f9da81.js → design-token-76bb47bd.js}

@@ -3,7 +3,7 @@
 const typeGuard = require('./type-guard-f12b5bae.js');
 const breakpoints = require('./breakpoints-ebde4837.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const responsiveFormatFacade = require('./responsive-format-facade-3ab3b18c.js');
+const responsiveFormatFacade = require('./responsive-format-facade-7e933525.js');
 const typography = require('./typography-4560e7f1.js');
 const stateBackgroundColorFormatter = require('./state-background-color-formatter-aa5570f6.js');
 const ui = require('./ui-32e69595.js');