@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

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

@@ -1,4 +1,16 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
 import { generateUUID } from '../../../../../../utils/misc';
+import { dashCaseToCamel } from '../../../../../../utils/string';
 import { rgbToHex } from '../../../../../../utils/ui';
 import { RTE_TEXT_COLORS } from '../../../../constants/constant';
 import { ElementToDTOStrategy } from './element-to-dto-strategy.abstract';
@@ -22,7 +34,7 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
    *   </li>
    *
    * @param {HTMLElement[]} elements - Child elements.
-   * @param {VegaRTETextAnnotations | VegaRTECodeAnnotations} annotations - Parent annotations.
+   * @param {VegaRTETextAnnotations} annotations - Parent annotations.
    * @returns {VegaRTETextNode[]} - Text node DTO.
    */
   generateChildNodes(elements, annotations = {}) {
@@ -39,7 +51,7 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
         });
       }
       else {
-        childNodes.push(...this.generateChildNodes(Array.from(child.childNodes), Object.assign({}, annotations, this.generateTextNodeAnnotations(child, annotations))));
+        childNodes.push(...this.generateChildNodes(Array.from(child.childNodes), this.inheritAndGenerateTextNodeAnnotations(child, annotations)));
       }
     });
     return childNodes;
@@ -58,36 +70,138 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
       annotations.textAlign = textAlign;
     if (indent)
       annotations.indent = indent;
+    this.generateCommonAnnotations(element, annotations);
     return annotations;
   }
+  /**
+   * Obtain the custom attributes of element, excluding 'style' and 'class'.
+   *
+   * @param {HTMLElement} element - current element.
+   * @param {string[]} attributes - the custom attributes of current element.
+   * @returns {Record<string, string>} - Record<string, string>.
+   */
+  generateCustomAttrAnnotations(element, attributes) {
+    return attributes.reduce((acc, item) => {
+      acc[item] = element.getAttribute(item);
+      return acc;
+    }, {});
+  }
+  /**
+   * Obtain and format the style of element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {AnnotationStyle} - Record<string, string>.
+   */
+  generateCustomStyleAnnotations(element) {
+    const customStyle = element.getAttribute('style');
+    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|[^\1])*?)\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)), {});
+  }
+  /**
+   * Inherit annotation from block should not include custom annotation.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {VegaRTETextAnnotations} - Inherit node annotations.
+   */
+  generateBlockInheritAnnotations(element) {
+    const annotations = this.generateTextNodeAnnotations(element);
+    return this.filterOutCustomAnnotation(annotations);
+  }
+  /**
+   * Generate custom attribute, custom class and custom style annotation.
+   *
+   * @param {HTMLElement} element - current element.
+   * @param {VegaRTEBlockAnnotations} annotations - current element.
+   * @returns {VegaRTETextAnnotations} - Inherit node annotations.
+   */
+  generateCommonAnnotations(element, annotations = {}) {
+    const customAttributes = this.getCustomAttributeName(element);
+    const customClass = this.getCustomClass(element);
+    if (customAttributes.length > 0)
+      annotations.customAttribute = this.generateCustomAttrAnnotations(element, customAttributes);
+    if (customClass.length > 0)
+      annotations.customClass = customClass;
+    if (element.getAttribute('style'))
+      annotations.customStyle = this.generateCustomStyleAnnotations(element);
+    return annotations;
+  }
+  /**
+   * Inherit and generate text node annotations.
+   *
+   * @param {HTMLElement} element - current element.
+   * @param {VegaRTETextAnnotations} parentAnnotations - parent annotations
+   * @returns {VegaRTETextAnnotations} - Inherit node annotations.
+   */
+  inheritAndGenerateTextNodeAnnotations(element, parentAnnotations) {
+    const inheritedAnnotation = this.filterOutCustomAnnotation(parentAnnotations);
+    const currentNodeAnnotation = this.generateTextNodeAnnotations(element);
+    parentAnnotations.bold && (currentNodeAnnotation.bold = true);
+    parentAnnotations.underline && (currentNodeAnnotation.underline = true);
+    parentAnnotations.italic && (currentNodeAnnotation.italic = true);
+    parentAnnotations.strikethrough && (currentNodeAnnotation.strikethrough = true);
+    return Object.assign({}, inheritedAnnotation, currentNodeAnnotation);
+  }
   /**
    * Generate annotations map for text node element.
    *
    * @param {HTMLElement} element - current element.
-   * @param {VegaRTETextAnnotations | VegaRTECodeAnnotations} parentAnnotations - parent annotations
-   * @returns {VegaRTETextAnnotations | VegaRTECodeAnnotations} - Text node annotations.
+   * @returns {VegaRTETextAnnotations} - Text node annotations.
    */
