@globalpayments/vega 2.66.0 → 2.68.0

package/dist/collection/components/vega-rich-text-editor/extensions/functions/renderers/logic-control-block-renderer.js

@@ -0,0 +1,20 @@
+import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
+/**
+ * Renders a logic control block in the rich text editor.
+ */
+export class RTELogicControlBlockRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData) {
+    return h('div', {
+      key: renderData.id,
+      class: 'statementsyntax',
+      ref: this.useRef(renderData),
+    }, h('span', {
+      key: `${renderData.id}-1`,
+      contenteditable: 'false',
+      ref: this.useRef(renderData.children[0]),
+    }, renderData.statementText));
+  }
+}

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

@@ -84,7 +84,7 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
    * @returns {string} The label of the language, or the key if not found.
    */
   getLanguageLabelByKey(key) {
-    const language = this.languageList.find((item) => item.key === key);
+    const language = this.getListItemByKey(this.languageList, key);
     return language.label;
   }
 }

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

@@ -10,6 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
   return t;
 };
 import { generateUUID } from '../../../../utils/misc';
+import { RTETextNode } from '../../dto/nodes/text-node';
+import htmlElementToAnnotationGenerator from '../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
 import { ElementToDTOStrategy } from '../../slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract';
 /**
  * Strategy to convert <span class="token" token-key="...">...</span> to a token node
@@ -34,7 +36,7 @@ export class SpanToTokenNodeStrategy extends ElementToDTOStrategy {
     const element = elementsArray[0];
     const tokenKey = element.getAttribute('token-key');
     const text = element.textContent;
-    const annotations = this.generateTextStyleAnnotations(element);
+    const annotations = htmlElementToAnnotationGenerator.generate(RTETextNode, element);
     // Exclude customAttribute and customClass from annotations
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { customAttribute, customClass } = annotations, restAnnotations = __rest(annotations, ["customAttribute", "customClass"]);

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

@@ -23,7 +23,7 @@ export class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
       'template-token-key': token,
       'token-key': token,
       'contenteditable': 'false',
-      'style': this.getStyle(node),
+      'style': node.getStyles(),
       'class': `token ${node.getClasses()}`,
       'ref': this.useRef(node),
       // eslint-disable-next-line jsdoc/require-jsdoc
@@ -44,13 +44,12 @@ export class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
     this.extensionContext = context;
   }
   /**
-   * Get the style for the token element.
+   * Override to inject RTE scope styles for the token node.
    *
-   * @param {RTETokenNode} node - The token node.
-   * @returns {Record<string, string>} The style object for the token element.
+   * @returns {string} The CSS styles for the token node.
    */
