@globalpayments/vega 2.66.0 → 2.68.0

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

@@ -1,6 +1,4 @@
 import { RTEBlock } from './block.abstract';
-import RTEDTOClassManager from '../../../../helpers/rte-manager/dto-class-manager';
-import { isNonNullable } from '../../../../types/type-guard';
 /**
  * HTML Block
  */
@@ -24,16 +22,7 @@ export class RTEHtmlBlock extends RTEBlock {
     if (annotations) {
       super.convertAnnotationsToMap(htmlBlock.annotationMap, annotations);
     }
-    htmlBlock.children = block.children
-      .map((child) => {
-      const BlockClass = RTEDTOClassManager.getRTEBlockClass(child.type);
-      if (BlockClass) {
-        const block = BlockClass.from(child, options);
-        block.parent = htmlBlock;
-        return block;
-      }
-    })
-      .filter(isNonNullable);
+    htmlBlock.children = this.generateBlockChildren(block.children, options, htmlBlock);
     return htmlBlock;
   }
   /**

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

@@ -14,6 +14,10 @@ import { ListItemReplaceNestListStrategy } from '../action-handle-strategies/mod
 import { BlockMergeNodesStrategy } from '../action-handle-strategies/modify-content-strategies/block-merge-nodes-strategy';
 import { ListItemInsertImageStrategy } from '../action-handle-strategies/modify-content-strategies/list-item-insert-image-strategy';
 import { isNonNullable } from '../../../../types/type-guard';
+import { TextStyleAnnotationAction } from '../actions/text-style-annotation-action';
+import { BlockUpdateTextStyleStrategy } from '../action-handle-strategies/apply-annotation-strategies/block-update-text-style-strategy';
+import { HorizontalAlignmentAnnotationAction } from '../actions/horizontal-alignment-annotation-action';
+import { BlockUpdateHorizontalAlignmentStrategy } from '../action-handle-strategies/apply-annotation-strategies/block-update-horizontal-alignment-strategy';
 /**
  * List item block
  */