-  generateTextNodeAnnotations(element, parentAnnotations = {}) {
-    if (this.isCode(element))
-      return { code: true };
+  generateTextNodeAnnotations(element) {
     const annotations = {
       bold: this.isBold(element),
       italic: this.isItalic(element),
       underline: this.isUnderline(element),
       strikethrough: this.isStrikethrough(element),
+      code: this.isCode(element),
     };
-    parentAnnotations.bold && (annotations.bold = true);
-    parentAnnotations.underline && (annotations.underline = true);
-    parentAnnotations.italic && (annotations.italic = true);
-    parentAnnotations.strikethrough && (annotations.strikethrough = true);
     const color = this.getColor(element);
     const link = this.getLink(element);
     if (color)
       annotations.textColor = color;
-    if (link)
+    // while have link, the custom attribute, class and style have already generated in link annotation,
+    // so we not need generate it again.
+    if (link) {
       annotations.link = link;
+    }
+    else {
+      this.generateCommonAnnotations(element, annotations);
+    }
     return annotations;
   }
+  /**
+   * Filter out custom annotations.
+   *
+   * @param {VegaRTETextAnnotations} annotations - Annotations.
+   * @returns {VegaRTETextAnnotations} - Filtered annotations.
+   */
+  filterOutCustomAnnotation(annotations) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { customAttribute, customClass, customStyle } = annotations, filteredAnnotation = __rest(annotations, ["customAttribute", "customClass", "customStyle"]);
+    return filteredAnnotation;
+  }
+  /**
+   * 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 !== '');
+  }
   /**
    * Check is a invalid text node.
    *
@@ -111,6 +225,7 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
   isCode(element) {
     return (element.classList.contains('v-rte--code') ||
       element.nodeName === 'CODE' ||
+      element.nodeName === 'PRE' ||
       element.style.fontFamily === 'monospace');
   }
   /**
@@ -123,7 +238,8 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
     return (element.nodeName === 'STRONG' ||
       element.nodeName === 'B' ||
       element.style.fontWeight === 'bold' ||
-      element.style.fontWeight === '700');
+      element.style.fontWeight === '700' ||
+      element.classList.contains('v-rte--bold'));
   }
   /**
    * Is italic element.
@@ -132,7 +248,10 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
    * @returns {boolean} - boolean.
    */
   isItalic(element) {
-    return element.nodeName === 'I' || element.style.fontStyle === 'italic' || element.nodeName === 'EM';
+    return (element.nodeName === 'I' ||
+      element.style.fontStyle === 'italic' ||
+      element.nodeName === 'EM' ||
+      element.classList.contains('v-rte--italic'));
   }
   /**
    * Is underline element.
@@ -191,10 +310,22 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
    */
   getLink(element) {
     if (element.nodeName === 'A') {
-      return {
+      const link = {
         href: element.href,
         groupKey: generateUUID(),
       };
+      const customAttributes = this.getCustomAttributeName(element);
+      const customClass = this.getCustomClass(element);
+      if (customAttributes.length > 0) {
+        link.customAttribute = this.generateCustomAttrAnnotations(element, customAttributes);
+      }
+      if (customClass.length > 0) {
+        link.customClass = customClass;
+      }
+      if (element.getAttribute('style')) {
+        link.customStyle = this.generateCustomStyleAnnotations(element);
+      }
+      return link;
     }
     return null;
   }
@@ -265,4 +396,13 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
     const marginLeftNumber = Number(marginLeft.replace('px', ''));
     return marginLeftNumber && marginLeftNumber >= 0 ? Math.floor(marginLeftNumber / 16) : null;
   }
+  /**
+   * Get custom attribute of current element, excluding 'style' and 'class'.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {string[]} - Text align.
+   */
+  getCustomAttributeName(element) {
+    return element.getAttributeNames().filter((attr) => attr !== 'style' && attr !== 'class');
+  }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/continue-inline-to-rte-text-block-strategy.js

