@heartlandone/vega 2.35.0-RTE-preview → 2.36.0

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

@@ -4,22 +4,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { h, Host } from '@stencil/core';
 import { VegaDarkModeStyleController } from '../../../../helpers/theme/controllers/dark-mode-style-controller';
 import { TextColorToolbarButtonSlimmer } from '../../../vega-rich-text-editor/slimmers/renderers/tools/text-color-toolbar-button-slimmer';
-import { RTETextBlock } from '../../../vega-rich-text-editor/dto/blocks/text-block';
-import { RTETextBlockRenderer } from '../../../vega-rich-text-editor/dto/renderers/blocks/text-block-renderer';
-import { RTEImageBlock } from '../../../vega-rich-text-editor/dto/blocks/image-block';
-import { RTEImageBlockRenderer } from '../../../vega-rich-text-editor/dto/renderers/blocks/image-block-renderer';
-import { RTEListBlock } from '../../../vega-rich-text-editor/dto/blocks/list-block';
-import { RTEListBlockRenderer } from '../../../vega-rich-text-editor/dto/renderers/blocks/list-block-renderer';
-import { RTEListItemBlock } from '../../../vega-rich-text-editor/dto/blocks/list-item-block';
+import RTETextBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/text-block-renderer';
+import RTEImageBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/image-block-renderer';
+import RTEListBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/list-block-renderer';
+import { VegaRTEContent } from '../../../vega-rich-text-editor/dto/content-state';
 export class VegaRichTextContentRenderer extends VegaSlimmer {
   constructor() {
     super();
+    this.blockRenderers = [
+      RTETextBlockRenderer,
+      RTEImageBlockRenderer,
+      RTEListBlockRenderer,
+    ];
     VegaDarkModeStyleController.registerCustomDarkModeColor(TextColorToolbarButtonSlimmer.formatDarkModeColor());
   }
+  componentWillLoad() {
+    this.setRTEContent();
+  }
+  watchValueUpdate() {
+    this.setRTEContent();
+  }
   /**
    * Get the rich text content element
    *
@@ -31,6 +39,11 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
   render() {
     return h(Host, null, this.renderRichTextContent());
   }
+  setRTEContent() {
+    if (this.content && !(this.content instanceof VegaRTEContent)) {
+      this.content = VegaRTEContent.fromJSON(this.content);
+    }
+  }
   renderRichTextContent() {
     const showPlaceholder = this.shouldShowPlaceholder();
     return (h("div", { ref: (el) => (this.richTextContentRef = el), class: { 'showPlaceholder': showPlaceholder, 'rich-text-content': true }, "data-placeholder": this.placeholder, contenteditable: this.contentEditable }, this.renderContent()));
@@ -39,19 +52,14 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
     var _a;
     const renderContext = { editable: this.contentEditable };
     return (_a = this.content) === null || _a === void 0 ? void 0 : _a.blocks.map((block) => {
-      return this.getBlockRenderer(block, renderContext).render();
+      const blockRenderer = this.getBlockRenderer(block);
+      if (blockRenderer) {
+        return blockRenderer.render(block, renderContext);
+      }
     });
   }
-  getBlockRenderer(block, renderContext) {
-    if (block instanceof RTETextBlock && !(block instanceof RTEListItemBlock)) {
-      return new RTETextBlockRenderer(block, renderContext);
-    }
-    else if (block instanceof RTEListBlock) {
-      return new RTEListBlockRenderer(block, renderContext);
-    }
-    else if (block instanceof RTEImageBlock) {
-      return new RTEImageBlockRenderer(block, renderContext);
-    }
+  getBlockRenderer(block) {
+    return this.blockRenderers.find((renderer) => renderer.canHandle(block));
   }
   shouldShowPlaceholder() {
     var _a;
@@ -78,3 +86,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaRichTextContentRenderer.prototype, "content", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaRichTextContentRenderer.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchValueUpdate')
+], VegaRichTextContentRenderer.prototype, "watchValueUpdate", null);

package/dist/collection/components/vega-rich-text-content/vega-rich-text-content.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Element, Method, Prop, State } from '@stencil/core';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { Component, Element, Method, Prop, State, Watch } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaRichTextContentRenderer } from './slimmers/renderers/vega-rich-text-content-renderer';
@@ -28,6 +28,9 @@ export class VegaRichTextContent {
      */
     this.contentEditable = false;
   }
