@heartlandone/vega 2.102.0 → 2.103.0

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

@@ -24,6 +24,7 @@ import { LogUtility } from '../../../utils/log';
 import { HTMLContentCleaner } from '../slimmers/controllers/html-cleaner';
 import { RTEFilterStylesStrategyRegistry } from './filter-styles-strategies/filter-styles-strategy-registry';
 import { DeleteSelectedContentStrategy } from './action-handle-strategies/modify-content-strategies/delete-selected-content-strategy';
+import { SequentialCompositionStrategy } from './action-handle-strategies/modify-content-strategies/sequential-composition-strategy';
 import { CommitValueStrategy } from './action-handle-strategies/modify-content-strategies/commit-value-strategy';
 import { COMMIT_VALUE } from './actions/commit-value-action';
 import { ReplaceNestListAction } from './actions/replace-nest-list-action';
@@ -171,12 +172,13 @@ export class VegaRTEContent extends Discriminated {
    * @param {ModifyContentAction} action - Modify content action
    */
   apply(action) {
+    var _a;
     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), {});
+        changeManager.notify(domNodeSubjectFactory.getSubject(host, VegaInternalRichTextEditorFlushChanges), (_a = action.flushPayload) !== null && _a !== void 0 ? _a : {});
       }
     }
   }
@@ -282,4 +284,5 @@ VegaRTEContent.typeName = 'VegaRTEContent';
   ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_CURSOR_POSITION, VegaRTEContent.typeName, new UpdateCursorPositionStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_SELECTED_CONTENT, VegaRTEContent.typeName, new DeleteSelectedContentStrategy());
   ActionHandleStrategyRegistry.register(COMMIT_VALUE, VegaRTEContent.typeName, new CommitValueStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.SEQUENTIAL_COMPOSITION, VegaRTEContent.typeName, new SequentialCompositionStrategy());
 })();

package/dist/collection/components/vega-rich-text-editor/dto/flush-changes-payload.js

@@ -0,0 +1 @@
+export {};

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

@@ -20,6 +20,7 @@ import { ImageUpdateUrlStrategy } from '../action-handle-strategies/modify-conte
 import { AnnotationAction } from '../actions/annotation-action.abstract';
 import { CommonAnnotation } from '../annotations/common-annotation.abstract';
 import { RTEDecoratorNode } from './decorator-node';
+import { escapeHtml } from '../../helpers/utils';
 /**
  * Image node
  */
