@globalpayments/vega 2.34.1 → 2.36.0

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

@@ -1,10 +1,8 @@
-import { h } from '@stencil/core';
 import { NodeTypeEnum, RTENode } from './node.abstract';
 import { NodeAnnotation, NodeAnnotationTypeEnum } from '../annotations/node-annotation.abstract';
 import { TextSplittableAction } from '../actions/splittable-action.abstract';
 import { SelectionRangeAnnotation } from '../annotations/selection-range-annotation';
 import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
-import TextNodeElementRenderingRegistry from '../../slimmers/controllers/text-node-rendering-registry';
 import { generateUUID } from '../../../../utils/misc';
 import { InternalAnnotationTypeEnum } from '../annotations/annotation.abstract';
 import { StrikethroughAnnotation } from '../annotations/strikethrough-annotation';
@@ -28,6 +26,9 @@ import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import { ZERO_WIDTH_SPACE } from '../../constants/constant';
 import { SyncUpSelectionAction } from '../actions/sync-up-selection-action';
 import { DeleteNodeAnnotationAction } from '../actions/delete-node-annotation-action';
+/**
+ * Text node
+ */
 export class RTETextNode extends RTENode {
   constructor(id, text, parentBlock, annotationMap) {
     super(id, annotationMap);
@@ -35,6 +36,13 @@ export class RTETextNode extends RTENode {
     this.parentBlock = parentBlock;
     this.text = text;
   }
+  /**
+   * Creates an RTETextNode from a VegaRTETextNode with annotations and a parent RTETextBlock.
+   *
+   * @param {VegaRTETextNode} richText - A rich text node
+   * @param {RTETextBlock} parentBlock - Parent block
+   * @returns {RTETextNode} an RTETextNode
+   */
   static from(richText, parentBlock) {
     const textNode = new RTETextNode(richText.id, richText.text, parentBlock);
     const { annotations } = richText;
@@ -50,6 +58,14 @@ export class RTETextNode extends RTENode {
     }
     return textNode;
   }
+  /**
+   * Creates different types of text annotations based on the provided type and value.
+   *
+   * @param {keyof VegaRTETextAnnotations} type - The key of the type.
+   * @param {unknown} value - The value that will be used to create the specific type of annotation entity based on the `type` provided.
+   * @returns {Nullable<[RTENodeAnnotationMapKey, RTENodeAnnotationMapValue]>} Returning a nullable tuple containing a key and a
+   * value from the `RTENodeAnnotationMapKey` and `RTENodeAnnotationMapValue` types.
+   */
   static createAnnotationEntity(type, value) {
     switch (type) {
       case 'bold':
@@ -68,6 +84,9 @@ export class RTETextNode extends RTENode {
         return LinkAnnotation.from(value);
     }
   }
+  /**
+   * @inheritDoc
+   */
   toJSON() {
     const annotations = Array.from(this.annotationMap.values())
       .filter((annotation) => annotation instanceof NodeAnnotation)
@@ -76,19 +95,26 @@ export class RTETextNode extends RTENode {
     }, {});
     return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'text', text: this.text });
   }
+  /**
+   * Creates a new RTETextNode with the specified text and copies the parent block and annotation map from the original node.
+   *
+   * @param {string} text - The text content of the RTETextNode that will be created.
+   * @returns {RTETextNode} An new RTETextNode
+   */
   cloneWithText(text) {
     return new RTETextNode(generateUUID(), text, this.parentBlock, new Map(this.annotationMap));
   }
+  /**
+   * Checks if a node is empty
+   *
+   * @returns {boolean}  It returns `true` if the node is empty
+   */
   isEmpty() {
     return !this.text || this.text === ZERO_WIDTH_SPACE || this.text === '\n';
   }
