@globalpayments/vega 2.57.1 → 2.59.0

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-paste-handler.js

@@ -1,17 +1,13 @@
 import { BaseHandler } from './base-handler';
-import { AppendChildNodesAction } from '../../../../dto/actions/append-child-nodes-action';
-import { InsertBlocksAfterAction } from '../../../../dto/actions/insert-blocks-after-block';
+import { AppendChildrenAction } from '../../../../dto/actions/append-child-nodes-action';
+import { InsertChildrenAfterAction } from '../../../../dto/actions/insert-children-after-block';
 import { SplitBlockWithNodeAction } from '../../../../dto/actions/split-block-with-node-action';
-import { InsertBlocksBeforeAction } from '../../../../dto/actions/insert-blocks-before-block';
-import { ElementToDtoStrategyProcessor } from '../element-to-dto-strategy/element-to-dto-strategy-processor';
+import { InsertChildrenBeforeAction } from '../../../../dto/actions/insert-children-before-block';
+import ElementToDtoStrategyProcessor from '../element-to-dto-strategy/element-to-dto-strategy-processor';
 /**
  * Handle user paste
  */
 export class InsertPasteHandler extends BaseHandler {
-  constructor() {
-    super(...arguments);
-    this.elementToDTOProcessor = new ElementToDtoStrategyProcessor();
-  }
   /**
    * Update the state value when user paste html elements.
    *
@@ -36,7 +32,7 @@ export class InsertPasteHandler extends BaseHandler {
    * @param { RTEContentBlock[]} blocks - blocks
    */
   insertBlocksToRoot(blocks) {
-    this.currentState.apply(new AppendChildNodesAction(blocks));
+    this.currentState.apply(new AppendChildrenAction(blocks));
   }
   /**
    * Insert the blocks to content
@@ -50,7 +46,7 @@ export class InsertPasteHandler extends BaseHandler {
       const { startOffset } = this.selectionController.getCurrentRange();
       const breakAction = new SplitBlockWithNodeAction(cursorNode, startOffset);
       currentBlock.apply(breakAction);
-      currentBlock.parent.apply(new InsertBlocksAfterAction(currentBlock, ...blocks));
+      currentBlock.parent.apply(new InsertChildrenAfterAction(currentBlock, ...blocks));
       this.switchCaretPositionToNextElement(breakAction.newBlock);
     }
   }
@@ -64,7 +60,7 @@ export class InsertPasteHandler extends BaseHandler {
     /* istanbul ignore next */
     const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parent;
     if (currentBlock) {
-      currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, ...blocks));
+      currentBlock.parent.apply(new InsertChildrenBeforeAction(currentBlock, ...blocks));
       this.switchCaretPositionToNextElement(currentBlock);
     }
   }
