@globalpayments/vega 2.49.1 → 2.51.0

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/selection-controller.js

@@ -4,15 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { debounce } from '../../../../utils/timer';
 import { RTENode } from '../../dto/nodes/node.abstract';
 import { SelectionChangeAction } from '../../dto/actions/selection-change-action';
 import stateEntityRenderingRegistry from './state-entity-rendering-registry';
 import { InternalAnnotationTypeEnum } from '../../dto/annotations/annotation.abstract';
 import ShadowSelectionPolyfill from '../../../../polyfill/shadow-selection/shadow-selection-polyfill';
-import { SynchronizeTaskQueue } from '../../../../helpers/queue/synchronize-task-queue';
-import { LogUtility } from '../../../../utils/log';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalRichTextEditorSelectionRangeChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
@@ -21,25 +19,22 @@ import { RTETextNode } from '../../dto/nodes/text-node';
 import { ZERO_WIDTH_SPACE } from '../../constants/constant';
 import { RTERange } from '../../dto/range';
 import { RTESelectionState } from '../../dto/selection-state';
+import { AutoRunWhenReRenderTaskQueueSlimmer } from '../../../../helpers/slimmers/auto-run-when-re-render-task-queue-slimmer.abstract';
+import { RTECodeBlock } from '../../dto/blocks/code-block';
+import { RTECodeBlockNode } from '../../dto/nodes/code-block-node';
 /**
  * The text selection controller
  */