+  watchValueUpdate() {
+    methodPlaceholder();
+  }
   /**
    * Invoke this method to focus on rich text content editable div
    *
@@ -54,7 +57,7 @@ export class VegaRichTextContent {
   static get properties() { return {
     "content": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "VegaRTEContent",
         "resolved": "VegaRTEContent",
@@ -72,7 +75,7 @@ export class VegaRichTextContent {
             "name": "vegaVersion",
             "text": "2.34.0"
           }],
-        "text": "Specifies the text or formatted information displayed by the rich text content."
+        "text": "Specifies the text or formatted information displayed by the rich text content, which can be either VegaRTEContent or VegaRTEContentBlock.\nIt is recommended to use the VegaRTEContent type.\nOnly in exceptional cases should the original data in the VegaRTEContentBlock type be used."
       }
     }
   }; }
@@ -109,6 +112,10 @@ export class VegaRichTextContent {
     }
   }; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "content",
+      "methodName": "watchValueUpdate"
+    }]; }
 }
 __decorate([
   InjectVegaGlobalSlimmer()

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

@@ -2,22 +2,19 @@ import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-en
 import { BlockAnnotation } from '../../annotations/block-annotation.abstract';
 import { isNonNullable } from '../../../../../types/type-guard';
 export class RTEBlockRenderer {
-  constructor(block, renderContext) {
-    this.block = block;
-    this.renderContext = renderContext;
-  }
-  registerRef(ref) {
+  registerRef(ref, block) {
     if (ref) {
-      stateEntityRenderingRegistry.register(ref, this.block);
+      stateEntityRenderingRegistry.register(ref, block);
     }
   }
   /**
    * Get styles from annotations
    *
+   * @param {RTEBlock} block - RTE block entity
    * @returns {AnnotationStyle} - Annotation style
    */
