@globalpayments/vega 2.37.0 → 2.37.2

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/insert-composition-text-controller.js

@@ -0,0 +1,244 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { RTETextNode } from '../../dto/nodes/text-node';
+import { InsertNodesBeforeAction } from '../../dto/actions/insert-nodes-before-node-action';
+import stateEntityRenderingRegistry from './state-entity-rendering-registry';
+import { ZERO_WIDTH_SPACE } from '../../constants/constant';
+import { UpdateTextAction } from '../../dto/actions/update-text-action';
+import changeManager from '../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalRichTextEditDeleteSelectedNodes } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+/** Handles inserting composition text into a VegaRTEContent based on the current selection and input event. User input character will trigger this callback */
+export class InsertCompositionTextController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.insertCompositionTextEndFlag = true;
+    this.observerOptions = {
+      characterData: true,
+      characterDataOldValue: true,
+      subtree: true,
+      childList: true,
+    };
+    /**
+     * The current method is called when the insert text is update by the Pinyin input or the word correction plugin.
+     *
+     * @param {MutationRecord[]} records - The mutation record object array.
+     */
+    this.updateTextFromDom = (records) => {
+      let updateFlag = false;
+      if (this.insertCompositionTextEndFlag !== false) {
+        records.forEach((record) => {
+          const { target, oldValue } = record;
+          if (target.nodeType === Node.TEXT_NODE && target.parentElement) {
+            const richTextNode = stateEntityRenderingRegistry.getEntityByDOM(target.parentElement);
+            const newValue = target.textContent;
+            if (richTextNode instanceof RTETextNode) {
+              updateFlag = this.updateCurrentNodeText(richTextNode, newValue, oldValue);
+            }
+            else if (newValue) {
+              // The text element should removed if insert text to the image block.
+              target.parentElement.removeChild(target);
+              updateFlag = true;
+            }
+          }
+        });
+      }
+      if (updateFlag) {
+        void this.valueController.flushChanges(this.value);
+      }
+    };
+    /**
+     * Processes mutation records related to character data and updates the text content of a rich text node accordingly.
+     *
+     * @param {MutationRecord[]} records - Each `MutationRecord` object represents a single mutation that occurred in the DOM.
+     */
+    this.handleObserver = (records) => {
+      if (records.every((record) => record.type === 'characterData')) {
+        this.updateTextFromDom(records);
+      }
+    };
+    /**
+     * An event handler function that is triggered when the composition of text input starts. In this case,
+     *  it sets the `insertCompositionTextEndFlag` property of the `UserInputController` class to `false`.
+     */
+    this.handleCompositionStart = () => {
+      this.insertCompositionTextEndFlag = false;
+      changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditDeleteSelectedNodes), { host: this.host, detail: true });
+    };
+    /**
+     * An event handler function that is triggered when the composition of text input ends. In this case,
+     *  it sets the `insertCompositionTextEndFlag` property of the `UserInputController` class to `true`.
+     *
+     * @param {CompositionEvent} event The composition event instance
+     */
+    this.handleCompositionEnd = (event) => {
+      this.insertCompositionTextEndFlag = true;
+      const insertData = event.data;
+      if (insertData) {
+        this.dispatchInsertTextEvent(insertData);
+      }
+    };
+  }
+  /**
+   * The function `initMutationObserver` initializes a MutationObserver on an editable HTML element if it exists.
+   */
+  initMutationObserver() {
+    if (this.mutationObserver) {
+      const editableElement = this.getEditableElementRef();
+      if (editableElement) {
+        this.mutationObserver.disconnect();
+        this.mutationObserver.observe(editableElement, this.observerOptions);
+      }
+    }
+  }
+  /**
+   * Disconnects the mutation observer if it exists.
+   */
+  removeObserver() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  }
+  /**
+   * The method is to get the composition text insert end or not.
+   *
+   * @returns {boolean} The false is main that insert composition text process is end.
+   */
+  isComposing() {
+    return !this.insertCompositionTextEndFlag;
+  }
+  /**
+   * Adds event listener to an editable HTML element to handle composition text insert actions.
+   */
+  addCompositionTextEventListener() {
+    const editableElement = this.getEditableElementRef();
+    if (editableElement) {
+      editableElement.addEventListener('compositionstart', this.handleCompositionStart);
+      editableElement.addEventListener('compositionend', this.handleCompositionEnd);
+    }
+    this.mutationObserver = new MutationObserver(this.handleObserver);
+    this.initMutationObserver();
+  }
+  /**
+   * Removes event listener to an editable HTML element to handle composition text insert actions.
+   */
+  removeCompositionTextEventListener() {
+    const editableElement = this.getEditableElementRef();
+    if (editableElement) {
+      editableElement.removeEventListener('compositionstart', this.handleCompositionStart);
+      editableElement.removeEventListener('compositionend', this.handleCompositionEnd);
+    }
+    this.removeObserver();
+  }
+  /**
+   * re-connect the observer after the props change and component did render
+   */
+  reConnectObserver() {
+    this.initMutationObserver();
+  }
+  /**
+   * Insert text to a line break node need a special logic if the line break has a next text node.
+   *
+   * @param {RTETextNode} currentNode The current line break node, the text value is \n
+   */
+  appendLineBreakNode(currentNode) {
+    const textBlock = currentNode.parentBlock;
+    const index = textBlock.nodes.indexOf(currentNode);
+    if (textBlock.nodes[index + 1]) {
+      const newTextNode = currentNode.cloneWithText('\n');
+      textBlock.apply(new InsertNodesBeforeAction(textBlock.nodes[index + 1], newTextNode));
+    }
+  }
+  /**
+   * Updates the text content of a rich text node and handles line breaks.
+   *
+   * @param {RTETextNode} richTextNode - The current rich text node.
+   * @param {string} newValue - The target element textContent
+   * @param {Nullable<string>} oldValue - The target element old textContent
+   * @returns {Nullable<boolean>} The node text is updated or not
+   */
+  updateCurrentNodeText(richTextNode, newValue, oldValue) {
+    const insertText = this.removeZeroWidthSpace(newValue.replace(/(\n)$/, ''));
+    if (richTextNode.text !== insertText) {
+      const { startOffset } = this.selectionController.getCurrentRange();
+      const currentIsLineBreakNode = richTextNode.text === '\n';
+      richTextNode.apply(new UpdateTextAction(insertText));
+      if (currentIsLineBreakNode) {
+        this.appendLineBreakNode(richTextNode);
+      }
+      const lengthGap = oldValue ? oldValue.length - newValue.length : 0;
+      const newOffset = Math.min(insertText.length, startOffset - lengthGap);
+      this.selectionController.enqueueSelectionRangeFutureState(richTextNode, Math.max(0, newOffset));
+      return true;
+    }
+  }
+  /**
+   * The function `getEditableElementRef` returns a reference to the editable HTMLDivElement within a rich text editor.
+   *
+   * @returns {HTMLDivElement|null} A reference to an HTMLDivElement element that is editable.
+   */
+  getEditableElementRef() {
+    if (!this.editableElementRef) {
+      this.editableElementRef = this.vegaRichTextEditorRenderer.getRTEEditableElementRef();
+    }
+    return this.editableElementRef;
+  }
+  /**
+   * Remove the ZERO_WIDTH_SPACE from the text.
+   *
+   * @param {string} text The input text that could include ZERO_WIDTH_SPACE.
+   * @returns {string} The result text.
+   */
+  removeZeroWidthSpace(text) {
+    if (text.startsWith(ZERO_WIDTH_SPACE)) {
+      return text.slice(ZERO_WIDTH_SPACE.length);
+    }
+    else if (text.endsWith(ZERO_WIDTH_SPACE)) {
+      return text.slice(0, text.length - ZERO_WIDTH_SPACE.length);
+    }
+    return text;
+  }
+  /**
+   * Dispatch a insert text event to handle the composition text insert logic.
+   *
+   * @param {string} text - The text need to insert.
+   */
+  dispatchInsertTextEvent(text) {
+    const inputEvent = new CustomEvent('beforeinput');
+    inputEvent['data'] = text;
+    inputEvent['inputType'] = 'insertText';
+    this.editableElementRef.dispatchEvent(inputEvent);
+  }
+}
+__decorate([
+  MapToComponentField()
+], InsertCompositionTextController.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentField()
+], InsertCompositionTextController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], InsertCompositionTextController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], InsertCompositionTextController.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], InsertCompositionTextController.prototype, "userInputController", void 0);
+__decorate([
+  MapToComponentField()
+], InsertCompositionTextController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], InsertCompositionTextController.prototype, "addCompositionTextEventListener", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], InsertCompositionTextController.prototype, "removeCompositionTextEventListener", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], InsertCompositionTextController.prototype, "reConnectObserver", null);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/selection-controller.js