-export class SelectionController extends VegaSlimmer {
+export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
   constructor() {
-    super(...arguments);
+    super(1);
     this.currentRange = new RTERange();
-    this.updateCaretPositionTaskQueue = new SynchronizeTaskQueue(1);
     this.handleSelectionWithDebounce = debounce(this.handleSelectionChange, SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME, this);
     this.pendingRestoreSelectionNodes = [];
     /**
-     * Sets the next selection state with specified start and end nodes, offsets, and a timestamp.
-     *
-     * Example:
-     * Before insert text start offset is 0, the new start offset should update to 1
-     * Before delete text start offset is 1, the new start offset should update to 0
-     *
+     * The method invoke after the component re-render.
      */
-    this.createUpdateSelectionRangeTask = async () => {
+    this.doTask = async () => {
       // add await Promise.resolve to put the code behind to a micro task
       await Promise.resolve();
       const range = this.currentRange.toNativeRange();
@@ -64,6 +59,7 @@ export class SelectionController extends VegaSlimmer {
    * Component lifecycle - [componentDidLoad]{@link VegaRichTextEditor.componentDidLoad}
    */
   componentDidLoad() {
+    // eslint-disable-next-line no-restricted-globals
     document.addEventListener('selectionchange', this.handleSelectionWithDebounce);
   }
   /**
@@ -73,14 +69,6 @@ export class SelectionController extends VegaSlimmer {
     this.prepareRestoreSelectionState();
     this.restoreSelection();
   }
-  /**
-   * Update the caret position after the component re-render
-   */
-  async updateCaretPosition() {
-    if (this.updateCaretPositionTaskQueue.queue.length) {
-      await this.updateCaretPositionTaskQueue.runTask();
-    }
-  }
   /**
    * Get the current RTE selection range
    *
@@ -123,20 +111,20 @@ export class SelectionController extends VegaSlimmer {
    * @param {boolean} [immediatelyRun] - Should the task run immediately. default is false
    */
   enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset, immediatelyRun = false) {
-    endNode = endNode || startNode;
-    endOffset = endOffset || endOffset === 0 ? endOffset : startOffset;
-    this.currentRange = this.currentRange.updateRTERange({ startNode, endNode, startOffset, endOffset });
-    void this.updateCaretPositionTaskQueue.enqueue({
-      /** Add task to the queue and run it until component did render */
-      run: async () => {
-        try {
-          await this.createUpdateSelectionRangeTask();
-        }
-        catch (e) {
-          LogUtility.error('Set range error.', e);
-        }
-      },
-    }, immediatelyRun);
+    if (startNode instanceof RTECodeBlockNode) {
+      this.internalCodeBlockSelectionController.enqueueSelectionRangeFutureState(startNode, startOffset, immediatelyRun);
+    }
+    else {
+      endNode = endNode || startNode;
+      endOffset = endOffset || endOffset === 0 ? endOffset : startOffset;
+      this.currentRange = this.currentRange.updateRTERange({
+        startNode,
+        endNode,
+        startOffset,
+        endOffset,
+      });
+      super.enqueueTheTaskIntoQueue(immediatelyRun);
+    }
   }
   /**
    * Set selection with a new range
@@ -151,6 +139,15 @@ export class SelectionController extends VegaSlimmer {
       this.saveSelection();
     }
   }
+  /**
+   * Get the rich text content selected range
+   *
+   * @returns {Selection} A [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object
+   */
+  getSelection() {
+    const richTextContentRef = this.vegaRichTextEditorRenderer.getRichTextContentRef();
+    return ShadowSelectionPolyfill.getSelection(richTextContentRef.shadowRoot);
+  }
   /**
    * Save the current selection range detail
    */
@@ -159,7 +156,7 @@ export class SelectionController extends VegaSlimmer {
     // The range is out of date if the queue is not empty, or the range is update by the composition text insert, so we should not update the RTERange
     if (selection &&
       selection.rangeCount > 0 &&
-      this.updateCaretPositionTaskQueue.queue.length === 0 &&
+      this.autoRunTaskQueue.queue.length === 0 &&
       !this.insertCompositionTextController.isComposing()) {
       const range = selection.getRangeAt(0);
       const { startContainer: startNode, endContainer: endNode, startOffset, endOffset } = range;
@@ -181,15 +178,6 @@ export class SelectionController extends VegaSlimmer {
       this.selectionState = null;
     }
   }
-  /**
-   * Get the rich text content selected range
-   *
-   * @returns {Selection} A [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object
-   */
-  getSelection() {
-    const richTextContentRef = this.vegaRichTextEditorRenderer.getRichTextContentRef();
-    return ShadowSelectionPolyfill.getSelection(richTextContentRef.shadowRoot);
-  }
   /**
    * Get selected rich text
    */
@@ -226,6 +214,12 @@ export class SelectionController extends VegaSlimmer {
           ? node.querySelector('img')
           : node;
         const nodeEntity = stateEntityRenderingRegistry.getEntityByDOM(entityElement);
+        if (nodeEntity instanceof RTECodeBlock) {
+          if (this.internalCodeBlockSelectionController.isCodeBlockSelected(nodeEntity, range)) {
+            selectedNodes.push(nodeEntity.nodes[0]);
+          }
+          return;
+        }
         if (nodeEntity instanceof RTENode) {
           selectedNodes.push(nodeEntity);
           return;
@@ -245,10 +239,13 @@ export class SelectionController extends VegaSlimmer {
     this.getSelectedNodes().forEach((node) => node.apply(new SelectionChangeAction(range)));
   }
   /**
-   * Clear the selection map
+   * Clear the selection map.
+   * The code node don't need clear here, because the code node will manager the selection state itself. `code-node-renderer.tsx#handleSelectionChange`
    */
   clearSelectionMap() {
-    this.getSelectedNodes().forEach((node) => {
+    this.getSelectedNodes()
+      .filter((node) => node.type !== 'CODE_BLOCK_NODE')
+      .forEach((node) => {
       node.annotationMap.delete(InternalAnnotationTypeEnum.SELECTION_RANGE);
     });
     this.selectionMap = new Map();
@@ -266,7 +263,12 @@ export class SelectionController extends VegaSlimmer {
    */
   registerSelectionRangeChangeObserver() {
     this.selectionRangeChangeObserver = new Observer(this.isAcceptableSelectionRangeChange.bind(this), (payload) => {
-      this.pendingRestoreSelectionNodes.push(payload.node);
+      if (!payload.updateDirectly) {
+        this.pendingRestoreSelectionNodes.push(payload.node);
+      }
+      else {
+        this.enqueueSelectionRangeFutureState(payload.node, payload.offset);
+      }
     });
     ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
   }
@@ -280,7 +282,9 @@ export class SelectionController extends VegaSlimmer {
         ? this.pendingRestoreSelectionNodes[this.pendingRestoreSelectionNodes.length - 1]
         : startNode;
       const { startOffset, endOffset, endContainer, startContainer } = this.currentRange;
-      const nodesInCurrentRange = stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
+      const nodesInCurrentRange = startContainer &&
+        stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
+        endContainer &&
         stateEntityRenderingRegistry.getDOMByEntity(endNode) === endContainer.parentElement;
       if (nodesInCurrentRange) {
         this.currentRange = this.currentRange.updateRTERange({
@@ -329,6 +333,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "historyController", void 0);
+__decorate([
+  MapToComponentField()
+], SelectionController.prototype, "internalCodeBlockSelectionController", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], SelectionController.prototype, "connectedCallback", null);
@@ -341,6 +348,3 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchValueUpdate')
 ], SelectionController.prototype, "watchValueUpdate", null);
-__decorate([
-  MapToComponentMethod('componentDidUpdate')
-], SelectionController.prototype, "updateCaretPosition", null);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/user-input-controller.js

@@ -12,6 +12,7 @@ import { DeleteContentHandler } from './helper/input-event-handler/delete-conten
 import { VegaRTEContent } from '../../dto/content-state';
 import { InsertPasteHandler } from './helper/input-event-handler/insert-paste-handler';
 import { generateUUID } from '../../../../utils/misc';
+import { RTECodeBlock } from '../../dto/blocks/code-block';
 /** Used to monitoring the user input actions by event listener */
 export class UserInputController extends VegaSlimmer {
   constructor() {
@@ -31,7 +32,8 @@ export class UserInputController extends VegaSlimmer {
       e.preventDefault();
       this.initValueIfEmpty();
       // The insertCompositionText type input event can not be prevented, so we process the current action by insertCompositionTextController.
-      if (inputType === 'insertCompositionText') {
+      // If the focus node is a non-editable element, we do not process the input event.
+      if (inputType === 'insertCompositionText' || this.isFocusNodeNonEditable()) {
         return;
       }
       this.insertCompositionTextController.removeObserver();
@@ -59,7 +61,7 @@ export class UserInputController extends VegaSlimmer {
           break;
       }
       if (updateFlag) {
-        this.notifyComponentFlushValue();
+        void this.valueController.flushChanges(this.value);
       }
     };
   }
@@ -94,12 +96,6 @@ export class UserInputController extends VegaSlimmer {
     }
     return this.editableElementRef;
   }
-  /**
-   * Notifies a change manager with the host and value details and logs the current value.
-   */
-  notifyComponentFlushValue() {
-    void this.valueController.flushChanges(this.value);
-  }
   /**
    * Prevents the default behavior of a drag event.
    *
@@ -120,6 +116,23 @@ export class UserInputController extends VegaSlimmer {
       void this.valueController.flushChanges(VegaRTEContent.fromJSON(defaultParagraph));
     }
   }
+  /**
+   * The code block placeholder element is non-editable, so we need to check if the focus node is a code block placeholder element.
+   *
+   * @returns {boolean} - Returns true if the focus node is a code block placeholder element, otherwise false.
+   */
+  isFocusNodeNonEditable() {
+    const { startContainer, endContainer } = this.selectionController.getCurrentRange();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    if (startContainer && startContainer === endContainer && selectedNodes.length === 0) {
+      const focusElement = startContainer.nodeType === Node.ELEMENT_NODE
+        ? startContainer
+        : startContainer.parentElement;
+      return (focusElement &&
+        focusElement.classList.contains(RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME));
+    }
+    return false;
+  }
 }
 __decorate([
   MapToComponentField()

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

@@ -39,6 +39,8 @@ export class ToolbarRenderer extends VegaSlimmer {
           return this.bulletsNumbersToolbarButtonSlimmer;
         case 'horizontalAlignment':
           return this.horizontalAlignmentToolbarButtonSlimmer;
+        case 'codeBlock':
+          return this.codeBlockToolbarButtonSlimmer;
       }
     };
   }
@@ -95,3 +97,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "linkToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "codeBlockToolbarButtonSlimmer", void 0);

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

@@ -11,6 +11,7 @@ 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';
 export class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   constructor() {
     super({
@@ -39,7 +40,8 @@ export class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return node instanceof RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
       }));
   }

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

@@ -13,6 +13,7 @@ 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';
 export class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   constructor() {
     super({
@@ -47,7 +48,8 @@ export class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof RTEImageNode || node instanceof RTECodeBlockNode));
   }
 }
 (() => {

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

@@ -10,6 +10,7 @@ import { RTEListItemBlock } from '../../../../dto/blocks/list-item-block';
 import { RTEImageNode } from '../../../../dto/nodes/image-node';
 import { TransformListAction } from '../../../../dto/actions/transform-list-action';
 import { TransformParagraphAction } from '../../../../dto/actions/transform-paragraph-action';
+import { RTECodeBlockNode } from '../../../../dto/nodes/code-block-node';
 export class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   constructor() {
     super({
@@ -34,7 +35,8 @@ export class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof RTEImageNode || node instanceof RTECodeBlockNode));
   }
   isListType(selectedBlocks, type = 'bullet-list') {
     return (selectedBlocks.length > 0 &&

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

@@ -10,6 +10,7 @@ import { RTEListItemBlock } from '../../../../dto/blocks/list-item-block';
 import { RTEImageNode } from '../../../../dto/nodes/image-node';
 import { TransformListAction } from '../../../../dto/actions/transform-list-action';
 import { TransformParagraphAction } from '../../../../dto/actions/transform-paragraph-action';
+import { RTECodeBlockNode } from '../../../../dto/nodes/code-block-node';
 export class NumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   constructor() {
     super({
@@ -32,7 +33,8 @@ export class NumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof RTEImageNode || node instanceof RTECodeBlockNode));
   }
   isListType(selectedBlocks, type = 'number-list') {
     return (selectedBlocks.length > 0 &&

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

@@ -11,6 +11,7 @@ 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';
 export class ClearStyleToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   constructor() {
     super({
@@ -34,7 +35,8 @@ export class ClearStyleToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
+      selectedNodes.some((node) => node instanceof RTECodeBlockNode ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
 }
 (() => {

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

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ToolbarButtonSlimmer } from './toolbar-button-slimmer.abstract';
+import rectangleCode from '../../../assets/rectangle-code';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { TransformToCodeBlockAction } from '../../../dto/actions/transform-to-code-block-action';
+/**
+ * The code block toolbar button slimmer.
+ */
+export class CodeBlockToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'rectangle-code',
+      tooltip: { text: 'Code Block' },
+    });
+  }
+  /**
+   * The selected blocks should convert to a code block.
+   */
+  onClick() {
+    const selected = this.isSelected();
+    if (!selected) {
+      const selectedBlocks = this.selectionController.getSelectedBlocks();
+      const parentBlock = selectedBlocks[0].parent;
+      const transformToCodeBlockAction = new TransformToCodeBlockAction(selectedBlocks);
+      parentBlock.apply(transformToCodeBlockAction);
+      void this.valueController.flushChanges(this.value);
+      this.selectionController.enqueueSelectionRangeFutureState(transformToCodeBlockAction.newCodeBlock.nodes[0], 0);
+    }
+  }
+  /**
+   * The button will be selected if the selected blocks all code block.
+   *
+   * @returns {boolean} - The code block should selected or not.
+   */
+  isSelected() {
+    const selectBlocks = this.selectionController.getSelectedBlocks();
+    if (selectBlocks.length && selectBlocks.every((block) => block.type === 'code-block')) {
+      return true;
+    }
+    return false;
+  }
+  isDisabled() {
+    const selectBlocks = this.selectionController.getSelectedBlocks();
+    return (super.isDisabled() ||
+      selectBlocks.some((block) => block.type === 'image' || block.type === 'list-item'));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'rectangle-code': rectangleCode });
+})();
+__decorate([
+  MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "value", void 0);

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

@@ -11,6 +11,7 @@ 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';
 export class CodeToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   constructor() {
     super({
@@ -36,7 +37,8 @@ export class CodeToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
+      selectedNodes.some((node) => node instanceof RTECodeBlockNode ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
         node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
 }

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

@@ -56,6 +56,12 @@ export class HorizontalAlignmentToolbarButtonSlimmer extends ToolbarButtonSlimme
   isSelected() {
     return false;
   }
+  isDisabled() {
+    return (super.isDisabled() ||
+      this.selectionController
+        .getSelectedBlocks()
+        .some((block) => block.type === 'code-block'));
+  }
 }
 __decorate([
   MapToComponentField()

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

@@ -11,6 +11,7 @@ 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';
 export class ItalicToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   constructor() {
     super({
@@ -37,7 +38,8 @@ export class ItalicToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return node instanceof RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
       }));
   }

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

@@ -27,7 +27,7 @@ export class LessIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => node.type === 'list-item') ||
+      selectedBlocks.some((node) => node.type === 'list-item' || node.type === 'code-block') ||
       selectedNodes.some((node) => node instanceof RTEImageNode));
   }
   onClick() {

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

@@ -27,7 +27,7 @@ export class MoreIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => node.type === 'list-item') ||
+      selectedBlocks.some((node) => node.type === 'list-item' || node.type === 'code-block') ||
       selectedNodes.some((node) => node instanceof RTEImageNode));
   }
   onClick() {

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

@@ -11,6 +11,7 @@ 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';
 export class StrikethroughToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   constructor() {
     super({
@@ -40,7 +41,8 @@ export class StrikethroughToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return node instanceof RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
       }));
   }

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

@@ -16,6 +16,7 @@ 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';
 export class TextColorToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   constructor() {
     super({
@@ -108,7 +109,8 @@ export class TextColorToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return node instanceof RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
       }));

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

@@ -17,6 +17,7 @@ import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation
 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';
 export class TextStylesToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   constructor() {
     super({
@@ -68,7 +69,8 @@ export class TextStylesToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
+      selectedNodes.some((node) => node instanceof RTECodeBlockNode ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
   addDropdownObserver(dropdownRef) {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownClick, this.handleDropdownItemClick);

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

@@ -11,6 +11,7 @@ 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';
 export class UnderlineToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   constructor() {
     super({
@@ -40,7 +41,8 @@ export class UnderlineToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return node instanceof RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
       }));
   }

package/dist/collection/components/vega-rich-text-editor/test/dto/action-handle-strategies/code-block-strategy-registry.test.js

@@ -0,0 +1,21 @@
+import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { CodeNodeSetSelectionRangeAnnotationStrategy } from '../../../dto/action-handle-strategies/apply-annotation-strategies/code-node-set-selection-range-strategy';
+import { BlockRemoveNodeStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/block-remove-node-strategy';
+import { CodeBlockRemoveSelfStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/code-block-remove-self-strategy';
+import { SwitchOutFromCodeBlockStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/switch-out-from-code-block-strategy';
+import { UpdateCodeBlockStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/update-code-block-strategy';
+import { ModifyContentActionType } from '../../../dto/actions/modify-content-action.abstract';
+import { SelectionChangeAction } from '../../../dto/actions/selection-change-action';
+import { RTECodeBlock } from '../../../dto/blocks/code-block';
+import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
+test('RTECodeBlock action strategy should register properly', () => {
+  expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.DELETE_CODE_BLOCK, RTECodeBlock.name) instanceof CodeBlockRemoveSelfStrategy).toBeTruthy();
+  expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.SWITCH_OUT_FROM_CODE_BLOCK, RTECodeBlock.name) instanceof SwitchOutFromCodeBlockStrategy).toBeTruthy();
+  expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.DELETE_CHILD, RTECodeBlock.name) instanceof
+    BlockRemoveNodeStrategy).toBeTruthy();
+});
+test('RTECodeBlockNode action strategy should register properly', () => {
+  expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.UPDATE_CODE_BLOCK, RTECodeBlockNode.name) instanceof UpdateCodeBlockStrategy).toBeTruthy();
+  expect(ActionHandleStrategyRegistry.get(SelectionChangeAction.name, RTECodeBlockNode.name) instanceof
+    CodeNodeSetSelectionRangeAnnotationStrategy).toBeTruthy();
+});

package/dist/collection/components/vega-rich-text-editor/test/dto/action-handle-strategies/content-state-strategy-registry.test.js

@@ -3,6 +3,7 @@ import { BlockAppendBlocksStrategy } from '../../../dto/action-handle-strategies
 import { BlockInsertBlocksAfterStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/block-insert-blocks-after-strategy';
 import { BlockInsertBlocksBeforeStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/block-insert-blocks-before-strategy';
 import { BlockRemoveChildBlockStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/block-remove-child-block-strategy';
+import { BlockTransformToCodeBlockStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/block-transform-to-code-block-strategy';
 import { ModifyContentActionType } from '../../../dto/actions/modify-content-action.abstract';
 import { VegaRTEContent } from '../../../dto/content-state';
 test('VegaRTEContent action strategy should register properly', () => {
@@ -11,4 +12,5 @@ test('VegaRTEContent action strategy should register properly', () => {
   expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.APPEND_CHILD_NODES, VegaRTEContent.name) instanceof BlockAppendBlocksStrategy).toBeTruthy();
   expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.INSERT_BLOCKS_BEFORE, VegaRTEContent.name) instanceof BlockInsertBlocksBeforeStrategy).toBeTruthy();
   expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.INSERT_BLOCKS_AFTER, VegaRTEContent.name) instanceof BlockInsertBlocksAfterStrategy).toBeTruthy();
+  expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK, VegaRTEContent.name) instanceof BlockTransformToCodeBlockStrategy).toBeTruthy();
 });