@@ -83,8 +79,7 @@ export class InsertPasteHandler extends BaseHandler {
     // eslint-disable-next-line no-restricted-globals
     const tempContainer = document.createElement('div');
     tempContainer.innerHTML = pastedHTML;
-    return this.elementToDTOProcessor
-      .process(Array.from(tempContainer.childNodes))
+    return ElementToDtoStrategyProcessor.process(Array.from(tempContainer.childNodes))
       .filter(Boolean)
       .map((output) => output.toDto())
       .filter(Boolean);
@@ -109,8 +104,11 @@ export class InsertPasteHandler extends BaseHandler {
     const lines = content.split('\n');
     return lines
       .map((line) => {
-      return `<span>${line}</span>`;
+      if (line === '') {
+        return '<p>\n</p>';
+      }
+      return `<p>${line}</p>`;
     })
-      .join('<span>\n</span>');
+      .join('');
   }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-text-handler.js

@@ -2,9 +2,10 @@ import { BaseHandler } from './base-handler';
 import { RTETextBlock } from '../../../../dto/blocks/text-block';
 import { ZERO_WIDTH_SPACE } from '../../../../constants/constant';
 import { RTETextNode } from '../../../../dto/nodes/text-node';
-import { InsertNodesBeforeAction } from '../../../../dto/actions/insert-nodes-before-node-action';
 import { UpdateTextAction } from '../../../../dto/actions/update-text-action';
 import { ReplaceSelectedTextAction } from '../../../../dto/actions/replace-selected-text-action';
+import { InsertChildrenBeforeAction } from '../../../../dto/actions/insert-children-before-block';
+import { InsertTextToDecoratorNodeAction } from '../../../../dto/actions/insert-text-to-decorator-node-action';
 /** Handles inserting text into a VegaRTEContent based on the current selection and input event. User input character will trigger this callback */
 export class InsertTextHandler extends BaseHandler {
   /**
@@ -23,27 +24,32 @@ export class InsertTextHandler extends BaseHandler {
         this.selectionController.enqueueSelectionRangeFutureState(cursorNode, text.length);
       }
       else if (selectedNodes[0] instanceof RTETextNode) {
-        let nextOffset = startOffset + text.length;
-        let updateFlag = false;
-        let cursorNode = selectedNodes[0];
-        if (cursorNode.text === '\n') {
-          cursorNode = this.insertTextToLineBreakNode(cursorNode, text);
-          updateFlag = true;
-        }
-        else {
-          if (startContainer.nodeValue === ZERO_WIDTH_SPACE &&
-            startOffset === ZERO_WIDTH_SPACE.length &&
-            cursorNode.isEmpty()) {
-            startContainer.nodeValue = '';
-            nextOffset = nextOffset - ZERO_WIDTH_SPACE.length;
-          }
-          if (cursorNode instanceof RTETextNode) {
+        if (selectedNodes[0].isContentEditable()) {
+          let nextOffset = startOffset + text.length;
+          let updateFlag = false;
+          let cursorNode = selectedNodes[0];
+          if (cursorNode.text === '\n') {
+            cursorNode = this.insertTextToLineBreakNode(cursorNode, text);
             updateFlag = true;
-            cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
           }
+          else {
+            if (startContainer.nodeValue === ZERO_WIDTH_SPACE &&
+              startOffset === ZERO_WIDTH_SPACE.length &&
+              cursorNode.isEmpty()) {
+              startContainer.nodeValue = '';
+              nextOffset = nextOffset - ZERO_WIDTH_SPACE.length;
+            }
+            if (cursorNode instanceof RTETextNode) {
+              updateFlag = true;
+              cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
+            }
+          }
+          updateFlag &&
+            this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(nextOffset, cursorNode['text'].length));
+        }
+        else {
+          selectedNodes[0].parent.apply(new InsertTextToDecoratorNodeAction(selectedNodes[0], text, startOffset));
         }
-        updateFlag &&
-          this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(nextOffset, cursorNode['text'].length));
       }
     }
     else {
@@ -80,15 +86,17 @@ export class InsertTextHandler extends BaseHandler {
   insertTextToLineBreakNode(lineBreakNode, text) {
     const { startOffset, endOffset } = this.selectionController.getCurrentRange();
     const textBlock = lineBreakNode.parent;
-    const index = textBlock.children.indexOf(lineBreakNode);
-    if (startOffset === 0 && startOffset === endOffset && textBlock.children[index + 1]) {
-      const newTextNode = lineBreakNode.cloneWithText(text);
-      textBlock.apply(new InsertNodesBeforeAction(lineBreakNode, newTextNode));
-      return newTextNode;
-    }
-    else {
-      lineBreakNode.apply(new UpdateTextAction(text));
-      return lineBreakNode;
+    if (textBlock instanceof RTETextBlock) {
+      const index = textBlock.children.indexOf(lineBreakNode);
+      if (startOffset === 0 && startOffset === endOffset && textBlock.children[index + 1]) {
+        const newTextNode = lineBreakNode.cloneWithText(text);
+        textBlock.apply(new InsertChildrenBeforeAction(lineBreakNode, newTextNode));
+        return newTextNode;
+      }
+      else {
+        lineBreakNode.apply(new UpdateTextAction(text));
+        return lineBreakNode;
+      }
     }
   }
 }

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

@@ -5,14 +5,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { RTETextBlock } from '../../dto/blocks/text-block';
 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';
+import { InsertChildrenBeforeAction } from '../../dto/actions/insert-children-before-block';
 /** 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() {
@@ -37,7 +38,9 @@ export class InsertCompositionTextController extends VegaSlimmer {
           if (target.nodeType === Node.TEXT_NODE && target.parentElement) {
             const richTextNode = stateEntityRenderingRegistry.getEntityByDOM(target.parentElement);
             const newValue = target.textContent;
-            if (richTextNode instanceof RTETextNode) {
+            if (richTextNode instanceof RTETextNode &&
+              richTextNode.isContentEditable() &&
+              richTextNode.parent instanceof RTETextBlock) {
               updateFlag = this.updateCurrentNodeText(richTextNode, newValue, oldValue);
             }
             else if (newValue) {
@@ -151,7 +154,7 @@ export class InsertCompositionTextController extends VegaSlimmer {
     const index = textBlock.children.indexOf(currentNode);
     if (textBlock.children[index + 1]) {
       const newTextNode = currentNode.cloneWithText('\n');
-      textBlock.apply(new InsertNodesBeforeAction(textBlock.children[index + 1], newTextNode));
+      textBlock.apply(new InsertChildrenBeforeAction(textBlock.children[index + 1], newTextNode));
     }
   }
   /**

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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { RTEImageBlock } from '../../dto/blocks/image-block';
 import { generateUUID } from '../../../../utils/misc';
-import { AppendChildNodesAction } from '../../dto/actions/append-child-nodes-action';
+import { AppendChildrenAction } from '../../dto/actions/append-child-nodes-action';
 import { RTEImageNode } from '../../dto/nodes/image-node';
 import { InsertImageToBlockAction } from '../../dto/actions/insert-image-to-block-action';
 import StateEntityRegistry from './state-entity-rendering-registry';
@@ -27,9 +27,9 @@ export class InsertImageController extends VegaSlimmer {
     const imageBlock = new RTEImageBlock(generateUUID());
     const newImageNode = new RTEImageNode(generateUUID(), imageUrl, imageBlock);
     newImageNode.apply(new ImageAnnotationAction('md', ''));
-    imageBlock.apply(new AppendChildNodesAction([newImageNode]));
+    imageBlock.apply(new AppendChildrenAction([newImageNode]));
     if (selectedBlocks.length < 1 || this.value.children.length < 1) {
-      this.value.apply(new AppendChildNodesAction([imageBlock]));
+      this.value.apply(new AppendChildrenAction([imageBlock]));
       void this.valueController.flushChanges(this.value);
     }
     else {

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

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { RTEBlock } from '../../dto/blocks/block.abstract';
 import { debounce } from '../../../../utils/timer';
 import { RTENode } from '../../dto/nodes/node.abstract';
 import { SelectionChangeAction } from '../../dto/actions/selection-change-action';
@@ -13,7 +14,7 @@ import { InternalAnnotationTypeEnum } from '../../dto/annotations/annotation.abs
 import ShadowSelectionPolyfill from '../../../../polyfill/shadow-selection/shadow-selection-polyfill';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalRichTextEditorSelectionRangeChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaInternalRichTextEditorSelectionRangeChange, VegaInternalUpdateRTECursorPosition, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { Observer } from '../../../../helpers/change-manager/observer/observer';
 import { RTETextNode } from '../../dto/nodes/text-node';
 import { ZERO_WIDTH_SPACE } from '../../constants/constant';
@@ -22,6 +23,9 @@ import { RTESelectionState } from '../../dto/selection-state';
 import { AutoRunWhenReRenderTaskQueueSlimmer } from '../../../../helpers/slimmers/auto-run-when-re-render-task-queue-slimmer.abstract';
 import { RTECodeBlock } from '../../dto/blocks/code-block';
 import { RTECodeBlockNode } from '../../dto/nodes/code-block-node';
+import { isHTMLElement } from '../../../../utils/ui';
+import { RTEDecoratorNode } from '../../dto/nodes/decorator-node';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 /**
  * The text selection controller
  */
@@ -54,6 +58,7 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
    */
   disconnectedCallback() {
     ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalUpdateRTECursorPosition);
   }
   /**
    * Component lifecycle - [componentDidLoad]{@link VegaRichTextEditor.componentDidLoad}
@@ -61,6 +66,7 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
   componentDidLoad() {
     // eslint-disable-next-line no-restricted-globals
     document.addEventListener('selectionchange', this.handleSelectionWithDebounce);
+    this.registerUpdateCaretPositionObserver();
   }
   /**
    * Watches the internal value of the editor
@@ -182,7 +188,7 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
    * Get selected rich text
    */
   handleSelectionChange() {
-    if (this.disabled)
+    if (this.disabled || this.sourceView)
       return;
     const selection = this.getSelection();
     if (!selection || selection.rangeCount === 0)
@@ -195,6 +201,7 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
     /**
      * Rich text node filter
      *
+     * @todo refactor the function by a handlers chain https://gethired.atlassian.net/browse/VD-7132
      * @param {Node} node - Start node
      */
     const filterNode = (node) => {
@@ -209,9 +216,9 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
           return;
         }
       }
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        const entityElement = node.nodeName === 'VEGA-RICH-TEXT-IMAGE-EDITOR'
-          ? node.querySelector('img')
+      if (isHTMLElement(node)) {
+        const entityElement = RTEDecoratorNode.isDecoratorNodeContainerElement(node)
+          ? RTEDecoratorNode.getDecoratorNodeElement(node)
           : node;
         const nodeEntity = stateEntityRenderingRegistry.getEntityByDOM(entityElement);
         if (nodeEntity instanceof RTECodeBlock) {
@@ -224,6 +231,11 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
           selectedNodes.push(nodeEntity);
           return;
         }
+        // If no node is selected, try to get the nearest node from the current range and set the range to it
+        if (nodeEntity instanceof RTEBlock && range.collapsed) {
+          this.tryToFindTheNearestSelectedNode(range, selectedNodes);
+          return;
+        }
       }
       node.childNodes.forEach(filterNode);
     };