@@ -134,17 +134,22 @@ export class SelectionController extends VegaSlimmer {
    */
   setSelectionRange(range) {
     const selection = this.getSelection();
-    selection.removeAllRanges();
-    selection.addRange(range);
-    this.saveSelection();
+    if (selection) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+      this.saveSelection();
+    }
   }
   /**
    * Save the current selection range detail
    */
   saveSelection() {
     const selection = this.getSelection();
-    // The range is out of date if the queue is not empty, so we should not update the RTERange
-    if (selection && selection.rangeCount > 0 && this.updateCaretPositionTaskQueue.queue.length === 0) {
+    // The range is out of date if the queue is not empty, or the range is update by the composition text insert, so we should not update the RTERange
+    if (selection &&
+      selection.rangeCount > 0 &&
+      this.updateCaretPositionTaskQueue.queue.length === 0 &&
+      !this.insertCompositionTextController.isComposing()) {
       const range = selection.getRangeAt(0);
       const { startContainer: startNode, endContainer: endNode, startOffset, endOffset } = range;
       this.currentRange = this.currentRange.updateRTERange({ startNode, endNode, startOffset, endOffset }, range);
@@ -277,6 +282,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], SelectionController.prototype, "insertCompositionTextController", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], SelectionController.prototype, "connectedCallback", null);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/user-input-controller.js