-  getStyle(node) {
-    return Object.assign(Object.assign({}, node.getStyles()), { backgroundColor: 'var(--v-bg-status-info, #CDD1D3)', padding: '0 2px', margin: '0 1px' });
+  injectRTEScopeStyles() {
+    return `span[token-key]{padding: 0 2px; margin: 0 1px; background-color: rgba(var(--v-bg-status-info, 205,209,211))}`;
   }
   /**
    * Handle the click event on the token element.

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

@@ -65,7 +65,7 @@ export class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
    * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
    */
   handleDropdownClick(itemKey, editorContext) {
-    const token = this.tokenList.find((t) => t.key === itemKey);
+    const token = this.getListItemByKey(this.tokenList, itemKey);
     const { rteRange } = editorContext;
     const { startNode } = rteRange;
     if (startNode && startNode.parent) {

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

@@ -1,3 +1,4 @@
+import htmlElementToAnnotationGenerator from './slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
 /* istanbul ignore file */
 export { VegaRTEContent } from './dto/content-state';
 // block and node
@@ -16,23 +17,29 @@ export { RTETokenNodeRenderer } from './extensions/tokens/token-node-renderer';
 export { VegaRTETokenExtension } from './extensions/tokens/token-extension';
 export { RTELanguageToolbarButtonRenderer } from './extensions/languages/language-toolbar-button-renderer';
 export { VegaRTELanguageExtension } from './extensions/languages/language-extension';
+export { VegaRTEFunctionExtension } from './extensions/functions/function-extension';
 // actions
-export { ModifyContentAction } from './dto/actions/modify-content-action.abstract';
+export { ModifyContentAction, ModifyContentActionType } from './dto/actions/modify-content-action.abstract';
 export { AppendChildrenAction } from './dto/actions/append-child-nodes-action';
 export { RemoveChildrenAction } from './dto/actions/remove-child-action';
 export { InsertChildrenAfterAction } from './dto/actions/insert-children-after-block';
 export { InsertChildrenBeforeAction } from './dto/actions/insert-children-before-block';
 export { InsertNodeToNearestRootAction } from './dto/actions/insert-node-to-nearest-root-action';
 export { UpdateCursorPositionAction } from './dto/actions/update-cursor-position-action';
+export { InsertNewParagraphAction } from './dto/actions/insert-new-paragraph-action';
 // annotations
 export { CustomAttributeAnnotation } from './dto/annotations/custom-attribute-annotation';
 export { CustomClassAnnotation } from './dto/annotations/custom-class-annotation';
 export { CustomStyleAnnotation } from './dto/annotations/custom-style-annotation';
+export { RTEAnnotationStyle } from './dto/annotations/annotation-style';
 // modify content strategies
 export { ActionHandleStrategy } from './dto/action-handle-strategies/action-handle-strategy.abstract';
+export { ActionHandlerInterceptor, } from './dto/action-handle-strategies/action-handle-interceptor.abstract';
 // rteRange
 export { RTERange } from './dto/range';
 // element to DTO strategy
 export { ElementToDTOStrategy } from './slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract';
+export { BlockToRTEBlockStrategyAbstract } from './slimmers/controllers/helper/element-to-dto-strategy/block-to-rte-block-strategy.abstract';
+export { htmlElementToAnnotationGenerator };
 // preset toolbar buttons
 export { VegaRTEPresetToolbarItems } from './constants/constant';

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/delete-selected-nodes-controller.js

@@ -16,6 +16,7 @@ import { generateUUID } from '../../../../utils/misc';
 import { AppendChildrenAction } from '../../dto/actions/append-child-nodes-action';
 import { UpdateTextAction } from '../../dto/actions/update-text-action';
 import { RTECodeBlockNode } from '../../dto/nodes/code-block-node';
+import { VegaRTEContent } from '../../dto/content-state';
 /**
  * The `DeleteSelectedNodesController` class provides methods to delete selected nodes.
  */
@@ -91,7 +92,14 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
       // the image block will be deleted when the image is the only item
       if (startNode.parent.children.length === 1) {
         const paragraph = this.createEmptyParagraph();
-        startNode.parent.parent.apply(new InsertChildrenBeforeAction(startNode.parent, paragraph));
+        let shouldDeleteBlock = startNode.parent;
+        // if the node grand parent is html block and the html block only has one child, we need insert the paragraph before the html block to jump out the html block
+        if (shouldDeleteBlock.parent &&
+          !(shouldDeleteBlock.parent instanceof VegaRTEContent) &&
+          shouldDeleteBlock.parent.children.length === 1) {
+          shouldDeleteBlock = shouldDeleteBlock.parent;
+        }
+        shouldDeleteBlock.parent.apply(new InsertChildrenBeforeAction(shouldDeleteBlock, paragraph));
         startNode.parent.apply(new RemoveChildrenAction(startNode));
         return paragraph.children[0];
       }

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

@@ -1,20 +1,8 @@
 import { isNonNullable } from '../../../../../../types/type-guard';
-import htmlElementToAnnotationGenerator from './annotation-handler/html-element-to-annotation-generator';
-import { RTETextNode } from '../../../../dto/nodes/text-node';
 /**
  * Abstract class to define strategies for processing HTML elements
  */
 export class ElementToDTOStrategy {
-  /**
-   * Convert element style attributes to text annotations.
-   *
-   * @param {HTMLElement} element - Current html element.
-   * @param {HtmlElementToAnnotationGenerateOptions} options - Options for generating annotations.
-   * @returns {VegaRTEAnnotations} - Generated annotations.
-   */
-  generateTextStyleAnnotations(element, options) {
-    return htmlElementToAnnotationGenerator.generate(RTETextNode, element, options);
-  }
 }
 /**
  * Class to represent the output of a strategy applied to HTML elements

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

@@ -57,7 +57,9 @@ export class InsertLineBreakHandler extends BaseHandler {
     if (currentBlock) {
       const lineBreakAction = new LineBreakSingleBlockAction(cursorNode, range.startOffset);
       currentBlock.apply(lineBreakAction);
-      this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
+      if (lineBreakAction.lineBreakNode) {
+        this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
+      }
     }
   }
   /**

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

@@ -1,10 +1,8 @@
 import { BaseHandler } from './base-handler';
 import { AppendChildrenAction } from '../../../../dto/actions/append-child-nodes-action';
-import { InsertChildrenAfterAction } from '../../../../dto/actions/insert-children-after-block';
-import { SplitBlockWithNodeAction } from '../../../../dto/actions/split-block-with-node-action';
-import { InsertChildrenBeforeAction } from '../../../../dto/actions/insert-children-before-block';
 import ElementToDtoStrategyProcessor from '../element-to-dto-strategy/element-to-dto-strategy-processor';
 import { StylePreservator } from '../../../../../../helpers/csp/styles-preservator';
+import { PasteContentAction } from '../../../../dto/actions/paste-content-action';
 /**
  * Handle user paste
  */
@@ -19,6 +17,7 @@ export class InsertPasteHandler extends BaseHandler {
     const { startContainer } = this.selectionController.getCurrentRange();
     if (this.isRootContainer(startContainer)) {
       this.insertBlocksToRoot(blocks);
+      // TODO: Need to check below logic, it seems not correct https://gethired.atlassian.net/browse/VD-7779
     }
     else if (this.isEmptyParagraph(startContainer)) {
       this.insertBlocksBeforeEmptyBlock(blocks);
@@ -43,12 +42,12 @@ export class InsertPasteHandler extends BaseHandler {
   insertBlocksToContent(blocks) {
     const cursorNode = this.removeSelectionRange();
     if (cursorNode && cursorNode.parent) {
-      const currentBlock = cursorNode.parent;
       const { startOffset } = this.selectionController.getCurrentRange();
-      const breakAction = new SplitBlockWithNodeAction(cursorNode, startOffset);
-      currentBlock.apply(breakAction);
-      currentBlock.parent.apply(new InsertChildrenAfterAction(currentBlock, ...blocks));
-      this.switchCaretPositionToNextElement(breakAction.newBlock);
+      const pasteAction = new PasteContentAction(blocks, cursorNode, startOffset);
+      cursorNode.parent.apply(pasteAction);
+      if (pasteAction.futureFocusBlock) {
+        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock);
+      }
     }
   }
   /**
@@ -61,8 +60,11 @@ export class InsertPasteHandler extends BaseHandler {
     /* istanbul ignore next */
     const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parent;
     if (currentBlock) {
-      currentBlock.parent.apply(new InsertChildrenBeforeAction(currentBlock, ...blocks));
-      this.switchCaretPositionToNextElement(currentBlock);
+      const pasteAction = new PasteContentAction(blocks, currentBlock.children[0], 0, this.selectionController.getCurrentRange());
+      currentBlock.apply(pasteAction);
+      if (pasteAction.futureFocusBlock) {
+        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock);
+      }
     }
   }
   /**

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

@@ -10,7 +10,6 @@ import { MapToComponentField } from 'vega-slimmer/core';
 import { BoldAnnotationAction } from '../../../dto/actions/bold-annotation-action';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { RTETextNode } from '../../../dto/nodes/text-node';
-import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class BoldToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -40,9 +39,8 @@ export class BoldToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return node instanceof RTECodeBlockNode ||
-          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          this.shouldDisabledToolbar(node, BoldAnnotationAction.name);
       }));
   }
 }

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

@@ -11,9 +11,9 @@ import ListUL from '../../../../assets/list-ul';
 import ListOL from '../../../../assets/list-ol';
 import { BulletsToolbarButtonSlimmer } from './bullets-toolbar-button-slimmer';
 import { NumbersToolbarButtonSlimmer } from './numbers-toolbar-button-slimmer';
-import { RTEImageNode } from '../../../../dto/nodes/image-node';
-import { RTECodeBlockNode } from '../../../../dto/nodes/code-block-node';
 import { VisualModeToolbarButtonSlimmer } from '../visual-mode-toolbar-button-slimmer.abstract';
+import { ActionHandleStrategyRegistry } from '../../../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { ModifyContentActionType } from '../../../../dto/actions/modify-content-action.abstract';
 export class BulletsNumbersToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
@@ -47,9 +47,34 @@ export class BulletsNumbersToolbarButtonSlimmer extends VisualModeToolbarButtonS
     return false;
   }
   isDisabled() {
-    const selectedNodes = this.selectionController.getSelectedNodes();
-    return (super.isDisabled() ||
-      selectedNodes.some((node) => node instanceof RTEImageNode || node instanceof RTECodeBlockNode));
+    return super.isDisabled() || this.shouldDisabledListToolbar();
+  }
+  shouldDisabledListToolbar() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return selectedBlocks.some((block) => {
+      return (block &&
+        (this.unableToConvertListOrParagraph(block) || this.unableToInsertBlock(block.parent)));
+    });
+  }
+  /**
+   * Check if unable to insert blocks before or after the given block.
+   *
+   * @param {RTEBlock | VegaRTEContent} block - The block to check.
+   * @returns {boolean} - Boolean result.
+   */
+  unableToInsertBlock(block) {
+    return !(ActionHandleStrategyRegistry.canHandle(ModifyContentActionType.INSERT_CHILDREN_AFTER, block) ||
+      ActionHandleStrategyRegistry.canHandle(ModifyContentActionType.INSERT_CHILDREN_BEFORE, block));
+  }
+  /**
+   * Check if unable to convert the block to list or paragraph.
+   *
+   * @param {RTEBlock} block - The block to check.
+   * @returns {boolean} - Boolean result.
+   */
+  unableToConvertListOrParagraph(block) {
+    return (!ActionHandleStrategyRegistry.canHandle(ModifyContentActionType.TRANSFORM_LIST_BLOCK, block) &&
+      !ActionHandleStrategyRegistry.canHandle(ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK, block.parent));
   }
 }
 (() => {

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

@@ -9,8 +9,6 @@ import TextSlash from '../../../assets/text-slash';
 import { RTETextNode } from '../../../dto/nodes/text-node';
 import { MapToComponentField } from 'vega-slimmer/core';
 import { ClearFormattingAnnotationAction } from '../../../dto/actions/clear-formatting-annotation-action';
-import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
-import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class ClearStyleToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -35,8 +33,7 @@ export class ClearStyleToolbarButtonSlimmer extends VisualModeToolbarButtonSlimm
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node instanceof RTECodeBlockNode ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
+      selectedNodes.some((node) => this.shouldDisabledToolbar(node, ClearFormattingAnnotationAction.name)));
   }
 }
 (() => {

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

@@ -9,6 +9,10 @@ import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-ic
 import { MapToComponentField } from 'vega-slimmer/core';
 import { TransformToCodeBlockAction } from '../../../dto/actions/transform-to-code-block-action';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
+import { ModifyContentActionType } from '../../../dto/actions/modify-content-action.abstract';
+import { RTECodeBlock } from '../../../dto/blocks/code-block';
+import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { RTETextBlock } from '../../../dto/blocks/text-block';
 /**
  * The code block toolbar button slimmer.
  */
@@ -48,7 +52,12 @@ export class CodeBlockToolbarButtonSlimmer extends VisualModeToolbarButtonSlimme
   isDisabled() {
     const selectBlocks = this.selectionController.getSelectedBlocks();
     return (super.isDisabled() ||
-      selectBlocks.some((block) => block.type === 'image' || block.type === 'list-item'));
+      selectBlocks.some((block) => !(block instanceof RTECodeBlock) && this.shouldDisabledCodeBlockToolbar(block)));
+  }
+  shouldDisabledCodeBlockToolbar(block) {
+    return (block &&
+      !(block instanceof RTETextBlock &&
+        ActionHandleStrategyRegistry.canHandle(ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK, block.parent)));
   }
 }
 (() => {

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

@@ -10,7 +10,6 @@ import { RTETextNode } from '../../../dto/nodes/text-node';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { MapToComponentField } from 'vega-slimmer/core';
 import { CodeAnnotationAction } from '../../../dto/actions/code-annotation-action';
-import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class CodeToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -37,9 +36,8 @@ export class CodeToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node instanceof RTECodeBlockNode ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
+      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
+        this.shouldDisabledToolbar(node, CodeAnnotationAction.name)));
   }
 }
 (() => {

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

@@ -11,6 +11,7 @@ import { CenterAlignToolbarButtonSlimmer } from './center-align-toolbar-button-s
 import { RightAlignToolbarButtonSlimmer } from './right-align-toolbar-button-slimmer';
 import { JustifyAlignToolbarButtonSlimmer } from './justify-align-toolbar-button-slimmer';
 import { VisualModeToolbarButtonSlimmer } from '../visual-mode-toolbar-button-slimmer.abstract';
+import { HorizontalAlignmentAnnotationAction } from '../../../../dto/actions/horizontal-alignment-annotation-action';
 export class HorizontalAlignmentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
@@ -60,7 +61,7 @@ export class HorizontalAlignmentToolbarButtonSlimmer extends VisualModeToolbarBu
     return (super.isDisabled() ||
       this.selectionController
         .getSelectedBlocks()
-        .some((block) => block.type === 'code-block'));
+        .some((block) => this.shouldDisabledToolbar(block, HorizontalAlignmentAnnotationAction.name)));
   }
 }
 __decorate([

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

@@ -11,6 +11,7 @@ import { MapToComponentField } from 'vega-slimmer/core';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { ImageUpdateUrlAction } from '../../../dto/actions/image-update-url-action';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
+import { ModifyContentActionType } from '../../../dto/actions/modify-content-action.abstract';
 export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
@@ -56,8 +57,10 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
+    const selectedBlock = this.selectionController.getSelectedBlocks()[0];
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK)));
+      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK)) ||
+      this.shouldDisabledToolbar(selectedBlock, ModifyContentActionType.INSERT_IMAGE_TO_BLOCK));
   }
 }
 (() => {

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

@@ -10,7 +10,6 @@ import { MapToComponentField } from 'vega-slimmer/core';
 import { ItalicAnnotationAction } from '../../../dto/actions/italic-annotation-action';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { RTETextNode } from '../../../dto/nodes/text-node';
-import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class ItalicToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -38,9 +37,8 @@ export class ItalicToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return node instanceof RTECodeBlockNode ||
-          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          this.shouldDisabledToolbar(node, ItalicAnnotationAction.name);
       }));
   }
 }

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

