@heartlandone/vega 2.34.1 → 2.35.0-RTE-preview

package/dist/cjs/vega-radio_2.cjs.entry.js

@@ -2,40 +2,42 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
+const index = require('./index-09acd3c9.js');
 const accessibility = require('./accessibility-bfa227f6.js');
-const component = require('./component-63af66ea.js');
-const changeManager = require('./change-manager-bda1d107.js');
+const component = require('./component-73a88c4e.js');
+const changeManager = require('./change-manager-a297e4d2.js');
 const staticSubjectTitle = require('./static-subject-title-d66b88fb.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-093462f1.js');
-const ui = require('./ui-b5906704.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-019d3c00.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-a46bb411.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
+const ui = require('./ui-5fd9b267.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-9c223f73.js');
 const vegaInternalEventId = require('./vega-internal-event-id-85b68849.js');
 const requiredFieldRule = require('./required-field-rule-7f9945fa.js');
 const componentLoadRequired = require('./component-load-required-16d76afa.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-9aeabcdc.js');
-const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-03a3f79e.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-e1a6e5ad.js');
-const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-9be2a880.js');
-const mutationObserverSlimmer = require('./mutation-observer-slimmer-98bbbdf0.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-7ef32059.js');
+const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-be92f366.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-96c3c4ae.js');
+const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-feba3a83.js');
+const mutationObserverSlimmer = require('./mutation-observer-slimmer-895b3d3e.js');
 const mutationObserverFilters = require('./mutation-observer-filters-e5a7f85a.js');
-require('./dynamic-slimmer-dc30600a.js');
-require('./internal-vega-event-manager-d7643ec6.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./dom-node-subject-observer-factory-5f0eae19.js');
+require('./internal-vega-event-manager-e5e4bcf4.js');
 require('./string-21427167.js');
-require('./create-public-api-runtime-metrics-slimmer-8c6a8fb7.js');
-require('./translation-f6b7ee84.js');
-require('./page-resize-observer-slimmer-e54fa9d4.js');
+require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
+require('./translation-b9be41e0.js');
+require('./page-resize-observer-slimmer-bb1eaebe.js');
 require('./breakpoints-17d6c4c7.js');
 require('./ui-32e69595.js');
 require('./breakpoints-ebde4837.js');
 require('./array-5adef7b2.js');
 require('./number-4816603d.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./feature-flag-controller-e97b5f29.js');
+require('./feature-flag-controller-7b22e598.js');
 require('./index-8b247c17.js');
 require('./_commonjsHelpers-537d719a.js');
-require('./keyboard-manager-5afbc8f1.js');
+require('./keyboard-manager-2df53b2f.js');
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -52,8 +54,8 @@ class VegaRadioShowErrorController extends globalSlimmerRegistry.VegaSlimmer {
     this.radioGroup =
       ui.findParent(this.host, 'vega-radio-group') || ui.findParent(this.host, 'vega-selection-tile-group');
     if (this.radioGroup) {
-      this.fieldErrorObserver = new domNodeSubjectObserverFactory.Observer(this.canAcceptFieldErrorObserver.bind(this), this.fieldErrorObserverListener.bind(this));
-      changeManager.ChangeManager.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.radioGroup, vegaInternalEventId.VegaInternalFieldErrorStateChange), this.fieldErrorObserver);
+      this.fieldErrorObserver = new domNodeSubjectFactory.Observer(this.canAcceptFieldErrorObserver.bind(this), this.fieldErrorObserverListener.bind(this));
+      changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.radioGroup, vegaInternalEventId.VegaInternalFieldErrorStateChange), this.fieldErrorObserver);
     }
   }
   /**
@@ -61,7 +63,7 @@ class VegaRadioShowErrorController extends globalSlimmerRegistry.VegaSlimmer {
    */
   disconnectedCallback() {
     if (this.radioGroup) {
-      changeManager.ChangeManager.unregister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.radioGroup, vegaInternalEventId.VegaInternalFieldErrorStateChange), this.fieldErrorObserver);
+      changeManager.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.radioGroup, vegaInternalEventId.VegaInternalFieldErrorStateChange), this.fieldErrorObserver);
     }
   }
   /**
@@ -111,17 +113,17 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
 };
 const VegaRadio = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
-    this.vegaFocus = globalSlimmerRegistry.createEvent(this, "vegaFocus", 7);
-    this.focus = globalSlimmerRegistry.createEvent(this, "focus", 7);
-    this.vegaBlur = globalSlimmerRegistry.createEvent(this, "vegaBlur", 7);
-    this.blur = globalSlimmerRegistry.createEvent(this, "blur", 7);
-    this.vegaChange = globalSlimmerRegistry.createEvent(this, "vegaChange", 7);
-    this.change = globalSlimmerRegistry.createEvent(this, "change", 7);
+    index.registerInstance(this, hostRef);
+    this.vegaFocus = index.createEvent(this, "vegaFocus", 7);
+    this.focus = index.createEvent(this, "focus", 7);
+    this.vegaBlur = index.createEvent(this, "vegaBlur", 7);
+    this.blur = index.createEvent(this, "blur", 7);
+    this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
     this.globalSlimmers = {};
-    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRadio, domNodeSubjectObserverFactory.VegaChange);
-    this.focusEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRadio, domNodeSubjectObserverFactory.VegaFocus);
-    this.blurEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRadio, domNodeSubjectObserverFactory.VegaBlur);
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRadio, domNodeSubjectFactory.VegaChange);
+    this.focusEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRadio, domNodeSubjectFactory.VegaFocus);
+    this.blurEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRadio, domNodeSubjectFactory.VegaBlur);
     this.vegaRadioShowErrorController = new VegaRadioShowErrorController();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     /**
@@ -211,15 +213,15 @@ const VegaRadio = class {
     this.initAndRegisterGroupDisabledObserver();
   }
   render() {
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, { class: {
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: {
         'vega-flex-shrink-0 v-min-w-min': this.host.parentElement.nodeName == 'VEGA-RADIO-GROUP',
-      } }, globalSlimmerRegistry.h("label", { class: {
+      } }, index.h("label", { class: {
         'vega-radio-container': true,
         [this.size]: true,
         'vega-radio-checked': this.checked,
         'vega-radio-disabled': this.isDisabled(),
         'error': this.showError,
-      } }, globalSlimmerRegistry.h("input", { type: "radio", name: this.name, checked: this.checked, value: this.value, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, onChange: this.updateValue, "aria-label": this.ariaLabel || 'No label defined', disabled: this.isDisabled(), tabIndex: this.isDisabled() ? -1 : 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }), globalSlimmerRegistry.h("span", { class: "vega-radio-icon" }, globalSlimmerRegistry.h("span", { class: "vega-radio-circle" })), globalSlimmerRegistry.h("div", { class: "vega-radio-label", ref: (ref) => (this.labelElement = ref) }, globalSlimmerRegistry.h("slot", null)))), this.host);
+      } }, index.h("input", { type: "radio", name: this.name, checked: this.checked, value: this.value, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, onChange: this.updateValue, "aria-label": this.ariaLabel || 'No label defined', disabled: this.isDisabled(), tabIndex: this.isDisabled() ? -1 : 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }), index.h("span", { class: "vega-radio-icon" }, index.h("span", { class: "vega-radio-circle" })), index.h("div", { class: "vega-radio-label", ref: (ref) => (this.labelElement = ref) }, index.h("slot", null)))), this.host);
   }
   /**
    * indicating whether the component is disabled or not, single radio will take the self disabled value and the radio in group will take the self disabled and group disabled value
@@ -251,7 +253,7 @@ const VegaRadio = class {
    */
   initAndRegisterGroupDisabledObserver() {
     if (ui.findParent(this.host, 'vega-radio-group')) {
-      this.groupDisabledObserver = new domNodeSubjectObserverFactory.Observer(this.canAcceptGroupDisabledObserver.bind(this), this.groupDisabledObserverListener.bind(this));
+      this.groupDisabledObserver = new domNodeSubjectFactory.Observer(this.canAcceptGroupDisabledObserver.bind(this), this.groupDisabledObserverListener.bind(this));
       changeManager.ChangeManager.register(staticSubjectTitle.RADIO_GROUP_DISABLED_CHANGE, this.groupDisabledObserver);
     }
   }
