@globalpayments/vega 2.58.0 → 2.59.0

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/delete-selected-nodes-controller.js

@@ -8,13 +8,12 @@ import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-sli
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaInternalRichTextEditDeleteSelectedNodes } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { RTETextNode } from '../../dto/nodes/text-node';
-import { RemoveChildAction } from '../../dto/actions/remove-child-action';
+import { RemoveChildrenAction } from '../../dto/actions/remove-child-action';
 import { ReplaceSelectedTextAction } from '../../dto/actions/replace-selected-text-action';
-import { RTEImageNode } from '../../dto/nodes/image-node';
 import { RTETextBlock } from '../../dto/blocks/text-block';
-import { InsertBlocksBeforeAction } from '../../dto/actions/insert-blocks-before-block';
+import { InsertChildrenBeforeAction } from '../../dto/actions/insert-children-before-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 { UpdateTextAction } from '../../dto/actions/update-text-action';
 import { RTECodeBlockNode } from '../../dto/nodes/code-block-node';
 /**
@@ -69,18 +68,16 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
     if (selectedNodes.length > 1) {
       // Remove all selected nodes except start node and end node(the end image node will be removed), the start node need to get the index of the block
       const shouldRemovedItems = selectedNodes.filter((item) => {
-        if (item instanceof RTECodeBlockNode) {
-          return item !== startNode;
-        }
-        else if (item.type !== 'IMAGE') {
+        if (item.isContentEditable()) {
           return item !== startNode && item !== endNode;
         }
         else {
-          return item !== startNode && (item !== endNode || (item === endNode && endOffset !== 0));
+          return (item !== startNode &&
+            (item !== endNode || this.isEndNodeFullyInTheRange(endNode, endOffset, item)));
         }
       });
       shouldRemovedItems.forEach((item) => {
-        item.parent.apply(new RemoveChildAction(item));
+        item.parent.apply(new RemoveChildrenAction(item));
       });
     }
     this.removeRangeStartAndEndSelectedText();
@@ -89,28 +86,21 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
      * but before remove the image block, we need insert a paragraph to make sure the start block and start node could be get correct before insert text or break paragraph action.
      * the code block node should do the same logic.
      */
