@heartlandone/vega 2.49.0 → 2.50.0-RTE-preview

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

@@ -16,6 +16,7 @@ import { InsertBlocksBeforeAction } from '../../dto/actions/insert-blocks-before
 import { generateUUID } from '../../../../utils/misc';
 import { AppendChildNodesAction } from '../../dto/actions/append-child-nodes-action';
 import { UpdateTextAction } from '../../dto/actions/update-text-action';
+import { RTECodeBlockNode } from '../../dto/nodes/code-block-node';
 /**
  * The `DeleteSelectedNodesController` class provides methods to delete selected nodes.
  */
@@ -68,7 +69,10 @@ 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.type !== 'IMAGE') {
+        if (item instanceof RTECodeBlockNode) {
+          return item !== startNode;
+        }
+        else if (item.type !== 'IMAGE') {
           return item !== startNode && item !== endNode;
         }
         else {
@@ -82,7 +86,8 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
     this.removeRangeStartAndEndSelectedText();
     /**
      * if the range start node is image and the item is selected, so we need remove the image item, the image block will be removed if the item is the only item.
-     * 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
+     * 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 &&
@@ -100,6 +105,12 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
         return startNode.parentBlock.nodes[0];
       }
     }
+    else if (startNode instanceof RTECodeBlockNode) {
+      const paragraph = this.createEmptyParagraph();
+      startNode.parentBlock.parent.apply(new InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
+      startNode.parentBlock.apply(new RemoveChildAction(startNode));
+      return paragraph.nodes[0];
+    }
     return startNode;
   }
   /**
@@ -149,7 +160,9 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
               endRTENode.parentBlock.apply(new RemoveChildAction(endRTENode.parentBlock.nodes[0]));
             }
           }
-          if (startRTENode.parentBlock !== endRTENode.parentBlock) {
+          if (startRTENode instanceof RTETextNode &&
+            endRTENode instanceof RTETextNode &&
+            startRTENode.parentBlock !== endRTENode.parentBlock) {
             startRTENode.parentBlock.apply(new AppendChildNodesAction(endBlock.nodes));
             endBlock.nodes = [];
           }
@@ -170,7 +183,9 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
   shouldMergeTextNode(nodeA, nodeB) {
     const { annotations: annotationsA } = nodeA.toJSON();
     const { annotations: annotationsB } = nodeB.toJSON();
-    return JSON.stringify(annotationsA) === JSON.stringify(annotationsB);
+    return (nodeA instanceof RTETextNode &&
+      nodeB instanceof RTETextNode &&
+      JSON.stringify(annotationsA) === JSON.stringify(annotationsB));
   }
 }
 __decorate([

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 {HTMLElement[]} 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,50 +70,152 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
       annotations.textAlign = textAlign;
     if (indent)
       annotations.indent = indent;
+    this.generateCommonAnnotations(element, annotations);
     return annotations;
   }
   /**
-   * Check is a invalid text node.
+   * Obtain the custom attributes of element, excluding 'style' and 'class'.
    *
-   * @param {HTMLElement} element - Current node element.
-   * @returns {boolean} - boolean.
+   * @param {HTMLElement} element - current element.
+   * @param {string[]} attributes - the custom attributes of current element.
+   * @returns {Record<string, string>} - Record<string, string>.
    */
-  isInvalidTextNode(element) {
-    if (element.nodeValue && element.nodeValue.includes('\t')) {
-      const value = element.nodeValue.replace(/\n|\t/gm, '');
-      if (value.length === 0)
-        return true;
-    }
-    return false;
+  generateCustomAttrAnnotations(element, attributes) {
+    return attributes.reduce((acc, item) => {
+      acc[item] = element.getAttribute(item);
+      return acc;
+    }, {});
   }
   /**
-   * Generate annotations map for text node element.
+   * 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 | VegaRTECodeAnnotations} - Text node 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.
+   * @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.
+   *
+   * @param {HTMLElement} element - Current node element.
+   * @returns {boolean} - boolean.
+   */
+  isInvalidTextNode(element) {
+    if (element.nodeValue && element.nodeValue.includes('\t')) {
+      const value = element.nodeValue.replace(/\n|\t/gm, '');
+      if (value.length === 0)
+        return true;
+    }
+    return false;
+  }
   /**
    * Is code element.
    *
@@ -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);
+    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))),
+      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 */
   /**