@@ -263,7 +265,7 @@ const VegaRadio = class {
       changeManager.ChangeManager.unregister(staticSubjectTitle.RADIO_GROUP_DISABLED_CHANGE, this.groupDisabledObserver);
     }
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "checked": ["watchCheckedChange"]
   }; }
@@ -540,9 +542,9 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const VegaRadioGroup = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
-    this.vegaChange = globalSlimmerRegistry.createEvent(this, "vegaChange", 7);
-    this.change = globalSlimmerRegistry.createEvent(this, "change", 7);
+    index.registerInstance(this, hostRef);
+    this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
     this.globalSlimmers = {};
     this.formFieldController = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
       propertyRules: [
@@ -560,7 +562,7 @@ const VegaRadioGroup = class {
       validationRulesName: 'validationRules',
     });
     this.radioValueChangeObserver = new childNodesNotifyObserverSlimmer.ChildNodesNotifyObserverSlimmer(staticSubjectTitle.RADIO_VALUE_CHANGE, (payload) => this.childRadioValueChange(payload));
-    this.radioEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaChange], () => this.vegaFlexElement);
+    this.radioEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaChange], () => this.vegaFlexElement);
     this.slotMutationObserver = new mutationObserverSlimmer.MutationObserverSlimmer({
       options: { childList: true },
       mutationFilter: mutationObserverFilters.TagNameMutationFilter('VEGA-RADIO'),
@@ -572,7 +574,7 @@ const VegaRadioGroup = class {
       /* istanbul ignore next */
       () => this.radioItemsController.syncRadioArrayAndValue(),
     });
-    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRadioGroup, domNodeSubjectObserverFactory.VegaChange);
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRadioGroup, domNodeSubjectFactory.VegaChange);
     this.keyboardController = new VegaRadioGroupKeyboardController();
     this.radioItemsController = new VegaRadioGroupRadioItemsController();
     this.valueController = new VegaRadioGroupValueController();