-    if (startNode instanceof RTEImageNode &&
-      startOffset !== 1 &&
-      (endNode !== startNode || endOffset !== 0)) {
+    if (!startNode.isContentEditable() &&
+      this.isStartNodeFullyInTheRange(startNode, endNode, startOffset, endOffset)) {
       // the image block will be deleted when the image is the only item
       if (startNode.parent.children.length === 1) {
         const paragraph = this.createEmptyParagraph();
-        startNode.parent.parent.apply(new InsertBlocksBeforeAction(startNode.parent, paragraph));
-        startNode.parent.apply(new RemoveChildAction(startNode));
+        startNode.parent.parent.apply(new InsertChildrenBeforeAction(startNode.parent, paragraph));
+        startNode.parent.apply(new RemoveChildrenAction(startNode));
         return paragraph.children[0];
       }
       else if (startNode === startNode.parent.children[0]) {
         // the start node should be the next image item if the image is first item
-        startNode.parent.apply(new RemoveChildAction(startNode));
+        startNode.parent.apply(new RemoveChildrenAction(startNode));
         return startNode.parent.children[0];
       }
     }
-    else if (startNode instanceof RTECodeBlockNode) {
-      const paragraph = this.createEmptyParagraph();
-      startNode.parent.parent.apply(new InsertBlocksBeforeAction(startNode.parent, paragraph));
-      startNode.parent.apply(new RemoveChildAction(startNode));
-      return paragraph.children[0];
-    }
     return startNode;
   }
   /**
@@ -119,10 +109,11 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
   removeRangeStartAndEndSelectedText() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     const currentRange = this.selectionController.getCurrentRange();
-    if (selectedNodes[0] instanceof RTETextNode) {
+    if (selectedNodes[0] instanceof RTETextNode && selectedNodes[0].isContentEditable()) {
       selectedNodes[0].apply(new ReplaceSelectedTextAction('', currentRange));
     }
-    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof RTETextNode) {
+    const endNode = selectedNodes[selectedNodes.length - 1];
+    if (selectedNodes.length > 1 && endNode instanceof RTETextNode && endNode.isContentEditable()) {
       selectedNodes[selectedNodes.length - 1].apply(new ReplaceSelectedTextAction('', currentRange));
     }
   }
@@ -134,7 +125,7 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
   createEmptyParagraph() {
     const paragraph = new RTETextBlock(generateUUID(), 'paragraph');
     const textNode = new RTETextNode(`${paragraph.id}1`, '', paragraph);
-    paragraph.apply(new AppendChildNodesAction([textNode]));
+    paragraph.apply(new AppendChildrenAction([textNode]));
     return paragraph;
   }
   /**
@@ -154,20 +145,20 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
           if (this.shouldMergeTextNode(startRTENode, endRTENode)) {
             startRTENode.apply(new UpdateTextAction(startRTENode.text + endRTENode.text));
             if (startRTENode.parent === endRTENode.parent) {
-              startRTENode.parent.apply(new RemoveChildAction(endRTENode));
+              startRTENode.parent.apply(new RemoveChildrenAction(endRTENode));
             }
             else {
-              endRTENode.parent.apply(new RemoveChildAction(endRTENode.parent.children[0]));
+              endRTENode.parent.apply(new RemoveChildrenAction(endRTENode.parent.children[0]));
             }
           }
           if (startRTENode instanceof RTETextNode &&
             endRTENode instanceof RTETextNode &&
             startRTENode.parent !== endRTENode.parent) {
-            startRTENode.parent.apply(new AppendChildNodesAction(endBlock.children));
+            startRTENode.parent.apply(new AppendChildrenAction(endBlock.children));
             endBlock.children = [];
           }
           if (endBlock.children.length < 1) {
-            endBlock.parent.apply(new RemoveChildAction(endBlock));
+            endBlock.parent.apply(new RemoveChildrenAction(endBlock));
           }
         }
       }
@@ -187,6 +178,39 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
       nodeB instanceof RTETextNode &&
       JSON.stringify(annotationsA) === JSON.stringify(annotationsB));
   }
+  /**
+   * Check the decorator node is fully in the range end.
+   *
+   * @param {RTENode} rangeEndNode - The end node of the range
+   * @param {number} endOffset - The end offset of the range
+   * @param {RTENode<RTEBlock>} checkedNode - The checked decorator node
+   * @returns {boolean} - Whether the end node is fully within the range
+   */
+  isEndNodeFullyInTheRange(rangeEndNode, endOffset, checkedNode) {
+    if (checkedNode instanceof RTECodeBlockNode) {
+      return true;
+    }
+    else {
+      return checkedNode === rangeEndNode && endOffset !== 0;
+    }
+  }
+  /**
+   * Check if the start decorator node is fully in the range.
+   *
+   * @param {RTENode<RTEBlock>} rangeStartNode - The start node of the range
+   * @param {RTENode} rangeEndNode - The end node of the range
+   * @param {number} startOffset - The start offset of the range
+   * @param {number} endOffset - The end offset of the range
+   * @returns {boolean} - Whether the start node is fully within the range
+   */
+  isStartNodeFullyInTheRange(rangeStartNode, rangeEndNode, startOffset, endOffset) {
+    if (rangeStartNode instanceof RTECodeBlockNode) {
+      return true;
+    }
+    else {
+      return startOffset === 0 && (rangeEndNode !== rangeStartNode || endOffset !== 0);
+    }
+  }
 }
 __decorate([
   MapToComponentField()

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

@@ -8,7 +8,7 @@ import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import stateEntityRenderingRegistry from './state-entity-rendering-registry';
 import { RTETextBlock } from '../../dto/blocks/text-block';
 import { generateUUID } from '../../../../utils/misc';
-import { InsertBlocksAfterAction } from '../../dto/actions/insert-blocks-after-block';
+import { InsertChildrenAfterAction } from '../../dto/actions/insert-children-after-block';
 /**
  * Focus controller for RTE
  */
@@ -21,7 +21,14 @@ export class FocusController extends VegaSlimmer {
      * @param {RTEContentBlock} lastBlock - The last block of the content
      */
     this.doFocusOnLastTextNode = async (lastBlock) => {
-      this.setCaretRangeToNodeEnd(stateEntityRenderingRegistry.getDOMByEntity(lastBlock.getLastNode()).firstChild);
+      const lastNode = lastBlock.getLastNode();
+      const dom = stateEntityRenderingRegistry.getDOMByEntity(lastNode);
+      if (!lastNode.isContentEditable()) {
+        this.setCaretRangeToNodeEnd(dom.parentElement, lastNode.getRangeEndOffset());
+      }
+      else {
+        this.setCaretRangeToNodeEnd(dom.firstChild, dom.firstChild.nodeValue.length);
+      }
       await this.vegaRichTextEditorRenderer.getRichTextContentRef().vegaFocus();
     };
   }
@@ -40,7 +47,7 @@ export class FocusController extends VegaSlimmer {
         type: 'paragraph',
         nodes: [{ id: generateUUID(), type: 'text', text: '' }],
       });
-      lastBlock.parent.apply(new InsertBlocksAfterAction(lastBlock, newTextBlock));
+      lastBlock.parent.apply(new InsertChildrenAfterAction(lastBlock, newTextBlock));
       await this.valueController.flushChanges(this.value);
       await this.doFocusOnLastTextNode(newTextBlock);
     }