@@ -33,7 +33,7 @@ export class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrateg
    */
   handle(elementsArray) {
     const parent = elementsArray[0].parentElement;
-    const nodes = this.generateChildNodes(elementsArray, this.generateTextNodeAnnotations(parent));
+    const nodes = this.generateChildNodes(elementsArray, this.generateBlockInheritAnnotations(parent));
     if (nodes.length === 0)
       return null;
     return RTETextBlock.from({
@@ -71,4 +71,5 @@ ContinueInlineToRTETextBlockStrategy.canHandleTags = [
   'B',
   'INS',
   'DEL',
+  'PRE',
 ];

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

@@ -8,14 +8,18 @@ import { VegaImageToRTEImageBlockStrategy } from './vega-image-to-rte-image-bloc
 import { OlToRTEListBlockStrategy } from './ol-to-rte-list-block-strategy';
 import { SpanImageToRTEImageBlockStrategy } from './span-img-to-rte-image-block-strategy';
 import { ULNotLiChildToRTEListItemBlockStrategy } from './ul-not-li-child-to-rte-list-item-block';
+import { VegaCodeBlockToRTECodeBlockStrategy } from './vega-code-block-to-rte-code-block-strategy';
+import { JiraCodeToRTECodeBlockStrategy } from './jira-code-to-rte-code-block-strategy';
 /** Element to DTO processor */
-export class ElementToDtoStrategyProcessor {
+class ElementToDtoStrategyProcessor {
   constructor() {
     this.elementStrategies = [
       new UlToRTEListBlockStrategy(),
       new OlToRTEListBlockStrategy(),
       new ULNotLiChildToRTEListItemBlockStrategy(),
       new LiToRTEListItemBlockStrategy(),
+      new VegaCodeBlockToRTECodeBlockStrategy(),
+      new JiraCodeToRTECodeBlockStrategy(),
       new InlineBlockToRTETextBlockStrategy(),
       new ImgToRTEImageBlockStrategy(),
       new VegaImageToRTEImageBlockStrategy(),
@@ -70,3 +74,4 @@ export class ElementToDtoStrategyProcessor {
     return ['META', 'BUTTON', 'STYLE'].includes(element.nodeName);
   }
 }
+export default new ElementToDtoStrategyProcessor();

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/element-to-rte-image-block-strategy.abstract.js

@@ -0,0 +1,38 @@
+import { generateUUID } from '../../../../../../utils/misc';
+import { RTEImageBlock } from '../../../../dto/blocks/image-block';
+import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+/** Abstract class for block html element to RTE block dto */
+export class ElementToRTEImageBlockStrategyAbstract extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Determine the image display size based on the width of the current element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {VegaRichTextImageEditorSizeType} -Image size, default 'md'.
+   */
+  getImageSize(element) {
+    if (element.getAttribute('data-size'))
+      return element.getAttribute('data-size');
+    return 'md';
+  }
+  /**
+   * Create a RTE Image block according to the img element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {RTEImageBlock} -RTE Image block.
+   */
+  createRTEImageBlock(element) {
+    return RTEImageBlock.from({
+      id: generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: generateUUID(),
+          type: 'image',
+          url: element.src,
+          annotations: Object.assign({ size: this.getImageSize(element), alt: element.alt }, this.generateCommonAnnotations(element)),
+        },
+      ],
+      annotations: this.generateBlockAnnotations(element.parentElement),
+    });
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/img-to-rte-image-block-strategy.js

@@ -1,8 +1,6 @@
-import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
-import { generateUUID } from '../../../../../../utils/misc';
-import { RTEImageBlock } from '../../../../dto/blocks/image-block';
+import { ElementToRTEImageBlockStrategyAbstract } from './element-to-rte-image-block-strategy.abstract';
 /** Transform img element to image block DTO */
-export class ImgToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+export class ImgToRTEImageBlockStrategy extends ElementToRTEImageBlockStrategyAbstract {
   /**
    * Can be handle.
    *
@@ -21,22 +19,7 @@ export class ImgToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract
    */
   handle(elementsArray) {
     const element = elementsArray[0];
-    return RTEImageBlock.from({
-      id: generateUUID(),
-      type: 'image',
-      nodes: [
-        {
-          id: generateUUID(),
-          type: 'image',
-          url: element.src,
-          annotations: {
-            size: 'md',
-            alt: element.alt,
-          },
-        },
-      ],
-      annotations: this.generateBlockAnnotations(element),
-    });
+    return this.createRTEImageBlock(element);
   }
   /* istanbul ignore next */
   /**

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/inline-block-to-rte-text-block-strategy.js

@@ -31,7 +31,7 @@ export class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAb
    * @returns {Nullable<RTEContentBlock>} - Text block.
    */
   handle(elementsArray) {
-    const nodes = this.generateChildNodes(elementsArray);
+    const nodes = this.generateChildNodes(Array.from(elementsArray[0].childNodes));
     if (nodes.length === 0)
       return null;
     return RTETextBlock.from({
@@ -56,16 +56,47 @@ export class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAb
     return false;
   }
   /**
-   * Get node type of element.
+   * Get the node type of element. The element type is determined in the following
+   * order: "data-type" attribute, node name, font size and class name.
    *
    * @param {HTMLElement} element - element.
    * @returns {string} - node type.
    */
   getElementType(element) {
-    var _a;
+    const byDataType = this.getElementTypeByDataType(element);
+    if (byDataType)
+      return byDataType;
+    const byNodeName = this.getElementTypeByNodeName(element);
+    if (byNodeName)
+      return byNodeName;
+    const byFontSize = this.getElementTypeByFontSize(element);
+    if (byFontSize)
+      return byFontSize;
+    const byClassName = this.getElementTypeByClassName(element);
+    if (byClassName)
+      return byClassName;
+    return 'paragraph';
+  }
+  /**
+   * Get the element type by data-type attribute.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<string>} - element type or null if not found.
+   */
+  getElementTypeByDataType(element) {
     if (element.nodeType !== Node.TEXT_NODE && element.hasAttribute('data-type')) {
       return element.getAttribute('data-type');
     }
+    return null;
+  }
+  /**
+   * Get the element type by font size.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<string>} - element type or null if not found.
+   */
+  getElementTypeByFontSize(element) {
+    var _a;
     switch ((_a = element.style) === null || _a === void 0 ? void 0 : _a.fontSize) {
       case '36px':
         return 'title';
@@ -78,8 +109,16 @@ export class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAb
       case '18px':
         return 'heading-3';
       default:
-        break;
+        return null;
     }
+  }
+  /**
+   * Get the element type by node name.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<string>} - element type or null if not found.
+   */
+  getElementTypeByNodeName(element) {
     switch (element.nodeName) {
       case 'H1':
         return 'heading-1';
@@ -94,7 +133,22 @@ export class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAb
       case 'H6':
         return 'heading-6';
       default:
-        return '';
+        return null;
+    }
+  }
+  /**
+   * Get the element type by class name.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<string>} - element type or null if not found.
+   */
+  getElementTypeByClassName(element) {
+    if (element.className) {
+      const match = /\bv-rte--text-style-(title|subtitle|heading-1|heading-2|heading-3|paragraph)\b/.exec(element.className);
+      if (match) {
+        return match[1];
+      }
     }
+    return null;
   }
 }

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

@@ -0,0 +1,54 @@
+import { generateUUID } from '../../../../../../utils/misc';
+import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+import { RTECodeBlock } from '../../../../dto/blocks/code-block';
+/** Transform other editor code element which has attribute data-language to RTE code block DTO */
+export class JiraCodeToRTECodeBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return (elementsArray[currentIndex].tagName === 'PRE' ||
+      elementsArray[currentIndex].tagName === 'CODE') &&
+      elementsArray[currentIndex].hasAttribute('data-language')
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a code block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTECodeBlock>} - Code block.
+   */
+  handle(elementsArray) {
+    const codeRef = elementsArray[0];
+    if (codeRef) {
+      const content = codeRef.textContent;
+      const language = codeRef.dataset
+        .language;
+      return RTECodeBlock.from({
+        id: generateUUID(),
+        type: 'code-block',
+        content,
+        language,
+      });
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/li-to-rte-list-item-block-strategy.js

@@ -25,7 +25,7 @@ export class LiToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstrac
     return RTEListItemBlock.from({
       id: generateUUID(),
       type: 'list-item',
-      nodes: this.generateChildNodes(Array.from(elementsArray[0].childNodes).filter((item) => !['UL', 'OL'].includes(item.nodeName)), this.generateTextNodeAnnotations(elementsArray[0])),
+      nodes: this.generateChildNodes(Array.from(elementsArray[0].childNodes).filter((item) => !['UL', 'OL'].includes(item.nodeName)), this.generateBlockInheritAnnotations(elementsArray[0])),
       annotations: this.generateBlockAnnotations(elementsArray[0]),
     });
   }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/ol-to-rte-list-block-strategy.js

@@ -1,5 +1,6 @@
 import { generateUUID } from '../../../../../../utils/misc';
 import { RTEListBlock } from '../../../../dto/blocks/list-block';
+import { RTEListItemBlock } from '../../../../dto/blocks/list-item-block';
 import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
 /** Transform ol element to list block DTO */
 export class OlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
@@ -33,10 +34,10 @@ export class OlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
    * Append child list item blocks to current list block.
    *
    * @param {RTEListBlock} currentBlock - Current list block.
-   * @param {RTEListItemBlock[]} childBlocks - Current list item blocks.
+   * @param {RTEContentBlock[]} childBlocks - Current list item blocks.
    */
   appendChildBlocks(currentBlock, childBlocks) {
-    currentBlock.blocks = childBlocks;
+    currentBlock.blocks = childBlocks.filter((block) => block instanceof RTEListItemBlock);
     childBlocks.forEach((block) => (block.parent = currentBlock));
   }
   /**

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/span-img-to-rte-image-block-strategy.js

@@ -1,8 +1,6 @@
-import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
-import { generateUUID } from '../../../../../../utils/misc';
-import { RTEImageBlock } from '../../../../dto/blocks/image-block';
+import { ElementToRTEImageBlockStrategyAbstract } from './element-to-rte-image-block-strategy.abstract';
 /** Transform img in span or other inline element to image block DTO */
-export class SpanImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+export class SpanImageToRTEImageBlockStrategy extends ElementToRTEImageBlockStrategyAbstract {
   /**
    * Can be handle.
    *
@@ -26,22 +24,7 @@ export class SpanImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbs
    */
   handle(elementsArray) {
     const element = elementsArray[0].querySelector('img');
-    return RTEImageBlock.from({
-      id: generateUUID(),
-      type: 'image',
-      nodes: [
-        {
-          id: generateUUID(),
-          type: 'image',
-          url: element.src,
-          annotations: {
-            size: 'md',
-            alt: element.alt,
-          },
-        },
-      ],
-      annotations: this.generateBlockAnnotations(element),
-    });
+    return this.createRTEImageBlock(element);
   }
   /* istanbul ignore next */
   /**

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/ul-not-li-child-to-rte-list-item-block.js

@@ -1,3 +1,4 @@
+import { isNonNullable } from '../../../../../../types/type-guard';
 import { generateUUID } from '../../../../../../utils/misc';
 import { RTEListItemBlock } from '../../../../dto/blocks/list-item-block';
 import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
@@ -13,7 +14,12 @@ export class ULNotLiChildToRTEListItemBlockStrategy extends BlockToRTEBlockStrat
   canHandle(elementsArray, currentIndex) {
     const element = elementsArray[currentIndex];
     const parent = element.parentElement;
-    return element.nodeName !== 'LI' && parent && ['UL', 'OL'].includes(parent.nodeName) ? 1 : 0;
+    const isLiNode = element.nodeName !== 'LI';
+    // while child is empty text node like newline or empty string, we should not covert it.
+    const isEmptyNode = element.nodeType === Node.TEXT_NODE && element.textContent.trim() === '';
+    // The node must be in list item.
+    const isInList = isNonNullable(parent) && ['UL', 'OL'].includes(parent.nodeName);
+    return isLiNode && !isEmptyNode && isInList ? 1 : 0;
   }
   /**
    * Parse to a list item block.
@@ -23,8 +29,6 @@ export class ULNotLiChildToRTEListItemBlockStrategy extends BlockToRTEBlockStrat
    */
   handle(elementsArray) {
     const nodes = this.generateChildNodes(elementsArray);
-    if (nodes.length === 0)
-      return null;
     return RTEListItemBlock.from({
       id: generateUUID(),
       type: 'list-item',

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/ul-to-rte-list-block-strategy.js

@@ -1,5 +1,6 @@
 import { generateUUID } from '../../../../../../utils/misc';
 import { RTEListBlock } from '../../../../dto/blocks/list-block';
+import { RTEListItemBlock } from '../../../../dto/blocks/list-item-block';
 import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
 /** Transform ul element to list block DTO */
 export class UlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
@@ -33,10 +34,10 @@ export class UlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
    * Append child list item blocks to current list block.
    *
    * @param {RTEListBlock} currentBlock - Current list block.
-   * @param {RTEListItemBlock[]} childBlocks - Current list item blocks.
+   * @param {RTEContentBlock[]} childBlocks - Current list item blocks.
    */
   appendChildBlocks(currentBlock, childBlocks) {
-    currentBlock.blocks = childBlocks;
+    currentBlock.blocks = childBlocks.filter((block) => block instanceof RTEListItemBlock);
     childBlocks.forEach((block) => (block.parent = currentBlock));
   }
   /**