@heartlandone/vega 2.67.0 → 2.68.0

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/block-delete-node-content-strategy.js

@@ -77,9 +77,7 @@ export class BlockDeleteNodeContentStrategy extends ActionHandleStrategy {
       if (currentBlockIndex > 0) {
         return currentBlock.parent.children[currentBlockIndex - 1];
       }
-      else if ((currentBlock.parent['type'] === 'number-list' ||
-        currentBlock.parent['type'] === 'bullet-list') &&
-        currentBlockIndex === 0) {
+      else if (this.isRTEBlock(currentBlock.parent) && currentBlockIndex === 0) {
         return this.getPreviousBlock(currentBlock.parent);
       }
     }
@@ -130,4 +128,13 @@ export class BlockDeleteNodeContentStrategy extends ActionHandleStrategy {
       }
     }
   }
+  /**
+   * Checks if the given instance is not the root content block.
+   *
+   * @param {RTEBlock | VegaRTEContent} block - The instance to check.
+   * @returns {boolean} True if the block is not the root content block, false otherwise.
+   */
+  isRTEBlock(block) {
+    return block && block.constructor.name !== 'VegaRTEContent';
+  }
 }

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/block-delete-text-or-decorator-node-strategy.js

@@ -101,7 +101,8 @@ export class BlockDeleteTextOrDecoratorNodeStrategy extends BlockDeleteNodeConte
           }
         }
       }
-      //Remove the paragraph block if the content is empty
+      // Remove the paragraph block if the content is empty
+      // TODO: Check whether need to remove below logic because already handled the same logic in remove node strategy
       if (target.children.length === 0) {
         target.parent.apply(new RemoveChildrenAction(target));
       }

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/paste-content-strategy.js