-  render() {
-    const codeAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.CODE);
-    if (codeAnnotation === null || codeAnnotation === void 0 ? void 0 : codeAnnotation.code) {
-      return (h("code", { style: this.getStyles(), class: this.getClasses(), ref: this.registerRef.bind(this) }, this.text || ZERO_WIDTH_SPACE));
-    }
-    return (h("span", { style: this.getStyles(), class: this.getClasses(), ref: this.registerRef.bind(this) }, this.text || ZERO_WIDTH_SPACE));
-  }
+  /**
+   * @inheritDoc
+   */
   doAnnotationActionApply(action) {
     const selectionRangeAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.SELECTION_RANGE);
     if (action instanceof TextSplittableAction && action.doSplit && selectionRangeAnnotation) {
@@ -115,6 +141,9 @@ export class RTETextNode extends RTENode {
     }
     this.parentBlock.mergeNodes(action);
   }
+  /**
+   * @inheritDoc
+   */
   doModifyActionApply(action) {
     switch (action.type) {
       case ModifyContentActionType.UPDATE_TEXT:
@@ -125,19 +154,25 @@ export class RTETextNode extends RTENode {
         break;
     }
   }
-  registerRef(ref) {
-    if (ref) {
-      stateEntityRenderingRegistry.register(ref, this);
-      const textColorAnnotation = this.getAnnotationByType('TEXT_COLOR');
-      if (textColorAnnotation) {
-        TextNodeElementRenderingRegistry.register(ref, textColorAnnotation);
-      }
-    }
-  }
+  /**
+   * Split text node with range
+   *
+   * @param {TextSplittableAction} action - Annotation action
+   * @param {Range} range - Selection range
+   * @returns {RTETextNode[] | this} RTETextNode array
+   */
   splitTextNode(action, range) {
     const { startContainer, endContainer, startOffset } = range;
     const startNode = startContainer.parentElement;
     const endNode = endContainer.parentElement;
+    /**
+     * Split the text from the start offset to the end offset
+     *
+     * @param {string} text - The text string
+     * @param {number} startOffset - The start offset position
+     * @param {number} endOffset - The end offset position
+     * @returns {RTETextNode[]} - The split text node array
+     */
     const splitText = (text, startOffset, endOffset) => {
       const beforeText = text.substring(0, startOffset);
       const selectedText = text.substring(startOffset, endOffset);
@@ -166,6 +201,12 @@ export class RTETextNode extends RTENode {
       return this;
     }
   }
+  /**
+   * Apply action to node
+   *
+   * @param {RTETextNode} node - Text node
+   * @param {AnnotationAction} action - AnnotationAction
+   */
   applyActionToNode(node, action) {
     const annotation = action.toAnnotation();
     if (action instanceof SyncUpSelectionAction) {
@@ -200,6 +241,12 @@ export class RTETextNode extends RTENode {
       return;
     }
   }
+  /**
+   * Replaces the selected text within a given range with a new text in a TypeScript class.
+   *
+   * @param {string} text - The new text that will replace the currently selected text within the specified range.
+   * @param {RTERange} currentRange - A range of text within a Rich Text Editor (RTE).
+   */
   replaceSelectedText(text, currentRange) {
     if (currentRange && currentRange.startContainer && currentRange.endContainer) {
       const { startContainer, endContainer, startOffset, endOffset } = currentRange;
@@ -218,16 +265,33 @@ export class RTETextNode extends RTENode {
       this.apply(new UpdateTextAction(this.text.slice(0, startIndex) + text + this.text.slice(endIndex)));
     }
   }
+  /**
+   * Updates the text content of a node and unlink the node if it is a link node and the text is deleted.
+   *
+   * @param {string} newText - The new text string
+   */
   updateText(newText) {
     this.text = newText;
-    // The link node should be unlink when delete all text
+    // The link node should unlink when delete all text
     if (!this.text && this.isLinkNode()) {
       this.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
     }
   }
+  /**
+   * Checks if a node has an annotation with the key 'LINK'.
+   *
+   * @returns {boolean} A boolean value indicating whether the `annotationMap` has a key 'LINK'.
+   */
   isLinkNode() {
     return this.annotationMap.has('LINK');
   }
+  /**
+   * Whether a given range should be split based on various conditions within the range.
+   *
+   * @param {Range} range - Selection range
+   * @returns {boolean} Returns a boolean value indicating whether the
+   * selection range should be split.
+   */
   shouldSplitSelection(range) {
     const { startContainer, endContainer, startOffset, endOffset } = range;
     const isCrossNode = startContainer !== endContainer;
@@ -236,6 +300,11 @@ export class RTETextNode extends RTENode {
     const isPartialSelection = isPartialStart || isPartialEnd;
     return isCrossNode || isPartialSelection;
   }
+  /**
+   * Sync up the selected node by change manager
+   *
+   * @param {RTETextNode} selectedNode - The selected node
+   */
   syncUpSelectedNodes(selectedNode) {
     const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(this);
     if (currentNodeDom) {
@@ -245,6 +314,13 @@ export class RTETextNode extends RTENode {
       }
     }
   }
+  /**
+   * Insert the new node at the start offset
+   *
+   * @param {number} startOffset - The start position offset
+   * @param {AnnotationAction} action - AnnotationAction
+   * @returns {RTETextNode[]} - RTETextNode array
+   */
   insertNewNode(startOffset, action) {
     if (startOffset === 0) {
       const newNode = this.cloneWithText('');

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/block-renderer.abstract.js

@@ -0,0 +1,35 @@
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import { BlockAnnotation } from '../../annotations/block-annotation.abstract';
+import { isNonNullable } from '../../../../../types/type-guard';
+export class RTEBlockRenderer {
+  registerRef(ref, block) {
+    if (ref) {
+      stateEntityRenderingRegistry.register(ref, block);
+    }
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @param {RTEBlock} block - RTE block entity
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getStyles(block) {
+    return Array.from(block.annotationMap.values())
+      .filter((annotation) => annotation instanceof BlockAnnotation)
+      .map((annotation) => annotation.render())
+      .filter(isNonNullable)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @param {RTEBlock} block - RTE block entity
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getClasses(block) {
+    return Array.from(block.annotationMap.values())
+      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
+      .filter(isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' '), '');
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/block-text-nodes-renderer.abstract.js

@@ -0,0 +1,104 @@
+import { h } from '@stencil/core';
+import { InternalAnnotationTypeEnum } from '../../annotations/annotation.abstract';
+import { RTEBlockRenderer } from './block-renderer.abstract';
+import RTETextNodeRenderer from '../nodes/text-node-renderer';
+import { NodeAnnotationTypeEnum } from '../../annotations/node-annotation.abstract';
+import { isNonNullable } from '../../../../../types/type-guard';
+import { generateUUID } from '../../../../../utils/misc';
+import { LinkAnnotationAction } from '../../actions/link-annotation-action';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+/**
+ * Abstract class for rendering blocks that contain text nodes with support for rendering text with link styles.
+ */
+export class RTEBlockTextNodesRenderer extends RTEBlockRenderer {
+  renderNodes(block, renderContext) {
+    const linkGroupAnnotation = block.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    return linkGroupAnnotation
+      ? this.renderLinkNodes(block.nodes, renderContext)
+      : block.nodes.map((node) => RTETextNodeRenderer.render(node));
+  }
+  renderLinkNodes(nodes, { editable }) {
+    const blockNodes = this.groupNodesByLink(nodes);
+    return blockNodes.flatMap((item) => {
+      if (this.isLinkGroup(item)) {
+        const linkAnnotation = item[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+        return editable
+          ? this.renderLinkEditorWrapper(item, linkAnnotation)
+          : this.renderLink(item, linkAnnotation);
+      }
+      return RTETextNodeRenderer.render(item);
+    });
+  }
+  groupNodesByLink(nodes) {
+    return nodes.reduce((acc, node) => {
+      const nodeLinkAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+      const lastGroup = acc[acc.length - 1];
+      if (isNonNullable(nodeLinkAnnotation)) {
+        if (lastGroup &&
+          this.isLinkGroup(lastGroup) &&
+          lastGroup[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK).toEqual(nodeLinkAnnotation)) {
+          lastGroup.push(node);
+        }
+        else {
+          acc.push([node]);
+        }
+      }
+      else {
+        acc.push(node);
+      }
+      return acc;
+    }, []);
+  }
+  isLinkGroup(item) {
+    return Array.isArray(item);
+  }
+  renderLinkEditorWrapper(linkNodes, linkAnnotation) {
+    const { href } = linkAnnotation.link;
+    const textFromNodes = linkNodes.map((node) => node.text).join('');
+    const handleChange = ({ detail, }) => {
+      switch (detail.action) {
+        case 'link': {
+          const { url, text } = detail.payload;
+          const textChanged = text !== textFromNodes;
+          const groupKey = generateUUID();
+          linkNodes.forEach((node) => {
+            const linkAnnotationAction = new LinkAnnotationAction({
+              link: { href: url, groupKey: groupKey },
+              newText: textChanged ? text : undefined,
+              needMergeNode: textChanged && linkNodes.length > 1,
+              doSplit: false,
+            });
+            node.apply(linkAnnotationAction);
+          });
+          return;
+        }
+        case 'unlink': {
+          linkNodes.forEach((node) => node.deleteAnnotationByType(NodeAnnotationTypeEnum.LINK));
+          return;
+        }
+      }
+    };
+    let linkWrapperRef;
+    return (h("span", { class: "link-editor-wrapper", role: "link", tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (ref) => {
+        if (ref) {
+          linkWrapperRef = ref;
+        }
+      } },
+      this.renderLink(linkNodes, linkAnnotation),
+      h("vega-rich-text-link-editor", { record: {
+          text: textFromNodes,
+          url: href,
+        }, ref: (ref) => {
+          if (ref) {
+            ref.target = linkWrapperRef;
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
+          }
+        } })));
+  }
+  renderLink(linkNodes, linkAnnotation) {
+    const { href } = linkAnnotation.link;
+    return (h("a", { class: "v-rte--link", href: href, target: "_blank" }, linkNodes.map((node) => RTETextNodeRenderer.render(node))));
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/image-block-renderer.js

@@ -0,0 +1,15 @@
+import { h } from '@stencil/core';
+import { RTEImageBlock } from '../../blocks/image-block';
+import { RTEBlockRenderer } from './block-renderer.abstract';
+import RTEImageNodeRenderer from '../nodes/image-node-renderer';
+class RTEImageBlockRenderer extends RTEBlockRenderer {
+  canHandle(block) {
+    return block instanceof RTEImageBlock;
+  }
+  render(block, renderContext) {
+    return (h("div", { style: Object.assign({}, super.getStyles(block)), ref: (ref) => super.registerRef(ref, block), class: super.getClasses(block) }, block.nodes.map((node) => {
+      return RTEImageNodeRenderer.render(node, renderContext);
+    })));
+  }
+}
+export default new RTEImageBlockRenderer();

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/list-block-renderer.js

@@ -0,0 +1,14 @@
+import { h } from '@stencil/core';
+import { RTEBlockRenderer } from './block-renderer.abstract';
+import { RTEListBlock } from '../../blocks/list-block';
+import RTEListItemBlockRenderer from './list-item-block-renderer';
+class RTEListBlockRenderer extends RTEBlockRenderer {
+  canHandle(block) {
+    return block instanceof RTEListBlock;
+  }
+  render(block, renderContext) {
+    const BlockTag = block.type === 'number-list' ? 'ol' : 'ul';
+    return (h(BlockTag, { ref: (ref) => super.registerRef(ref, block) }, block.blocks.map((listItemBlock) => RTEListItemBlockRenderer.render(listItemBlock, renderContext))));
+  }
+}
+export default new RTEListBlockRenderer();

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/list-item-block-renderer.js

@@ -0,0 +1,14 @@
+import { h } from '@stencil/core';
+import RTEListBlockRenderer from './list-block-renderer';
+import { RTEBlockTextNodesRenderer } from './block-text-nodes-renderer.abstract';
+class RTEListItemBlockRenderer extends RTEBlockTextNodesRenderer {
+  render(block, renderContext) {
+    return (h("li", { ref: (ref) => super.registerRef(ref, block), style: super.getStyles(block), class: super.getClasses(block) },
+      super.renderNodes(block, renderContext),
+      this.renderChildren(block.children, renderContext)));
+  }
+  renderChildren(children, renderContext) {
+    return children === null || children === void 0 ? void 0 : children.map((block) => RTEListBlockRenderer.render(block, renderContext));
+  }
+}
+export default new RTEListItemBlockRenderer();

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/text-block-renderer.js

@@ -0,0 +1,28 @@
+import { h } from '@stencil/core';
+import { RTETextBlock } from '../../blocks/text-block';
+import { RTEBlockTextNodesRenderer } from './block-text-nodes-renderer.abstract';
+class RTETextBlockRenderer extends RTEBlockTextNodesRenderer {
+  canHandle(block) {
+    return block instanceof RTETextBlock;
+  }
+  render(block, renderContext) {
+    const BlockTag = this.getBlockTagByType(block.type);
+    return (h(BlockTag, { ref: (ref) => super.registerRef(ref, block), style: super.getStyles(block), class: super.getClasses(block) }, super.renderNodes(block, renderContext)));
+  }
+  getBlockTagByType(type) {
+    switch (type) {
+      case 'title':
+      case 'subtitle':
+        return `div`;
+      case 'heading-1':
+        return `h1`;
+      case 'heading-2':
+        return `h2`;
+      case 'heading-3':
+        return `h3`;
+      case 'paragraph':
+        return 'p';
+    }
+  }
+}
+export default new RTETextBlockRenderer();

package/dist/collection/components/vega-rich-text-editor/dto/renderers/nodes/image-node-renderer.js

@@ -0,0 +1,49 @@
+import { h } from '@stencil/core';
+import { ImageAnnotation } from '../../annotations/image-annotation';
+import { NodeAnnotationTypeEnum } from '../../annotations/node-annotation.abstract';
+import { ImageAnnotationAction } from '../../actions/image-annotation-action';
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { RTENodeRenderer } from './node-renderer.abstract';
+class RTEImageNodeRenderer extends RTENodeRenderer {
+  constructor() {
+    super(...arguments);
+    this.handleChange = ({ detail }, node) => {
+      switch (detail.action) {
+        case 'edit': {
+          const size = detail.payload.size;
+          const alt = detail.payload.alt;
+          node.apply(new ImageAnnotationAction(size, alt));
+          break;
+        }
+        /*
+         * The below method is e2e-test covered in
+         * @see{module:vega-rich-text-editor-image-click-delete-button}
+         */
+        /* istanbul ignore next */
+        case 'delete': {
+          const event = new InputEvent('beforeinput', {
+            inputType: 'deleteContentBackward',
+            bubbles: true,
+          });
+          setTimeout(() => {
+            stateEntityRenderingRegistry.getDOMByEntity(node).dispatchEvent(event);
+          }, 50);
+          break;
+        }
+      }
+    };
+  }
+  render(node, renderContext) {
+    const imageAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+    const { size, alt } = imageAnnotation || new ImageAnnotation('md', '');
+    return renderContext.editable ? (h("vega-rich-text-image-editor", { style: super.getStyles(node), size: size, alt: alt, ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => this.handleChange(e, node));
+      } }, this.renderImage(alt, node, renderContext))) : (this.renderImage(alt, node, renderContext));
+  }
+  renderImage(alt, node, renderContext) {
+    return (h("img", { style: renderContext.editable ? { width: '100%' } : super.getStyles(node), alt: alt, src: node.url, ref: (ref) => super.registerRef(ref, node) }));
+  }
+}
+export default new RTEImageNodeRenderer();

package/dist/collection/components/vega-rich-text-editor/dto/renderers/nodes/node-renderer.abstract.js

@@ -0,0 +1,35 @@
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import { NodeAnnotation } from '../../annotations/node-annotation.abstract';
+export class RTENodeRenderer {
+  registerRef(ref, node) {
+    if (ref) {
+      stateEntityRenderingRegistry.register(ref, node);
+    }
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @param {RTENode} node - The DTO node
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getStyles(node) {
+    return Array.from(node.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .map((annotation) => annotation.render())
+      .filter(Boolean)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @param {RTENode} node - The DTO node
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getClasses(node) {
+    return Array.from(node.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
+      .filter(Boolean)
+      .reduce((pre, cur) => [pre, cur].join(' '), '');
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/renderers/nodes/text-node-renderer.js

@@ -0,0 +1,24 @@
+import { h } from '@stencil/core';
+import { RTENodeRenderer } from './node-renderer.abstract';
+import { NodeAnnotationTypeEnum } from '../../annotations/node-annotation.abstract';
+import { ZERO_WIDTH_SPACE } from '../../../constants/constant';
+import TextNodeElementRenderingRegistry from '../../../slimmers/controllers/text-node-rendering-registry';
+class RTETextNodeRenderer extends RTENodeRenderer {
+  render(node) {
+    const codeAnnotation = node.annotationMap.get(NodeAnnotationTypeEnum.CODE);
+    if (codeAnnotation === null || codeAnnotation === void 0 ? void 0 : codeAnnotation.code) {
+      return (h("code", { style: super.getStyles(node), class: super.getClasses(node), ref: (ref) => this.registerRef(ref, node) }, node.text || ZERO_WIDTH_SPACE));
+    }
+    return (h("span", { style: super.getStyles(node), class: super.getClasses(node), ref: (ref) => this.registerRef(ref, node) }, node.text || ZERO_WIDTH_SPACE));
+  }
+  registerRef(ref, node) {
+    super.registerRef(ref, node);
+    if (ref) {
+      const textColorAnnotation = node.getAnnotationByType('TEXT_COLOR');
+      if (textColorAnnotation) {
+        TextNodeElementRenderingRegistry.register(ref, textColorAnnotation);
+      }
+    }
+  }
+}
+export default new RTETextNodeRenderer();

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

@@ -7,12 +7,14 @@ import { ImgToRTEImageBlockStrategy } from './img-to-rte-image-block-strategy';
 import { VegaImageToRTEImageBlockStrategy } from './vega-image-to-rte-image-block-strategy';
 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';
 /** Element to DTO processor */
 export class ElementToDtoStrategyProcessor {
   constructor() {
     this.elementStrategies = [
       new UlToRTEListBlockStrategy(),
       new OlToRTEListBlockStrategy(),
+      new ULNotLiChildToRTEListItemBlockStrategy(),
       new LiToRTEListItemBlockStrategy(),
       new InlineBlockToRTETextBlockStrategy(),
       new ImgToRTEImageBlockStrategy(),

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

@@ -0,0 +1,49 @@
+import { generateUUID } from '../../../../../../utils/misc';
+import { RTEListItemBlock } from '../../../../dto/blocks/list-item-block';
+import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+/** Transform child element of UL element which are not LI element to list item block DTO */
+export class ULNotLiChildToRTEListItemBlockStrategy 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) {
+    const element = elementsArray[currentIndex];
+    const parent = element.parentElement;
+    return element.nodeName !== 'LI' && parent && ['UL', 'OL'].includes(parent.nodeName) ? 1 : 0;
+  }
+  /**
+   * Parse to a list item block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - List item block.
+   */
+  handle(elementsArray) {
+    const nodes = this.generateChildNodes(elementsArray);
+    if (nodes.length === 0)
+      return null;
+    return RTEListItemBlock.from({
+      id: generateUUID(),
+      type: 'list-item',
+      nodes: nodes,
+      annotations: {},
+    });
+  }
+  /* 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/value-controller.js

@@ -34,11 +34,22 @@ export class ValueController extends VegaSlimmer {
   disconnectedCallback() {
     ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
   }
+  /**
+   * Component lifecycle - [componentWillLoad]{@link VegaRichTextEditor.componentWillLoad}
+   */
+  componentWillLoad() {
+    if (this.value && !(this.value instanceof VegaRTEContent)) {
+      this.value = VegaRTEContent.fromJSON(this.value);
+    }
+  }
   /**
    * Watches the value of the editor and updates the internal value.
    */
   watchValueUpdate() {
-    if (!this.value || this.value.blocks.length === 0) {
+    if (this.value && !(this.value instanceof VegaRTEContent)) {
+      this.value = VegaRTEContent.fromJSON(this.value);
+    }
+    else if (!this.value || this.value.blocks.length === 0) {
       this.value = VegaRTEContent.createEmptyContent();
     }
     else {
@@ -86,6 +97,9 @@ __decorate([
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], ValueController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], ValueController.prototype, "componentWillLoad", null);
 __decorate([
   MapToComponentMethod('watchValueUpdate')
 ], ValueController.prototype, "watchValueUpdate", null);