@globalpayments/vega 2.67.0 → 2.68.0

package/dist/cjs/{token-extension-aa8d5cce.js → function-extension-f0e845f2.js}

@@ -6,13 +6,13 @@ const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-11937d6f.js');
 const darkModeStyleController = require('./dark-mode-style-controller-27809ff8.js');
-const internalVegaEventManager = require('./internal-vega-event-manager-4d1ce667.js');
+const internalVegaEventManager = require('./internal-vega-event-manager-45d451de.js');
 const number = require('./number-4816603d.js');
-const dtoRendererManager = require('./dto-renderer-manager-d0f0f2c0.js');
-const codeBlock = require('./code-block-ab97a0a0.js');
+const dtoRendererManager = require('./dto-renderer-manager-b7969d6c.js');
+const codeBlock = require('./code-block-39074880.js');
+const internalIconManager = require('./internal-icon-manager-32f9ed63.js');
 const typeGuard = require('./type-guard-f12b5bae.js');
 const baseRenderer = require('./base-renderer-0a3b62b7.js');
-const internalIconManager = require('./internal-icon-manager-32f9ed63.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-f040608b.js');
 
 const VegaLoaderRuntimeMetricsPayloadDefinition = [
@@ -1297,6 +1297,104 @@ __decorate([
 ], VegaSkeletonLoaderController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 const VegaSkeletonLoader = new VegaSkeletonLoaderController();
 
+/**
+ * Base renderer for Vega Rich Text Editor.
+ */
+class VegaRTEExtensionRenderer extends baseRenderer.VegaRTEBaseRenderer {
+  /**
+   * Returns the styles to be injected into the RTE scope.
+   * Override this method to provide custom styles for the custom blocks or nodes.
+   *
+   * @returns {string} - The styles as a string.
+   */
+  injectRTEScopeStyles() {
+    return '';
+  }
+  /**
+   * Renders the given data as a DOM element.
+   *
+   * @param {RTEBlock | RTENode} renderData - The data to render, which can be a block or a node.
+   * @param {RTERenderContext} rteContext - The rte editor context.
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   * @returns {VegaRTERenderResult} - The rendered DOM element.
+   */
+  render(renderData, rteContext, createElement) {
+    const element = this.doRender(createElement, renderData, rteContext);
+    this.fallbackRegisterRef(element, renderData);
+    this.appendChildren(element, renderData, rteContext, createElement);
+    return element;
+  }
+  /**
+   * Register the reference of the element in the rendering registry.
+   *
+   * @param {RTEBlock | RTENode} renderData - The data to register with the element.
+   * @returns {VegaRTEUseRef} - The function to register the element.
+   */
+  useRef(renderData) {
+    renderData[VegaRTEExtensionRenderer.REGISTER_REF_FLAG] = true;
+    return function (element) {
+      if (element) {
+        codeBlock.stateEntityRenderingRegistry.register(element, renderData);
+      }
+    };
+  }
+  /**
+   * Get a registered renderer by its key.
+   *
+   * @param {string} key - The key of the renderer.
+   * @returns {Nullable<BaseRenderer>} - The registered renderer or null if not found.
+   */
+  getDTORenderer(key) {
+    return dtoRendererManager.RTEDTORendererManager.getRTERenderer(key);
+  }
+  /**
+   * Auto render the block children if the block element is not exist
+   *
+   * @param {VegaRTERenderResult} parentElement - The parent element to append children to.
+   * @param {RTEBlock | RTENode} renderData - The data to render children for.
+   * @param {RTERenderContext} rteContext - The render context.
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   */
+  appendChildren(parentElement, renderData, rteContext, createElement) {
+    if (Array.isArray(renderData['children']) &&
+      renderData['children'].length &&
+      !parentElement['$children$']) {
+      parentElement['$children$'] = renderData['children']
+        .map((child) => {
+        return this.renderChildren(child, rteContext, createElement);
+      })
+        .filter(typeGuard.isNonNullable);
+    }
+  }
+  /**
+   * Render the children node.
+   *
+   * @param {RTENode | RTEBlock} renderData - The node to render children for.
+   * @param {RTERenderContext} rteContext - The render context.
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   * @returns {Nullable<VegaRTERenderResult>} - The rendered DOM element.
+   */
+  renderChildren(renderData, rteContext, createElement) {
+    const renderer = this.getDTORenderer(renderData.type);
+    if (renderer) {
+      return renderer.render(renderData, rteContext, createElement);
+    }
+  }
+  /**
+   * Fallback register reference for the element.
+   *
+   * @param {VegaRTERenderResult} element - The rendered DOM element.
+   * @param {RTEBlock | RTENode} renderData - The data to register with the element.
+   */
+  fallbackRegisterRef(element, renderData) {
+    if (!renderData[VegaRTEExtensionRenderer.REGISTER_REF_FLAG] && element['$attrs$']) {
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      element['$attrs$']['ref'] = this.useRef(renderData);
+    }
+  }
+}
+VegaRTEExtensionRenderer.REGISTER_REF_FLAG = '__registeredRef__';
+
 /**
  * Abstract class for Vega Rich Text Editor extensions.
  */
@@ -1306,17 +1404,28 @@ 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) {
     codeBlock.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) {
+    codeBlock.ActionHandlerInterceptorRegistry.register(actionType, nodeOrBlockClassName, strategy);
+  }
   /**
    * Initializes the RTE extension with the provided context.
    *
@@ -1325,6 +1434,21 @@ 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.
    *
@@ -1342,6 +1466,9 @@ class VegaRTEExtension {
    */
   registerRenderer(type, renderer) {
     dtoRendererManager.RTEDTORendererManager.registerRTEDTORenderer(type, renderer);
+    if (renderer instanceof VegaRTEExtensionRenderer && renderer.injectRTEScopeStyles()) {
+      this.hasCustomStylesRenderers.add(renderer);
+    }
   }
   /**
    * Register a toolbar button renderer for the extension.
@@ -1364,6 +1491,25 @@ class VegaRTEExtension {
   registerBlockBasicStrategies(blockClassName) {
     dtoRendererManager.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) {
+    codeBlock.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) {
+    codeBlock.ActionHandlerInterceptorRegistry.unregister(actionType, blockClassName, strategy);
+  }
   /**
    * Register an element to block DTO class strategy.
    *
@@ -1390,86 +1536,6 @@ class VegaRTEExtension {
   }
 }
 
-/**
- * Base renderer for Vega Rich Text Editor.
- */
-class VegaRTEExtensionRenderer extends baseRenderer.VegaRTEBaseRenderer {
-  /**
-   * Renders the given data as a DOM element.
-   *
-   * @param {RTEBlock | RTENode} renderData - The data to render, which can be a block or a node.
-   * @param {RTERenderContext} rteContext - The rte editor context.
-   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
-   * @returns {VegaRTERenderResult} - The rendered DOM element.
-   */
-  render(renderData, rteContext, createElement) {
-    const element = this.doRender(createElement, renderData, rteContext);
-    this.fallbackRegisterRef(element, renderData);
-    this.appendChildren(element, renderData, rteContext, createElement);
-    return element;
-  }
-  /**
-   * Register the reference of the element in the rendering registry.
-   *
-   * @param {RTEBlock | RTENode} renderData - The data to register with the element.
-   * @returns {VegaRTEUseRef} - The function to register the element.
-   */
-  useRef(renderData) {
-    renderData[VegaRTEExtensionRenderer.REGISTER_REF_FLAG] = true;
-    return function (element) {
-      if (element) {
-        codeBlock.stateEntityRenderingRegistry.register(element, renderData);
-      }
-    };
-  }
-  /**
-   * Auto render the block children if the block element is not exist
-   *
-   * @param {VegaRTERenderResult} parentElement - The parent element to append children to.
-   * @param {RTEBlock | RTENode} renderData - The data to render children for.
-   * @param {RTERenderContext} rteContext - The render context.
-   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
-   */
-  appendChildren(parentElement, renderData, rteContext, createElement) {
-    if (Array.isArray(renderData['children']) &&
-      renderData['children'].length &&
-      !parentElement['$children$']) {
-      parentElement['$children$'] = renderData['children']
-        .map((child) => {
-        return this.renderChildren(child, rteContext, createElement);
-      })
-        .filter(typeGuard.isNonNullable);
-    }
-  }
-  /**
-   * Render the children node.
-   *
-   * @param {RTENode | RTEBlock} renderData - The node to render children for.
-   * @param {RTERenderContext} rteContext - The render context.
-   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
-   * @returns {Nullable<VegaRTERenderResult>} - The rendered DOM element.
-   */
-  renderChildren(renderData, rteContext, createElement) {
-    const renderer = dtoRendererManager.RTEDTORendererManager.getRTERenderer(renderData.type);
-    if (renderer) {
-      return renderer.render(renderData, rteContext, createElement);
-    }
-  }
-  /**
-   * Fallback register reference for the element.
-   *
-   * @param {VegaRTERenderResult} element - The rendered DOM element.
-   * @param {RTEBlock | RTENode} renderData - The data to register with the element.
-   */
-  fallbackRegisterRef(element, renderData) {
-    if (!renderData[VegaRTEExtensionRenderer.REGISTER_REF_FLAG] && element['$attrs$']) {
-      // eslint-disable-next-line jsdoc/require-jsdoc
-      element['$attrs$']['ref'] = this.useRef(renderData);
-    }
-  }
-}
-VegaRTEExtensionRenderer.REGISTER_REF_FLAG = '__registeredRef__';
-
 /**
  * Base class for rendering extension toolbar button in the rich text editor.
  * The renderer provides common functionalities for rendering toolbar buttons, including:
@@ -1501,7 +1567,7 @@ class VegaRTEToolbarButtonRenderer {
    * @returns {VegaRTERenderResult} - The render result for the dropdown.
    */
   renderDropdown(h, editorContext, dropdownProps, children) {
-    return h('vega-dropdown', Object.assign({ trigger: 'click', searchable: false, 
+    return h('vega-dropdown', Object.assign({ trigger: 'click', searchable: false, maxWidth: '200', itemDisplayRule: 'ellipsis', 
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (el) => {
         domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, domNodeSubjectObserverFactory.VegaDropdownClick, (input) => this.handleDropdownClick(input.detail, editorContext));
@@ -1511,7 +1577,7 @@ class VegaRTEToolbarButtonRenderer {
    * Renders the dropdown list template.
    *
    * @param {VegaRTECreateElementFunction} h - Create element function.
-   * @param {RTEDropdownListItem[]} itemList - The list of dropdown items.
+   * @param {(RTEDropdownListItem | RTEDropdownListGroup)[]} itemList - The list of dropdown items.
    * @returns {VegaRTERenderResult} - The render result for the dropdown list.
    */
   renderDropdownListTemplate(h, itemList) {
@@ -1519,7 +1585,9 @@ class VegaRTEToolbarButtonRenderer {
       slot: 'items',
       onMouseDown: this.preventDefault,
     }, itemList.map((item) => {
-      return this.renderDropdownItem(h, item);
+      return 'children' in item
+        ? this.renderDropdownGroup(h, item)
+        : this.renderDropdownItem(h, item);
     }));
   }
   /**
@@ -1537,6 +1605,24 @@ class VegaRTEToolbarButtonRenderer {
       prefixIcon: item.icon,
     });
   }
+  /**
+   * Renders a dropdown item for the toolbar button.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {RTEDropdownListGroup} item - The dropdown group.
+   * @returns {VegaRTERenderResult} - The render result for the dropdown item.
+   */
+  renderDropdownGroup(h, item) {
+    return h('vega-dropdown-group', {
+      key: item.key,
+      label: item.label,
+      divide: false,
+    }, item.children.map((child) => {
+      return 'children' in child
+        ? this.renderDropdownGroup(h, child)
+        : this.renderDropdownItem(h, child);
+    }));
+  }
   /**
    * Renders a common toolbar button with optional icon, label, and arrow icon.
    *
@@ -1615,6 +1701,27 @@ class VegaRTEToolbarButtonRenderer {
   preventDefault(e) {
     e.preventDefault();
   }
+  /**
+   * Recursively searches for a dropdown list item by its key.
+   *
+   * @param {(RTEDropdownListItem | RTEDropdownListGroup)[]} itemList The list of dropdown items or groups to search through.
+   * @param {string} key The key of the item to find.
+   * @returns {Nullable<RTEDropdownListItem>} The dropdown list item if found, otherwise null.
+   */
+  getListItemByKey(itemList, key) {
+    for (const item of itemList) {
+      if ('children' in item) {
+        const foundItem = this.getListItemByKey(item.children, key);
+        if (foundItem) {
+          return foundItem;
+        }
+      }
+      else if (item.key === key) {
+        return item;
+      }
+    }
+    return null;
+  }
 }
 
 /**
@@ -1695,7 +1802,7 @@ class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
    * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
    */
   handleDropdownClick(itemKey, editorContext) {
-    const token = this.tokenList.find((t) => t.key === itemKey);
+    const token = this.getListItemByKey(this.tokenList, itemKey);
     const { rteRange } = editorContext;
     const { startNode } = rteRange;
     if (startNode && startNode.parent) {
@@ -1796,7 +1903,7 @@ class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
       'template-token-key': token,
       'token-key': token,
       'contenteditable': 'false',
-      'style': this.getStyle(node),
+      'style': node.getStyles(),
       'class': `token ${node.getClasses()}`,
       'ref': this.useRef(node),
       // eslint-disable-next-line jsdoc/require-jsdoc
@@ -1817,13 +1924,12 @@ class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
     this.extensionContext = context;
   }
   /**
-   * Get the style for the token element.
+   * Override to inject RTE scope styles for the token node.
    *
-   * @param {RTETokenNode} node - The token node.
-   * @returns {Record<string, string>} The style object for the token element.
+   * @returns {string} The CSS styles for the token node.
    */
-  getStyle(node) {
-    return Object.assign(Object.assign({}, node.getStyles()), { backgroundColor: 'var(--v-bg-status-info, #CDD1D3)', padding: '0 2px', margin: '0 1px' });
+  injectRTEScopeStyles() {
+    return `span[token-key]{padding: 0 2px; margin: 0 1px; background-color: rgba(var(--v-bg-status-info, 205,209,211))}`;
   }
   /**
    * Handle the click event on the token element.
@@ -1904,7 +2010,7 @@ class SpanToTokenNodeStrategy extends dtoRendererManager.ElementToDTOStrategy {
     const element = elementsArray[0];
     const tokenKey = element.getAttribute('token-key');
     const text = element.textContent;
-    const annotations = this.generateTextStyleAnnotations(element);
+    const annotations = dtoRendererManager.htmlElementToAnnotationGenerator.generate(codeBlock.RTETextNode, element);
     // Exclude customAttribute and customClass from annotations
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const restAnnotations = __rest(annotations, ["customAttribute", "customClass"]);
@@ -1960,6 +2066,822 @@ class VegaRTETokenExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandleStrategy(dtoRendererManager.RTEListItemBlock.name, 'INSERT_TOKEN_NODE', insertTokenNodeStrategy);
 })();
 
+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'))
+ */
+class InsertFunctionBlockAction extends codeBlock.ModifyContentAction {
+  constructor(functionType) {
+    super();
+    this.type = INSERT_FUNCTION_BLOCK;
+    this.functionType = functionType;
+  }
+}
+
+/**
+ * RTE Function Block
+ */
+class RTEFunctionBlock extends codeBlock.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 codeBlock.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(createPublicApiRuntimeMetricsSlimmer.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 codeBlock.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}"` : '';
+  }
+}
+
+/**
+ * Strategy to handle the insertion of a function block into the rich text editor.
+ */
+class InsertFunctionBlockStrategy extends codeBlock.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 codeBlock.InsertChildrenAfterAction(referenceBlock, functionBlock, emptyParagraph));
+    }
+    else {
+      target.apply(new codeBlock.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 = createPublicApiRuntimeMetricsSlimmer.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 dtoRendererManager.VegaRTEContent)) {
+      const parentBlock = currentTarget.parent;
+      if (parentBlock instanceof RTEFunctionBlock) {
+        return parentBlock;
+      }
+      else {
+        return currentTarget;
+      }
+    }
+  }
+}
+
+/**
+ * Class representing a logic control node in the rich text editor.
+ */
+class RTELogicControlNode extends codeBlock.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 = codeBlock.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;
+  }
+}
+
+/**
+ * Class representing a logic control block in the rich text editor.
+ */
+class RTELogicControlBlock extends codeBlock.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,
+    };
+  }
+}
+
+/**
+ * Function toolbar button renderer class.
+ */
+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 = codeBlock.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 dtoRendererManager.UpdateCursorPositionAction(action.nextFocusNode, 1));
+    }
+  }
+}
+FunctionToolbarButtonRenderer.FUNCTION_LIST = [
+  { key: 'IF', label: 'Conditional' },
+  { key: 'FOREACH', label: 'Foreach' },
+];
+
+/**
+ * Renders a logic control block in the rich text editor.
+ */
+class RTELogicControlBlockRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData) {
+    return h('div', {
+      key: renderData.id,
+      class: 'statementsyntax',
+      ref: this.useRef(renderData),
+    }, h('span', {
+      key: `${renderData.id}-1`,
+      contenteditable: 'false',
+      ref: this.useRef(renderData.children[0]),
+    }, renderData.statementText));
+  }
+}
+
+/**
+ * Strategy to convert a div with class 'statementsyntax' into an RTELogicControlBlock DTO.
+ */
+class DivToLogicControlBlockStrategy extends dtoRendererManager.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: createPublicApiRuntimeMetricsSlimmer.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'));
+  }
+}
+
+/**
+ * Strategy to convert a div with class 'statement' into an function block.
+ */
+class DivToFunctionBlockStrategy extends dtoRendererManager.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: createPublicApiRuntimeMetricsSlimmer.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;
+  }
+}
+
+/**
+ * Strategy to convert a div with class 'statementelement' into an function block.
+ */
+class DivToFunctionContentStrategy extends DivToLogicControlBlockStrategy {
+  constructor() {
+    super(...arguments);
+    this.blockClassName = 'statementelement';
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray, options) {
+    const element = elementsArray[0];
+    const annotations = dtoRendererManager.htmlElementToAnnotationGenerator.generate(codeBlock.RTETextBlock, element);
+    const nodes = Array.from(elementsArray[0].childNodes);
+    return codeBlock.RTETextBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'paragraph',
+      annotations: Object.assign({ customClass: [this.blockClassName] }, annotations),
+      nodes: this.generateChildNodes(nodes, undefined, options),
+    });
+  }
+}
+
+const functionBlockStylesCss = "div.statement{padding:2px 4px;background:rgba(var(--v-bg-accent3-secondary, 255, 239, 200));border:1px solid rgba(var(--v-bg-accent3-primary, 255, 220, 131));border-radius:4px;display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:4px}div.statement .statementsyntax{padding:3px 0;line-height:22px}.rich-text-content div.statement .statementsyntax,.rich-text-content div.statement .statementelement{display:inline-block}div.statement+div.statement{margin-top:2px}div.statement .statementsyntax span{color:rgb(38, 42, 255);font-weight:bold}div.statement .statementelement{padding:2px 4px;background:rgba(var(--v-bg-secondary, 245, 247, 247));border:1px solid rgba(var(--v-border-color-input-field, 171, 198, 216));border-radius:4px;margin:0;min-width:8px}";
+
+/**
+ * Renderer for Function Block
+ */
+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 functionBlockStylesCss;
+  }
+  /**
+   * 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();
+  }
+}
+
+/**
+ * Abstract class for action handler interceptors, which can intercept actions before they are handled.
+ */
+class ActionHandlerInterceptor {
+}
+
+/**
+ * Prevent special type input in function block.
+ */
+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 dtoRendererManager.InsertNewParagraphAction(target.children[0], 0);
+    insertParagraphAction.isFlushable = true;
+    target.parent.apply(insertParagraphAction);
+  }
+}
+
+/**
+ * Insert a new paragraph behind of current function block strategy.
+ */
+class FunctionBlockInsertParagraphStrategy extends codeBlock.ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const newParagraph = this.createNewParagraph('');
+    if (newParagraph) {
+      target.parent.apply(new codeBlock.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 dtoRendererManager.UpdateCursorPositionAction(block.children[0], 1));
+    }
+  }
+}
+
+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))
+ */
+class PastePlainTextAction extends codeBlock.ModifyContentAction {
+  constructor(blocksToBeInserted, startNode, startOffset) {
+    super();
+    this.type = PASTE_PLAIN_TEXT;
+    this.blocksToBeInserted = blocksToBeInserted;
+    this.startNode = startNode;
+    this.startOffset = startOffset;
+  }
+}
+
+/**
+ * Prevent special type input in function block.
+ */
+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);
+  }
+}
+
+/**
+ * Strategy to handle the paste content into function block.
+ */
+class PastePlainTextStrategy extends codeBlock.ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { blocksToBeInserted, startNode, startOffset } = action;
+    if (startNode instanceof codeBlock.RTETextNode) {
+      const textNodes = blocksToBeInserted.flatMap((block) => {
+        if (block instanceof codeBlock.RTETextBlock) {
+          this.copyLinkGroupAnnotations(target.annotationMap, block.annotationMap);
+          return block.children;
+        }
+        return [];
+      });
+      if (textNodes.length > 0) {
+        if (startOffset > 0) {
+          target.apply(new codeBlock.InsertChildrenAfterAction(startNode, ...textNodes));
+        }
+        else {
+          target.apply(new codeBlock.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 dtoRendererManager.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(codeBlock.InternalAnnotationTypeEnum.LINK_GROUP)) {
+      const copiedLinkGroupAnnotation = copiedAnnotationMap.get(codeBlock.InternalAnnotationTypeEnum.LINK_GROUP);
+      if (!blockAnnotationMap.has(codeBlock.InternalAnnotationTypeEnum.LINK_GROUP)) {
+        blockAnnotationMap.set(codeBlock.InternalAnnotationTypeEnum.LINK_GROUP, copiedAnnotationMap.get(codeBlock.InternalAnnotationTypeEnum.LINK_GROUP));
+      }
+      else {
+        copiedLinkGroupAnnotation.linkGroups.forEach((nodes, groupKey) => {
+          const existingAnnotation = blockAnnotationMap.get(codeBlock.InternalAnnotationTypeEnum.LINK_GROUP);
+          existingAnnotation.linkGroups.set(groupKey, nodes);
+        });
+      }
+    }
+  }
+}
+
+const convertLogicControlBlockStrategy = new DivToLogicControlBlockStrategy();
+const convertFunctionContentStrategy = new DivToFunctionContentStrategy();
+const convertFunctionBlockStrategy = new DivToFunctionBlockStrategy();
+/**
+ * Function extension class for Vega Rich Text Editor.
+ */
+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(codeBlock.ModifyContentActionType.INSERT_NEW_PARAGRAPH, RTELogicControlBlock.name);
+    this.unRegisterStrategy(codeBlock.ModifyContentActionType.APPEND_CHILDREN, RTEFunctionBlock.name);
+    this.unRegisterStrategy(codeBlock.ModifyContentActionType.INSERT_CHILDREN_AFTER, RTEFunctionBlock.name);
+    this.unRegisterStrategy(codeBlock.ModifyContentActionType.INSERT_CHILDREN_BEFORE, RTEFunctionBlock.name);
+    this.unRegisterStrategy(codeBlock.ModifyContentActionType.PASTE_CONTENT, RTELogicControlBlock.name);
+    VegaRTEExtension.registerActionHandleStrategy(RTEFunctionBlock.name, codeBlock.ModifyContentActionType.INSERT_NEW_PARAGRAPH, new FunctionBlockInsertParagraphStrategy());
+  }
+}
+(() => {
+  const insertFunctionBlockStrategy = new InsertFunctionBlockStrategy();
+  VegaRTEExtension.registerActionHandleStrategy(dtoRendererManager.VegaRTEContent.name, INSERT_FUNCTION_BLOCK, insertFunctionBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(codeBlock.RTETextBlock.name, INSERT_FUNCTION_BLOCK, insertFunctionBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(dtoRendererManager.RTEImageBlock.name, INSERT_FUNCTION_BLOCK, insertFunctionBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTELogicControlBlock.name, INSERT_FUNCTION_BLOCK, insertFunctionBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(codeBlock.RTETextBlock.name, PASTE_PLAIN_TEXT, new PastePlainTextStrategy());
+  VegaRTEExtension.registerActionHandlerInterceptor(codeBlock.RTETextBlock.name, codeBlock.ModifyContentActionType.INSERT_NEW_PARAGRAPH, new PreventNewParagraphInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(codeBlock.RTETextBlock.name, codeBlock.ModifyContentActionType.PASTE_CONTENT, new PreventPasteContentInterceptor());
+})();
+
+exports.ActionHandlerInterceptor = ActionHandlerInterceptor;
 exports.InsertNodeToNearestRootAction = InsertNodeToNearestRootAction;
 exports.InternalVegaZIndexManager = InternalVegaZIndexManager$1;
 exports.RTETokenNode = RTETokenNode;
@@ -1971,6 +2893,7 @@ exports.VegaLoader = VegaLoader;
 exports.VegaNotify = VegaNotify;
 exports.VegaRTEExtension = VegaRTEExtension;
 exports.VegaRTEExtensionRenderer = VegaRTEExtensionRenderer;
+exports.VegaRTEFunctionExtension = VegaRTEFunctionExtension;
 exports.VegaRTETokenExtension = VegaRTETokenExtension;
 exports.VegaRTEToolbarButtonRenderer = VegaRTEToolbarButtonRenderer;
 exports.VegaSkeletonLoader = VegaSkeletonLoader;