@@ -9,7 +9,6 @@ import outdent from '../../../assets/outdent';
 import { BlockAnnotationTypeEnum } from '../../../dto/annotations/block-annotation.abstract';
 import { IndentAnnotationAction } from '../../../dto/actions/indent-annotation-action';
 import { MapToComponentField } from 'vega-slimmer/core';
-import { RTEImageNode } from '../../../dto/nodes/image-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class LessIndentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -25,10 +24,8 @@ export class LessIndentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimm
   }
   isDisabled() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
-    const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => node.type === 'list-item' || node.type === 'code-block') ||
-      selectedNodes.some((node) => node instanceof RTEImageNode));
+      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, IndentAnnotationAction.name)));
   }
   onClick() {
     this.selectionController.getSelectedBlocks().forEach((item) => {

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

@@ -10,14 +10,12 @@ import { h } from '@stencil/core';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 import { MapToComponentField } from 'vega-slimmer/core';
-import { RTETextNode } from '../../../dto/nodes/text-node';
 import { LinkAnnotationAction } from '../../../dto/actions/link-annotation-action';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { SelectionChangeAction } from '../../../dto/actions/selection-change-action';
 import { generateUUID } from '../../../../../utils/misc';
 import { waitForComponentDidRender } from '../../../../../helpers/common';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
-import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
 export class LinkToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
@@ -65,8 +63,7 @@ export class LinkToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       selectedBlocks.length > 1 ||
       selectedNodes.some((node) => {
         var _a;
-        return !(node instanceof RTETextNode &&
-          ActionHandleStrategyRegistry.canHandle(LinkAnnotationAction.name, node)) ||
+        return this.shouldDisabledToolbar(node, LinkAnnotationAction.name) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
           ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code);
       }));

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

@@ -9,7 +9,6 @@ import indent from '../../../assets/indent';
 import { MapToComponentField } from 'vega-slimmer/core';
 import { IndentAnnotationAction } from '../../../dto/actions/indent-annotation-action';
 import { BlockAnnotationTypeEnum } from '../../../dto/annotations/block-annotation.abstract';
-import { RTEImageNode } from '../../../dto/nodes/image-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class MoreIndentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -25,10 +24,8 @@ export class MoreIndentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimm
   }
   isDisabled() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