@@ -78,8 +79,8 @@ export class RTEImageNode extends RTEDecoratorNode {
   toHtml(options) {
     const imageAnnotation = this.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
     const attrStr = super.generateAttributeString(options, ...[
-      imageAnnotation && imageAnnotation.alt ? `alt="${imageAnnotation.alt}"` : null,
-      `src="${this.url}"`,
+      imageAnnotation && imageAnnotation.alt ? `alt="${escapeHtml(imageAnnotation.alt)}"` : null,
+      `src="${escapeHtml(this.url)}"`,
       imageAnnotation && imageAnnotation.size ? `data-size="${imageAnnotation.size}"` : null,
     ].filter(isNonNullable));
     return `<img${attrStr}>`;

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

@@ -2,6 +2,8 @@ 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';
+import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
+import { RTELogicControlBlock } from '../dto/logic-control-block';
 import { FUNCTION_BLOCK_CLASS, FUNCTION_CONTENT_CLASS } from '../constants';
 import { RTE_BLOCK_BOUNDARY_ATTRIBUTE } from '../../../constants/constant';
 /**
@@ -28,8 +30,36 @@ export class RTEFunctionBlock extends RTEBlock {
       ? Object.assign(Object.assign({}, annotations), defaultAnnotation) : defaultAnnotation;
     super.convertAnnotationsToMap(functionBlock.annotationMap, annotations);
     functionBlock.children = this.generateBlockChildren(block.children, options, functionBlock);
+    this.unwrapForeachContent(functionBlock.children);
     return functionBlock;
   }
+  /**
+   * Removes a redundant div wrapper from FOREACH content so it is rendered inline
+   * with the FOREACH control. SHOW content retains its wrapper to preserve line breaks.
+   *
+   * @param {RTEFunctionBlockChild[]} children - The function block children to normalize.
+   */
+  static unwrapForeachContent(children) {
+    children.forEach((logicControlBlock, index) => {
+      const contentBlock = children[index + 1];
+      if (!(logicControlBlock instanceof RTELogicControlBlock) ||
+        logicControlBlock.statementText !== 'FOREACH' ||
+        !(contentBlock instanceof RTETextBlock)) {
+        return;
+      }
+      contentBlock.children.forEach((node) => {
+        const inlineHtml = node.getAnnotationByType(NodeAnnotationTypeEnum.INLINE_HTML);
+        if ((inlineHtml === null || inlineHtml === void 0 ? void 0 : inlineHtml.htmlTag) !== 'div')
+          return;
+        if (inlineHtml.child) {
+          node.annotationMap.set(NodeAnnotationTypeEnum.INLINE_HTML, inlineHtml.child);
+        }
+        else {
+          node.annotationMap.delete(NodeAnnotationTypeEnum.INLINE_HTML);
+        }
+      });
+    });
+  }
   /**
    * Converts the RTEFunctionBlock and its children to an HTML string.
    *

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

@@ -39,6 +39,7 @@ export class DivToFunctionBlockStrategy extends ElementToDTOStrategy {
    * @inheritDoc
    */
   appendChildBlocks(currentBlock, childBlocks) {
+    RTEFunctionBlock.unwrapForeachContent(childBlocks);
     currentBlock.children = childBlocks.map((block) => {
       block.parent = currentBlock;
       return block;

package/dist/collection/components/vega-rich-text-editor/extensions/paste/controllers/chooser-positioner.js

@@ -0,0 +1,107 @@
+/** Computes paste chooser placement from the paste pointer or saved caret range. */
+export class ChooserPositioner {
+  constructor(getHostElement, getSelectionRange) {
+    this.getHostElement = getHostElement;
+    this.getSelectionRange = getSelectionRange;
+  }
+  /**
+   * @param {ClipboardEvent} event Originating paste event.
+   * @returns {ChooserPosition} Position in viewport coordinates.
+   */
+  compute(event) {
+    var _a, _b, _c;
+    const hostEl = this.getHostElement();
+    if (!hostEl) {
+      return { left: 0, top: 0, placement: ['bottom', 'top'] };
+    }
+    const hostRect = hostEl.getBoundingClientRect();
+    const viewportHeight = (_b = (_a = hostEl.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.innerHeight) !== null && _b !== void 0 ? _b : window.innerHeight;
+    const pointerEvent = event;
+    const hasPointer = typeof pointerEvent.clientX === 'number' &&
+      pointerEvent.clientX > 0 &&
+      typeof pointerEvent.clientY === 'number' &&
+      pointerEvent.clientY > 0;
+    const caretRect = hasPointer ? null : this.getCaretRect();
+    const CHOOSER_GAP_PX = 8;
+    const CHOOSER_MIN_MARGIN_PX = 12;
+    const CHOOSER_WIDTH_PX = 220;
+    const CHOOSER_FALLBACK_OFFSET_PX = 40;
+    const CHOOSER_MIN_VISIBLE_BELOW_SPACE_PX = 88;
+    const baseLeft = hasPointer
+      ? pointerEvent.clientX
+      : (_c = caretRect === null || caretRect === void 0 ? void 0 : caretRect.left) !== null && _c !== void 0 ? _c : hostRect.left + CHOOSER_MIN_MARGIN_PX;
+    const baseTop = hasPointer
+      ? pointerEvent.clientY
+      : caretRect
+        ? caretRect.bottom
+        : hostRect.top + CHOOSER_FALLBACK_OFFSET_PX;
+    const maxLeft = Math.max(hostRect.left + CHOOSER_MIN_MARGIN_PX, hostRect.right - CHOOSER_WIDTH_PX);
+    const left = Math.min(Math.max(baseLeft, hostRect.left + CHOOSER_MIN_MARGIN_PX), maxLeft);
+    const top = Math.max(baseTop + CHOOSER_GAP_PX, hostRect.top + CHOOSER_MIN_MARGIN_PX);
+    const availableBelow = viewportHeight - top - CHOOSER_MIN_MARGIN_PX;
+    const availableAbove = top - CHOOSER_MIN_MARGIN_PX;
+    const placement = availableBelow >= CHOOSER_MIN_VISIBLE_BELOW_SPACE_PX || availableBelow >= availableAbove
+      ? ['bottom', 'top']
+      : ['top', 'bottom'];
+    return { left, top, placement };
+  }
+  /** @returns {DOMRect | null} Best available caret rectangle. */
+  getCaretRect() {
+    const range = this.getSelectionRange();
+    if (!range) {
+      return null;
+    }
+    const rect = range.getBoundingClientRect();
+    if (!this.isUnavailableRect(rect)) {
+      return rect;
+    }
+    const domRectList = range.getClientRects();
+    if (domRectList.length > 0) {
+      return domRectList[0];
+    }
+    return this.getRangeContainerRect(range);
+  }
+  /**
+   * @param {DOMRect} rect Rectangle to inspect.
+   * @returns {boolean} Whether the rectangle has no usable position or dimensions.
+   */
+  isUnavailableRect(rect) {
+    return rect.width === 0 && rect.height === 0 && rect.left === 0 && rect.top === 0;
+  }
+  /**
+   * @param {Range} range Selection range whose container should be measured.
+   * @returns {DOMRect | null} Best available rectangle for the range container.
+   */
+  getRangeContainerRect(range) {
+    var _a, _b, _c, _d, _e, _f;
+    const containerNode = (_a = range.startContainer) !== null && _a !== void 0 ? _a : null;
+    if (!containerNode) {
+      return null;
+    }
+    if (containerNode.nodeType === Node.ELEMENT_NODE) {
+      const containerElement = containerNode;
+      const previousNode = (_b = containerElement.childNodes[range.startOffset - 1]) !== null && _b !== void 0 ? _b : null;
+      const currentNode = (_c = containerElement.childNodes[range.startOffset]) !== null && _c !== void 0 ? _c : null;
+      return ((_e = (_d = this.getNodeRect(previousNode)) !== null && _d !== void 0 ? _d : this.getNodeRect(currentNode)) !== null && _e !== void 0 ? _e : this.getNodeRect(containerElement));
+    }
+    return (_f = this.getNodeRect(containerNode)) !== null && _f !== void 0 ? _f : this.getNodeRect(containerNode.parentNode);
+  }
+  /**
+   * @param {Node | null} node DOM node to measure.
+   * @returns {DOMRect | null} Element-backed rectangle for the node.
+   */
+  getNodeRect(node) {
+    var _a, _b;
+    if (!node) {
+      return null;
+    }
+    if (node.nodeType === Node.TEXT_NODE) {
+      return (_b = (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : null;
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const rect = node.getBoundingClientRect();
+      return this.isUnavailableRect(rect) ? null : rect;
+    }
+    return null;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/paste/controllers/paste-chooser-controller.js

@@ -0,0 +1,91 @@
+import { RTEPasteChooserUI } from '../paste-chooser-ui';
+/** Owns chooser rendering and all listener bookkeeping used to dismiss it. */
+export class PasteChooserController {
+  constructor(positioner, onModeSelect, onClearPayload) {
+    this.positioner = positioner;
+    this.onModeSelect = onModeSelect;
+    this.onClearPayload = onClearPayload;
+    this.chooserUI = null;
+    this.listenerDocument = null;
+    this.listenerWindow = null;
+    this.contentHostEl = null;
+    /**
+     * @param {Event} event Pointer event captured on the document.
+     */
+    this.handleOutsidePointerDown = (event) => {
+      if (!this.chooserUI) {
+        return;
+      }
+      const eventPath = typeof event.composedPath === 'function' ? event.composedPath() : [];
+      if (!this.chooserUI.includesEventPath(eventPath)) {
+        this.clear();
+      }
+    };
+    /**
+     * @param {KeyboardEvent} event Keyboard event captured on the document.
+     */
+    this.handleOutsideKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        this.clear();
+      }
+    };
+    /**
+     * Clears the chooser when a relevant scroll container scrolls.
+     *
+     * @returns {void}
+     */
+    this.handleOutsideScroll = () => this.clear();
+  }
+  /**
+   * @returns {RTEPasteChooserUI | null} Current chooser UI, or `null` when closed.
+   */
+  get ui() {
+    return this.chooserUI;
+  }
+  /**
+   * @param {HTMLElement | null} hostEl Rich text editor host element.
+   * @param {HTMLElement | null} contentHostEl Scrollable content host element.
+   * @param {ClipboardEvent} pasteEvent Originating paste event used for positioning.
+   * @param {boolean} showWordOption Whether to display the Word paste option.
+   */
+  open(hostEl, contentHostEl, pasteEvent, showWordOption) {
+    var _a, _b, _c;
+    const hostRoot = (_a = hostEl === null || hostEl === void 0 ? void 0 : hostEl.shadowRoot) !== null && _a !== void 0 ? _a : null;
+    if (!hostRoot || !hostEl) {
+      return;
+    }
+    this.clear(false);
+    const position = this.positioner.compute(pasteEvent);
+    this.chooserUI = new RTEPasteChooserUI(hostRoot, { onModeSelect: this.onModeSelect }, { showWordOption });
+    this.chooserUI.open(position);
+    this.contentHostEl = contentHostEl;
+    this.listenerDocument = hostEl.ownerDocument;
+    this.listenerWindow = this.listenerDocument.defaultView;
+    this.listenerDocument.addEventListener('mousedown', this.handleOutsidePointerDown, true);
+    this.listenerDocument.addEventListener('keydown', this.handleOutsideKeyDown, true);
+    this.listenerDocument.addEventListener('scroll', this.handleOutsideScroll, true);
+    (_b = this.listenerWindow) === null || _b === void 0 ? void 0 : _b.addEventListener('scroll', this.handleOutsideScroll, true);
+    (_c = this.contentHostEl) === null || _c === void 0 ? void 0 : _c.addEventListener('scroll', this.handleOutsideScroll);
+  }
+  /**
+   * @param {boolean} [clearPayload] Whether to also clear the pending paste payload.
+   */
+  clear(clearPayload = true) {
+    var _a, _b, _c;
+    (_a = this.contentHostEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.handleOutsideScroll);
+    this.contentHostEl = null;
+    (_b = this.listenerWindow) === null || _b === void 0 ? void 0 : _b.removeEventListener('scroll', this.handleOutsideScroll, true);
+    this.listenerWindow = null;
+    if (this.listenerDocument) {
+      this.listenerDocument.removeEventListener('mousedown', this.handleOutsidePointerDown, true);
+      this.listenerDocument.removeEventListener('keydown', this.handleOutsideKeyDown, true);
+      this.listenerDocument.removeEventListener('scroll', this.handleOutsideScroll, true);
+      this.listenerDocument = null;
+    }
+    (_c = this.chooserUI) === null || _c === void 0 ? void 0 : _c.destroy();
+    this.chooserUI = null;
+    if (clearPayload) {
+      this.onClearPayload();
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/paste/controllers/paste-event-interceptor.js

@@ -0,0 +1,47 @@
+/** Owns the native paste listener and synchronous clipboard payload capture. */
+export class PasteEventInterceptor {
+  constructor(selectionSnapshotService, onPasteCaptured) {
+    this.selectionSnapshotService = selectionSnapshotService;
+    this.onPasteCaptured = onPasteCaptured;
+    this.editableEl = null;
+    /**
+     * @param {ClipboardEvent} event Native paste event to capture.
+     */
+    this.handlePasteEvent = (event) => {
+      const clipboardData = event.clipboardData;
+      if (!clipboardData) {
+        return;
+      }
+      const html = clipboardData.getData('text/html') || '';
+      const text = clipboardData.getData('text/plain') || '';
+      const rtf = clipboardData.getData('text/rtf') || '';
+      if (!html && !text) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      const snapshot = this.selectionSnapshotService.capture();
+      const files = clipboardData.files ? Array.from(clipboardData.files) : [];
+      this.onPasteCaptured({ html, text, range: snapshot.range, selectedNodes: snapshot.selectedNodes, files, rtf }, event);
+    };
+  }
+  /**
+   * @param {HTMLDivElement | null} editableEl Editable content element to observe.
+   */
+  attach(editableEl) {
+    var _a;
+    this.detach();
+    this.editableEl = editableEl;
+    (_a = this.editableEl) === null || _a === void 0 ? void 0 : _a.addEventListener('paste', this.handlePasteEvent);
+  }
+  /**
+   * Detaches the current native paste listener.
+   */
+  detach() {
+    var _a;
+    (_a = this.editableEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('paste', this.handlePasteEvent);
+    this.editableEl = null;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/paste/controllers/selection-snapshot-service.js

@@ -0,0 +1,54 @@
+/** Captures and restores native and editor selection state around chooser interaction. */
+export class SelectionSnapshotService {
+  constructor(getContext) {
+    this.getContext = getContext;
+  }
+  /**
+   * @returns {SelectionSnapshot} Captured native and editor selection state.
+   */
+  capture() {
+    var _a;
+    const context = this.getContext();
+    const selection = context === null || context === void 0 ? void 0 : context.getSelection();
+    const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0).cloneRange() : null;
+    const selectedNodes = ((_a = context === null || context === void 0 ? void 0 : context.getSelectedNodes) === null || _a === void 0 ? void 0 : _a.call(context)) || [];
+    return { range, selectedNodes: [...selectedNodes] };
+  }
+  /**
+   * @param {PendingPastePayload} payload Paste payload containing captured selection state.
+   */
+  restore(payload) {
+    this.restoreRange(payload.range);
+    this.restoreControllerState(payload);
+  }
+  /**
+   * @param {PendingPastePayload} payload Paste payload containing editor selection state.
+   */
+  restoreControllerState(payload) {
+    const context = this.getContext();
+    if (!payload.range || !context) {
+      return;
+    }
+    const rangeOptions = {
+      startNode: payload.range.startContainer,
+      endNode: payload.range.endContainer,
+      startOffset: payload.range.startOffset,
+      endOffset: payload.range.endOffset,
+    };
+    context.setSelectedNodes(payload.selectedNodes || [], rangeOptions);
+  }
+  /**
+   * @param {Range | null} range Native selection range to restore.
+   */
+  restoreRange(range) {
+    var _a;
+    if (!range) {
+      return;
+    }
+    const selection = (_a = this.getContext()) === null || _a === void 0 ? void 0 : _a.getSelection();
+    if (selection) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/paste/parse-local-images-helper/image-extractor.js

@@ -0,0 +1,17 @@
+import { PasteImageParser } from './paste-image-parser';
+/** Extracts local image previews from strategy output. */
+export class ImageExtractor {
+  constructor(parser = new PasteImageParser()) {
+    this.parser = parser;
+  }
+  /**
+   * @param {string} html HTML content containing local image references.
+   * @param {File[]} files Clipboard image files.
+   * @param {string} rtf Rich text clipboard content used to resolve images.
+   * @returns {ParseLocalImagesResult} HTML and extracted local image previews.
+   */
+  extract(html, files, rtf) {
+    const clipboardFileContent = { files, rtf };
+    return this.parser.parseLocalImages(html, clipboardFileContent);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/paste/paste-chooser-ui.js

@@ -112,6 +112,7 @@ export class RTEPasteChooserUI {
     itemsContainer.setAttribute('slot', 'items');
     const dropdownItems = [
       this.createDropdownItem(doc, RTEPasteMode.RICH, VegaInternalTranslation.t('Use rich text'), RTEPasteChooserUI.CHOOSER_RICH_ATTR),
+      this.createDropdownItem(doc, RTEPasteMode.PLAIN, VegaInternalTranslation.t('Use plain text'), RTEPasteChooserUI.CHOOSER_PLAIN_ATTR),
     ];
     if (this.options.showWordOption) {
       dropdownItems.push(this.createDropdownItem(doc, RTEPasteMode.WORD, VegaInternalTranslation.t('Use Word'), RTEPasteChooserUI.CHOOSER_WORD_ATTR));
@@ -120,7 +121,7 @@ export class RTEPasteChooserUI {
     dropdownEl.append(itemsContainer);
     dropdownEl.addEventListener('vegaDropdownClick', (event) => {
       const mode = event.detail;
-      if (mode === RTEPasteMode.RICH || mode === RTEPasteMode.WORD) {
+      if (mode === RTEPasteMode.RICH || mode === RTEPasteMode.PLAIN || mode === RTEPasteMode.WORD) {
         this.callbacks.onModeSelect(mode);
       }
     });
@@ -150,5 +151,6 @@ export class RTEPasteChooserUI {
 })();
 RTEPasteChooserUI.CHOOSER_ATTR = 'data-rte-paste-chooser';
 RTEPasteChooserUI.CHOOSER_RICH_ATTR = 'data-rte-paste-type-rich';
+RTEPasteChooserUI.CHOOSER_PLAIN_ATTR = 'data-rte-paste-type-plain';
 RTEPasteChooserUI.CHOOSER_WORD_ATTR = 'data-rte-paste-type-word';
 RTEPasteChooserUI.CHOOSER_TRIGGER_ATTR = 'data-rte-paste-trigger';