@globalpayments/vega 2.67.0 → 2.68.1

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

@@ -3,6 +3,8 @@ import RTEDTORendererManager from '../../../helpers/rte-manager/dto-renderer-man
 import RTEDTOActionStrategyManager from '../../../helpers/rte-manager/dto-action-strategy-manager';
 import ElementToDTOClassStrategyManager from '../../../helpers/rte-manager/element-dto-class-strategy-manager';
 import { ActionHandleStrategyRegistry } from '../dto/action-handle-strategies/action-handle-strategy-registry';
+import { VegaRTEExtensionRenderer } from './base-extension-renderer';
+import { ActionHandlerInterceptorRegistry } from '../dto/action-handle-strategies/action-handle-interceptor-registry';
 /**
  * Abstract class for Vega Rich Text Editor extensions.
  */
@@ -12,17 +14,28 @@ export class VegaRTEExtension {
      * The context of the RTE extension, which may include references to the host editor and other relevant information.
      */
     this.extensionContext = null;
+    this.hasCustomStylesRenderers = new Set();
   }
   /**
    * Registers an action handle strategy for a specific node or block class.
    *
    * @param {string} nodeOrBlockClassName - The name of the node or block class.
    * @param {string} actionType - The type of the action.
-   * @param {ActionHandleStrategy<ModifyContentAction, RTENode | RTEBlock>} strategy - The strategy to register.
+   * @param {ActionHandleStrategy<ModifyContentAction, RTENode | RTEBlock | VegaRTEContent>} strategy - The strategy to register.
    */
   static registerActionHandleStrategy(nodeOrBlockClassName, actionType, strategy) {
     ActionHandleStrategyRegistry.register(actionType, nodeOrBlockClassName, strategy);
   }
