@globalpayments/vega 2.66.0 → 2.68.0

package/dist/collection/components/vega-rich-text-editor/extensions/functions/action-handler-strategies/paste-plain-text-strategy.js

@@ -0,0 +1,68 @@
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
+import { InsertChildrenBeforeAction } from '../../../dto/actions/insert-children-before-block';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { InternalAnnotationTypeEnum } from '../../../dto/annotations/annotation.abstract';
+import { RTETextBlock } from '../../../dto/blocks/text-block';
+import { RTETextNode } from '../../../dto/nodes/text-node';
+/**
+ * Strategy to handle the paste content into function block.
+ */
+export class PastePlainTextStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { blocksToBeInserted, startNode, startOffset } = action;
+    if (startNode instanceof RTETextNode) {
+      const textNodes = blocksToBeInserted.flatMap((block) => {
+        if (block instanceof RTETextBlock) {
+          this.copyLinkGroupAnnotations(target.annotationMap, block.annotationMap);
+          return block.children;
+        }
+        return [];
+      });
+      if (textNodes.length > 0) {
+        if (startOffset > 0) {
+          target.apply(new InsertChildrenAfterAction(startNode, ...textNodes));
+        }
+        else {
+          target.apply(new InsertChildrenBeforeAction(startNode, ...textNodes));
+        }
+        this.focusToNextLine(textNodes[textNodes.length - 1], textNodes[textNodes.length - 1].getRangeEndOffset());
+      }
+    }
+  }
+  /**
+   * Focus to next paragraph.
+   *
+   * @param {RTETextNode} node - The text node need to focus.
+   * @param {number} startOffset - The offset need to focus.
+   */
+  focusToNextLine(node, startOffset) {
+    const root = this.getRootContent(node);
+    if (root) {
+      root.apply(new UpdateCursorPositionAction(node, startOffset));
+    }
+  }
+  /**
+   * Copy link group annotations from copied block to target block.
+   *
+   * @param {BlockAnnotations} blockAnnotationMap - The target block annotation map.
+   * @param {BlockAnnotations} copiedAnnotationMap - The copied block annotation map.
+   */
+  copyLinkGroupAnnotations(blockAnnotationMap, copiedAnnotationMap) {
+    if (copiedAnnotationMap && copiedAnnotationMap.has(InternalAnnotationTypeEnum.LINK_GROUP)) {
+      const copiedLinkGroupAnnotation = copiedAnnotationMap.get(InternalAnnotationTypeEnum.LINK_GROUP);
+      if (!blockAnnotationMap.has(InternalAnnotationTypeEnum.LINK_GROUP)) {
+        blockAnnotationMap.set(InternalAnnotationTypeEnum.LINK_GROUP, copiedAnnotationMap.get(InternalAnnotationTypeEnum.LINK_GROUP));
+      }
+      else {
+        copiedLinkGroupAnnotation.linkGroups.forEach((nodes, groupKey) => {
+          const existingAnnotation = blockAnnotationMap.get(InternalAnnotationTypeEnum.LINK_GROUP);
+          existingAnnotation.linkGroups.set(groupKey, nodes);
+        });
+      }
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/functions/actions/insert-function-block-action.js

@@ -0,0 +1,15 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const INSERT_FUNCTION_BLOCK = 'INSERT_FUNCTION_BLOCK';
+/**
+ * Action to insert a function block into the rich text editor.
+ *
+ * @example focusedBlock.apply(new InsertFunctionBlockAction('IF'))
+ * @example host.value.apply(new InsertFunctionBlockAction('IF'))
+ */
+export class InsertFunctionBlockAction extends ModifyContentAction {
+  constructor(functionType) {
+    super();
+    this.type = INSERT_FUNCTION_BLOCK;
+    this.functionType = functionType;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/functions/actions/paste-plain-text-action.js

@@ -0,0 +1,17 @@
+import { ModifyContentAction } from '../../../dto/actions/modify-content-action.abstract';
+export const PASTE_PLAIN_TEXT = 'PASTE_PLAIN_TEXT';
+/**
+ * Action to paste plain text content into function block.
+ *
+ * @example functionBlock.apply(new PastePlainTextAction('content', range))
+ * @example host.value.apply(new PastePlainTextAction('content', range))
+ */
+export class PastePlainTextAction extends ModifyContentAction {
+  constructor(blocksToBeInserted, startNode, startOffset) {
+    super();
+    this.type = PASTE_PLAIN_TEXT;
+    this.blocksToBeInserted = blocksToBeInserted;
+    this.startNode = startNode;
+    this.startOffset = startOffset;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/functions/dto/function-block.js

@@ -0,0 +1,97 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { RTEAnnotationStyle } from '../../../dto/annotations/annotation-style';
+import { RTEBlock } from '../../../dto/blocks/block.abstract';
+import { RTETextBlock } from '../../../dto/blocks/text-block';
+/**
+ * RTE Function Block
+ */
+export class RTEFunctionBlock extends RTEBlock {
+  constructor(id) {
+    super(id);
+    this.type = 'function-block';
+    this.children = [];
+  }
+  /**
+   * Creates an RTEFunctionBlock from a VegaFunctionBlock.
+   *
+   * @param {VegaFunctionBlock} block - The custom block to convert.
+   * @param {VegaRTETransformOptions} [options] - Optional transformation options.
+   * @returns {RTEFunctionBlock} The resulting RTEFunctionBlock.
+   */
+  static from(block, options) {
+    const functionBlock = new RTEFunctionBlock(block.id);
+    const defaultAnnotation = { customClass: ['statement'] };
+    let { annotations } = block;
+    annotations = annotations
+      ? Object.assign(Object.assign({}, annotations), defaultAnnotation) : defaultAnnotation;
+    super.convertAnnotationsToMap(functionBlock.annotationMap, annotations);
+    functionBlock.children = this.generateBlockChildren(block.children, options, functionBlock);
+    return functionBlock;
+  }
+  /**
+   * Converts the RTEFunctionBlock and its children to an HTML string.
+   *
+   * @returns {string} The HTML string representation of the function block.
+   */
+  toHtml() {
+    const childrenHtml = this.children
+      .map((child) => {
+      if (child instanceof RTETextBlock) {
+        const attrStr = this.getFunctionContentStyle(child);
+        return `<div class="statementelement"${attrStr}>${child.getChildrenHtml()}</div>`;
+      }
+      else {
+        return child.toHtml();
+      }
+    })
+      .join('');
+    return `<div class="statement">${childrenHtml}</div>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTEFunctionBlock(generateUUID());
+    clonedBlock.parent = parent;
+    clonedBlock.children = this.children.map((child) => {
+      const clonedChild = child.clone(clonedBlock);
+      return clonedChild;
+    });
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    return clonedBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1].getLastNode();
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.children.length > 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, children: this.children.map((child) => child.toJSON()) });
+  }
+  /**
+   * Get the style string for function content block, excluding default paragraph styles.
+   *
+   * @param {RTETextBlock} block - The text block to extract styles from
+   * @returns {string} - The style attribute string
+   */
+  getFunctionContentStyle(block) {
+    const blockAnnotationStyle = new RTEAnnotationStyle(block);
+    let styles = blockAnnotationStyle.toCssText({ standalone: true });
+    const textStyleAnnotation = block.getAnnotationByType('TEXT_STYLE');
+    if (textStyleAnnotation && textStyleAnnotation.textStyle === 'paragraph') {
+      const defaultParagraphStyles = blockAnnotationStyle.toCssText(undefined, undefined, textStyleAnnotation.renderStyle({ standalone: true }));
+      styles = styles.replace(defaultParagraphStyles, '').trim();
+    }
+    return styles ? ` style="${styles}"` : '';
+  }
+}

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

@@ -0,0 +1,73 @@
+import { RTEBlock } from '../../../dto/blocks/block.abstract';
+import { RTELogicControlNode } from '../dto/logic-control-node';
+/**
+ * Class representing a logic control block in the rich text editor.
+ */
+export class RTELogicControlBlock extends RTEBlock {
+  constructor(id, statementText, parent) {
+    super(id);
+    this.type = 'logic-control-block';
+    this.children = [];
+    this.statementText = '';
+    this.statementText = statementText;
+    this.children = [new RTELogicControlNode(`${id}-node-1`, statementText, this)];
+    if (parent) {
+      this.parent = parent;
+    }
+  }
+  /**
+   * Create a logic control block from a JSON representation.
+   *
+   * @param {VegaRTELogicControlBlock} json - The JSON object representing the logic control block.
+   * @returns {RTELogicControlBlock} - The created logic control block.
+   */
+  static from(json) {
+    const block = new RTELogicControlBlock(json.id, json.statementText);
+    return block;
+  }
+  /**
+   * Check the block is not empty.
+   *
+   * @returns {boolean} - Always true for logic control block.
+   */
+  isNotEmpty() {
+    return true;
+  }
+  /**
+   * Get the last node of the block.
+   *
+   * @returns {RTELogicControlNode} - The last node in the block.
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1];
+  }
+  /**
+   * Convert the block to its HTML representation.
+   *
+   * @returns {string} - The HTML string of the logic control block.
+   */
+  toHtml() {
+    return `<div class='statementsyntax' contenteditable='false'>${this.statementText}</div>`;
+  }
+  /**
+   * Clone the current block instance.
+   *
+   * @param { RTEFunctionBlock } parent - The parent function block for the cloned instance.
+   * @returns {RTELogicControlBlock} - A new instance of RTEStatementSyntaxBlock.
+   */
+  clone(parent) {
+    return new RTELogicControlBlock(this.id, this.statementText, parent);
+  }
+  /**
+   * Get the JSON representation of the block.
+   *
+   * @returns {VegaRTELogicControlBlock} - The JSON object of the logic control block.
+   */
+  toJSON() {
+    return {
+      id: this.id,
+      type: this.type,
+      statementText: this.statementText,
+    };
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/functions/dto/logic-control-node.js

@@ -0,0 +1,69 @@
+import { RTENode } from '../../../dto/nodes/node.abstract';
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+/**
+ * Class representing a logic control node in the rich text editor.
+ */
+export class RTELogicControlNode extends RTENode {
+  constructor(id, text, parent) {
+    super(id);
+    this.type = 'logic-control-node';
+    this.text = '';
+    this.text = text;
+    this.parent = parent;
+  }
+  /**
+   * Clone the current node instance.
+   *
+   * @returns {RTELogicControlNode} - A new instance of RTELogicControlNode.
+   */
+  clone() {
+    return new RTELogicControlNode(this.id, this.text, this.parent);
+  }
+  /**
+   * Convert the node to its HTML representation.
+   *
+   * @returns {string} - The HTML string of the logic control node.
+   */
+  toHtml() {
+    return this.text;
+  }
+  /**
+   * Convert the node to a JSON representation.
+   *
+   * @returns {unknown} - The JSON object of the statement syntax node.
+   */
+  toJSON() {
+    return {
+      id: this.id,
+      type: this.type,
+      text: this.text,
+    };
+  }
+  /**
+   * Get the end offset of the node's range.
+   *
+   * @returns {number} - The end offset of the node's range.
+   */
+  getRangeEndOffset() {
+    return 1;
+  }
+  /**
+   * Get the container element for the node's range.
+   *
+   * @returns {Nullable<Node>} - The container node for the range.
+   */
+  getRangeContainer() {
+    const element = stateEntityRenderingRegistry.getDOMByEntity(this);
+    if (element) {
+      return element.parentElement;
+    }
+  }
+  /**
+   * Get the content editable state of the node.
+   *
+   * @returns {boolean} - The content editable state of the node.
+   */
+  isContentEditable() {
+    return false;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/functions/element-to-dto-strategies/div-to-function-block-strategy.js

@@ -0,0 +1,49 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { ElementToDTOStrategy } from '../../../slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract';
+import { RTEFunctionBlock } from '../dto/function-block';
+/**
+ * Strategy to convert a div with class 'statement' into an function block.
+ */
+export class DivToFunctionBlockStrategy extends ElementToDTOStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element &&
+      element.tagName === 'DIV' &&
+      element.classList.contains('statement') &&
+      element.childNodes.length &&
+      element.querySelector('.statementsyntax')
+      ? 1
+      : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle() {
+    return RTEFunctionBlock.from({
+      id: generateUUID(),
+      type: 'function-block',
+      annotations: {
+        customClass: ['statement'],
+      },
+      children: [],
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.map((block) => {
+      block.parent = currentBlock;
+      return block;
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/functions/element-to-dto-strategies/div-to-function-content-strategy.js

@@ -0,0 +1,27 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { RTETextBlock } from '../../../dto/blocks/text-block';
+import htmlElementToAnnotationGenerator from '../../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
+import { DivToLogicControlBlockStrategy } from './div-to-logic-control-block-strategy';
+/**
+ * Strategy to convert a div with class 'statementelement' into an function block.
+ */
+export class DivToFunctionContentStrategy extends DivToLogicControlBlockStrategy {
+  constructor() {
+    super(...arguments);
+    this.blockClassName = 'statementelement';
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray, options) {
+    const element = elementsArray[0];
+    const annotations = htmlElementToAnnotationGenerator.generate(RTETextBlock, element);
+    const nodes = Array.from(elementsArray[0].childNodes);
+    return RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      annotations: Object.assign({ customClass: [this.blockClassName] }, annotations),
+      nodes: this.generateChildNodes(nodes, undefined, options),
+    });
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/functions/element-to-dto-strategies/div-to-logic-control-block-strategy.js

@@ -0,0 +1,55 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { RTELogicControlBlock } from '../dto/logic-control-block';
+import { BlockToRTEBlockStrategyAbstract } from '../../../slimmers/controllers/helper/element-to-dto-strategy/block-to-rte-block-strategy.abstract';
+/**
+ * Strategy to convert a div with class 'statementsyntax' into an RTELogicControlBlock DTO.
+ */
+export class DivToLogicControlBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  constructor() {
+    super(...arguments);
+    this.blockClassName = 'statementsyntax';
+  }
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element &&
+      element.nodeType === Node.ELEMENT_NODE &&
+      element.classList.contains(this.blockClassName) &&
+      this.isFunctionBlockChild(element)
+      ? 1
+      : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0];
+    return RTELogicControlBlock.from({
+      id: generateUUID(),
+      type: 'logic-control-block',
+      statementText: element.innerText,
+    });
+  }
+  /**
+   * The logic control block does not have child blocks to append. so this method is intentionally left empty.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * Checks if the given element is a child of a function block
+   *
+   * @param {HTMLElement} element - The HTML element to check
+   * @returns {boolean} True if the element is a child of a function block, false otherwise
+   */
+  isFunctionBlockChild(element) {
+    return !!(element.parentElement && element.parentElement.classList.contains('statement'));
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/functions/function-extension.js

@@ -0,0 +1,75 @@
+import { VegaRTEExtension } from '../extension.abstract';
+import { VegaRTEContent } from '../../dto/content-state';
+import { INSERT_FUNCTION_BLOCK } from './actions/insert-function-block-action';
+import { InsertFunctionBlockStrategy } from './action-handler-strategies/insert-function-block-strategy';
+import { RTETextBlock } from '../../dto/blocks/text-block';
+import { RTEImageBlock } from '../../dto/blocks/image-block';
+import { RTELogicControlBlock } from './dto/logic-control-block';
+import { FunctionToolbarButtonRenderer } from './renderers/function-toolbar-button-renderer';
+import { RTELogicControlBlockRenderer } from './renderers/logic-control-block-renderer';
+import { DivToLogicControlBlockStrategy } from './element-to-dto-strategies/div-to-logic-control-block-strategy';
+import { DivToFunctionBlockStrategy } from './element-to-dto-strategies/div-to-function-block-strategy';
+import { DivToFunctionContentStrategy } from './element-to-dto-strategies/div-to-function-content-strategy';
+import { RTEFunctionBlock } from './dto/function-block';
+import { RTEFunctionBlockRenderer } from './renderers/function-block-renderer';
+import { ModifyContentActionType } from '../../dto/actions/modify-content-action.abstract';
+import { PreventNewParagraphInterceptor } from './action-handler-interceptor/prevent-new-paragraph-interceptor';
+import { FunctionBlockInsertParagraphStrategy } from './action-handler-strategies/function-block-insert-paragraph-strategy';
+import { PreventPasteContentInterceptor } from './action-handler-interceptor/prevent-paste-content-interceptor';
+import { PASTE_PLAIN_TEXT } from './actions/paste-plain-text-action';
+import { PastePlainTextStrategy } from './action-handler-strategies/paste-plain-text-strategy';
+const convertLogicControlBlockStrategy = new DivToLogicControlBlockStrategy();
+const convertFunctionContentStrategy = new DivToFunctionContentStrategy();
+const convertFunctionBlockStrategy = new DivToFunctionBlockStrategy();
+/**
+ * Function extension class for Vega Rich Text Editor.
+ */
+export class VegaRTEFunctionExtension extends VegaRTEExtension {
+  constructor() {
+    super();
+    this.toolbarButtonRenderer = new FunctionToolbarButtonRenderer();
+    this.registerBlockBasicStrategies(RTELogicControlBlock.name);
+    this.registerBlockBasicStrategies(RTEFunctionBlock.name);
+    this.preventFunctionBlockDefaultInsertNewParagraph();
+    this.registerNode('logic-control-block', RTELogicControlBlock);
+    this.registerRenderer('logic-control-block', new RTELogicControlBlockRenderer());
+    this.registerNode('function-block', RTEFunctionBlock);
+    this.registerRenderer('function-block', new RTEFunctionBlockRenderer());
+    this.registerToolbarButtonRenderer('functions', this.toolbarButtonRenderer);
+    this.registerElementToBlockDTOClassStrategy(convertLogicControlBlockStrategy);
+    this.registerElementToBlockDTOClassStrategy(convertFunctionContentStrategy);
+    this.registerElementToBlockDTOClassStrategy(convertFunctionBlockStrategy);
+  }
+  /**
+   * Initializes the extension with the given context
+   *
+   * @param {RTEExtensionContext} context - extension context
+   */
+  initialExtension(context) {
+    super.initialExtension(context);
+    if (this.toolbarButtonRenderer) {
+      this.toolbarButtonRenderer.injectExtensionContext(context);
+    }
+  }
+  /**
+   * Remove the appen children strategies to prevent default insert new paragraph logic in function block
+   */
+  preventFunctionBlockDefaultInsertNewParagraph() {
+    this.unRegisterStrategy(ModifyContentActionType.INSERT_NEW_PARAGRAPH, RTELogicControlBlock.name);
+    this.unRegisterStrategy(ModifyContentActionType.APPEND_CHILDREN, RTEFunctionBlock.name);
+    this.unRegisterStrategy(ModifyContentActionType.INSERT_CHILDREN_AFTER, RTEFunctionBlock.name);
+    this.unRegisterStrategy(ModifyContentActionType.INSERT_CHILDREN_BEFORE, RTEFunctionBlock.name);
+    this.unRegisterStrategy(ModifyContentActionType.PASTE_CONTENT, RTELogicControlBlock.name);
+    VegaRTEExtension.registerActionHandleStrategy(RTEFunctionBlock.name, ModifyContentActionType.INSERT_NEW_PARAGRAPH, new FunctionBlockInsertParagraphStrategy());
+  }
+}
+(() => {
+  const insertFunctionBlockStrategy = new InsertFunctionBlockStrategy();
+  VegaRTEExtension.registerActionHandleStrategy(VegaRTEContent.name, INSERT_FUNCTION_BLOCK, insertFunctionBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, INSERT_FUNCTION_BLOCK, insertFunctionBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTEImageBlock.name, INSERT_FUNCTION_BLOCK, insertFunctionBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTELogicControlBlock.name, INSERT_FUNCTION_BLOCK, insertFunctionBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, PASTE_PLAIN_TEXT, new PastePlainTextStrategy());
+  VegaRTEExtension.registerActionHandlerInterceptor(RTETextBlock.name, ModifyContentActionType.INSERT_NEW_PARAGRAPH, new PreventNewParagraphInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(RTETextBlock.name, ModifyContentActionType.PASTE_CONTENT, new PreventPasteContentInterceptor());
+})();

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

@@ -0,0 +1,38 @@
+import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
+import styles from './function-block-styles.css';
+/**
+ * Renderer for Function Block
+ */
+export class RTEFunctionBlockRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(createElement, renderData) {
+    return createElement('div', {
+      key: renderData.id,
+      class: this.getElementClassName(renderData),
+      ref: this.useRef(renderData),
+    });
+  }
+  /**
+   * Defines the function block styles to be injected into the RTE scope.
+   *
+   * @returns {string} - The styles as a string.
+   */
+  injectRTEScopeStyles() {
+    return styles;
+  }
+  /**
+   * Gets the class name for the function block element.
+   *
+   * @param {RTEFunctionBlock} block - The function block.
+   * @returns {string} The class name for the function block element.
+   */
+  getElementClassName(block) {
+    let classes = block.getClasses();
+    if (classes.indexOf('statement') < 0) {
+      classes = 'statement ' + classes;
+    }
+    return classes.trim();
+  }
+}

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

@@ -0,0 +1,71 @@
+import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { VegaRTEToolbarButtonRenderer } from '../../base-toolbar-button-renderer';
+import { INSERT_FUNCTION_BLOCK, InsertFunctionBlockAction, } from '../actions/insert-function-block-action';
+/**
+ * Function toolbar button renderer class.
+ */
+export class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  /**
+   * Injects the extension context
+   *
+   * @param {RTEExtensionContext} context - extension context
+   */
+  injectExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * @inheritDoc
+   */
+  render(h, editorContext) {
+    return this.renderDropdown(h, editorContext, {}, [
+      this.renderButton(h, editorContext, {
+        label: 'Functions',
+        showArrowIcon: true,
+      }),
+      this.renderDropdownListTemplate(h, FunctionToolbarButtonRenderer.FUNCTION_LIST),
+    ]);
+  }
+  /**
+   * Overrides the isDisabled method to determine if the button should be disabled.
+   *
+   * @returns {boolean} - true if the button should be disabled, false otherwise.
+   */
+  isDisabled() {
+    const { host, getSelectedNodes } = this.extensionContext;
+    const focusNode = getSelectedNodes()[0];
+    let enableInsert = true;
+    if (focusNode) {
+      enableInsert = ActionHandleStrategyRegistry.canHandle(INSERT_FUNCTION_BLOCK, focusNode.parent);
+    }
+    return host.disabled || !enableInsert;
+  }
+  /* istanbul ignore next */
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  handleButtonClick() {
+    throw new Error('Method not implemented.');
+  }
+  /**
+   * Handles dropdown click event
+   *
+   * @param {RTEExtensionFunctionType} itemKey - key of the clicked item
+   */
+  handleDropdownClick(itemKey) {
+    const { host, getSelectedNodes } = this.extensionContext;
+    const focusNode = getSelectedNodes()[0];
+    const action = new InsertFunctionBlockAction(itemKey);
+    if (!focusNode) {
+      host.value.apply(action);
+    }
+    else if (focusNode.parent) {
+      focusNode.parent.apply(action);
+    }
+    if (action.nextFocusNode) {
+      host.value.apply(new UpdateCursorPositionAction(action.nextFocusNode, 1));
+    }
+  }
+}
+FunctionToolbarButtonRenderer.FUNCTION_LIST = [
+  { key: 'IF', label: 'Conditional' },
+  { key: 'FOREACH', label: 'Foreach' },
+];