@@ -667,18 +669,18 @@ const VegaRadioGroup = class {
     }
   }
   render() {
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, { role: "radiogroup" }, this.renderLabelDom(), globalSlimmerRegistry.h("div", { class: "vega-radio-container", ref: (e) => (this.inputContainerRef = e) }, globalSlimmerRegistry.h("vega-flex", { ref: (el) => {
+    return component.sanitizeVegaComponent(index.h(index.Host, { role: "radiogroup" }, this.renderLabelDom(), index.h("div", { class: "vega-radio-container", ref: (e) => (this.inputContainerRef = e) }, index.h("vega-flex", { ref: (el) => {
         this.vegaFlexElement = el;
-      } }, globalSlimmerRegistry.h("slot", null))), this.renderHintDom()), this.host);
+      } }, index.h("slot", null))), this.renderHintDom()), this.host);
   }
   renderLabelDom() {
-    return (this.label && (globalSlimmerRegistry.h("div", { class: "vega-label" }, globalSlimmerRegistry.h("label", { "aria-label": this.label }, this.label, this.renderRequireDom()))));
+    return (this.label && (index.h("div", { class: "vega-label" }, index.h("label", { "aria-label": this.label }, this.label, this.renderRequireDom()))));
   }
   renderRequireDom() {
-    return this.required ? globalSlimmerRegistry.h("span", { class: "vega-require" }, "*") : null;
+    return this.required ? index.h("span", { class: "vega-require" }, "*") : null;
   }
   renderHintDom() {
-    return (this.hint && (globalSlimmerRegistry.h("div", { class: "vega-hint" }, globalSlimmerRegistry.h("label", null, this.hint))));
+    return (this.hint && (index.h("div", { class: "vega-hint" }, index.h("label", null, this.hint))));
   }
   setVegaFlexProperty() {
     if (this.vegaFlexProp) {
@@ -694,7 +696,7 @@ const VegaRadioGroup = class {
   notifyGroupDisabledChange() {
     changeManager.ChangeManager.notify(staticSubjectTitle.RADIO_GROUP_DISABLED_CHANGE, { host: this.host });
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "value": ["watchValue"],
     "name": ["watchName"],

package/dist/cjs/vega-rich-text-content.cjs.entry.js

@@ -2,29 +2,313 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-019d3c00.js');
-const component = require('./component-63af66ea.js');
-const node_abstract = require('./node.abstract-f8075f84.js');
-const textColorToolbarButtonSlimmer = require('./text-color-toolbar-button-slimmer-21a166e4.js');
-const subStateObserverSlimmer = require('./sub-state-observer-slimmer-10c0d402.js');
-const ui = require('./ui-b5906704.js');
-const textNode = require('./text-node-494856f3.js');
+const index = require('./index-09acd3c9.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
+const component = require('./component-73a88c4e.js');
+const nodeAnnotation_abstract = require('./node-annotation.abstract-e5d3a859.js');
+const imageAnnotationAction = require('./image-annotation-action-d3e1699c.js');
+const listBlock = require('./list-block-91116257.js');
+const typeGuard = require('./type-guard-4ba85fdc.js');
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
+const accessibility = require('./accessibility-bfa227f6.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5f0eae19.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-b97e46b5.js');
+const ui = require('./ui-5fd9b267.js');
 require('./_commonjsHelpers-537d719a.js');
 require('./static-subject-title-d66b88fb.js');
-require('./change-manager-bda1d107.js');
-require('./dom-node-subject-observer-factory-093462f1.js');
-require('./create-public-api-runtime-metrics-slimmer-8c6a8fb7.js');
-require('./dynamic-slimmer-dc30600a.js');
+require('./change-manager-a297e4d2.js');
 require('./vega-internal-event-id-85b68849.js');
-require('./internal-icon-manager-2282a62f.js');
-require('./icon-manager-36dcfb65.js');
-require('./type-guard-4ba85fdc.js');
+require('./internal-icon-manager-5ccb9443.js');
+require('./icon-manager-edc2400b.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32e69595.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
-require('./accessibility-bfa227f6.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+
+class RTEBlockRenderer {
+  constructor(block, renderContext) {
+    this.block = block;
+    this.renderContext = renderContext;
+  }
+  registerRef(ref) {
+    if (ref) {
+      nodeAnnotation_abstract.stateEntityRenderingRegistry.register(ref, this.block);
+    }
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getStyles() {
+    return Array.from(this.block.annotationMap.values())
+      .filter((annotation) => annotation instanceof nodeAnnotation_abstract.BlockAnnotation)
+      .map((annotation) => annotation.render())
+      .filter(typeGuard.isNonNullable)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getClasses() {
+    return Array.from(this.block.annotationMap.values())
+      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
+      .filter(typeGuard.isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' '), '');
+  }
+}
+
+class RTENodeRenderer {
+  constructor(node, renderContext) {
+    this.node = node;
+    this.renderContext = renderContext;
+  }
+  registerRef(ref) {
+    if (ref) {
+      nodeAnnotation_abstract.stateEntityRenderingRegistry.register(ref, this.node);
+    }
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getStyles() {
+    return Array.from(this.node.annotationMap.values())
+      .filter((annotation) => annotation instanceof nodeAnnotation_abstract.NodeAnnotation)
+      .map((annotation) => annotation.render())
+      .filter(Boolean)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getClasses() {
+    return Array.from(this.node.annotationMap.values())
+      .filter((annotation) => annotation instanceof nodeAnnotation_abstract.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(' '), '');
+  }
+}
+
+class RTETextNodeRenderer extends RTENodeRenderer {
+  constructor(node, renderContext) {
+    super(node, renderContext);
+  }
+  render() {
+    const codeAnnotation = this.node.annotationMap.get(nodeAnnotation_abstract.NodeAnnotationTypeEnum.CODE);
+    if (codeAnnotation === null || codeAnnotation === void 0 ? void 0 : codeAnnotation.code) {
+      return (index.h("code", { style: super.getStyles(), class: super.getClasses(), ref: (ref) => this.registerRef(ref) }, this.node.text || listBlock.ZERO_WIDTH_SPACE));
+    }
+    return (index.h("span", { style: super.getStyles(), class: super.getClasses(), ref: (ref) => this.registerRef(ref) }, this.node.text || listBlock.ZERO_WIDTH_SPACE));
+  }
+  registerRef(ref) {
+    super.registerRef(ref);
+    if (ref) {
+      const textColorAnnotation = this.node.getAnnotationByType('TEXT_COLOR');
+      if (textColorAnnotation) {
+        imageAnnotationAction.TextNodeRenderingRegistry.register(ref, textColorAnnotation);
+      }
+    }
+  }
+}
+
+class RTETextBlockRenderer extends RTEBlockRenderer {
+  constructor(block, renderContext) {
+    super(block, renderContext);
+  }
+  render() {
+    const BlockTag = this.getBlockTagByType(this.block.type);
+    return (index.h(BlockTag, { ref: (ref) => super.registerRef(ref), style: super.getStyles(), class: super.getClasses() }, this.renderNodes()));
+  }
+  renderNodes() {
+    const linkGroupAnnotation = this.block.getAnnotationByType(nodeAnnotation_abstract.InternalAnnotationTypeEnum.LINK_GROUP);
+    return linkGroupAnnotation
+      ? this.renderLinkNodes(this.block.nodes, this.renderContext)
+      : this.block.nodes.map((node) => new RTETextNodeRenderer(node, this.renderContext).render());
+  }
+  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';
+    }
+  }
+  renderLinkNodes(nodes, { editable }) {
+    const blockNodes = this.groupNodesByLink(nodes);
+    return blockNodes.flatMap((item) => {
+      if (this.isLinkGroup(item)) {
+        const linkAnnotation = item[0].getAnnotationByType(nodeAnnotation_abstract.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(nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK);
+      const lastGroup = acc[acc.length - 1];
+      if (typeGuard.isNonNullable(nodeLinkAnnotation)) {
+        if (lastGroup &&
+          this.isLinkGroup(lastGroup) &&
+          lastGroup[0].getAnnotationByType(nodeAnnotation_abstract.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 = createPublicApiRuntimeMetricsSlimmer.generateUUID();
+          linkNodes.forEach((node) => {
+            const linkAnnotationAction = new listBlock.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(nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK));
+          return;
+        }
+      }
+    };
+    let linkWrapperRef;
+    return (index.h("span", { class: "link-editor-wrapper", role: "link", tabIndex: 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick(), ref: (ref) => {
+        if (ref) {
+          linkWrapperRef = ref;
+        }
+      } },
+      this.renderLink(linkNodes, linkAnnotation),
+      index.h("vega-rich-text-link-editor", { record: {
+          text: textFromNodes,
+          url: href,
+        }, ref: (ref) => {
+          if (ref) {
+            ref.target = linkWrapperRef;
+            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaChange, handleChange);
+          }
+        } })));
+  }
+  renderLink(linkNodes, linkAnnotation) {
+    const { href } = linkAnnotation.link;
+    return (index.h("a", { class: "v-rte--link", href: href, target: "_blank" }, linkNodes.map((node) => new RTETextNodeRenderer(node).render())));
+  }
+}
+
+class RTEImageNodeRenderer extends RTENodeRenderer {
+  constructor(node, renderContext) {
+    super(node, renderContext);
+    this.handleChange = ({ detail, }) => {
+      switch (detail.action) {
+        case 'edit': {
+          const size = detail.payload.size;
+          const alt = detail.payload.alt;
+          this.node.apply(new imageAnnotationAction.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(() => {
+            nodeAnnotation_abstract.stateEntityRenderingRegistry.getDOMByEntity(this.node).dispatchEvent(event);
+          }, 50);
+          break;
+        }
+      }
+    };
+  }
+  render() {
+    const imageAnnotation = this.node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.IMAGE);
+    const { size, alt } = imageAnnotation || new listBlock.ImageAnnotation('md', '');
+    return this.renderContext.editable ? (index.h("vega-rich-text-image-editor", { style: super.getStyles(), size: size, alt: alt, ref: (ref) => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaChange, this.handleChange);
+      } }, this.renderImage(alt))) : (this.renderImage(alt));
+  }
+  renderImage(alt) {
+    return (index.h("img", { style: this.renderContext.editable ? { width: '100%' } : super.getStyles(), alt: alt, src: this.node.url, ref: (ref) => super.registerRef(ref) }));
+  }
+}
+
+class RTEImageBlockRenderer extends RTEBlockRenderer {
+  constructor(block, renderContext) {
+    super(block, renderContext);
+  }
+  render() {
+    return (index.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();
+    })));
+  }
+}
+
+class RTEListItemBlockRenderer extends RTETextBlockRenderer {
+  constructor(block, renderContext) {
+    super(block, renderContext);
+  }
+  render() {
+    return (index.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());
+  }
+}
+
+class RTEListBlockRenderer extends RTEBlockRenderer {
+  constructor(block, renderContext) {
+    super(block, renderContext);
+  }
+  render() {
+    const BlockTag = this.block.type === 'number-list' ? 'ol' : 'ul';
+    return (index.h(BlockTag, { ref: (ref) => super.registerRef(ref) }, this.block.blocks.map((listItemBlock) => new RTEListItemBlockRenderer(listItemBlock, this.renderContext).render())));
+  }
+}
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -35,7 +319,7 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 class VegaRichTextContentRenderer extends globalSlimmerRegistry.VegaSlimmer {
   constructor() {
     super();
-    node_abstract.VegaDarkModeStyleController.registerCustomDarkModeColor(textColorToolbarButtonSlimmer.TextColorToolbarButtonSlimmer.formatDarkModeColor());
+    nodeAnnotation_abstract.VegaDarkModeStyleController.registerCustomDarkModeColor(imageAnnotationAction.TextColorToolbarButtonSlimmer.formatDarkModeColor());
   }
   /**
    * Get the rich text content element
@@ -46,15 +330,29 @@ class VegaRichTextContentRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return this.richTextContentRef;
   }
   render() {
-    return globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, this.renderRichTextContent());
+    return index.h(index.Host, null, this.renderRichTextContent());
   }
   renderRichTextContent() {
     const showPlaceholder = this.shouldShowPlaceholder();
-    return (globalSlimmerRegistry.h("div", { ref: (el) => (this.richTextContentRef = el), class: { 'showPlaceholder': showPlaceholder, 'rich-text-content': true }, "data-placeholder": this.placeholder, contenteditable: this.contentEditable }, this.renderContent()));
+    return (index.h("div", { ref: (el) => (this.richTextContentRef = el), class: { 'showPlaceholder': showPlaceholder, 'rich-text-content': true }, "data-placeholder": this.placeholder, contenteditable: this.contentEditable }, this.renderContent()));
   }
   renderContent() {
     var _a;
-    return (_a = this.content) === null || _a === void 0 ? void 0 : _a.blocks.map((block) => block.render({ editable: this.contentEditable }));
+    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();
+    });
+  }
+  getBlockRenderer(block, renderContext) {
+    if (block instanceof listBlock.RTETextBlock && !(block instanceof listBlock.RTEListItemBlock)) {
+      return new RTETextBlockRenderer(block, renderContext);
+    }
+    else if (block instanceof listBlock.RTEListBlock) {
+      return new RTEListBlockRenderer(block, renderContext);
+    }
+    else if (block instanceof listBlock.RTEImageBlock) {
+      return new RTEImageBlockRenderer(block, renderContext);
+    }
   }
   shouldShowPlaceholder() {
     var _a;
@@ -133,7 +431,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const VegaRichTextContent = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.vegaRichTextContentRenderer = new VegaRichTextContentRenderer();
@@ -154,13 +452,13 @@ const VegaRichTextContent = class {
     this.vegaRichTextContentRenderer.getRichTextContentRef().focus();
     const richTextEditorRef = ui.findParent(this.host, 'vega-rich-text-editor');
     if (richTextEditorRef) {
-      await textNode.waitForComponentDidRender(richTextEditorRef);
+      await listBlock.waitForComponentDidRender(richTextEditorRef);
     }
   }
   render() {
     return component.sanitizeVegaComponent(this.vegaRichTextContentRenderer.render(), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
 };
 __decorate([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()