+  /**
+   * Registers an action handler interceptor for a specific node or block class.
+   *
+   * @param {string} nodeOrBlockClassName - The name of the node or block class.
+   * @param {string} actionType - The type of the action.
+   * @param {ActionHandlerInterceptor<ModifyContentAction, RTENode | RTEBlock | VegaRTEContent>} strategy - The interceptor to register.
+   */
+  static registerActionHandlerInterceptor(nodeOrBlockClassName, actionType, strategy) {
+    ActionHandlerInterceptorRegistry.register(actionType, nodeOrBlockClassName, strategy);
+  }
   /**
    * Initializes the RTE extension with the provided context.
    *
@@ -31,6 +44,21 @@ export class VegaRTEExtension {
   initialExtension(context) {
     this.extensionContext = context;
   }
+  /**
+   * Collect custom styles for the extension renderers.
+   * If custom nodes have special styles, override this method to provide the styles.
+   *
+   * @returns {string} - The custom styles as a string.
+   */
+  collectExtensionRendererStyles() {
+    let styles = '';
+    if (this.hasCustomStylesRenderers.size > 0) {
+      this.hasCustomStylesRenderers.forEach((renderer) => {
+        styles += `${renderer.injectRTEScopeStyles()}\n`;
+      });
+    }
+    return styles;
+  }
   /**
    * Register a node type with the extension.
    *
@@ -48,6 +76,9 @@ export class VegaRTEExtension {
    */
   registerRenderer(type, renderer) {
     RTEDTORendererManager.registerRTEDTORenderer(type, renderer);
+    if (renderer instanceof VegaRTEExtensionRenderer && renderer.injectRTEScopeStyles()) {
+      this.hasCustomStylesRenderers.add(renderer);
+    }
   }
   /**
    * Register a toolbar button renderer for the extension.
@@ -70,6 +101,25 @@ export class VegaRTEExtension {
   registerBlockBasicStrategies(blockClassName) {
     RTEDTOActionStrategyManager.registerBlockBasicStrategies(blockClassName);
   }
+  /**
+   * Unregister a strategy for a specific action type and block class if not need.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {string} blockClassName - The class name of the block to unregister the strategy for.
+   */
+  unRegisterStrategy(actionType, blockClassName) {
+    ActionHandleStrategyRegistry.unregister(actionType, blockClassName);
+  }
+  /**
+   * Unregister a strategy for a specific action type and block class if not need.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {string} blockClassName - The class name of the block to unregister the strategy for.
+   * @param {ActionHandlerInterceptor<ModifyContentAction, RTENode | RTEBlock | VegaRTEContent>} strategy - The interceptor to unregister.
+   */
+  unRegisterInterceptor(actionType, blockClassName, strategy) {
+    ActionHandlerInterceptorRegistry.unregister(actionType, blockClassName, strategy);
+  }
   /**
    * Register an element to block DTO class strategy.
    *

package/dist/collection/components/vega-rich-text-editor/extensions/functions/action-handler-interceptor/prevent-new-paragraph-interceptor.js

@@ -0,0 +1,30 @@
+import { ActionHandlerInterceptor, } from '../../../dto/action-handle-strategies/action-handle-interceptor.abstract';
+import { InsertNewParagraphAction } from '../../../dto/actions/insert-new-paragraph-action';
+import { RTEFunctionBlock } from '../dto/function-block';
+/**
+ * Prevent special type input in function block.
+ */
+export class PreventNewParagraphInterceptor extends ActionHandlerInterceptor {
+  /**
+   * Checks the target block parent whether is function block.
+   *
+   * @param {InsertNewParagraphAction} _action - the action to be intercepted
+   * @param {RTETextBlock} target - the target block
+   * @returns {boolean} - true if the target block parent is function block, false otherwise
+   */
+  canIntercept(_action, target) {
+    return target.parent && target.parent instanceof RTEFunctionBlock;
+  }
+  /**
+   * Insert a new paragraph behind of the function block instead of the target block.
+   *
+   * @param {ActionHandlerExecution} _execution - the original execution function
+   * @param {ModifyContentAction} _action - the action to be intercepted
+   * @param {RTETextBlock} target - the target block
+   */
+  intercept(_execution, _action, target) {
+    const insertParagraphAction = new InsertNewParagraphAction(target.children[0], 0);
+    insertParagraphAction.isFlushable = true;
+    target.parent.apply(insertParagraphAction);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/functions/action-handler-interceptor/prevent-paste-content-interceptor.js

@@ -0,0 +1,25 @@
+import { PastePlainTextAction } from '../actions/paste-plain-text-action';
+import { PreventNewParagraphInterceptor } from '../action-handler-interceptor/prevent-new-paragraph-interceptor';
+/**
+ * Prevent special type input in function block.
+ */
+export class PreventPasteContentInterceptor extends PreventNewParagraphInterceptor {
+  /**
+   * Paste plain text into text block.
+   *
+   * @param {ActionHandlerExecution} _execution - the original execution function
+   * @param {ModifyContentAction} action - the action to be intercepted
+   * @param {RTETextBlock} target - the target block
+   */
+  intercept(_execution, action, target) {
+    const { blocksToBeInserted, rteRange } = action;
+    let { startNode, startOffset } = action;
+    // Set the start offset from rteRange if available, this is to handle the paste issue https://gethired.atlassian.net/browse/VD-7779
+    if (rteRange) {
+      startNode = rteRange.startNode;
+      startOffset = rteRange.startOffset;
+    }
+    const pastePlainTextAction = new PastePlainTextAction(blocksToBeInserted, startNode, startOffset);
+    target.apply(pastePlainTextAction);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/functions/action-handler-strategies/function-block-insert-paragraph-strategy.js

@@ -0,0 +1,30 @@
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+/**
+ * Insert a new paragraph behind of current function block strategy.
+ */
+export class FunctionBlockInsertParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const newParagraph = this.createNewParagraph('');
+    if (newParagraph) {
+      target.parent.apply(new InsertChildrenAfterAction(target, newParagraph));
+      action.newBlock = newParagraph;
+      this.focusToNextLine(newParagraph);
+    }
+  }
+  /**
+   * Focus to next paragraph.
+   *
+   * @param {RTETextBlock} block - The paragraph need to focus.
+   */
+  focusToNextLine(block) {
+    const root = this.getRootContent(block);
+    if (root) {
+      root.apply(new UpdateCursorPositionAction(block.children[0], 1));
+    }
+  }
+}

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

@@ -0,0 +1,99 @@
+import { VegaRTEContent } from '../../../dto/content-state';
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { generateUUID } from '../../../../../utils/misc';
+import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
+import { AppendChildrenAction } from '../../../dto/actions/append-child-nodes-action';
+import { RTEFunctionBlock } from '../dto/function-block';
+/**
+ * Strategy to handle the insertion of a function block into the rich text editor.
+ */
+export class InsertFunctionBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { functionType } = action;
+    const functionBlock = this.getFunctionBlock(functionType);
+    const emptyParagraph = this.createNewParagraph('');
+    const referenceBlock = this.getReferenceBlock(target);
+    if (referenceBlock) {
+      referenceBlock.parent.apply(new InsertChildrenAfterAction(referenceBlock, functionBlock, emptyParagraph));
+    }
+    else {
+      target.apply(new AppendChildrenAction([functionBlock, emptyParagraph]));
+    }
+    if (emptyParagraph) {
+      action.nextFocusNode = emptyParagraph.children[0];
+    }
+  }
+  /**
+   * Get a function block based on the specified type.
+   *
+   * @param {string} type - The type of function block to create.
+   * @returns {RTEFunctionBlock} The function block instance.
+   */
+  getFunctionBlock(type) {
+    const id = generateUUID();
+    return RTEFunctionBlock.from({
+      id: id,
+      type: 'function-block',
+      children: [
+        {
+          id: `${id}-1`,
+          type: 'logic-control-block',
+          statementText: type.toUpperCase(),
+        },
+        {
+          id: `${id}-2`,
+          annotations: {
+            customClass: ['statementelement'],
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: `${id}-2-1`,
+              type: 'text',
+              text: '   ',
+            },
+          ],
+        },
+        {
+          id: `${id}-3`,
+          type: 'logic-control-block',
+          statementText: 'SHOW',
+        },
+        {
+          id: `${id}-4`,
+          annotations: {
+            customClass: ['statementelement'],
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: `${id}-4-1`,
+              type: 'text',
+              text: '   ',
+            },
+          ],
+        },
+      ],
+    });
+  }
+  /**
+   * We need to get the correct block if the current target is a function block element to avoid nesting function blocks.
+   *
+   * @param {RTEBlock | VegaRTEContent} currentTarget - The current target block or content.
+   * @returns {Nullable<RTEBlock>} The reference block.
+   */
+  getReferenceBlock(currentTarget) {
+    if (!(currentTarget instanceof VegaRTEContent)) {
+      const parentBlock = currentTarget.parent;
+      if (parentBlock instanceof RTEFunctionBlock) {
+        return parentBlock;
+      }
+      else {
+        return currentTarget;
+      }
+    }
+  }
+}

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;
+  }
+}