@globalpayments/vega 2.49.1 → 2.51.0

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-dropdown-renderer.js

@@ -15,7 +15,7 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderContainer = () => {
-      return (h("div", { role: 'button', class: "vega-input-select-container", ref: (ref) => (this.inputSelectContainer = ref), tabIndex: 0, "aria-disabled": `${this.disabled}`, onKeyDown: createEnterKeyHandlerToTriggerClick(), onBlur: this.preventBlur },
+      return (h("div", { role: 'button', class: "vega-input-select-container", ref: (ref) => (this.inputSelectContainer = ref), tabIndex: 0, "aria-disabled": `${this.disabled}`, onKeyDown: createEnterKeyHandlerToTriggerClick(), onBlur: this.preventBlur, part: "select-container" },
         this.renderPrefixIcon(),
         this.renderSelectContainer(),
         this.renderToggleIcon()));
@@ -24,8 +24,8 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
       return this.vegaInputSelectPrefixIconRenderer.render();
     };
     this.renderToggleIcon = () => {
-      return (h("div", { class: "vega-input-select-toggle-icon" },
-        h("vega-icon", { icon: VegaInternalIconManager.getIconKey(this.isDropdownShow ? 'chevron-up' : 'chevron-down') })));
+      return (h("div", { class: "vega-input-select-toggle-icon", part: "toggle-icon-container" },
+        h("vega-icon", { part: "toggle-icon", icon: VegaInternalIconManager.getIconKey(this.isDropdownShow ? 'chevron-up' : 'chevron-down') })));
     };
     this.renderSelectContainer = () => {
       return (h("div", { class: "vega-input-select-select-container" },
@@ -44,10 +44,10 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
     this.renderSingleSelected = () => {
       const item = this.sourceController.getItem(this.value);
       if (item) {
-        return h("span", { class: "vega-input-select-selected" }, item.displayName);
+        return (h("span", { class: "vega-input-select-selected", part: "selected-box" }, item.displayName));
       }
       else {
-        return (h("div", { class: "vega-input-select-placeholder" }, this.translationSlimmer.t(this.placeholder)));
+        return (h("div", { class: "vega-input-select-placeholder", part: "placeholder" }, this.translationSlimmer.t(this.placeholder)));
       }
     };
     this.getVegaDropdownProperties = () => {

package/dist/collection/components/vega-loader-wrapper/slimmers/controllers/manage-vega-loader-wrapper-z-index-controller.js

@@ -24,6 +24,7 @@ export class ManageVegaLoaderWrapperZIndexController extends VegaSlimmer {
    * Sets the z-index level for the vega-loader-wrapper based on the target container.
    */
   setIndex() {
+    // eslint-disable-next-line no-restricted-globals
     const containerElement = document.querySelector(this.host.dataset.container);
     if (containerElement) {
       if (containerElement.tagName === 'BODY') {

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-backdrop-controller.js

@@ -31,12 +31,15 @@ export class VegaModalBackdropController extends VegaSlimmer {
   setBackdrop() {
     if (this.backdrop === 'none')
       return;
+    // eslint-disable-next-line no-restricted-globals
     let backdrop = document.querySelector('vega-backdrop.modal-backdrop');
     if (!backdrop) {
+      // eslint-disable-next-line no-restricted-globals
       backdrop = document.createElement('vega-backdrop');
       backdrop.classList.add('modal-backdrop');
       backdrop.color = VegaModalBackdropController.backdropColorMap[this.backdropColor];
       backdrop.visible = true;
+      // eslint-disable-next-line no-restricted-globals
       document.querySelector('body').append(backdrop);
     }
     this.backdropRef = backdrop;

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-open-state-controller.js

@@ -159,9 +159,11 @@ export class VegaModalOpenStateController extends VegaSlimmer {
       return;
     const openedModalStackLength = this.openedModalStackController.length();
     if (this.open && openedModalStackLength === 1) {
+      // eslint-disable-next-line no-restricted-globals
       document.body.classList.add('disable-scroll-in-desktop');
     }
     else if (!this.open && openedModalStackLength === 0) {
+      // eslint-disable-next-line no-restricted-globals
       document.body.classList.remove('disable-scroll-in-desktop');
     }
   }

package/dist/collection/components/vega-modal/slimmers/controllers/vega-nested-modal-controller.js

@@ -21,6 +21,7 @@ export class VegaNestedModalController extends VegaSlimmer {
    */
   appendNestedModalToBody() {
     this.host.querySelectorAll('vega-modal').forEach((modal) => {
+      // eslint-disable-next-line no-restricted-globals
       document.body.append(modal);
     });
   }

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-backdrop-controller.js

@@ -45,16 +45,19 @@ export class VegaLeftNavBackdropController extends PageResizeObserverSlimmer {
    */
   /* istanbul ignore next */
   createBackdrop() {
+    // eslint-disable-next-line no-restricted-globals
     const backdrop = document.createElement('vega-backdrop');
     backdrop.visible = false;
     backdrop.duration = 150;
     backdrop.addEventListener('vegaClick', () => {
       this.openStateController.setOpenState('close');
     });
+    // eslint-disable-next-line no-restricted-globals
     document.body.append(backdrop);
     return backdrop;
   }
   updateBackdropUI(state) {
+    // eslint-disable-next-line no-restricted-globals
     const mainContent = document.querySelector('vega-left-nav + .vega-left-nav-content');
     if (state === 'open') {
       if (mainContent && !this.shouldShowBackdrop()) {

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-open-state-controller.js

@@ -81,7 +81,9 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
    */
   /* istanbul ignore next */
   updateMainContentUI(state) {
+    // eslint-disable-next-line no-restricted-globals
     const bodyElement = document.querySelector('body');
+    // eslint-disable-next-line no-restricted-globals
     const mainContent = document.querySelector('vega-left-nav + .vega-left-nav-content');
     if (state === 'open') {
       this.host.style.display = 'flex';

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

@@ -12,10 +12,12 @@ import RTETextBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/b
 import RTEImageBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/image-block-renderer';
 import RTEListBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/list-block-renderer';
 import { VegaRTEContent } from '../../../vega-rich-text-editor/dto/content-state';
+import RTECodeBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/code-block-renderer';
 export class VegaRichTextContentRenderer extends VegaSlimmer {
   constructor() {
     super();
     this.blockRenderers = [
+      RTECodeBlockRenderer,
       RTETextBlockRenderer,
       RTEImageBlockRenderer,
       RTEListBlockRenderer,

package/dist/collection/components/vega-rich-text-content/vega-rich-text-content.css

@@ -133,4 +133,11 @@
   bottom: 0;
   left: 0;
   right: 0;
+}
+:host .rich-text-content .code-block-container {
+  margin-top: 22px;
+  margin-bottom: 22px;
+}
+:host .rich-text-content vega-code-block.focus {
+  outline: none;
 }

package/dist/collection/components/vega-rich-text-editor/assets/rectangle-code.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill='currentColor' d="M320.1 175L384.1 239C394.3 248.4 394.3 263.6 384.1 272.1L320.1 336.1C311.6 346.3 296.4 346.3 287 336.1C277.7 327.6 277.7 312.4 287 303L334.1 256L287 208.1C277.7 199.6 277.7 184.4 287 175C296.4 165.7 311.6 165.7 320.1 175V175zM177.9 256L224.1 303C234.3 312.4 234.3 327.6 224.1 336.1C215.6 346.3 200.4 346.3 191 336.1L127 272.1C117.7 263.6 117.7 248.4 127 239L191 175C200.4 165.7 215.6 165.7 224.1 175C234.3 184.4 234.3 199.6 224.1 208.1L177.9 256zM448 32C483.3 32 512 60.65 512 96V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H448zM448 80H64C55.16 80 48 87.16 48 96V416C48 424.8 55.16 432 64 432H448C456.8 432 464 424.8 464 416V96C464 87.16 456.8 80 448 80z"/></svg>`,
+};

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/apply-annotation-strategies/code-node-set-selection-range-strategy.js

@@ -0,0 +1,13 @@
+import { InternalAnnotationTypeEnum } from '../../annotations/annotation.abstract';
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Update the code block node annotation map strategy.
+ */
+export class CodeNodeSetSelectionRangeAnnotationStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    target.annotationMap.set(InternalAnnotationTypeEnum.SELECTION_RANGE, action.toAnnotation());
+  }
+}

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

@@ -52,7 +52,9 @@ export class BlockDeleteTextContentStrategy extends BlockDeleteNodeContentStrate
         if (startContainerNode.isEmpty()) {
           target.apply(new RemoveChildAction(startContainerNode));
         }
-        previousNode.parentBlock.apply(new MergeTwoBlocksNodesAction(target));
+        if (target.type === previousNode.parentBlock.type) {
+          previousNode.parentBlock.apply(new MergeTwoBlocksNodesAction(target));
+        }
       }
       else {
         if (this.isContentFirstNode(startContainerNode) && startContainerNode.isEmpty()) {

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

@@ -9,7 +9,7 @@ export class BlockRemoveNodeStrategy extends ActionHandleStrategy {
    * Remove the block if the block nodes is empty after delete the current node.
    *
    * @param {RemoveChildAction} action - The remove child action instance.
-   * @param {RTETextBlock | RTEImageBlock} target - The parent block of the node that will be removed.
+   * @param {RTEBlockWithNodes} target - The parent block of the node that will be removed.
    */
   handleAction(action, target) {
     const arrayFixed = target.nodes;

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

@@ -0,0 +1,48 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { InsertBlocksBeforeAction } from '../../actions/insert-blocks-before-block';
+import { RemoveChildAction } from '../../actions/remove-child-action';
+import { RTECodeBlock } from '../../blocks/code-block';
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Transform the selected text blocks to a code block strategy.
+ */
+export class BlockTransformToCodeBlockStrategy extends ActionHandleStrategy {
+  /**
+   * Get the all select text and create a new code block.
+   *
+   * @param {TransformToCodeBlockAction} action - The action instance.
+   * @param {VegaRTEContent} target - The block top parent instance.
+   */
+  handleAction(action, target) {
+    const selectedBlocks = action.selectedBlocks;
+    const codeBlock = new RTECodeBlock(generateUUID(), this.getCodeContent(selectedBlocks), 'plainText');
+    target.apply(new InsertBlocksBeforeAction(selectedBlocks[0], codeBlock));
+    action.newCodeBlock = codeBlock;
+    this.removeSelectBlocks(selectedBlocks, target);
+  }
+  /**
+   * Get the selected text block text content.
+   *
+   * @param {RTEBlock[]} selectedBlocks - The selected blocks.
+   * @returns {string} - The selected text content.
+   */
+  getCodeContent(selectedBlocks) {
+    const selectedTextBlocks = selectedBlocks.filter((item) => item.type !== 'image' && item.type !== 'list-item');
+    return selectedTextBlocks
+      .map((block) => {
+      return block.nodes.map((node) => node.text).join('');
+    })
+      .join('\n');
+  }
+  /**
+   * Remove the selected blocks after append new code block.
+   *
+   * @param {RTEBlock[]} selectedBlocks - The selected blocks.
+   * @param {VegaRTEContent} target - The selected block top parent object.
+   */
+  removeSelectBlocks(selectedBlocks, target) {
+    for (let i = 0; i < selectedBlocks.length; i++) {
+      target.apply(new RemoveChildAction(selectedBlocks[i]));
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+import { InsertBlocksAfterAction } from '../../actions/insert-blocks-after-block';
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Insert image behind after code block strategy.
+ */
+export class CodeBlockInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * Insert image block at behind of the RTE code block.
+   *
+   * @param {InsertImageToBlockAction} action - The insert image action instance.
+   * @param {RTECodeBlock} target - The code block.
+   */
+  handleAction(action, target) {
+    const imageBlock = action.imageBlockToBeInserted;
+    target.parent.apply(new InsertBlocksAfterAction(target, imageBlock));
+  }
+}

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

@@ -0,0 +1,77 @@
+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';
+import { generateUUID } from '../../../../../utils/misc';
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import { AppendChildNodesAction } from '../../actions/append-child-nodes-action';
+import { RemoveChildAction } from '../../actions/remove-child-action';
+import { RTETextBlock } from '../../blocks/text-block';
+import { BlockDeleteNodeContentStrategy } from './block-delete-node-content-strategy';
+/**
+ * Remove the code block from the value, call this action if want to flush value after action.
+ */
+export class CodeBlockRemoveSelfStrategy extends BlockDeleteNodeContentStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(_action, target) {
+    const node = target.nodes[0];
+    const parent = target.parent;
+    if (parent) {
+      let focusNode = this.getPreviousNode(node);
+      let offset = this.getRTENodeEndOffset(focusNode);
+      if (!focusNode) {
+        focusNode = this.getNextNode(node);
+        offset = 0;
+      }
+      parent.apply(new RemoveChildAction(target));
+      const focusElement = focusNode
+        ? stateEntityRenderingRegistry.getDOMByEntity(focusNode)
+        : null;
+      if (parent.blocks.length === 0) {
+        const defaultParagraph = RTETextBlock.from({
+          id: generateUUID(),
+          type: 'paragraph',
+          nodes: [{ id: generateUUID(), type: 'text', text: '' }],
+        });
+        target.parent.apply(new AppendChildNodesAction([defaultParagraph]));
+        focusNode = defaultParagraph.nodes[0];
+        offset = 0;
+      }
+      this.notifyUpdateSelection(focusNode, focusElement, offset, target);
+    }
+  }
+  /**
+   * Update the rich text next selection range.
+   *
+   * @param {RTENode} focusNode - The next focus node dto.
+   * @param {Nullable<HTMLElement>} focusElement - The next focus element. The update selection task could run directly when the element is exist.
+   * @param {number} offset - The next focus text offset.
+   * @param {RTECodeBlock} target - The code block dto.
+   */
+  notifyUpdateSelection(focusNode, focusElement, offset, target) {
+    const targetDom = stateEntityRenderingRegistry.getDOMByEntity(target);
+    if (targetDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(targetDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        changeManager.notify(nodeSubject, {
+          node: focusNode,
+          updateDirectly: focusElement ? true : false,
+          offset,
+        });
+      }
+    }
+  }
+  /**
+   * Get the node content end offset.
+   *
+   * @param {Nullable<RTENode>} node - The RTENode.
+   * @returns {number} - The number value.
+   */
+  getRTENodeEndOffset(node) {
+    if (node && node.type !== 'CODE_BLOCK_NODE') {
+      return node['type'] !== 'IMAGE' ? node['text'].length : 1;
+    }
+    return 0;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/switch-out-from-code-block-strategy.js

@@ -0,0 +1,38 @@
+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';
+import { generateUUID } from '../../../../../utils/misc';
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import { InsertBlocksAfterAction } from '../../actions/insert-blocks-after-block';
+import { UpdateCodeBlockAction } from '../../actions/update-code-block-action';
+import { RTETextBlock } from '../../blocks/text-block';
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Remove the line break and insert new paragraph after code block.
+ */
+export class SwitchOutFromCodeBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { content, language } = action;
+    const textArray = content.split('\n');
+    const updateAction = new UpdateCodeBlockAction(textArray.slice(0, textArray.length - 2).join('\n'), language);
+    updateAction.isFlushable = false;
+    target.nodes[0].apply(updateAction);
+    const textBlock = RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: generateUUID(), text: '', type: 'text' }],
+    });
+    target.parent.apply(new InsertBlocksAfterAction(target, textBlock));
+    // Focus the next text node after value update.
+    const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(target);
+    if (currentNodeDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        changeManager.notify(nodeSubject, { node: textBlock.nodes[0] });
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Update the language or content of code block strategy.
+ */
+export class UpdateCodeBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { content, language } = action;
+    target.language = language;
+    target.text = content;
+  }
+}

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

@@ -21,6 +21,10 @@ export var ModifyContentActionType;
   ModifyContentActionType["DELETE_BLOCK_CONTENT"] = "DELETE_BLOCK_CONTENT";
   ModifyContentActionType["INSERT_IMAGE_TO_BLOCK"] = "INSERT_IMAGE_TO_BLOCK";
   ModifyContentActionType["UPDATE_IMAGE_NODE_URL"] = "UPDATE_IMAGE_NODE_URL";
+  ModifyContentActionType["TRANSFORM_TO_CODE_BLOCK"] = "TRANSFORM_TO_CODE_BLOCK";
+  ModifyContentActionType["UPDATE_CODE_BLOCK"] = "UPDATE_CODE_BLOCK";
+  ModifyContentActionType["SWITCH_OUT_FROM_CODE_BLOCK"] = "SWITCH_OUT_FROM_CODE_BLOCK";
+  ModifyContentActionType["DELETE_CODE_BLOCK"] = "DELETE_CODE_BLOCK";
 })(ModifyContentActionType || (ModifyContentActionType = {}));
 /**
  * Abstract class for update node content, delete node, insert node

package/dist/collection/components/vega-rich-text-editor/dto/actions/remove-code-block-action.js

@@ -0,0 +1,13 @@
+import { ModifyContentAction, ModifyContentActionType } from './modify-content-action.abstract';
+/**
+ * Remove the code block from the state.
+ *
+ * @example codeBlock.parentBlock.apply(new RemoveCodeBlockAction())
+ */
+export class RemoveCodeBlockAction extends ModifyContentAction {
+  constructor() {
+    super(...arguments);
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.DELETE_CODE_BLOCK;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/actions/switch-out-from-code-block-action.js

@@ -0,0 +1,15 @@
+import { ModifyContentAction, ModifyContentActionType } from './modify-content-action.abstract';
+/**
+ * Switch out from the code block and insert new paragraph after code block.
+ *
+ * @example codeBlock.apply(new SwitchOutFromCodeBlockAction(content, language))
+ */
+export class SwitchOutFromCodeBlockAction extends ModifyContentAction {
+  constructor(content, language) {
+    super();
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.SWITCH_OUT_FROM_CODE_BLOCK;
+    this.content = content;
+    this.language = language;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/actions/transform-to-code-block-action.js

@@ -0,0 +1,13 @@
+import { ModifyContentAction, ModifyContentActionType } from './modify-content-action.abstract';
+/**
+ * Transform the selected blocks to a code block.
+ *
+ * @example firstBlock.parent.apply(new TransformToCodeBlockAction(selectedBlocks))
+ */
+export class TransformToCodeBlockAction extends ModifyContentAction {
+  constructor(selectedBlocks) {
+    super();
+    this.type = ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK;
+    this.selectedBlocks = selectedBlocks;
+  }
+}

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

@@ -0,0 +1,15 @@
+import { ModifyContentAction, ModifyContentActionType } from './modify-content-action.abstract';
+/**
+ * Update the code block content or language action.
+ *
+ * @example codeNode.apply(new UpdateCodeBlockAction(content, language))
+ */
+export class UpdateCodeBlockAction extends ModifyContentAction {
+  constructor(content, language) {
+    super();
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.UPDATE_CODE_BLOCK;
+    this.content = content;
+    this.language = language;
+  }
+}

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

@@ -0,0 +1,98 @@
+import { RTEBlock } from './block.abstract';
+import { ActionHandleStrategyRegistry } from '../action-handle-strategies/action-handle-strategy-registry';
+import { ModifyContentAction, ModifyContentActionType } from '../actions/modify-content-action.abstract';
+import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
+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 changeManager from '../../../../helpers/change-manager/change-manager';
+import { CodeBlockRemoveSelfStrategy } from '../action-handle-strategies/modify-content-strategies/code-block-remove-self-strategy';
+import { SwitchOutFromCodeBlockStrategy } from '../action-handle-strategies/modify-content-strategies/switch-out-from-code-block-strategy';
+import { RTECodeBlockNode } from '../nodes/code-block-node';
+import { InternalAnnotationTypeEnum } from '../annotations/annotation.abstract';
+import { CodeBlockInsertImageStrategy } from '../action-handle-strategies/modify-content-strategies/code-block-insert-image-strategy';
+import { BlockRemoveNodeStrategy } from '../action-handle-strategies/modify-content-strategies/block-remove-node-strategy';
+/**
+ * The code block DTO class.
+ */
+export class RTECodeBlock extends RTEBlock {
+  constructor(id, content, language) {
+    super(id);
+    this.type = 'code-block';
+    this.nodes = [new RTECodeBlockNode(`${id}-1`, content, language, this)];
+  }
+  /**
+   * Converts a VegaRTECodeBlock into an RTECodeBlock.
+   *
+   * @param {VegaRTECodeBlock} block - The block object
+   * @returns {RTECodeBlock} A RTECodeBlock class
+   */
+  static from(block) {
+    return new RTECodeBlock(block.id, block.content, block.language);
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    const { language, text } = this.nodes[0];
+    return {
+      id: this.id,
+      type: 'code-block',
+      content: text,
+      language,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    const cloneCodeBlock = RTECodeBlock.from(this.toJSON());
+    cloneCodeBlock.parent = this.parent;
+    return cloneCodeBlock;
+  }
+  /**
+   * Apply action to block
+   *
+   * @param {ModifyContentAction} action - modify content action.
+   */
+  apply(action) {
+    if (action instanceof ModifyContentAction) {
+      ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+    }
+    if (action.isFlushable) {
+      const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
+      if (domNode) {
+        const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, VegaInternalRichTextEditorFlushChanges);
+        if (nodeSubject) {
+          changeManager.notify(nodeSubject, {});
+        }
+      }
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return !!this.nodes.length;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.nodes[0];
+  }
+  /**
+   * The code block is selected or not.
+   *
+   * @returns {boolean} - The boolean result.
+   */
+  isSelected() {
+    return this.nodes[0].annotationMap.has(InternalAnnotationTypeEnum.SELECTION_RANGE);
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CODE_BLOCK, RTECodeBlock.name, new CodeBlockRemoveSelfStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILD, RTECodeBlock.name, new BlockRemoveNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.SWITCH_OUT_FROM_CODE_BLOCK, RTECodeBlock.name, new SwitchOutFromCodeBlockStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTECodeBlock.name, new CodeBlockInsertImageStrategy());
+})();
+RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME = 'code-block-placeholder-element';

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

@@ -11,6 +11,8 @@ import { BlockRemoveChildBlockStrategy } from './action-handle-strategies/modify
 import { BlockAppendBlocksStrategy } from './action-handle-strategies/modify-content-strategies/block-append-blocks-strategy';
 import { BlockInsertBlocksBeforeStrategy } from './action-handle-strategies/modify-content-strategies/block-insert-blocks-before-strategy';
 import { BlockInsertBlocksAfterStrategy } from './action-handle-strategies/modify-content-strategies/block-insert-blocks-after-strategy';
+import { RTECodeBlock } from './blocks/code-block';
+import { BlockTransformToCodeBlockStrategy } from './action-handle-strategies/modify-content-strategies/block-transform-to-code-block-strategy';
 /**
  * Class representing the content state of the rich text editor.
  */
@@ -43,6 +45,8 @@ export class VegaRTEContent {
         case 'bullet-list':
         case 'number-list':
           return RTEListBlock.from(block);
+        case 'code-block':
+          return RTECodeBlock.from(block);
         default: {
           throw new Error(`[Vega] Unknown block type: ${block.type}`);
         }
@@ -167,4 +171,5 @@ export class VegaRTEContent {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILD_NODES, VegaRTEContent.name, new BlockAppendBlocksStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_BLOCKS_BEFORE, VegaRTEContent.name, new BlockInsertBlocksBeforeStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_BLOCKS_AFTER, VegaRTEContent.name, new BlockInsertBlocksAfterStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK, VegaRTEContent.name, new BlockTransformToCodeBlockStrategy());
 })();

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

@@ -0,0 +1,50 @@
+import { ModifyContentActionType } from '../actions/modify-content-action.abstract';
+import { NodeTypeEnum, RTENode } from './node.abstract';
+import { ActionHandleStrategyRegistry } from '../action-handle-strategies/action-handle-strategy-registry';
+import { UpdateCodeBlockStrategy } from '../action-handle-strategies/modify-content-strategies/update-code-block-strategy';
+import { SelectionChangeAction } from '../actions/selection-change-action';
+import { CodeNodeSetSelectionRangeAnnotationStrategy } from '../action-handle-strategies/apply-annotation-strategies/code-node-set-selection-range-strategy';
+/**
+ * RTE code node DTO class.
+ */
+export class RTECodeBlockNode extends RTENode {
+  constructor(id, content, language, parentBlock) {
+    super(id);
+    this.type = NodeTypeEnum.CODE_BLOCK_NODE;
+    this.text = '';
+    this.annotationMap = new Map();
+    this.text = content;
+    this.parentBlock = parentBlock;
+    this.language = language;
+  }
+  /**
+   * The code node toJSON method will called internal.
+   *
+   * @returns {VegaRTECodeNode} - An object contains content property.
+   */
+  toJSON() {
+    return { id: this.id, type: 'text', text: this.text, language: this.language };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTECodeBlockNode(this.id, this.text, this.language, this.parentBlock);
+  }
+  /**
+   * @inheritDoc
+   */
+  doAnnotationActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+  /**
+   * @inheritDoc
+   */
+  doModifyActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_CODE_BLOCK, RTECodeBlockNode.name, new UpdateCodeBlockStrategy());
+  ActionHandleStrategyRegistry.register(SelectionChangeAction.name, RTECodeBlockNode.name, new CodeNodeSetSelectionRangeAnnotationStrategy());
+})();

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

@@ -7,6 +7,7 @@ export var NodeTypeEnum;
 (function (NodeTypeEnum) {
   NodeTypeEnum["TEXT"] = "TEXT";
   NodeTypeEnum["IMAGE"] = "IMAGE";
+  NodeTypeEnum["CODE_BLOCK_NODE"] = "CODE_BLOCK_NODE";
 })(NodeTypeEnum || (NodeTypeEnum = {}));
 /**
  * Abstract class for all nodes