@@ -307,6 +319,61 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
       this.pendingRestoreSelectionNodes = [];
     }
   }
+  /**
+   * Register the update caret position observer.
+   */
+  registerUpdateCaretPositionObserver() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalUpdateRTECursorPosition, (payload) => {
+      const { node, updateDirectly } = payload;
+      const offset = typeof payload.offset === 'number' ? payload.offset : node.getRangeEndOffset();
+      this.enqueueSelectionRangeFutureState(node, offset, node, offset, updateDirectly);
+    });
+  }
+  /**
+   * If no node is selected, try to get the nearest node from the current range and set the range to it
+   *
+   * @param {Range} range - The current range
+   * @param {RTENode[]} selectedNodes - The selected nodes array
+   */
+  tryToFindTheNearestSelectedNode(range, selectedNodes) {
+    const { startContainer, startOffset, collapsed } = range;
+    if (selectedNodes.length === 0 && isHTMLElement(startContainer) && collapsed) {
+      const entity = stateEntityRenderingRegistry.getEntityByDOM(startContainer);
+      if (entity instanceof RTEBlock && entity.children.length >= startOffset) {
+        const nearestFocusState = this.detectNearestElement(entity, startOffset);
+        if (nearestFocusState) {
+          const { startNode, startOffset } = nearestFocusState;
+          selectedNodes.push(startNode);
+          this.currentRange = this.currentRange.updateRTERange({ startNode, endNode: startNode, startOffset, endOffset: startOffset }, range);
+        }
+      }
+    }
+  }
+  /**
+   * Detects the nearest element in the block at the given offset.
+   *
+   * @param {RTEBlock} block - The block to search within.
+   * @param {number} offset - The offset to search from.
+   * @returns {Nullable<FocusNodeRangeState>} - The detected element's range state or null if not found.
+   */
+  detectNearestElement(block, offset) {
+    if (block.children) {
+      const currentNode = block.children[offset];
+      const prevNode = block.children[offset - 1];
+      if (currentNode && currentNode instanceof RTENode) {
+        return {
+          startNode: currentNode,
+          startOffset: 0,
+        };
+      }
+      else if (prevNode && prevNode instanceof RTENode) {
+        return {
+          startNode: prevNode,
+          startOffset: prevNode.getRangeEndOffset(),
+        };
+      }
+    }
+  }
 }
 SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME = 50;
 __decorate([
@@ -324,6 +391,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], SelectionController.prototype, "sourceView", void 0);
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "valueController", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/state-entity-rendering-registry.js