@@ -0,0 +1,28 @@
+import { InsertChildrenAfterAction } from '../../actions/insert-children-after-block';
+import { InsertChildrenBeforeAction } from '../../actions/insert-children-before-block';
+import { SplitBlockWithNodeAction } from '../../actions/split-block-with-node-action';
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Strategy to handle the paste content into function block.
+ */
+export class PasteContentStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    if (target.parent) {
+      const { blocksToBeInserted, startNode, startOffset } = action;
+      let futureFocusBlock = target;
+      if (startNode === target.children[0] && startOffset === 0) {
+        target.parent.apply(new InsertChildrenBeforeAction(target, ...blocksToBeInserted));
+      }
+      else {
+        const breakAction = new SplitBlockWithNodeAction(startNode, startOffset);
+        target.apply(breakAction);
+        target.parent.apply(new InsertChildrenAfterAction(target, ...blocksToBeInserted));
+        futureFocusBlock = breakAction.newBlock;
+      }
+      action.futureFocusBlock = futureFocusBlock;
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/actions/modify-content-action.abstract.js

@@ -29,6 +29,7 @@ export var ModifyContentActionType;
   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";
+  ModifyContentActionType["PASTE_CONTENT"] = "PASTE_CONTENT";
 })(ModifyContentActionType || (ModifyContentActionType = {}));
 /**
  * Abstract class for update node content, delete node, insert node

package/dist/collection/components/vega-rich-text-editor/dto/actions/paste-content-action.js

@@ -0,0 +1,17 @@
+import { ModifyContentAction, ModifyContentActionType } from './modify-content-action.abstract';
+/**
+ * Action to paste new content into current block.
+ *
+ * @example functionBlock.apply(new PasteContentAction(blocksToBeInserted, startNode, startOffset))
+ * @example host.value.apply(new PasteContentAction(blocksToBeInserted, startNode, startOffset))
+ */
+export class PasteContentAction extends ModifyContentAction {
+  constructor(blocksToBeInserted, startNode, startOffset, rteRange) {
+    super();
+    this.type = ModifyContentActionType.PASTE_CONTENT;
+    this.blocksToBeInserted = blocksToBeInserted;
+    this.startNode = startNode;
+    this.startOffset = startOffset;
+    this.rteRange = rteRange;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/actions/update-cursor-position-action.js

@@ -14,10 +14,15 @@ export class UpdateCursorPositionAction extends ModifyContentAction {
    */
   constructor(nextFocusNode, offset, immediatelyRun = false) {
     super();
+    this.isFlushable = true;
     this.type = ModifyContentActionType.UPDATE_CURSOR_POSITION;
     this.immediatelyRun = false;
     this.nextFocusNode = nextFocusNode;
     this.offset = offset;
     this.immediatelyRun = immediatelyRun;
+    // Don't flush changes if we want to immediately run the cursor update. Usually the current value is the latest value.
+    if (this.immediatelyRun) {
+      this.isFlushable = false;
+    }
   }
 }

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

@@ -0,0 +1,87 @@
+import { isNonNullable } from '../../../../types/type-guard';
+import { camelToDashCase } from '../../../../utils/string';
+import { RTEBlock } from '../blocks/block.abstract';
+import { BlockAnnotation } from './block-annotation.abstract';
+import { CustomStyleAnnotation } from './custom-style-annotation';
+import { NodeAnnotation } from './node-annotation.abstract';
+/**
+ * Class to handle the style representation of annotations for RTE blocks and nodes.
+ */
+export class RTEAnnotationStyle {
+  constructor(dto) {
+    this.dtoType = dto instanceof RTEBlock ? 'block' : 'node';
+    this.annotationMap = dto.annotationMap;
+  }
+  /**
+   * Convert an AnnotationStyle object to a CSS text string.
+   *
+   * @param {RTERenderContext} options - Rendering context options.
+   * @param {string[]} canMergeKeyList - List of style keys that can be merged by concatenation.
+   * @param {Nullable<AnnotationStyle>} annotationStyle - The annotation style object, if null, get from toJSON().
+   * @returns {string} A string representing the CSS text.
+   */
+  toCssText(options = { standalone: false }, canMergeKeyList, annotationStyle) {
+    annotationStyle = annotationStyle ? annotationStyle : this.toJSON(options, canMergeKeyList);
+    return Object.entries(Object.assign({}, annotationStyle))
+      .map(([key, value]) => `${camelToDashCase(key)}: ${value};`)
+      .join('');
+  }
+  /**
+   * Convert the annotation map to a JSON representation.
+   *
+   * @param {RTERenderContext} options - Rendering context options.
+   * @param {string[]} canMergeKeyList - List of style keys that can be merged by concatenation.
+   * @returns {AnnotationStyle} - The JSON representation of the annotation styles.
+   */
+  toJSON(options = { standalone: false }, canMergeKeyList) {
+    const styles = Array.from(this.annotationMap.values())
+      .filter((annotation) => this.filterAnnotation(annotation) || annotation instanceof CustomStyleAnnotation)
+      .map((annotation) => annotation.renderStyle(options))
+      .filter(isNonNullable);
+    if (canMergeKeyList && canMergeKeyList.length > 0) {
+      return this.mergeAnnotationStyles(styles, canMergeKeyList);
+    }
+    else {
+      return styles.reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+    }
+  }
+  /**
+   * Filter annotations based on whether they are block or node annotations.
+   *
+   * @param {RTENodeAnnotationMapValue | RTEBlockAnnotationMapValue} annotation - The annotation to filter.
+   * @returns {boolean} - True if the annotation matches the DTO type, false otherwise.
+   */
+  filterAnnotation(annotation) {
+    return this.dtoType === 'block'
+      ? annotation instanceof BlockAnnotation
+      : annotation instanceof NodeAnnotation;
+  }
+  /**
+   * Merge an array of annotation styles into a single style object.
+   * e.g.,
+   * { textDecoration: 'underline', textDecoration: 'line-through' }
+   * -> { textDecoration: 'underline line-through' }
+   *
+   * @param {AnnotationStyle[]} styles - Array of annotation style objects to merge.
+   * @param {string[]} canMergeKeyList - List of style keys that can be merged by concatenation.
+   * @returns {AnnotationStyle} - The merged annotation style object.
+   */
+  mergeAnnotationStyles(styles, canMergeKeyList) {
+    const merged = {};
+    for (const style of styles) {
+      for (const key in style) {
+        const value = style[key];
+        const existing = merged[key];
+        if (typeof existing === 'string' &&
+          typeof value === 'string' &&
+          canMergeKeyList.includes(key)) {
+          merged[key] = Array.from(new Set(`${existing} ${value}`.split(/\s+/).filter(Boolean))).join(' ');
+        }
+        else {
+          merged[key] = value;
+        }
+      }
+    }
+    return merged;
+  }
+}

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

@@ -9,12 +9,13 @@ import { HorizontalAlignmentAnnotation } from '../annotations/horizontal-alignme
 import { IndentAnnotation } from '../annotations/indent-annotation';
 import { ActionHandleStrategyRegistry } from '../action-handle-strategies/action-handle-strategy-registry';
 import { isNonNullable } from '../../../../types/type-guard';
-import { camelToDashCase } from '../../../../utils/string';
 import { CustomAttributeAnnotation } from '../annotations/custom-attribute-annotation';
 import { CustomClassAnnotation } from '../annotations/custom-class-annotation';
 import { CommonAnnotation, CommonAnnotationTypeEnum } from '../annotations/common-annotation.abstract';
 import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
 import { InternalWrapperAnnotation } from '../annotations/internal-wrapper-annotation';
+import RTEDTOClassManager from '../../../../helpers/rte-manager/dto-class-manager';
+import { RTEAnnotationStyle } from '../annotations/annotation-style';
 /**
  * Abstract class for block
  */
@@ -32,6 +33,26 @@ export class RTEBlock {
   static from(json, options) {
     throw new Error(`[Vega] ${this.constructor.name}.from(${JSON.stringify(json)}, ${options}) is not implemented. Please implement this method in the subclass.`);
   }
+  /**
+   * Generates block children from an array of VegaRTEContentBlock.
+   *
+   * @param {VegaRTEContentBlock[]} blockArray - The array of VegaRTEContentBlock to generate children from.
+   * @param {VegaRTETransformOptions} [options] - Optional transformation options.
+   * @param {VegaRTEContent | RTEBlock} [parentBlock] - Optional parent block.
+   * @returns {RTEBlock[]} An array of generated RTEBlock children.
+   */
+  static generateBlockChildren(blockArray, options, parentBlock) {
+    return blockArray
+      .map((child) => {
+      const BlockClass = RTEDTOClassManager.getRTEBlockClass(child.type);
+      if (BlockClass) {
+        const block = BlockClass.from(child, options);
+        block.parent = parentBlock;
+        return block;
+      }
+    })
+      .filter(isNonNullable);
+  }
   /**
    * The function `createAnnotationEntity` creates a block annotation entity based on the provided type
    * and value.
@@ -145,11 +166,9 @@ export class RTEBlock {
    * @returns {AnnotationStyle} - Annotation styles
    */
   getStyles(options = { standalone: false }) {
-    return Object.assign(Object.assign({}, Array.from(this.annotationMap.values())
-      .filter((annotation) => annotation instanceof BlockAnnotation || annotation instanceof CustomStyleAnnotation)
-      .map((annotation) => annotation.renderStyle(options))
-      .filter(isNonNullable)
-      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {})), (this.shouldRenderAsInternalWrapper() ? { display: 'contents' } : {}));
+    const rteAnnotationStyle = new RTEAnnotationStyle(this);
+    const blockAnnotationStyle = rteAnnotationStyle.toJSON(options);
+    return Object.assign(Object.assign({}, blockAnnotationStyle), (this.shouldRenderAsInternalWrapper() ? { display: 'contents' } : {}));
   }
   /**
    * Get classes from annotations
@@ -180,9 +199,8 @@ export class RTEBlock {
    */
   generateAttributeString(...attrs) {
     var _a;
-    const styles = Object.entries(Object.assign({}, this.getStyles({ standalone: true })))
-      .map(([key, value]) => `${camelToDashCase(key)}: ${value};`)
-      .join('');
+    const blockAnnotationStyle = new RTEAnnotationStyle(this);
+    const styles = blockAnnotationStyle.toCssText({ standalone: true });
     const customClassAnnotation = this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_CLASS);
     const customAttributeString = ((_a = this.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.toString(attrs)) || [];
     const attributes = [

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

@@ -1,6 +1,4 @@
 import { RTEBlock } from './block.abstract';
-import RTEDTOClassManager from '../../../../helpers/rte-manager/dto-class-manager';
-import { isNonNullable } from '../../../../types/type-guard';
 /**
  * HTML Block
  */
@@ -24,16 +22,7 @@ export class RTEHtmlBlock extends RTEBlock {
     if (annotations) {
       super.convertAnnotationsToMap(htmlBlock.annotationMap, annotations);
     }
-    htmlBlock.children = block.children
-      .map((child) => {
-      const BlockClass = RTEDTOClassManager.getRTEBlockClass(child.type);
-      if (BlockClass) {
-        const block = BlockClass.from(child, options);
-        block.parent = htmlBlock;
-        return block;
-      }
-    })
-      .filter(isNonNullable);
+    htmlBlock.children = this.generateBlockChildren(block.children, options, htmlBlock);
     return htmlBlock;
   }
   /**

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

@@ -14,6 +14,10 @@ import { ListItemReplaceNestListStrategy } from '../action-handle-strategies/mod
 import { BlockMergeNodesStrategy } from '../action-handle-strategies/modify-content-strategies/block-merge-nodes-strategy';
 import { ListItemInsertImageStrategy } from '../action-handle-strategies/modify-content-strategies/list-item-insert-image-strategy';
 import { isNonNullable } from '../../../../types/type-guard';
+import { TextStyleAnnotationAction } from '../actions/text-style-annotation-action';
+import { BlockUpdateTextStyleStrategy } from '../action-handle-strategies/apply-annotation-strategies/block-update-text-style-strategy';
+import { HorizontalAlignmentAnnotationAction } from '../actions/horizontal-alignment-annotation-action';
+import { BlockUpdateHorizontalAlignmentStrategy } from '../action-handle-strategies/apply-annotation-strategies/block-update-horizontal-alignment-strategy';
 /**
  * List item block
  */
@@ -116,6 +120,8 @@ export class RTEListItemBlock extends RTETextBlock {
   }
 }
 (() => {
+  ActionHandleStrategyRegistry.register(TextStyleAnnotationAction.name, RTEListItemBlock.name, new BlockUpdateTextStyleStrategy());
+  ActionHandleStrategyRegistry.register(HorizontalAlignmentAnnotationAction.name, RTEListItemBlock.name, new BlockUpdateHorizontalAlignmentStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new BlockInsertLineBreakStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEListItemBlock.name, new BlockInsertLineBreakWithBlocksStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_NEST_LIST, RTEListItemBlock.name, new ListItemRemoveNestListStrategy());

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

@@ -140,11 +140,7 @@ export class RTETextBlock extends RTEBlock {
   toHtml() {
     const BlockTag = this.getBlockTag();
     const attrStr = super.generateAttributeString();
-    const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
-    let nodesHtml = this.children.map((node) => node.toHtml()).join('');
-    if (linkGroupAnnotation && this.children.length > 0) {
-      nodesHtml = this.generateLinkHtml(linkGroupAnnotation, nodesHtml);
-    }
+    const nodesHtml = this.getChildrenHtml();
     return super.shouldRenderAsInternalWrapper()
       ? nodesHtml
       : [`<${BlockTag}${attrStr}>`, nodesHtml, `</${BlockTag}>`].join('');
@@ -210,6 +206,19 @@ export class RTETextBlock extends RTEBlock {
         return 'p';
     }
   }
+  /**
+   * Get the HTML string for the children nodes, including handling link group annotations.
+   *
+   * @returns {string} The HTML string representing the children nodes.
+   */
+  getChildrenHtml() {
+    const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    let nodesHtml = this.children.map((node) => node.toHtml()).join('');
+    if (linkGroupAnnotation && this.children.length > 0) {
+      nodesHtml = this.generateLinkHtml(linkGroupAnnotation, nodesHtml);
+    }
+    return nodesHtml;
+  }
   /**
    * @inheritDoc
    */

package/dist/collection/components/vega-rich-text-editor/dto/content-state.js

@@ -14,6 +14,10 @@ import { RemoveChildrenStrategy } from './action-handle-strategies/modify-conten
 import { AppendChildrenStrategy } from './action-handle-strategies/modify-content-strategies/append-children-strategy';
 import { InsertChildrenBeforeStrategy } from './action-handle-strategies/modify-content-strategies/insert-children-before-strategy';
 import { InsertChildrenAfterStrategy } from './action-handle-strategies/modify-content-strategies/insert-children-after-strategy';
+import stateEntityRenderingRegistry from '../slimmers/controllers/state-entity-rendering-registry';
+import changeManager from '../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalRichTextEditorFlushChanges } from '../../../helpers/event-manager/event-id/vega-internal-event-id';
 import './setup';
 import { StylePreservator } from '../../../helpers/csp/styles-preservator';
 import { LogUtility } from '../../../utils/log';
@@ -146,6 +150,13 @@ export class VegaRTEContent {
    */
   apply(action) {
     ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+    // Check if the action has been executed and is flushable
+    if (action['executedFlag'] && action.isFlushable) {
+      const host = stateEntityRenderingRegistry.getDOMByEntity(this);
+      if (host) {
+        changeManager.notify(domNodeSubjectFactory.getSubject(host, VegaInternalRichTextEditorFlushChanges), {});
+      }
+    }
   }
   /**
    * Get the last node in the content.

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

@@ -4,13 +4,13 @@ import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/do
 import { VegaInternalRichTextEditorFlushChanges } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { ModifyContentAction } from '../actions/modify-content-action.abstract';
 import { NodeAnnotation } from '../annotations/node-annotation.abstract';
-import { camelToDashCase } from '../../../../utils/string';
 import { isNonNullable } from '../../../../types/type-guard';
 import { CustomAttributeAnnotation } from '../annotations/custom-attribute-annotation';
 import { CustomClassAnnotation } from '../annotations/custom-class-annotation';
 import { CommonAnnotationTypeEnum } from '../annotations/common-annotation.abstract';
 import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
 import { methodPlaceholder } from 'vega-slimmer/core';
+import { RTEAnnotationStyle } from '../annotations/annotation-style';
 export var NodeTypeEnum;
 (function (NodeTypeEnum) {
   NodeTypeEnum["TEXT"] = "TEXT";
@@ -95,11 +95,8 @@ export class RTENode {
    * @returns {AnnotationStyle} - Annotation styles
    */
   getStyles(options = { standalone: false }) {
-    const styles = Array.from(this.annotationMap.values())
-      .filter((annotation) => annotation instanceof NodeAnnotation || annotation instanceof CustomStyleAnnotation)
-      .map((annotation) => annotation.renderStyle(options))
-      .filter(Boolean);
-    return this.mergeAnnotationStyles(styles, ['textDecoration']);
+    const rteAnnotationStyle = new RTEAnnotationStyle(this);
+    return rteAnnotationStyle.toJSON(options, ['textDecoration']);
   }
   /**
    * Get classes from annotations
@@ -146,9 +143,10 @@ export class RTENode {
    */
   generateAttributeString(...attrs) {
     var _a;
-    const styles = Object.entries(Object.assign({}, this.getStyles({ standalone: true })))
-      .map(([key, value]) => `${camelToDashCase(key)}: ${value};`)
-      .join('');
+    const nodeAnnotationStyle = new RTEAnnotationStyle(this);
+    const styles = nodeAnnotationStyle.toCssText({ standalone: true }, [
+      'textDecoration',
+    ]);
     const customClassAnnotation = this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_CLASS);
     const customAttributeString = ((_a = this.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.toString(attrs)) || [];
     const attributes = [
@@ -210,32 +208,4 @@ export class RTENode {
   doModifyActionApply(action) {
     methodPlaceholder(action);
   }
-  /**
-   * Merge an array of annotation styles into a single style object.
-   * e.g.,
-   * { textDecoration: 'underline', textDecoration: 'line-through' }
-   * -> { textDecoration: 'underline line-through' }
-   *
-   * @param {AnnotationStyle[]} styles - Array of annotation style objects to merge.
-   * @param {string[]} canMergeKeyList - List of style keys that can be merged by concatenation.
-   * @returns {AnnotationStyle} - The merged annotation style object.
-   */
-  mergeAnnotationStyles(styles, canMergeKeyList) {
-    const merged = {};
-    for (const style of styles) {
-      for (const key in style) {
-        const value = style[key];
-        const existing = merged[key];
-        if (typeof existing === 'string' &&
-          typeof value === 'string' &&
-          canMergeKeyList.includes(key)) {
-          merged[key] = Array.from(new Set(`${existing} ${value}`.split(/\s+/).filter(Boolean))).join(' ');
-        }
-        else {
-          merged[key] = value;
-        }
-      }
-    }
-    return merged;
-  }
 }

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

@@ -31,6 +31,13 @@ import { LinkGroupNodeSplitStrategy } from '../action-handle-strategies/modify-c
 import { DeleteLinkGroupStrategy } from '../action-handle-strategies/modify-content-strategies/delete-link-group-strategy';
 import { PlainTextAnnotation } from '../annotations/plain-text-annotation';
 import { LinkAnnotationAction } from '../actions/link-annotation-action';
+import { BoldAnnotationAction } from '../actions/bold-annotation-action';
+import { ClearFormattingAnnotationAction } from '../actions/clear-formatting-annotation-action';
+import { ItalicAnnotationAction } from '../actions/italic-annotation-action';
+import { UnderlineAnnotationAction } from '../actions/underline-annotation-action';
+import { TextColorAnnotationAction } from '../actions/text-color-annotation-action';
+import { StrikethroughAnnotationAction } from '../actions/strikethrough-annotation-action';
+import { CodeAnnotationAction } from '../actions/code-annotation-action';
 /**
  * Text node
  */
@@ -217,6 +224,13 @@ export class RTETextNode extends RTENode {
       }
       ActionHandleStrategyRegistry.register(TextSplittableAction.name, dtoClassName, new NodeSplitTextStrategy());
       ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_LINK_GROUP, dtoClassName, new DeleteLinkGroupStrategy());
+      ActionHandleStrategyRegistry.register(BoldAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(ClearFormattingAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(ItalicAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(UnderlineAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(TextColorAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(StrikethroughAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(CodeAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
       ActionHandleStrategyRegistry.register(AnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
       RTETextNode.registerActionStrategyStatus[dtoClassName] = true;
     }
@@ -267,9 +281,6 @@ export class RTETextNode extends RTENode {
     /**
      * 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) {

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

@@ -6,6 +6,15 @@ import stateEntityRenderingRegistry from '../slimmers/controllers/state-entity-r
  * Base renderer for Vega Rich Text Editor.
  */
 export class VegaRTEExtensionRenderer extends VegaRTEBaseRenderer {
+  /**
+   * Returns the styles to be injected into the RTE scope.
+   * Override this method to provide custom styles for the custom blocks or nodes.
+   *
+   * @returns {string} - The styles as a string.
+   */
+  injectRTEScopeStyles() {
+    return '';
+  }
   /**
    * Renders the given data as a DOM element.
    *
@@ -34,6 +43,15 @@ export class VegaRTEExtensionRenderer extends VegaRTEBaseRenderer {
       }
     };
   }
+  /**
+   * Get a registered renderer by its key.
+   *
+   * @param {string} key - The key of the renderer.
+   * @returns {Nullable<BaseRenderer>} - The registered renderer or null if not found.
+   */
+  getDTORenderer(key) {
+    return RTEDTORendererManager.getRTERenderer(key);
+  }
   /**
    * Auto render the block children if the block element is not exist
    *
@@ -62,7 +80,7 @@ export class VegaRTEExtensionRenderer extends VegaRTEBaseRenderer {
    * @returns {Nullable<VegaRTERenderResult>} - The rendered DOM element.
    */
   renderChildren(renderData, rteContext, createElement) {
-    const renderer = RTEDTORendererManager.getRTERenderer(renderData.type);
+    const renderer = this.getDTORenderer(renderData.type);
     if (renderer) {
       return renderer.render(renderData, rteContext, createElement);
     }

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

@@ -33,7 +33,7 @@ export class VegaRTEToolbarButtonRenderer {
    * @returns {VegaRTERenderResult} - The render result for the dropdown.
    */
   renderDropdown(h, editorContext, dropdownProps, children) {
-    return h('vega-dropdown', Object.assign({ trigger: 'click', searchable: false, 
+    return h('vega-dropdown', Object.assign({ trigger: 'click', searchable: false, maxWidth: '200', itemDisplayRule: 'ellipsis', 
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, (input) => this.handleDropdownClick(input.detail, editorContext));
@@ -43,7 +43,7 @@ export class VegaRTEToolbarButtonRenderer {
    * Renders the dropdown list template.
    *
    * @param {VegaRTECreateElementFunction} h - Create element function.
-   * @param {RTEDropdownListItem[]} itemList - The list of dropdown items.
+   * @param {(RTEDropdownListItem | RTEDropdownListGroup)[]} itemList - The list of dropdown items.
    * @returns {VegaRTERenderResult} - The render result for the dropdown list.
    */
   renderDropdownListTemplate(h, itemList) {
@@ -51,7 +51,9 @@ export class VegaRTEToolbarButtonRenderer {
       slot: 'items',
       onMouseDown: this.preventDefault,
     }, itemList.map((item) => {
-      return this.renderDropdownItem(h, item);
+      return 'children' in item
+        ? this.renderDropdownGroup(h, item)
+        : this.renderDropdownItem(h, item);
     }));
   }
   /**
@@ -69,6 +71,24 @@ export class VegaRTEToolbarButtonRenderer {
       prefixIcon: item.icon,
     });
   }
+  /**
+   * Renders a dropdown item for the toolbar button.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {RTEDropdownListGroup} item - The dropdown group.
+   * @returns {VegaRTERenderResult} - The render result for the dropdown item.
+   */
+  renderDropdownGroup(h, item) {
+    return h('vega-dropdown-group', {
+      key: item.key,
+      label: item.label,
+      divide: false,
+    }, item.children.map((child) => {
+      return 'children' in child
+        ? this.renderDropdownGroup(h, child)
+        : this.renderDropdownItem(h, child);
+    }));
+  }
   /**
    * Renders a common toolbar button with optional icon, label, and arrow icon.
    *
@@ -147,4 +167,25 @@ export class VegaRTEToolbarButtonRenderer {
   preventDefault(e) {
     e.preventDefault();
   }
+  /**
+   * Recursively searches for a dropdown list item by its key.
+   *
+   * @param {(RTEDropdownListItem | RTEDropdownListGroup)[]} itemList The list of dropdown items or groups to search through.
+   * @param {string} key The key of the item to find.
+   * @returns {Nullable<RTEDropdownListItem>} The dropdown list item if found, otherwise null.
+   */
+  getListItemByKey(itemList, key) {
+    for (const item of itemList) {
+      if ('children' in item) {
+        const foundItem = this.getListItemByKey(item.children, key);
+        if (foundItem) {
+          return foundItem;
+        }
+      }
+      else if (item.key === key) {
+        return item;
+      }
+    }
+    return null;
+  }
 }