@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
-import stateEntity from './state-entity-rendering-registry';
 import { InsertTextHandler } from './helper/input-event-handler/insert-text-handler';
 import { InsertParagraphHandler } from './helper/input-event-handler/insert-paragraph-handler';
 import { InsertLineBreakHandler } from './helper/input-event-handler/insert-line-break-handler';
@@ -13,7 +12,7 @@ import { DeleteContentHandler } from './helper/input-event-handler/delete-conten
 import { VegaRTEContent } from '../../dto/content-state';
 import { InsertPasteHandler } from './helper/input-event-handler/insert-paste-handler';
 import { generateUUID } from '../../../../utils/misc';
-/** Used to monitoring the user input actions by event listener and mutationObserver */
+/** Used to monitoring the user input actions by event listener */
 export class UserInputController extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -22,91 +21,47 @@ export class UserInputController extends VegaSlimmer {
     this.insertLineBreakHandler = new InsertLineBreakHandler();
     this.deleteContentHandler = new DeleteContentHandler();
     this.insertPasteHandler = new InsertPasteHandler();
-    this.observerOptions = {
-      characterData: true,
-      characterDataOldValue: true,
-      subtree: true,
-      childList: true,
-    };
     /**
      * When a user performs an input action within the editable element, this function is triggered.
      *
      * @param {InputEvent} e the before input event object
      */
     this.handleUserInputAction = (e) => {
-      this.removeObserver();
+      const inputType = e.inputType;
       e.preventDefault();
       this.initValueIfEmpty();
+      // The insertCompositionText type input event can not be prevented, so we process the current action by insertCompositionTextController.
+      if (inputType === 'insertCompositionText') {
+        return;
+      }
+      this.insertCompositionTextController.removeObserver();
       let updateFlag = false;
-      switch (e.inputType) {
+      switch (inputType) {
         case 'insertParagraph':
           updateFlag = true;
-          this.insertParagraphHandler.execute(this.value, this.selectionController, e);
+          this.insertParagraphHandler.execute(this.value, this.selectionController, this.host, e);
           break;
         case 'insertText':
           updateFlag = true;
-          this.insertTextHandler.execute(this.value, this.selectionController, e);
+          this.insertTextHandler.execute(this.value, this.selectionController, this.host, e);
           break;
         case 'insertLineBreak':
           updateFlag = true;
-          this.insertLineBreakHandler.execute(this.value, this.selectionController, e);
+          this.insertLineBreakHandler.execute(this.value, this.selectionController, this.host, e);
           break;
         case 'deleteContentBackward':
           updateFlag = true;
-          this.deleteContentHandler.execute(this.value, this.selectionController, e);
+          this.deleteContentHandler.execute(this.value, this.selectionController, this.host, e);
           break;
         case 'insertFromPaste':
           updateFlag = true;
-          this.insertPasteHandler.execute(this.value, this.selectionController, e);
+          this.insertPasteHandler.execute(this.value, this.selectionController, this.host, e);
           break;
       }
       if (updateFlag) {
         this.notifyComponentFlushValue();
       }
     };
-    /**
-     * Processes mutation records related to character data and updates the text content of a rich text node accordingly.
-     *
-     * @param {MutationRecord[]} records - Each `MutationRecord` object represents a single mutation that occurred in the DOM.
-     */
-    this.handleObserver = (records) => {
-      let updateFlag = false;
-      if (records.every((record) => record.type === 'characterData')) {
-        records.forEach((record) => {
-          const { target } = record;
-          if (target.nodeType === Node.TEXT_NODE && target.parentElement) {
-            const richTextNode = stateEntity.getEntityByDOM(target.parentElement);
-            if (richTextNode && richTextNode['text'] !== target.textContent) {
-              updateFlag = true;
-              richTextNode['text'] = target.textContent;
-            }
-          }
-        });
-        if (updateFlag) {
-          this.notifyComponentFlushValue();
-        }
-      }
-    };
-  }
-  /**
-   * The function `initMutationObserver` initializes a MutationObserver on an editable HTML element if it exists.
-   */
-  initMutationObserver() {
-    if (this.mutationObserver) {
-      const editableElement = this.getEditableElementRef();
-      if (editableElement) {
-        this.mutationObserver.disconnect();
-        this.mutationObserver.observe(editableElement, this.observerOptions);
-      }
-    }
-  }
-  /**
-   * Disconnects the mutation observer if it exists.
-   */
-  removeObserver() {
-    if (this.mutationObserver) {
-      this.mutationObserver.disconnect();
-    }
   }
   /**
    * Adds event listener to an editable HTML element to handle user input actions.
@@ -117,8 +72,6 @@ export class UserInputController extends VegaSlimmer {
       editableElement.addEventListener('beforeinput', this.handleUserInputAction);
       editableElement.addEventListener('drop', this.preventDropEvent);
     }
-    this.mutationObserver = new MutationObserver(this.handleObserver);
-    this.initMutationObserver();
   }
   /**
    * Removes event listener for user input actions from an editable HTML div element.
@@ -129,13 +82,6 @@ export class UserInputController extends VegaSlimmer {
       editableElement.removeEventListener('beforeinput', this.handleUserInputAction);
       editableElement.removeEventListener('drop', this.preventDropEvent);
     }
-    this.removeObserver();
-  }
-  /**
-   * re-connect the observer after the props change and component did render
-   */
-  reConnectObserver() {
-    this.initMutationObserver();
   }
   /**
    * The function `getEditableElementRef` returns a reference to the editable HTMLDivElement within a rich text editor.
@@ -190,12 +136,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], UserInputController.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentField()
+], UserInputController.prototype, "insertCompositionTextController", void 0);
 __decorate([
   MapToComponentMethod('componentDidLoad')
 ], UserInputController.prototype, "addActionListener", null);
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], UserInputController.prototype, "removeActionListener", null);
-__decorate([
-  MapToComponentMethod('componentDidRender')
-], UserInputController.prototype, "reConnectObserver", null);

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

@@ -40,6 +40,8 @@ import { InsertImageController } from './slimmers/controllers/insert-image-contr
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { FocusController } from './slimmers/controllers/focus-controller';
 import { TextNodeColorController } from './slimmers/controllers/text-node-color-controller';
+import { InsertCompositionTextController } from './slimmers/controllers/insert-composition-text-controller';
+import { DeleteSelectedNodesController } from './slimmers/controllers/delete-selected-nodes-controller';
 /**
  * @vegaVersion 2.34.0
  */
@@ -86,9 +88,11 @@ export class VegaRichTextEditor {
     this.richTextContentController = new RichTextContentController(this);
     this.userInputController = new UserInputController();
     this.insertImageController = new InsertImageController();
+    this.insertCompositionTextController = new InsertCompositionTextController();
     this.imageInsertedEventEmitter = createEventEmitSlimmer(VegaRichTextEditor, VegaImageInserted);
     this.changeEventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaRichTextEditorRenderer.getRichTextWrapperRef());
     this.textNodeColorController = new TextNodeColorController();
+    this.deleteSelectedNodesController = new DeleteSelectedNodesController();
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
     this.isInDarkMode = VegaThemeManager.isDarkMode();
@@ -142,6 +146,7 @@ export class VegaRichTextEditor {
      * Only in exceptional cases should the original data in the VegaRTEContentBlock type be used.
      *
      * @vegaVersion 2.34.0
+     * @defaultValue [{id:'UUID', type:'paragraph', nodes:[{id: 'UUID',type: 'text',text:''}]}]
      */
     // eslint-disable-next-line @stencil/strict-mutable
     this.value = VegaRTEContent.createEmptyContent();
@@ -356,6 +361,9 @@ export class VegaRichTextEditor {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.34.0"
+          }, {
+            "name": "defaultValue",
+            "text": "[{id:'UUID', type:'paragraph', nodes:[{id: 'UUID',type: 'text',text:''}]}]"
           }],
         "text": "Specifies the value of the rich text editor, which can be either VegaRTEContent or VegaRTEContentBlock.\nIt is recommended to use the VegaRTEContent type.\nOnly in exceptional cases should the original data in the VegaRTEContentBlock type be used."
       },