@@ -52,10 +59,11 @@ export class FocusController extends VegaSlimmer {
    * Move the caret to the end of the node
    *
    * @param {Node} targetNode - The node to move the caret to
+   * @param {number} offset - The offset to move the caret to
    */
-  setCaretRangeToNodeEnd(targetNode) {
+  setCaretRangeToNodeEnd(targetNode, offset) {
     const range = new Range();
-    range.setStart(targetNode, targetNode.nodeValue.length);
+    range.setStart(targetNode, offset);
     this.selectionController.setSelectionRange(range);
   }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/annotation-generator-strategy.abstract.js

@@ -0,0 +1,5 @@
+/**
+ * Abstract class to define handler for generate the annotations
+ */
+export class AnnotationGeneratorStrategyAbstract {
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/bold-annotaion-handler.js

@@ -0,0 +1,33 @@
+import { AnnotationGeneratorStrategyAbstract } from './annotation-generator-strategy.abstract';
+/** Handle bold annotation */
+export class BoldAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element, parentAnnotations = {}) {
+    return this.isBold(element) || parentAnnotations.bold ? { bold: true } : {};
+  }
+  /**
+   * Is bold element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isBold(element) {
+    return (element.nodeName === 'STRONG' ||
+      element.nodeName === 'B' ||
+      element.style.fontWeight === 'bold' ||
+      element.style.fontWeight === '700' ||
+      element.classList.contains('v-rte--bold'));
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/code-annotation-handler.js

@@ -0,0 +1,33 @@
+import { AnnotationGeneratorStrategyAbstract } from './annotation-generator-strategy.abstract';
+/** Handle code annotation */
+export class CodeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element, parentAnnotations = {}) {
+    return this.isCode(element) || parentAnnotations.code ? { code: true } : {};
+  }
+  /**
+   * Is code element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isCode(element) {
+    return (element.classList.contains('v-rte--code') ||
+      element.nodeName === 'CODE' ||
+      element.nodeName === 'PRE' ||
+      element.style.fontFamily === 'monospace' ||
+      element.style.fontFamily.replace(/["']/g, '') === 'Roboto Mono');
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/color-annotation-handler.js

@@ -0,0 +1,49 @@
+import { rgbToHex } from '../../../../../../../utils/ui';
+import { RTE_DEFAULT_TEXT_COLOR, RTE_TEXT_COLORS } from '../../../../../constants/constant';
+import { AnnotationGeneratorStrategyAbstract } from './annotation-generator-strategy.abstract';
+/** Handle color annotation */
+export class ColorAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element, parentAnnotations = {}) {
+    const color = this.getColor(element) || parentAnnotations.textColor;
+    return color ? { textColor: color } : {};
+  }
+  /**
+   * Get current color of element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<string>} - color.
+   */
+  getColor(element) {
+    var _a;
+    const color = element.style.color;
+    const hexColor = (_a = rgbToHex(color)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+    if (hexColor) {
+      // We don't display default text color as inline style, because we defined it in the vega-rich-text-content.scss.
+      const colorSchema = RTE_TEXT_COLORS.filter((item) => item.key !== RTE_DEFAULT_TEXT_COLOR.key).find((schema) => schema.light === hexColor || schema.dark === hexColor);
+      if (colorSchema)
+        return colorSchema.key;
+      return null;
+    }
+    else {
+      for (const color of RTE_TEXT_COLORS) {
+        if (element.style.color.includes(color.key)) {
+          return color.key;
+        }
+      }
+      return null;
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/custom-attribute-annotation-handler.js

@@ -0,0 +1,48 @@
+import { AnnotationGeneratorStrategyAbstract } from './annotation-generator-strategy.abstract';
+/** Handle custom attribute annotation */
+export class CustomAttributeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @param {HtmlElementToAnnotationGenerateOptions} [options] - Options for annotation generator.
+   * @returns {boolean} - .
+   */
+  canHandle(targetDto, options) {
+    return !options.skipCustomAnnotations && !!targetDto;
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element) {
+    const attributes = this.getAttributes(element);
+    return Object.keys(attributes).length > 0 ? { customAttribute: attributes } : {};
+  }
+  /**
+   * Obtain the custom attributes of element, excluding 'style' and 'class'.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Record<string, string>} - Record<string, string>.
+   */
+  getAttributes(element) {
+    const attributeNames = element
+      .getAttributeNames()
+      .filter((attr) => attr !== 'style' && attr !== 'class' && this.isValidAttr(attr));
+    return attributeNames.reduce((acc, item) => {
+      acc[item] = element.getAttribute(item);
+      return acc;
+    }, {});
+  }
+  /**
+   * Check if the attribute name is valid.
+   *
+   * @param {string} attr - Attribute name.
+   * @returns {boolean} - True if valid, false otherwise.
+   */
+  isValidAttr(attr) {
+    return /^[a-zA-Z_][\w-]*$/.test(attr);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/custom-class-annotation-handler.js

@@ -0,0 +1,36 @@
+import { AnnotationGeneratorStrategyAbstract } from './annotation-generator-strategy.abstract';
+/** Handle custom class annotation */
+export class CustomClassAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @param {HtmlElementToAnnotationGenerateOptions} [options] - Options for annotation generator.
+   * @returns {boolean} - .
+   */
+  canHandle(targetDto, options) {
+    return !options.skipCustomAnnotations && !!targetDto;
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element) {
+    const classes = this.getCustomClass(element);
+    return classes.length > 0 ? { customClass: classes } : {};
+  }
+  /**
+   * Get the custom class
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {string[]} - the class after .
+   */
+  getCustomClass(element) {
+    return element.classList
+      .toString()
+      .split(' ')
+      .filter((item) => !item.includes('v-rte') && item !== '');
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/custom-style-annotation-handler.js

@@ -0,0 +1,48 @@
+import { dashCaseToCamel } from '../../../../../../../utils/string';
+import { AnnotationGeneratorStrategyAbstract } from './annotation-generator-strategy.abstract';
+/** Handle custom style annotation */
+export class CustomStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @param {HtmlElementToAnnotationGenerateOptions} [options] - Options for annotation generator.
+   * @returns {boolean} - .
+   */
+  canHandle(targetDto, options) {
+    return !options.skipCustomAnnotations && !!targetDto;
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element) {
+    const styles = this.generateCustomStyleAnnotations(element);
+    return Object.keys(styles).length > 0 ? { customStyle: styles } : {};
+  }
+  /**
+   * Obtain and format the style of element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {AnnotationStyle} - Record<string, string>.
+   */
+  generateCustomStyleAnnotations(element) {
+    const customStyle = element.getAttribute('style');
+    if (!customStyle)
+      return {};
+    const styleValue = customStyle.split(';').filter(Boolean);
+    return styleValue
+      .filter((key) => key !== ' ')
+      .map((key) => {
+      // to remove redundant quote pairs if needed, for example: ['fontFamily: "Roboto Mono"'] will be updated to ['fontFamily: Roboto Mono']
+      const styleObject = key.replace(/(['"])(.*?)\1/g, '$2').split(':');
+      const styleKey = dashCaseToCamel(styleObject[0].trim());
+      return {
+        [styleKey]: styleObject[1].trim().replace(';', ''),
+      };
+    })
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator.js

@@ -0,0 +1,66 @@
+import { BoldAnnotationHandler } from './bold-annotaion-handler';
+import { CustomAttributeAnnotationHandler } from './custom-attribute-annotation-handler';
+import { CustomClassAnnotationHandler } from './custom-class-annotation-handler';
+import { CustomStyleAnnotationHandler } from './custom-style-annotation-handler';
+import { IndentAnnotationHandler } from './indent-annotation-handler';
+import { TextAlignAnnotationHandler } from './text-align-annotation-handler';
+import { CodeAnnotationHandler } from './code-annotation-handler';
+import { ColorAnnotationHandler } from './color-annotation-handler';
+import { ItalicAnnotationHandler } from './italic-annotation-handler';
+import { LinkAnnotationHandler } from './link-annotation-handler';
+import { StrikeThroughAnnotationHandler } from './strike-through-annotation-handler';
+import { UnderlineAnnotationHandler } from './underline-annotation-handler';
+import { TextStyleAnnotationHandler } from './text-style-annotation-handler';
+import { ImageSizeAnnotationHandler } from './image-size-annotation-handler';
+import { ImageAltAnnotationHandler } from './image-alt-annotation-handler';
+import { InlineHtmlAnnotationHandler } from './inline-html-annotation-handler';
+/** Html element to annotations generator */
+class HtmlElementToAnnotationGenerator {
+  constructor() {
+    this.handlers = [
+      new TextAlignAnnotationHandler(),
+      new IndentAnnotationHandler(),
+      new BoldAnnotationHandler(),
+      new ItalicAnnotationHandler(),
+      new UnderlineAnnotationHandler(),
+      new StrikeThroughAnnotationHandler(),
+      new ColorAnnotationHandler(),
+      new LinkAnnotationHandler(),
+      new CodeAnnotationHandler(),
+      new ImageSizeAnnotationHandler(),
+      new ImageAltAnnotationHandler(),
+      new CustomAttributeAnnotationHandler(),
+      new CustomClassAnnotationHandler(),
+      new CustomStyleAnnotationHandler(),
+      new LinkAnnotationHandler(),
+      new TextStyleAnnotationHandler(),
+      new InlineHtmlAnnotationHandler(),
+    ];
+  }
+  /**
+   * The function generates annotations for a given target DTO and HTML element based on a set of
+   * strategies.
+   *
+   * @typedef T class name of target DTO
+   * @typedef V generated annotations type
+   * @param {T} targetDto - Which DTO is the generated annotations to set.
+   * @param {HTMLElement} element - Current html element.
+   * @param {HtmlElementToAnnotationGenerateOptions} [options] - Options
+   * @returns {V} Generated annotations.
+   */
+  generate(targetDto, element, options = { autoMatchFormat: true }) {
+    const isLinkElement = element.tagName === 'A';
+    return this.handlers
+      .filter((handler) => !options.autoMatchFormat && isLinkElement ? handler instanceof LinkAnnotationHandler : true)
+      .filter((handler) => element.nodeType !== Node.TEXT_NODE &&
+      handler.canHandle(targetDto, {
+        skipCustomAnnotations: options.skipCustomAnnotations || isLinkElement,
+        autoMatchFormat: options.autoMatchFormat,
+      }))
+      .reduce((annotations, handler) => {
+      const result = handler.handle(element, options.parentAnnotations);
+      return Object.assign(Object.assign({}, annotations), result);
+    }, {});
+  }
+}
+export default new HtmlElementToAnnotationGenerator();

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/image-alt-annotation-handler.js

@@ -0,0 +1,19 @@
+import { AnnotationGeneratorStrategyAbstract } from './annotation-generator-strategy.abstract';
+/** Handle image alt annotation */
+export class ImageAltAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTEImageNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTEImageAnnotations} - Annotation.
+   */
+  handle(element) {
+    return element.hasAttribute('alt') ? { alt: element.getAttribute('alt') } : {};
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/image-size-annotation-handler.js

@@ -0,0 +1,32 @@
+import { AnnotationGeneratorStrategyAbstract } from './annotation-generator-strategy.abstract';
+/** Handle image size annotation */
+export class ImageSizeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTEImageNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTEImageAnnotations} - Annotation.
+   */
+  handle(element) {
+    const size = this.getImageSize(element);
+    return size ? { size: size } : {};
+  }
+  /**
+   * Determine the image display size based on the width of the current element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<VegaRichTextImageEditorSizeType>} -Image size, default 'md'.
+   */
+  getImageSize(element) {
+    if (element.getAttribute('data-size')) {
+      return element.getAttribute('data-size');
+    }
+    return null;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/indent-annotation-handler.js

@@ -0,0 +1,53 @@
+import { AnnotationGeneratorStrategyAbstract } from './annotation-generator-strategy.abstract';
+/** Handle indent annotation */
+export class IndentAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.name);
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTEBlockAnnotations} - Annotation.
+   */
+  handle(element) {
+    const indent = this.getIndent(element);
+    return indent ? { indent: indent } : {};
+  }
+  /**
+   * Get indent of current element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<number>} - Indent.
+   */
+  getIndent(element) {
+    const style = element.style;
+    let marginLeft;
+    if (style.marginLeft) {
+      marginLeft = style.marginLeft;
+    }
+    else if (style.margin) {
+      const margins = style.margin.split(' ');
+      switch (margins.length) {
+        case 4:
+          marginLeft = margins[3];
+          break;
+        case 2:
+        case 3:
+          marginLeft = margins[1];
+          break;
+        default:
+          marginLeft = margins[0];
+          break;
+      }
+    }
+    else {
+      return null;
+    }
+    const marginLeftNumber = Number(marginLeft.replace('px', ''));
+    return marginLeftNumber && marginLeftNumber >= 0 ? Math.floor(marginLeftNumber / 16) : null;
+  }
+}