-    const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => node.type === 'list-item' || node.type === 'code-block') ||
-      selectedNodes.some((node) => node instanceof RTEImageNode));
+      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, IndentAnnotationAction.name)));
   }
   onClick() {
     this.selectionController.getSelectedBlocks().forEach((item) => {

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

@@ -10,7 +10,6 @@ import { RTETextNode } from '../../../dto/nodes/text-node';
 import { MapToComponentField } from 'vega-slimmer/core';
 import { StrikethroughAnnotationAction } from '../../../dto/actions/strikethrough-annotation-action';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
-import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class StrikethroughToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -41,9 +40,8 @@ export class StrikethroughToolbarButtonSlimmer extends VisualModeToolbarButtonSl
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return node instanceof RTECodeBlockNode ||
-          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          this.shouldDisabledToolbar(node, StrikethroughAnnotationAction.name);
       }));
   }
 }

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

@@ -15,7 +15,6 @@ import { VegaChange, VegaPopoverHide, VegaPopoverShow, } from '../../../../../he
 import { VegaDarkModeStyleController } from '../../../../../helpers/theme/controllers/dark-mode-style-controller';
 import { RTE_TEXT_COLORS } from '../../../constants/constant';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
-import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class TextColorToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -109,10 +108,9 @@ export class TextColorToolbarButtonSlimmer extends VisualModeToolbarButtonSlimme
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return node instanceof RTECodeBlockNode ||
-          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
-          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+          this.shouldDisabledToolbar(node, TextColorAnnotationAction.name);
       }));
   }
 }

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