@@ -471,15 +479,12 @@ export class VegaRichTextEditor {
         "text": "An event emitter notifying a value change."
       },
       "complexType": {
-        "original": "Array<VegaRTEContentBlock>",
-        "resolved": "VegaRTEContentBlock[]",
+        "original": "VegaRTEContent",
+        "resolved": "VegaRTEContent",
         "references": {
-          "Array": {
-            "location": "global"
-          },
-          "VegaRTEContentBlock": {
+          "VegaRTEContent": {
             "location": "import",
-            "path": "./interface"
+            "path": "./dto/content-state"
           }
         }
       }
@@ -500,15 +505,12 @@ export class VegaRichTextEditor {
         "text": "An event emitter notifying a value change."
       },
       "complexType": {
-        "original": "Array<VegaRTEContentBlock>",
-        "resolved": "VegaRTEContentBlock[]",
+        "original": "VegaRTEContent",
+        "resolved": "VegaRTEContent",
         "references": {
-          "Array": {
-            "location": "global"
-          },
-          "VegaRTEContentBlock": {
+          "VegaRTEContent": {
             "location": "import",
-            "path": "./interface"
+            "path": "./dto/content-state"
           }
         }
       }
@@ -667,6 +669,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "insertImageController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "insertCompositionTextController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "imageInsertedEventEmitter", void 0);
@@ -676,3 +681,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "textNodeColorController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "deleteSelectedNodesController", void 0);

package/dist/collection/components/vega-signature-capture/vega-signature-capture.js

@@ -92,6 +92,7 @@ export class VegaSignatureCapture {
      *    of the signature capture.
      *
      * @vegaVersion 2.19.0
+     * @defaultValue v-internal-icon signature
      */
     this.placeholderIcon = VegaInternalIconManager.getIconKey('signature');
     /**
@@ -285,6 +286,9 @@ export class VegaSignatureCapture {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.19.0"
+          }, {
+            "name": "defaultValue",
+            "text": "v-internal-icon signature"
           }],
         "text": "Specifies an icon or symbol that appears before the placeholder,\n   providing visual context or enhancing the aesthetic appearance\n   of the signature capture."
       },

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-editable-controller.js

@@ -149,9 +149,8 @@ export class VegaTableEditableController extends VegaSlimmer {
     if (!this.canMethodBeInvokedInCurrentState('getRowsData')) {
       return;
     }
-    const formValues = await this.vegaTableBodyRenderer
-      .getTableFormRef()
-      .getValue();
+    const tableFormRef = this.vegaTableBodyRenderer.getTableFormRef();
+    const formValues = tableFormRef ? await tableFormRef.getValue() : [];
     return [
       ...this.vegaTableDataSourceController.getCurrentData().map((record) => {
         const value = formValues[`${VegaTableEditableController.rowFormKeyPrefix}${this.vegaTableDataSourceController.getRecordKey(record)}`];

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-renderer.js

@@ -22,7 +22,8 @@ export class VegaTableRenderer extends VegaSlimmer {
           this.vegaTableColGroupRenderer.render(),
           this.vegaTableHeaderRenderer.render(),
         ],
-        this.dataSource.length > 0 && this.vegaTableBodyRenderer.render(),
+        (this.dataSource.length > 0 || this.editingRows.size > 0) &&
+          this.vegaTableBodyRenderer.render(),
         this.isTemplateRenderMode && h("slot", null)));
     };
     this.renderEmpty = () => {
@@ -94,3 +95,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "isTemplateRenderMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "editingRows", void 0);

package/dist/collection/helpers/event-manager/event-id/vega-internal-event-id.js

@@ -40,3 +40,4 @@ export const VegaInternalRichTextImageClick = new VegaInternalEventID('richTextI
 export const VegaInternalRichTextImageDeleteButtonClicked = new VegaInternalEventID('richTextImageDeleteButtonClicked');
 export const VegaInternalComponentDidRender = new VegaInternalEventID('componentDidRender');
 export const VegaInternalPopoverUpdateTarget = new VegaInternalEventID('popoverUpdateTarget');
+export const VegaInternalRichTextEditDeleteSelectedNodes = new VegaInternalEventID('richTextEditDeleteSelectedNodes');

package/dist/collection/helpers/formatter/string-formatter/custom-formatter-strategy.js

@@ -1,8 +1,9 @@
+import { StringFormatStrategy } from './string-format-strategy.abstract';
 import { isNonNullable } from '../../../types/type-guard';
 /**
  * Used to format a string using a custom formatter.
  */
-export class CustomFormatterStrategy {
+export class CustomFormatterStrategy extends StringFormatStrategy {
   /**
    * The constructor function takes a CustomStringFormatter parameter and assigns it to the formatter
    * property of the class.
@@ -14,6 +15,7 @@ export class CustomFormatterStrategy {
    * @param {boolean} resetCaretPosition - The caret position should update to the last or keep the current position after format
    */
   constructor(formatter, resetCaretPosition = false) {
+    super();
     this.resetCaretPositionFlag = false;
     this.formatter = formatter;
     this.resetCaretPositionFlag = resetCaretPosition;

package/dist/collection/helpers/formatter/string-formatter/number-mask-strategy.js

@@ -1,14 +1,16 @@
 import { isNonNullable } from '../../../types/type-guard';
+import { StringFormatStrategy } from './string-format-strategy.abstract';
 /**
  * A class for formatting number with the given mask format
  */
-export class NumberMaskStrategy {
+export class NumberMaskStrategy extends StringFormatStrategy {
   /**
    * It creates a new instance of the Mask class.
    *
    * @param {NumberMaskConfig} maskConfig - MaskConfig
    */
   constructor(maskConfig) {
+    super();
     this.maskConfig = { allowNegative: true };
     /**
      * if allow negative, will skip '-', e.g. when input '-' -> '-1.2'