@@ -5,16 +5,23 @@ class StateEntityRenderingRegistry {
   constructor() {
     this.domToEntity = new WeakMap();
     this.entityToDOM = new WeakMap();
+    this.contentEntityToRootDom = new Map();
+    this.rootDomToContentEntity = new WeakMap();
   }
   /**
    * Registers a DOM element and its corresponding entity.
    *
    * @param {HTMLElement} dom The DOM element to register.
-   * @param {RTEBlock | RTENode} entity The entity to register.
+   * @param {RTEBlock | RTENode | VegaRTEContent} entity The entity to register.
    */
   register(dom, entity) {
-    this.domToEntity.set(dom, entity);
-    this.entityToDOM.set(entity, dom);
+    if (!this.isVegaRTEContent(entity)) {
+      this.domToEntity.set(dom, entity);
+      this.entityToDOM.set(entity, dom);
+    }
+    else {
+      this.registerRootDomAndContentEntity(dom, entity);
+    }
   }
   /**
    * Retrieves the entity corresponding to a DOM element.
@@ -32,7 +39,12 @@ class StateEntityRenderingRegistry {
    * @returns {Nullable<HTMLElement>} The DOM element corresponding to the entity, or null if not found.
    */
   getDOMByEntity(entity) {
-    return this.entityToDOM.get(entity);
+    if (!this.isVegaRTEContent(entity)) {
+      return this.entityToDOM.get(entity);
+    }
+    else {
+      return this.contentEntityToRootDom.get(entity);
+    }
   }
   /**
    * Delete the dirty element to entity ref.
@@ -43,5 +55,28 @@ class StateEntityRenderingRegistry {
   removeDirtyDomRef(dom) {
     this.domToEntity.delete(dom);
   }
+  /**
+   * Bind the root dom ref and content entity.
+   *
+   * @param {HTMLElement} dom - The vega rich text editor ref.
+   * @param {VegaRTEContent} contentEntity - The rich text editor value content.
+   */
+  registerRootDomAndContentEntity(dom, contentEntity) {
+    const oldContent = this.rootDomToContentEntity.get(dom);
+    if (oldContent && oldContent !== contentEntity) {
+      this.contentEntityToRootDom.delete(oldContent);
+    }
+    this.rootDomToContentEntity.set(dom, contentEntity);
+    this.contentEntityToRootDom.set(contentEntity, dom);
+  }
+  /**
+   * Check the entity is VegaRTEContent instance.
+   *
+   * @param {VegaRTEContent | RTEBlock | RTENode} entity - The entity to check.
+   * @returns {entity is VegaRTEContent} - True if the entity is a VegaRTEContent instance, false otherwise.
+   */
+  isVegaRTEContent(entity) {
+    return entity && entity.constructor.name === 'VegaRTEContent';
+  }
 }
 export default new StateEntityRenderingRegistry();

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