-  getStyles() {
-    return Array.from(this.block.annotationMap.values())
+  getStyles(block) {
+    return Array.from(block.annotationMap.values())
       .filter((annotation) => annotation instanceof BlockAnnotation)
       .map((annotation) => annotation.render())
       .filter(isNonNullable)
@@ -26,10 +23,11 @@ export class RTEBlockRenderer {
   /**
    * Get classes from annotations
    *
+   * @param {RTEBlock} block - RTE block entity
    * @returns {AnnotationStyle} - Annotation style
    */
-  getClasses() {
-    return Array.from(this.block.annotationMap.values())
+  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

@@ -1,13 +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';
-export class RTEImageBlockRenderer extends RTEBlockRenderer {
-  constructor(block, renderContext) {
-    super(block, renderContext);
+import RTEImageNodeRenderer from '../nodes/image-node-renderer';
+class RTEImageBlockRenderer extends RTEBlockRenderer {
+  canHandle(block) {
+    return block instanceof RTEImageBlock;
   }
-  render() {
-    return (h("div", { style: Object.assign({}, super.getStyles()), ref: (ref) => super.registerRef(ref), class: super.getClasses() }, this.block.nodes.map((node) => {
-      return new RTEImageNodeRenderer(node, this.renderContext).render();
+  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

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

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

@@ -1,27 +1,13 @@
 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';
-export class RTETextBlockRenderer extends RTEBlockRenderer {
-  constructor(block, renderContext) {
-    super(block, renderContext);
+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() {
-    const BlockTag = this.getBlockTagByType(this.block.type);
-    return (h(BlockTag, { ref: (ref) => super.registerRef(ref), style: super.getStyles(), class: super.getClasses() }, this.renderNodes()));
-  }
-  renderNodes() {
-    const linkGroupAnnotation = this.block.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
-    return linkGroupAnnotation
-      ? this.renderLinkNodes(this.block.nodes, this.renderContext)
-      : this.block.nodes.map((node) => new RTETextNodeRenderer(node, this.renderContext).render());
+  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) {
@@ -38,86 +24,5 @@ export class RTETextBlockRenderer extends RTEBlockRenderer {
         return 'p';
     }
   }
-  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 new RTETextNodeRenderer(item).render();
-    });
-  }
-  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) => new RTETextNodeRenderer(node).render())));
-  }
 }
+export default new RTETextBlockRenderer();

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

@@ -6,15 +6,15 @@ import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-en
 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';
-export class RTEImageNodeRenderer extends RTENodeRenderer {
-  constructor(node, renderContext) {
-    super(node, renderContext);
-    this.handleChange = ({ detail, }) => {
+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;
-          this.node.apply(new ImageAnnotationAction(size, alt));
+          node.apply(new ImageAnnotationAction(size, alt));
           break;
         }
         /*
@@ -28,21 +28,22 @@ export class RTEImageNodeRenderer extends RTENodeRenderer {
             bubbles: true,
           });
           setTimeout(() => {
-            stateEntityRenderingRegistry.getDOMByEntity(this.node).dispatchEvent(event);
+            stateEntityRenderingRegistry.getDOMByEntity(node).dispatchEvent(event);
           }, 50);
           break;
         }
       }
     };
   }
-  render() {
-    const imageAnnotation = this.node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+  render(node, renderContext) {
+    const imageAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
     const { size, alt } = imageAnnotation || new ImageAnnotation('md', '');
-    return this.renderContext.editable ? (h("vega-rich-text-image-editor", { style: super.getStyles(), size: size, alt: alt, ref: (ref) => {
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleChange);
-      } }, this.renderImage(alt))) : (this.renderImage(alt));
+    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) {
-    return (h("img", { style: this.renderContext.editable ? { width: '100%' } : super.getStyles(), alt: alt, src: this.node.url, ref: (ref) => super.registerRef(ref) }));
+  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

@@ -1,22 +1,19 @@
 import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 import { NodeAnnotation } from '../../annotations/node-annotation.abstract';
 export class RTENodeRenderer {
-  constructor(node, renderContext) {
-    this.node = node;
-    this.renderContext = renderContext;
-  }
-  registerRef(ref) {
+  registerRef(ref, node) {
     if (ref) {
-      stateEntityRenderingRegistry.register(ref, this.node);
+      stateEntityRenderingRegistry.register(ref, node);
     }
   }
   /**
    * Get styles from annotations
    *
+   * @param {RTENode} node - The DTO node
    * @returns {AnnotationStyle} - Annotation style
    */
-  getStyles() {
-    return Array.from(this.node.annotationMap.values())
+  getStyles(node) {
+    return Array.from(node.annotationMap.values())
       .filter((annotation) => annotation instanceof NodeAnnotation)
       .map((annotation) => annotation.render())
       .filter(Boolean)
@@ -25,10 +22,11 @@ export class RTENodeRenderer {
   /**
    * Get classes from annotations
    *
+   * @param {RTENode} node - The DTO node
    * @returns {AnnotationStyle} - Annotation style
    */
-  getClasses() {
-    return Array.from(this.node.annotationMap.values())
+  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)

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

@@ -3,24 +3,22 @@ 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';
-export class RTETextNodeRenderer extends RTENodeRenderer {
-  constructor(node, renderContext) {
-    super(node, renderContext);
-  }
-  render() {
-    const codeAnnotation = this.node.annotationMap.get(NodeAnnotationTypeEnum.CODE);
+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(), class: super.getClasses(), ref: (ref) => this.registerRef(ref) }, this.node.text || ZERO_WIDTH_SPACE));
+      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(), class: super.getClasses(), ref: (ref) => this.registerRef(ref) }, this.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) {
-    super.registerRef(ref);
+  registerRef(ref, node) {
+    super.registerRef(ref, node);
     if (ref) {
-      const textColorAnnotation = this.node.getAnnotationByType('TEXT_COLOR');
+      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(),