@@ -116,6 +120,8 @@ export class RTEListItemBlock extends RTETextBlock {
   }
 }
 (() => {
+  ActionHandleStrategyRegistry.register(TextStyleAnnotationAction.name, RTEListItemBlock.name, new BlockUpdateTextStyleStrategy());
+  ActionHandleStrategyRegistry.register(HorizontalAlignmentAnnotationAction.name, RTEListItemBlock.name, new BlockUpdateHorizontalAlignmentStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new BlockInsertLineBreakStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEListItemBlock.name, new BlockInsertLineBreakWithBlocksStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_NEST_LIST, RTEListItemBlock.name, new ListItemRemoveNestListStrategy());

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

@@ -140,11 +140,7 @@ export class RTETextBlock extends RTEBlock {
   toHtml() {
     const BlockTag = this.getBlockTag();
     const attrStr = super.generateAttributeString();
-    const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
-    let nodesHtml = this.children.map((node) => node.toHtml()).join('');
-    if (linkGroupAnnotation && this.children.length > 0) {
-      nodesHtml = this.generateLinkHtml(linkGroupAnnotation, nodesHtml);
-    }
+    const nodesHtml = this.getChildrenHtml();
     return super.shouldRenderAsInternalWrapper()
       ? nodesHtml
       : [`<${BlockTag}${attrStr}>`, nodesHtml, `</${BlockTag}>`].join('');
@@ -210,6 +206,19 @@ export class RTETextBlock extends RTEBlock {
         return 'p';
     }
   }
+  /**
+   * Get the HTML string for the children nodes, including handling link group annotations.
+   *
+   * @returns {string} The HTML string representing the children nodes.
+   */
+  getChildrenHtml() {
+    const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    let nodesHtml = this.children.map((node) => node.toHtml()).join('');
+    if (linkGroupAnnotation && this.children.length > 0) {
+      nodesHtml = this.generateLinkHtml(linkGroupAnnotation, nodesHtml);
+    }
+    return nodesHtml;
+  }
   /**
    * @inheritDoc
    */

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

@@ -14,6 +14,10 @@ import { RemoveChildrenStrategy } from './action-handle-strategies/modify-conten
 import { AppendChildrenStrategy } from './action-handle-strategies/modify-content-strategies/append-children-strategy';
 import { InsertChildrenBeforeStrategy } from './action-handle-strategies/modify-content-strategies/insert-children-before-strategy';
 import { InsertChildrenAfterStrategy } from './action-handle-strategies/modify-content-strategies/insert-children-after-strategy';
+import stateEntityRenderingRegistry from '../slimmers/controllers/state-entity-rendering-registry';
+import changeManager from '../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalRichTextEditorFlushChanges } from '../../../helpers/event-manager/event-id/vega-internal-event-id';
 import './setup';
 import { StylePreservator } from '../../../helpers/csp/styles-preservator';
 import { LogUtility } from '../../../utils/log';
@@ -146,6 +150,13 @@ export class VegaRTEContent {
    */
   apply(action) {
     ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+    // Check if the action has been executed and is flushable
+    if (action['executedFlag'] && action.isFlushable) {
+      const host = stateEntityRenderingRegistry.getDOMByEntity(this);
+      if (host) {
+        changeManager.notify(domNodeSubjectFactory.getSubject(host, VegaInternalRichTextEditorFlushChanges), {});
+      }
+    }
   }
   /**
    * Get the last node in the content.

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

@@ -4,13 +4,13 @@ import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/do
 import { VegaInternalRichTextEditorFlushChanges } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { ModifyContentAction } from '../actions/modify-content-action.abstract';
 import { NodeAnnotation } from '../annotations/node-annotation.abstract';
-import { camelToDashCase } from '../../../../utils/string';
 import { isNonNullable } from '../../../../types/type-guard';
 import { CustomAttributeAnnotation } from '../annotations/custom-attribute-annotation';
 import { CustomClassAnnotation } from '../annotations/custom-class-annotation';
 import { CommonAnnotationTypeEnum } from '../annotations/common-annotation.abstract';
 import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
 import { methodPlaceholder } from 'vega-slimmer/core';
+import { RTEAnnotationStyle } from '../annotations/annotation-style';
 export var NodeTypeEnum;
 (function (NodeTypeEnum) {
   NodeTypeEnum["TEXT"] = "TEXT";
@@ -95,11 +95,8 @@ export class RTENode {
    * @returns {AnnotationStyle} - Annotation styles
    */
   getStyles(options = { standalone: false }) {
-    const styles = Array.from(this.annotationMap.values())
-      .filter((annotation) => annotation instanceof NodeAnnotation || annotation instanceof CustomStyleAnnotation)
-      .map((annotation) => annotation.renderStyle(options))
-      .filter(Boolean);
-    return this.mergeAnnotationStyles(styles, ['textDecoration']);
+    const rteAnnotationStyle = new RTEAnnotationStyle(this);
+    return rteAnnotationStyle.toJSON(options, ['textDecoration']);
   }
   /**
    * Get classes from annotations
@@ -146,9 +143,10 @@ export class RTENode {
    */
   generateAttributeString(...attrs) {
     var _a;
-    const styles = Object.entries(Object.assign({}, this.getStyles({ standalone: true })))
-      .map(([key, value]) => `${camelToDashCase(key)}: ${value};`)
-      .join('');
+    const nodeAnnotationStyle = new RTEAnnotationStyle(this);
+    const styles = nodeAnnotationStyle.toCssText({ standalone: true }, [
+      'textDecoration',
+    ]);
     const customClassAnnotation = this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_CLASS);
     const customAttributeString = ((_a = this.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.toString(attrs)) || [];
     const attributes = [
@@ -210,32 +208,4 @@ export class RTENode {
   doModifyActionApply(action) {
     methodPlaceholder(action);
   }
-  /**
-   * Merge an array of annotation styles into a single style object.
-   * e.g.,
-   * { textDecoration: 'underline', textDecoration: 'line-through' }
-   * -> { textDecoration: 'underline line-through' }
-   *
-   * @param {AnnotationStyle[]} styles - Array of annotation style objects to merge.
-   * @param {string[]} canMergeKeyList - List of style keys that can be merged by concatenation.
-   * @returns {AnnotationStyle} - The merged annotation style object.
-   */
-  mergeAnnotationStyles(styles, canMergeKeyList) {
-    const merged = {};
-    for (const style of styles) {
-      for (const key in style) {
-        const value = style[key];
-        const existing = merged[key];
-        if (typeof existing === 'string' &&
-          typeof value === 'string' &&
-          canMergeKeyList.includes(key)) {
-          merged[key] = Array.from(new Set(`${existing} ${value}`.split(/\s+/).filter(Boolean))).join(' ');
-        }
-        else {
-          merged[key] = value;
-        }
-      }
-    }
-    return merged;
-  }
 }

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

@@ -31,6 +31,13 @@ import { LinkGroupNodeSplitStrategy } from '../action-handle-strategies/modify-c
 import { DeleteLinkGroupStrategy } from '../action-handle-strategies/modify-content-strategies/delete-link-group-strategy';
 import { PlainTextAnnotation } from '../annotations/plain-text-annotation';
 import { LinkAnnotationAction } from '../actions/link-annotation-action';
+import { BoldAnnotationAction } from '../actions/bold-annotation-action';
+import { ClearFormattingAnnotationAction } from '../actions/clear-formatting-annotation-action';
+import { ItalicAnnotationAction } from '../actions/italic-annotation-action';
+import { UnderlineAnnotationAction } from '../actions/underline-annotation-action';
+import { TextColorAnnotationAction } from '../actions/text-color-annotation-action';
+import { StrikethroughAnnotationAction } from '../actions/strikethrough-annotation-action';
+import { CodeAnnotationAction } from '../actions/code-annotation-action';
 /**
  * Text node
  */
@@ -217,6 +224,13 @@ export class RTETextNode extends RTENode {
       }
       ActionHandleStrategyRegistry.register(TextSplittableAction.name, dtoClassName, new NodeSplitTextStrategy());
       ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_LINK_GROUP, dtoClassName, new DeleteLinkGroupStrategy());
+      ActionHandleStrategyRegistry.register(BoldAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(ClearFormattingAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(ItalicAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(UnderlineAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(TextColorAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(StrikethroughAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(CodeAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
       ActionHandleStrategyRegistry.register(AnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
       RTETextNode.registerActionStrategyStatus[dtoClassName] = true;
     }
@@ -267,9 +281,6 @@ export class RTETextNode extends RTENode {
     /**
      * 1. Try to get the specific strategy for the action and node type first (e.g., LinkAnnotationAction on RTETextNode).
      * 2. If no specific strategy found, try to get the generic NodeUpdateAnnotationMapStrategy for AnnotationAction on RTETextNode.
-     *
-     * This is useful when we want to check if there is a specific strategy for an action-node combination first, we can use the specific strategy to check if the special toolbar button should be enabled or disabled.
-     * TODO: Update the other annotation actions to follow this pattern. https://gethired.atlassian.net/browse/VD-7367
      */
     const strategy = ActionHandleStrategyRegistry.get(action.constructor.name, node.constructor.name);
     if (strategy) {

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

@@ -6,6 +6,15 @@ import stateEntityRenderingRegistry from '../slimmers/controllers/state-entity-r
  * Base renderer for Vega Rich Text Editor.
  */
 export class VegaRTEExtensionRenderer extends 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.
    *
@@ -34,6 +43,15 @@ export class VegaRTEExtensionRenderer extends VegaRTEBaseRenderer {
       }
     };
   }
+  /**
+   * 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 RTEDTORendererManager.getRTERenderer(key);
+  }
   /**
    * Auto render the block children if the block element is not exist
    *
@@ -62,7 +80,7 @@ export class VegaRTEExtensionRenderer extends VegaRTEBaseRenderer {
    * @returns {Nullable<VegaRTERenderResult>} - The rendered DOM element.
    */
   renderChildren(renderData, rteContext, createElement) {
-    const renderer = RTEDTORendererManager.getRTERenderer(renderData.type);
+    const renderer = this.getDTORenderer(renderData.type);
     if (renderer) {
       return renderer.render(renderData, rteContext, createElement);
     }

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

@@ -33,7 +33,7 @@ export 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.addUniqueObserverToNode(el, VegaDropdownClick, (input) => this.handleDropdownClick(input.detail, editorContext));
@@ -43,7 +43,7 @@ export 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) {
@@ -51,7 +51,9 @@ export 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);
     }));
   }
   /**
@@ -69,6 +71,24 @@ export 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.
    *
@@ -147,4 +167,25 @@ export 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;
+  }
 }

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