@@ -12,11 +12,9 @@ import { TextStyleAnnotationAction } from '../../../dto/actions/text-style-annot
 import { RTETextBlock } from '../../../dto/blocks/text-block';
 import { TextStyleAnnotation } from '../../../dto/annotations/text-style-annotation';
 import { BoldAnnotation } from '../../../dto/annotations/bold-annotation';
-import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { BlockAnnotationTypeEnum } from '../../../dto/annotations/block-annotation.abstract';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaDropdownClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
-import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class TextStylesToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -67,10 +65,9 @@ export class TextStylesToolbarButtonSlimmer extends VisualModeToolbarButtonSlimm
     return false;
   }
   isDisabled() {
-    const selectedNodes = this.selectionController.getSelectedNodes();
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node instanceof RTECodeBlockNode ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
+      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, TextStyleAnnotationAction.name)));
   }
   addDropdownObserver(dropdownRef) {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownClick, this.handleDropdownItemClick);

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

@@ -10,7 +10,6 @@ import { RTETextNode } from '../../../dto/nodes/text-node';
 import { MapToComponentField } from 'vega-slimmer/core';
 import { UnderlineAnnotationAction } from '../../../dto/actions/underline-annotation-action';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
-import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class UnderlineToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -41,9 +40,8 @@ export class UnderlineToolbarButtonSlimmer extends VisualModeToolbarButtonSlimme
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return node instanceof RTECodeBlockNode ||
-          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          this.shouldDisabledToolbar(node, UnderlineAnnotationAction.name);
       }));
   }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/visual-mode-toolbar-button-slimmer.abstract.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { ToolbarButtonSlimmer } from './toolbar-button-slimmer.abstract';
 import { MapToComponentField } from 'vega-slimmer/core';
+import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
 /**
  * Abstract class for visual mode toolbar buttons, except for the source edit button.
  */
@@ -31,6 +32,16 @@ export class VisualModeToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     return super.isDisabled() && !this.sourceView;
   }
+  /**
+   * Check if the node support text annotation
+   *
+   * @param {Nullable< RTENode| RTEBlock>} node - The RTE node to check
+   * @param {string} annotationActionName - The annotation name to check
+   * @returns {boolean} - True if the node support text annotation, false otherwise
+   */
+  shouldDisabledToolbar(node, annotationActionName) {
+    return node && !ActionHandleStrategyRegistry.canHandle(annotationActionName, node);
+  }
 }
 __decorate([
   MapToComponentField()