@@ -16,6 +16,7 @@ import { VegaRTEContent } from '../../dto/content-state';
 import { waitForComponentDidRender } from '../../../../helpers/common';
 import { RTEEditorState } from '../../dto/editor-state';
 import { RTESelectionState } from '../../dto/selection-state';
+import stateEntityRenderingRegistry from './state-entity-rendering-registry';
 /**
  * The value controller is responsible for updating the value of the rich text editor.
  */
@@ -43,6 +44,7 @@ export class ValueController extends VegaSlimmer {
     if (this.value && !(this.value instanceof VegaRTEContent)) {
       this.value = VegaRTEContent.fromJSON(this.value);
     }
+    this.registerEditorRefAndContent();
   }
   /**
    * Watches the value of the editor and updates the internal value.
@@ -61,6 +63,7 @@ export class ValueController extends VegaSlimmer {
         detail: this.value,
       });
     }
+    this.registerEditorRefAndContent();
   }
   /**
    * Updates the value of the editor and restore the selection.
@@ -83,6 +86,14 @@ export class ValueController extends VegaSlimmer {
   isAcceptableFlushChange() {
     return true;
   }
+  /**
+   * Register the host element and the current content.
+   */
+  registerEditorRefAndContent() {
+    if (this.host && this.host.value) {
+      stateEntityRenderingRegistry.register(this.host, this.host.value);
+    }
+  }
 }
 ValueController.VALUE_CHANGE_DEBOUNCE_TIME = 50;
 __decorate([

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/toolbar-renderer.js

@@ -4,8 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { h } from '@stencil/core';
+import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import RTEDTORendererManager from '../../../../helpers/rte-manager/dto-renderer-manager';
 export class ToolbarRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -45,16 +46,42 @@ export class ToolbarRenderer extends VegaSlimmer {
     };
   }
   render() {
-    return (h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" }, this.toolbarItems.map((group) => {
-      return (h("div", { class: "toolbar-btn-group" }, group.map((item) => {
-        return this.getToolbarBtnRenderer(item).render();
+    return (h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" },
+      this.allowSourceEdit && (h(Fragment, null,
+        h("div", { class: "toolbar-btn-group" }, this.sourceEditToolbarButtonSlimmer.render()),
+        !this.sourceView && this.toolbarItems.length > 0 && this.renderVegaDivider())),
+      this.toolbarItems.map((group) => {
+        return (h("div", { class: "toolbar-btn-group" }, group.map((item) => {
+          const presetRenderer = this.getToolbarBtnRenderer(item);
+          const customRenderer = RTEDTORendererManager.getRTEToolbarButtonRenderer(item);
+          if (presetRenderer) {
+            return presetRenderer.render();
+          }
+          else if (customRenderer) {
+            return customRenderer.render(h, {
+              host: this.host,
+              rteRange: this.selectionController.getCurrentRange(),
+              sourceEditMode: this.sourceView,
+            });
+          }
+          return null;
+        })));
       })));
-    })));
+  }
+  renderVegaDivider() {
+    return (h("vega-box", { height: "size-32" },
+      h("vega-divider", { direction: "vertical" })));
   }
 }
 __decorate([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "toolbarItems", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "allowSourceEdit", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "clearStyleToolbarButtonSlimmer", void 0);
@@ -100,3 +127,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "codeBlockToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "sourceEditToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "sourceView", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bold-toolbar-button-slimmer.js

@@ -4,7 +4,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { ToolbarButtonSlimmer } from './toolbar-button-slimmer.abstract';
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
 import bold from '../../../assets/bold';
 import { MapToComponentField } from 'vega-slimmer/core';
@@ -12,7 +11,8 @@ import { BoldAnnotationAction } from '../../../dto/actions/bold-annotation-actio
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { RTETextNode } from '../../../dto/nodes/text-node';
 import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
-export class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
+export class BoldToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'bold',

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/bullets-numbers-toolbar-button-slimmer.js

@@ -4,7 +4,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { ToolbarButtonSlimmer } from '../toolbar-button-slimmer.abstract';
 import { h } from '@stencil/core';
 import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { VegaInternalIconManager } from '../../../../../../helpers/icon/internal-icon-manager';
@@ -14,7 +13,8 @@ import { BulletsToolbarButtonSlimmer } from './bullets-toolbar-button-slimmer';
 import { NumbersToolbarButtonSlimmer } from './numbers-toolbar-button-slimmer';
 import { RTEImageNode } from '../../../../dto/nodes/image-node';
 import { RTECodeBlockNode } from '../../../../dto/nodes/code-block-node';
-export class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+import { VisualModeToolbarButtonSlimmer } from '../visual-mode-toolbar-button-slimmer.abstract';
+export class BulletsNumbersToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'list-ul',

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/bullets-toolbar-button-slimmer.js

@@ -5,13 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField as MapToSlimmerField } from 'vega-slimmer/core';
-import { ToolbarButtonSlimmer } from '../toolbar-button-slimmer.abstract';
 import { RTEListItemBlock } from '../../../../dto/blocks/list-item-block';
 import { RTEImageNode } from '../../../../dto/nodes/image-node';
 import { TransformListAction } from '../../../../dto/actions/transform-list-action';
 import { TransformParagraphAction } from '../../../../dto/actions/transform-paragraph-action';
 import { RTECodeBlockNode } from '../../../../dto/nodes/code-block-node';
