@globalpayments/vega 2.100.0 → 2.101.0

package/dist/esm/{code-block-741d6b8e.js → code-block-1cdf7a51.js}

@@ -1,12 +1,12 @@
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-bb7e68a0.js';
-import { e as VegaInternalRichTextEditorFlushChanges, f as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-86fce049.js';
+import { e as VegaInternalRichTextEditorFlushChanges, f as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-02093067.js';
 import { d as dashCaseToCamel, c as camelToDashCase } from './string-a953eafc.js';
 import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
 import { i as isNonNullable } from './type-guard-26d83e7e.js';
 import { T as TypographyUrls } from './typography-19c3b9be.js';
 import { g as generateUUID } from './misc-9fdbcfbb.js';
-import { V as VegaInternalThemeManager } from './dark-mode-style-controller-352f15ff.js';
+import { V as VegaInternalThemeManager } from './dark-mode-style-controller-4e04a2d3.js';
 import { c as cleanObject } from './object-0c277f57.js';
 import { f as findParent } from './ui-80e610f4.js';
 
@@ -2033,22 +2033,654 @@ class RTEBlock {
   }
 }
 
+/**
+ * Append children to a block or rte content
+ *
+ * @example parent.apply(new AppendChildrenAction([newChildren]))
+ */
+class AppendChildrenAction extends ModifyContentAction {
+  constructor(childNodes) {
+    super();
+    this.type = ModifyContentActionType.APPEND_CHILDREN;
+    this.entityToBeAppended = childNodes;
+  }
+}
+
+const TEXT_STYLE_DEFAULT_FONT_WEIGHT = '500';
+const TEXT_STYLE_BASE = {
+  fontFamily: 'Inter',
+  fontSize: '16px',
+  lineHeight: '22px',
+  minHeight: '22px',
+  fontWeight: TEXT_STYLE_DEFAULT_FONT_WEIGHT,
+};
+const PARAGRAPH_TEXT_STYLE = Object.assign(Object.assign({}, TEXT_STYLE_BASE), { marginTop: '0px', marginBottom: '0px' });
+const TEXT_STYLE_DEFAULTS = {
+  'paragraph': PARAGRAPH_TEXT_STYLE,
+  'title': Object.assign(Object.assign({}, TEXT_STYLE_BASE), { fontSize: '36px', lineHeight: '40px', minHeight: '40px' }),
+  'subtitle': Object.assign(Object.assign({}, TEXT_STYLE_BASE), { fontSize: '28px', lineHeight: '32px', minHeight: '32px' }),
+  'heading-1': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '22px', lineHeight: '24px', minHeight: '24px' }),
+  'heading-2': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '20px', lineHeight: '24px', minHeight: '24px' }),
+  'heading-3': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '18px' }),
+  'heading-4': Object.assign({}, PARAGRAPH_TEXT_STYLE),
+  'heading-5': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '14px' }),
+  'heading-6': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '12px' }),
+};
+
+/**
+ * Text style annotation
+ */
+class TextStyleAnnotation extends BlockAnnotation {
+  constructor(textStyle) {
+    super();
+    this.type = BlockAnnotationTypeEnum.TEXT_STYLE;
+    this.textStyle = textStyle;
+  }
+  /**
+   * Generate the map item for the annotations
+   *
+   * @param {VegaRTETextStyleType} textStyle - the text style type
+   * @returns {[BlockAnnotationTypeEnum.TEXT_STYLE, TextStyleAnnotation]} Map item for the annotation
+   */
+  static from(textStyle) {
+    return [BlockAnnotationTypeEnum.TEXT_STYLE, new TextStyleAnnotation(textStyle)];
+  }
+  /**
+   * Get the default styles for a given text style type.
+   *
+   * @param {VegaRTETextStyleType} textStyle - The text style type.
+   * @returns {Nullable<AnnotationStyle>} The default styles for the given text style type.
+   */
+  static getDefaultStyles(textStyle) {
+    if (!textStyle)
+      return null;
+    return TEXT_STYLE_DEFAULTS[textStyle];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
+   */
+  toJSON() {
+    return { textStyle: this.textStyle };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new TextStyleAnnotation(this.textStyle);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return this.textStyle ? `v-rte--text-style-${this.textStyle}` : null;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.textStyle ? TextStyleAnnotation.getDefaultStyles(this.textStyle) : null;
+  }
+}
+
 /**
  * Abstract class for annotation actions
  */
-class AnnotationAction {
+class AnnotationAction {
+}
+
+/**
+ * Action to change the text style of a block
+ */
+class TextStyleAnnotationAction extends AnnotationAction {
+  constructor(textStyle, bold) {
+    super();
+    this.isFlushable = true;
+    this.textStyle = textStyle;
+    this.bold = bold;
+  }
+  /**
+   * Converts the action to a block annotation
+   *
+   * @returns {BlockAnnotation} the block annotation
+   */
+  toAnnotation() {
+    return new TextStyleAnnotation(this.textStyle);
+  }
+}
+
+/**
+ * Annotation to make text a link
+ */
+class LinkAnnotation extends NodeAnnotation {
+  constructor(link, useInternalStyle = true) {
+    super();
+    this.type = NodeAnnotationTypeEnum.LINK;
+    this.link = link;
+    this.useInternalStyle = useInternalStyle;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {VegaRTELink} link - Bold annotation
+   * @param {boolean} useInternalStyle - Whether to use default style for the link
+   * @returns {[NodeAnnotationTypeEnum.LINK, LinkAnnotation]} Map item for the annotation
+   */
+  static from(link, useInternalStyle = true) {
+    return [NodeAnnotationTypeEnum.LINK, new LinkAnnotation(link, useInternalStyle)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<'link', VegaRTELink>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      link: this.link,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new LinkAnnotation(this.link, this.useInternalStyle);
+  }
+  /**
+   * Verify whether two link annotation is same or not
+   *
+   * @param {LinkAnnotation} annotation - Compared annotation
+   * @returns {boolean} Whether two link annotation is same or not
+   */
+  toEqual(annotation) {
+    return this.link.groupKey === annotation.link.groupKey;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
+    return null;
+  }
+}
+
+/**
+ * Abstract class for which can be splittable
+ */
+class TextSplittableAction extends AnnotationAction {
+  constructor() {
+    super(...arguments);
+    /**
+     * Whether the action should split the node
+     */
+    this.doSplit = true;
+  }
+}
+
+/**
+ * Action to toggle link annotation
+ */
+class LinkAnnotationAction extends TextSplittableAction {
+  constructor({ link, newText, needMergeNode, doSplit, type, }) {
+    super();
+    this.isFlushable = true;
+    this.link = link;
+    this.needMergeNode = needMergeNode;
+    this.newText = newText;
+    this.type = type;
+    if (isNonNullable(doSplit)) {
+      this.doSplit = doSplit;
+    }
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {LinkAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new LinkAnnotation(this.link);
+  }
+}
+
+/**
+ * Action to link a group of nodes
+ */
+class LinkGroupAnnotationAction extends AnnotationAction {
+  constructor(groupKey, nodes, type) {
+    super();
+    this.isFlushable = false;
+    this.groupKey = groupKey;
+    this.nodes = nodes;
+    this.type = type;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {Annotation} The annotation
+   */
+  toAnnotation() {
+    return new LinkGroupAnnotation(this.groupKey);
+  }
+}
+
+/**
+ * Default CSS style values produced by inline text-formatting annotations.
+ *
+ * These constants are the single source of truth for the CSS values that
+ * bold, italic, underline and strikethrough semantic annotations render as
+ * (in standalone mode) and that annotation handlers / filter strategies use
+ * to detect or remove redundant inline styles.
+ */
+/** CSS `font-weight` value rendered by the bold annotation. */
+const BOLD_FONT_WEIGHT = '700';
+/** Alternative `font-weight` keyword that browsers report for bold elements. */
+const BOLD_FONT_WEIGHT_KEYWORD = 'bold';
+/** CSS `font-style` value rendered by the italic annotation. */
+const ITALIC_FONT_STYLE = 'italic';
+/** CSS `text-decoration` token rendered by the underline annotation. */
+const UNDERLINE_TEXT_DECORATION = 'underline';
+/** CSS `text-decoration` token rendered by the strikethrough annotation. */
+const STRIKETHROUGH_TEXT_DECORATION = 'line-through';
+/** CSS `font-family` value rendered by the code annotation. */
+const CODE_FONT_FAMILY = 'Roboto Mono';
+/** CSS `white-space` value rendered by the code annotation. */
+const CODE_WHITE_SPACE = 'pre-wrap';
+
+/**
+ * Annotation to make text bold
+ */
+class BoldAnnotation extends NodeAnnotation {
+  constructor(bold) {
+    super();
+    this.type = NodeAnnotationTypeEnum.BOLD;
+    this.bold = bold;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} bold - Bold annotation
+   * @returns {[NodeAnnotationTypeEnum.BOLD, BoldAnnotation]} Map item for the annotation
+   */
+  static from(bold) {
+    return [NodeAnnotationTypeEnum.BOLD, new BoldAnnotation(bold)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      bold: this.bold,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new BoldAnnotation(this.bold);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return this.bold ? 'v-rte--bold' : null;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.bold ? { fontWeight: BOLD_FONT_WEIGHT } : null;
+  }
+}
+
+/**
+ * Action to toggle bold annotation
+ */
+class BoldAnnotationAction extends TextSplittableAction {
+  constructor(bold) {
+    super();
+    this.isFlushable = true;
+    this.bold = bold;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {BoldAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new BoldAnnotation(this.bold);
+  }
+}
+
+/**
+ * Delete the node annotation by type
+ */
+class DeleteNodeAnnotationAction extends AnnotationAction {
+  constructor(annotationType) {
+    super();
+    this.isFlushable = true;
+    this.annotationType = annotationType;
+  }
+  /**
+   * Don't need this for this action
+   *
+   * @returns {Nullable<Annotation>} undefined
+   */
+  toAnnotation() {
+    return undefined;
+  }
+}
+
+/**
+ * The base action handle strategy class, use to modify the rich text node content or modify the annotation.
+ */
+class ActionHandleStrategy {
+  /**
+   * Public method to invoke the handle logic.
+   *
+   * @typedef R generic type
+   * @param {ModifyContentAction | AnnotationAction} action - The action instance. Contains the action type and necessary params.
+   * @param {RTENode | RTEBlock | VegaRTEContent} target - The rich text node instance that will be modified.
+   * @returns {R} - The invoke result in special strategy.
+   */
+  execute(action, target) {
+    LogUtility.log(`Executing action ${action.constructor.name} on ${target.constructor.name} ${target['id']}`);
+    return this.handleAction(action, target);
+  }
+  /**
+   * Update the custom style annotation of a block or node
+   *
+   * @param {RTEBlock | RTETextNode} item - block or node
+   * @param {string[]} styleKeys - custom style keys, for examples ['fontSize', 'fontWeight'].
+   */
+  updateCustomStyleAnnotation(item, styleKeys) {
+    const customStyleAnnotation = item.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_STYLE);
+    if (customStyleAnnotation && this.isCustomStyle(customStyleAnnotation, styleKeys)) {
+      item.annotationMap.set(customStyleAnnotation.type, new CustomStyleAnnotation(customStyleAnnotation.removeStyles(styleKeys)));
+    }
+  }
+  /**
+   * Create a new paragraph block with the given text.
+   *
+   * @param {string} text - The text content for the new paragraph.
+   * @returns {Nullable<RTETextBlock>} - The newly created paragraph block, or null if creation failed.
+   */
+  createNewParagraph(text) {
+    const dtoClass = RTEDTOClassManager$1.getRTEBlockClass('paragraph');
+    if (dtoClass) {
+      const newParagraph = dtoClass.from({
+        id: generateUUID(),
+        type: 'paragraph',
+        nodes: [{ id: generateUUID(), type: 'text', text }],
+      });
+      return newParagraph;
+    }
+  }
+  /**
+   * Get the root content from a child block or node.
+   *
+   * @param {RTEBlock | RTENode} child - The child block or node.
+   * @returns {Nullable<VegaRTEContent>} The root content, if found.
+   */
+  getRootContent(child) {
+    const parent = child.parent;
+    if (parent) {
+      if (parent.dtoName === 'VegaRTEContent') {
+        return parent;
+      }
+      else {
+        return this.getRootContent(parent);
+      }
+    }
+  }
+  /**
+   * Check the caret position at the start of a block.
+   *
+   * @param {RTEBlock} block - The RTE Block.
+   * @param {RTENode} node - The RTE Node.
+   * @param {number} offset - The offset position.
+   * @returns {boolean} - Whether the caret is at the start of the block.
+   */
+  isCaretPositionAtBlockStart(block, node, offset) {
+    return node === block.children[0] && offset === 0;
+  }
+  /**
+   * Check the caret position at the end of a block.
+   *
+   * @param {RTEBlock} block - The RTE Block.
+   * @param {RTENode} node - The RTE Node.
+   * @param {number} offset - The offset position.
+   * @returns {boolean} - Whether the caret is at the end of the block.
+   */
+  isCaretPositionAtBlockEnd(block, node, offset) {
+    if (!node.isContentEditable()) {
+      return this.isCaretPositionAtDecoratorBlockEnd(block, node, offset);
+    }
+    else {
+      return this.isCaretPositionAtTextBlockEnd(block, node, offset);
+    }
+  }
+  /**
+   * Get the registered DOM element by the RTE entity.
+   *
+   * @param {RTEBlock | RTENode} instance - The RTE block or node instance.
+   * @returns {Nullable<HTMLElement>} The registered DOM element.
+   */
+  getDOMByEntity(instance) {
+    return stateEntityRenderingRegistry.getDOMByEntity(instance);
+  }
+  /**
+   * Checks if the caret position is at the end of a specified RTETextNode.
+   *
+   * @param {RTETextBlock} textBlock - `RTETextBlock` - a text block.
+   * @param {RTETextNode} node - `RTETextNode` - a node representing an image in a rich text editor.
+   * @param {number} startOffset - The position within the text node where the caret is located.
+   * @returns {boolean} a boolean value, which indicates whether the caret position is at the start of the RTETextNode.
+   */
+  isCaretPositionAtTextBlockEnd(textBlock, node, startOffset) {
+    const lastNode = textBlock.children[textBlock.children.length - 1];
+    return node === lastNode && (node.isEmpty() || startOffset === lastNode.text.length);
+  }
+  /**
+   * Checks if the caret position is at the end of a given decorator node.
+   *
+   * @param {RTEBlock} target - The image block.
+   * @param {RTENode} node - `node` is a RTEDecoratorNode or non-editable text node.
+   * @param {number} startOffset - The position within the `RTEDecoratorNode` where the caret is located.
+   * @returns {boolean}Returns a boolean value indicating whether the caret position is at the end of the `RTEDecoratorNode`.
+   */
+  isCaretPositionAtDecoratorBlockEnd(target, node, startOffset) {
+    return node === target.children[target.children.length - 1] && startOffset !== 0;
+  }
+  /**
+   * Determines if the custom style annotation includes any the custom style.
+   *
+   * @param {CustomStyleAnnotation} customStyleAnnotation - custom style annotation
+   * @param {string[]} styleKeys - custom style keys, for examples ['fontSize', 'fontWeight'].
+   * @returns {boolean} - True if the custom key includes the custom style, false otherwise.
+   */
+  isCustomStyle(customStyleAnnotation, styleKeys) {
+    return styleKeys.some((item) => Object.keys(customStyleAnnotation.customStyle).includes(item));
+  }
+}
+
+/**
+ * Update the text block text style strategy.
+ */
+class BlockUpdateTextStyleStrategy extends ActionHandleStrategy {
+  /**
+   * Update the text block type and add or remove the bold style from child nodes.
+   *
+   * @param {TextStyleAnnotationAction} action - The text style annotation action.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(action, target) {
+    if (target.type !== 'list-item') {
+      target.type = action.textStyle;
+    }
+    if (action.bold) {
+      target.children.forEach((node) => {
+        const boldAnnotationAction = new BoldAnnotationAction(true);
+        boldAnnotationAction.doSplit = false;
+        node.apply(boldAnnotationAction);
+      });
+    }
+    else {
+      target.children.forEach((node) => {
+        node.apply(new DeleteNodeAnnotationAction(NodeAnnotationTypeEnum.BOLD));
+      });
+    }
+    this.updateCustomStyleAnnotation(target, ['fontFamily', 'lineHeight', 'fontWeight', 'fontSize']);
+  }
+}
+
+/**
+ * Update the text block link group annotation strategy.
+ */
+class BlockUpdateLinkGroupStrategy extends ActionHandleStrategy {
+  /**
+   * Update link group after the child link node update.
+   *
+   * @param {LinkGroupAnnotationAction} action - The link group annotation action instance.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(action, target) {
+    let linkGroupAnnotation = target.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    if (action.type === 'update_link') {
+      if (linkGroupAnnotation) {
+        const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey);
+        if (linkGroup) {
+          linkGroupAnnotation.linkGroups.set(action.groupKey, [linkGroup[0]]);
+        }
+      }
+    }
+    else {
+      if (linkGroupAnnotation) {
+        const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey) || [];
+        linkGroupAnnotation.linkGroups.set(action.groupKey, [...linkGroup, ...action.nodes]);
+      }
+      else {
+        linkGroupAnnotation = action.toAnnotation();
+        linkGroupAnnotation.linkGroups.set(action.groupKey, [...action.nodes]);
+      }
+      target.annotationMap.set(InternalAnnotationTypeEnum.LINK_GROUP, linkGroupAnnotation);
+    }
+  }
+}
+
+/**
+ * Insert a new children after a existing children
+ *
+ * @example parent.apply(new InsertChildrenAfterAction(existingChildren, newChildren, ...))
+ */
+class InsertChildrenAfterAction extends ModifyContentAction {
+  constructor(referBlock, ...blocksToBeInserted) {
+    super();
+    this.type = ModifyContentActionType.INSERT_CHILDREN_AFTER;
+    this.referChildren = referBlock;
+    this.childrenToBeInserted = blocksToBeInserted;
+  }
 }
 
 /**
- * Abstract class for which can be splittable
+ * Clear the current block nodes and append new nodes
+ *
+ * @example block.apply(new ReplaceChildNodesAction(newNodes))
  */
-class TextSplittableAction extends AnnotationAction {
-  constructor() {
-    super(...arguments);
-    /**
-     * Whether the action should split the node
-     */
-    this.doSplit = true;
+class ReplaceChildNodesAction extends ModifyContentAction {
+  constructor(newChildNodes) {
+    super();
+    this.type = ModifyContentActionType.REPLACE_CHILD_NODES;
+    this.newChildNodes = newChildNodes;
+  }
+}
+
+/**
+ * Split the current node with a special position strategy.
+ */
+class BlockSplitWithTextNodeStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newBlock = this.splitTextNodeBlock(action.splitPointNode, action.startOffsetOfNode, target);
+  }
+  /**
+   * Splits a text node at a specified offset within a block of nodes and returns a new block with the split nodes.
+   *
+   * @param {RTETextNode} splitNode - The text node that will be split
+   * @param {number} startOffsetOfNode - The index at which will split the text content of the `splitNode`.
+   * @param {RTETextBlock} textBlock - The text block need to be splited.
+   * @returns {Nullable<RTEBlock>} return either an RTEBlock object or null.
+   */
+  splitTextNodeBlock(splitNode, startOffsetOfNode, textBlock) {
+    if (splitNode) {
+      const beforeText = splitNode.text.slice(0, startOffsetOfNode);
+      const afterText = splitNode.text.slice(startOffsetOfNode);
+      const nodesSplitIndex = textBlock.children.indexOf(splitNode);
+      if (nodesSplitIndex > -1) {
+        const beforeNodes = textBlock.children.slice(0, nodesSplitIndex);
+        const afterNodes = textBlock.children.slice(nodesSplitIndex + 1);
+        if (splitNode.isContentEditable()) {
+          if (beforeText) {
+            beforeNodes.push(splitNode.cloneWithText(beforeText));
+          }
+          if (afterText) {
+            afterNodes.unshift(splitNode.cloneWithText(afterText));
+          }
+        }
+        else {
+          startOffsetOfNode > 0 ? beforeNodes.push(splitNode) : afterNodes.unshift(splitNode);
+        }
+        textBlock.apply(new ReplaceChildNodesAction(beforeNodes));
+        const newBlock = textBlock.cloneWithNodes(afterNodes);
+        textBlock.parent.apply(new InsertChildrenAfterAction(textBlock, newBlock));
+        return newBlock;
+      }
+    }
+  }
+}
+
+/**
+ * Remove all nodes and append new nodes strategy.
+ */
+class BlockReplaceNodesStrategy extends ActionHandleStrategy {
+  /**
+   * Empty the text block or image block nodes and add new nodes.
+   *
+   * @param {ReplaceChildNodesAction} action - The replace child nodes action instance.
+   * @param {RTETextBlock | RTEImageBlock} target - The text block or the image block.
+   */
+  handleAction(action, target) {
+    target.children = [];
+    target.apply(new AppendChildrenAction(action.newChildNodes));
+  }
+}
+
+/**
+ * Remove a children from the current block
+ *
+ * @example needRemovedChildren.parent.apply(new RemoveChildrenAction(needRemovedChildren))
+ */
+class RemoveChildrenAction extends ModifyContentAction {
+  constructor(childNode) {
+    super();
+    this.type = ModifyContentActionType.DELETE_CHILDREN;
+    this.entityToBeRemoved = childNode;
   }
 }
 
@@ -2071,29 +2703,6 @@ class SelectionRangeAnnotation extends Annotation {
   }
 }
 
-/**
- * Default CSS style values produced by inline text-formatting annotations.
- *
- * These constants are the single source of truth for the CSS values that
- * bold, italic, underline and strikethrough semantic annotations render as
- * (in standalone mode) and that annotation handlers / filter strategies use
- * to detect or remove redundant inline styles.
- */
-/** CSS `font-weight` value rendered by the bold annotation. */
-const BOLD_FONT_WEIGHT = '700';
-/** Alternative `font-weight` keyword that browsers report for bold elements. */
-const BOLD_FONT_WEIGHT_KEYWORD = 'bold';
-/** CSS `font-style` value rendered by the italic annotation. */
-const ITALIC_FONT_STYLE = 'italic';
-/** CSS `text-decoration` token rendered by the underline annotation. */
-const UNDERLINE_TEXT_DECORATION = 'underline';
-/** CSS `text-decoration` token rendered by the strikethrough annotation. */
-const STRIKETHROUGH_TEXT_DECORATION = 'line-through';
-/** CSS `font-family` value rendered by the code annotation. */
-const CODE_FONT_FAMILY = 'Roboto Mono';
-/** CSS `white-space` value rendered by the code annotation. */
-const CODE_WHITE_SPACE = 'pre-wrap';
-
 /**
  * Annotation to make text with strikethrough
  */
@@ -2250,58 +2859,6 @@ class ItalicAnnotation extends NodeAnnotation {
   }
 }
 
-/**
- * Annotation to make text bold
- */
-class BoldAnnotation extends NodeAnnotation {
-  constructor(bold) {
-    super();
-    this.type = NodeAnnotationTypeEnum.BOLD;
-    this.bold = bold;
-  }
-  /**
-   * Generate the map item for the annotation
-   *
-   * @param {boolean} bold - Bold annotation
-   * @returns {[NodeAnnotationTypeEnum.BOLD, BoldAnnotation]} Map item for the annotation
-   */
-  static from(bold) {
-    return [NodeAnnotationTypeEnum.BOLD, new BoldAnnotation(bold)];
-  }
-  /**
-   * Generate the JSON representation of the annotation
-   *
-   * @returns {Record<string, unknown>} JSON representation of the annotation
-   */
-  toJSON() {
-    return {
-      bold: this.bold,
-    };
-  }
-  /**
-   * @inheritDoc
-   */
-  clone() {
-    return new BoldAnnotation(this.bold);
-  }
-  /**
-   * @inheritDoc
-   */
-  renderClass(options) {
-    if (options === null || options === void 0 ? void 0 : options.standalone)
-      return null;
-    return this.bold ? 'v-rte--bold' : null;
-  }
-  /**
-   * @inheritDoc
-   */
-  renderStyle(options) {
-    if (!(options === null || options === void 0 ? void 0 : options.standalone))
-      return null;
-    return this.bold ? { fontWeight: BOLD_FONT_WEIGHT } : null;
-  }
-}
-
 /**
  * Annotation to make text code
  */
@@ -2468,114 +3025,44 @@ const RTE_BLOCK_BOUNDARY_ATTRIBUTE = 'data-vega-rte-block-boundary';
 const RTE_PASTE_MODE_DATA_TYPE = 'application/x-vega-rte-paste-mode';
 /**
  * Custom DataTransfer MIME type value used to indicate that the paste content
- * originated from Microsoft Word.
- */
-const RTE_PASTE_MODE_WORD = 'word';
-const RTE_WORD_COUNT_KEY = 'rte-word-count';
-
-/**
- * Annotation to make text with text color
- */
-class TextColorAnnotation extends NodeAnnotation {
-  constructor(textColor) {
-    super();
-    this.type = NodeAnnotationTypeEnum.TEXT_COLOR;
-    this.textColor = this.formatTextColor(textColor);
-  }
-  /**
-   * Generate the map item for the annotation
-   *
-   * @param {string} textColor - text color annotation
-   * @returns {[NodeAnnotationTypeEnum.TEXT_COLOR, TextColorAnnotation]} Map item for the annotation
-   */
-  static from(textColor) {
-    return [NodeAnnotationTypeEnum.TEXT_COLOR, new TextColorAnnotation(textColor)];
-  }
-  /**
-   * Generate the JSON representation of the annotation
-   *
-   * @returns {Record<string, unknown>} JSON representation of the annotation
-   */
-  toJSON() {
-    return {
-      textColor: this.textColor.key,
-    };
-  }
-  /**
-   * @inheritDoc
-   */
-  clone() {
-    return new TextColorAnnotation(this.textColor.key);
-  }
-  /**
-   * @inheritDoc
-   */
-  renderClass() {
-    return null;
-  }
-  /**
-   * @inheritDoc
-   */
-  renderStyle() {
-    return {
-      color: VegaInternalThemeManager.isDarkMode() ? this.textColor.dark : this.textColor.light,
-    };
-  }
-  /**
-   * format text color
-   *
-   * @param {string} textColor - text color
-   * @returns {VegaRTEColorSchema} - VegaRTEColorSchema
-   */
-  formatTextColor(textColor) {
-    return (RTE_TEXT_COLORS.find((item) => item.key === textColor) || RTE_TEXT_COLORS[0]);
-  }
-}
+ * originated from Microsoft Word.
+ */
+const RTE_PASTE_MODE_WORD = 'word';
+const RTE_WORD_COUNT_KEY = 'rte-word-count';
 
 /**
- * Annotation to make text a link
+ * Annotation to make text with text color
  */
-class LinkAnnotation extends NodeAnnotation {
-  constructor(link, useInternalStyle = true) {
+class TextColorAnnotation extends NodeAnnotation {
+  constructor(textColor) {
     super();
-    this.type = NodeAnnotationTypeEnum.LINK;
-    this.link = link;
-    this.useInternalStyle = useInternalStyle;
+    this.type = NodeAnnotationTypeEnum.TEXT_COLOR;
+    this.textColor = this.formatTextColor(textColor);
   }
   /**
    * Generate the map item for the annotation
    *
-   * @param {VegaRTELink} link - Bold annotation
-   * @param {boolean} useInternalStyle - Whether to use default style for the link
-   * @returns {[NodeAnnotationTypeEnum.LINK, LinkAnnotation]} Map item for the annotation
+   * @param {string} textColor - text color annotation
+   * @returns {[NodeAnnotationTypeEnum.TEXT_COLOR, TextColorAnnotation]} Map item for the annotation
    */
-  static from(link, useInternalStyle = true) {
-    return [NodeAnnotationTypeEnum.LINK, new LinkAnnotation(link, useInternalStyle)];
+  static from(textColor) {
+    return [NodeAnnotationTypeEnum.TEXT_COLOR, new TextColorAnnotation(textColor)];
   }
   /**
    * Generate the JSON representation of the annotation
    *
-   * @returns {Record<'link', VegaRTELink>} JSON representation of the annotation
+   * @returns {Record<string, unknown>} JSON representation of the annotation
    */
   toJSON() {
     return {
-      link: this.link,
+      textColor: this.textColor.key,
     };
   }
   /**
    * @inheritDoc
    */
   clone() {
-    return new LinkAnnotation(this.link, this.useInternalStyle);
-  }
-  /**
-   * Verify whether two link annotation is same or not
-   *
-   * @param {LinkAnnotation} annotation - Compared annotation
-   * @returns {boolean} Whether two link annotation is same or not
-   */
-  toEqual(annotation) {
-    return this.link.groupKey === annotation.link.groupKey;
+    return new TextColorAnnotation(this.textColor.key);
   }
   /**
    * @inheritDoc
@@ -2587,28 +3074,18 @@ class LinkAnnotation extends NodeAnnotation {
    * @inheritDoc
    */
   renderStyle() {
-    return null;
-  }
-}
-
-/**
- * Action to link a group of nodes
- */
-class LinkGroupAnnotationAction extends AnnotationAction {
-  constructor(groupKey, nodes, type) {
-    super();
-    this.isFlushable = false;
-    this.groupKey = groupKey;
-    this.nodes = nodes;
-    this.type = type;
+    return {
+      color: VegaInternalThemeManager.isDarkMode() ? this.textColor.dark : this.textColor.light,
+    };
   }
   /**
-   * Converts the action to an annotation
+   * format text color
    *
-   * @returns {Annotation} The annotation
+   * @param {string} textColor - text color
+   * @returns {VegaRTEColorSchema} - VegaRTEColorSchema
    */
-  toAnnotation() {
-    return new LinkGroupAnnotation(this.groupKey);
+  formatTextColor(textColor) {
+    return (RTE_TEXT_COLORS.find((item) => item.key === textColor) || RTE_TEXT_COLORS[0]);
   }
 }
 
@@ -2630,139 +3107,6 @@ class SyncUpSelectionAction extends AnnotationAction {
   }
 }
 
-/**
- * The base action handle strategy class, use to modify the rich text node content or modify the annotation.
- */
-class ActionHandleStrategy {
-  /**
-   * Public method to invoke the handle logic.
-   *
-   * @typedef R generic type
-   * @param {ModifyContentAction | AnnotationAction} action - The action instance. Contains the action type and necessary params.
-   * @param {RTENode | RTEBlock | VegaRTEContent} target - The rich text node instance that will be modified.
-   * @returns {R} - The invoke result in special strategy.
-   */
-  execute(action, target) {
-    LogUtility.log(`Executing action ${action.constructor.name} on ${target.constructor.name} ${target['id']}`);
-    return this.handleAction(action, target);
-  }
-  /**
-   * Update the custom style annotation of a block or node
-   *
-   * @param {RTEBlock | RTETextNode} item - block or node
-   * @param {string[]} styleKeys - custom style keys, for examples ['fontSize', 'fontWeight'].
-   */
-  updateCustomStyleAnnotation(item, styleKeys) {
-    const customStyleAnnotation = item.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_STYLE);
-    if (customStyleAnnotation && this.isCustomStyle(customStyleAnnotation, styleKeys)) {
-      item.annotationMap.set(customStyleAnnotation.type, new CustomStyleAnnotation(customStyleAnnotation.removeStyles(styleKeys)));
-    }
-  }
-  /**
-   * Create a new paragraph block with the given text.
-   *
-   * @param {string} text - The text content for the new paragraph.
-   * @returns {Nullable<RTETextBlock>} - The newly created paragraph block, or null if creation failed.
-   */
-  createNewParagraph(text) {
-    const dtoClass = RTEDTOClassManager$1.getRTEBlockClass('paragraph');
-    if (dtoClass) {
-      const newParagraph = dtoClass.from({
-        id: generateUUID(),
-        type: 'paragraph',
-        nodes: [{ id: generateUUID(), type: 'text', text }],
-      });
-      return newParagraph;
-    }
-  }
-  /**
-   * Get the root content from a child block or node.
-   *
-   * @param {RTEBlock | RTENode} child - The child block or node.
-   * @returns {Nullable<VegaRTEContent>} The root content, if found.
-   */
-  getRootContent(child) {
-    const parent = child.parent;
-    if (parent) {
-      if (parent.dtoName === 'VegaRTEContent') {
-        return parent;
-      }
-      else {
-        return this.getRootContent(parent);
-      }
-    }
-  }
-  /**
-   * Check the caret position at the start of a block.
-   *
-   * @param {RTEBlock} block - The RTE Block.
-   * @param {RTENode} node - The RTE Node.
-   * @param {number} offset - The offset position.
-   * @returns {boolean} - Whether the caret is at the start of the block.
-   */
-  isCaretPositionAtBlockStart(block, node, offset) {
-    return node === block.children[0] && offset === 0;
-  }
-  /**
-   * Check the caret position at the end of a block.
-   *
-   * @param {RTEBlock} block - The RTE Block.
-   * @param {RTENode} node - The RTE Node.
-   * @param {number} offset - The offset position.
-   * @returns {boolean} - Whether the caret is at the end of the block.
-   */
-  isCaretPositionAtBlockEnd(block, node, offset) {
-    if (!node.isContentEditable()) {
-      return this.isCaretPositionAtDecoratorBlockEnd(block, node, offset);
-    }
-    else {
-      return this.isCaretPositionAtTextBlockEnd(block, node, offset);
-    }
-  }
-  /**
-   * Get the registered DOM element by the RTE entity.
-   *
-   * @param {RTEBlock | RTENode} instance - The RTE block or node instance.
-   * @returns {Nullable<HTMLElement>} The registered DOM element.
-   */
-  getDOMByEntity(instance) {
-    return stateEntityRenderingRegistry.getDOMByEntity(instance);
-  }
-  /**
-   * Checks if the caret position is at the end of a specified RTETextNode.
-   *
-   * @param {RTETextBlock} textBlock - `RTETextBlock` - a text block.
-   * @param {RTETextNode} node - `RTETextNode` - a node representing an image in a rich text editor.
-   * @param {number} startOffset - The position within the text node where the caret is located.
-   * @returns {boolean} a boolean value, which indicates whether the caret position is at the start of the RTETextNode.
-   */
-  isCaretPositionAtTextBlockEnd(textBlock, node, startOffset) {
-    const lastNode = textBlock.children[textBlock.children.length - 1];
-    return node === lastNode && (node.isEmpty() || startOffset === lastNode.text.length);
-  }
-  /**
-   * Checks if the caret position is at the end of a given decorator node.
-   *
-   * @param {RTEBlock} target - The image block.
-   * @param {RTENode} node - `node` is a RTEDecoratorNode or non-editable text node.
-   * @param {number} startOffset - The position within the `RTEDecoratorNode` where the caret is located.
-   * @returns {boolean}Returns a boolean value indicating whether the caret position is at the end of the `RTEDecoratorNode`.
-   */
-  isCaretPositionAtDecoratorBlockEnd(target, node, startOffset) {
-    return node === target.children[target.children.length - 1] && startOffset !== 0;
-  }
-  /**
-   * Determines if the custom style annotation includes any the custom style.
-   *
-   * @param {CustomStyleAnnotation} customStyleAnnotation - custom style annotation
-   * @param {string[]} styleKeys - custom style keys, for examples ['fontSize', 'fontWeight'].
-   * @returns {boolean} - True if the custom key includes the custom style, false otherwise.
-   */
-  isCustomStyle(customStyleAnnotation, styleKeys) {
-    return styleKeys.some((item) => Object.keys(customStyleAnnotation.customStyle).includes(item));
-  }
-}
-
 /**
  * Split the corresponding link group nodes *
  */
@@ -2912,25 +3256,6 @@ class NodeSplitTextStrategy extends ActionHandleStrategy {
   }
 }
 
-/**
- * Action to toggle bold annotation
- */
-class BoldAnnotationAction extends TextSplittableAction {
-  constructor(bold) {
-    super();
-    this.isFlushable = true;
-    this.bold = bold;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {BoldAnnotation} the annotation
-   */
-  toAnnotation() {
-    return new BoldAnnotation(this.bold);
-  }
-}
-
 /**
  * Annotation to host which annotations will be clear formatting
  */
@@ -2988,65 +3313,21 @@ class CodeAnnotationAction extends TextSplittableAction {
 }
 
 /**
- * Delete the node annotation by type
- */
-class DeleteNodeAnnotationAction extends AnnotationAction {
-  constructor(annotationType) {
-    super();
-    this.isFlushable = true;
-    this.annotationType = annotationType;
-  }
-  /**
-   * Don't need this for this action
-   *
-   * @returns {Nullable<Annotation>} undefined
-   */
-  toAnnotation() {
-    return undefined;
-  }
-}
-
-/**
- * Action to toggle the italic annotation
- */
-class ItalicAnnotationAction extends TextSplittableAction {
-  constructor(italic) {
-    super();
-    this.isFlushable = true;
-    this.italic = italic;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {ItalicAnnotation} The annotation
-   */
-  toAnnotation() {
-    return new ItalicAnnotation(this.italic);
-  }
-}
-
-/**
- * Action to toggle link annotation
+ * Action to toggle the italic annotation
  */
-class LinkAnnotationAction extends TextSplittableAction {
-  constructor({ link, newText, needMergeNode, doSplit, type, }) {
+class ItalicAnnotationAction extends TextSplittableAction {
+  constructor(italic) {
     super();
     this.isFlushable = true;
-    this.link = link;
-    this.needMergeNode = needMergeNode;
-    this.newText = newText;
-    this.type = type;
-    if (isNonNullable(doSplit)) {
-      this.doSplit = doSplit;
-    }
+    this.italic = italic;
   }
   /**
    * Converts the action to an annotation
    *
-   * @returns {LinkAnnotation} the annotation
+   * @returns {ItalicAnnotation} The annotation
    */
   toAnnotation() {
-    return new LinkAnnotation(this.link);
+    return new ItalicAnnotation(this.italic);
   }
 }
 
@@ -3700,421 +3981,140 @@ class RTETextNode extends RTENode {
     }
     else {
       this.applyActionToNode(this, action);
-    }
-    if (typeof this.parent.mergeNodes === 'function') {
-      this.parent.mergeNodes(action);
-    }
-  }
-  /**
-   * @inheritDoc
-   */
-  doModifyActionApply(action) {
-    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
-  }
-  /**
-   * Apply action to node
-   *
-   * @param {RTETextNode} node - Text node
-   * @param {AnnotationAction} action - AnnotationAction
-   */
-  applyActionToNode(node, action) {
-    const annotation = action.toAnnotation();
-    if (action instanceof SyncUpSelectionAction) {
-      this.syncUpSelectedNodes(node);
-      return;
-    }
-    // Sync up RTETextNode selected state to selection controller for any action apply, except selection range change.
-    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.
-     */
-    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);
-      return;
-    }
-  }
-  /**
-   * Sync up the selected node by change manager
-   *
-   * @param {RTETextNode} selectedNode - The selected node
-   */
-  syncUpSelectedNodes(selectedNode) {
-    const currentNodeDom = this.getElementRef();
-    if (currentNodeDom) {
-      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, VegaInternalRichTextEditorSelectionRangeChange);
-      if (nodeSubject) {
-        ChangeManager.notify(nodeSubject, { node: selectedNode });
-      }
-    }
-  }
-  /**
-   * @param {InlineHtmlAnnotation} inlineHtmlNode - The inline HTML annotation to wrap the text node.
-   * @param {VegaRTETransformOptions} [options] - Optional conversion options that may affect how the text node is rendered as HTML.
-   * @returns {string} The HTML string representation of the text node wrapped with the inline HTML.
-   */
-  renderWithWrapperStr(inlineHtmlNode, options) {
-    const { htmlTag, child } = inlineHtmlNode;
-    const attrStr = this.annotationAttrStr(inlineHtmlNode);
-    if (!child) {
-      if (HTML_VOID_TAGS.has(htmlTag)) {
-        return `<${htmlTag}${attrStr}>`;
-      }
-      if (!this.text) {
-        return `<${htmlTag}${attrStr}></${htmlTag}>`;
-      }
-      return `<${htmlTag}${attrStr}>${this.renderTextStr(options)}</${htmlTag}>`;
-    }
-    return `<${htmlTag}${attrStr}>${this.renderWithWrapperStr(child, options)}</${htmlTag}>`;
-  }
-  /**
-   * Generate the attribute string for the inline HTML annotation
-   *
-   * @param {InlineHtmlAnnotation} annotation - The inline HTML annotation
-   * @returns {string} The attribute string for the inline HTML annotation
-   */
-  annotationAttrStr(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(' ')}` : '';
-  }
-  /**
-   * Generates the HTML representation of the text node.
-   *
-   * @param {VegaRTETransformOptions} [options] - Optional conversion options that may affect how the text node is rendered as HTML.
-   * @returns {string} The HTML string representation of the text node.
-   */
-  renderTextStr(options) {
-    var _a;
-    const NodeTag = ((_a = this.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code)
-      ? 'code'
-      : 'span';
-    const attrStr = super.generateAttributeString(options);
-    // If the text contains a newline character, we need to replace it with a <br> tag.
-    if (this.text === '\n') {
-      return `<br>`;
-    }
-    if (this.shouldRenderAsPlainText()) {
-      return this.text;
-    }
-    const content = NodeTag === 'code' ? escapeHtml(this.text) : this.text;
-    return `<${NodeTag}${attrStr}>${content}</${NodeTag}>`;
-  }
-  /**
-   * Determines if the text node should be rendered as plain text.
-   *
-   * @returns {boolean} `true` if the text node should be rendered as plain text, otherwise `false`.
-   */
-  shouldRenderAsPlainText() {
-    const plainTextAnnotation = super.getAnnotationByType(NodeAnnotationTypeEnum.PLAIN_TEXT);
-    if (plainTextAnnotation) {
-      return (plainTextAnnotation.plainText &&
-        Array.from(this.annotationMap.values()).filter((annotation) => (annotation instanceof NodeAnnotation &&
-          !(annotation instanceof LinkAnnotation) &&
-          !(annotation instanceof PlainTextAnnotation)) ||
-          annotation instanceof CommonAnnotation).length === 0);
-    }
-    else {
-      return false;
-    }
-  }
-}
-RTETextNode.registerActionStrategyStatus = {};
-RTETextNode.htmlTag = 'span';
-RTETextNode.dtoName = 'RTETextNode';
-
-/**
- * Append children to a block or rte content
- *
- * @example parent.apply(new AppendChildrenAction([newChildren]))
- */
-class AppendChildrenAction extends ModifyContentAction {
-  constructor(childNodes) {
-    super();
-    this.type = ModifyContentActionType.APPEND_CHILDREN;
-    this.entityToBeAppended = childNodes;
-  }
-}
-
-const TEXT_STYLE_DEFAULT_FONT_WEIGHT = '500';
-const TEXT_STYLE_BASE = {
-  fontFamily: 'Inter',
-  fontSize: '16px',
-  lineHeight: '22px',
-  minHeight: '22px',
-  fontWeight: TEXT_STYLE_DEFAULT_FONT_WEIGHT,
-};
-const PARAGRAPH_TEXT_STYLE = Object.assign(Object.assign({}, TEXT_STYLE_BASE), { marginTop: '0px', marginBottom: '0px' });
-const TEXT_STYLE_DEFAULTS = {
-  'paragraph': PARAGRAPH_TEXT_STYLE,
-  'title': Object.assign(Object.assign({}, TEXT_STYLE_BASE), { fontSize: '36px', lineHeight: '40px', minHeight: '40px' }),
-  'subtitle': Object.assign(Object.assign({}, TEXT_STYLE_BASE), { fontSize: '28px', lineHeight: '32px', minHeight: '32px' }),
-  'heading-1': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '22px', lineHeight: '24px', minHeight: '24px' }),
-  'heading-2': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '20px', lineHeight: '24px', minHeight: '24px' }),
-  'heading-3': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '18px' }),
-  'heading-4': Object.assign({}, PARAGRAPH_TEXT_STYLE),
-  'heading-5': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '14px' }),
-  'heading-6': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '12px' }),
-};
-
-/**
- * Text style annotation
- */
-class TextStyleAnnotation extends BlockAnnotation {
-  constructor(textStyle) {
-    super();
-    this.type = BlockAnnotationTypeEnum.TEXT_STYLE;
-    this.textStyle = textStyle;
-  }
-  /**
-   * Generate the map item for the annotations
-   *
-   * @param {VegaRTETextStyleType} textStyle - the text style type
-   * @returns {[BlockAnnotationTypeEnum.TEXT_STYLE, TextStyleAnnotation]} Map item for the annotation
-   */
-  static from(textStyle) {
-    return [BlockAnnotationTypeEnum.TEXT_STYLE, new TextStyleAnnotation(textStyle)];
-  }
-  /**
-   * Get the default styles for a given text style type.
-   *
-   * @param {VegaRTETextStyleType} textStyle - The text style type.
-   * @returns {Nullable<AnnotationStyle>} The default styles for the given text style type.
-   */
-  static getDefaultStyles(textStyle) {
-    if (!textStyle)
-      return null;
-    return TEXT_STYLE_DEFAULTS[textStyle];
-  }
-  /**
-   * Generate the JSON representation of the annotation
-   *
-   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
-   */
-  toJSON() {
-    return { textStyle: this.textStyle };
-  }
-  /**
-   * @inheritDoc
-   */
-  clone() {
-    return new TextStyleAnnotation(this.textStyle);
-  }
-  /**
-   * @inheritDoc
-   */
-  renderClass(options) {
-    if (options === null || options === void 0 ? void 0 : options.standalone)
-      return null;
-    return this.textStyle ? `v-rte--text-style-${this.textStyle}` : null;
-  }
-  /**
-   * @inheritDoc
-   */
-  renderStyle(options) {
-    if (!(options === null || options === void 0 ? void 0 : options.standalone))
-      return null;
-    return this.textStyle ? TextStyleAnnotation.getDefaultStyles(this.textStyle) : null;
-  }
-}
-
-/**
- * Action to change the text style of a block
- */
-class TextStyleAnnotationAction extends AnnotationAction {
-  constructor(textStyle, bold) {
-    super();
-    this.isFlushable = true;
-    this.textStyle = textStyle;
-    this.bold = bold;
+    }
+    if (typeof this.parent.mergeNodes === 'function') {
+      this.parent.mergeNodes(action);
+    }
   }
   /**
-   * Converts the action to a block annotation
-   *
-   * @returns {BlockAnnotation} the block annotation
+   * @inheritDoc
    */
-  toAnnotation() {
-    return new TextStyleAnnotation(this.textStyle);
+  doModifyActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
   }
-}
-
-/**
- * Update the text block text style strategy.
- */
-class BlockUpdateTextStyleStrategy extends ActionHandleStrategy {
   /**
-   * Update the text block type and add or remove the bold style from child nodes.
+   * Apply action to node
    *
-   * @param {TextStyleAnnotationAction} action - The text style annotation action.
-   * @param {RTETextBlock} target - The current text block.
+   * @param {RTETextNode} node - Text node
+   * @param {AnnotationAction} action - AnnotationAction
    */
-  handleAction(action, target) {
-    if (target.type !== 'list-item') {
-      target.type = action.textStyle;
+  applyActionToNode(node, action) {
+    const annotation = action.toAnnotation();
+    if (action instanceof SyncUpSelectionAction) {
+      this.syncUpSelectedNodes(node);
+      return;
     }
-    if (action.bold) {
-      target.children.forEach((node) => {
-        const boldAnnotationAction = new BoldAnnotationAction(true);
-        boldAnnotationAction.doSplit = false;
-        node.apply(boldAnnotationAction);
-      });
+    // Sync up RTETextNode selected state to selection controller for any action apply, except selection range change.
+    if (!(annotation instanceof SelectionRangeAnnotation)) {
+      this.syncUpSelectedNodes(node);
     }
-    else {
-      target.children.forEach((node) => {
-        node.apply(new DeleteNodeAnnotationAction(NodeAnnotationTypeEnum.BOLD));
-      });
+    /**
+     * 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.
+     */
+    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);
+      return;
     }
-    this.updateCustomStyleAnnotation(target, ['fontFamily', 'lineHeight', 'fontWeight', 'fontSize']);
   }
-}
-
-/**
- * Update the text block link group annotation strategy.
- */
-class BlockUpdateLinkGroupStrategy extends ActionHandleStrategy {
   /**
-   * Update link group after the child link node update.
+   * Sync up the selected node by change manager
    *
-   * @param {LinkGroupAnnotationAction} action - The link group annotation action instance.
-   * @param {RTETextBlock} target - The current text block.
+   * @param {RTETextNode} selectedNode - The selected node
    */
-  handleAction(action, target) {
-    let linkGroupAnnotation = target.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
-    if (action.type === 'update_link') {
-      if (linkGroupAnnotation) {
-        const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey);
-        if (linkGroup) {
-          linkGroupAnnotation.linkGroups.set(action.groupKey, [linkGroup[0]]);
-        }
+  syncUpSelectedNodes(selectedNode) {
+    const currentNodeDom = this.getElementRef();
+    if (currentNodeDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, { node: selectedNode });
       }
     }
-    else {
-      if (linkGroupAnnotation) {
-        const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey) || [];
-        linkGroupAnnotation.linkGroups.set(action.groupKey, [...linkGroup, ...action.nodes]);
+  }
+  /**
+   * @param {InlineHtmlAnnotation} inlineHtmlNode - The inline HTML annotation to wrap the text node.
+   * @param {VegaRTETransformOptions} [options] - Optional conversion options that may affect how the text node is rendered as HTML.
+   * @returns {string} The HTML string representation of the text node wrapped with the inline HTML.
+   */
+  renderWithWrapperStr(inlineHtmlNode, options) {
+    const { htmlTag, child } = inlineHtmlNode;
+    const attrStr = this.annotationAttrStr(inlineHtmlNode);
+    if (!child) {
+      if (HTML_VOID_TAGS.has(htmlTag)) {
+        return `<${htmlTag}${attrStr}>`;
       }
-      else {
-        linkGroupAnnotation = action.toAnnotation();
-        linkGroupAnnotation.linkGroups.set(action.groupKey, [...action.nodes]);
+      if (!this.text) {
+        return `<${htmlTag}${attrStr}></${htmlTag}>`;
       }
-      target.annotationMap.set(InternalAnnotationTypeEnum.LINK_GROUP, linkGroupAnnotation);
+      return `<${htmlTag}${attrStr}>${this.renderTextStr(options)}</${htmlTag}>`;
     }
+    return `<${htmlTag}${attrStr}>${this.renderWithWrapperStr(child, options)}</${htmlTag}>`;
   }
-}
-
-/**
- * Insert a new children after a existing children
- *
- * @example parent.apply(new InsertChildrenAfterAction(existingChildren, newChildren, ...))
- */
-class InsertChildrenAfterAction extends ModifyContentAction {
-  constructor(referBlock, ...blocksToBeInserted) {
-    super();
-    this.type = ModifyContentActionType.INSERT_CHILDREN_AFTER;
-    this.referChildren = referBlock;
-    this.childrenToBeInserted = blocksToBeInserted;
-  }
-}
-
-/**
- * Clear the current block nodes and append new nodes
- *
- * @example block.apply(new ReplaceChildNodesAction(newNodes))
- */
-class ReplaceChildNodesAction extends ModifyContentAction {
-  constructor(newChildNodes) {
-    super();
-    this.type = ModifyContentActionType.REPLACE_CHILD_NODES;
-    this.newChildNodes = newChildNodes;
-  }
-}
-
-/**
- * Split the current node with a special position strategy.
- */
-class BlockSplitWithTextNodeStrategy extends ActionHandleStrategy {
   /**
-   * @inheritDoc
+   * Generate the attribute string for the inline HTML annotation
+   *
+   * @param {InlineHtmlAnnotation} annotation - The inline HTML annotation
+   * @returns {string} The attribute string for the inline HTML annotation
    */
-  handleAction(action, target) {
-    action.newBlock = this.splitTextNodeBlock(action.splitPointNode, action.startOffsetOfNode, target);
+  annotationAttrStr(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(' ')}` : '';
   }
   /**
-   * Splits a text node at a specified offset within a block of nodes and returns a new block with the split nodes.
+   * Generates the HTML representation of the text node.
    *
-   * @param {RTETextNode} splitNode - The text node that will be split
-   * @param {number} startOffsetOfNode - The index at which will split the text content of the `splitNode`.
-   * @param {RTETextBlock} textBlock - The text block need to be splited.
-   * @returns {Nullable<RTEBlock>} return either an RTEBlock object or null.
+   * @param {VegaRTETransformOptions} [options] - Optional conversion options that may affect how the text node is rendered as HTML.
+   * @returns {string} The HTML string representation of the text node.
    */
-  splitTextNodeBlock(splitNode, startOffsetOfNode, textBlock) {
-    if (splitNode) {
-      const beforeText = splitNode.text.slice(0, startOffsetOfNode);
-      const afterText = splitNode.text.slice(startOffsetOfNode);
-      const nodesSplitIndex = textBlock.children.indexOf(splitNode);
-      if (nodesSplitIndex > -1) {
-        const beforeNodes = textBlock.children.slice(0, nodesSplitIndex);
-        const afterNodes = textBlock.children.slice(nodesSplitIndex + 1);
-        if (splitNode.isContentEditable()) {
-          if (beforeText) {
-            beforeNodes.push(splitNode.cloneWithText(beforeText));
-          }
-          if (afterText) {
-            afterNodes.unshift(splitNode.cloneWithText(afterText));
-          }
-        }
-        else {
-          startOffsetOfNode > 0 ? beforeNodes.push(splitNode) : afterNodes.unshift(splitNode);
-        }
-        textBlock.apply(new ReplaceChildNodesAction(beforeNodes));
-        const newBlock = textBlock.cloneWithNodes(afterNodes);
-        textBlock.parent.apply(new InsertChildrenAfterAction(textBlock, newBlock));
-        return newBlock;
-      }
+  renderTextStr(options) {
+    var _a;
+    const NodeTag = ((_a = this.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code)
+      ? 'code'
+      : 'span';
+    const attrStr = super.generateAttributeString(options);
+    // If the text contains a newline character, we need to replace it with a <br> tag.
+    if (this.text === '\n') {
+      return `<br>`;
+    }
+    if (this.shouldRenderAsPlainText()) {
+      return this.text;
     }
+    const content = NodeTag === 'code' ? escapeHtml(this.text) : this.text;
+    return `<${NodeTag}${attrStr}>${content}</${NodeTag}>`;
   }
-}
-
-/**
- * Remove all nodes and append new nodes strategy.
- */
-class BlockReplaceNodesStrategy extends ActionHandleStrategy {
   /**
-   * Empty the text block or image block nodes and add new nodes.
+   * Determines if the text node should be rendered as plain text.
    *
-   * @param {ReplaceChildNodesAction} action - The replace child nodes action instance.
-   * @param {RTETextBlock | RTEImageBlock} target - The text block or the image block.
+   * @returns {boolean} `true` if the text node should be rendered as plain text, otherwise `false`.
    */
-  handleAction(action, target) {
-    target.children = [];
-    target.apply(new AppendChildrenAction(action.newChildNodes));
-  }
-}
-
-/**
- * Remove a children from the current block
- *
- * @example needRemovedChildren.parent.apply(new RemoveChildrenAction(needRemovedChildren))
- */
-class RemoveChildrenAction extends ModifyContentAction {
-  constructor(childNode) {
-    super();
-    this.type = ModifyContentActionType.DELETE_CHILDREN;
-    this.entityToBeRemoved = childNode;
+  shouldRenderAsPlainText() {
+    const plainTextAnnotation = super.getAnnotationByType(NodeAnnotationTypeEnum.PLAIN_TEXT);
+    if (plainTextAnnotation) {
+      return (plainTextAnnotation.plainText &&
+        Array.from(this.annotationMap.values()).filter((annotation) => (annotation instanceof NodeAnnotation &&
+          !(annotation instanceof LinkAnnotation) &&
+          !(annotation instanceof PlainTextAnnotation)) ||
+          annotation instanceof CommonAnnotation).length === 0);
+    }
+    else {
+      return false;
+    }
   }
 }
+RTETextNode.registerActionStrategyStatus = {};
+RTETextNode.htmlTag = 'span';
+RTETextNode.dtoName = 'RTETextNode';
 
 /**
  * Append the second block child nodes to the first block child nodes and remove the second block strategy.
@@ -4514,18 +4514,30 @@ class RTETextBlock extends RTEBlock {
     const textBlock = new RTETextBlock(block.id, block.type, options);
     const annotations = options.autoMatchFormat
       ? Object.assign(Object.assign({}, block.annotations), { textStyle: (_b = (_a = block.annotations) === null || _a === void 0 ? void 0 : _a.textStyle) !== null && _b !== void 0 ? _b : textBlock.type }) : block.annotations;
-    textBlock.children = block.nodes
+    textBlock.children = RTETextBlock.convertNodes(block.nodes, textBlock, options);
+    if (annotations) {
+      super.convertAnnotationsToMap(textBlock.annotationMap, annotations);
+    }
+    return textBlock;
+  }
+  /**
+   * Convert raw node payloads to their registered `RTENode` subclasses via
+   * `RTEDTOClassManager`, preserving custom types (e.g. `RTETokenNode`).
+   *
+   * @param {VegaRTETextNode[]} nodes - Raw node payloads.
+   * @param {RTETextBlock} parent - Parent block for the converted nodes.
+   * @param {VegaRTETransformOptions} [options] - Optional transform options.
+   * @returns {RTETextNode[]} Converted nodes; unregistered types are dropped.
+   */
+  static convertNodes(nodes, parent, options) {
+    return nodes
       .map((richText) => {
       const NodeClass = RTEDTOClassManager$1.getRTENodeClass(richText.type);
       if (NodeClass) {
-        return NodeClass.from(richText, textBlock, options);
+        return NodeClass.from(richText, parent, options);
       }
     })
       .filter(isNonNullable);
-    if (annotations) {
-      super.convertAnnotationsToMap(textBlock.annotationMap, annotations);
-    }
-    return textBlock;
   }
   /**
    * The function `createAnnotationEntity` creates a block annotation entity based on the provided type
@@ -4957,7 +4969,7 @@ class RTEListItemBlock extends RTETextBlock {
    */
   static from(block, options = { autoMatchFormat: true }) {
     const listItemBlock = new RTEListItemBlock(block.id, undefined, options);
-    listItemBlock.children = block.nodes.map((richText) => RTETextNode.from(richText, listItemBlock, options));
+    listItemBlock.children = RTEListItemBlock.convertNodes(block.nodes, listItemBlock, options);
     if (block.children) {
       listItemBlock.nestList = block.children.map((child) => {
         const listBlock = RTEListBlock.from(child, options);