-export class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+import { VisualModeToolbarButtonSlimmer } from '../visual-mode-toolbar-button-slimmer.abstract';
+export class BulletsToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'list-ul',

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/numbers-toolbar-button-slimmer.js

@@ -5,13 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField as MapToSlimmerField } from 'vega-slimmer/core';
-import { ToolbarButtonSlimmer } from '../toolbar-button-slimmer.abstract';
 import { RTEListItemBlock } from '../../../../dto/blocks/list-item-block';
 import { RTEImageNode } from '../../../../dto/nodes/image-node';
 import { TransformListAction } from '../../../../dto/actions/transform-list-action';
 import { TransformParagraphAction } from '../../../../dto/actions/transform-paragraph-action';
 import { RTECodeBlockNode } from '../../../../dto/nodes/code-block-node';
-export class NumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+import { VisualModeToolbarButtonSlimmer } from '../visual-mode-toolbar-button-slimmer.abstract';
+export class NumbersToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'list-ol',

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/clear-style-toolbar-button-slimmer.js

@@ -4,7 +4,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { ToolbarButtonSlimmer } from './toolbar-button-slimmer.abstract';
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
 import TextSlash from '../../../assets/text-slash';
 import { RTETextNode } from '../../../dto/nodes/text-node';
@@ -12,7 +11,8 @@ import { MapToComponentField } from 'vega-slimmer/core';
 import { ClearFormattingAnnotationAction } from '../../../dto/actions/clear-formatting-annotation-action';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
-export class ClearStyleToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
+export class ClearStyleToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'text-slash',